/* =====================================================================
   Emergencias Venezuela — Sismo 2026
   Estilos compartidos entre index.php y admin.php
   Se complementa con Tailwind CSS (CDN)
   ===================================================================== */

/* ── Tipografía ─────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

/* ── Sin scrollbar visible en overflow-x ───────────────────────────── */
.no-scroll::-webkit-scrollbar { display: none; }
.no-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
    background: linear-gradient(160deg, #14532d 0%, #15803d 100%);
}

/* ── Botón urgente (pulsante) ───────────────────────────────────────── */
@keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
    50%      { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
}
.btn-urgente { animation: pulse-glow 2.2s infinite; }

/* ── Tabs principales ───────────────────────────────────────────────── */
.tab-btn { transition: all .2s ease; }
.tab-btn.active {
    background: #15803d;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(21,128,61,.35);
}
.tab-btn:not(.active) {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* ── Sub-tabs ───────────────────────────────────────────────────────── */
.sub-tab { transition: color .15s; }
.sub-tab.active {
    border-bottom: 2px solid #15803d;
    color: #15803d;
    font-weight: 700;
}
.sub-tab:not(.active) {
    border-bottom: 2px solid transparent;
    color: #6b7280;
}

/* ── Cards emergencia ───────────────────────────────────────────────── */
.e-card { transition: box-shadow .15s, transform .1s; }
.e-card:active  { transform: scale(.99); }
.e-card:hover   { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ── Tabla hospitalizados ───────────────────────────────────────────── */
.hosp-table tbody tr:nth-child(even) { background: #f8fafc; }
.hosp-table tbody tr:hover           { background: #f0fdf4; }
.row-fallecido                       { background: #1e293b !important; }
.row-fallecido td                    { color: #f1f5f9 !important; }

/* ── Cards desaparecidos ────────────────────────────────────────────── */
.d-card            { border-left: 3px solid #dc2626; }
.d-card.encontrado { border-left-color: #15803d; }

/* ── Filtros pill ───────────────────────────────────────────────────── */
.pill { transition: all .2s; cursor: pointer; }
.pill.active {
    background: #0f172a;
    color: #fff;
    border-color: transparent;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 3px rgba(21,128,61,.15);
}

/* ── Admin: sidebar/topbar ──────────────────────────────────────────── */
.admin-topbar {
    background: #0f172a;
    color: #f8fafc;
}

/* ── Admin: tabla registros ─────────────────────────────────────────── */
.admin-table tbody tr:nth-child(even) { background: #f8fafc; }
.admin-table tbody tr:hover           { background: #f0fdf4; }

/* ── Badges estado ──────────────────────────────────────────────────── */
.badge-desap {
    background: #fef2f2; color: #991b1b;
    border: 1px solid #fca5a5;
    font-size: .7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    white-space: nowrap;
}
.badge-enc {
    background: #f0fdf4; color: #166534;
    border: 1px solid #86efac;
    font-size: .7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    white-space: nowrap;
}

/* ── Alertas flash ──────────────────────────────────────────────────── */
.flash-ok    { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.flash-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay { backdrop-filter: blur(2px); }

/* ── Responsivo ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hosp-table th,
    .hosp-table td,
    .admin-table th,
    .admin-table td { padding: .35rem .5rem; font-size: .7rem; }
}