:root {
  --bg: #0f1923;
  --bg2: #131f2c;
  --card: #1a2a3a;
  --card2: #162232;
  --border: #2a3a4a;
  --line: #243545;
  --text: #e0e0e0;
  --muted: #7a8a9a;
  --accent: #00d4ff;
  --accent2: #0090b3;
  --green: #2ed573;
  --red: #ff4757;
  --amber: #ffa502;
  --purple: #a855f7;
  --shadow: 0 8px 25px rgba(0,0,0,.35);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

.hidden { display:none !important; }

/* ---------- Navbar ---------- */
.navbar { background:linear-gradient(135deg,#1a2a3a,#0d1b2a); padding:14px 26px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:2px solid var(--accent); box-shadow:0 2px 20px rgba(0,212,255,.15); position:sticky; top:0; z-index:900; flex-wrap:wrap; }
.brand { font-size:1.25em; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:2px; white-space:nowrap; }
.brand span { color:var(--red); }
.nav-links { display:flex; gap:6px; flex-wrap:wrap; }
.nav-links a { color:var(--muted); text-decoration:none; padding:8px 15px; border-radius:6px; font-size:.9em; transition:all .25s; }
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { background:rgba(0,212,255,.15); color:var(--accent); }
.navbar-right { display:flex; align-items:center; gap:12px; }
.pill { padding:4px 12px; border-radius:20px; font-size:.72em; font-weight:600; border:1px solid var(--border); white-space:nowrap; }
.pill-online { background:rgba(46,213,115,.15); color:var(--green); border-color:rgba(46,213,115,.4); }
.pill-offline { background:rgba(255,71,87,.15); color:var(--red); border-color:rgba(255,71,87,.4); }
.pill-unknown { background:rgba(255,165,2,.12); color:var(--amber); border-color:rgba(255,165,2,.4); }
.last-update { font-size:.75em; color:var(--muted); font-variant-numeric:tabular-nums; }
.user-badge { color:var(--accent); }

/* ---------- Contenedor ---------- */
.container { max-width:1500px; margin:0 auto; padding:22px; }

/* ---------- Login ---------- */
.login-overlay { position:fixed; inset:0; background:radial-gradient(ellipse at center,#1a2a3a 0%,#0f1923 75%); display:flex; align-items:center; justify-content:center; z-index:2000; }
.login-box { background:var(--card); padding:42px; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); width:100%; max-width:400px; }
.login-icon { text-align:center; font-size:2.6em; margin-bottom:10px; }
.login-box h1 { text-align:center; color:var(--accent); font-size:1.5em; letter-spacing:2px; }
.login-box h1 span { color:var(--red); }
.login-sub { text-align:center; color:var(--muted); font-size:.85em; margin:6px 0 26px; }

/* ---------- Formularios ---------- */
.f-group { margin-bottom:14px; display:flex; flex-direction:column; }
.f-row { display:flex; gap:12px; }
.f-row .f-group { flex:1; }
.f-row .f-narrow { flex:.6; }
.f-group label { margin-bottom:5px; color:var(--muted); font-size:.78em; text-transform:uppercase; letter-spacing:1px; }
.f-group input[type=text], .f-group input[type=email], .f-group input[type=password], .f-group input[type=number], .f-group select {
  width:100%; padding:11px 13px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.95em; transition:border-color .25s, box-shadow .25s;
}
.f-group input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 10px rgba(0,212,255,.2); }
label.checkbox { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:.9em; color:var(--text); padding-top:8px; cursor:pointer; }
label.checkbox input { transform:scale(1.15); }

/* ---------- Botones ---------- */
.btn { padding:10px 20px; border:none; border-radius:8px; cursor:pointer; font-size:.88em; font-weight:600; transition:all .25s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0f1923; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 5px 20px rgba(0,212,255,.4); }
.btn-danger { background:linear-gradient(135deg,var(--red),#c0392b); color:#fff; }
.btn-danger:hover { transform:translateY(-2px); box-shadow:0 5px 18px rgba(255,71,87,.4); }
.btn-success { background:linear-gradient(135deg,var(--green),#1abc9c); color:#0f1923; }
.btn-success:hover { transform:translateY(-2px); box-shadow:0 5px 18px rgba(46,213,115,.4); }
.btn-warning { background:linear-gradient(135deg,var(--amber),#e67e22); color:#0f1923; }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--accent); border-color:var(--accent); }
.btn-sm { padding:5px 12px; font-size:.76em; }
.btn-xs { padding:3px 9px; font-size:.7em; }
.btn-block { width:100%; padding:13px; margin-top:8px; }
.spacer { flex:1; }

/* ---------- Stats ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { background:linear-gradient(135deg,var(--card),var(--card2)); padding:18px 20px; border-radius:12px; border:1px solid var(--border); position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; }
.stat-card .num { font-size:2.1em; font-weight:700; line-height:1; margin-bottom:6px; }
.stat-card .lbl { color:var(--muted); font-size:.78em; text-transform:uppercase; letter-spacing:1px; }
.stat-card.sc-accent::before { background:var(--accent); } .stat-card.sc-accent .num { color:var(--accent); }
.stat-card.sc-green::before { background:var(--green); } .stat-card.sc-green .num { color:var(--green); }
.stat-card.sc-red::before { background:var(--red); } .stat-card.sc-red .num { color:var(--red); }
.stat-card.sc-black::before { background:var(--purple); } .stat-card.sc-black .num { color:var(--purple); }
.stat-card.sc-amber::before { background:var(--amber); } .stat-card.sc-amber .num { color:var(--amber); }

/* ---------- Secciones / titulos ---------- */
.section { margin:26px 0 12px; font-size:1.15em; font-weight:600; display:flex; align-items:center; gap:10px; }
.section .chip { font-size:.7em; font-weight:600; color:var(--muted); }
.section-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:16px; }

/* ---------- Barra de filtros ---------- */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filter-bar select, .filter-bar input {
  padding:9px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.88em;
}
.filter-bar select:focus { outline:none; border-color:var(--accent); }

/* ---------- Grid de camaras ---------- */
.dvr-group { margin-bottom:18px; }
.dvr-group-header { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--card2); border:1px solid var(--border); border-radius:10px 10px 0 0; cursor:pointer; flex-wrap:wrap; }
.dvr-group-header:hover { background:#1a2c3d; }
.dvr-group-header .dvr-name { font-weight:600; font-size:.98em; }
.dvr-group-header .dvr-loc { color:var(--muted); font-size:.8em; }
.dvr-group-body { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; padding:12px; background:var(--bg2); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; }
.cam-tile { position:relative; background:#000; border-radius:8px; overflow:hidden; border:2px solid var(--line); transition:transform .15s, box-shadow .15s; }
.cam-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.cam-tile .thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#0a0f14; }
.cam-tile .noimg { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:1.6em; background:#0a0f14; }
.cam-tile .cam-info { position:absolute; inset-inline:0; bottom:0; padding:6px 8px; background:linear-gradient(transparent,rgba(0,0,0,.85)); font-size:.72em; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.cam-tile .cam-name { color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cam-tile .rec { color:var(--red); font-size:.65em; }
.cam-tile .br { position:absolute; top:6px; left:6px; font-size:1.05em; text-shadow:0 1px 3px #000; }
.cam-tile .refresh { position:absolute; top:5px; right:5px; background:rgba(0,0,0,.55); border:none; color:#fff; border-radius:5px; cursor:pointer; padding:3px 6px; font-size:.72em; opacity:0; transition:opacity .2s; }
.cam-tile:hover .refresh { opacity:1; }
.cam-tile.st-border-online { border-color:rgba(46,213,115,.75); }
.cam-tile.st-border-nosignal { border-color:rgba(255,71,87,.9); }
.cam-tile.st-border-offline { border-color:rgba(120,130,145,.6); }
.cam-tile.st-border-black { border-color:rgba(168,85,247,.9); }
.cam-tile.st-border-disabled { border-color:var(--line); opacity:.6; }
.cam-tile.st-border-unknown { border-color:var(--line); }

/* ---------- Badges de estado ---------- */
.badge { padding:3px 9px; border-radius:20px; font-size:.7em; font-weight:600; text-transform:uppercase; white-space:nowrap; }
.b-online { background:rgba(46,213,115,.16); color:var(--green); border:1px solid rgba(46,213,115,.4); }
.b-nosignal { background:rgba(255,71,87,.16); color:var(--red); border:1px solid rgba(255,71,87,.45); }
.b-offline { background:rgba(140,150,165,.14); color:#aab4c0; border:1px solid rgba(140,150,165,.35); }
.b-black { background:rgba(168,85,247,.16); color:var(--purple); border:1px solid rgba(168,85,247,.45); }
.b-disabled { background:rgba(128,128,128,.1); color:var(--muted); border:1px solid var(--line); }
.b-unknown { background:rgba(255,165,2,.12); color:var(--amber); border:1px solid rgba(255,165,2,.4); }
.b-dvr { background:rgba(0,212,255,.14); color:var(--accent); border:1px solid rgba(0,212,255,.35); }
.b-info { background:rgba(0,212,255,.1); color:#9fd8ff; border:1px solid rgba(0,212,255,.3); }

/* ---------- Tablas ---------- */
.table-wrap { background:var(--card); border-radius:10px; border:1px solid var(--border); overflow:hidden; overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th { background:var(--card2); padding:11px 14px; text-align:left; color:var(--accent); font-size:.75em; text-transform:uppercase; letter-spacing:1px; }
td { padding:11px 14px; border-top:1px solid var(--line); font-size:.88em; }
tr:hover { background:rgba(0,212,255,.04); }

/* ---------- Tiles DVR (resumen) ---------- */
.dvr-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-bottom:20px; }
.dvr-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:16px; cursor:pointer; transition:all .2s; border-left:4px solid var(--line); }
.dvr-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.dvr-card.on { border-left-color:var(--green); }
.dvr-card.off { border-left-color:var(--red); }
.dvr-card h3 { font-size:1.02em; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dvr-card .meta { color:var(--muted); font-size:.8em; margin-bottom:10px; }
.dvr-card .lbars { display:flex; gap:14px; margin-top:10px; }
.lbar { flex:1; }
.lbar .lt { font-size:.7em; color:var(--muted); margin-bottom:4px; display:flex; justify-content:space-between; }
.bar { height:7px; background:var(--line); border-radius:4px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:4px; }

/* ---------- Alertas ---------- */
.alert-item { background:var(--card2); padding:12px 15px; border-radius:8px; margin-bottom:8px; border-left:3px solid var(--red); display:flex; gap:12px; align-items:flex-start; }
.alert-item.seen { opacity:.55; border-left-color:var(--line); }
.alert-item .msg { font-size:.88em; flex:1; }
.alert-item .meta { color:var(--muted); font-size:.75em; white-space:nowrap; }
.alert-item.dvr_down { border-left-color:var(--amber); }
.alert-item.channel_down { border-left-color:var(--red); }

/* ---------- Sparkline ---------- */
.spark { width:100%; height:80px; background:var(--card); border:1px solid var(--border); border-radius:10px; display:block; }

/* ---------- Modal ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1200; display:flex; align-items:center; justify-content:center; padding:18px; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); }
.modal h2 { color:var(--accent); margin-bottom:18px; font-size:1.2em; }
.modal-actions { display:flex; gap:10px; margin-top:18px; align-items:center; }
.form-hint { font-size:.78em; color:var(--muted); margin-top:10px; }

/* ---------- Usuarios / asignaciones ---------- */
.user-admin-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:16px; }
.user-fields { display:grid; grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(220px,2fr) auto; gap:12px; align-items:end; }
.user-fields .f-group { margin-bottom:0; }
.user-enabled { align-self:center; white-space:nowrap; }
.assignment-title { margin:18px 0 9px; font-weight:600; }
.assignment-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:7px; max-height:280px; overflow:auto; padding:10px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; }
.assignment-item { display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:center; padding:7px; border-radius:6px; cursor:pointer; }
.assignment-item:hover { background:rgba(0,212,255,.06); }
.assignment-item small { grid-column:2; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }

/* ---------- Flash ---------- */
.flash { padding:11px 15px; border-radius:8px; margin-bottom:14px; font-size:.88em; }
.flash-error { background:rgba(255,71,87,.13); border:1px solid rgba(255,71,87,.35); color:var(--red); }
.flash-success { background:rgba(46,213,115,.13); border:1px solid rgba(46,213,115,.35); color:var(--green); }

/* ---------- Detalle DVR ---------- */
.back-link { color:var(--accent); text-decoration:none; font-size:.9em; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; }
.back-link:hover { text-decoration:underline; }
.detail-head { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; margin-bottom:16px; }
.detail-info { flex:1; min-width:280px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; }
.detail-info .row { display:flex; justify-content:space-between; padding:4px 0; font-size:.88em; border-bottom:1px dashed var(--line); }
.detail-info .row:last-child { border-bottom:none; }
.detail-info .k { color:var(--muted); }
.detail-info .v { font-weight:600; }

/* ---------- Utilidades ---------- */
.muted { color:var(--muted); }
.small { font-size:.78em; }
.mt { margin-top:8px; } .mt10 { margin-top:10px; } .mb { margin-bottom:14px; }
.flex { display:flex; gap:8px; align-items:center; }
.wrap { flex-wrap:wrap; }
.right { margin-left:auto; }
.pulse { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }
.empty { color:var(--muted); text-align:center; padding:34px 0; font-size:.95em; }
.spin { display:inline-block; animation:spin 1.2s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.bar-thumb { width:60px; height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:5px; }
.bar-thumb i { display:block; height:100%; }

.toast { position:fixed; bottom:20px; right:20px; background:var(--card2); border:1px solid var(--border); color:var(--text); padding:12px 18px; border-radius:8px; box-shadow:var(--shadow); z-index:3000; font-size:.88em; opacity:1; transition:opacity .5s; max-width:320px; }
.toast.ok { border-left:4px solid var(--green); }
.toast.err { border-left:4px solid var(--red); }

@media (max-width:640px) {
  .navbar { padding:12px 14px; }
  .dvr-group-body { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .stats-grid { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
  .user-fields { grid-template-columns:1fr; }
}