/* Estilo de las páginas de acceso y usuarios (mismos colores que el sistema). */
:root{--bg:#f3f6f9;--surface:#fff;--line:#d5dee8;--ink:#10233a;--ink-2:#4a5d73;--turq:#0aa5a5;--turq-ink:#077d7f;--navy:#0f2a47;--bad:#b0302b;--bad-bg:#fbe5e3;--ok:#1f7a4d;--ok-bg:#e1f3e9;--f-disp:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;--f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0b1724;--surface:#112234;--line:#25405b;--ink:#e4edf6;--ink-2:#a9bccf;--turq:#2cc4c2;--turq-ink:#5fd6d4;--navy:#2cc4c2;--bad:#ff8e86;--bad-bg:#43191a;--ok:#6fd19c;--ok-bg:#12382a;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);padding:40px max(16px,env(safe-area-inset-right,0px)) 60px max(16px,env(safe-area-inset-left,0px))}
.caja{max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.caja.ancha{max-width:980px}
.marca{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.marca .ico{width:36px;height:36px;border-radius:7px;background:var(--turq)}
.marca b{display:block;font-family:var(--f-disp);font-size:1.15rem;line-height:1.1}
.marca span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
h1,h2{font-family:var(--f-disp);font-weight:600;margin:0 0 12px;line-height:1.15}
h1{font-size:1.7rem} h2{font-size:1.25rem;margin-top:8px}
section{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
a{color:var(--turq-ink)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}
.form{display:flex;flex-direction:column;gap:6px}
.form.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form.grid .full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:var(--ink-2);margin-top:6px}
input,select{font:inherit;color:inherit;width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);margin-top:3px}
input[type=checkbox]{width:auto;margin:0 6px 0 0}
input[type=file]{padding:8px}
label.chk{display:flex;align-items:center;font-weight:500}
button{font:inherit;font-weight:600;padding:11px 16px;border-radius:8px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;margin-top:10px}
@media (prefers-color-scheme:dark){button{color:#04282a}}
button.sec{background:transparent;color:var(--ink);border-color:var(--line);margin-top:0}
button.peligro{background:var(--bad);border-color:var(--bad);color:#fff}
.error{background:var(--bad-bg);color:var(--bad);padding:10px 12px;border-radius:7px}
.ok{background:var(--ok-bg);color:var(--ok);padding:10px 12px;border-radius:7px}
.nota{color:var(--ink-2);font-size:.9rem}
.tag{font-size:.7rem;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:4px}
.filas{display:flex;flex-direction:column}
.fila{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.3fr) auto auto;gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.fila label{margin:0}
.fila .quien b{display:block}
.fila .quien span{color:var(--ink-2)}
.fila.inactiva .quien{opacity:.55}
@media (max-width:760px){.fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fila .quien{grid-column:1/-1}.form.grid{grid-template-columns:minmax(0,1fr)}}
:focus-visible{outline:2px solid var(--turq);outline-offset:2px}