/* Panel CSS (app.html). Extraído del <style> inline del head (25/06) — vive aquí para no mezclar
   CSS con el JSX. Carga DESPUÉS de styles.css: consume sus tokens (--teal, --surface, --ink…),
   no los redefine. Mismo lenguaje visual que landing.html/resultado.html (control-room + teal). */

body{background:var(--bg)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* compat: encabezados reutilizados por bloques que conservan su estructura (cuenta, reanalyze, ficheros) */
h2.sec{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:34px 0 14px}
h3.t{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px;font-weight:700}
.chev-ic{transition:transform .15s;display:inline-block;font-size:11px}.chev-ic.open{transform:rotate(180deg)}
.filecard .sub{font-size:12.5px;color:var(--muted);display:block;margin:4px 0 0;line-height:1.4}

/* ════════ APP SHELL ════════ */
/* Sin sidebar (24/06): ni agencia ni negocio único la necesitan — la navegación vive en la
   barra superior (ptabs) o, en agencia, todo cabe en una sola pantalla (resumen + cards). */
.shell{display:flex;min-height:100vh}
/* Logo unificado: tile LIMA + glifo en VERDE FUERTE (mismo criterio en todo el producto) */
.mk{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--bz-anchor);font-family:var(--font-display);font-size:14px;font-weight:700;
  background:var(--bz-marker);box-shadow:none}
.planchip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:var(--teal-dd);background:var(--surface-tint);border:1px solid var(--tint-bd);
  border-radius:8px;padding:7px 10px;text-transform:capitalize}
.planchip .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);flex:0 0 auto}
.planchip.free{color:var(--warn-ink);background:var(--warn-bg);border-color:#f3dba8}
.planchip.free .dot{background:var(--warn)}

.stage{margin-left:0;flex:1;min-width:0;width:100%}
.stage-in{max-width:var(--maxw-app);margin-inline:auto;padding:26px 34px 64px}

/* ════════ PAGE HEAD (sticky, holds context + tabs) ════════ */
.phead{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(244,247,249,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.phead-in{max-width:var(--maxw-app);margin-inline:auto;padding:0 34px}
.phead-top{display:flex;align-items:flex-start;gap:14px;min-height:62px;padding:20px 0 10px}
.phead-id{min-width:0;flex:1}
.phead-id .crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin:0 0 6px}
/* EasyGEO arriba (marca), nombre del negocio debajo (identidad de la página) — invertido el
   23/06 a propósito el 24/06: la marca pesa más, el negocio queda como subtítulo grande,
   no como título minúsculo. */
.phead-brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink-2);margin:0 0 8px}
.phead-brand .mk{width:30px;height:30px;border-radius:9px;font-size:15px}
.phead-id h1{font-size:40px;font-weight:700;letter-spacing:-.025em;color:var(--ink);
  line-height:1.18;display:flex;align-items:center;gap:10px;min-width:0;margin:70px 0 14px}
/* Título "suelto" sin avatar (vista de cartera de agencia) — pin propio, desacoplado del
   resto de usos de .phead-id h1 (que sí llevan avatar dentro de .title-row). */
.phead-id h1.ov-title{font-size:40px;margin:0 0 4px}
/* Dentro de .title-row el h1 va junto al avatar: sin margen propio, el flex centra ambos. */
.title-row{display:flex;align-items:center;gap:14px}
.title-row h1{margin:0}
.title-row-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.title-av-wrap{position:relative;flex:0 0 auto;display:inline-flex}
.title-av{width:44px;height:44px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-size:15px;font-weight:700;font-family:var(--font-mono)}
.title-av img{width:100%;height:100%;border-radius:12px;object-fit:cover;display:block;border:1px solid var(--line)}
.phead-id h1 .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead-id .sub{font-size:12.5px;color:var(--muted);margin:1px 0 0}
.phead-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.ptabs{display:flex;gap:4px;align-items:stretch;overflow-x:auto;scrollbar-width:none;margin-top:6px}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{position:relative;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--muted);cursor:pointer;padding:10px 14px 16px;margin-right:6px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;border-radius:8px 8px 0 0}
.ptabs button svg{opacity:.7}
.ptabs button:hover{color:var(--ink);background:var(--bg-soft)}
.ptabs button.active{color:var(--teal-dd);font-weight:700;background:var(--surface-tint)}
.ptabs button.active svg{opacity:1}
.ptabs button.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;
  background:var(--teal);border-radius:3px 3px 0 0}

.acctmenu-wrap{position:relative}
.acctbtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-control);padding:6px 9px 6px 8px;cursor:pointer;font:inherit;color:var(--ink-2)}
.acctbtn:hover{border-color:var(--line-2);background:var(--bg-soft)}
.acctbtn .av{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--dark);color:var(--mint);font-size:10.5px;font-weight:700;font-family:var(--font-mono)}
.acctbtn .em{font-size:12.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn .acctchev{flex:0 0 auto;opacity:.6}
.acctmenu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-control);box-shadow:var(--shadow);z-index:var(--z-dropdown);min-width:220px;padding:5px}
.acctmenu .email{padding:9px 11px 7px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctmenu button,.acctmenu a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:13.5px;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--ink-2);text-decoration:none;box-sizing:border-box}
.acctmenu button:hover,.acctmenu a:hover{background:var(--bg-soft);color:var(--ink)}

/* small reusable trend pill / delta */
.trendpill{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;
  border-radius:var(--r-pill);padding:3px 9px;font-family:var(--font-mono)}
.trendpill .ar{font-family:var(--font-sans);font-size:11px}
.trendpill.up{background:var(--surface-tint);color:var(--teal-dd)}
.trendpill.down{background:var(--bad-bg);color:var(--bad-ink)}
.trendpill.flat{background:var(--bg-soft);color:var(--muted)}

.statuspill{font-size:11px;font-weight:600;padding:4px 9px 4px 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.2}
.statuspill .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.statuspill.bad{background:var(--bad-bg);color:var(--bad-ink)} .statuspill.bad .d{background:var(--bad)}
.statuspill.warn{background:var(--warn-bg);color:var(--warn-ink)} .statuspill.warn .d{background:var(--warn)}
.statuspill.good{background:var(--surface-tint);color:var(--teal-dd)} .statuspill.good .d{background:var(--signal)}
.statuspill.none{background:var(--bg-soft);color:var(--muted)} .statuspill.none .d{background:var(--line-3)}
.gradepill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);display:inline-block}
.gradepill.buena{background:var(--surface-tint);color:var(--teal-dd)}
.gradepill.mejorable{background:var(--warn-bg);color:var(--warn-ink)}
.gradepill.débil,.gradepill.debil{background:var(--bad-bg);color:var(--bad-ink)}

/* ════════ MASTHEAD: dark control-room band (score + trend + KPI strip) ════════ */
.masthead{position:relative;border-radius:var(--r-lg);overflow:hidden;color:var(--dark-ink);
  background:radial-gradient(120% 140% at 12% -10%,#0d3640 0%,var(--dark-2) 42%,var(--dark) 100%);
  box-shadow:var(--shadow-dark)}
.masthead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% 8%,rgba(23,196,169,.16),transparent 60%),
    linear-gradient(transparent 0,transparent calc(100% - 1px),var(--dark-line) 100%);
  background-size:auto,100% 28px}
.masthead-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);
  gap:0;align-items:stretch}
@media(max-width:840px){.masthead-grid{grid-template-columns:1fr}}
.mh-score{padding:24px 26px;border-right:1px solid var(--dark-line);min-width:0;display:flex;flex-direction:column}
@media(max-width:840px){.mh-score{border-right:0;border-bottom:1px solid var(--dark-line)}}
.mh-score .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dark-ink-3);font-weight:700;margin:0 0 8px}
.mh-num{display:flex;align-items:baseline;gap:8px}
.mh-num b{font-family:var(--font-mono);font-size:62px;font-weight:700;line-height:.92;letter-spacing:-.03em;color:#fff}
.mh-num .of{font-size:15px;color:var(--dark-ink-3);font-weight:600}
.mh-score .meta{margin-top:auto;padding-top:18px;font-size:13.5px;color:var(--dark-ink-2);line-height:1.45}
.mh-trend{padding:22px 26px;min-width:0;display:flex;flex-direction:column}
.mh-trend .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.mh-trend .top .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dark-ink-3);font-weight:700}
.mh-svg{width:100%;height:auto;display:block;flex:1}
.mh-empty{padding:30px 26px;text-align:center;color:var(--dark-ink-2)}
.mh-empty h3{color:var(--dark-ink);font-size:16px;margin:0 0 5px}
.mh-empty p{margin:0 auto;max-width:42ch;font-size:13px;color:var(--dark-ink-3)}
/* KPI strip inside masthead bottom */
.mh-kpis{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--dark-line)}
@media(max-width:640px){.mh-kpis{grid-template-columns:1fr 1fr}}
.mh-kpi{padding:14px 22px;border-right:1px solid var(--dark-line);min-width:0}
.mh-kpi:last-child{border-right:0}
@media(max-width:640px){.mh-kpi:nth-child(2n){border-right:0}.mh-kpi:nth-child(-n+2){border-bottom:1px solid var(--dark-line)}}
.mh-kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dark-ink-3);font-weight:700;margin:0 0 5px}
.mh-kpi .v{font-family:var(--font-mono);font-size:23px;font-weight:600;color:#fff;line-height:1;display:flex;align-items:baseline;gap:4px}
.mh-kpi .v small{font-size:12px;color:var(--dark-ink-2);font-weight:600}
.mh-kpi .v.warn{color:var(--warn)} .mh-kpi .v.good{color:var(--mint)} .mh-kpi .v.bad{color:var(--rose)}

/* dark trend chart text/line colors */
.mh-gridline{stroke:var(--dark-line)}
.mh-axis{fill:var(--dark-ink-3);font-family:var(--font-mono)}
.mh-line{stroke:var(--signal-br)} .mh-dot{fill:var(--signal-br)} .mh-dot-mid{stroke:var(--signal-br)}

/* ════════ REPORT STACK: masthead (nota IA monitorizada) encima, auditoría on-site debajo —
   son DOS notas distintas (qué dice la IA de ti vs. qué tan lista está tu web para que la IA
   te lea), apiladas en vez de lado a lado para que no se lean como "la misma nota" (24/06). */
.report{display:flex;flex-direction:column;gap:38px}
.scorehint{font-size:12.5px;color:var(--muted);margin:7px 0 0;line-height:1.4;max-width:62ch}
.scorehint.on-dark{color:var(--dark-ink-2)}

/* sectit y report-tit comparten el mismo peso visual de título de sección (25/06) — sectit
   conserva la línea horizontal (.hr) que lo sigue, report-tit no la necesita (va solo sobre
   masthead/auditoría). */
.sectit{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.sectit .hr{flex:1;height:1px;background:var(--line)}
.blocktit{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:0}
.muted{color:var(--muted)}
.report-tit{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0 0 10px}

/* ════════ AUDIT PANEL (compact, lives next to masthead) ════════ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel-h.bare{border-bottom:0}
.panel-h.audit-h{flex-direction:column;align-items:stretch;gap:10px}
.panel-h.audit-h .audit-h-top{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.panel-b{padding:18px}
.panel-b.flex-col{display:flex;flex-direction:column}
.panel-b.flex-col-grow{padding-top:4px;flex:1;display:flex;flex-direction:column;justify-content:center}
.panel-b.pt-tight{padding-top:4px;flex:1}
.panel.flex-col{display:flex;flex-direction:column}
.audit-score{display:flex;align-items:center;gap:18px}
.audit-num{font-family:var(--font-mono);font-size:54px;font-weight:700;line-height:1;letter-spacing:-.02em}
.audit-num.good{color:var(--teal-d)} .audit-num.warn{color:var(--warn)} .audit-num.bad{color:var(--bad)}
.audit-num small{font-size:16px;color:var(--muted);font-weight:600}
.audit-meta b{font-size:17px;color:var(--ink);display:block}
.audit-meta span{font-size:13.5px;color:var(--muted)}
/* signal rows: en fila horizontal, responsive (3 → 2+1 → 1 columna) en vez de apiladas (25/06) */
.siggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 24px}
.siggrid .siggroup+.siggroup{margin-top:0}
.siggroup-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;
  margin:0 0 7px;display:flex;align-items:center;gap:8px}
.siggroup-t .n{font-family:var(--font-mono);color:var(--ink-3);font-weight:600}
.sigrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line)}
.sigrow:first-of-type{border-top:0}
.sig-ic{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:800}
.sigrow.pass .sig-ic{background:var(--surface-tint);color:var(--teal-d)}
.sigrow.fail .sig-ic{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line-2)}
.sigrow.fail{color:var(--muted)}
.sig-lbl{min-width:0;flex:1}

/* ════════ COMPETITION: SoV + won/lost, dense data wells ════════ */
.compgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch}
@media(max-width:920px){.compgrid{grid-template-columns:1fr}}

