/* ==========================================================================
   ELECTROVIGIA - Theme (based on estilos/app.css design system)
   Single base stylesheet loaded on every page. Page-specific files
   (homepage.css, podcast.css, admin.css) build on top of these tokens
   and classes — they should not redefine colors or shared components.
   ========================================================================== */

:root {
    /* Marca / paleta (estilos/app.css) */
    --azul: #1d4e89;
    --azul-osc: #143a68;
    --gris: #f4f6f8;
    --borde: #d8dee5;
    --texto: #26313c;
    --ok: #1b5e20;
    --err: #c62828;
    --warn: #7a3e02;
    --muted: #4c525b;

    /* Compat: nombres usados históricamente por el sitio (tema oscuro "Starlink"),
       remapeados aquí para que cualquier CSS/estilo en línea que aún los use
       (mientras se retiran uno a uno) se vea correcto sobre el tema claro. */
    --color-primary: var(--azul);
    --color-primary-dark: var(--azul-osc);
    --color-primary-light: #3f6ea8;
    --color-secondary: var(--azul-osc);
    --color-secondary-dark: var(--azul-osc);
    --color-warning: var(--warn);
    --color-error: var(--err);
    --color-success: var(--ok);

    /* Escala de grises: en el tema oscuro iba de negro (fondo) a blanco (texto);
       en el tema claro se invierte: los "fondos oscuros" pasan a superficies
       claras y los "textos claros" pasan a texto oscuro legible. */
    --color-black: var(--gris);
    --color-black-light: #ffffff;
    --color-gray-900: #ffffff;
    --color-gray-800: #ffffff;
    --color-gray-850: #ffffff;
    --color-gray-750: var(--gris);
    --color-gray-700: var(--gris);
    --color-gray-600: var(--muted);
    --color-gray-500: var(--muted);
    --color-gray-400: var(--muted);
    --color-gray-300: var(--texto);
    --color-gray-200: var(--texto);
    --color-gray-100: var(--gris);
    --color-white: var(--texto);

    --gradient-primary: var(--azul);
    --gradient-hero: var(--gris);
    --gradient-card: #ffffff;
    --shadow-glow: none;
    --shadow-glow-secondary: none;
    --shadow-2xl: var(--shadow-xl);

    /* Tipografía (system-ui, sin Google Fonts) */
    --font-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 4rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Bordes redondeados */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Sombras (sutiles, sin glow neón) */
    --shadow-sm: 0 1px 2px 0 rgba(20, 30, 45, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(20, 30, 45, 0.08), 0 2px 4px -1px rgba(20, 30, 45, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(20, 30, 45, 0.08), 0 4px 6px -2px rgba(20, 30, 45, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(20, 30, 45, 0.08), 0 10px 10px -5px rgba(20, 30, 45, 0.04);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-mobile-menu: 1060;
    --z-tooltip: 1070;

    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1440px;
}

/* ---- Reset y base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; width: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--texto);
    background: var(--gris);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
    color: var(--azul-osc);
}

h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }

@media (max-width: 768px) {
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
    h4 { font-size: var(--font-size-xl); }
}

p { margin-bottom: var(--space-4); color: var(--texto); line-height: var(--line-height-relaxed); }

a { color: var(--azul); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--azul-osc); text-decoration: underline; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 1200px) { .container { max-width: 100%; padding: 0 var(--space-5); } }
@media (max-width: 768px) { .container { padding: 0 var(--space-4); } }
@media (max-width: 480px) { .container { padding: 0 var(--space-3); } }

/* ---- Page loader ---- */
.page-loader {
    position: fixed; inset: 0; background: var(--gris);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-logo img { width: 64px; height: auto; margin-bottom: var(--space-4); }
.loader-spinner {
    width: 40px; height: 40px; border: 3px solid var(--borde);
    border-top: 3px solid var(--azul); border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }

/* ==========================================================================
   Topbar + sidenav (patrón estilos/app.css) — compartido por todo el sitio,
   público y admin.
   ========================================================================== */
.topbar {
    display: flex; align-items: center; gap: .8rem; background: var(--azul);
    color: #fff; padding: .55rem 1rem; position: sticky; top: 0; z-index: var(--z-fixed);
    box-shadow: var(--shadow-sm); height: 52px; box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.brand:hover { color: #fff; text-decoration: none; }
.brand img { height: 28px; width: auto; }
.menu-btn { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; display: none; padding: 0 .3rem; }
.topbar-search-btn { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .9; padding: .3rem; margin-left: auto; }
.topbar-search-btn:hover { opacity: 1; }
.userbox { display: flex; gap: 1rem; align-items: center; font-size: .85rem; }
.userbox a { color: #fff; text-decoration: none; }
.userbox a:hover { text-decoration: underline; }
.userbox .salir { color: #ffd9d9; }
.userbox .btn-registro { background: #fff; color: var(--azul-osc); padding: .3rem .8rem; border-radius: var(--radius-md); font-weight: 600; }
.userbox .btn-registro:hover { background: var(--gris); text-decoration: none; }
.userbox .verification-badge { color: #ffd27a; }

/* ---- Sidenav ---- */
.sidenav {
    position: fixed; top: 52px; left: 0; bottom: 0; width: 240px; overflow-y: auto;
    background: #fff; border-right: 1px solid var(--borde); padding: .6rem 0; z-index: var(--z-sticky);
}
.sidenav .nav-item {
    display: flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem;
    color: var(--texto); text-decoration: none; border-left: 3px solid transparent; font-size: .92rem;
}
.sidenav .nav-item:hover { background: var(--gris); border-left-color: var(--azul); text-decoration: none; }
.sidenav .nav-item.active { background: var(--gris); border-left-color: var(--azul); color: var(--azul-osc); font-weight: 600; }
.sidenav .nav-item i { width: 18px; text-align: center; color: var(--azul); }
.sidenav .nav-depto summary {
    padding: .6rem 1.2rem; font-weight: 700; cursor: pointer; color: var(--azul-osc);
    text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.sidenav .nav-depto summary::-webkit-details-marker { display: none; }
.sidenav .nav-depto summary::after { content: '\276F'; transform: rotate(90deg); transition: transform .2s; font-size: .8rem; color: var(--muted); }
.sidenav .nav-depto[open] summary::after { transform: rotate(-90deg); }
.sidenav .nav-depto .nav-item { padding-left: 2.2rem; font-size: .88rem; }
.sidenav .sidenav-divider { border: none; border-top: 1px solid var(--borde); margin: .6rem 1.2rem; }

.contenido { margin-left: 240px; padding: 1.6rem 1.8rem 3rem; max-width: 1300px; }

@media (max-width: 820px) {
    .menu-btn { display: block; }
    .sidenav {
        transform: translateX(-100%); transition: transform .2s ease; z-index: var(--z-mobile-menu);
        box-shadow: 2px 0 8px rgba(20,30,45,.15);
    }
    .sidenav.abierto { transform: translateX(0); }
    .contenido { margin-left: 0; padding: 1.2rem 1rem 3rem; }
    .userbox .uname { display: none; }
}

/* ---- Búsqueda ---- */
.search-modal {
    position: fixed; inset: 0; z-index: var(--z-modal); display: flex;
    align-items: flex-start; justify-content: center; padding-top: 10vh;
    opacity: 0; visibility: hidden; transition: all var(--transition-normal);
}
.search-modal.active { opacity: 1; visibility: visible; }
.search-modal-backdrop { position: absolute; inset: 0; background: rgba(20,30,45,0.5); }
.search-modal-content {
    position: relative; background: #fff; border: 1px solid var(--borde);
    border-radius: var(--radius-xl); width: 90%; max-width: 600px; max-height: 80vh;
    overflow: hidden; box-shadow: var(--shadow-xl);
    transform: translateY(-20px); transition: transform var(--transition-normal);
}
.search-modal.active .search-modal-content { transform: translateY(0); }
.search-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6); border-bottom: 1px solid var(--borde); }
.search-modal-header h3 { margin: 0; font-size: var(--font-size-xl); color: var(--azul-osc); }
.search-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-md); }
.search-modal-close:hover { color: var(--texto); background: var(--gris); }
.search-modal-body { padding: var(--space-6); }
.search-form { margin-bottom: var(--space-6); }
.search-input-group { position: relative; margin-bottom: var(--space-4); }
.search-input { width: 100%; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); background: #fff; border: 1px solid var(--borde); border-radius: var(--radius-lg); color: var(--texto); font-size: var(--font-size-lg); }
.search-input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,137,0.12); }
.search-submit { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--azul); border: none; border-radius: var(--radius-lg); color: #fff; cursor: pointer; }
.search-submit:hover { background: var(--azul-osc); }
.search-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.search-filter { display: flex; align-items: center; cursor: pointer; }
.search-filter input[type="radio"] { display: none; }
.search-filter span { padding: var(--space-2) var(--space-4); background: var(--gris); border: 1px solid var(--borde); border-radius: var(--radius-lg); color: var(--texto); font-size: var(--font-size-sm); }
.search-filter input[type="radio"]:checked + span { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ==========================================================================
   Botones, tarjetas, badges, formularios, tablas (patrones estilos/app.css)
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--space-3) var(--space-6); font-family: inherit; font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium); text-decoration: none; border: none;
    border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast);
}
.btn i { margin-right: var(--space-2); }
.btn-primary, .btn:not([class*="btn-"]) { background: var(--azul); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--azul-osc); text-decoration: none; color: #fff; }
.btn-secondary, .btn-sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.btn-secondary:hover, .btn-sec:hover { background: var(--gris); text-decoration: none; }
.btn-outline { background: transparent; color: var(--azul); border: 1px solid var(--azul); }
.btn-outline:hover { background: var(--azul); color: #fff; text-decoration: none; }
.btn-sm, .btn-peq { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }
.btn-large { padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); }

.card { background: #fff; border: 1px solid var(--borde); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); }
.card h2, .card h3 { font-size: 1rem; margin: 0 0 var(--space-3); color: var(--azul-osc); }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; }
.badge-capturado { background: #fff4e0; color: var(--warn); }
.badge-verificado { background: #e3efff; color: var(--azul); }
.badge-revisado, .badge-ok, .badge-success { background: #e6f4e6; color: var(--ok); }
.badge-corregido, .badge-error { background: #fdecea; color: var(--err); }

form.captura { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
form.captura .campo-full { grid-column: 1 / -1; }
label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: var(--space-1); color: var(--texto); }
input, select, textarea {
    width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--borde);
    border-radius: var(--radius-md); font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,137,0.1); }
input:disabled, select:disabled, textarea:disabled {
    background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 6px, #e6e6e6 6px, #e6e6e6 12px);
    color: #999;
}

.tabla-scroll { overflow-x: auto; }
table.bitacora, table.tabla { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.9rem; }
.bitacora th, .tabla th { background: var(--azul); color: #fff; padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; }
.bitacora td, .tabla td { border-bottom: 1px solid var(--borde); padding: var(--space-2) var(--space-3); }

/* ---- Mensajes flash ---- */
.flash-messages { position: fixed; top: 64px; right: var(--space-6); z-index: var(--z-tooltip); max-width: 400px; }
.flash-message { display: flex; align-items: center; padding: var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-lg); animation: slideInRight 0.3s ease; box-shadow: var(--shadow-md); }
.flash-message.flash-success { background: #e6f4e6; color: var(--ok); border: 1px solid #b9dcb9; }
.flash-message.flash-error { background: #fdecea; color: var(--err); border: 1px solid #f3bcbc; }
.flash-message.flash-info, .flash-message.flash-warning { background: #fff4e0; color: var(--warn); border: 1px solid #f2d9a6; }
.flash-content { display: flex; align-items: center; flex: 1; }
.flash-content i { margin-right: var(--space-3); font-size: 1.2em; }
.flash-close { background: none; border: none; color: inherit; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); opacity: 0.7; }
.flash-close:hover { opacity: 1; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.back-to-top {
    position: fixed; bottom: var(--space-8); right: var(--space-8); width: 50px; height: 50px;
    background: var(--azul); border: none; border-radius: 50%; color: #fff; cursor: pointer;
    opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: var(--z-fixed);
    box-shadow: var(--shadow-lg);
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--azul-osc); transform: translateY(-3px); }

/* ==========================================================================
   Pie de página (barra delgada, congruente con el topbar)
   ========================================================================== */
.footer { background: var(--azul-osc); color: rgba(255,255,255,0.85); margin-left: 240px; }
@media (max-width: 820px) { .footer { margin-left: 0; } }
.footer-container { max-width: 1300px; margin: 0 auto; padding: var(--space-4) var(--space-6); }
.footer-slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.footer-brand { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.footer-brand img { height: 24px; }
.footer-properties { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-properties a { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.footer-properties a:hover { color: #fff; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 0.8rem; }
.footer-legal a { color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: #fff; }
.footer-legal .separator { color: rgba(255,255,255,0.4); margin: 0 var(--space-2); }

/* ==========================================================================
   Encabezado de página (patrón plano de estilos/app.css, sin foto/gradiente)
   ========================================================================== */
.page-intro { padding: var(--space-8) 0 var(--space-6); max-width: 1400px; margin: 0 auto; }
.titulo-pag { font-size: 1.9rem; margin: 0 0 var(--space-3); color: var(--azul-osc); }
.page-lead { font-size: 1.05rem; color: var(--texto); max-width: 760px; line-height: var(--line-height-relaxed); margin-bottom: var(--space-5); }
.page-intro-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.stat-strip { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.stat-chip { background: var(--gris); border: 1px solid var(--borde); border-radius: var(--radius-full); padding: 0.4rem 1rem; font-size: 0.85rem; color: var(--texto); }
.stat-chip strong { color: var(--azul); }
.empty-line { color: var(--muted); font-style: italic; padding: var(--space-4) 0; margin: 0; }

/* ==========================================================================
   Hero base (extendido por homepage.css / page-specific styles)
   ========================================================================== */
.hero { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,30,45,0.55) 0%, rgba(20,30,45,0.35) 50%, rgba(20,30,45,0.6) 100%); }
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-16); align-items: center; min-height: 60vh; }
@media (max-width: 1024px) { .hero-container { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; padding: var(--space-8) var(--space-4); } }
.hero-title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-6); color: #fff; }
.hero-highlight { color: #9fc1ec; }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: var(--space-8); max-width: 600px; }
.hero-actions { display: flex; gap: var(--space-4); align-items: center; }
@media (max-width: 768px) { .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; } }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.text-primary { color: var(--azul); }
.text-gray, .text-muted { color: var(--muted); }
.text-white { color: #fff; }
.hidden { display: none; }
.visible { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 768px) { .hidden-mobile { display: none; } .visible-mobile { display: block; } }
@media (min-width: 769px) { .hidden-desktop { display: none; } .visible-desktop { display: block; } }

/* ---- Página de error ---- */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-8); }
.error-content h1 { font-size: 6rem; color: var(--azul); margin-bottom: var(--space-4); }
.error-content p { font-size: 1.25rem; margin-bottom: var(--space-8); }

@media print {
    .topbar, .sidenav, .page-loader, .footer, .back-to-top, .flash-messages { display: none !important; }
    .contenido { margin-left: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
}