/* =====================================================================
   Emergencias Venezuela — Sismo 2026
   Tema: Océano Profundo · Paleta #03045E → #CAF0F8
   ===================================================================== */

/* ── Variables de color ─────────────────────────────────────────────── */
:root {
    --navy:        #03045E;
    --navy-mid:    #023E8A;
    --navy-mid2:   #0077B6;
    --navy-accent: #0096C7;
    --navy-bright: #00B4D8;
    --navy-sky:    #48CAE4;
    --navy-soft:   #CAF0F8;
    --navy-pale:   #ADE8F4;
    --navy-bg:     #EEF9FD;
    --navy-border: #90E0EF;
    --red-em:      #CC1133;
    --red-em-h:    #AA0E28;
}

/* ── Tipografía ─────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--navy-bg);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    color: #1e293b;
}

/* ── 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: #ffffff;
    border-bottom: 3px solid var(--navy);
}

/* ── Botón urgente (pulsante) ───────────────────────────────────────── */
@keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(204,17,51,.45); }
    50%      { box-shadow: 0 0 0 10px rgba(204,17,51,0); }
}
.btn-urgente { animation: pulse-glow 2.4s infinite; }

/* ── Scroll hint ────────────────────────────────────────────────────── */
@keyframes scroll-hint {
    0%   { opacity: 0; transform: translateX(0); }
    20%  { opacity: 1; }
    60%  { opacity: 1; transform: translateX(6px); }
    100% { opacity: 0; transform: translateX(10px); }
}
.scroll-wrap { position: relative; }
.scroll-wrap::after {
    content: '›';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--navy-accent);
    pointer-events: none;
    animation: scroll-hint 1.6s ease-in-out 0.8s 3 forwards;
    background: linear-gradient(to right, transparent, var(--navy-bg) 60%);
    padding: 2px 6px 2px 20px;
    border-radius: 0 8px 8px 0;
    line-height: 1;
}

/* ── Tabs principales ───────────────────────────────────────────────── */
.tab-btn { transition: all .2s ease; }
.tab-btn.active {
    background: var(--navy-mid2);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0,119,182,.35);
}
.tab-btn:not(.active) {
    background: #fff;
    color: #374151;
    border: 1px solid var(--navy-border);
}

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

/* ── Cards emergencia ───────────────────────────────────────────────── */
.e-card { transition: box-shadow .15s, transform .1s; background: #fff; }
.e-card:active  { transform: scale(.99); }
.e-card:hover   { box-shadow: 0 4px 16px rgba(0,119,182,.15); }
.e-card .num-display { color: var(--navy-mid); font-weight: 900; }

/* ── Iconos en cards de emergencia ─────────────────────────────────── */
.e-card .e-icon-wrap {
    background: var(--navy-soft);
    color: var(--navy-mid2);
}

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

/* ── Cards desaparecidos ────────────────────────────────────────────── */
.d-card            { border-left: 3px solid var(--red-em); }
.d-card.encontrado { border-left-color: #16a34a; }

/* ── Filtros pill ───────────────────────────────────────────────────── */
.pill { transition: all .2s; cursor: pointer; }
.pill.active {
    background: var(--navy-mid2);
    color: #fff;
    border-color: transparent;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(0,150,199,.15);
}

/* ── Admin: topbar ──────────────────────────────────────────────────── */
.admin-topbar {
    background: var(--navy);
    color: #f8fafc;
}

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

/* ── 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(3px); }

/* ── Aviso info ─────────────────────────────────────────────────────── */
.aviso-info {
    background: var(--navy-soft);
    border: 1px solid var(--navy-border);
    color: var(--navy-mid);
}

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