.sov{display:flex;flex-direction:column;gap:28px}
.sov-scaleline{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;margin-bottom:2px}
.sov-ticks{position:relative;height:14px;display:flex;justify-content:space-between}
.sov-ticks span{position:absolute;font-size:10.5px;color:var(--muted);font-family:var(--font-mono);transform:translateX(-50%)}
.sov-ticks span:first-child{transform:translateX(0);left:0}
.sov-ticks span:nth-child(2){left:50%}
.sov-ticks span:last-child{transform:translateX(-100%);left:100%}
.sov-row{display:grid;grid-template-columns:112px minmax(0,1fr) 48px;gap:14px;align-items:center}
.sov-row .nm{font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.sov-row.me .nm{font-weight:600;color:var(--ink)}
.sov-row .nm .av{width:19px;height:19px;border-radius:5px;font-size:8.5px}
.sov-track{height:42px;border-radius:8px;background:var(--bg-soft);position:relative;overflow:hidden}
.sov-fill{position:absolute;inset:0 auto 0 0;border-radius:8px;min-width:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.sov-row.me .sov-fill{background:linear-gradient(90deg,var(--signal),var(--teal))}
.sov-row.them .sov-fill{background:var(--line-3)}
.sov-val{text-align:right;font-family:var(--font-mono);font-size:14.5px;font-weight:600;color:var(--muted)}
.sov-row.me .sov-val{color:var(--ink)}
.sov-empty{font-size:12.5px;margin-top:6px}
@media(max-width:420px){.sov-scaleline,.sov-row{grid-template-columns:78px minmax(0,1fr) 38px}.sov-scaleline{grid-template-columns:78px minmax(0,1fr)}}

.wl{display:flex;flex-direction:column;gap:14px}
.wl-grp .wl-h{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 8px}
.wl-grp.won .wl-h{color:var(--teal-dd)} .wl-grp.lost .wl-h{color:var(--bad-ink)}
.wl-grp .wl-h .n{font-family:var(--font-mono);margin-left:auto;color:var(--ink-3)}
.wl-list{display:flex;flex-direction:column;gap:1px}
.wl-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);padding:6px 10px;border-radius:8px;background:var(--bg-soft)}
.wl-grp.won .wl-item{background:var(--surface-tint)} .wl-grp.lost .wl-item{background:var(--bad-bg)}
.wl-item .ic{flex:0 0 auto}
.wl-grp.won .wl-item .ic{color:var(--teal)} .wl-grp.lost .wl-item .ic{color:var(--bad)}
.wl-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-empty{font-size:13px;margin:0}

/* ════════ PER-QUESTION DETAIL: always-open, 2-3 per row grid ════════ */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.qgrid-wrap{margin-top:24px}
.qcard{border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;background:var(--surface);min-width:0}
.qcard-q{padding:11px 13px;font-weight:600;font-size:13.5px;color:var(--ink);background:var(--bg-soft);
  border-bottom:1px solid var(--line);line-height:1.35;min-height:58px;box-sizing:border-box;
  display:flex;align-items:center;overflow:hidden}
.qcard-q span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.qeng{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-top:1px solid var(--line);font-size:13px}
.qeng:first-of-type{border-top:0}
.qeng .who{flex:0 0 76px;font-weight:600;font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.qeng .res{flex:1;min-width:0}
.qeng .res .yes{color:var(--teal-d);font-weight:600} .qeng .res .no{color:var(--bad-ink);font-weight:600}
.qeng .res .meta{color:var(--muted);font-size:12px;margin-top:2px;line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.qeng .res .err{color:var(--bad-ink);font-size:12px}

/* ════════ ACTION PLAN ════════ */
.plan{display:flex;flex-direction:column;gap:22px}
.plan-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.plan-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.plan-dot.green{background:var(--teal)} .plan-dot.amber{background:var(--warn)} .plan-dot.red{background:var(--bad)}
.plan-sec-t{font-size:14.5px;font-weight:600;color:var(--ink);margin:0}
.plan-sec-n{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);border-radius:var(--r-pill);padding:2px 8px}
.plan-sec-sub{font-size:13px;color:var(--muted);margin:2px 0 12px;max-width:64ch}
.plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr));gap:14px}
.acard{border:1px solid var(--line);border-radius:var(--r-control);padding:15px 16px;background:var(--surface);
  display:flex;flex-direction:column;min-width:0;transition:border-color .15s,box-shadow .15s}
.acard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.acard-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.acard-badge{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.acard-badge.green{background:var(--surface-tint);color:var(--teal-d)}
.acard-badge.amber{background:var(--warn-bg);color:var(--warn)}
.acard-badge.red{background:var(--bad-bg);color:var(--bad-ink)}
.impactpill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;flex:0 0 auto;text-transform:uppercase;letter-spacing:.03em}
.impactpill.alto{background:var(--surface-tint);color:var(--teal-dd)}
.impactpill.medio{background:var(--warn-bg);color:var(--warn-ink)}
.impactpill.bajo{background:var(--bg-soft);color:var(--muted)}
.acard-ti{font-size:14px;font-weight:600;color:var(--ink);display:block;margin-bottom:5px;line-height:1.3}
.acard-why{font-size:12.5px;color:var(--muted);margin:0 0 auto;line-height:1.45}
.acard-cta{margin-top:11px;align-self:flex-start}

/* code blocks / files */
.code{position:relative;background:var(--dark);color:#cdeae4;border-radius:10px;padding:13px 14px;margin-top:11px;
  font-size:12px;line-height:1.55;overflow:auto;max-height:340px;white-space:pre;font-family:var(--font-mono)}
.copybtn{position:absolute;top:8px;right:8px;font-size:11px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--dark-line-2);background:var(--dark-3);color:#cdeae4;cursor:pointer;font-family:inherit}
.copybtn:hover{background:#0f3d47}
.copybtn.secondary{right:74px}
.filecard{border:1px solid var(--line);border-radius:var(--r-control);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.filecard.tight{margin-bottom:8px}
.filecard .fh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.filecard .fh b{font-size:14px;color:var(--ink);line-height:1.35}
.filecard .fsub{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.filecard-actions{display:flex;gap:8px;flex:0 0 auto}
.filecard-toggle{margin-top:8px}
.btn.compact{padding:7px 12px;font-size:13px}
.btn.toggle-row-btn{padding:8px 12px;font-size:13px;flex:0 0 auto}
.brief{border:1px solid var(--line);border-radius:var(--r-control);padding:13px 15px;margin-top:11px;background:var(--bg-soft)}
.brief ul{margin:8px 0 0;padding-left:18px;font-size:13px} .brief li{margin:3px 0}
.brief .goal{font-size:13px} .brief .rivals{font-size:12px;color:var(--bad-ink);margin-top:6px}
.brief-tip{font-size:12.5px;margin:8px 0 0}

/* ════════ AGENCY OVERVIEW (cockpit) — jerarquía real: la nota media pesa más que el resto,
   textura con profundidad intencional (no border+shadow-sm plano), entrada escalonada al
   montar. La card "Clientes" carga huecos+alta dentro de sí, no suelta en la toolbar (25/06). ════════ */
.ov-wrap{display:flex;flex-direction:column;gap:14px}
.ov-kpis{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(190px,1.2fr);gap:14px;align-items:stretch}
@media(max-width:980px){.ov-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ov-kpis{grid-template-columns:1fr}}
.ov-kpis-wrap{margin-bottom:26px}

/* La entrada escalonada la conduce GSAP (gsap.from sobre .ov-anim), no CSS — así no hay doble
   animación. Las cards quedan VISIBLES por defecto (no se ocultan por clase): si no hay GSAP o
   el usuario pide reduced-motion, no pasa nada y todo se ve igual desde el primer frame. */
.ov-kpi{padding:16px 20px 14px;min-width:0;position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 1px rgba(8,30,32,.04), 0 14px 30px -22px rgba(8,42,44,.22);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.ov-kpi:not(.clients){max-height:130px;box-sizing:border-box}
.ov-kpi:hover{border-color:var(--line-2);box-shadow:0 1px 1px rgba(8,30,32,.05), 0 20px 40px -22px rgba(8,42,44,.28);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.ov-kpi:hover{transform:none}}
.ov-kpi .kh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ov-kpi .ki{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:var(--bg-soft);color:var(--ink-3)}
.ov-kpi.good .ki{background:var(--surface-tint);color:var(--teal-d)}
.ov-kpi.warn .ki{background:var(--warn-bg);color:var(--warn)}
.ov-kpi.bad .ki{background:var(--bad-bg);color:var(--bad-ink)}
.ov-kpi .kl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0}
.ov-kpi .kv{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.ov-kpi .kv.bad{color:var(--bad)} .ov-kpi .kv.warn{color:var(--warn)} .ov-kpi .kv.good{color:var(--teal-d)}
.ov-kpi .kv small{font-size:13px;font-weight:600;color:var(--muted)}
.ov-kpi .ks{font-size:11.5px;color:var(--muted);margin:6px 0 0}

/* Card destacada (nota media de cartera): pesa más visualmente — fondo oscuro "sala de control"
   igual al masthead de detalle, número más grande, ocupa el doble de ancho. Es la métrica que
   de verdad importa primero en un vistazo, las otras 3 son contexto. */
.ov-kpi.feat{background:linear-gradient(160deg,var(--dark-2),var(--dark));color:var(--dark-ink);
  border-color:var(--dark-line);box-shadow:var(--shadow-dark);padding:18px 22px}
.ov-kpi.feat .kl{color:var(--dark-ink-3)}
.ov-kpi.feat .ki{background:rgba(110,200,190,.14);color:var(--mint)}
.ov-kpi.feat .kv{font-size:38px;color:#fff}
.ov-kpi.feat .kv.bad{color:#ff9a8e} .ov-kpi.feat .kv.warn{color:#ffcb7d} .ov-kpi.feat .kv.good{color:var(--mint)}
.ov-kpi.feat .kv small{color:var(--dark-ink-2)}
.ov-kpi.feat .ks{color:var(--dark-ink-2)}
.ov-kpi.feat .ks b{color:var(--dark-ink)}

/* Card "Clientes": además del total, hace de pie de tarjeta con huecos+alta — única card que
   lleva una acción dentro (jerarquía propia, no decoración repetida en las otras 3). */
.ov-kpi.clients{display:flex;flex-direction:column}
.ov-kpi.clients .ov-kpi-body{flex:1}
.ov-kpi-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ov-gauge{display:flex;align-items:center;gap:9px}
.ov-gauge .track{flex:1;height:5px;border-radius:3px;background:var(--bg-soft);overflow:hidden;min-width:0}
.ov-gauge .track i{display:block;height:100%;background:linear-gradient(90deg,var(--signal),var(--teal));border-radius:3px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.ov-gauge.tight .track i{background:var(--warn)}
.ov-gauge.full .track i{background:var(--bad)}
.ov-gauge .txt{font-size:11.5px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.ov-gauge.tight .txt{color:var(--warn-ink)}
.ov-gauge.full .txt{color:var(--bad-ink)}
.ov-kpi-foot .btn{width:100%;justify-content:center;padding:9px 14px;font-size:13px}

/* ── Premium ("estrella"): el cockpit pesa un punto más. La card destacada lleva un sello
   sutil + un anillo de acento mint. ── */
.feat-badge{position:absolute;top:16px;right:18px;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mint);
  background:rgba(110,200,190,.12);border:1px solid rgba(110,200,190,.28);border-radius:var(--r-pill);
  padding:4px 9px 4px 8px}
.feat-badge svg{color:var(--signal-br)}
.ov-kpis.premium .ov-kpi.feat{box-shadow:var(--shadow-dark),0 0 0 1px rgba(110,200,190,.22) inset}

/* ════════ CLIENT CONSOLE (scales 5→50) ════════ */
.console-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.searchfield{position:relative;flex:1 1 260px;min-width:180px;max-width:360px}
.searchfield svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.searchfield input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-control);
  padding:9px 14px 9px 35px;font-size:13.5px;font-family:inherit;box-sizing:border-box;background:var(--surface)}
.searchfield input:focus{outline:2px solid var(--teal-l);outline-offset:1px;border-color:transparent}
.segctl{display:inline-flex;gap:2px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-control);padding:3px}
.segctl button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--muted);
  padding:6px 11px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.segctl button .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.segctl button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs);font-weight:600}
.segctl button .n{font-family:var(--font-mono);color:var(--muted)}

/* .segctl.tabbar (pestañas Resumen/Plan/Archivos del detalle premium) reusa el lenguaje visual
   exacto de .ptabs (pestañas del plan starter) por consistencia entre planes, en vez del control
   segmentado tipo pill. */
.segctl.tabbar{display:flex;gap:4px;background:none;border:0;border-radius:0;padding:0;
  margin-bottom:22px;border-bottom:1px solid var(--line)}
.segctl.tabbar button{position:relative;padding:10px 14px 12px;border-radius:8px 8px 0 0;
  font-size:14.5px;font-weight:600}
.segctl.tabbar button:hover{color:var(--ink);background:var(--bg-soft)}
.segctl.tabbar button.active{background:var(--surface-tint);color:var(--teal-dd);font-weight:700;box-shadow:none}
.segctl.tabbar button.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;
  background:var(--teal);border-radius:3px 3px 0 0}
.spacer{flex:1}
.empty-msg{font-size:13.5px}

/* ── Cards de cliente (thumbnail), sustituyen a la tabla (24/06): logo o iniciales, nota grande,
   tendencia/estado/fecha al pie. Los mismos criterios de orden que tenía la tabla viven ahora
   en SortMenu (popover), no en cabeceras de columna que ya no existen. Padding/gaps ampliados
   (25/06): el dueño pidió más aire, la info estaba pegada. ── */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,308px),1fr));gap:22px}
.ccard{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-sm);padding:28px;display:flex;flex-direction:column;gap:24px;text-align:left;
  cursor:pointer;font:inherit;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.ccard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.ccard{transition:none}.ccard:hover{transform:none}}
