/* Estilos agregados para la plataforma (inicio de sesión, formularios, ventanas) */
[hidden]{display:none!important}
body{margin:0}
#auth-body{display:flex;flex-direction:column;gap:14px}

.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px;
  background:radial-gradient(60% 50% at 80% 0%, rgba(0,169,89,.22), transparent 70%),var(--side)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.auth-logo{width:180px;align-self:center;background:var(--side);border-radius:10px;padding:10px 14px}
.auth-card h2{margin:0;font-family:var(--f-display);font-stretch:88%;font-size:19px}
.auth-card p{margin:0;color:var(--muted);font-size:13px}
.auth-foot{color:var(--side-fg);font-size:12px;opacity:.8;text-align:center;max-width:400px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.form input,.form select,.form textarea{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 10px;width:100%;font-size:14px;color:var(--fg)}
.form textarea{min-height:70px;resize:vertical}
.form .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.form .acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.form .btn.primary{justify-content:center}
.err{color:var(--bad);font-size:13px;font-weight:600;min-height:1em}
.qr{align-self:center;background:#fff;border-radius:10px;padding:8px}
.secreto{font-family:var(--f-mono);font-size:12px;word-break:break-all;background:var(--surface-2);border-radius:6px;padding:6px 8px;text-align:center}
.codigo{font-family:var(--f-mono);font-size:22px!important;letter-spacing:.3em;text-align:center}

.yo{font-size:13px;color:var(--muted);white-space:nowrap}
.yo b{color:var(--fg)}

.modal-fondo{position:fixed;inset:0;z-index:50;background:rgba(8,16,12,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal{background:var(--surface);border-radius:12px;padding:20px;width:100%;max-width:520px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal h3{margin:0;font-family:var(--f-display);font-stretch:88%;font-size:18px}
.temporal{font-family:var(--f-mono);font-size:18px;background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;padding:10px;text-align:center;user-select:all}

.mini{display:inline-flex;gap:6px;flex-wrap:wrap}
.mini .btn{padding:3px 8px;font-size:12px;font-weight:600}
.btn.peligro:hover{border-color:var(--bad);color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:progress}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.vacio{padding:18px;text-align:center;color:var(--muted)}
td.det{font-family:var(--f-mono);font-size:11.5px;white-space:normal;max-width:420px;color:var(--muted)}

@media (max-width:760px){
  .brand .logo img{max-width:160px}
  .yo{white-space:normal}
  .who select{flex:1 1 160px}
  .panel h2 .right{margin-left:0;flex-wrap:wrap}
}

/* Ratio con escala de color: celda completa coloreada */
td.rc{font-weight:700;font-variant-numeric:tabular-nums;min-width:78px;border-top-color:rgba(255,255,255,.4);text-shadow:none}
td.rc.gris{background:var(--surface-2);color:var(--muted);font-weight:600}

/* Filtro de periodo (día / semana / mes / año / rango) */
.filters .per{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.seg-b{border:0;background:transparent;padding:7px 11px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fg);cursor:pointer;font-family:inherit}
.seg-b+.seg-b{border-left:1px solid var(--line)}
.seg-b:hover{background:var(--accent-soft)}
.seg-b.on{background:var(--accent);color:#fff}
.pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-transform:none;letter-spacing:0}
.pick input,.pick select{font:inherit;font-size:14px;font-weight:500;color:var(--fg);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;min-width:150px}
.per-lbl{font-size:12.5px;color:var(--muted);font-weight:500}