/* ============================================================
   index-redesign.css — Capa de identidad visual (global)
   Rediseño según skill redesign-existing-projects.
   Orden de prioridad: font → color → estados → layout → componentes.
   Trabaja SOBRE Bootstrap 5.3 (no lo reemplaza). Compatible con
   dark mode vía data-bs-theme.
   Usado por: base.html (global), index.html, provincia.html.
   ============================================================ */

/* ---------- 1. FONT SWAP ---------- */
/* Outfit para display/headings (carácter geométrico, no genérico).
   El body mantiene la pila system-ui de Bootstrap (rendimiento). */

:root {
    --de-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --de-accent: #0d6efd; /* hereda el azul Bootstrap como único acento */
}

/* Escala display para el hero: clamp() para fluidez sin media queries */
.de-display {
    font-family: var(--de-font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    text-wrap: balance;
}

.de-display-sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    max-width: 60ch;
    margin-inline: auto;
    text-wrap: pretty;
}

/* Headings de sección con presencia (peso 600, tracking negativo) */
h2, h3 {
    font-family: var(--de-font-display);
    letter-spacing: -0.02em;
}

h2 {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-wrap: balance;
}

/* ---------- 2. HERO ---------- */
/* 100dvh con fallback: evita el salto de viewport en iOS Safari */
.de-hero {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Superficies del hero: un solo acento, blur sutil, sin azul saturado */
.de-hero-card {
    background: rgba(13, 27, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Overlay del video: degradado radial (rompe el linear uniforme) */
.de-hero-overlay {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
}

/* Video de fondo: pausa si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .de-hero video {
        display: none;
    }
    .de-hero {
        background: #0d1b2a; /* superficie sólida de respaldo */
    }
}

/* ---------- 3. ESTADOS INTERACTIVOS ---------- */
/* Transiciones 200-300ms en todo elemento interactivo */
.btn,
.card,
.form-select,
.form-control,
.badge {
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Pressed feedback físico */
.btn:active {
    transform: scale(0.98);
}

/* Focus ring visible (accesibilidad) */
.btn:focus-visible,
.form-select:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--de-accent);
    outline-offset: 2px;
}

/* Hover de cards: elevación con sombra tintada (no negra genérica) */
.de-card-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.de-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(13, 27, 42, 0.12);
}

/* Reemplaza el zoom de imagen por elevación (más sobrio, menos "template") */
.hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-zoom:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(13, 27, 42, 0.12);
}

/* Scroll suave para anclas */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .btn,
    .card,
    .de-card-lift,
    .hover-zoom {
        transition: none;
    }
}

/* ---------- 4. CARDS DESTACADAS (grid asimétrico) ---------- */
/* Primera institución: destacada (col-span 2). Resto: normales.
   Grid CSS en vez de 3 columnas iguales de Bootstrap. */
.de-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .de-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* La primera card ocupa las 2 columnas: jerarquía visual clara */
    .de-featured-grid > .de-featured-item:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .de-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .de-featured-grid > .de-featured-item:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
}

/* Card de institución: sin borde, solo superficie + sombra tintada */
.de-inst-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 12px rgba(13, 27, 42, 0.08);
}

/* Botón "Ver detalles" anclado al fondo de la card */
.de-inst-card .card-body {
    display: flex;
    flex-direction: column;
}