.ccard:focus-visible{outline:2px solid var(--teal-l);outline-offset:-2px}
.ccard-top{display:flex;align-items:flex-start;gap:14px;padding-right:26px}
.ccard-logo{position:relative;flex:0 0 auto;width:52px;height:52px}
.ccard-logo .av{width:52px;height:52px;border-radius:13px;font-size:17px}
.ccard-logo img{width:52px;height:52px;border-radius:13px;object-fit:cover;display:block;border:1px solid var(--line)}
.ccard-logo .upl,.title-av-wrap .upl{position:absolute;bottom:-5px;right:-5px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.ccard-logo:hover .upl,.title-av-wrap:hover .upl{background:var(--bg-soft);color:var(--ink)}
.ccard-logo input[type=file],.title-av-wrap input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ccard-tx{min-width:0;flex:1;padding-top:3px}
.ccard-tx b{font-size:16px;display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;letter-spacing:-.01em}
.ccard-tx .site{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard-tx .site svg{flex:0 0 auto;opacity:.85}
.ccard-tx .m{font-size:11.5px;color:var(--muted);font-family:var(--font-mono);margin-top:8px}
.ccard-score{display:flex;align-items:center;gap:16px}
.ccard-score .sc{font-family:var(--font-mono);font-size:34px;font-weight:700;flex:0 0 auto;line-height:1}
.ccard-score .scwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.ccard-score .bar{height:6px;border-radius:3px;background:var(--bg-soft);overflow:hidden;min-width:0;width:100%}
.ccard-score .bar i{display:block;height:100%;border-radius:3px}
.ccard-score .grade{align-self:flex-start}
.ccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.ccard-date{font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.ccard .rowmenu{top:26px;bottom:auto;right:16px}
.skel-card{height:212px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--bg-soft) 25%,#e9eef1 50%,var(--bg-soft) 75%);
  background-size:400% 100%;animation:shim 1.4s ease infinite}
@keyframes shim{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel-card{animation:none;background:var(--bg-soft)}}

.av{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;font-family:var(--font-mono)}
.rowmenu{position:absolute;top:0;bottom:0;right:14px;display:flex;align-items:center}
.rowmenu-btn{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.rowmenu-btn:hover{background:var(--line);color:var(--ink)}
.rowmenu-btn.lg{width:32px;height:32px}
.menupop{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-control);
  box-shadow:var(--shadow);z-index:var(--z-dropdown);min-width:208px;padding:5px}
.menupop.switcher-pop{top:38px;left:0;max-height:280px;overflow-y:auto}
/* fila título+avatar de la cabecera de análisis (BrandLine queda arriba, esto es el h1) —
   regla base de .title-row vive junto a .phead-id h1 más arriba. */
.switcher{position:relative;display:inline-flex;align-items:center;gap:8px}
.menupop button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:13.5px;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
.menupop button:hover{background:var(--bg-soft);color:var(--ink)}
.menupop button.danger{color:var(--bad-ink)} .menupop button.danger:hover{background:var(--bad-bg)}
.menupop button.active{color:var(--teal-d);font-weight:600}
.rowmenu .menupop{top:38px;right:0}

/* ── SortMenu rediseñado (25/06): icono en chip propio (no flotando suelto junto al texto),
   etiqueta+valor con jerarquía tipográfica distinta, flecha de dirección que rota en vez de
   alternar glifo (más legible el cambio), popover con grupo de opciones reales y check visual
   en la activa en vez de solo color de texto. ── */
.sortmenu{position:relative}
.sortmenu-btn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-control);padding:7px 12px 7px 8px;
  cursor:pointer;font:inherit;transition:border-color .15s,background .15s,box-shadow .15s}
.sortmenu-btn .sm-ic{width:24px;height:24px;border-radius:7px;background:var(--bg-soft);color:var(--ink-3);
  display:grid;place-items:center;flex:0 0 auto;transition:background .15s,color .15s}
.sortmenu-btn:hover{border-color:var(--line-2);box-shadow:var(--shadow-xs)}
.sortmenu-btn:hover .sm-ic{background:var(--surface-tint);color:var(--teal-d)}
.sortmenu-btn .sm-lbl{color:var(--muted);font-weight:500}
.sortmenu-btn .sm-val{color:var(--ink);font-weight:600}
.sortmenu-btn .sm-dir{display:inline-flex;color:var(--ink-3);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.sortmenu-btn .sm-dir.asc{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.sortmenu-btn .sm-dir{transition:none}}
.sortmenu-pop{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-control);box-shadow:var(--shadow);z-index:var(--z-dropdown);min-width:208px;padding:6px;
  display:flex;flex-direction:column;gap:1px}
.sortmenu-pop .sm-pophead{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--muted);padding:7px 9px 6px}
.sortmenu-pop button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:13.5px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
.sortmenu-pop button:hover{background:var(--bg-soft);color:var(--ink)}
.sortmenu-pop button.active{color:var(--teal-d);font-weight:600;background:var(--surface-tint)}
.sortmenu-pop button .sm-chk{width:14px;flex:0 0 auto;display:inline-flex;color:var(--teal-d)}
.sortmenu-pop button .sm-dirlbl{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:3px}
.sortmenu-pop button.active .sm-dirlbl{color:var(--teal-d)}

/* ════════ ACCOUNT / SHARED ════════ */
.acctpanel{max-width:560px}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.field-row:first-of-type{border-top:0}
.field-row .fl{font-size:13px;color:var(--muted)}
.field-row .fv{font-size:14px;color:var(--ink);font-weight:500}

/* form */
.scan{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media(max-width:680px){.scan{grid-template-columns:1fr}}
.scan .full{grid-column:1/-1}
.fld label{display:block;font-size:12.5px;font-weight:600;margin:0 0 5px;color:var(--ink-2)}
.fld input,.fld textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-control);padding:10px 12px;
  font-size:14px;font-family:inherit;box-sizing:border-box;background:var(--surface)}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--teal-l);outline-offset:1px;border-color:transparent}
.fld textarea{resize:vertical;min-height:64px}
.fld .hint{font-size:11.5px;color:var(--muted);margin:5px 0 0;line-height:1.4}
.fld.tight{margin-bottom:10px}
.engs{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.engs label{font-weight:500;font-size:13.5px;display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--ink-2)}
.engs .btn.run{margin-left:auto}

/* toggle ghost row */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:0}
.toggle-row.open{margin-bottom:14px}
.toggle-row.open.spacious{margin-bottom:16px}
.toggle-row .sectit{margin:0;flex:1}
.toggle-row h3.t{margin:0}
.chev{transition:transform .15s;display:inline-block;font-size:11px}
.chev.open{transform:rotate(180deg)}
.linkbtn{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--teal-d);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px}
.linkbtn:hover{background:var(--surface-tint)}
.linkbtn.crumb-link{padding:0;font-weight:500;color:var(--muted)}
.linkbtn.crumb-link:hover{background:none;color:var(--ink)}

.spin{display:inline-block;width:15px;height:15px;border:2.4px solid var(--line-2);border-top-color:var(--teal);
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}
.alert{background:var(--bad-bg);border:1px solid #f7c9c9;color:var(--bad-ink);border-radius:var(--r-control);padding:12px 14px;font-size:13.5px}
.alert.spaced{margin-top:14px}
.note{background:var(--warn-bg);border:1px solid #f3dba8;color:var(--warn-ink);border-radius:var(--r-control);padding:11px 14px;font-size:13px}
.note.inline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.note.ok{background:var(--surface-tint);border-color:var(--tint-bd);color:var(--teal-dd)}
.note.ok.spaced{margin-bottom:18px}
.note.inline.spaced{margin-bottom:20px}
.note.spaced-top{margin-top:26px}
.note.spaced-bottom{margin-bottom:16px}
.note .btn{flex:0 0 auto}

.emptybox{text-align:center;padding:48px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.emptybox.spaced{margin-bottom:18px}
.emptybox .ic{width:48px;height:48px;border-radius:14px;background:var(--surface-tint);color:var(--teal);display:grid;place-items:center;margin:0 auto 14px}
.emptybox h2{font-size:17px;margin:0 0 6px}
.emptybox p{color:var(--muted);max-width:42ch;margin:0 auto 18px;font-size:14px}

/* login */
.loginwrap{max-width:380px;margin:84px auto;padding:0 20px}
.loginwrap h1{font-size:23px;margin:0 0 6px;display:flex;align-items:center;flex-wrap:wrap}
.loginwrap .hint{font-size:13.5px;margin:0 0 20px}
.loginwrap .brandmark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;vertical-align:middle;
  margin:0 2px 0 6px;background:var(--bz-marker);color:var(--bz-anchor);font-family:var(--font-display);font-size:14px;font-weight:700}
.loginwrap .devlink{margin:10px 0 0}
.brand-teal{color:var(--teal)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn.google{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-xs)}
.btn.google:hover{background:var(--bg-soft);color:var(--ink)}
.btn.full{width:100%}

/* locked sections */
.locked{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:200px}
.locked .real{filter:blur(5px) saturate(.7);opacity:.8;pointer-events:none;user-select:none}
.locked .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;background:linear-gradient(180deg,rgba(244,247,249,.4),rgba(244,247,249,.92) 55%)}
.locked .lk{width:40px;height:40px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--teal-d)}
.locked b.lt{font-size:14.5px;color:var(--ink)}
.locked p.ld{margin:0;font-size:12.5px;color:var(--ink-2);max-width:32ch;line-height:1.45}
.locked .btn.unlock{margin-top:8px}

/* modals */
.scrim{position:fixed;inset:0;background:rgba(6,32,40,.5);backdrop-filter:blur(2px);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{position:relative;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-width:660px;width:100%;padding:26px;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 6px;font-size:18px;color:var(--ink)}
.modal .msub{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.modal .lead{font-size:13.5px;font-weight:700;color:var(--ink-2);margin:0 0 14px}
.modal .checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-2)}
.modalclose{position:absolute;top:16px;right:16px;background:none;border:0;cursor:pointer;color:var(--muted);padding:5px;border-radius:8px}
.modalclose:hover{background:var(--bg-soft);color:var(--ink)}
.modalfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modalfoot.start{justify-content:flex-start}
.planpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:560px){.planpick{grid-template-columns:1fr}}
.planopt{border:1px solid var(--line);border-radius:var(--r-control);padding:16px;text-align:left;background:var(--surface);
  cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px}
.planopt:hover{border-color:var(--teal-l);box-shadow:var(--shadow-xs)}
.planopt b{font-size:15px;color:var(--ink)} .planopt .price{font-size:13px;color:var(--teal-d);font-weight:700} .planopt .desc{font-size:12px;color:var(--muted)}

/* ════════ Conversiones de inline → clase (auditoría 25/06): bloques de detalle/cuenta/CTA
   estáticos que vivían como style={{}} sueltos en el JSX. ════════ */
.svg-defs{position:absolute}
.sov-chart-empty{font-size:12.5px;margin-top:6px}
.section-spaced{margin-top:26px}
.section-spaced-lg{margin-top:32px}
.actions-row{display:flex;gap:10px;flex-wrap:wrap}
.actions-row.spaced{margin-top:32px}
.score-trend-msg-head{color:#fff}
.trendpill-dark{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--dark-ink-3)}
.trendpill-dark.first{font-size:12px;font-weight:400}
.trendpill-dark.flat{font-weight:400}
.mh-empty.centered{margin:auto 0}
.account-email{margin:0 0 4px;font-size:14.5px;color:var(--ink)}
.account-plan{margin:0 0 16px;font-size:13.5px}
.account-plan b{text-transform:capitalize;color:var(--ink)}
.account-actions{display:flex;gap:10px;flex-wrap:wrap}
.detail-loading{font-size:13.5px}

@media(max-width:980px){
  .stage-in{padding:22px 22px 60px} .phead-in{padding:0 22px}
}
@media(max-width:760px){
  .stage-in{padding:18px 16px 56px} .phead-in{padding:0 16px}
  .phead-top{min-height:0;flex-wrap:wrap;padding:14px 0 8px}
  .phead-id{flex:1 1 100%;order:1}
  .phead-actions{flex:1 1 100%;order:2;justify-content:flex-start}
  .phead-brand{font-size:15px}
  .phead-id h1{font-size:21px;margin:4px 0 2px}
  .ptabs button{margin-right:14px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SOFT FINTECH PANEL (DESIGN_SYSTEM.md, 26/06 review pass)
   Scoped under .bzshell. Shared by BOTH the agency view and the individual /
   analysis view. Flat PASTEL color blocks · big Clash Display type · highlighter
   delta chips · giant Geist-Mono numbers. Separation = air / faint hairline /
   very subtle soft shadow. NO hard 4px offset shadows, NO 2px ink borders.
   Horizontal top nav (collapses to sticky bottom nav on mobile). No left rail.
   ═══════════════════════════════════════════════════════════════════════════ */

.bzshell{display:flex;flex-direction:column;min-height:100vh;background:var(--bz-canvas);
  color:var(--bz-ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
  /* Re-point the OLD teal/grey tokens to the soft-fintech palette WITHIN the panel so the
     individual-view components (audit card, charts, score hints, dark trendpill) inherit the
     softened colors automatically instead of leaking the retired teal/grey system. */
  --muted:var(--bz-muted); --ink-2:var(--bz-ink); --ink-3:var(--bz-muted);
  --teal:var(--bz-primary); --teal-d:var(--bz-primary); --teal-dd:var(--bz-primary);
  --mint:var(--bz-mint-2); --signal:var(--bz-signal); --signal-br:var(--bz-marker)}
.bzshell h1,.bzshell h2,.bzshell h3{font-family:var(--font-display);color:var(--bz-ink);letter-spacing:-.02em;font-weight:600}

/* ── Horizontal top nav ── */
.bztop{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(243,244,238,.9);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--bz-hairline)}
.bztop-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;gap:16px;
  height:66px;padding:0 clamp(38px,3.5vw,60px)}
.bztop-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;min-height:44px;min-width:44px;padding-right:4px}
.bztop-mark:hover{text-decoration:none}
.bztop-mark .mk{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--bz-marker);color:var(--bz-ink);font-family:var(--font-display);font-weight:700;font-size:18px}
.bztop-mark .wd{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--bz-ink);letter-spacing:-.01em}
.bztop-mark .wd .g{color:var(--bz-primary)}
.bztop-nav{display:flex;align-items:center;gap:4px;margin-left:8px;min-width:0}
.bztop-link{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border:0;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--bz-muted);border-radius:11px;cursor:pointer;
  transition:background .15s,color .15s}
