/* ── Valorian Accesos v2 ── */

:root {
  --bg:        #f4f5f7;
  --text:      #1e2330;
  --muted:     #6b7280;
  --brand:     #0b2545;
  --brand2:    #143462;
  --ok:        #16a34a;
  --ok-bg:     #dcfce7;
  --bad:       #dc2626;
  --bad-bg:    #fee2e2;
  --warn:      #d97706;
  --warn-bg:   #fef3c7;
  --blue:      #2563eb;
  --blue-bg:   #dbeafe;
  --card:      #ffffff;
  --border:    #e5e7eb;
  --radius:    10px;
  --shadow:    0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
}

/* ── Topbar ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;background:#fff;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.topbar-brand{display:flex;align-items:center;text-decoration:none;}
.logo{height:34px;}
.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.op-name{color:var(--muted);font-size:14px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logout-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  cursor:pointer;padding:5px 12px;border-radius:6px;font-size:13px;
}
.logout-btn:hover{border-color:var(--bad);color:var(--bad);}

/* ── Badges ── */
.badge{
  padding:4px 10px;border-radius:999px;font-weight:700;font-size:11px;
  color:#fff;letter-spacing:.5px;white-space:nowrap;
}
.badge-entrada{background:var(--ok);}
.badge-salida {background:var(--blue);}
.badge-admin  {background:var(--brand);}
.badge-operador{background:#7c3aed;}

/* ── Flash ── */
.flash-wrap{padding:8px 20px 0;}
.flash{padding:10px 16px;border-radius:8px;margin-bottom:6px;font-weight:600;font-size:14px;}
.flash-ok {background:var(--ok-bg);color:var(--ok);}
.flash-error{background:var(--bad-bg);color:var(--bad);}

/* ── Main container ── */
main{max-width:1200px;margin:0 auto;padding:20px;}

/* ── LOGIN ── */
.login-body main{
  display:flex;justify-content:center;align-items:center;
  min-height:calc(100vh - 56px);
}
.login-card{
  background:var(--card);padding:36px 32px;border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:400px;
}
.login-logo{height:40px;display:block;margin:0 auto 16px;}
.login-card h1{text-align:center;margin:0 0 20px;font-size:22px;color:var(--brand);}
.login-card label,
.form-card label{display:block;margin-bottom:14px;font-size:14px;color:var(--muted);}
.login-card input,
.form-card input,
.form-card select{
  display:block;width:100%;margin-top:5px;padding:10px 12px;font-size:15px;
  border:1px solid #d1d5db;border-radius:8px;background:#fff;color:var(--text);
}
.login-card input:focus,
.form-card input:focus,
.form-card select:focus{outline:none;border-color:var(--brand);}
.alert-error{
  background:var(--bad-bg);color:var(--bad);
  padding:10px 14px;border-radius:8px;margin-bottom:16px;font-weight:600;font-size:14px;
}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;border:0;padding:11px 18px;
  font-size:15px;border-radius:8px;cursor:pointer;width:100%;text-decoration:none;
}
.btn-primary:hover{background:var(--brand2);}
.btn-secondary{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:var(--brand);border:1px solid var(--brand);
  padding:9px 14px;font-size:14px;border-radius:8px;text-decoration:none;cursor:pointer;
}
.btn-secondary:hover{background:var(--bg);}
.btn-xs{
  display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;
  border:1px solid var(--border);background:#fff;color:var(--text);
  text-decoration:none;cursor:pointer;
}
.btn-xs:hover{background:var(--bg);}
.btn-danger{border-color:var(--bad)!important;color:var(--bad)!important;}
.btn-ok   {border-color:var(--ok)!important; color:var(--ok)!important;}

/* ── SCAN ── */
.scan-wrap{display:flex;flex-direction:column;gap:14px;}
.banner{
  border-radius:var(--radius);padding:36px 20px;text-align:center;
  box-shadow:var(--shadow);transition:background-color .12s,color .12s;
  min-height:170px;display:flex;flex-direction:column;justify-content:center;
}
.banner-title{font-size:clamp(36px,6.5vw,76px);font-weight:900;letter-spacing:.5px;}
.banner-sub  {font-size:clamp(14px,2vw,20px);margin-top:8px;opacity:.82;}
.banner-idle {background:#e2e8f0;color:#475569;}
.banner-ok   {background:var(--ok-bg);color:var(--ok);}
.banner-bad  {background:var(--bad-bg);color:var(--bad);}
.banner-warn {background:var(--warn-bg);color:var(--warn);}
.input-row{display:flex;}
#scan-input{
  width:100%;padding:16px 20px;font-size:20px;
  border:2px solid #cbd5e1;border-radius:var(--radius);background:#fff;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
#scan-input:focus{outline:none;border-color:var(--brand);}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  background:#fff;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow);
  font-size:13px;color:var(--muted);
}
.stats span{font-size:20px;font-weight:800;color:var(--text);display:block;}
.history{
  list-style:none;padding:0;margin:0;background:#fff;
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.history li{
  display:grid;grid-template-columns:90px 1fr 80px;align-items:center;
  padding:9px 14px;border-bottom:1px solid #f1f5f9;gap:10px;
}
.history li:last-child{border-bottom:0;}
.h-state{font-weight:700;font-size:12px;}
.h-state.ok  {color:var(--ok);}
.h-state.bad {color:var(--bad);}
.h-state.warn{color:var(--warn);}
.h-val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.h-time{text-align:right;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;}

/* ── ADMIN ── */
.section-title{margin:0 0 16px;color:var(--brand);font-size:22px;}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}

.cards{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;
}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;text-align:center;
}
.card .num{font-size:28px;font-weight:800;color:var(--brand);}
.card .num.green{color:var(--ok);}
.card .num.blue {color:var(--blue);}
.card .num.red  {color:var(--bad);}
.card .lbl{color:var(--muted);font-size:12px;margin-top:4px;}

.filters{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
  background:#fff;padding:14px;border-radius:var(--radius);box-shadow:var(--shadow);
}
.filters input,.filters select{
  padding:8px 10px;border:1px solid var(--border);border-radius:7px;
  background:#fff;font-size:13px;color:var(--text);
}
.filters .btn-primary{width:auto;padding:8px 14px;}

.reg-table{
  width:100%;background:#fff;border-collapse:collapse;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.reg-table th,.reg-table td{
  padding:9px 11px;text-align:left;border-bottom:1px solid #f1f5f9;font-size:13px;
}
.reg-table th{
  background:#f8fafc;color:var(--muted);font-weight:600;
  text-transform:uppercase;font-size:11px;letter-spacing:.4px;
}
.reg-table .mono{font-family:ui-monospace,Menlo,Consolas,monospace;}
.reg-table .small{font-size:11px;}
.row-bad{background:#fff8f8;}

.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;}
.tag-entrada,.tag-ok     {background:var(--ok-bg);color:var(--ok);}
.tag-salida              {background:var(--blue-bg);color:var(--blue);}
.tag-bad,
.tag-no_whitelist,
.tag-duplicado           {background:var(--bad-bg);color:var(--bad);}
.tag-admin               {background:#ede9fe;color:#7c3aed;}
.tag-operador            {background:#f1f5f9;color:var(--muted);}
.empty{text-align:center;padding:28px;color:var(--muted);}
.hint{color:var(--muted);font-size:12px;margin-top:8px;}

.form-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px;max-width:560px;
}
.field-static{margin-bottom:14px;font-size:14px;}
.field-label{color:var(--muted);display:block;margin-bottom:4px;}

@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .stats{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr 1fr;}
}