:root {
  --bg: #060810; --bg2: #0a0e1a; --bg3: #0e1422; --bg4: #121828;
  --surface: #172030; --border: rgba(255,107,35,0.15); --border2: rgba(255,107,35,0.35);
  --green: #ff6b23; --green-dim: rgba(255,107,35,0.13); --green-glow: rgba(255,107,35,0.07);
  --red: #ff4d6d; --red-dim: rgba(255,77,109,0.13);
  --amber: #ffb347; --amber-dim: rgba(255,179,71,0.13);
  --blue: #5b9fff;
  --text: #e8eeff; --text2: #7a8faa; --text3: #3a5070;
  --mono: 'Share Tech Mono', monospace;
  --display: 'Rajdhani', sans-serif;
  --body: 'DM Sans', sans-serif;
  --r: 8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:14px;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(255,107,35,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,35,.02) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}

/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:200px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100}
.logo{padding:20px 16px 16px;border-bottom:1px solid var(--border)}
.logo-row{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.logo-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-dot::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);animation:pd 2s ease-in-out infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.logo-name{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:2px}
.logo-name span{color:var(--green)}
.logo-sub{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1.5px;margin-left:36px}
.nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.nav-sec{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;padding:10px 8px 5px}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:all .15s;color:var(--text2);font-size:13px;border:1px solid transparent;position:relative;user-select:none}
.nav-item:hover{background:var(--green-glow);color:var(--text);border-color:var(--border)}
.nav-item.active{background:var(--green-dim);color:var(--green);border-color:var(--border2);font-weight:500}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:14px;background:var(--green);border-radius:0 2px 2px 0}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:10px;animation:bp 1.5s ease-in-out infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.6}}
.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.sys-status{display:flex;align-items:center;gap:7px;padding:9px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pd 1.5s ease-in-out infinite;flex-shrink:0}
.status-dot.red{background:var(--red)}
.status-dot.amber{background:var(--amber)}
.status-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.status-val{font-family:var(--mono);font-size:10px;color:var(--green)}

/* MAIN */
.main{margin-left:200px;min-height:100vh;position:relative;z-index:1}
.topbar{height:56px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:14px;position:sticky;top:0;z-index:50}
.topbar-title{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:1px;flex:1}
.topbar-time{font-family:var(--mono);font-size:11px;color:var(--text2)}
.api-pill{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;padding:4px 10px;border-radius:20px;border:1px solid var(--border)}
.api-pill.ok{color:var(--green);border-color:rgba(52,220,120,.2);background:var(--green-dim)}
.api-pill.err{color:var(--red);border-color:rgba(255,77,109,.2);background:var(--red-dim)}

/* VIEWS */
.view{display:none;padding:20px 24px;flex-direction:column;gap:16px;animation:fi .2s ease}
.view.active{display:flex}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* PANELS */
.panel{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.pt{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.pb{padding:14px 16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row31{display:grid;grid-template-columns:2fr 1fr;gap:14px}

/* WEBCAM */
.cam-wrap{position:relative;background:#020804;border-radius:var(--r);overflow:hidden;border:2px solid var(--border)}
.cam-wrap.detecting{border-color:var(--green);box-shadow:0 0 20px rgba(255,107,35,.15)}
.cam-wrap.alert{border-color:var(--red);box-shadow:0 0 20px rgba(255,77,109,.15)}
#liveVideo,#regVideo{width:100%;display:block;transform:scaleX(-1)}  /* espejo */
#liveCanvas,#regCanvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1)}
.cam-overlay{position:absolute;top:8px;left:8px;display:flex;gap:6px;flex-direction:column}
.cam-tag{font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:4px;letter-spacing:.5px}
.cam-tag.live{background:var(--red);color:#fff}
.cam-tag.ok{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,220,120,.3)}
.cam-tag.warn{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,77,109,.3)}
.cam-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,107,35,.5),transparent);animation:scan 3s linear infinite;pointer-events:none}
@keyframes scan{0%{top:0}100%{top:100%}}
.cam-off{display:flex;align-items:center;justify-content:center;height:240px;font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:1px;flex-direction:column;gap:10px}