.bztop-link .ic{display:grid;place-items:center;color:currentColor;opacity:.85}
.bztop-link:hover{background:rgba(14,19,17,.05);color:var(--bz-ink)}
.bztop-link.active{background:var(--bz-ink);color:#fff}
.bztop-link.active .ic{opacity:1}
.bztop-link:focus-visible{outline:2px solid var(--bz-primary);outline-offset:2px}
.bztop-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* AccountMenu in the top nav (was `rail` variant): avatar chip + dropdown below */
.acctmenu-wrap.rail{position:relative}
.acctmenu-wrap.rail .acctbtn.rail{width:44px;height:44px;padding:0;border-radius:11px;
  border:1px solid var(--bz-hairline-2);background:var(--bz-raised);justify-content:center;box-shadow:var(--bz-sh-sm)}
.acctmenu-wrap.rail .acctbtn.rail:hover{border-color:var(--bz-primary);background:var(--bz-raised)}
.acctmenu-wrap.rail .acctbtn.rail .av{width:30px;height:30px;border-radius:8px;background:var(--bz-anchor);color:var(--bz-on-anchor);font-family:var(--font-mono);font-weight:700}
.acctmenu.rail{top:calc(100% + 8px);bottom:auto;left:auto;right:0;border:1px solid var(--bz-hairline-2);border-radius:14px;box-shadow:var(--bz-sh-lg)}

/* ── Stage + header band ── */
.bzstage{flex:1;min-width:0;width:100%;display:flex;flex-direction:column}
.bzhead{padding:36px clamp(38px,3.5vw,60px) 26px;border-bottom:1px solid var(--bz-hairline)}
.bzhead-in{max-width:1240px;margin-inline:auto;width:100%}

/* Two-column agency header: intro left (partial), KPI cluster right (wraps below) */
.bzhead-in.two-col{display:grid;grid-template-columns:minmax(280px,0.85fr) minmax(0,1.4fr);
  gap:clamp(24px,4vw,56px);align-items:start}
.bzhead-intro{min-width:0}
.bzhead-kpis{min-width:0}
.bzhead .planchip{margin-bottom:16px}
.bzhead-title{font-size:clamp(2.4rem,4.4vw,3.7rem);font-weight:600;line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance}
.bzhead-sub{font-size:clamp(.98rem,1.2vw,1.08rem);color:var(--bz-muted);max-width:42ch;margin:16px 0 0;line-height:1.5}

.bzhead.detail{padding:22px clamp(38px,3.5vw,60px)}
.bzhead-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bz-muted);margin-bottom:12px;font-weight:500}
.bzhead-crumb .crumb-link{color:var(--bz-primary);font-weight:700}

/* Individual-view header band */
.bzhead.solo .bzhead-in{display:flex;flex-direction:column}
.bzhead-kicker{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bz-muted);margin:0 0 12px}
.bzhead-bizrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bzhead-bizrow .title-av-wrap{flex:0 0 auto}
.bzhead-bizrow .title-av{border-radius:13px}
.bzhead-title.biz{font-size:clamp(1.9rem,3.4vw,2.9rem);min-width:0}
.bzhead-title.biz .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}
.bzhead-bizact{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:8px}
.bzhead-bizweb{font-family:var(--font-mono);font-size:13px;color:var(--bz-muted);margin:12px 0 0}

.bzstage-in{max-width:1240px;width:100%;margin-inline:auto;padding:30px clamp(38px,3.5vw,60px) 96px}
.bz-anchor{scroll-margin-top:90px}
.bzsection{margin-top:8px}
.bzsection-h{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;margin:0 0 18px;letter-spacing:-.025em}

/* ── Buttons (ink fill / ghost hairline, soft shadow, no offset) ── */
.bzbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-ui);
  font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  background:var(--bz-ink);color:#fff;border:1px solid transparent;border-radius:12px;
  padding:11px 18px;box-shadow:var(--bz-sh-sm);transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .14s,background .14s}
.bzbtn:hover{transform:translateY(-1px);box-shadow:var(--bz-sh);color:#fff;text-decoration:none;background:#1c2420}
.bzbtn:active{transform:translateY(0)}
.bzbtn.sm{padding:9px 14px;font-size:13px;min-height:44px;border-radius:11px}
.bzbtn.ghost{background:var(--bz-raised);color:var(--bz-ink);border-color:var(--bz-hairline-2);box-shadow:var(--bz-sh-sm)}
.bzbtn.ghost:hover{background:var(--bz-canvas);border-color:var(--bz-primary)}
.bzbtn:disabled{cursor:not-allowed;background:var(--bz-sunken);color:var(--bz-muted);box-shadow:none;transform:none;border-color:transparent}
.bzbtn:focus-visible{outline:2px solid var(--bz-primary);outline-offset:2px}

/* ── MarkerChip: highlighter delta chip ── */
.mkchip{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-weight:600;
  font-size:12.5px;line-height:1;padding:5px 9px;border-radius:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mkchip.up{background:var(--bz-marker);color:var(--bz-ink)}
.mkchip.down{background:var(--bz-danger-bg);color:var(--bz-danger-ink)}
.mkchip.neutral{background:var(--bz-sunken);color:var(--bz-muted);font-family:var(--font-ui);font-size:11.5px}

/* ── Agency overview: hero block + 3 pastel tiles, flowing in the header right column ── */
.bzov{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"hero marker mint" "hero clients clients";gap:14px}
.bzov>*{min-width:0}
.bzov-hero{grid-area:hero;position:relative;background:var(--bz-anchor);color:var(--bz-on-anchor);
  border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh);padding:22px 24px;display:flex;flex-direction:column}
.bzbadge{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bz-ink);
  background:var(--bz-marker);border-radius:7px;padding:4px 8px}
.bzbadge svg{color:var(--bz-ink)}
.bzov-hero-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bz-mint);margin:0}
.bzov-hero-num{display:flex;align-items:baseline;gap:6px;margin:18px 0 0}
.bzov-hero-num .n{font-family:var(--font-mono);font-weight:700;font-size:clamp(3.2rem,5vw,4.4rem);
  line-height:.9;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bzov-hero-num .of{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:rgba(234,250,246,.55)}
.bzov-hero-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.bzov-hero-sub{font-size:12px;color:rgba(234,250,246,.72);max-width:30ch;line-height:1.4}

.bzov-tile{border-radius:var(--bz-r-md);box-shadow:var(--bz-sh);padding:16px 18px;display:flex;flex-direction:column}
.bzov-tile.t-marker{grid-area:marker;background:var(--bz-marker);color:var(--bz-ink)}
.bzov-tile.t-mint{grid-area:mint;background:var(--bz-mint);color:var(--bz-anchor)}
.bzov-tile.t-clients{grid-area:clients;background:var(--bz-raised);color:var(--bz-ink);border:1px solid var(--bz-hairline)}
.bzov-tile-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bzov-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  background:rgba(14,19,17,.08);color:var(--bz-ink)}
.t-mint .bzov-ic{background:rgba(10,43,34,.12);color:var(--bz-anchor)}
.t-clients .bzov-ic{background:var(--bz-sunken)}
.bzov-tile-lbl{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin:0}
.t-mint .bzov-tile-lbl{color:var(--bz-anchor)}
.bzov-tile-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.9rem,2.6vw,2.5rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:auto 0 0;display:flex;align-items:baseline;gap:3px}
.bzov-tile-num small{font-size:1rem;font-weight:600;opacity:.6}
.bzov-tile-sub{font-size:12px;margin:7px 0 0;line-height:1.4}
.t-marker .bzov-tile-sub{color:var(--bz-on-marker)}
.t-mint .bzov-tile-sub{color:var(--bz-on-mint)}
.t-clients .bzov-tile-sub{color:var(--bz-muted)}
.bzov-tile-sub b{font-weight:700}

.bzov-slots{margin-top:12px;padding-top:12px;border-top:1px solid var(--bz-hairline)}
.bzgauge{display:block;height:7px;border-radius:5px;background:var(--bz-sunken);overflow:hidden}
.bzgauge i{display:block;height:100%;background:var(--bz-mint-2);transition:width .4s cubic-bezier(.16,1,.3,1)}
.bzov-slots-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;flex-wrap:wrap}
.bzov-slots-txt{font-family:var(--font-mono);font-size:12px;color:var(--bz-muted);font-variant-numeric:tabular-nums}

/* ── Client cards (soft: white fill, faint hairline, soft shadow, no offset) ── */
.bzshell .ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.bzcard{position:relative;min-width:0;background:var(--bz-raised);border:1px solid var(--bz-hairline);
  border-radius:var(--bz-r-md);box-shadow:var(--bz-sh-sm);padding:18px 18px 16px;cursor:pointer;
  display:flex;flex-direction:column;gap:14px;transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .14s,border-color .14s}
