:root {
  --azul: #1e5bb8; --azul-osc: #16468f; --azul-claro: #eaf1fb;
  --rojo: #c0392b; --verde: #137333; --amarillo: #b7791f; --naranja:#d97706;
  --gris: #5f6b7a; --gris2:#8a97a6; --borde: #e2e8f0; --bg: #eef2f8;
  --sombra: 0 6px 22px rgba(16,42,82,.08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html,body { margin:0; }
body { font: 14px/1.5 "Segoe UI", system-ui, sans-serif; color:#1b2733; background: var(--bg); }

.brand { display:flex; align-items:center; gap:10px; }
.brand--center { justify-content:center; margin-bottom:6px; }
.brand__logo { width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,var(--azul),var(--azul-osc)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:22px; box-shadow:0 4px 12px rgba(30,91,184,.35); }
.brand strong { display:block; font-size:16px; }
.brand span { font-size:11px; color:var(--gris); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:9px; padding:9px 14px; font:600 13px "Segoe UI",sans-serif; cursor:pointer; text-decoration:none; transition:filter .12s, background .12s; }
.btn--primary { background:var(--azul); color:#fff; }
.btn--primary:hover { filter:brightness(1.08); }
.btn--ghost { background:#fff; color:var(--azul); border:1.5px solid var(--azul); }
.btn--ghost:hover { background:var(--azul-claro); }
.btn--wa { background:#25d366; color:#fff; }
.btn--danger { background:var(--rojo); color:#fff; }
.btn--block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.msg { font-size:13px; color:var(--rojo); margin-top:10px; min-height:18px; }
.msg.is-ok { color:var(--verde); }

/* ===== Login PIN ===== */
.login { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:14px;
  background:radial-gradient(1200px 600px at 50% -10%, #dbe7fb, var(--bg)); }
.login__card { background:#fff; border-radius:20px; box-shadow:0 18px 50px rgba(16,42,82,.18); padding:30px 28px; width:340px; max-width:100%; text-align:center; }
.login__title { margin:16px 0 14px; font-size:16px; color:var(--azul-osc); }
.login__foot { color:var(--gris2); font-size:12px; }
.pin-dots { display:flex; justify-content:center; gap:12px; min-height:20px; margin-bottom:18px; }
.pin-dots i { width:14px; height:14px; border-radius:50%; background:var(--borde); transition:background .12s, transform .12s; }
.pin-dots i.on { background:var(--azul); transform:scale(1.12); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.keypad button { padding:16px 0; font-size:20px; font-weight:600; border:1.5px solid var(--borde); background:#fff; border-radius:12px; cursor:pointer; color:#1b2733; transition:background .1s, transform .05s; }
.keypad button:hover { background:var(--azul-claro); }
.keypad button:active { transform:scale(.96); }
.keypad .k-alt { color:var(--gris); font-size:17px; }
#pinEnter { margin-top:16px; padding:12px; font-size:15px; }
.login.is-locked .keypad button, .login.is-locked #pinEnter { pointer-events:none; opacity:.5; }

/* ===== Topbar ===== */
.topbar { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:10px 22px; border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:10; }
.topbar__right { display:flex; align-items:center; gap:12px; }
.clock { font-size:13px; color:var(--gris); font-variant-numeric:tabular-nums; }

.main { max-width:1180px; margin:22px auto; padding:0 18px; display:flex; flex-direction:column; gap:22px; }
.section-title { margin:0 0 14px; font-size:18px; color:var(--azul-osc); }
.card { background:#fff; border-radius:14px; box-shadow:var(--sombra); padding:20px 22px; }
.card__head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ===== KPIs ===== */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:#fff; border-radius:14px; box-shadow:var(--sombra); padding:16px 18px; border-left:5px solid var(--azul); }
.kpi__num { font-size:28px; font-weight:800; line-height:1; }
.kpi__lbl { font-size:12px; color:var(--gris); margin-top:6px; text-transform:uppercase; letter-spacing:.3px; }
.kpi--ok { border-color:var(--verde); } .kpi--ok .kpi__num { color:var(--verde); }
.kpi--warn { border-color:var(--naranja); } .kpi--warn .kpi__num { color:var(--naranja); }
.kpi--red { border-color:var(--rojo); } .kpi--red .kpi__num { color:var(--rojo); }
.kpi--money { border-color:#0e7490; } .kpi--money .kpi__num { color:#0e7490; font-size:22px; }

/* ===== Charts ===== */
.charts { display:grid; grid-template-columns:1fr 1.4fr; gap:18px; }
@media (max-width:820px){ .charts { grid-template-columns:1fr; } }
.chart-card h3 { margin:0 0 14px; font-size:14px; color:var(--gris); }
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.legend { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.legend div { display:flex; align-items:center; gap:8px; }
.legend .sw { width:12px; height:12px; border-radius:3px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:10px; }
.bars .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bars .bar i { width:100%; max-width:34px; background:linear-gradient(180deg,#3f86e0,var(--azul)); border-radius:6px 6px 0 0; transition:height .3s; min-height:2px; }
.bars .bar .v { font-size:12px; font-weight:700; color:var(--azul-osc); }
.bars .bar .m { font-size:11px; color:var(--gris); }

/* ===== Crear ===== */
.hint { color:var(--gris); font-size:13px; margin:-4px 0 14px; }
.grid { display:grid; grid-template-columns:1.6fr .8fr .8fr .7fr auto; gap:12px; align-items:end; }
@media (max-width:820px){ .grid { grid-template-columns:1fr 1fr; } }
label { display:block; font-size:12px; font-weight:600; color:var(--gris); }
input, select { width:100%; padding:10px 12px; border:1.5px solid var(--borde); border-radius:9px; font-size:14px; margin-top:4px; background:#fff; color:#1b2733; }
input:focus, select:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(30,91,184,.15); }
.create-result { margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--azul-claro); }
.create-result.is-ok { background:#e9f7ef; }
.create-result.is-error { background:#fdecea; color:var(--rojo); }
.create-result__actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.code { background:#0f1b2d; color:#7ee2a8; padding:3px 8px; border-radius:6px; font:600 14px ui-monospace,monospace; }
.codes { background:#0f1b2d; color:#7ee2a8; padding:10px 12px; border-radius:8px; font:600 13px ui-monospace,monospace; white-space:pre-wrap; margin:8px 0; max-height:200px; overflow:auto; }

/* ===== Tabla ===== */
.tools { display:flex; gap:8px; flex-wrap:wrap; }
.tools input[type="search"] { min-width:260px; }
.tools select { width:auto; }
.table-wrap { overflow-x:auto; margin-top:14px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th, .tbl td { border-bottom:1px solid var(--borde); padding:9px 10px; text-align:left; white-space:nowrap; }
.tbl th { color:var(--gris); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.tbl tr:hover td { background:#f8fafc; }
.tbl code { font:600 12px ui-monospace,monospace; color:var(--azul-osc); }
.pending { color:var(--amarillo); font-style:italic; }
.actions { display:flex; gap:5px; }
.actions button { border:1px solid var(--borde); background:#fff; border-radius:7px; padding:4px 9px; font-size:12px; cursor:pointer; }
.actions button:hover { background:var(--azul-claro); }
.actions button.danger { color:var(--rojo); border-color:#f3c5bf; }
.actions button.danger:hover { background:#fdecea; }
.badge { padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.badge--ok { background:#e9f7ef; color:var(--verde); }
.badge--warn { background:#fff7e6; color:var(--amarillo); }
.badge--soon { background:#fff1e0; color:var(--naranja); }
.badge--err { background:#fdecea; color:var(--rojo); }
.badge--exp { background:#eee; color:#666; }
.days-left { font-weight:700; }
.days-left.neg { color:var(--rojo); }
.days-left.soon { color:var(--naranja); }

/* ===== Modal ===== */
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.modal__overlay { position:absolute; inset:0; background:rgba(12,28,56,.4); }
.modal__card { position:relative; background:#fff; border-radius:16px; width:420px; max-width:92vw; box-shadow:0 20px 60px rgba(16,42,82,.3); max-height:90vh; overflow:auto; }
.modal__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--borde); }
.modal__head h3 { margin:0; color:var(--azul-osc); }
.modal__x { background:#f1f5f9; border:none; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; }
.modal__body { padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.modal__code { text-align:center; }
.modal__code::before { content:""; }
.modal__foot { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--borde); gap:10px; flex-wrap:wrap; }
.modal__foot-right { display:flex; gap:8px; }
#mMsg { padding:0 20px 16px; }