/* DETECTION LIST */
.det-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.det-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg4);animation:fi .25s ease}
.det-item.known{border-color:rgba(255,107,35,.25);background:var(--green-dim)}
.det-item.unknown{border-color:rgba(255,77,109,.25);background:var(--red-dim)}
.det-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;font-weight:700;flex-shrink:0}
.det-avatar.known{background:var(--green-dim);border:1.5px solid var(--green);color:var(--green)}
.det-avatar.unknown{background:var(--red-dim);border:1.5px solid var(--red);color:var(--red)}
.det-info{flex:1;min-width:0}
.det-name{font-size:13px;font-weight:500}
.det-meta{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.conf-bar{height:3px;background:var(--bg4);border-radius:2px;margin-top:4px;overflow:hidden;width:100%}
.conf-fill{height:100%;border-radius:2px;background:var(--green);transition:width .4s ease}
.conf-fill.low{background:var(--red)}
.conf-fill.mid{background:var(--amber)}
.det-time{font-family:var(--mono);font-size:9px;color:var(--text3);flex-shrink:0}

/* REGISTRATION */
.cap-zone{position:relative;border-radius:var(--r);overflow:hidden;background:#020804;border:2px dashed var(--border)}
.cap-zone.active-cam{border-style:solid;border-color:var(--green)}
.photo-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.thumb{aspect-ratio:1;border-radius:4px;border:1px solid var(--border);background:var(--bg4);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-family:var(--mono);font-size:8px;color:var(--text3);cursor:pointer;transition:all .15s;overflow:hidden;position:relative}
.thumb:hover{border-color:var(--border2)}
.thumb.done{border-color:var(--green);background:var(--green-dim)}
.thumb.done::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--green);background:var(--green-dim)}
.thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}

/* FORM */
.form-lbl{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;display:block}
.form-in{width:100%;background:var(--bg4);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;color:var(--text);font-family:var(--body);font-size:13px;outline:none;transition:border-color .15s}
.form-in:focus{border-color:var(--green)}
.form-in::placeholder{color:var(--text3)}
select.form-in{cursor:pointer;appearance:none}
option{background:var(--bg3)}
.form-g{margin-bottom:12px}