.de-inst-card .card-body .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Badges cuadrados (no pill): menos genérico */
.de-badge-square {
    border-radius: 0.375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------- 5. PROVINCIAS ---------- */
/* Card de provincia: la card entera es clicable (stretched-link ya existe),
   se elimina el botón "Explorar" repetido. Título como link visual. */
.de-provincia-card {
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(13, 27, 42, 0.06);
}

.de-provincia-card .card-img-top {
    height: 140px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Zoom sutil de imagen al hover (solo la imagen, no toda la card) */
.de-provincia-card:hover .card-img-top {
    transform: scale(1.05);
}

.de-provincia-card .card-body {
    padding: 0.875rem 1rem;
}

.de-provincia-card .card-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Contador de instituciones (prueba social) */
.de-provincia-count {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ---------- 6. BANNER PROMOCIÓN ---------- */
/* Superficie sólida oscura con degradado radial sutil (sin imagen de fondo) */
.de-promo-banner {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 30%, #16283d 0%, #0d1b2a 70%);
    color: #fff;
}

.de-promo-banner > * {
    position: relative;
    z-index: 1;
}

/* Badges del banner: texto plano con separador, sin pills */
.de-promo-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9375rem;
}

.de-promo-points span::before {
    content: '—';
    margin-right: 0.5rem;
    opacity: 0.5;
}

/* ---------- 7. FOOTER (base.html) ---------- */
/* Superficie que sigue el tema: --bs-secondary-bg cambia con data-bs-theme
   (claro: #e9ecef / oscuro: #343a40). No usar --bs-dark (fijo #212529 en ambos). */
.de-footer {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-border-color);
}

.de-footer a {
    text-decoration: none;
}

.de-footer a:hover {
    text-decoration: underline;
}

/* ---------- 8. NAVBAR EN MODO CLARO ---------- */
/* dark-mode.js intercambia bg-dark→bg-light y navbar-dark→navbar-light en modo claro,
   pero los botones internos conservan estilos para fondo oscuro (btn-outline-light,
   .btn pelado) → texto blanco sobre fondo claro = invisibles.
   Fix CSS-first: re-estilizar los botones de la navbar cuando el tema es claro. */

[data-bs-theme="light"] .navbar {
    /* Los botones "pelados" (Inicio, Blog, Provincias) heredan --bs-btn-color
       del tema claro (oscuro); sobre navbar clara ahora sí contrastan. */
    --bs-navbar-color: rgba(33, 37, 41, 0.75);
}

[data-bs-theme="light"] .navbar .btn:not(.btn-primary):not(.btn-warning):not(.btn-secondary) {
    /* Botones outline/pelados: variante oscura equivalente a btn-outline-light pero invertida */
    --bs-btn-color: rgba(33, 37, 41, 0.85);
    --bs-btn-border-color: rgba(33, 37, 41, 0.4);
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: rgba(33, 37, 41, 0.08);
    --bs-btn-hover-border-color: rgba(33, 37, 41, 0.6);
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: rgba(33, 37, 41, 0.15);
    --bs-btn-active-border-color: rgba(33, 37, 41, 0.6);
}

[data-bs-theme="light"] .navbar .btn-outline-light {
    /* Redefinición explícita del outline-light en claro (equivalente a outline-dark) */
    --bs-btn-color: rgba(33, 37, 41, 0.85);
    --bs-btn-border-color: rgba(33, 37, 41, 0.4);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #212529;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
}

[data-bs-theme="light"] .navbar .navbar-toggler {
    /* Icono del toggler: navbar-light ya lo pinta oscuro, pero el color custom
       inline (rgba blanco) lo sobreescribe → forzar oscuro */
    color: rgba(33, 37, 41, 0.65);
    border-color: rgba(33, 37, 41, 0.25);
}

[data-bs-theme="light"] .navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* ---------- 9. PÁGINA DE PROVINCIA ---------- */
/* Componentes compartidos entre provincia.html y futuras páginas de cantón. */

/* Paneles de métricas: superficie neutra (compatible con dark mode vía data-bs-theme) */
.de-metricas {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

/* Tabla de pensiones: cifras alineadas verticalmente (tabular-nums) */
.de-table-pensiones {
    font-variant-numeric: tabular-nums;
}

.de-table-pensiones td {
    vertical-align: middle;
}

/* En móvil la tabla de pensiones desbordaba el viewport (372px en pantalla de 320px)
   por el padding y font-size por defecto de Bootstrap → scroll horizontal real en
   móviles. Reducir densidad tipográfica en pantallas pequeñas. */
@media (max-width: 575.98px) {
    .de-table-pensiones th,
    .de-table-pensiones td {
        padding: 0.35rem 0.4rem;
        font-size: 0.8125rem;
    }

    /* Salvavidas global móvil: cualquier tabla ancha se desplaza dentro de su
       contenedor (no arrastra todo el body). Solo en pantallas pequeñas. */
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Cards de accesibilidad económica: acento lateral en vez de card-header saturado */
.de-acceso-card {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(13, 27, 42, 0.06);
}

.de-acceso-card .de-acceso-destacado {
    font-family: var(--de-font-display);
    font-weight: 700;
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.75rem;
}

.de-acceso-publica {
    border-left: 4px solid var(--bs-primary);
}

.de-acceso-publica .de-acceso-destacado {
    color: var(--bs-primary);
}

.de-acceso-privada {
    border-left: 4px solid var(--bs-success);
}

.de-acceso-privada .de-acceso-destacado {
    color: var(--bs-success);
}

.de-acceso-fiscomisional {
    border-left: 4px solid var(--bs-warning);
}

.de-acceso-fiscomisional .de-acceso-destacado {
    color: var(--bs-warning);
}

/* ---------- 10. PÁGINA DE CANTÓN ---------- */
/* Migrado desde <style> inline en canton.html (mismos nombres de clase:
   el JS de dom-updates.js regenera filas/cards con estas clases). */

/* Institución promocionada: card móvil */
.promocion-activa-card {
    box-shadow: 0 0.75rem 1.5rem rgba(255, 193, 7, 0.25) !important;
    transition: transform 0.2s ease-in-out;
}

.promocion-activa-card:hover {
    transform: translateY(-2px);
}

/* Institución promocionada: fila de tabla desktop */
.promocion-activa-row {
    border-left-width: 6px !important;
}

.bg-warning-subtle {
    background-color: var(--bs-warning-bg-subtle, #fff8e1) !important;
}

/* Tabla de instituciones: cifras alineadas + cabecera sticky */
.de-tabla-canton {
    font-variant-numeric: tabular-nums;
}

.de-tabla-canton thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
}

/* Segunda fila de cabecera (Matrícula/Pensión) apilada bajo la primera */
.de-tabla-canton thead tr:nth-child(2) th {
    top: 3.25rem; /* altura aproximada de la primera fila de cabecera */
}

.de-tabla-canton tfoot th {
    background: var(--bs-tertiary-bg);
}

/* Scroll horizontal contenido (la tabla es ancha: 14 columnas) */
.de-tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color);
}

/* Contenedor de filtros: superficie neutra consistente con el resto del sitio */
.de-filtros-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

/* El .card-body interno pierde las variables --bs-card-spacer-* al no ser hijo
   de un .card real de Bootstrap → padding explícito (fix textos pegados al borde) */
.de-filtros-card .card-body {
    padding: 1rem;
}

/* Badges de niveles en cards móviles: cuadrados, consistentes con el sitio */
.de-canton-card .badge {
    border-radius: 0.375rem;
    font-weight: 600;
}

/* "Oferta intensiva" era bg-transparent (invisible): variante visible y sobria */
.de-canton-card .badge.bg-transparent {
    background-color: var(--bs-info-bg-subtle) !important;
    color: var(--bs-info-text-emphasis) !important;
    border: 1px solid var(--bs-info-border-subtle);
}

/* ---------- 11. PÁGINA ACERCA DE ---------- */
/* Avatar con borde de acento (reemplaza el círculo plano genérico) */
.de-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 1rem;
    border: 3px solid var(--bs-primary);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.15);
}

