/* ══════════════════════════════════════════════════
   SISDEL — CSS compartido (variables, reset, login)
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0b0d17;
    --bg2:       #111325;
    --bg3:       #181b2e;
    --card:      #1a1d30;
    --border:    #2a2d45;
    --red:       #ff3b3b;
    --orange:    #ff8c00;
    --green:     #00d68f;
    --blue:      #4da6ff;
    --purple:    #7c3aed;
    --text:      #e8eaf0;
    --muted:     #6b7294;
    --radius:    14px;
    --shadow:    0 25px 60px rgba(0,0,0,.55);
}

html, body {
    height: 100%; font-family: 'Inter', sans-serif;
    background: var(--bg); color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

/* ── PANTALLA LOGIN ──────────────────────────────── */
.login-screen {
    min-height: 100vh; display: flex;
    align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.login-bg { position: absolute; inset: 0; pointer-events: none; }
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .13;
    animation: drift 9s ease-in-out infinite alternate;
}
.orb1 { width:500px;height:500px;background:#ff3b3b;top:-150px;left:-150px; }
.orb2 { width:400px;height:400px;background:#4da6ff;bottom:-100px;right:-100px;animation-delay:-4s; }
.orb3 { width:320px;height:320px;background:#7c3aed;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-8s; }
@keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,20px) scale(1.1)} }
/* orb3 drift needs no transform reset — ok for subtle effect */

.login-card {
    position: relative; z-index: 10;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 24px; padding: 2.5rem 2.5rem 2rem;
    width: min(440px, 92vw); box-shadow: var(--shadow);
}

.login-logo {
    text-align: center; margin-bottom: 2rem;
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
}
.logo-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,59,59,.12); border: 2px solid rgba(255,59,59,.3);
    display: flex; align-items: center; justify-content: center;
}
.login-logo h1 { font-size: 1.55rem; font-weight: 900; color: #fff; }
.login-logo p  { font-size: .82rem; color: var(--muted); }

.login-label {
    display: block; font-size: .75rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: .45rem;
}
.login-input {
    width: 100%; background: var(--bg3); border: 2px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem; color: var(--text);
    font-family: 'JetBrains Mono', monospace; font-size: 1.4rem;
    letter-spacing: 8px; text-align: center; text-transform: uppercase;
    transition: border-color .2s;
}
.login-input:focus { outline: none; border-color: var(--red); }
.login-hint { font-size: .75rem; color: var(--muted); text-align: center; margin: .4rem 0 1.2rem; }

.btn-ingresar {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem;
    background: linear-gradient(135deg, var(--red), #ff6b35);
    border: none; border-radius: var(--radius); padding: .95rem;
    color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 24px rgba(255,59,59,.35);
    transition: transform .15s, box-shadow .2s;
}
.btn-ingresar:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(255,59,59,.5); }
.btn-ingresar:active { transform:translateY(0); }

.login-error {
    margin-top: .75rem; background: rgba(255,59,59,.12);
    border: 1px solid rgba(255,59,59,.4); border-radius: 10px;
    padding: .6rem 1rem; color: var(--red);
    font-size: .83rem; text-align: center;
}
.login-footer { text-align: center; margin-top: 1.5rem; }
.login-link {
    color: var(--blue); text-decoration: none; font-size: .82rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.login-link:hover { text-decoration: underline; }

/* ── SHARED UTILITIES ────────────────────────────── */
.btn   { border: none; border-radius: var(--radius); padding: .6rem 1.1rem; font-weight: 700; font-size: .85rem; cursor: pointer; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn-primary  { background: linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; }
.btn-danger   { background: rgba(255,59,59,.2); border:1px solid rgba(255,59,59,.4); color:var(--red); }
.btn-success  { background: rgba(0,214,143,.2); border:1px solid rgba(0,214,143,.4); color:var(--green); }
.btn-neutral  { background:var(--bg3); border:1px solid var(--border); color:var(--text); }

.badge { display:inline-block; padding:.2rem .65rem; border-radius:20px; font-size:.7rem; font-weight:700; }
.badge-ACTIVA       { background:rgba(255,59,59,.2);   color:var(--red); }
.badge-EN_CAMINO    { background:rgba(255,140,0,.2);  color:var(--orange); }
.badge-ATENDIDA     { background:rgba(0,214,143,.2);  color:var(--green); }
.badge-FALSA_ALARMA { background:rgba(107,114,148,.2);color:var(--muted); }
.badge-activa-inst  { background:rgba(0,214,143,.15); color:var(--green); }
.badge-inactiva-inst{ background:rgba(107,114,148,.15);color:var(--muted); }

.section-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.25rem; border-bottom:1px solid var(--border);
}
.section-hdr h2 { font-size:.95rem; font-weight:700; }

.tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.tbl thead th {
    position:sticky; top:0; background:var(--bg2);
    padding:.6rem .75rem; text-align:left; font-size:.7rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap;
}
.tbl tbody td { padding:.65rem .75rem; border-bottom:1px solid rgba(42,45,69,.5); vertical-align:middle; }
.tbl tbody tr:hover td { background:rgba(255,255,255,.02); }

.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.empty-state p { font-size:.9rem; margin-top:.5rem; }

.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    display:flex; align-items:center; justify-content:center;
    z-index:500; backdrop-filter:blur(5px);
}
.modal-box {
    background:var(--card); border:1px solid var(--border);
    border-radius:20px; width:min(520px,94vw);
    max-height:88vh; display:flex; flex-direction:column;
    box-shadow:var(--shadow);
}
.modal-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
}
.modal-hdr h3 { font-size:1rem; font-weight:700; }
.modal-close { background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; gap:.5rem; flex-wrap:wrap; }

.form-field { margin-bottom:1rem; }
.form-field label { display:block; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.form-input {
    width:100%; background:var(--bg3); border:1px solid var(--border);
    border-radius:10px; padding:.7rem .9rem; color:var(--text); font-size:.9rem;
    transition:border-color .2s;
}
.form-input:focus { outline:none; border-color:var(--blue); }