/* Página pública Métricas — extiende tokens de main.css */
.page-metrics main.metrics-page-main{
  padding-top:calc(var(--nav-h, 76px) + 32px);
  padding-bottom:64px;
}
.metrics-sec{
  padding-top:8px;
}
.metrics-banner{
  margin:0 0 16px;
  padding:12px 16px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
  border:1px solid var(--bd);
}
.metrics-banner--demo{
  background:linear-gradient(135deg, rgba(217,119,6,.12), rgba(129,91,239,.08));
  border-color:rgba(217,119,6,.35);
  color:var(--ink);
}
.metrics-banner--empty{
  background:rgba(247,250,240,.85);
  color:var(--ink-soft);
}
.metrics-banner--live{
  background:rgba(111,168,4,.1);
  border-color:rgba(111,168,4,.35);
}
.metrics-period{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 20px;
}
.metrics-period button{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--bd);
  background:rgba(255,255,255,.35);
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.metrics-period button.is-active,
.metrics-period button[aria-selected="true"]{
  border-color:rgba(129,91,239,.45);
  color:var(--green-ink);
  background:rgba(111,168,4,.08);
}
.metrics-block{
  margin-bottom:28px;
}
.metrics-block:last-child{
  margin-bottom:16px;
}
.metrics-block__title{
  font-family:var(--font-display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:400;
  margin:0 0 8px;
  color:var(--ink);
}
.metrics-block__sub{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 14px;
  max-width:62ch;
}
.metrics-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.metrics-kpi__label{
  font-size:12.5px;
  line-height:1.35;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.metrics-kpi__value{
  font-size:clamp(28px, 3vw, 38px)!important;
  margin:0;
}
.metrics-kpi__hint{
  font-size:11.5px;
  color:var(--amber);
  margin:6px 0 0;
}
.metrics-kpi--empty .proof-num{
  opacity:.45;
}
.metrics-formula{
  margin-top:10px;
  font-size:12px;
  color:var(--ink-soft);
}
.metrics-formula summary{
  cursor:pointer;
  color:var(--lila-d);
  font-weight:500;
}
.metrics-funnel{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:720px;
}
.metrics-funnel__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:14px;
}
.metrics-funnel__head strong{
  margin-left:auto;
  font-family:var(--font-mono);
}
.metrics-funnel__rate{
  font-size:12px;
  color:var(--lila-d);
  font-family:var(--font-mono);
}
.metrics-funnel__bar{
  height:10px;
  border-radius:999px;
  background:rgba(129,91,239,.08);
  overflow:hidden;
}
.metrics-funnel__bar i{
  display:block;
  height:100%;
  width:var(--w, 0%);
  border-radius:inherit;
  background:linear-gradient(90deg, var(--green-d), var(--lila));
  transition:width .6s var(--ease-out);
}
.metrics-prod{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.metrics-prod-row{
  display:grid;
  grid-template-columns:minmax(140px, 200px) 1fr;
  gap:12px 20px;
  align-items:center;
}
.metrics-prod-label{
  font-size:13px;
  font-weight:600;
  margin:0;
}
.metrics-prod-bars{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.metrics-prod-bar{
  height:28px;
  border-radius:10px;
  width:var(--w, 0%);
  min-width:4px;
  max-width:100%;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:11px;
  font-family:var(--font-mono);
  color:var(--green-ink);
  transition:width .5s var(--ease-out);
}
.metrics-prod-bar--manual{
  background:rgba(129,91,239,.15);
  border:1px solid rgba(129,91,239,.25);
}
.metrics-prod-bar--saas{
  background:rgba(111,168,4,.18);
  border:1px solid rgba(111,168,4,.3);
}
.metrics-prod-bar span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.metrics-empty-inline{
  font-size:14px;
  color:var(--ink-soft);
  padding:16px;
  border:1px dashed var(--bd);
  border-radius:14px;
}
.metrics-meta{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.metrics-table-wrap{
  overflow-x:auto;
  border:1px solid var(--bd);
  border-radius:16px;
  background:rgba(255,255,255,.5);
}
.metrics-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.metrics-table th{
  text-align:left;
  font-weight:600;
  padding:12px 16px;
  border-bottom:1px solid var(--bd);
  vertical-align:top;
  width:34%;
}
.metrics-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--bd);
  vertical-align:top;
}
.metrics-td-val{
  font-family:var(--font-mono);
  font-weight:600;
  white-space:nowrap;
}
.metrics-td-formula details{
  font-size:12px;
  color:var(--ink-soft);
}
.metrics-disclaimer{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--bd);
  max-width:62ch;
}
.metrics-chart{
  width:100%;
  max-width:100%;
  height:220px;
  border:1px solid var(--bd);
  border-radius:16px;
  background:rgba(247,250,240,.6);
}

@media (max-width:1100px){
  .metrics-kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:600px){
  .metrics-kpi-grid{grid-template-columns:1fr}
  .metrics-prod-row{grid-template-columns:1fr}
  .metrics-table th,.metrics-table td{padding:10px 12px;font-size:13px}
}

[data-theme="dark"] .metrics-table-wrap{
  background:rgba(17,22,19,.65);
}
[data-theme="dark"] .metrics-banner--empty{
  background:rgba(17,22,19,.8);
}
[data-theme="dark"] .metrics-chart{
  background:rgba(12,16,13,.75);
}