.bzcard:hover{transform:translateY(-2px);box-shadow:var(--bz-sh-lg);border-color:var(--bz-hairline-2)}
.bzcard:focus-visible{outline:2px solid var(--bz-primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.bzcard{transition:none}.bzcard:hover{transform:none;box-shadow:var(--bz-sh)}}
.bzcard-top{display:flex;align-items:flex-start;gap:12px}
.bzcard-logo{position:relative;flex:0 0 auto;width:46px;height:46px}
.bzcard-logo .av{width:46px;height:46px;border-radius:12px;font-size:16px}
.bzcard-logo img{width:46px;height:46px;border-radius:12px;object-fit:cover;display:block;border:1px solid var(--bz-hairline)}
.bzcard-logo .upl{position:absolute;bottom:-5px;right:-5px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--bz-hairline-2);background:var(--bz-raised);color:var(--bz-ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--bz-sh-sm)}
.bzcard-logo input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.bzcard-id{min-width:0;flex:1;padding-top:1px}
.bzcard-id b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:600;color:var(--bz-ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.bzcard-id .site{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--bz-muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzcard-id .site svg{flex:0 0 auto;opacity:.75}
.bzcard .rowmenu{position:static;flex:0 0 auto}
.bzcard-score{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bzcard-score .sc{font-family:var(--font-mono);font-weight:700;font-size:2.6rem;line-height:.9;
  letter-spacing:-.03em;color:var(--bz-ink);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.bzcard-score .sc .of{font-size:1rem;font-weight:600;color:var(--bz-muted)}
.bzcard-bar{display:block;height:8px;border-radius:6px;background:var(--bz-sunken);overflow:hidden}
.bzcard-bar .f{display:block;height:100%}
.bzcard-bar .f.good{background:var(--bz-mint-2)}
.bzcard-bar .f.warn{background:var(--bz-marker)}
.bzcard-bar .f.bad,.bzcard-bar .f.none{background:var(--bz-grade-bad)}
.bzcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--bz-hairline)}
.bzcard-meta{font-family:var(--font-mono);font-size:11px;color:var(--bz-muted);font-variant-numeric:tabular-nums}

/* StatusPill (soft pastel chip) */
.bzshell .statuspill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:8px;background:var(--bz-sunken);color:var(--bz-ink);border:0}
.bzshell .statuspill .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.bzshell .statuspill.good{background:var(--bz-mint)} .bzshell .statuspill.good .d{background:var(--bz-primary)}
.bzshell .statuspill.warn{background:var(--bz-marker)} .bzshell .statuspill.warn .d{background:var(--bz-warning-ink)}
.bzshell .statuspill.bad{background:var(--bz-danger-bg);color:var(--bz-danger-ink)} .bzshell .statuspill.bad .d{background:var(--bz-danger)}
.bzshell .statuspill.none{background:var(--bz-sunken);color:var(--bz-muted)} .bzshell .statuspill.none .d{background:#9aa39d}

/* ── Console bar (search + sort + tabs) softened ── */
.bzshell .console-bar{margin-bottom:18px}
.bzshell .searchfield input{border:1px solid var(--bz-hairline-2);border-radius:11px;background:var(--bz-raised);
  color:var(--bz-ink);box-shadow:var(--bz-sh-sm);font-weight:500;min-height:44px}
.bzshell .searchfield input::placeholder{color:var(--bz-muted)}
.bzshell .searchfield input:focus{outline:2px solid var(--bz-primary);outline-offset:2px;border-color:transparent}
.bzshell .searchfield svg{color:var(--bz-muted)}
.bzshell .segctl{background:var(--bz-raised);border:1px solid var(--bz-hairline-2);border-radius:11px;box-shadow:var(--bz-sh-sm);padding:3px;min-height:44px}
.bzshell .segctl button{color:var(--bz-muted);font-weight:600;border-radius:8px;min-height:44px}
.bzshell .segctl button.active{background:var(--bz-ink);color:#fff;box-shadow:none}
.bzshell .segctl button.active .n{color:rgba(255,255,255,.7)}
.bzshell .segctl button .n{font-family:var(--font-mono);color:var(--bz-muted)}
.bzshell .sortmenu-btn{border:1px solid var(--bz-hairline-2);border-radius:11px;background:var(--bz-raised);
  color:var(--bz-ink);box-shadow:var(--bz-sh-sm);font-weight:600;min-height:44px}
.bzshell .sortmenu-btn .sm-ic{border-radius:7px;background:var(--bz-sunken)}
.bzshell .sortmenu-btn .sm-lbl{color:var(--bz-muted)}
.bzshell .rowmenu-btn{width:44px;height:44px;border-radius:10px;color:var(--bz-muted)}
.bzshell .rowmenu-btn:hover{background:var(--bz-sunken);color:var(--bz-ink)}

/* ── Empty / skeleton / planchip / note (softened) ── */
.bzshell .emptybox{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh-sm);padding:48px 28px;text-align:center}
.bzshell .skel-card{height:212px;border-radius:var(--bz-r-md);border:1px solid var(--bz-hairline)}
.bzshell .planchip{font-family:var(--font-mono);font-size:11.5px;font-weight:600;border:0;
  border-radius:8px;background:var(--bz-mint);color:var(--bz-anchor);padding:5px 11px}
.bzshell .planchip .dot{background:var(--bz-primary)}
.bzshell .planchip.free{background:var(--bz-warning-bg);color:var(--bz-warning-ink)}
.bzshell .note.ok{background:var(--bz-mint);border:0;border-radius:12px;color:var(--bz-anchor);box-shadow:var(--bz-sh-sm);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   INDIVIDUAL / ANALYSIS VIEW — full soft-fintech rebuild (26/06 review pass 2)
   Committed use of the system: anchor-green hero with a real evolution chart,
   featured audit score + grouped checks, designed SoV + won/lost, per-prompt
   cards with styled engine states. Shared shells (.bzpanel) + section heads.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section header (replaces .sectit hairline) */
.sechead{margin:0 0 18px}
.sechead-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2.2vw,1.9rem);
  letter-spacing:-.03em;color:var(--bz-ink);margin:0;line-height:1.05}
.sechead-sub{font-size:14px;color:var(--bz-muted);margin:7px 0 0;line-height:1.45;max-width:62ch}

/* Resumen flow: generous rhythm between sections, varied layouts */
.rsm{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.rsm-sec{min-width:0}

/* Shared soft panel (white fill, hairline, soft shadow) */
.bzpanel{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);
  box-shadow:var(--bz-sh-sm);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.bzpanel-h{padding:18px 22px 0}
.bzpanel-t{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--bz-ink);margin:0}
.bzpanel-b{padding:18px 22px 22px;flex:1;display:flex;flex-direction:column;min-width:0}

/* ── HERO: Visibilidad en IA (anchor-green, giant mono score + real chart + KPI strip) ── */
.hero{background:var(--bz-anchor);color:var(--bz-on-anchor);border-radius:var(--bz-r-lg);
  box-shadow:var(--bz-sh);overflow:hidden}
.hero-main{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:0}
.hero-score{padding:30px 30px 28px;border-right:1px solid var(--bz-on-anchor-line);display:flex;flex-direction:column;min-width:0}
.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bz-mint);margin:0 0 14px}
.hero-num{display:flex;align-items:baseline;gap:8px;line-height:.85}
.hero-num b{font-family:var(--font-mono);font-weight:700;font-size:clamp(4rem,8vw,6rem);color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.hero-num.good b{color:#fff} .hero-num.warn b{color:#fff} .hero-num.bad b{color:#fff}
.hero-num .of{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:rgba(234,250,246,.5)}
.hero-hint{font-size:13px;color:rgba(234,250,246,.78);margin:16px 0 0;line-height:1.45;max-width:34ch}
.hero-msg{font-size:13.5px;color:rgba(234,250,246,.9);margin:auto 0 0;padding-top:18px;line-height:1.5;max-width:40ch}
.hero-msg b{color:#fff;font-weight:700}
.hero-chart{padding:26px 28px;display:flex;flex-direction:column;min-width:0}
.hero-chart-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hero-chart-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bz-mint)}
.hero-deltachip{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-weight:600;
  font-size:12px;line-height:1;padding:5px 9px;border-radius:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-deltachip.up{background:var(--bz-marker);color:var(--bz-ink)}
.hero-deltachip.down{background:var(--bz-danger-soft-2);color:#7f1414}
.hero-deltachip.neutral{background:rgba(234,250,246,.12);color:var(--bz-mint)}
.hero-chart-svg{width:100%;height:clamp(120px,16vw,150px);display:block;flex:1}
.hero-chart-grid{stroke:var(--bz-on-anchor-line)}
.hero-chart-line{stroke:var(--bz-marker)}
.hero-chart-dot{fill:var(--bz-marker)}
.hero-chart-dot.last{fill:#fff;stroke:var(--bz-marker);stroke-width:3}
.hero-chart-val{fill:rgba(234,250,246,.7);font-family:var(--font-mono);font-size:9px;font-weight:600}
.hero-chart-empty{flex:1;display:grid;place-items:center;text-align:center;padding:20px}
.hero-chart-empty p{color:rgba(234,250,246,.7);font-size:13px;max-width:36ch;margin:0;line-height:1.5}
.hero-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--bz-on-anchor-line)}
.hero-kpi{padding:18px 26px;border-right:1px solid var(--bz-on-anchor-line);min-width:0}
.hero-kpi:last-child{border-right:0}
.hero-kpi .k{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bz-mint);margin:0 0 8px}
.hero-kpi .v{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);color:#fff;
  line-height:1;display:flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.hero-kpi .v small{font-size:1rem;font-weight:600;color:rgba(234,250,246,.55)}
.hero-kpi.mark{background:var(--bz-marker)}
.hero-kpi.mark .k{color:#3a4a18}
.hero-kpi.mark .v{color:var(--bz-ink)}
.hero-kpi.mark .v small{color:rgba(14,19,17,.5)}

/* ── AUDITORÍA: featured score (ring) + grouped checks ── */
.auditblk{display:grid;grid-template-columns:minmax(240px,0.78fr) minmax(0,1.5fr);gap:18px;align-items:start}
.audit-feat{background:var(--bz-anchor);color:var(--bz-on-anchor);border-radius:var(--bz-r-lg);
  box-shadow:var(--bz-sh-sm);padding:26px 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ring-svg{width:clamp(120px,16vw,148px);height:auto;display:block}
.ring-bg{stroke:var(--bz-on-anchor-line)}
.ring-fg{stroke:var(--bz-marker);transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.ring-fg.good{stroke:var(--bz-mint-2)} .ring-fg.warn{stroke:var(--bz-marker)} .ring-fg.bad{stroke:var(--bz-danger-on-dark)}
.ring-num{fill:#fff;font-family:var(--font-mono);font-weight:700;font-size:32px;font-variant-numeric:tabular-nums}
.audit-grade{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:#fff;margin:12px 0 2px}
.audit-ratio{font-size:13px;color:rgba(234,250,246,.78);margin:0}
.audit-ratio b{color:#fff;font-family:var(--font-mono)}
.audit-tally{display:flex;gap:8px;margin:16px 0 0;width:100%}
.audit-tally-i{flex:1;display:flex;flex-direction:column;gap:1px;padding:9px 6px;border-radius:10px;font-size:11px;font-weight:600}
.audit-tally-i b{font-family:var(--font-mono);font-size:18px;font-weight:700}
.audit-tally-i.pass{background:var(--bz-mint);color:var(--bz-anchor)}
.audit-tally-i.fail{background:rgba(255,138,122,.18);color:var(--bz-danger-soft)}
.audit-feat-hint{font-size:11.5px;color:rgba(234,250,246,.62);margin:16px 0 0;line-height:1.45}
.audit-checks{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);
  box-shadow:var(--bz-sh-sm);padding:18px 22px 8px}
.audit-checks-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.audit-checks-t{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--bz-ink);margin:0}
.siggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 22px}
.siggroup{min-width:0;padding-bottom:14px}
.siggroup-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--bz-muted);margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--bz-hairline)}
.siggroup-t .n{font-family:var(--font-mono);color:var(--bz-ink);font-size:11px}
.siglist{display:flex;flex-direction:column;gap:2px}
.sigrow{display:flex;align-items:center;gap:9px;font-size:13px;padding:5px 0;min-width:0}
.sig-ic{display:grid;place-items:center;width:19px;height:19px;border-radius:6px;flex:0 0 auto}
.sigrow.pass .sig-ic{background:var(--bz-mint);color:var(--bz-primary)}
.sigrow.fail .sig-ic{background:var(--bz-danger-soft);color:var(--bz-danger)}
.sigrow .sig-lbl{min-width:0;color:var(--bz-ink)}
.sigrow.fail .sig-lbl{color:var(--bz-muted)}

/* ── COMPETENCIA: SoV bars + won/lost ── */
.compgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.sov{display:flex;flex-direction:column;gap:13px}
.sov-row{display:grid;grid-template-columns:minmax(86px,auto) minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0}
.sov-nm{font-size:13px;font-weight:600;color:var(--bz-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sov-row.them .sov-nm{color:var(--bz-muted);font-weight:500}
.sov-track{height:14px;border-radius:7px;background:var(--bz-sunken);overflow:hidden;min-width:0}
.sov-fill{display:block;height:100%;border-radius:7px;background:var(--bz-sunken)}
.sov-row.me .sov-fill{background:var(--bz-anchor)}
.sov-row.them .sov-fill{background:var(--bz-mint-2)}
.sov-val{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--bz-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sov-val small{font-size:11px;font-weight:600;color:var(--bz-muted)}
.sov-row.them .sov-val{color:var(--bz-muted)}
.sov-chart-empty{font-size:12.5px;color:var(--bz-muted);margin:4px 0 0}
.wl{display:flex;flex-direction:column;gap:16px}
.wl-grp{min-width:0}
.wl-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wl-h-t{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bz-muted)}
.wl-n{font-family:var(--font-mono);font-weight:700;font-size:12px;padding:2px 8px;border-radius:7px}
.wl-grp.won .wl-n{background:var(--bz-mint);color:var(--bz-anchor)}
.wl-grp.lost .wl-n{background:var(--bz-danger-soft);color:var(--bz-danger)}
.wl-list{display:flex;flex-direction:column;gap:6px}
.wl-item{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--bz-ink);line-height:1.4;min-width:0}
.wl-ic{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;flex:0 0 auto;margin-top:1px}
.wl-grp.won .wl-ic{background:var(--bz-mint);color:var(--bz-primary)}
.wl-grp.lost .wl-ic{background:var(--bz-danger-soft);color:var(--bz-danger)}
.wl-empty{font-size:12.5px;color:var(--bz-muted);margin:0}

/* ── PER-PROMPT CARDS: question card + engine rows + state pills ── */
.qgrid-wrap{min-width:0}
.qgrid-wrap .toggle-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.qgrid-wrap .toggle-row .sechead{margin:0}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.qcard{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-md);
  box-shadow:var(--bz-sh-sm);overflow:hidden;min-width:0}
.qcard-q{display:flex;align-items:flex-start;gap:10px;padding:15px 16px;border-bottom:1px solid var(--bz-hairline)}
.qcard-q-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex:0 0 auto;margin-top:1px}
.qcard.won .qcard-q-ic{background:var(--bz-mint);color:var(--bz-primary)}
.qcard.lost .qcard-q-ic{background:var(--bz-danger-soft);color:var(--bz-danger)}
.qcard-q-tx{font-size:14px;font-weight:600;color:var(--bz-ink);line-height:1.35;min-width:0}
.qcard-engs{display:flex;flex-direction:column}
.qeng{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;min-width:0}
.qeng+.qeng{border-top:1px solid var(--bz-hairline)}
.qeng-who{font-size:12.5px;font-weight:600;color:var(--bz-muted);flex:0 0 auto;padding-top:2px}
.qeng-res{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0;text-align:right}
.qeng-tags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.qstate{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap}
.qstate.yes{background:var(--bz-mint);color:var(--bz-anchor)}
.qstate.no{background:var(--bz-sunken);color:var(--bz-muted)}
.qstate.link{background:var(--bz-marker);color:var(--bz-ink)}
.qstate.err{background:var(--bz-warning-bg);color:var(--bz-warning-ink)}
.qpos{font-family:var(--font-mono);font-size:11px;color:var(--bz-muted);font-variant-numeric:tabular-nums}
.qeng-comp{font-size:11.5px;color:var(--bz-muted);line-height:1.35}

/* ── PLAN DE ACCIÓN: groups + action cards (soft) ── */
.bzshell .plan{display:flex;flex-direction:column;gap:34px}
.bzshell .plan-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.bzshell .plan-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.bzshell .plan-dot.green{background:var(--bz-mint-2)} .bzshell .plan-dot.amber{background:var(--bz-marker)} .bzshell .plan-dot.red{background:var(--bz-grade-bad)}
.bzshell .plan-sec-t{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--bz-ink);margin:0;letter-spacing:-.02em}
.bzshell .plan-sec-n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--bz-muted);background:var(--bz-sunken);padding:2px 8px;border-radius:7px}
.bzshell .plan-sec-sub{font-size:13px;color:var(--bz-muted);margin:6px 0 14px;line-height:1.45;max-width:62ch}
.bzshell .plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.bzshell .acard{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-md);
  box-shadow:var(--bz-sh-sm);padding:16px 16px 14px;display:flex;flex-direction:column;min-width:0}
