/* Panel de administración · Visión Sistemora. Tokens del Sistemora Design System; tema oscuro derivado de sus marinos. */
:root{
  --bg-page:#0e1c31; --bg-subtle:#132442; --surface-card:#16274a; --surface-hover:#1c3159;
  --border-default:#243a66; --border-divider:#1c3159;
  --text-heading:#f2f6fb; --text-body:#e3eaf4; --text-secondary:#a9bad0; --text-muted:#7f97b3;
  --accent:#108ffd; --accent-strong:#0a6eed; --accent-soft:rgba(16,143,253,.14); --text-on-brand:#ffffff;
  --success:#7fbf8c; --success-soft:rgba(127,191,140,.14); --danger:#e48a87; --danger-soft:rgba(228,138,135,.14);
  --warning:#e0b04a; --warning-soft:rgba(224,176,74,.14); --neutral:#a9bad0; --neutral-soft:rgba(169,186,208,.12);
  --radius:4px; --focus:0 0 0 3px rgba(16,143,253,.45);
  --font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-tema="claro"]{
  --bg-page:#ffffff; --bg-subtle:#f7f7f6; --surface-card:#ffffff; --surface-hover:#f7f7f6;
  --border-default:#e8e8e8; --border-divider:#f2f2f2;
  --text-heading:#0e1c31; --text-body:#1a1a19; --text-secondary:#5f5f5d; --text-muted:#878785;
  --accent:#0a6eed; --accent-strong:#074fbc; --accent-soft:#e6f1ff;
  --success:#4d7b57; --success-soft:#e4efe6; --danger:#b64644; --danger-soft:#f8e3e2;
  --warning:#8a6408; --warning-soft:#fbf1d6; --neutral:#5f5f5d; --neutral-soft:#f2f2f2; --focus:0 0 0 3px #bfdcff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-page);color:var(--text-body);font:14px/1.5 var(--font-sans)}
a{color:var(--accent)} button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus)}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.muted{color:var(--text-muted);font-size:12px}

/* barra superior */
.topbar{height:57px;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--border-default);
  background:var(--bg-page);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--text-heading);letter-spacing:-.01em}
.logo-mark{width:22px;height:22px;border-radius:3px;background:var(--accent-strong);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.topbar .eyebrow{margin-left:4px}
.topbar .derecha{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-secondary)}
.topbar .derecha a{color:var(--text-secondary);text-decoration:none} .topbar .derecha a:hover{color:var(--text-heading)}

/* contenido */
.pagina{max-width:1180px;margin:0 auto;padding:28px}
.pagina h1{margin:4px 0 4px;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text-heading)}
.saludo{color:var(--text-secondary);margin:0 0 20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);padding:16px}
.stat .num{display:block;font-size:34px;font-weight:700;line-height:1.1;color:var(--text-heading);font-variant-numeric:tabular-nums;margin-top:6px}
.tarjeta{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);margin-bottom:16px}
.tarjeta-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-divider)}
.tarjeta-cab h2{margin:0;font-size:16px;font-weight:600;color:var(--text-heading)}
.tarjeta-cuerpo{padding:16px}

/* tabla de cajas */
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:10px 16px;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--border-divider);vertical-align:middle;font-variant-numeric:tabular-nums}
tr:hover td{background:var(--surface-hover)}
.caja-nombre{font-weight:600;color:var(--text-heading)}
.estado{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--neutral)}
.dot.ok{background:var(--success)} .dot.mal{background:var(--danger)}
.badge{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:3px;white-space:nowrap}
.badge.activa{background:var(--success-soft);color:var(--success)}
.badge.pendiente{background:var(--warning-soft);color:var(--warning)}
.badge.revocada{background:var(--danger-soft);color:var(--danger)}
.badge.sin{background:var(--neutral-soft);color:var(--neutral)}
.acciones{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* botones y formularios */
.btn{height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--border-default);background:transparent;
  color:var(--text-body);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .12s ease-out}
.btn:hover{background:var(--surface-hover)} .btn:active{transform:scale(.98)}
.btn.prim{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--text-on-brand)}
.btn.prim:hover{background:var(--accent)}
.btn.peligro{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
.form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
label.campo{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
input,select{height:36px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius);background:var(--bg-subtle);min-width:0}
input::placeholder{color:var(--text-muted)}
.msg{min-height:18px;margin-top:10px;font-size:13px} .msg.err{color:var(--danger)} .msg.ok{color:var(--success)}
.resultado{margin-top:12px;padding:14px 16px;border:1px solid var(--border-default);border-radius:var(--radius);background:var(--bg-subtle)}
.resultado .codigo{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:.08em;color:var(--text-heading)}

/* bitácora */
.bitacora{list-style:none;margin:0;padding:0}
.bitacora li{display:flex;gap:12px;padding:9px 16px;border-top:1px solid var(--border-divider);font-size:13px}
.bitacora li:first-child{border-top:0}
.bitacora .cuando{color:var(--text-muted);min-width:110px;font-variant-numeric:tabular-nums}

/* entrar */
.entrar{min-height:100vh;display:grid;place-items:center;padding:16px}
.entrar form{width:100%;max-width:360px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:14px}
.entrar h1{margin:0;font-size:20px;color:var(--text-heading)}
.entrar input{width:100%} .entrar .btn{height:40px}

@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} .pagina{padding:16px} .topbar{padding:0 16px} .topbar .eyebrow{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
.fecha{white-space:nowrap}

/* módulos */
.mod{display:inline-block;font-size:11px;padding:2px 6px;border-radius:3px;background:var(--surface-hover);margin:1px 2px 1px 0;white-space:nowrap}
.modulos-sel{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:14px}
.modulos-sel label{display:flex;align-items:center;gap:6px;cursor:pointer}
.dialogo-mod{border:1px solid rgba(127,127,127,.3);border-radius:4px;padding:22px;max-width:460px;background:var(--surface-card);color:var(--text-body)}
.dialogo-mod::backdrop{background:rgba(0,0,0,.5)}
.dialogo-mod h2{margin:0 0 6px;font-size:17px}