/* =====================================================================
   Vitalis - hoja de estilos base (complementa a Bootstrap 5.3 por CDN)
   Soporta tema claro y oscuro vía [data-bs-theme] en <html>.
   ===================================================================== */
:root {
    --vit-teal: #0d9488;
    --vit-teal-600: #0f766e;
    --vit-teal-300: #5eead4;
    --vit-navy: #0f172a;
    --vit-navy-700: #1e293b;
    --vit-coral: #ef4444;
    --vit-amber: #f59e0b;
    --vit-radius: 16px;

    /* Tokens semánticos - TEMA CLARO */
    --vit-bg: #f6f8fb;
    --vit-surface: #ffffff;
    --vit-surface-muted: #f8fafc;
    --vit-border: rgba(15, 23, 42, .08);
    --vit-text: #1f2937;
    --vit-text-muted: #64748b;
    --vit-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
    --vit-shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .35);
    --vit-alert-emergencia: #fff5f5;

    --nivel-1-bg: #fee2e2; --nivel-1-fg: #b91c1c;
    --nivel-2-bg: #ffedd5; --nivel-2-fg: #c2410c;
    --nivel-3-bg: #fef9c3; --nivel-3-fg: #a16207;
    --nivel-4-bg: #dcfce7; --nivel-4-fg: #15803d;
    --nivel-5-bg: #e0f2fe; --nivel-5-fg: #0369a1;
}

/* Tokens semánticos - TEMA OSCURO */
:root[data-bs-theme="dark"] {
    --vit-bg: #0b1120;
    --vit-surface: #131c2e;
    --vit-surface-muted: #1b2740;
    --vit-border: rgba(148, 163, 184, .16);
    --vit-text: #e2e8f0;
    --vit-text-muted: #94a3b8;
    --vit-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
    --vit-shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .6);
    --vit-alert-emergencia: #2a1518;

    --nivel-1-bg: #4c1d1d; --nivel-1-fg: #fca5a5;
    --nivel-2-bg: #4a2a12; --nivel-2-fg: #fdba74;
    --nivel-3-bg: #423910; --nivel-3-fg: #fde047;
    --nivel-4-bg: #14361f; --nivel-4-fg: #86efac;
    --nivel-5-bg: #14304a; --nivel-5-fg: #7dd3fc;

    /* Ajustes finos a variables de Bootstrap para que los grises se sientan Vitalis */
    --bs-body-bg: var(--vit-bg);
    --bs-body-color: var(--vit-text);
    --bs-secondary-color: var(--vit-text-muted);
    --bs-tertiary-bg: var(--vit-surface-muted);
    --bs-border-color: var(--vit-border);
    --bs-emphasis-color: #f1f5f9;
}
:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .list-group,
:root[data-bs-theme="dark"] .modal-content,
:root[data-bs-theme="dark"] .dropdown-menu { --bs-body-bg: var(--vit-surface); }

/* Botones e insignias "light" adaptados al tema oscuro */
:root[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--vit-surface-muted);
    --bs-btn-border-color: var(--vit-border);
    --bs-btn-color: var(--vit-text);
    --bs-btn-hover-bg: #26324e;
    --bs-btn-hover-border-color: var(--vit-border);
    --bs-btn-hover-color: var(--vit-text);
    --bs-btn-active-bg: #26324e;
    --bs-btn-active-color: var(--vit-text);
}
:root[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--vit-surface-muted) !important;
    color: var(--vit-text) !important;
}
:root[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--vit-surface-muted) !important; }
:root[data-bs-theme="dark"] .border { border-color: var(--vit-border) !important; }

* { scroll-behavior: smooth; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--vit-text);
    background: var(--vit-bg);
}

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    letter-spacing: -.02em;
}

