:root{
  --bg:#F4F8FC; --surface:#FFFFFF; --surface-2:#E7F2FD; --surface-3:#F8FBFE;
  --line:#DCE7F1; --line-soft:#EBF2F8;
  --text:#263039; --text-2:#586A78; --text-3:#8798A6;
  --brand:#0075BE; --brand-2:#0089D6; --brand-deep:#005688; --brand-soft:#E1F1F9;
  --cyan:#0286BD; --cyan-bright:#009EE2; --cyan-soft:#DDF1FB;
  --amber:#9A6A10; --amber-soft:#FFF3D7;
  --ok:#177552; --ok-soft:#DDEFE6;
  --on-brand:#FFFFFF;
  --shadow:0 1px 2px rgba(0,50,90,.05), 0 10px 28px -14px rgba(0,50,90,.22);
  --radius:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08131C; --surface:#0F1E2B; --surface-2:#152A3B; --surface-3:#0C1926;
    --line:#20394D; --line-soft:#182C3D;
    --text:#E3EDF5; --text-2:#9BB1C3; --text-3:#6C8398;
    --brand:#4FB2EE; --brand-2:#6FC4F4; --brand-deep:#9AD3F2; --brand-soft:#0F2E45;
    --cyan:#5CC5F2; --cyan-bright:#009EE2; --cyan-soft:#0B2C3D;
    --amber:#DDA84F; --amber-soft:#32270F;
    --ok:#40B489; --ok-soft:#0E2D22;
    --on-brand:#04121C;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --bg:#08131C; --surface:#0F1E2B; --surface-2:#152A3B; --surface-3:#0C1926;
  --line:#20394D; --line-soft:#182C3D;
  --text:#E3EDF5; --text-2:#9BB1C3; --text-3:#6C8398;
  --brand:#4FB2EE; --brand-2:#6FC4F4; --brand-deep:#9AD3F2; --brand-soft:#0F2E45;
  --cyan:#5CC5F2; --cyan-bright:#009EE2; --cyan-soft:#0B2C3D;
  --amber:#DDA84F; --amber-soft:#32270F;
  --ok:#40B489; --ok-soft:#0E2D22;
  --on-brand:#04121C;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px -16px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Source Serif 4", Georgia, "Times New Roman", serif; margin:0; text-wrap:balance}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1240px; margin:0 auto; padding:0 22px}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-dark{display:block}
  :root:not([data-theme="light"]) .logo-light{display:none}
}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .logo-light{display:none}

/* ================= modo visor: app de pantalla completa ================= */
body.visor{height:100vh; overflow:hidden; display:flex; flex-direction:column}
body.visor header.site, body.visor footer.foot{display:none}
body.visor main{flex:1; min-height:0; display:flex; flex-direction:column}

/* ================= header del sitio (portada) ================= */
header.site{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.site-in{display:flex; align-items:center; gap:18px; padding:11px 0; flex-wrap:wrap}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.lockup img{display:block; height:44px; width:auto}
.wordmark{
  font-family:"Source Serif 4", Georgia, serif; font-weight:600;
  font-size:13px; line-height:1.18; letter-spacing:.055em; text-transform:uppercase;
  color:var(--brand-deep); display:grid;
}
.vsep{width:1px; align-self:stretch; background:var(--line)}
.section-label{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--text-2)}
.section-label b{color:var(--brand); font-weight:700}
.site-actions{margin-left:auto; display:flex; align-items:center; gap:9px}
.demo-flag{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  color:var(--amber); background:var(--amber-soft);
  border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  padding:5px 10px; border-radius:3px;
}
.iconbtn{background:transparent; border:1px solid var(--line); border-radius:3px; width:34px; height:34px; display:grid; place-items:center; color:var(--text-2); font-size:15px}
.iconbtn:hover{color:var(--brand); border-color:var(--brand)}

/* ================= portada ================= */
.band{background:linear-gradient(160deg, var(--surface-2), var(--surface-3) 70%); border-bottom:1px solid var(--line)}
.band-in{padding:40px 0 38px; display:grid; gap:10px; max-width:58ch}
.eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); font-weight:700}
.band h1{font-size:clamp(30px,4.4vw,44px); font-weight:600; line-height:1.1; letter-spacing:-.015em}
.band p{margin:0; color:var(--text-2); font-size:17px; max-width:56ch}

