:root{
    --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F6F7F9; --side:#FFFFFF;
    --ink:#2B3345; --head:#1B2234; --muted:#6A7383; --faint:#98A0AE;
    --line:#E5E7EC; --line-soft:#EEF0F4;
    --accent:#2563EB; --accent-ink:#1D4ED8; --accent-2:#E8F0FE;
    --accent-wash:rgba(37,99,235,.10); --accent-wash-2:rgba(37,99,235,.05);
    --pos:#15A36B; --neg:#E5484D; --warn:#D97706; --warn-wash:rgba(217,119,6,.10);
    --radius:11px; --radius-sm:8px;
    --fs-title:22px; --fs-sub:14px; --fs-body:13px;
    --shadow:0 1px 2px rgba(27,34,52,.04), 0 2px 8px rgba(27,34,52,.04);
    font-synthesis-weight:none;
  }
  :root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
    --bg:#0D131B; --surface:#141C27; --surface-2:#111823; --side:#121A24;
    --ink:#E4E9F1; --head:#F0F3F8; --muted:#95A1B1; --faint:#6B7889;
    --line:#243040; --line-soft:#1C2530;
    --accent:#5B93FF; --accent-ink:#A9C6FF; --accent-2:#17233A;
    --accent-wash:rgba(91,147,255,.16); --accent-wash-2:rgba(91,147,255,.08);
    --pos:#36C48A; --neg:#F0655A; --warn:#F0A64B; --warn-wash:rgba(240,166,75,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  }}
  :root[data-theme="dark"]{
    --bg:#0D131B; --surface:#141C27; --surface-2:#111823; --side:#121A24;
    --ink:#E4E9F1; --head:#F0F3F8; --muted:#95A1B1; --faint:#6B7889;
    --line:#243040; --line-soft:#1C2530;
    --accent:#5B93FF; --accent-ink:#A9C6FF; --accent-2:#17233A;
    --accent-wash:rgba(91,147,255,.16); --accent-wash-2:rgba(91,147,255,.08);
    --pos:#36C48A; --neg:#F0655A; --warn:#F0A64B; --warn-wash:rgba(240,166,75,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:"Nunito Sans",system-ui,sans-serif;font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
  .num{font-variant-numeric:tabular-nums}
  h1,h2,h3{margin:0;color:var(--head);font-weight:700;letter-spacing:-.01em}
  a{color:inherit}

  .app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
  .side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:14px 12px}
  .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
  .brand-mark{width:30px;height:30px;border-radius:8px;flex:none;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
  .brand-name{font-weight:800;font-size:14px;line-height:1.1;color:var(--head)}
  .brand-sub{font-size:11px;color:var(--faint);margin-top:1px}
  .nav{display:flex;flex-direction:column;gap:1px}
  .nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:var(--fs-sub);font-weight:600;color:var(--muted);text-decoration:none;cursor:pointer}
  .nav a svg{width:17px;height:17px;flex:none;opacity:.85}
  .nav a:hover{background:var(--surface-2);color:var(--ink)}
  .nav a.active{background:var(--accent-2);color:var(--accent-ink)}
  .nav-label{font-size:10.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:14px 11px 5px}
  .side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
  .client-switch{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;font-size:var(--fs-body)}
  .client-switch .dot{width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
  .client-switch b{font-weight:700;color:var(--head)}
  .client-switch svg{width:14px;height:14px;color:var(--muted);margin-left:auto}
  .user-chip{display:flex;align-items:center;gap:9px;padding:6px 10px;font-size:12px;color:var(--muted)}
  .user-chip .av{width:23px;height:23px;border-radius:50%;background:var(--accent-2);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}

  .main{min-width:0;display:flex;flex-direction:column}
  .topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 22px;flex-wrap:wrap}
  .fld{display:flex;align-items:center;gap:8px}
  .fld .lbl{font-size:12px;color:var(--muted)}
  .ctrl{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:var(--fs-body);cursor:pointer;color:var(--ink)}
  .ctrl b{font-weight:700}.ctrl svg{width:14px;height:14px;color:var(--muted)}
  .spacer{flex:1}
  .seg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
  .seg button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:var(--fs-body);font-weight:700;color:var(--muted);padding:6px 13px;border-radius:7px;white-space:nowrap}
  .seg button[aria-selected="true"]{background:var(--accent);color:#fff}
  .btn{appearance:none;cursor:pointer;font:inherit;font-size:var(--fs-body);font-weight:700;border-radius:9px;padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .icbtn{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--muted)}.icbtn svg{width:16px;height:16px}
  body:not([data-screen="resumen"]) .only-resumen{display:none!important}

  .content{padding:20px 22px 44px;max-width:1200px;width:100%}
  .screen{display:none}.screen.active{display:block}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .ribbon{margin-bottom:14px}
  .ribbon span{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-2);border-radius:999px;padding:4px 12px}
  .page-h{display:flex;align-items:center;gap:12px;margin:0 2px 4px;flex-wrap:wrap}
  .page-h h1{font-size:var(--fs-title);font-weight:800}
  .page-h .upd{margin-left:auto;font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px}
  .subline{font-size:var(--fs-body);color:var(--muted);margin:0 2px 16px}.subline b{color:var(--ink);font-weight:700}

  .ico{width:14px;height:14px;color:var(--accent);opacity:.8;flex:none}
  .dots{margin-left:auto;color:var(--faint);cursor:pointer}.dots svg{width:16px;height:16px}

  /* Stat cards */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
  .stat{padding:15px 16px;display:flex;flex-direction:column}
  .stat-h{display:flex;align-items:center;gap:6px}
  .stat-h .t{font-size:var(--fs-sub);font-weight:700;color:var(--head)}
  .stat .v{font-size:var(--fs-title);font-weight:800;color:var(--head);margin:9px 0 1px;letter-spacing:-.015em}
  .stat .d{font-size:12px;color:var(--faint)}.stat .d .up{color:var(--pos);font-weight:700}.stat .d .down{color:var(--neg);font-weight:700}
  .spark{margin-top:11px;height:38px;width:100%;display:block}

  .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:14px}
  .cardpad{padding:16px 18px}
  .card-h{display:flex;align-items:center;gap:6px;margin-bottom:14px}
  .card-h h2{font-size:var(--fs-sub);font-weight:700}

  /* horizontal bars */
  .barrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .barrow:last-child{margin-bottom:0}
  .barrow .lbl{width:120px;font-size:var(--fs-body);color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
  .barrow .track{flex:1;height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden}
  .barrow .track > i{display:block;height:100%;background:var(--accent);border-radius:6px}
  .barrow .val{width:52px;font-size:var(--fs-body);font-weight:700;color:var(--head);text-align:right;flex:none}

  /* winner */
  .winner-top{display:flex;align-items:center;gap:7px;margin-bottom:12px}
  .winner-top .ttl{font-size:var(--fs-sub);font-weight:700}
  .winner-body{display:flex;gap:12px}
  .thumb{width:66px;height:84px;flex:none;border-radius:8px;background:linear-gradient(135deg,#2b3a52,#141d2c);border:1px solid var(--line);position:relative}
  .thumb .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.9}.thumb .play svg{width:20px;height:20px}
  .winner-name{font-weight:700;font-size:var(--fs-sub);color:var(--head)}
  .winner-path{font-size:12px;color:var(--faint);margin-top:2px}
  .winner-metrics{display:flex;gap:16px;margin-top:11px}
  .wm .k{font-size:11px;color:var(--muted)}.wm .v{font-weight:800;font-size:var(--fs-sub);color:var(--head);margin-top:1px}
  .winner-actions{display:flex;gap:7px;margin-top:14px}

  .note{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;padding:11px 14px;margin-bottom:16px;font-size:var(--fs-body);color:var(--muted)}
  .note svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}.note b{color:var(--ink);font-weight:700}
  .badge-mad{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-2);border-radius:5px;padding:1px 6px}

  .section-h{display:flex;align-items:center;justify-content:space-between;margin:0 2px 11px}
  .section-h h2{font-size:var(--fs-sub)}.section-h .hint{font-size:12px;color:var(--faint)}
  .list{overflow:hidden}
  .lrow{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer}
  .lrow:last-child{border-bottom:0}.lrow:hover{background:var(--surface-2)}
  .lrow .main2{flex:1;min-width:0}
  .lrow .nm{font-weight:700;font-size:var(--fs-sub);color:var(--head);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .lrow .nm .alertpill,.lrow .nm .obj{white-space:nowrap}
  /* Sesión 4 · Y: la tabla campaña › conjunto › anuncio entra sin scroll en 1440 px (antes el ojo quedaba afuera) */
  /* ⓘ con explicación (como el mockup) */
  .i-tip{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px;color:var(--blue,#2563EB);cursor:help;outline:none}
  .i-tip svg{width:14px;height:14px}
  .i-tip:hover::after,.i-tip:focus::after{content:attr(data-i);position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:260px;white-space:normal;font-size:12px;font-weight:600;line-height:1.4;color:#fff;background:#1F2433;border-radius:8px;padding:7px 10px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.18);text-transform:none;letter-spacing:0}
  .anal-grid{align-items:start}
  .obj{font-size:10.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-2);border-radius:5px;padding:2px 7px;flex:none}
  .lrow .sub{font-size:var(--fs-body);color:var(--muted);margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}.lrow .sub b{color:var(--ink);font-weight:700}
  .lrow .roas{text-align:right;min-width:66px}.lrow .roas .k{font-size:11px;color:var(--muted)}
  .lrow .roas .v{font-weight:800;font-size:var(--fs-sub);color:var(--head);line-height:1.2}
  .lrow .chev{width:17px;height:17px;color:var(--faint);flex:none}

  .tablewrap{overflow:hidden}
  .tbl-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
  .tbl-head h2{font-size:var(--fs-sub)}
  .tbl-tools{display:flex;gap:7px}
  .chipbtn{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}
  .scroll{overflow-x:auto}
  table{border-collapse:collapse;width:100%;min-width:920px;font-size:var(--fs-body)}
  thead th{position:sticky;top:0;background:var(--surface-2);z-index:2;text-align:right;font-weight:700;font-size:11px;color:var(--muted);padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
  thead th.l{text-align:left}thead th.kpi-col{color:var(--accent-ink)}
  td{padding:11px 13px;text-align:right;color:var(--ink);border-bottom:1px solid var(--line-soft);white-space:nowrap}td.l{text-align:left}
  tbody tr:last-child td{border-bottom:0}
  @media (max-width:1600px){thead th{padding:10px 8px}td{padding:11px 8px}.name-cell{min-width:200px}}
  .name-cell{display:flex;align-items:center;gap:9px;min-width:240px}
  .tier{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 6px;border-radius:5px;flex:none}
  .tier.c{color:var(--accent-ink);background:var(--accent-2)}.tier.s{color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}.tier.a{color:var(--faint);background:transparent;border:1px dashed var(--line)}
  .nm{font-weight:600;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
  .row-c td{background:var(--surface-2)}.row-c .nm{font-weight:800}
  .row-s .name-cell{padding-left:16px}.row-a .name-cell{padding-left:34px}
  .mini-thumb{width:28px;height:28px;border-radius:6px;flex:none;background:linear-gradient(135deg,#2b3a52,#141d2c);border:1px solid var(--line)}
  .state{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
  .state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos)}
  .state.paused::before{background:#D9A80B}.state.deleted::before{background:var(--neg)}.state.deleted{color:var(--neg);text-decoration:line-through}
  .kpi-cell{color:var(--head);font-weight:800;background:var(--accent-wash-2)}
  .win-row td{background:var(--accent-wash)!important}
  .win-flag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:5px;padding:1px 6px;margin-right:2px}
  .warn-cell{color:var(--warn);font-weight:700}
  .caret{width:15px;height:15px;color:var(--faint);transition:transform .15s;flex:none;cursor:pointer}.collapsed .caret{transform:rotate(-90deg)}
  .foot{font-size:12px;color:var(--faint);padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  body:not(.adv) .only-adv{display:none}body.adv .only-simple{display:none}

  /* Config & Help */
  .cfg,.help{display:flex;flex-direction:column;gap:14px;max-width:840px}
  .cfg-h{padding:15px 18px;border-bottom:1px solid var(--line-soft)}.cfg-h h2{font-size:var(--fs-sub)}.cfg-h p{font-size:var(--fs-body);color:var(--muted);margin:3px 0 0}
  .field{padding:15px 18px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:220px 1fr;gap:12px 22px;align-items:start}.field:last-child{border-bottom:0}
  .field .lab{font-weight:700;font-size:var(--fs-body);color:var(--ink)}.field .lab small{display:block;font-weight:400;color:var(--muted);margin-top:3px;line-height:1.45}
  input[type=text],select{width:100%;max-width:340px;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
  .inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .swatches{display:flex;gap:8px}.sw{width:25px;height:25px;border-radius:7px;cursor:pointer;border:2px solid transparent}.sw.on{border-color:var(--ink)}
  .help-ctl{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
  .warnbox{display:flex;gap:9px;background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-radius:8px;padding:10px 12px;font-size:12px;color:var(--ink);margin-top:10px}.warnbox svg{width:15px;height:15px;color:var(--warn);flex:none;margin-top:1px}
  .userline{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-body)}.userline:last-child{border-bottom:0}
  .uav{width:23px;height:23px;border-radius:50%;background:var(--accent-2);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
  .tag{font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-2);border-radius:5px;padding:1px 7px}
  .help-card{padding:18px 20px}.help-card h2{font-size:var(--fs-sub);margin-bottom:7px}.help-card h3{font-size:var(--fs-body);margin:15px 0 5px;color:var(--accent-ink)}
  .help-card p{font-size:var(--fs-body);color:var(--muted);margin:0 0 9px;max-width:70ch}.help-card p b{color:var(--ink)}
  .timeline{display:flex;gap:4px;margin:12px 0}.tl{flex:1;text-align:center}.tl .bar2{height:26px;border-radius:5px;background:var(--accent);opacity:var(--o,1)}.tl small{font-size:10px;color:var(--faint);display:block;margin-top:5px}
  .gloss{display:grid;grid-template-columns:130px 1fr;gap:8px 18px;font-size:var(--fs-body)}.gloss dt{font-weight:700;color:var(--ink)}.gloss dd{margin:0;color:var(--muted)}
  .win-def{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:7px;font-size:var(--fs-body);color:var(--muted)}.win-def b{color:var(--ink)}

  /* Análisis / desgloses */
  .anal{display:flex;flex-direction:column;gap:14px}
  .anal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:960px){.anal-grid{grid-template-columns:minmax(0,1fr)}} /* Sesión 4 · Y: en el celular se iba a 557 px */
  .insight{font-size:12px;color:var(--muted);margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft);display:flex;gap:7px}
  .insight svg{width:14px;height:14px;color:var(--accent);flex:none;margin-top:1px}.insight b{color:var(--ink);font-weight:700}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-2);border-radius:999px;padding:4px 11px}
  .aud-row{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-body)}
  .aud-row:last-child{border-bottom:0}.aud-row .k{color:var(--muted);font-weight:700}
  .hours{display:flex;align-items:flex-end;gap:3px;height:78px}
  .hours .hb{flex:1;background:var(--accent);border-radius:3px 3px 0 0;opacity:.85}
  .hours-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:6px}

  /* Gráfico grande */
  .chartcard .legendchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto}
  .chartcard .legendchip::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent)}
  .chartcard svg.big-chart{width:100%;height:190px;display:block}
  .chartcard .xaxis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:8px;padding:0 2px}
  .gridln{stroke:var(--line-soft);stroke-width:1}

  /* Creativos (imágenes) */
  .cr1{background:linear-gradient(150deg,#1b1b1f,#4a3b34)}
  .cr2{background:linear-gradient(150deg,#7c3aed,#2563eb)}
  .cr3{background:linear-gradient(150deg,#0f766e,#0e7490)}
  .cr4{background:linear-gradient(150deg,#e5484d,#d97706)}
  .cr5{background:linear-gradient(150deg,#1f2937,#52606d)}
  .cr6{background:linear-gradient(150deg,#db2777,#7c3aed)}
  .gtools{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
  .chipbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .cr{position:relative;aspect-ratio:4/5}
  .cr .ov{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
  .cr .tag{align-self:flex-start;font-size:10px;font-weight:700;background:rgba(0,0,0,.42);padding:2px 8px;border-radius:999px;backdrop-filter:blur(2px)}
  .cr .big{font-weight:800;font-size:16px;text-shadow:0 1px 7px rgba(0,0,0,.5);line-height:1.12;letter-spacing:.3px}
  .cr .playc{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.cr .playc svg{width:30px;height:30px;color:#fff;opacity:.92;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
  .cr .win-ov{position:absolute;top:9px;right:9px;font-size:10px;font-weight:700;color:#fff;background:var(--accent);border-radius:6px;padding:2px 7px}

  /* Agencia / Clientes */
  .ag-foot{font-size:12px;color:var(--faint);margin-top:12px}
  .alertpill{font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-wash);border-radius:6px;padding:2px 8px}
  .okpill{font-size:11px;font-weight:700;color:var(--pos);background:rgba(21,163,107,.10);border-radius:6px;padding:2px 8px}
  .cl-add{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
  .cl-add .f{display:flex;flex-direction:column;gap:5px}.cl-add .f label{font-size:12px;font-weight:700;color:var(--ink)}
  .cl-add .full{grid-column:1 / -1}
  /* Preview de video (vpreview.js): el <video> va encima de la portada, abajo de las etiquetas */
  [data-vprev]{position:relative;overflow:hidden}
  .vp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;pointer-events:none;z-index:1;background:transparent}
  .vp-on .vp-v{opacity:1}
  .vp-on .playc,.vp-on .play{opacity:0;transition:opacity .2s}
  .vp-badge{position:absolute;left:6px;bottom:6px;z-index:2;display:inline-flex;align-items:center;gap:3px;padding:2px 6px 2px 4px;border-radius:999px;background:rgba(10,14,22,.66);color:#fff;font-size:11px;font-weight:700;line-height:16px;cursor:pointer}
  .vp-badge svg{width:12px;height:12px}
  .vp-badge b{font-weight:700}
  .vp-load .vp-badge::after{content:"";width:9px;height:9px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:vpspin .7s linear infinite}
  @keyframes vpspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){.vp-v{transition:none}.vp-load .vp-badge::after{animation:none}}
  .thumb .vp-badge{left:4px;bottom:4px;padding:1px 5px 1px 3px;font-size:10px}
  /* Buscador de cuentas publicitarias (Clientes) */
  .acc-pick{display:flex;flex-direction:column;gap:6px}
  .acc-list{max-height:248px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:4px}
  .acc-list>.muted,.acc-list>.faint{padding:8px 10px;font-size:12px}
  .acc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer;font:inherit;color:var(--ink)}
  .acc-row:hover:not(:disabled){background:var(--bg)}
  .acc-row.on{background:color-mix(in srgb,var(--blue,#2563EB) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue,#2563EB) 40%,transparent)}
  .acc-row:disabled{opacity:.55;cursor:not-allowed}
  .acc-row .acc-n{flex:1 1 200px;min-width:0;display:flex;flex-direction:column}
  .acc-row .acc-n b{color:var(--head);font-size:var(--fs-body);overflow-wrap:anywhere}.acc-row .acc-n small{color:var(--faint);font-size:12px}
  .acc-row .acc-m{font-size:12px;color:var(--muted);white-space:nowrap}
  .steps{list-style:none;counter-reset:s;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
  .steps li{counter-increment:s;display:flex;gap:10px;font-size:var(--fs-body);color:var(--muted)}
  .steps li::before{content:counter(s);flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent-2);color:var(--accent-ink);font-weight:800;font-size:11px;display:grid;place-items:center}

  @media (max-width:960px){.stats{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.field{grid-template-columns:1fr}.gloss{grid-template-columns:1fr}.cl-add{grid-template-columns:1fr}}
  @media (max-width:760px){
    .app{grid-template-columns:1fr}
    .side{position:static;height:auto;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:9px 12px}
    .brand{padding:0 6px 0 0}.brand-sub{display:none}.nav-label,.side-foot{display:none}
    .nav{flex-direction:row;gap:3px}.nav a{padding:7px 9px;white-space:nowrap}
    .content{padding:16px 15px 36px}.stats{grid-template-columns:1fr 1fr;gap:11px}
    .lrow{flex-wrap:wrap}.lrow .roas{text-align:left}.topbar{padding:9px 14px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  .gall{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .gcard{overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
  .gcard:hover{border-color:var(--accent)}

  /* ───────── Mockup FINAL: campañas, conjunto, ficha del anuncio, filtros, glosario ───────── */
  .cdpanel{display:none}.cdpanel.active{display:block}
  .filters2{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .fdd{position:relative}
  .fdd-btn{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 13px;cursor:pointer}
  .fdd-btn svg{width:14px;height:14px;color:var(--muted);transition:.15s}
  .fdd.open .fdd-btn svg{transform:rotate(180deg)}
  .fdd-btn .cnt{font-size:11px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:0 7px;line-height:17px;min-width:17px;text-align:center}
  .fdd-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:7px;min-width:195px;display:none}
  .fdd.open .fdd-panel{display:block}
  .fdd-panel label{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);color:var(--ink);padding:7px 9px;border-radius:7px;cursor:pointer}
  .fdd-panel label:hover{background:var(--surface-2)}
  .fdd-panel input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
  .ftipo{font-size:12px;color:var(--muted);font-weight:700;align-self:center;margin-right:2px}
  .cat-ov{position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);border-radius:6px;padding:3px 8px}
  /* Ficha de detalle */
  .back{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body);font-weight:700;color:var(--accent-ink);cursor:pointer;margin-bottom:12px;background:none;border:0}
  .crumbs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
  .crumbs a{color:var(--accent-ink);font-weight:600;cursor:pointer;text-decoration:none}
  .crumbs a:hover{text-decoration:underline}.crumbs .sep{color:var(--faint)}
  .cjrow{cursor:pointer}
  .eyebtn{display:inline-grid;place-items:center;width:30px;height:27px;border:1px solid var(--line);border-radius:7px;background:var(--surface);cursor:pointer;color:var(--muted)}
  .eyebtn:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-2)}
  .eyebtn svg{width:15px;height:15px}
  .detail{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start}
  .dmedia{position:relative;aspect-ratio:4/5;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
  .dmedia .playc{position:absolute;inset:0;display:grid;place-items:center}.dmedia .playc svg{width:40px;height:40px;color:#fff;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
  .dmedia .ov{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
  .dmedia .big{font-weight:800;font-size:17px;text-shadow:0 1px 7px rgba(0,0,0,.5)}
  .dtype{display:inline-flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);margin-top:10px}
  .dtag{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-2);border-radius:6px;padding:2px 8px}
  .dhead h2{font-size:var(--fs-title)}
  .dmeta{font-size:var(--fs-body);color:var(--muted);margin:5px 0 0}.dmeta b{color:var(--ink);font-weight:700}
  .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
  .mcell{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer}
  .mcell:hover{border-color:var(--accent)}
  .gback{position:fixed;inset:0;background:rgba(10,15,22,.35);opacity:0;visibility:hidden;transition:.2s;z-index:55}
  .gback.on{opacity:1;visibility:visible}
  .gdrawer{position:fixed;top:0;right:0;height:100vh;width:330px;max-width:88vw;background:var(--surface);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .22s;z-index:60;padding:18px 18px 40px;overflow:auto}
  .gdrawer.open{transform:translateX(0)}
  .grow{font-size:var(--fs-body);color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .grow:last-child{border-bottom:0}.grow b{color:var(--ink);font-weight:700}
  .mcell .k{font-size:10.5px;color:var(--muted)}.mcell .v{font-weight:800;font-size:var(--fs-sub);color:var(--head);margin-top:2px}
  .idnote{font-size:12px;color:var(--muted);margin:2px 0 12px;display:flex;gap:7px}.idnote svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:1px}.idnote b{color:var(--ink);font-weight:700}
  .dsec{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin:2px 2px 0}
  .evo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .evo h3{font-size:12.5px;color:var(--muted);margin:0 0 9px;font-weight:700}
  .evo .bars{display:flex;align-items:flex-end;gap:3px;height:66px}
  .evo .bars .b{flex:1;background:var(--accent);border-radius:3px 3px 0 0;opacity:.8}
  .evo .ex{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:6px}
  .ev2-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .ev2-chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
  .ev2-chk .dot{width:10px;height:10px;border-radius:3px}
  .ev2-chk.off{opacity:.4}
  .ev2 svg{width:100%;height:210px;display:block}
  .ev-range{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
  .ev-x{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:8px}
  .igrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .igrow .k{font-size:12px;color:var(--muted)}.igrow .v{font-weight:800;font-size:var(--fs-sub);color:var(--head);margin-top:4px}
  .bd3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .bd3 h3{font-size:12.5px;color:var(--muted);margin:0 0 9px;font-weight:700}
  .bd3 .barrow .lbl{width:56px}
  .ivars{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
  .ivar{border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .ivar .cr{position:relative;aspect-ratio:4/5}
  .ivar-badge{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);border-radius:6px;padding:2px 7px}
  .ivar-info{padding:10px 11px}
  .ivar-info .gn{font-weight:700;font-size:var(--fs-body);color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ivar-info .gm{display:flex;gap:12px;margin-top:7px}
  .ivar-info .gm .k{font-size:10px;color:var(--muted)}.ivar-info .gm .v{font-weight:800;font-size:12.5px;color:var(--head)}
  @media (max-width:760px){.igrow{grid-template-columns:1fr 1fr}.bd3{grid-template-columns:1fr}}
  .ginfo{padding:11px 13px;flex:1;display:flex;flex-direction:column}
  .ginfo .gn{font-weight:700;font-size:12.5px;color:var(--head);line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ginfo .gp{font-size:11px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ginfo .gm{display:flex;flex-direction:column;gap:4px;margin-top:9px}
  .ginfo .gm > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .gm .k{font-size:10px;color:var(--muted)}.gm .v{font-weight:800;font-size:12px;color:var(--head)}
  .glink{display:inline-flex;align-items:center;gap:4px;margin-top:11px;font-size:12px;font-weight:700;color:var(--accent-ink);text-decoration:none}
  .gcta{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent-ink);padding:10px;border-top:1px solid var(--line-soft);background:var(--surface)}
  .gcard:hover .gcta{background:var(--accent-2)}

  body.crlist-on .gall{display:none!important}
  body:not(.crlist-on) .crlist{display:none}
  .crlist tbody tr{cursor:pointer}
  .crlist .ct{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
  @media (max-width:760px){.detail{grid-template-columns:1fr}.evo{grid-template-columns:1fr}.mgrid{grid-template-columns:repeat(2,1fr)}}
  /* ───────── Kepubli: piezas que el mockup no tenía ───────── */
  .content{max-width:1320px}
  .muted{color:var(--muted)} .faint{color:var(--faint)}
  [hidden]{display:none!important}

  /* Login */
  .login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
  .login form{width:100%;max-width:360px;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
  .login .brand{padding:0 0 4px}
  .login h1{font-size:var(--fs-title)}
  .login label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink)}
  .login input{font:inherit;font-size:var(--fs-sub);padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
  .login .err{color:var(--neg);font-size:12px;min-height:16px}
  .login .err.ok{color:var(--pos)}
  .linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;color:var(--accent-ink);cursor:pointer;align-self:flex-start}
  .linkbtn:hover{text-decoration:underline}
  /* Clientes: acceso y estado de datos */
  .cl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-body)}
  .cl-row:last-child{border-bottom:0}
  .cl-row .cl-main{min-width:0;flex:1 1 220px}
  .cl-row .cl-sub{color:var(--faint);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
  .cl-row .cl-acts{display:flex;gap:6px;flex-wrap:wrap}
  .badpill{font-size:11px;font-weight:700;color:var(--neg);background:color-mix(in srgb,var(--neg) 10%,transparent);border-radius:6px;padding:2px 8px}
  .neupill{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
  .am-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .am-add input,.am-add select{flex:1 1 180px;max-width:none}
  .credbox{margin-top:12px;border:1px solid var(--line);border-left:3px solid var(--pos);border-radius:9px;padding:12px 14px;background:var(--surface)}
  .credbox .ch{font-weight:700;color:var(--head);margin-bottom:6px}.credbox .ch small{font-weight:400;color:var(--warn);margin-left:6px}
  .credbox pre{font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 10px;color:var(--ink)}

  /* Controles de la barra superior */
  select.ctrl{appearance:auto;padding:7px 9px;font-weight:700;max-width:none;width:auto}
  .ctrl input[type=date]{font:inherit;font-size:var(--fs-body);border:0;background:transparent;color:var(--ink);padding:0}
  .daterange{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .btn:disabled{opacity:.55;cursor:default}
  .btn.danger{color:var(--neg)}
  .icbtn .sun{display:none}
  :root[data-theme="dark"] .icbtn .sun{display:block} :root[data-theme="dark"] .icbtn .moon{display:none}
  .side select.client-sel{width:100%;max-width:none;font-weight:700;color:var(--head)}

  /* Avisos (variantes del .note del mockup) */
  .notes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .notes .note{margin-bottom:0}
  .note.warn{border-left-color:var(--warn)} .note.warn svg{color:var(--warn)}
  .note.bad{border-left-color:var(--neg)} .note.bad svg{color:var(--neg)}
  .loading .content{opacity:.55;pointer-events:none;transition:opacity .2s}

  /* Deltas */
  .stat .d .flat{color:var(--muted);font-weight:700}

  /* Gráfico grande + tooltip */
  .chartwrap{position:relative}
  .big-chart .yl{font-size:10.5px;fill:var(--faint)}
  .big-chart .prev{fill:none;stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 4}
  .big-chart .hoverline{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
  .big-chart .matur{fill:var(--warn-wash)}
  .legendrow{display:flex;gap:14px;margin-left:auto;font-size:12px;color:var(--muted)}
  .legendrow span{display:inline-flex;align-items:center;gap:6px}
  .legendrow .sw-cur::before{content:"";width:12px;height:2.5px;border-radius:2px;background:var(--accent)}
  .legendrow .sw-prev::before{content:"";width:12px;height:0;border-top:1.5px dashed var(--faint)}
  .legendrow .sw-mat::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
  .tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:7px 10px;font-size:12px;color:var(--ink);white-space:nowrap;z-index:5;transform:translate(-50%,-110%)}
  .tip b{color:var(--head)} .tip .faint{display:block}
  .spark{overflow:visible}

  /* Barras horizontales: tooltip nativo + share */
  .barrow .val{width:auto;min-width:52px}
  .barrow .share{width:42px;font-size:11px;color:var(--faint);text-align:right;flex:none}
  .barrow.supp .track > i{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px)}
  .barrow.supp .lbl{font-style:italic}
  .barrow .lbl{width:140px}

  /* Imágenes reales */
  .thumb,.mini-thumb,.cr{background-size:cover;background-position:center}
  .thumb.hasimg,.mini-thumb.hasimg{background-color:var(--surface-2)}
  .thumb{cursor:pointer}
  .cr{cursor:pointer;background-color:#1b1f2a;overflow:hidden}
  .cr .crimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 35%,transparent 65%,rgba(0,0,0,.35));pointer-events:none}
  .cr .ov,.cr .win-ov,.cr .playc{z-index:1}
  .cr .tag{color:#fff;background:rgba(0,0,0,.55)}
  .gcard.gone{opacity:.72}
  .gall .empty{grid-column:1 / -1}

  /* Tabla avanzada */
  tr[data-id]{cursor:default}
  tr.has-ch .name-cell{cursor:pointer}
  tr.collapsed-row .caret{transform:rotate(-90deg)}
  .row-a .mini-thumb{cursor:pointer}
  .badge-mad{white-space:nowrap}
  .tbl-tools{flex-wrap:wrap;align-items:center}
  .tbl-tools label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
  td .nm{display:inline-block}
  .state.paused{color:var(--muted)}

  /* Análisis */
  .anal-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .card-h .sub{font-size:11px;color:var(--faint);margin-left:6px}
  .card-h .seg{margin-left:auto}
  .hours{position:relative}
  .hours .hb{cursor:default;min-height:2px}
  .hours .hb.best{opacity:1}
  .hours .hb:not(.best){opacity:.45}
  .chip.ex{color:var(--neg);background:color-mix(in srgb,var(--neg) 10%,transparent);text-decoration:line-through}
  .chip.aud{color:var(--ink);background:var(--surface-2);border:1px solid var(--line)}
  .err-card{color:var(--neg);font-size:12px}
  .skel{height:120px;border-radius:8px;background:linear-gradient(90deg,var(--surface-2),var(--line-soft),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite}
  @keyframes sk{to{background-position:-200% 0}}

  /* Configuración / formularios */
  input[type=text],input[type=email],input[type=number],input[type=password],select{width:100%;max-width:340px;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
  input[type=color]{width:34px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:2px;cursor:pointer}
  .formmsg{font-size:12px;margin-top:8px;min-height:16px}
  .formmsg.ok{color:var(--pos)} .formmsg.bad{color:var(--neg)}
  .logo-prev{width:48px;height:48px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2) center/contain no-repeat;display:grid;place-items:center;font-weight:800;color:var(--muted)}
  .cfg-actions{padding:12px 18px;display:flex;gap:8px;align-items:center;border-top:1px solid var(--line-soft)}
  .seg.inline{display:inline-flex}

  /* Modal (reel / imagen / contraseña) */
  .modal{position:fixed;inset:0;z-index:100;background:rgba(11,16,26,.62);display:grid;place-items:center;padding:16px}
  .modal .box{background:var(--surface);border-radius:var(--radius);max-width:min(440px,100%);width:100%;max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.35)}
  .modal .box.media{max-width:min(420px,100%);background:#000}
  .modal .box.wide{max-width:min(560px,100%)}
  .modal .box .userline{flex-wrap:wrap}.chipbtn{white-space:nowrap}
  .modal video,.modal img{display:block;width:100%;max-height:78vh;object-fit:contain;background:#000}
  .modal .mbar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface)}
  .modal .mbar .t{font-weight:700;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
  .modal .pad{padding:18px}

  .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--head);color:var(--surface);padding:9px 14px;border-radius:9px;font-size:12px;z-index:120;box-shadow:var(--shadow)}

  .user-chip{cursor:pointer;border-radius:8px}
  .user-chip:hover{background:var(--surface-2)}
  .empty{padding:24px;text-align:center;color:var(--muted)}

  /* Selector de cliente (sidebar) */
  .client-switch{cursor:pointer}
  .client-switch .client-sel{appearance:auto;border:0;background:transparent;padding:0;font-weight:700;color:var(--head);width:100%;max-width:none;cursor:pointer}

  /* Carga inicial y estados de pantalla completa */
  .boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:200}
  .boot-in{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-sub)}
  .spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .has-state .screen{display:none!important}
  .statebox{padding:28px 24px;text-align:center;max-width:560px;margin:24px auto}
  .statebox .sb-ico svg{width:28px;height:28px;color:var(--accent)}
  .statebox.error .sb-ico svg{color:var(--neg)}
  .statebox h2{font-size:var(--fs-sub);margin:8px 0 6px}
  .statebox p{color:var(--muted);margin:0;line-height:1.6}
  .statebox .sb-ico .spin{width:26px;height:26px;margin:0 auto;border-width:3px}
  .statebox .sb-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
  .statebox code,.note code{font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 4px}

  /* Detalle */
  .igrow .up{color:var(--pos)} .igrow .down{color:var(--neg)}
  .ev2-chk{font:inherit;font-size:12.5px}
  .dmedia{cursor:pointer;background-size:cover;background-position:center}
  /* Sesión 4 · W: proporción real en la ficha (reel 9:16 sin recortar), sin saltos: el hueco ya tiene su tamaño */
  .dmedia[data-ar]{max-height:72vh;margin-inline:auto;width:100%;max-width:calc(72vh * var(--ar-max, 1))}
  .dmedia.ar-v{aspect-ratio:9/16;max-width:min(100%,calc(72vh * 9 / 16))}
  .cr,.dmedia{background-color:#1b1f2a}
  .img-ko .crimg{display:none}
  .thumb{overflow:hidden}.thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
  .thumb .play,.thumb .vp-badge{z-index:2}
  .cr .nmph{display:none}.cr.img-ko .nmph,.cr:not(:has(.crimg)) .nmph{display:block}
  .dmedia .crimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .page-h .state,.page-h .badge-mad{margin-left:2px}
  .crumbs a[data-detail]{cursor:pointer}
  .crlist tbody tr[data-detail]:hover td{background:var(--surface-2)}
  .cjrow:hover td{background:var(--surface-2)}
  td .tag{margin-left:6px}

  /* Catálogo Meta (portado del mockup FINAL) */
  .acclist .acc{border-bottom:1px solid var(--line-soft)}.acclist .acc:last-child{border-bottom:0}
  .acc-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
  .acc-head:hover{background:var(--surface-2)}
  .acc:not(.open) .acc-head .caret{transform:rotate(-90deg)}
  .acc-main{flex:1;min-width:0}.acc-main .nm{font-weight:800;color:var(--head);font-size:var(--fs-sub)}
  .acc-sub{font-size:12px;color:var(--muted);margin-top:2px}
  .acc-metrics{display:flex;gap:16px;font-size:var(--fs-body);color:var(--muted);white-space:nowrap}.acc-metrics b{color:var(--head);font-weight:800}
  .acc-body{display:none;padding:0 16px 14px}.acc.open .acc-body{display:block}
  @media(max-width:620px){.acc-metrics{display:none}}
  .prow{cursor:pointer}.prow:hover td{background:var(--surface-2)}
  .mini-thumb{overflow:hidden}.mini-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .camprow:hover td{background:var(--surface-2)}

  /* Confirmar etiquetas (Bloque J) */
  .tagtools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px}
  .taglist{max-height:58vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
  .tagad{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line-soft)}.tagad:last-child{border-bottom:0}
  .tagthumb{width:64px;height:80px;border-radius:8px;background:var(--surface-2);flex:none;overflow:hidden;position:relative}
  .tagthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .tagthumb span{position:absolute;left:4px;bottom:4px;font-size:10px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;border-radius:4px;padding:1px 5px}
  .tagbody{min-width:0;flex:1}.tagbody .nm{font-weight:800;color:var(--head);font-size:var(--fs-body)}
  .tagcopy{font-size:12px;color:var(--muted);margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
  .tdim{font-size:11px;color:var(--faint);width:150px;flex:none}
  .tagchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 9px;font-size:12px;background:var(--surface)}
  .tagchip small{font-size:10px;color:var(--faint)}
  .tagchip.on{border-color:var(--pos);background:color-mix(in srgb,var(--pos) 10%,var(--surface))}
  .tagchip.off{opacity:.45;text-decoration:line-through}
  .tagchip button{border:0;background:var(--surface-2);border-radius:999px;width:20px;height:20px;cursor:pointer;font-size:11px;color:var(--ink)}
  .tagchip .tok:hover{background:var(--pos);color:#fff}.tagchip .tno:hover{background:var(--neg);color:#fff}
  .tagchip select{font-size:11px;padding:1px 2px;border:0;background:transparent;color:var(--muted);max-width:92px}
  @media (max-width:620px){.tdim{width:100%}}

  @media (max-width:760px){
    .topbar{gap:8px}
    .page-h .ev-range{margin-left:0!important;width:100%}
    .legendrow{margin-left:0;flex-wrap:wrap}
    .barrow .lbl{width:96px}
    .side-foot{display:flex!important;flex-direction:row;border-top:0;padding-top:0;margin-top:0;margin-left:6px}
    .side-foot .user-chip{display:none}
    .side select.client-sel{width:auto}
  }

  /* Impacto en Instagram (Sesión 5 · Z3b, del mockup) */
  .igt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .igt{border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:var(--surface);min-width:0}
  .igt-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
  .igt-i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent-2);color:var(--accent-ink);flex:none}
  .igt-i svg{width:15px;height:15px}
  .igt .v{font-size:22px;font-weight:800;color:var(--head);margin-top:6px;letter-spacing:-.01em}
  .igt .d{font-size:12px;color:var(--faint)}
  .igt .d .up{color:var(--pos);font-weight:700}.igt .d .down{color:var(--neg);font-weight:700}
  .igt svg.sp{width:100%;height:26px;margin-top:6px}
  @media (max-width:900px){.igt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

  /* menú: Cerebro IA con submenú (Sesión 5 · Z0, del mockup) */
  .nav-grp{display:flex;flex-direction:column}
  .nav-parent{appearance:none;border:0;background:none;font:inherit;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:var(--fs-sub);font-weight:600;color:var(--muted);cursor:pointer;text-align:left;width:100%}
  .nav-parent:hover{background:var(--surface-2);color:var(--ink)}
  .nav-parent > svg:first-child{width:17px;height:17px;flex:none;opacity:.85}
  .nav-parent .nav-ia{margin-left:auto}
  .nav-car{width:14px;height:14px;flex:none;transition:transform .2s;opacity:.7}
  .nav-grp:not(.open) .nav-car{transform:rotate(-90deg)}
  .nav-grp.in .nav-parent{color:var(--accent-ink)}
  .nav-sub{display:none;flex-direction:column;gap:1px;margin:2px 0 4px 20px;padding-left:10px;border-left:1.5px solid var(--line)}
  .nav-grp.open .nav-sub{display:flex}
  .nav-sub a{padding:7px 10px!important;font-size:13px!important}
  .nav-sub a i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
  .nav-sub a.active i{background:var(--accent)}
  @media (max-width:760px){.nav-grp{flex-direction:row;align-items:center}.nav-parent{display:none}.nav-sub{display:flex!important;flex-direction:row;margin:0;padding:0;border:0}.nav-sub a i{display:none}}