.text-teal { color: var(--vit-teal) !important; }
.bg-teal { background-color: var(--vit-teal) !important; }
.bg-navy { background-color: var(--vit-navy) !important; }
.border-teal { border-color: var(--vit-teal) !important; }
.text-navy { color: var(--vit-navy) !important; }
:root[data-bs-theme="dark"] .text-navy { color: #cbd5e1 !important; }

a { text-decoration: none; }

.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; }
.btn-lg { padding: .85rem 2rem; }
.btn-teal { background: var(--vit-teal); border-color: var(--vit-teal); color: #fff; }
.btn-teal:hover { background: var(--vit-teal-600); border-color: var(--vit-teal-600); color: #fff; }
.btn-outline-teal { border-color: var(--vit-teal); color: var(--vit-teal); }
.btn-outline-teal:hover { background: var(--vit-teal); color: #fff; }
.btn-coral { background: var(--vit-coral); border-color: var(--vit-coral); color: #fff; }
.btn-coral:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-navy { background: var(--vit-navy); border-color: var(--vit-navy); color: #fff; }
.btn-navy:hover { background: var(--vit-navy-700); border-color: var(--vit-navy-700); color: #fff; }
:root[data-bs-theme="dark"] .btn-navy { background: #334155; border-color: #334155; }
:root[data-bs-theme="dark"] .btn-navy:hover { background: #475569; border-color: #475569; }

.card { border: 1px solid var(--vit-border); border-radius: var(--vit-radius); box-shadow: var(--vit-shadow); background: var(--vit-surface); }
.card-soft { background: var(--vit-surface); }

.badge-nivel-1 { background: var(--nivel-1-bg); color: var(--nivel-1-fg); }
.badge-nivel-2 { background: var(--nivel-2-bg); color: var(--nivel-2-fg); }
.badge-nivel-3 { background: var(--nivel-3-bg); color: var(--nivel-3-fg); }
.badge-nivel-4 { background: var(--nivel-4-bg); color: var(--nivel-4-fg); }
.badge-nivel-5 { background: var(--nivel-5-bg); color: var(--nivel-5-fg); }

/* ---------- Toggle de tema ---------- */
.btn-tema { line-height: 1; }
.btn-tema .bi { font-size: 1.05rem; }
:root[data-bs-theme="dark"] .btn-tema .bi-sun-fill,
:root:not([data-bs-theme="dark"]) .btn-tema .bi-moon-stars-fill { display: inline-block; }
:root[data-bs-theme="dark"] .btn-tema .bi-moon-stars-fill,
:root:not([data-bs-theme="dark"]) .btn-tema .bi-sun-fill { display: none; }

/* ---------- Landing / hero ---------- */
.hero {
    position: relative;
    background: radial-gradient(1200px 600px at 15% -10%, #134e4a 0%, transparent 55%),
                radial-gradient(1000px 500px at 100% 0%, #0e7490 0%, transparent 50%),
                linear-gradient(180deg, #0b1220 0%, #0f172a 60%, #0f172a 100%);
    color: #e2e8f0;
    overflow: hidden;
}
.hero .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    animation: floaty 14s ease-in-out infinite;
}
.hero .blob-1 { width: 420px; height: 420px; background: #14b8a6; top: -120px; left: -80px; }
.hero .blob-2 { width: 360px; height: 360px; background: #0891b2; bottom: -140px; right: -60px; animation-delay: -5s; }
.hero .blob-3 { width: 260px; height: 260px; background: #f59e0b; top: 40%; right: 20%; opacity: .25; animation-delay: -9s; }

@keyframes floaty {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(-30px) translateX(20px) scale(1.06); }
}

.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(94, 234, 212, .12);
    border: 1px solid rgba(94, 234, 212, .3);
    color: var(--vit-teal-300);
    padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}

.glass {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    border-radius: var(--vit-radius);
}

.pulse-dot { position: relative; }
.pulse-dot::before {
    content: ""; position: absolute; inset: -6px; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: pulse 2s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.stat-num { font-family: "Sora", sans-serif; font-size: 2.4rem; font-weight: 700; color: #fff; }

.choice-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border: 1px solid var(--vit-border);
}
.choice-card:hover { transform: translateY(-8px); box-shadow: var(--vit-shadow-lg); border-color: var(--vit-teal-300); }
.choice-icon {
    width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
    font-size: 1.7rem; color: #fff;
}

.feature-icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: #ecfeff; color: var(--vit-teal-600); font-size: 1.3rem;
}
:root[data-bs-theme="dark"] .feature-icon { background: #10382f; color: var(--vit-teal-300); }

.urgency-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--vit-surface); border: 1px solid var(--vit-border);
    border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .9rem;
    box-shadow: var(--vit-shadow);
}

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.1fr 1fr; } }
.auth-side {
    background: radial-gradient(800px 400px at 20% 0%, #134e4a 0, transparent 50%),
                linear-gradient(160deg, #0b1220, #0f172a);
    color: #cbd5e1; position: relative; overflow: hidden;
}
.auth-card { max-width: 440px; width: 100%; }
.form-control, .form-select { border-radius: 12px; padding: .7rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--vit-teal-300); box-shadow: 0 0 0 .2rem rgba(94, 234, 212, .25); }
.input-group-text { border-radius: 12px 0 0 12px; background: var(--vit-surface-muted); }

/* ---------- Panel ---------- */
.panel-body { background: var(--vit-bg); min-height: 100vh; }
.sidebar {
    width: 264px; background: var(--vit-navy); color: #cbd5e1; position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease;
    border-right: 1px solid rgba(148, 163, 184, .1);
}
.sidebar .brand { padding: 1.2rem 1.4rem; font-family: "Sora", sans-serif; font-weight: 700; color: #fff; font-size: 1.25rem; }
.sidebar .nav-link {
    color: #94a3b8; border-radius: 10px; margin: .12rem .7rem; padding: .6rem .85rem;
    display: flex; align-items: center; gap: .7rem; font-weight: 500; font-size: .93rem;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sidebar .nav-link.active { color: #fff; background: var(--vit-teal); }
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); }

.content { margin-left: 264px; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .content { margin-left: 0; }
}

.topbar {
    background: var(--vit-surface); border-bottom: 1px solid var(--vit-border);
    padding: .8rem 1.4rem; position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: 1rem;
}

.kpi-card { border-radius: var(--vit-radius); padding: 1.2rem 1.4rem; background: var(--vit-surface); }
.kpi-card .kpi-num { font-family: "Sora", sans-serif; font-size: 2rem; font-weight: 700; }
.kpi-card .kpi-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; }

.emergencia-alert {
    border-left: 5px solid var(--vit-coral); background: var(--vit-alert-emergencia);
}

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--vit-surface-muted); display: grid; place-items: center; color: var(--vit-text-muted); font-weight: 700; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.6rem; }

.notif-dot {
    position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
    background: var(--vit-coral); color: #fff; border-radius: 50%; font-size: .65rem;
    display: grid; place-items: center; font-weight: 700; border: 2px solid var(--vit-surface);
}

.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.list-tick li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.list-tick li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--vit-teal); }

/* Botón de WhatsApp */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #062e16; }
.btn-whatsapp:hover { background: #1eb455; border-color: #1eb455; color: #062e16; }

/* Barra de acción fija al pie (formularios largos). Va al ancho de <main>. */
.barra-guardar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--vit-bg);
    border-top: 1px solid var(--vit-border);
    box-shadow: 0 -10px 24px -14px rgba(15, 23, 42, .25);
    padding: .9rem 1rem;
    margin: 1.2rem -1rem 0;
}
@media (min-width: 992px) {
    .barra-guardar { padding: .9rem 1.5rem; margin: 1.2rem -1.5rem 0; }
}