.bzshell .acard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.bzshell .acard-badge{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:0 0 auto}
.bzshell .acard-badge.green{background:var(--bz-mint);color:var(--bz-primary)}
.bzshell .acard-badge.amber{background:var(--bz-marker);color:var(--bz-ink)}
.bzshell .acard-badge.red{background:var(--bz-danger-soft);color:var(--bz-danger)}
.bzshell .impactpill{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:4px 9px;border-radius:7px}
.bzshell .impactpill.alto{background:var(--bz-anchor);color:var(--bz-on-anchor)}
.bzshell .impactpill.medio{background:var(--bz-sunken);color:var(--bz-ink)}
.bzshell .impactpill.bajo{background:var(--bz-sunken);color:var(--bz-muted)}
.bzshell .acard-ti{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--bz-ink);letter-spacing:-.01em;line-height:1.25;display:block}
.bzshell .acard-why{font-size:13px;color:var(--bz-muted);margin:7px 0 0;line-height:1.45}
.bzshell .acard-cta{margin-top:12px;align-self:flex-start}

/* ── ARCHIVOS: file cards (soft) ── */
.bzshell .filecard{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-md);
  box-shadow:var(--bz-sh-sm);padding:16px 18px;margin-bottom:14px}
.bzshell .filecard .fh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bzshell .filecard .fh b{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--bz-ink);min-width:0}
.bzshell .filecard .sub{display:block;font-size:12.5px;color:var(--bz-muted);margin:6px 0 0;line-height:1.45}
.bzshell .filecard-toggle{margin-top:12px}

/* ── CUENTA: account block ── */
.acctblk{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh-sm);padding:24px}
.acctblk-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.acctblk-id{display:flex;align-items:center;gap:14px;min-width:0}
.acctblk-av{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;flex:0 0 auto;
  background:var(--bz-anchor);color:var(--bz-on-anchor);font-family:var(--font-mono);font-weight:700;font-size:18px}