/* ---------- 12. PÁGINA PROMOCIONAR ---------- */
/* Hero: superficie sólida con degradado radial (misma familia que de-promo-banner) */
.de-promo-hero {
    background: radial-gradient(ellipse at 20% 30%, #16283d 0%, #0d1b2a 70%);
    color: #fff;
}

/* ---------- 13. PÁGINA DE INSTITUCIÓN ---------- */
/* Headers de cards: superficie neutra con borde inferior (antes bg-primary/success/
   info/warning saturados que gritaban). Los micro-iconos del título aportan el color. */
.de-inst-header {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    /* Padding explícito: al reemplazar .card-header por esta clase se pierde el
       padding por defecto de Bootstrap (.card-header no define padding propio,
       lo heredaba del contexto) — sin esto el texto queda pegado al borde. */
    padding: 0.875rem 1rem;
}

/* Subheaders de instalaciones (Deportivas, Académicas...) */
.de-inst-subheader {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Logo de la institución en el hero: esquinas suaves (no círculo plano) */
.de-logo-inst {
    border-radius: 0.75rem;
}

/* Tabla de costos: cifras alineadas */
.de-inst-header + .card-body .table,
.card-body .table {
    font-variant-numeric: tabular-nums;
}

/* ---------- 14. BANNERS PUBLICITARIOS ---------- */
.de-banner-ad {
    display: inline-block;
    max-width: 100%;
    margin-inline: auto;
}
.de-banner-ad img {
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.de-banner-ad a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.de-banner-sidebar_ficha img {
    max-width: 300px;
    max-height: 250px;
}
.de-banner-header_listado img {
    max-width: 728px;
    max-height: 90px;
}
.de-banner-footer_recursos img,
.de-banner-inline_articulo img {
    max-width: 468px;
    max-height: 60px;
}