.progs{border-bottom:1px solid var(--line); background:var(--surface)}
.progs-in{padding:15px 0 16px}
.progs-t{font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--text-3); font-weight:700; text-align:center; margin-bottom:11px}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{background:transparent; border:1px solid var(--line); border-radius:3px; padding:7px 13px; display:inline-flex; align-items:baseline; gap:8px; text-align:left; color:var(--text-2); max-width:100%}
.chip .who{font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap}
.chip .tema{font-size:12.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none; align-self:center}
.chip[data-estado="revision"] .dot{background:var(--brand)}
.chip[data-estado="aprobada"] .dot{background:var(--ok)}
.chip:hover{border-color:var(--brand)}
.chip:hover .who{color:var(--brand)}
.chip.empty{color:var(--text-3); font-size:13px; border-style:dashed; cursor:default}

.listhead{display:flex; align-items:baseline; gap:14px; padding:26px 0 0; flex-wrap:wrap}
.listhead h2{font-size:19px; font-weight:600}
.counts{margin-left:auto; display:flex; gap:16px; font-size:12.5px; color:var(--text-3)}
.counts b{color:var(--text-2); font-weight:700}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; padding:16px 0 52px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-align:left; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); transition:transform .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-2px); border-color:var(--brand)}
.card-stripe{height:3px; background:var(--amber)}
.card[data-estado="revision"] .card-stripe{background:var(--brand)}
.card[data-estado="aprobada"] .card-stripe{background:var(--ok)}
.card-body{padding:17px 18px 16px; display:grid; gap:8px}
.card-prog{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); font-weight:700}
.card h3{font-size:19px; font-weight:600; line-height:1.24}
.card .rol{font-size:13.5px; color:var(--text-2); margin:0; line-height:1.45}
.card-foot{margin-top:auto; padding:11px 18px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; background:var(--surface-3)}
.pill{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:3px; border:1px solid transparent}
.pill.pendiente{color:var(--amber); background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.pill.revision{color:var(--brand); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.pill.aprobada{color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.card-meta{margin-left:auto; display:flex; gap:12px; font-size:12px; color:var(--text-3)}

/* ================= barra del visor ================= */
.vbar{
  flex:none; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:10px 18px; flex-wrap:wrap;
}
.backpill{
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 15px; font-size:13px; color:var(--text-2); white-space:nowrap;
}
.backpill:hover{color:var(--brand); border-color:var(--brand)}
.vbar-id{display:flex; align-items:center; gap:9px; min-width:0}
.vbar-id img{height:30px; width:auto; display:block; flex:none}
.vbar-id .txt{font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--brand-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vbar-id .txt span{color:var(--text-3)}
.vbar-cred{font-size:12.5px; color:var(--text-3); white-space:nowrap}
.vbar-cred b{color:var(--text-2); font-weight:700}
.vbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.userchip{display:flex; align-items:center; gap:9px}
.avatar{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; background:var(--brand); color:var(--on-brand);
}
.avatar.alt{background:var(--brand-deep)}
.userchip .nm{line-height:1.2}
.userchip .nm b{display:block; font-size:13.5px; font-weight:700}
.userchip .nm span{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:700}
.tinybtn{background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12.5px; color:var(--text-2)}
.tinybtn:hover{color:var(--brand); border-color:var(--brand)}
.notecount{display:inline-flex; align-items:center; gap:7px}
.notecount .num{background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:1px 8px; font-size:11.5px; font-weight:700}
.btn-solid{
  background:var(--brand); border:1px solid var(--brand); color:var(--on-brand);
  border-radius:999px; padding:8px 17px; font-size:13px; font-weight:700;
}
.btn-solid:hover{background:var(--brand-2); border-color:var(--brand-2)}
.menuwrap{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 7px); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); z-index:60;
  min-width:230px; padding:5px; display:grid; gap:2px;
}
.menu button{background:none; border:none; text-align:left; padding:9px 11px; border-radius:4px; font-size:13.5px; color:var(--text-2)}
.menu button:hover{background:var(--surface-2); color:var(--text)}

/* ================= cuerpo del visor ================= */
.vbody{flex:1; min-height:0; display:flex}
.vmain{flex:1; min-width:0; display:flex; flex-direction:column}
.vscroll{flex:1; overflow:auto; padding:0 0 26px}
.doc{max-width:760px; margin:0 auto; padding:34px 26px 0}

.doc .kicker{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); font-weight:700}
.doc h1{font-size:clamp(30px,3.6vw,44px); font-weight:600; line-height:1.14; letter-spacing:-.015em; color:var(--brand-deep); margin:14px 0 0}
.doc .bajada{font-size:17.5px; color:var(--text-2); margin:16px 0 0; max-width:58ch; line-height:1.6}
.rule{height:1px; background:var(--line); margin:28px 0}
.gente{display:flex; gap:34px; flex-wrap:wrap}
.persona{display:flex; align-items:center; gap:11px}
.persona .avatar{width:38px; height:38px; font-size:12.5px}
.persona .n{font-size:15px; font-weight:700; line-height:1.3}
.persona .c{font-size:12.5px; color:var(--text-3)}
.docmeta{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--text-3); margin-top:26px}
.docmeta i{font-style:normal; color:var(--cyan); font-weight:700; letter-spacing:-.06em}