.acctblk-email{font-size:15px;font-weight:600;color:var(--bz-ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctblk-plan{font-size:13px;color:var(--bz-muted);margin:3px 0 0}
.acctblk-plan b{color:var(--bz-ink);text-transform:capitalize}
.acctblk-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Shared overrides inside .bzshell (forms, notes, shared .btn, linkbtn, subnav) ── */
.bzshell .note{background:var(--bz-warning-bg);border:0;color:var(--bz-warning-ink);border-radius:12px;box-shadow:var(--bz-sh-sm)}
.bzshell .note.inline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bzshell .card{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh-sm)}
.bzshell .fld label{color:var(--bz-ink)}
.bzshell .fld input,.bzshell .fld textarea{border:1px solid var(--bz-hairline-2);border-radius:11px;color:var(--bz-ink);background:var(--bz-raised)}
.bzshell .fld input:focus,.bzshell .fld textarea:focus{outline:2px solid var(--bz-primary);outline-offset:2px;border-color:transparent}
.bzshell .fld .hint{color:var(--bz-muted)}
.bzshell .engs label{color:var(--bz-ink)}
.bzshell .btn{background:var(--bz-ink);color:#fff;border:1px solid transparent;border-radius:12px;
  box-shadow:var(--bz-sh-sm);font-weight:700;letter-spacing:-.01em;min-height:44px}
.bzshell .btn:hover{background:#1c2420;color:#fff;transform:translateY(-1px);box-shadow:var(--bz-sh)}
.bzshell .btn.ghost{background:var(--bz-raised);color:var(--bz-ink);border-color:var(--bz-hairline-2);box-shadow:var(--bz-sh-sm)}
.bzshell .btn.ghost:hover{background:var(--bz-canvas);border-color:var(--bz-primary);color:var(--bz-ink)}
.bzshell .btn.ghost.sm,.bzshell .btn.ghost.compact{min-height:44px;padding:10px 13px;font-size:13px}
.bzshell .btn.danger{background:var(--bz-danger);border-color:transparent;color:#fff}
.bzshell .btn.run{margin-left:auto}
.bzshell .btn:disabled{background:var(--bz-sunken);color:var(--bz-muted);box-shadow:none}
.bzshell .linkbtn{color:var(--bz-primary);min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.bzshell .bzhead-crumb .linkbtn{min-height:0}
.bzshell .segctl.tabbar button.active{background:var(--bz-mint);color:var(--bz-anchor)}
.bzshell .segctl.tabbar button.active::after{background:var(--bz-anchor)}
.bzshell .code{font-family:var(--font-mono);background:var(--bz-anchor);color:var(--bz-on-anchor);border-radius:12px}

/* ── Individual-view responsive ── */
@media(max-width:920px){
  .hero-main{grid-template-columns:1fr}
  .hero-score{border-right:0;border-bottom:1px solid var(--bz-on-anchor-line)}
  .hero-kpis{grid-template-columns:1fr 1fr}
  .auditblk{grid-template-columns:1fr}
  .compgrid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .hero-kpis{grid-template-columns:1fr}
  .qgrid-wrap .toggle-row{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── Responsive ── */
@media(max-width:1080px){
  .bzhead-in.two-col{grid-template-columns:1fr;gap:24px}
  .bzov{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:768px){
  /* Top nav links collapse to a sticky BOTTOM nav; brand + account stay on top */
  .bzshell{padding-bottom:70px}
  .bztop-in{height:60px;gap:10px}
  .bztop-mark .wd{display:none}
  .bztop-nav{position:fixed;bottom:0;left:0;right:0;margin:0;height:64px;background:var(--bz-raised);
    border-top:1px solid var(--bz-hairline);box-shadow:0 -2px 12px -6px rgba(14,19,17,.2);
    justify-content:space-around;padding:6px 8px;z-index:var(--z-sticky)}
  .bztop-link{flex-direction:column;gap:2px;height:auto;min-height:48px;padding:6px 10px;font-size:11px}
  .bztop-link .ic svg{width:20px;height:20px}
  .bzhead{padding:24px 30px 18px}
  .bzhead-title{font-size:clamp(2rem,8vw,2.6rem)}
  .bzstage-in{padding:24px 30px 40px}
  .bzov{grid-template-columns:1fr;grid-template-areas:"hero" "marker" "mint" "clients"}
  .bzov-hero-num .n{font-size:3.4rem}
  .bzshell .masthead-grid{grid-template-columns:1fr}
  .bzshell .mh-score{border-right:0;border-bottom:1px solid var(--bz-on-anchor-line)}
  .bzshell .mh-kpis{grid-template-columns:1fr 1fr}
  .bzshell .compgrid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .bzcard-score .sc{font-size:2.2rem}
  .bzshell .mh-kpis{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   27/06 v3 — Feedback Oscar: SE RETIRA el brutalismo (bordes gruesos + sombras
   duras desplazadas) que se había añadido a las cards — vuelve la separación
   suave de antes. Se CONSERVA: (a) logo con la "E" en verde fuerte sobre blanco
   y (b) el gráfico de evolución como BARRAS + LÍNEA de unión sobre un panel gris
   claro (estilo Dash3/foto-3).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logo unificado: tile LIMA + "E" en verde fuerte ── */
.bztop-mark .mk{background:var(--bz-marker);color:var(--bz-anchor);border:0}

/* ── Gráfico de evolución: panel gris claro dentro del hero, barras + línea ── */
.hero-chart-plot{background:#e7e9e1;border-radius:14px;padding:14px 14px 10px;
  flex:1;display:flex;flex-direction:column;min-height:120px}
.hero-chart-plot .hero-chart-svg{flex:1;height:auto}
.hero-chart-grid{stroke:rgba(10,43,34,.08)}
.hero-chart-bar{fill:rgba(10,43,34,.16);cursor:pointer;transition:fill .15s}
.hero-chart-bar:hover{fill:rgba(10,43,34,.32)}
.hero-chart-bar.last{fill:var(--bz-anchor)}
.hero-chart-trend{fill:none;stroke:var(--bz-primary);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ── BUG FIX qcard-q ── la regla legacy `.qcard-q span{display:-webkit-box;-webkit-line-clamp:2}`
   (pensada para el span de texto antiguo) se aplicaba TAMBIÉN al span del icono `.qcard-q-ic`,
   pisando su display:grid y descuadrando el check/cruz, y recortaba el texto. Re-afirmamos el
   layout bz con specificity suficiente y soltamos el clamp. */
.bzshell .qcard-q{background:transparent;min-height:0;overflow:visible;align-items:flex-start}
.bzshell .qcard-q .qcard-q-ic{display:grid;-webkit-line-clamp:unset}
.bzshell .qcard-q .qcard-q-tx{display:block;-webkit-line-clamp:unset;overflow:visible}

/* ═══════════════════════════════════════════════════════════════════════════
   27/06 v4 — Feedback Oscar (2ª ronda):
     · Hero del análisis → AZUL pastel claro (no verde ancla): el gráfico ya no
       choca por ser gris sobre verde. Tonos claros / blanco; NÚMEROS en verde
       fuerte para darles peso. (La card de Auditoría sí se queda en verde ancla.)
     · qcard "perdida" ocupaba de más en vertical → se equilibran las alturas.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--bz-blue:#dbe7f3; --bz-blue-2:#c8dcec; --bz-on-blue:#16242f; --bz-on-blue-2:#3c4f5c}

/* ── Hero del análisis: verde ancla → azul pastel; números en verde fuerte ── */
.hero{background:var(--bz-blue);color:var(--bz-on-blue)}
.hero-score{border-right-color:rgba(16,36,47,.14)}
@media(max-width:920px){.hero-score{border-bottom-color:rgba(16,36,47,.14)}}
.hero-eyebrow{color:var(--bz-primary)}
.hero-num b,.hero-num.good b,.hero-num.warn b,.hero-num.bad b{color:var(--bz-anchor)}
.hero-num .of{color:rgba(22,36,47,.5)}
.hero-hint{color:var(--bz-on-blue-2)}
.hero-msg{color:var(--bz-on-blue)} .hero-msg b{color:var(--bz-anchor)}
.hero-chart-lbl{color:var(--bz-primary)}
.hero-chart-plot{background:#ffffff}            /* gráfico = tarjeta blanca limpia sobre el azul */
.hero-chart-bar{fill:rgba(16,36,47,.14);cursor:pointer;transition:fill .15s} .hero-chart-bar:hover{fill:rgba(16,36,47,.3)} .hero-chart-bar.last{fill:var(--bz-anchor)}
.hero-chart-trend{stroke:var(--bz-primary)}
.hero-chart-empty p{color:var(--bz-on-blue-2)}
.hero-kpis{border-top-color:rgba(16,36,47,.14)}
.hero-kpi{border-right-color:rgba(16,36,47,.14)}
@media(max-width:920px){.hero-kpis{border-top-color:rgba(16,36,47,.14)}}
.hero-kpi .k{color:var(--bz-primary)}
.hero-kpi .v{color:var(--bz-anchor)} .hero-kpi .v small{color:rgba(22,36,47,.5)}
.hero-kpi.mark{background:var(--bz-marker)}     /* el highlight lima de "Preguntas ganadas" se mantiene */
.hero-kpi.mark .k{color:#3a4a18} .hero-kpi.mark .v{color:var(--bz-ink)} .hero-kpi.mark .v small{color:rgba(14,19,17,.5)}
.hero-deltachip.up{background:var(--bz-marker);color:var(--bz-ink)}
.hero-deltachip.down{background:var(--bz-danger-soft-2);color:#7f1414}
.hero-deltachip.neutral{background:rgba(16,36,47,.08);color:var(--bz-primary)}

/* ── bzov-hero: badge de premium en flujo (header flex), nunca solapa el texto ── */
.bzov-hero-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bzov-hero .bzbadge{position:static;flex:0 0 auto}

/* ── qcard: equilibrar alturas (la "perdida" llevaba comp. extra) ── */
.qeng{min-height:48px}
.qeng-comp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════════════════
   27/06 v5 — Feedback Oscar (3ª ronda):
     · Hero del análisis: bloque único → CARDS SEPARADAS. Todas en gris pastel
       salvo la del gráfico (blanca), cuyo plot pasa a azul pastel.
     · bzstage-in aprovecha todo el ancho (responsive).
     · El dropdown del switcher sale anclado al icono (no al borde izquierdo).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--bz-graypastel:#e7e9e1}

/* ── Hero del análisis en cards separadas ── */
.hero{background:transparent;box-shadow:none;border-radius:0;overflow:visible;
  display:flex;flex-direction:column;gap:14px}
.hero-main{gap:14px}
.hero-score{background:var(--bz-graypastel);border-radius:var(--bz-r-lg);border-right:0;
  box-shadow:var(--bz-sh-sm);padding:26px 28px}
.hero-chart{background:var(--bz-raised);border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh-sm);padding:22px 24px}
.hero-chart-plot{background:var(--bz-blue)}
.hero-chart-bar{fill:rgba(16,36,47,.16);cursor:pointer;transition:fill .15s} .hero-chart-bar:hover{fill:rgba(16,36,47,.32)} .hero-chart-bar.last{fill:var(--bz-anchor)}
.hero-kpis{border-top:0;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-kpi{background:var(--bz-graypastel);border-radius:var(--bz-r-md);border-right:0;
  box-shadow:var(--bz-sh-sm);padding:16px 20px}
.hero-kpi.mark{background:var(--bz-marker)}
@media(max-width:920px){
  .hero-score{border-bottom:0}
  .hero-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.hero-kpis{grid-template-columns:1fr}}

/* ── bzstage / header / topnav: aprovechar todo el ancho (responsive vía padding) ── */
.bzstage-in,.bzhead-in,.bztop-in{max-width:none}

/* ── Switcher: el dropdown sale anclado al icono (chevron), no al borde izquierdo ── */
.switcher-anchor{position:relative;display:inline-flex;align-items:center}
.menupop.switcher-pop{top:calc(100% + 6px);left:0;right:auto}

/* ── "Frente a tu competencia": el panel SoV (pocas barras) dejaba mucho hueco blanco al
   estirarse a la altura del de preguntas. Ya no se estira (altura de contenido) y las barras
   respiran más para que el panel tenga cuerpo. ── */
.compgrid{align-items:start}
.bzshell .sov{gap:18px}
.bzshell .sov-track{height:20px;border-radius:8px}
.bzshell .sov-fill{border-radius:8px}
.bzshell .sov-panel .bzpanel-b{padding-top:22px;padding-bottom:24px}

/* ── Plan de acción: con el stage a todo el ancho, auto-fill dejaba columnas vacías a la
   derecha. auto-fit colapsa las pistas vacías → las tarjetas llenan la fila. Igual en el
   grid de preguntas. ── */
.bzshell .plan-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.qgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}

/* ═══════════════════════════════════════════════════════════════════════════
   27/06 v6 — Feedback Oscar (4ª ronda):
     · hero-chart: toda la card del MISMO azul que el plot (un solo color).
     · cards grises del hero: un punto más claras (tirando a blanco).
     · score: protagonismo de color (marcador lima detrás del número).
     · competencia: layout apilado (SoV arriba a todo el ancho, ganadas|perdidas
       en 2 columnas debajo) — se acaban el hueco blanco y el desajuste de altura.
     · rsm: gap menor (había demasiado aire) + acards más estrechas.
     · cabecera de agencia: un punto más de padding.
   ═══════════════════════════════════════════════════════════════════════════ */

/* gris pastel del hero, un punto más claro */
:root{--bz-graypastel:#edefe8}

/* hero-chart: card entera del azul del plot (un solo color) */
.hero-chart{background:var(--bz-blue)}
.hero-chart-plot{background:transparent;padding:14px 12px 8px}

/* score con protagonismo: marcador lima detrás del número (gesto de marca) */
.hero-num b{position:relative;display:inline-block;z-index:0;padding:0 .04em}
.hero-num b::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:.1em;height:.34em;
  background:var(--bz-marker);border-radius:4px;z-index:-1}

/* ── Competencia: apilado (sin desajuste de alturas) ── */
.compgrid{grid-template-columns:1fr;gap:14px;align-items:stretch}
.bzshell .wl{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;align-items:start}
@media(max-width:560px){.bzshell .wl{grid-template-columns:1fr}}

/* ── rsm: menos aire entre secciones; acards más estrechas (≈ mitad) ── */
.rsm{gap:clamp(26px,3vw,38px)}
.bzshell .plan{gap:26px}
.bzshell .plan-cards{grid-template-columns:repeat(auto-fit,minmax(280px,360px));justify-content:start}

/* ── Cabecera de agencia: un punto más de padding ── */
.bzhead:not(.detail):not(.solo){padding-top:46px;padding-bottom:34px}

/* Fuentes que cita la IA (28/06) — dominios citados, estética hermana de .sov pero más compacta */
.csrc{display:flex;flex-direction:column;gap:9px}
.csrc-row{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 44px;gap:14px;align-items:center}
.csrc-dom{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csrc-track{height:26px;border-radius:7px;background:var(--bg-soft);position:relative;overflow:hidden}
.csrc-fill{position:absolute;inset:0 auto 0 0;border-radius:7px;min-width:3px;background:linear-gradient(90deg,var(--bz-blue-2,#c8dcec),var(--signal,#17c4a9));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.csrc-n{text-align:right;font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--muted)}
.csrc-n small{font-size:10px;color:var(--ink-3);margin-left:1px}
@media(max-width:560px){.csrc-row{grid-template-columns:minmax(96px,1fr) minmax(0,1.2fr) 38px;gap:10px}}

/* ── Métricas ricas de la respuesta de la IA (insights.js) — v1 ─────────────────────────────── */
.bzpanel-sub{display:block;margin-top:4px;font-size:12.5px;color:var(--bz-muted);line-height:1.45}
.insgrid{display:flex;flex-direction:column;gap:16px}
.ins-demo{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.01em;color:var(--bz-on-marker);background:var(--bz-marker);border-radius:var(--bz-r-sm);padding:8px 12px;align-self:flex-start}
/* KPI strip */
.insrow-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.inskpi{background:var(--bz-graypastel,#edefe8);border:var(--bz-edge);border-radius:var(--bz-r-md);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.inskpi-v{font-family:var(--font-mono);font-weight:600;font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--bz-ink)}
.inskpi-v small{font-size:.95rem;font-weight:500;color:var(--bz-muted);margin-left:1px}
.inskpi-l{font-size:12px;color:var(--bz-muted);line-height:1.3}
.inskpi.mark{background:var(--bz-marker)}
.inskpi.mark .inskpi-v{color:var(--bz-anchor)}
.inskpi.mark .inskpi-l{color:var(--bz-on-marker)}
.inskpi.mint{background:var(--bz-mint)}
.inskpi.mint .inskpi-v{color:var(--bz-anchor)}
.inskpi.mint .inskpi-l{color:var(--bz-on-mint)}
.insrow-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
/* por motor */
.inseng{display:flex;flex-direction:column;gap:12px}
.inseng-row{display:grid;grid-template-columns:88px minmax(0,1fr) 52px;gap:12px;align-items:center}
.inseng-nm{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.inseng-track{height:22px;border-radius:7px;background:var(--bg-soft);position:relative;overflow:hidden}
.inseng-fill{position:absolute;inset:0 auto 0 0;border-radius:7px;min-width:3px;background:linear-gradient(90deg,var(--bz-mint-2),var(--bz-signal));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.inseng-n{text-align:right;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink-2)}
.inseng-n small{font-size:10.5px;color:var(--ink-3)}
/* sentimiento */
.inssent{display:flex;flex-direction:column;gap:12px}
.inssent-bar{display:flex;height:22px;border-radius:7px;overflow:hidden;background:var(--bg-soft)}
.inssent-seg{height:100%}
.inssent-seg.pos{background:var(--bz-signal)}
.inssent-seg.neu{background:var(--bz-graypastel,#d6dccf)}
.inssent-seg.neg{background:var(--bz-grade-bad)}
.inssent-leg{display:flex;flex-wrap:wrap;gap:14px}
.inssent-lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bz-muted)}
.inssent-lg .dot{width:9px;height:9px;border-radius:3px}
.inssent-lg .dot.pos{background:var(--bz-signal)}
.inssent-lg .dot.neu{background:#c3cab9}
.inssent-lg .dot.neg{background:var(--bz-grade-bad)}
.ins-empty{font-size:13px;color:var(--bz-muted);margin:0}
/* oportunidades */
.insopp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.insopp-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bz-mint);border-radius:var(--bz-r-sm)}
.insopp-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bz-marker);color:var(--bz-anchor);flex:none}
.insopp-q{font-size:13.5px;color:var(--bz-on-mint);font-weight:500}
/* matriz quién gana */
.insmx{display:flex;flex-direction:column;gap:8px}
.insmx-row{display:grid;grid-template-columns:minmax(0,1.4fr) 110px minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;background:var(--bg-soft);border-radius:var(--bz-r-sm)}
.insmx-q{font-size:13.5px;color:var(--ink-2);font-weight:500}
.insmx-you{justify-self:start;font-size:11.5px;font-family:var(--font-mono);font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.insmx-you.yes{background:var(--bz-mint);color:var(--bz-on-mint)}
.insmx-you.no{background:var(--bz-danger-soft);color:var(--bz-danger-ink)}
.insmx-riv{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.insmx-chip{font-size:11.5px;color:var(--ink-2);background:var(--paper);border:var(--bz-edge);border-radius:999px;padding:3px 9px;white-space:nowrap}
.insmx-none{font-size:12px;color:var(--bz-on-marker);background:var(--bz-marker);border-radius:999px;padding:3px 9px}
@media(max-width:920px){.insrow-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.insrow-2{grid-template-columns:1fr}}
@media(max-width:560px){
  .insmx-row{grid-template-columns:1fr;gap:7px}
  .insmx-riv{justify-content:flex-start}
  .inseng-row{grid-template-columns:72px minmax(0,1fr) 46px}
}

/* ── v7 (29/06) layout: el CENTRO DE ANÁLISIS se acota a 1300px y se centra (negocio individual
   O detalle de cliente de agencia); la CARTERA de agencia se queda a ancho completo pero con más
   aire lateral. Gana a la capa v6 (.bzstage-in,.bzhead-in,.bztop-in{max-width:none}) por especificidad. */
.bzhead.solo + .bzstage-in,
.bzhead.detail + .bzstage-in{max-width:1300px;margin-inline:auto}
.bzhead.solo .bzhead-in,
.bzhead.detail .bzhead-in{max-width:1300px;margin-inline:auto}
/* Cartera de agencia (overview, sin .solo/.detail): ancho completo + más padding lateral. */
.bzhead:not(.solo):not(.detail){padding-left:clamp(44px,5vw,96px);padding-right:clamp(44px,5vw,96px)}
.bzhead:not(.solo):not(.detail) + .bzstage-in{padding-left:clamp(44px,5vw,96px);padding-right:clamp(44px,5vw,96px)}

/* ── Pestaña Cuenta v2 (29/06): filas de ajuste, switch de notificaciones y zona de peligro ── */
.acctset{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);box-shadow:var(--bz-sh-sm);padding:20px 24px;margin-top:14px}
.acctset-h{min-width:0}
.acctset-h h3{font-size:15px;font-weight:600;color:var(--bz-ink);margin:0}
.acctset-h p{font-size:13px;color:var(--bz-muted);margin:4px 0 0;max-width:52ch}
.acctset-ctl{display:flex;align-items:center;gap:10px}
.acctset-ctl.namectl{flex:1;justify-content:flex-end;min-width:min(100%,280px)}
.acctset-input{flex:1;max-width:320px;border:1px solid var(--bz-hairline-2);border-radius:11px;background:var(--bz-canvas);
  padding:10px 13px;font-family:var(--font-ui);font-size:14px;color:var(--bz-ink)}
.acctset-input:focus{outline:2px solid var(--bz-primary);outline-offset:2px;border-color:transparent}
.acctset-input::placeholder{color:var(--bz-muted)}
/* switch on/off */
.switch{position:relative;width:48px;height:28px;border-radius:999px;border:none;cursor:pointer;flex:0 0 auto;
  background:var(--bz-sunken);transition:background .2s ease;padding:0}
.switch.on{background:var(--bz-primary)}
.switch:focus-visible{outline:2px solid var(--bz-primary);outline-offset:2px}
.switch-k{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(14,19,17,.25);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.switch.on .switch-k{transform:translateX(20px)}
/* zona de peligro */
.acctdanger{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border:1px solid var(--bz-danger-soft);background:var(--bz-danger-bg);border-radius:var(--bz-r-lg);padding:20px 24px;margin-top:26px}
.acctdanger .acctset-h h3{color:var(--bz-danger-ink)}
.bzbtn.danger{background:var(--bz-danger);color:#fff;border-color:transparent}
.bzbtn.danger:hover{background:var(--bz-danger-ink)}
@media(max-width:560px){
  .acctset,.acctdanger{align-items:stretch}
  .acctset-ctl.namectl{justify-content:stretch}.acctset-input{max-width:none}
}

/* ── ShareMenu (compartir informe de un cliente) ── */
.sharemenu-wrap{position:relative;display:inline-flex}
.sharemenu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:190px;
  background:var(--bz-raised);border:1px solid var(--bz-hairline-2);border-radius:14px;box-shadow:var(--bz-sh);padding:6px;display:flex;flex-direction:column}
.sharemenu button,.sharemenu a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--bz-ink);cursor:pointer;padding:9px 11px;border-radius:9px;text-decoration:none}
.sharemenu button:hover,.sharemenu a:hover{background:var(--bz-canvas)}
.sharemenu svg{color:var(--bz-muted);flex:none}

/* ── Impresión / "Descargar PDF": oculta el chrome y deja un informe limpio y con color de marca ── */
@media print {
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;animation:none !important;transition:none !important}
  @page{margin:14mm}
  body,.bzshell,.bzstage{background:#fff !important}
  .bztop,.segctl,.bzhead-crumb,.title-row-actions,.bzhead-bizact,.sharemenu-wrap,.acctmenu-wrap,
  .btn.unlock,.actions-row,.switcher-anchor,.reanalyze-card,.scrim,.acctdanger{display:none !important}
  .bzstage::before{content:"EasyGEO · Informe de visibilidad en IA";display:block;font-family:var(--font-mono);
    font-size:11px;letter-spacing:.04em;color:#0a2b22;padding:0 0 10px;border-bottom:1px solid #d9ddd2;margin-bottom:14px}
  .bzstage-in{padding:0 !important;max-width:none !important}
  .bzhead{padding:0 0 14px !important;border:none !important}
  .rsm-sec,.bzpanel,.acard,.qcard,.inskpi,.insmx-row,.faq,.compgrid>*{break-inside:avoid;page-break-inside:avoid}
}

/* ── Modal grande de "Ajustes de cuenta" (29/06): abre desde el avatar, cabe todo cómodo ── */
.acctmodal{max-width:780px;padding:30px 34px}
.acctmodal-body{padding-top:2px}
.acctmodal-body .rsm{display:block}
.acctmodal-body .acctblk{margin-top:6px}
@media print{.acctmodal,.scrim{display:none !important}}
@media(max-width:560px){.acctmodal{padding:24px 18px}}

/* ── Avatar de cuenta editable (foto propia, modal de ajustes) + foto en el avatar del topbar ── */
.acctblk-av.editable{position:relative;cursor:pointer;overflow:hidden;flex:0 0 auto}
.acctblk-av.editable img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.acctblk-av-edit{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;display:grid;place-items:center;
  border-radius:50%;background:var(--bz-marker);color:var(--bz-anchor);box-shadow:0 1px 3px rgba(14,19,17,.3);z-index:2}
.acctblk-av.editable input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.acctbtn .av.hasimg{overflow:hidden;padding:0}
.acctbtn .av.hasimg img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ── Selector de idioma (segmented ES/EN) en la modal de cuenta ── */
.langseg{display:inline-flex;background:var(--bz-sunken);border-radius:11px;padding:3px;gap:2px}
.langseg button{border:0;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--bz-muted);padding:7px 16px;border-radius:9px;transition:background .15s ease,color .15s ease}
.langseg button.on{background:var(--bz-raised);color:var(--bz-ink);box-shadow:var(--bz-sh-sm)}
.langseg button:focus-visible{outline:2px solid var(--bz-primary);outline-offset:2px}

/* ── Modal de añadir/reanalizar negocio: tono soft-fintech como la de cuenta (29/06; paddings
   rehechos 30/06 tras feedback de Oscar "los paddings están mal"). El modal de FORMULARIO ya no
   hereda los paddings de la modal de cuenta tal cual: tiene su propia caja, rejilla y fila de
   motores con respiración correcta y un pie de acción claro. ── */
.modal.formmodal{max-width:620px;padding:0}                    /* la caja la marca el body interno */
.formmodal .modalclose{top:18px;right:18px}
.formmodal .acctmodal-body{padding:30px 32px 32px}
@media(max-width:560px){.formmodal .acctmodal-body{padding:24px 18px 26px}}
.formmodal .sechead{padding-right:34px}                        /* deja sitio a la X arriba-derecha */

/* rejilla de campos: 2 col en desktop, gap vertical mayor que horizontal para ritmo */
.formmodal .scan{margin-top:22px;gap:18px 18px}
.formmodal .fld{margin:0}                                      /* el gap de la rejilla manda, sin margen suelto */
.formmodal .fld label{font-size:13px;font-weight:600;color:var(--bz-ink);margin-bottom:7px}
.formmodal .fld input,.formmodal .fld textarea{background:var(--bz-canvas);border:1px solid var(--bz-hairline-2);border-radius:12px;padding:11px 13px;font-size:14px}
.formmodal .fld textarea{min-height:84px}
.formmodal .fld .hint{font-size:12px;color:var(--bz-muted);margin-top:6px}

/* fila de motores: card propia con su cabecera; los checkboxes en línea, SIN el botón Run dentro
   (el botón pasa a un pie de acción a todo el ancho, separado, para que no quede apretado) */
.formmodal .engs-wrap{grid-column:1/-1;margin-top:2px;padding:15px 17px;border:var(--bz-edge);border-radius:14px;background:var(--bz-raised)}
.formmodal .engs-wrap > .engs-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--bz-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:11px}
.formmodal .engs{gap:20px;margin:0;align-items:center}
.formmodal .engs label{font-size:14px;color:var(--bz-ink)}
.formmodal .engs-soon{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--bz-muted);
  background:var(--bz-sunken);border-radius:999px;padding:5px 11px;letter-spacing:.01em}
.formmodal .formfoot{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:6px}
.formmodal .formfoot .ffhint{font-size:12px;color:var(--bz-muted);line-height:1.4;min-width:0}
.formmodal .formfoot .btn.run{margin-left:auto;flex:0 0 auto;border-radius:12px;padding:12px 24px;font-weight:600;min-height:46px}
@media(max-width:560px){
  .formmodal .formfoot{flex-direction:column;align-items:stretch}
  .formmodal .formfoot .btn.run{margin-left:0;width:100%;justify-content:center}
}
.formmodal .alert.spaced{grid-column:1/-1;margin-top:4px}

/* ════════════════════════════════════════════════════════════════════════════
   v8 (30/06) — BLOQUES DE PAGO INDIVIDUALES (.lkb*) + sus mini-vistas (.pkv*) +
   PÁGINA de precios in-app (.pricing*/.priceplan*). Patrón portado de resultado.html
   (.lk*) al sistema soft-fintech del panel. Feedback Oscar: cada pieza de pago como
   bloque con su propio candado + teaser + CTA; precios como página, no modal apretado.
   Acento de marca = teal profundo (--bz-primary) sobre tinte suave; sin glow ni offset.
   ════════════════════════════════════════════════════════════════════════════ */
.bzshell{--lk-tint:rgba(10,87,80,.07); --lk-tint-2:rgba(10,87,80,.12); --lk-edge:rgba(10,87,80,.18)}

/* rejilla de bloques de pago */
.lkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
.lkgrid>*{min-width:0}
.lkgrid-one{grid-template-columns:minmax(0,1fr);max-width:560px}
@media(max-width:680px){.lkgrid{grid-template-columns:minmax(0,1fr)}}

/* bloque cerrado individual */
.lkb{position:relative;display:flex;flex-direction:column;background:var(--bz-raised);
  border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);overflow:hidden;
  box-shadow:var(--bz-sh-sm);transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s}
.lkb:hover{transform:translateY(-3px);box-shadow:var(--bz-sh);border-color:var(--lk-edge)}
@media(prefers-reduced-motion:reduce){.lkb:hover{transform:none}}
.lkb-hero{border-color:var(--lk-edge)}
.lkb-lock{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:28px;height:28px;
  color:var(--bz-primary);background:var(--bz-canvas);border:1px solid var(--lk-edge);border-radius:9px;box-shadow:var(--bz-sh-sm)}
.lkb-head{display:flex;align-items:flex-start;gap:13px;padding:22px 22px 0}
.lkb-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--lk-tint);
  border:1px solid var(--lk-edge);display:grid;place-items:center;color:var(--bz-primary)}
.lkb-ti{min-width:0;padding-right:24px}
.lkb-ti h3{font-size:16.5px;letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--bz-ink)}
.lkb-ti p{margin:6px 0 0;font-size:13.5px;color:var(--bz-muted);line-height:1.45}
/* vista previa difuminada */
.lkb-peek{position:relative;margin:16px 18px 0;border:1px solid var(--bz-hairline);border-radius:14px;
  overflow:hidden;isolation:isolate;background:var(--bz-canvas);min-height:128px}
.lkb-blur{filter:blur(4px);transform:scale(1.03);pointer-events:none;user-select:none;padding:15px 15px 16px;opacity:.95}
.lkb-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(243,244,238,0) 8%,rgba(243,244,238,.22) 42%,rgba(243,244,238,.82) 80%,rgba(243,244,238,.97) 100%)}
/* CTA propio del bloque */
.lkb-cta{position:relative;display:flex;align-items:center;gap:8px;margin:14px 18px 18px;min-height:46px;
  border:1px solid var(--lk-edge);border-radius:12px;background:var(--lk-tint);padding:12px 14px;
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--bz-primary);cursor:pointer;
  transition:background .18s,border-color .18s,transform .16s cubic-bezier(.2,.7,.2,1)}
.lkb-cta:hover{background:var(--lk-tint-2);border-color:var(--bz-primary);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.lkb-cta:hover{transform:none}}
.lkb-cta:focus-visible{outline:2px solid var(--bz-primary);outline-offset:2px}
.lkb-key{flex:0 0 auto}
.lkb-arrow{margin-left:auto;flex:0 0 auto;transition:transform .18s}
.lkb-cta:hover .lkb-arrow{transform:translateX(3px)}

/* ── mini-vistas (decoración difuminada, datos de ejemplo) ── */
.pkv{font-family:var(--font-ui)}
.pkv-h{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--bz-muted);
  font-family:var(--font-mono);margin:0 0 12px}
.pkv-sov{display:flex;align-items:center;gap:10px;margin:9px 0}
.pkv-sov .who{width:96px;flex:0 0 auto;font-size:12.5px;color:var(--bz-ink);text-align:right;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkv-sov.you .who{font-weight:700}
.pkv-sov .bar{flex:1;min-width:0;height:13px;border-radius:7px;background:var(--bz-sunken);overflow:hidden}
.pkv-sov .bar i{display:block;height:100%;border-radius:7px;background:var(--rival,#c3cfd8)}
.pkv-sov.you .bar i{background:var(--bz-anchor)}
.pkv-sov .pct{width:34px;flex:0 0 auto;font-family:var(--font-mono);font-size:12px;color:var(--bz-muted);text-align:right}
.pkv-sov.you .pct{color:var(--bz-primary)}
.pkv-meter{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.pkv-meter b{font-family:var(--font-mono);font-size:22px;color:var(--bz-ink);letter-spacing:-.03em}
.pkv-meter span{font-size:13px;color:var(--bz-muted)}
.pkv-q{display:flex;align-items:center;gap:10px;background:var(--bz-raised);border:1px solid var(--bz-hairline);
  border-radius:10px;padding:9px 11px;margin-bottom:8px}
.pkv-q .eng{flex:0 0 auto;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--font-mono);color:var(--bz-muted);width:60px}
.pkv-q .qt{flex:1;min-width:0;font-size:12.5px;color:var(--bz-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkv-q .st{flex:0 0 auto;font-size:11px;font-weight:600}
.pkv-q .st.win{color:var(--bz-primary)} .pkv-q .st.lose{color:var(--bz-danger)}
.pkv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.pkv-kpi{background:var(--bz-raised);border:1px solid var(--bz-hairline);border-radius:10px;padding:10px 11px}
.pkv-kpi .kn{display:block;font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--bz-ink);letter-spacing:-.02em}
.pkv-kpi .kl{display:block;font-size:10.5px;color:var(--bz-muted);margin-top:3px}
.pkv-sent{display:flex;height:13px;border-radius:7px;overflow:hidden;background:var(--bz-sunken)}
.pkv-sent i{display:block;height:100%}
.pkv-sent .pos{background:var(--bz-mint-2)} .pkv-sent .neu{background:var(--bz-sunken)} .pkv-sent .neg{background:var(--bz-danger-soft)}
.pkv-act{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--bz-hairline)}
.pkv-act:first-child{border-top:0}
.pkv-act .imp{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pkv-act .imp.hi{background:var(--bz-danger)} .pkv-act .imp.md{background:var(--bz-marker)} .pkv-act .imp.lo{background:var(--bz-mint-2)}
.pkv-act .at{flex:1;min-width:0;font-size:13px;color:var(--bz-ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkv-act .ax{font-family:var(--font-mono);font-size:11px;color:var(--bz-muted);flex:0 0 auto}
.pkv-code{margin:0;background:var(--bz-anchor);border-radius:11px;padding:14px 15px;font-family:var(--font-mono);
  font-size:12px;line-height:1.7;color:var(--bz-on-anchor);overflow:hidden;white-space:pre-wrap}
.pkv-code .k{color:var(--bz-marker)} .pkv-code .s{color:var(--bz-mint-2)} .pkv-code .c{color:var(--bz-mint)}

/* ════════ PÁGINA de precios in-app ════════ */
.pricingview{padding-top:0}
.pricinghead .bzhead-in{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pricing-back{align-self:flex-start;margin-bottom:14px}
.pricinghead .bzhead-title{margin:2px 0 0}
.pricing-intro{font-size:15px;color:var(--bz-muted);line-height:1.55;max-width:62ch;margin:14px 0 0}
.pricing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.pricing-grid>*{min-width:0}
@media(max-width:1180px){.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pricing-grid{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}}
.priceplan{position:relative;display:flex;flex-direction:column;background:var(--bz-raised);
  border:1px solid var(--bz-hairline);border-radius:var(--bz-r-lg);padding:24px 22px;box-shadow:var(--bz-sh-sm);
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s}
.priceplan:hover{transform:translateY(-4px);box-shadow:var(--bz-sh);border-color:var(--bz-hairline-2)}
@media(prefers-reduced-motion:reduce){.priceplan:hover{transform:none}}
.priceplan.star{border-color:var(--bz-primary);box-shadow:0 1px 2px rgba(14,19,17,.05),0 18px 40px -20px rgba(10,87,80,.4)}
.priceplan.current{border-color:var(--bz-mint-2)}
.priceplan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--bz-primary);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.01em;border-radius:999px;padding:5px 13px;white-space:nowrap;box-shadow:var(--bz-sh-sm)}
.priceplan-name{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--bz-ink);letter-spacing:-.01em}
.priceplan-cap{font-size:12.5px;color:var(--bz-muted);margin-top:4px;line-height:1.4;min-height:34px}
.priceplan-price{display:flex;align-items:baseline;gap:4px;margin:16px 0 4px}
.priceplan-price .amt{font-family:var(--font-mono);font-size:38px;font-weight:700;letter-spacing:-.04em;color:var(--bz-ink);font-variant-numeric:tabular-nums}
.priceplan-price .per{color:var(--bz-muted);font-size:13px;font-weight:500}
.priceplan-feats{list-style:none;margin:18px 0 22px;padding:18px 0 0;border-top:1px solid var(--bz-hairline);display:grid;gap:10px}
.priceplan-feats li{display:flex;gap:9px;align-items:flex-start;font-size:13.2px;color:var(--bz-ink);line-height:1.4}
.priceplan-feats .ck{flex:0 0 auto;color:var(--bz-primary);margin-top:2px;display:inline-flex}
.priceplan-cta{margin-top:auto;width:100%;justify-content:center;text-align:center}
button.priceplan-cta{min-height:46px}
.priceplan-cta.is-current,.priceplan-cta.is-free{display:flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:12px;font-size:13px;font-weight:600;border:1px dashed var(--bz-hairline-2);color:var(--bz-muted)}
.priceplan-cta.is-current{border-style:solid;border-color:var(--bz-mint-2);color:var(--bz-primary);background:var(--lk-tint)}
.pricing-foot{font-size:13px;color:var(--bz-muted);text-align:center;margin:30px auto 10px;max-width:60ch;line-height:1.5}
