/* Estilos compartidos de la página de acceso y del panel (misma identidad que el programa) */
:root{
  color-scheme:dark;
  --rock:#16181B; --panel:#1E2125; --raised:#262A2F; --line:#343940; --line-soft:#2B2F35;
  --text:#EEEAE3; --muted:#A7A39B; --faint:#7D7A74;
  --vest:#FF7A1A; --vest-deep:#D9600A; --vest-ink:#1F1206;
  --amber:#E9B44C; --red:#EF5B52; --green:#62B57E;
  --ok-t:#8FD3A6; --adv-t:#F2C875; --err-t:#FF8B84; --tag-t:#FFB070;
  --input:#15171a;
  --cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow','Segoe UI',Arial,sans-serif;
  --r-s:4px; --r-m:8px;
}
:root[data-modo="claro"]{
  color-scheme:light;
  --rock:#F4F3F0; --panel:#FFFFFF; --raised:#ECEAE6; --line:#D3D0CA; --line-soft:#E4E1DC;
  --text:#1B1B1B; --muted:#55524C; --faint:#75716A; --amber:#9A6700;
  --ok-t:#1E7A43; --adv-t:#8A5A00; --err-t:#B8332A; --tag-t:#D9600A; --input:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--rock);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--vest);outline-offset:2px}
h1,h2,h3{font-family:var(--cond);font-weight:600;letter-spacing:.01em;margin:0}
h1{font-size:30px;line-height:1.1} h2{font-size:24px} h3{font-size:19px}
p{margin:0 0 .75em}
a{color:var(--vest)}
.top{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand b{font-family:var(--cond);font-size:21px;font-weight:600;white-space:nowrap}
.brand span{color:var(--muted);font-size:13px;white-space:nowrap}
.top .grow{flex:1}
.quien{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.btn{border:1px solid var(--line);background:var(--raised);border-radius:var(--r-s);padding:8px 14px;cursor:pointer;font-size:15px;white-space:nowrap}
.btn:hover{border-color:var(--vest)}
.btn.prim{background:var(--vest);border-color:var(--vest);color:var(--vest-ink);font-weight:600}
.btn.prim:hover{background:#ff8a33}
.btn.alt{background:transparent}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.danger{border-color:rgba(239,91,82,.5);color:var(--err-t);background:transparent}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.google{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:var(--r-s);padding:10px 18px;font-weight:600;cursor:pointer;font-size:15px}
.google:hover{box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:22px}
.muted{color:var(--muted)} .faint{color:var(--faint);font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.f{display:grid;gap:4px;margin-bottom:12px}
.f label{font-size:14px;color:var(--muted)}
.f input,.f select,.f textarea,input.in,select.in{width:100%;background:var(--input);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;font-size:15px}
.f textarea{min-height:76px;resize:vertical}
.msg{border-left:3px solid var(--amber);background:rgba(233,180,76,.08);padding:10px 14px;border-radius:0 var(--r-s) var(--r-s) 0;margin:12px 0;font-size:14px}
.msg.err{border-color:var(--red);background:rgba(239,91,82,.08)}
.msg.ok{border-color:var(--green);background:rgba(98,181,126,.08)}
.chip{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);white-space:nowrap}
.chip.activa{border-color:rgba(98,181,126,.5);color:var(--ok-t)}
.chip.por_vencer,.chip.pendiente,.chip.programada{border-color:rgba(233,180,76,.55);color:var(--adv-t)}
.chip.vencida,.chip.revocada,.chip.rechazado,.chip.suspendida{border-color:rgba(239,91,82,.5);color:var(--err-t)}
.chip.admin{border-color:var(--vest-deep);color:var(--tag-t)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--raised);border:1px solid var(--line);padding:10px 16px;border-radius:var(--r-s);font-size:14px;z-index:80;display:none;max-width:min(560px,calc(100vw - 32px))}
.toast.on{display:block}
.toast.err{border-color:var(--red)}
.modo-btn{position:fixed;right:16px;bottom:16px;z-index:19;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:21px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);padding:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){ .brand span{display:none} .top{padding:8px 16px;gap:8px} h1{font-size:26px}
  .brand{flex:1;min-width:0} .brand>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand b{font-size:18px} .top .grow{display:none} .top .btn{padding:5px 8px;font-size:13px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}