.sechead{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-deep); font-weight:700; margin:34px 0 14px}
.resumen{display:grid; gap:16px}
.resumen p{margin:0; font-size:16.5px; line-height:1.7; color:var(--text-2); max-width:62ch}
.resumen b{color:var(--text); font-weight:700}
.resumen button.jump{background:none; border:none; padding:0; color:var(--brand); font:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-left:8px}

.trtools{display:flex; align-items:center; gap:11px; margin:0 0 8px; flex-wrap:wrap}
.search{flex:1; min-width:170px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:9px 12px; font:inherit; font-size:14.5px; color:var(--text)}
.search::placeholder{color:var(--text-3)}
.search:focus{border-color:var(--brand); outline:none}
.hint{font-size:12px; color:var(--text-3)}

.seg{display:grid; grid-template-columns:56px minmax(0,1fr); gap:15px; padding:12px 12px 12px 8px; border-radius:6px; position:relative; border:1px solid transparent; cursor:pointer}
.seg:hover{background:var(--surface-3); border-color:var(--line-soft)}
.seg.active{background:var(--surface); border-color:var(--brand); box-shadow:var(--shadow)}
.seg.hit{background:var(--cyan-soft)}
.seg .ts{font-size:12px; color:var(--text-3); padding-top:4px}
.seg.active .ts{color:var(--brand); font-weight:500}
.seg .sp{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--cyan); display:block; margin-bottom:4px}
.seg .sp.q{color:var(--text-3)}
.seg p{margin:0; font-size:16.5px; line-height:1.66}
.seg.q p{color:var(--text-2); font-style:italic; font-size:15.5px}
.seg .flags{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap}
.flag{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:3px; background:var(--amber-soft); color:var(--amber)}

/* ================= barra de reproducción ================= */
.playerbar{
  flex:none; border-top:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; gap:14px; padding:11px 22px; flex-wrap:wrap;
}
.playbtn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--brand); background:var(--brand);
  color:var(--on-brand); display:grid; place-items:center; font-size:15px; flex:none;
}
.playbtn:hover{background:var(--brand-2); border-color:var(--brand-2)}
.skip{background:none; border:none; color:var(--text-3); font-size:13px; font-weight:700; padding:6px 4px}
.skip:hover{color:var(--brand)}
.ptime{font-size:13px; color:var(--text-2)}
.ptrack{flex:1; min-width:160px; height:6px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:2px; position:relative; cursor:pointer}
.ptrack .fill{position:absolute; inset:0 auto 0 0; width:0%; background:var(--brand); border-radius:2px}
.ptrack .marks{position:absolute; inset:0; pointer-events:none}
.ptrack .mark{position:absolute; top:-4px; width:2px; height:14px; background:var(--amber); border-radius:1px}
.pbtn-out{background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; color:var(--text-2); flex:none}
.pbtn-out:hover{color:var(--brand); border-color:var(--brand)}
.pbtn-out[aria-pressed="true"]{background:var(--text); border-color:var(--text); color:var(--bg)}

/* ================= panel de notas ================= */
.vnotes{width:390px; flex:none; border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; min-height:0}
.vn-head{flex:none; padding:15px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px}
.vn-head h2{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; font-family:"Lato",sans-serif; color:var(--text-2)}
.vn-head .num{background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:1px 9px; font-size:11.5px; font-weight:700}
.vn-list{flex:1; overflow:auto; padding:10px}
.vn-empty{padding:44px 26px; text-align:center; color:var(--text-3); font-size:14px; line-height:1.7}
.vn-empty svg{display:block; margin:0 auto 14px; color:var(--text-3); opacity:.7}
.vn-empty b{color:var(--brand); font-weight:700}
.note{border:1px solid var(--line-soft); border-left:3px solid var(--amber); border-radius:4px; padding:10px 12px; margin-bottom:7px; background:var(--surface-3); display:grid; gap:6px; cursor:pointer}
.note:hover{border-color:var(--brand); border-left-color:var(--amber)}
.note-top{display:flex; align-items:center; gap:9px}
.note-top .t{font-size:11.5px; color:var(--brand); font-weight:500}
.note-top .k{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--amber)}
.note-top .del{margin-left:auto; background:none; border:none; color:var(--text-3); font-size:16px; line-height:1; padding:0 2px}
.note-top .del:hover{color:var(--amber)}
.note .quote{font-size:12px; color:var(--text-3); font-style:italic; border-left:2px solid var(--line); padding-left:9px; line-height:1.45}
.note .txt{font-size:14px; color:var(--text)}

