/* Chrome visual del informe Julissa Herrera — SSOT de estilo del portal.
   Tokens, topbar, menú en UNA tira (Ley #173), botones, hero. */
*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:light dark;
  --ground:#FFFFFF; --surface:#FFFFFF; --surface2:#F8FAFC; --surface3:#F1F5F9;
  --ink:#0F172A; --ink2:#334155; --ink3:#617187;
  --line:#E2E8F0; --line2:#CBD5E1;
  --accent:#6162A2; --accent2:#EB008B; --accent-soft:#EFEFF8;
  --volt:#0A5C56; --volt-soft:#E6F4F2;
  --good:#166534; --good-soft:#DCFCE7;
  --watch:#854D0E; --watch-soft:#FEF9C3;
  --crit:#991B1B; --crit-soft:#FEE2E2;
  --info:#6162A2; --info-soft:#DBEAFE;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 10px 25px -5px rgba(15,23,42,.08);
  --font-display:'Bahnschrift SemiCondensed','Bahnschrift','Oswald','Arial Narrow',sans-serif;
  --font-body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-data:'Consolas','JetBrains Mono','SFMono-Regular',monospace;
  --r:4px; --rl:8px; --maxw:1280px;
  --fondo:var(--surface); --papel:var(--surface);
  --tinta:var(--ink); --tinta2:var(--ink2); --tinta3:var(--ink3);
  --linea:var(--line); --acento:var(--accent);
  --ok:var(--good); --mal:var(--crit); --avisa:var(--watch);
}
:root[data-theme="dark"]{
  --ground:#0A1216; --surface:#111C21; --surface2:#1B2A30; --surface3:#16232A;
  --ink:#E7EDE9; --ink2:#A9B8BC; --ink3:#7B8C91;
  --line:#22343B; --line2:#33484F;
  --accent:#8283C7; --accent2:#EB008B; --accent-soft:#262750;
  --volt:#2DD4BF; --volt-soft:#042F2E;
  --good:#5FBF90; --good-soft:#0D2A1E;
  --watch:#DDA53F; --watch-soft:#2E2410;
  --crit:#E2716B; --crit-soft:#331615;
  --info:#93C5FD; --info-soft:#1E293B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0A1216; --surface:#111C21; --surface2:#1B2A30; --surface3:#16232A;
    --ink:#E7EDE9; --ink2:#A9B8BC; --ink3:#7B8C91;
    --line:#22343B; --line2:#33484F;
    --accent:#8283C7; --accent2:#EB008B; --accent-soft:#262750;
    --volt:#2DD4BF; --good:#5FBF90; --watch:#DDA53F; --crit:#E2716B;
  }
}
/* Lienzo de marca: púrpura Julissa. Tinta sobre marca aparte. */
:root{ --ground:#6667AB; --on-brand:#FFFFFF; --on-brand2:#F2F2FA; --on-brand3:#F0F0F8; }
:root[data-theme="dark"]{ --ground:#14152A; --on-brand:#E7EDE9; --on-brand2:#C3C4DF; --on-brand3:#9A9BC0; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --ground:#14152A; --on-brand:#E7EDE9; --on-brand2:#C3C4DF; --on-brand3:#9A9BC0; }
}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--ground); border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:8px 24px; display:flex; flex-direction:column; gap:8px;}
.topbar-row1{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.brandmark{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-brand); font-weight:700;
}
.topbar-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.topbar-row2{
  display:flex; flex-wrap:nowrap; align-items:center; min-width:0; gap:4px 6px;
  padding-top:2px; border-top:1px solid rgba(255,255,255,.22);
}
.navwrap{position:relative; min-width:0; flex:1;}
.navedge{
  position:absolute; top:0; bottom:0; width:24px; opacity:0;
  transition:opacity .18s; pointer-events:none; z-index:2;
}
.navedge.izq{left:0; background:linear-gradient(90deg, var(--ground), transparent);}
.navedge.der{right:0; background:linear-gradient(270deg, var(--ground), transparent);}
.navwrap.hay-izq .navedge.izq,
.navwrap.hay-der .navedge.der{opacity:1; pointer-events:auto; cursor:pointer;}
.topbar-nav{
  display:flex; flex-wrap:nowrap; gap:3px; overflow-x:auto; overflow-y:hidden;
  min-width:0; scroll-behavior:smooth; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.topbar-nav::-webkit-scrollbar{height:3px;}
.topbar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35); border-radius:3px;}
.topbar-nav a{
  white-space:nowrap; flex:0 0 auto;
  font-family:var(--font-display); font-size:11.5px; letter-spacing:.02em;
  color:var(--on-brand3); text-decoration:none; padding:4px 8px; border-radius:var(--r);
}
.topbar-nav a:hover{background:rgba(255,255,255,.14); color:var(--on-brand);}
.topbar-nav a.on{background:rgba(255,255,255,.18); color:var(--on-brand); font-weight:600;}
.topbar-nav.arrastrando{scroll-behavior:auto; cursor:grabbing;}

.btn{
  font-family:var(--font-display); font-size:12px; letter-spacing:.02em; cursor:pointer;
  background:var(--surface); color:var(--ink2); border:1px solid var(--line2);
  border-radius:var(--r); padding:5px 11px; transition:all .12s; white-space:nowrap;
}
.btn:hover{color:var(--ink); border-color:var(--ink3); background:var(--surface3);}
.btn.pri{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600;}
.topbar .btn{background:rgba(255,255,255,.12); color:var(--on-brand); border-color:rgba(255,255,255,.28);}
.topbar .btn:hover{background:rgba(255,255,255,.22); color:var(--on-brand);}
.topbar .btn.pri{background:#E40087; color:#fff; border-color:#E40087;}

.txtseg{
  display:inline-flex; align-items:center; gap:7px; padding:3px 9px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:8px;
}
.txtseg label{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-brand3); white-space:nowrap;
}
.txtseg input[type=range]{width:104px; margin:0; accent-color:var(--accent2);}
.txtseg output{
  font-family:var(--font-data); font-size:11.5px; color:var(--on-brand);
  min-width:38px; text-align:right; font-variant-numeric:tabular-nums;
}

.hero{padding:32px 0 24px; border-bottom:1px solid rgba(255,255,255,.22);}
.hero .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--font-display); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-brand2); margin-bottom:10px; font-weight:700;
}
.hero h1{
  font-family:var(--font-display); font-size:clamp(26px,4vw,44px); line-height:1.08;
  margin:0; font-weight:700; color:var(--on-brand);
}
.hero-sub{font-size:15.5px; color:var(--on-brand2); max-width:68ch; margin:12px 0 0;}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px;
  font-size:12.5px; color:var(--on-brand2); font-family:var(--font-data);
}
.hero-meta b{color:var(--on-brand);}

.lienzo{max-width:var(--maxw); margin:0 auto; padding:22px 24px 60px;}