/* BUTTONS */
.btn{padding:9px 18px;border-radius:var(--r);font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .15s;border:none;outline:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn-primary{background:var(--green);color:var(--bg)}
.btn-primary:hover{background:#ff8c50;box-shadow:0 0 18px rgba(255,107,35,.3)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,77,109,.25)}
.btn-danger:hover{background:rgba(255,77,109,.2)}
.btn-full{width:100%}
.btn-sm{padding:5px 12px;font-size:10px}
.btn-lg{padding:14px 28px;font-size:14px;width:100%}

/* LOGIN */
.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:40px 24px}
.login-content{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:40px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-header{margin-bottom:40px}
.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.login-logo .logo-dot{width:40px;height:40px}
.login-title{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:2px;color:var(--text)}
.login-subtitle{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:1px;margin-top:12px;text-transform:uppercase}
.login-buttons{display:flex;flex-direction:column;gap:12px}

/* USER CARDS */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.user-card{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
.user-card:hover{border-color:var(--border2)}
.user-card.owner{border-color:rgba(255,107,35,.25)}
.uc-top{display:flex;align-items:center;gap:10px}
.uc-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;font-weight:700;flex-shrink:0}
.uc-avatar.owner{background:var(--green-dim);border:1.5px solid var(--green);color:var(--green)}
.uc-avatar.authorized{background:rgba(77,184,255,.1);border:1.5px solid var(--blue);color:var(--blue)}
.uc-avatar.visitor{background:var(--amber-dim);border:1.5px solid var(--amber);color:var(--amber)}
.uc-name{font-size:13px;font-weight:500}
.uc-role{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase}
.uc-meta{font-family:var(--mono);font-size:9px;color:var(--text3)}
.uc-meta span{color:var(--text2)}
.uc-actions{display:flex;gap:6px;margin-top:4px}
.badge{font-family:var(--mono);font-size:8px;padding:2px 7px;border-radius:10px}
.badge.owner{background:var(--green-dim);color:var(--green)}
.badge.authorized{background:rgba(77,184,255,.1);color:var(--blue)}
.badge.visitor{background:var(--amber-dim);color:var(--amber)}

/* LOGIN */
.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:40px 24px}
.login-content{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:40px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-header{margin-bottom:40px}
.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.login-logo .logo-dot{width:40px;height:40px}
.login-title{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:2px;color:var(--text)}
.login-subtitle{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:1px;margin-top:12px;text-transform:uppercase}
.login-buttons{display:flex;flex-direction:column;gap:12px}
.btn-lg{padding:14px 28px;font-size:14px;width:100%}

/* LOG TABLE */
.log-table{width:100%;border-collapse:collapse}
.log-table th{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--border);font-weight:400}
.log-table td{padding:9px 10px;font-size:11px;color:var(--text2);border-bottom:1px solid rgba(255,107,35,.04)}
.log-table tr:hover td{background:var(--green-glow);color:var(--text)}
.log-table tr:last-child td{border-bottom:none}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:8px;z-index:999;font-size:12px;box-shadow:0 8px 28px rgba(0,0,0,.5);transform:translateX(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);max-width:260px}
.toast.show{transform:translateX(0)}
.td{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.kpi.g::after{background:var(--green)}
.kpi.r::after{background:var(--red)}
.kpi.a::after{background:var(--amber)}
.kpi.b::after{background:var(--blue)}
.kpi-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.kpi-val{font-family:var(--display);font-size:28px;font-weight:700;line-height:1}
.kpi.g .kpi-val{color:var(--green)}
.kpi.r .kpi-val{color:var(--red)}
.kpi.a .kpi-val{color:var(--amber)}
.kpi.b .kpi-val{color:var(--blue)}
.kpi-sub{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:4px}

/* Scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* =====================================================
   MOBILE — app.html  (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {

  /* ── SIDEBAR → HEADER FIJO ARRIBA ── */
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 500 !important;
    background: var(--bg2) !important;
  }

  /* Fila 1: logo */
  .sidebar .logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .sidebar .logo-sub { display: none !important; }
  .sidebar .logo-row { margin-bottom: 0 !important; }

  /* Fila 2: nav pills horizontales */
  .sidebar .nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    flex: none !important;
    scrollbar-width: none !important;
  }
  .sidebar .nav::-webkit-scrollbar { display: none !important; }
  .sidebar .nav-sec { display: none !important; }

  .sidebar .nav-item {
    flex-direction: row !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: var(--r) !important;
    width: auto !important;
  }
  .sidebar .nav-item.active::before { display: none !important; }

  /* Monitor link: mostrar como pill en la nav row móvil */
  .sidebar .monitor-link-wrap {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .sidebar .monitor-link-wrap a {
    flex-direction: row !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: var(--r) !important;
    margin: 0 !important;
  }
  .sidebar .sidebar-footer    { display: none !important; }

  /* ── TOPBAR: ocultar completamente (barra vacía) ── */
  .main > .topbar { display: none !important; }

  /* ── MAIN: sin margen lateral, margen top = alto del header ── */
  .main {
    margin-left: 0 !important;
    margin-top: 94px !important;
    width: 100% !important;
  }

  /* ── VISTAS: padding, columna única ── */
  .view {
    padding: 14px 12px !important;
    gap: 14px !important;
  }

  /* ── KPI GRID: 2 × 2 ── */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi        { padding: 14px 12px !important; }
  .kpi-lbl    { font-size: 8px !important; margin-bottom: 6px !important; }
  .kpi-val    { font-size: 26px !important; }
  .kpi-sub    { font-size: 9px !important; }

  /* ── DOS COLUMNAS → UNA ── */
  .row2, .row31 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Panel interno de registro (grid inline) → columna */
  #view-registrar .pb > div[style*="grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ── PANELES ── */
  .ph { padding: 12px 14px !important; }
  .pb { padding: 12px 14px !important; }

  /* ── USUARIOS ── */
  .user-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── HISTORIAL: scroll horizontal ── */
  #view-historial .pb { overflow-x: auto !important; padding: 0 !important; }

  /* ── TOAST: esquina inferior derecha, aparece solo cuando hay notif ── */
  .toast {
    bottom: 16px !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    transform: translateY(120%) !important;
    transition: transform .3s ease !important;
    z-index: 400 !important;
  }
  .toast.show { transform: translateY(0) !important; }
}

@media (max-width: 390px) {
  .kpi-val { font-size: 20px !important; }
  .user-grid { grid-template-columns: 1fr !important; }
  .sidebar .nav-item { font-size: 11px !important; padding: 6px 10px !important; }
}