.vn-comp{flex:none; border-top:1px solid var(--line-soft); padding:13px 15px; display:grid; gap:11px; background:var(--surface)}
.tipos{display:flex; gap:6px; flex-wrap:wrap}
.tipo{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--text-2);
}
.tipo em{width:6px; height:6px; border-radius:50%; background:currentColor; display:block}
.tipo:hover{border-color:var(--brand); color:var(--brand)}
.tipo[aria-pressed="true"]{background:var(--text); border-color:var(--text); color:var(--bg)}
.vn-comp textarea{width:100%; min-height:78px; resize:vertical; font:inherit; font-size:14.5px; background:var(--surface-3); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:11px 12px}
.vn-comp textarea:focus{border-color:var(--brand); outline:none; background:var(--surface)}
.vn-foot{display:flex; align-items:center; gap:10px}
.vn-foot .at{font-size:13px; color:var(--text-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px}
.micbtn{margin-left:auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text-2); display:grid; place-items:center; flex:none}
.micbtn:hover{color:var(--brand); border-color:var(--brand)}
.selquote{font-size:12px; color:var(--text-3); font-style:italic; border-left:2px solid var(--brand); padding-left:9px; line-height:1.45}

@media (max-width:1000px){
  body.visor{height:auto; overflow:auto; display:block}
  body.visor main{display:block}
  .vbody{display:block}
  .vnotes{width:auto; border-left:none; border-top:1px solid var(--line)}
  .vn-list{max-height:340px}
  .playerbar{position:sticky; bottom:0; z-index:20}
  .vscroll{overflow:visible}
}

/* ================= pie ================= */
footer.foot{border-top:1px solid var(--line); background:var(--surface)}
.foot-in{padding:26px 0 34px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--text-3)}
.foot-in img{height:34px; width:auto; display:block; opacity:.9}
.foot-in .bfm{font-family:"Source Serif 4",serif; letter-spacing:.2em; font-weight:700; color:var(--text-2); font-size:12px}
.foot-links{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.foot-links a{color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.foot-links a:hover{color:var(--brand); border-color:var(--brand)}

/* ================= modal export ================= */
.scrim{position:fixed; inset:0; background:rgba(6,20,32,.55); display:grid; place-items:center; z-index:90; padding:24px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); width:min(760px,100%); max-height:82vh; display:flex; flex-direction:column; overflow:hidden}
.modal header{padding:15px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px}
.modal header h3{font-size:16px; font-weight:600}
.modal header .x{margin-left:auto; background:none; border:none; color:var(--text-3); font-size:20px; line-height:1}
.modal header .x:hover{color:var(--text)}
.modal pre{flex:1; overflow:auto; margin:0; padding:16px 18px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.65; color:var(--text-2); white-space:pre; background:var(--surface-3)}
.modal footer{padding:13px 18px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px}
.modal footer .note{font-size:12.5px; color:var(--text-3)}

.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--brand-deep); color:#fff; padding:12px 20px; border-radius:4px; font-size:14px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:95; box-shadow:0 12px 34px -12px rgba(0,0,0,.55)}
:root[data-theme="dark"] .toast{background:var(--surface-2); color:var(--text); border:1px solid var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast{background:var(--surface-2); color:var(--text); border:1px solid var(--line)}}
.toast.show{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ================= pantalla de acceso ================= */
.login-scrim{position:fixed; inset:0; background:var(--bg); display:grid; place-items:center; z-index:200; padding:24px}
.login{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:34px 32px 30px; width:min(400px,100%);
  display:grid; gap:14px; justify-items:stretch; text-align:center;
}
.login img{height:74px; width:auto; margin:0 auto 4px}
.login h1{font-size:26px; font-weight:600; color:var(--brand-deep)}
.login p{margin:0 0 6px; font-size:13.5px; color:var(--text-3)}
.login label{display:grid; gap:6px; text-align:left; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--text-3)}
.login input{
  font:inherit; font-size:15px; padding:10px 12px; border-radius:5px;
  border:1px solid var(--line); background:var(--surface-3); color:var(--text);
}
.login input:focus{border-color:var(--brand); outline:none; background:var(--surface)}
.login .btn-solid{margin-top:6px; padding:11px 18px; font-size:14px}
.login-err{min-height:18px; font-size:13px; color:#B4231F; text-align:left}
:root[data-theme="dark"] .login-err{color:#F08A86}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .login-err{color:#F08A86}}
.oculto{display:none !important}