/* ============================================================
   styles.css — Hoja de estilos compartida
   Proyecto: Subvenciones Bienestar Animal (BDNS / DGDA)

   Este archivo se importa en TODAS las páginas del frontend.
   Contiene los estilos base, variables de color, navbar,
   footer, tarjetas, botones, tablas e inputs.

   ÍNDICE DE SECCIONES:
   1.  Variables globales (Custom Properties)
   2.  Reset y base (incluye sticky footer)
   3.  Navbar
   4.  Contenedor principal
   5.  Botones
   6.  Tarjetas (Cards)
   7.  Formularios (Inputs y Selects)
   8.  Tabla
   9.  Badges de estado
   10. Portada partida (texto izquierda + imagen derecha)
   11. Secciones genéricas
   12. Grids
   13. Tarjetas de métricas (versión verde)
   14. Tarjetas de convocatorias por año
   15. Footer
   16. Estados de carga y error
   17. Paginación
   18. Filtros (Buscador)
   19. Botones adicionales (btn-verde, btn-auth)
   20. Páginas de autenticación (login / registro)
   21. Estadísticas (KPIs, gráficos, ranking)
   22. Zona privada (privado.html)
   23. Responsive adicional (tablas móvil)
   24. Componentes zona privada (exclusivo, verificar-email)
   25. Skip-nav (accesibilidad por teclado)
   26. Botón descarga PNG (Task 2.2)
   27. Badges de tendencia (Task 2.3)
   28. Top-5 lista con barra proporcional (Task 2.4)
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES (Custom Properties)
   Las variables CSS empiezan con -- y se usan con var()
   Están definidas en :root para que estén disponibles en toda
   la página.
   ============================================================ */
:root {
    /* --- Admin --- */
    --admin-rojo:      #7a1f2e;
    --admin-rojo-dark: #5a1520;
    --admin-fondo:     #f8f4f4;

    /* --- Colores principales --- */
    --color-primario:    #47C079;   /* Verde naturaleza */
    --color-hover:       #52E38E;   /* Verde claro (hover / acentos) */
    --color-fondo-verde: #E8F5E9;   /* Verde suave para fondos */
    --color-verde-btn:   #2E7D32;   /* Verde oscuro para botones */
    --color-verde-tabla: #2E6B4F;   /* Verde para cabeceras de tabla — un tono más oscuro */
    --color-foco:        #2E6B4F;   /* Verde oscuro para foco WCAG 2.2 SC 2.4.11 */

    /* --- Colores institucionales --- */
    --color-azul:        #1565C0;   /* Azul institucional */
    --color-azul-claro:  #42A5F5;   /* Azul claro */

    /* --- Grises y neutros --- */
    --color-gris-claro:  #F5F5F5;   /* Fondos de tabla */
    --color-gris-medio:  #E0E0E0;   /* Bordes */
    --color-gris-texto:  #616161;   /* Texto secundario */
    --color-negro:       #212121;   /* Texto principal */
    --color-blanco:      #FFFFFF;

    /* --- Colores de estado (para badges de solicitudes) --- */
    --estado-concedida:       #2E7D32;   /* verde   */
    --estado-no-beneficiaria: #B45309;   /* ámbar   */
    --estado-excluida:        #C62828;   /* rojo    */
    --estado-desistida:       #6B7280;   /* gris    — según wireframe */

    /* --- Tipografía --- */
    --fuente-principal: 'Inter', sans-serif;

    /* --- Espaciado (múltiplos de 8px) --- */
    --espacio-xs:  8px;
    --espacio-sm:  16px;
    --espacio-md:  24px;
    --espacio-lg:  32px;
    --espacio-xl:  48px;

    /* --- Bordes y sombras --- */
    --radio-btn:   8px;
    --radio-card:  12px;
    --radio-input: 6px;
    --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-nav:  0 2px 6px rgba(0, 0, 0, 0.1);

    /* --- Altura del navbar --- */
    --altura-nav: 80px;

    /* --- Identidad visual global (navbar + footer) --- */
    --nav-oscuro:    #1A3429;   /* Verde institucional oscuro */
    --btn-cta:       #2DC26C;   /* Verde CTA (botones de acción) */
    --btn-cta-hover: #25A85B;   /* Verde CTA en hover */
    --color-acento:  #D97706;   /* Ámbar — colonias felinas / acento interactivo */
    --color-privado: #8B78C0;   /* Morado institucional — zona privada (sin uso activo) */
    --banner-privado: #2D6A4F;  /* Banner perfil/exclusivo — editable con scripts/color-privado.sh */
    --fondo-privado:  #FAF4EE;  /* Fondo cuerpo perfil/exclusivo — editable con scripts/color-privado.sh */
    --hover-privado:  #E8F2EC;  /* Hover tarjeta exclusivo — editable con scripts/color-privado.sh */
}


/* ============================================================
   2. RESET Y BASE
   Eliminamos márgenes y paddings por defecto del navegador,
   y establecemos box-sizing: border-box (para que el padding
   no desborde el ancho del elemento).

   STICKY FOOTER:
   Usando Flexbox en html/body con min-height: 100vh conseguimos
   que el footer siempre esté al pie de la pantalla, incluso
   cuando el contenido es corto (ej: páginas con pocos resultados
   o mensajes de error). El <main> recibe flex: 1 para ocupar
   todo el espacio restante entre navbar y footer.
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--fuente-principal);
    font-size: 16px;
    color: var(--color-negro);
    background-color: var(--color-blanco);
    line-height: 1.6;

    /* Sticky footer: el body ocupa al menos toda la ventana */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}


/* ============================================================
   3. NAVBAR
   Barra de navegación fija en la parte superior.
   Diseño unificado en verde oscuro institucional (#1A3429)
   para todas las páginas del proyecto.
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--altura-nav);
    background-color: var(--nav-oscuro);          /* #1A3429 — institucional */
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
    z-index: 1200;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--espacio-lg);
}

/* Logo: texto blanco sobre fondo oscuro */
.navbar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #FFFFFF;
}

.navbar__logo-text {
    color: #FFFFFF;
}

/* Logo PNG — sin filtro de inversión; drop-shadow para visibilidad */
.navbar__logo img {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

/* Contenedor de los enlaces de navegación */
.navbar__links {
    display: flex;
    align-items: center;
    gap: var(--espacio-lg);
}

/* Botón hamburguesa — oculto en desktop, visible en ≤600px */
.navbar__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
}
.navbar__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.navbar--open .navbar__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar--open .navbar__hamburger span:nth-child(2) {
    opacity: 0;
}
.navbar--open .navbar__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Cada enlace: blanco semitransparente */
.navbar__links a {
    font-size: 1.15rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
    transition: color 0.2s ease;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.navbar__links a:hover,
.navbar__links a.activo {
    color: #FFFFFF;
    border-bottom-color: var(--color-acento);
}

/* Botón "Acceder" / "Cerrar sesión": pill ámbar */
.navbar__links .btn-login {
    background-color: var(--color-acento);
    color: #FFFFFF;
    padding: 8px var(--espacio-sm);
    border-radius: 50px;
    border: none;
    box-shadow: none;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 600;
    font-family: var(--fuente-principal);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.navbar__links .btn-login:hover {
    background-color: #B45309;
    color: #FFFFFF;
}

/* Bloque de usuario (navbar.js) */
.navbar__user-controls {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-lg);
}

/* "Mi perfil": enlace inyectado por navbar.js cuando hay sesión */
.navbar__links a.navbar__user-link {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.80);
    font-weight: 500;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.navbar__links a.navbar__user-link:hover {
    color: #FFFFFF;
    border-bottom-color: var(--color-acento);
}


/* ============================================================
   4. CONTENEDOR PRINCIPAL
   margin-top: empuja el contenido para que no quede tapado
   por el navbar fijo (position: fixed).
   flex: 1: hace que <main> crezca y ocupe todo el espacio
   disponible entre el navbar y el footer (sticky footer).
   ============================================================ */
main {
    margin-top: var(--altura-nav);
    flex: 1;  /* Clave para el sticky footer: ocupa el espacio sobrante */
}

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espacio-lg);
}


/* ============================================================
   5. BOTONES
   Dos variantes: primario (relleno) y secundario (outline).
   ============================================================ */
.btn {
    display: inline-block;
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-btn);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
}

/* El atributo hidden debe ocultar el botón: sin esta regla, el
   display:inline-block de .btn (más específico) lo mantendría visible.
   Se usa en los botones "Primera"/"Última" de la paginación. */
.btn[hidden] {
    display: none;
}

/* Botón principal: verde oscuro (igual que btn-verde) */
.btn-primario {
    background-color: var(--color-verde-btn);
    color: var(--color-blanco);
}

.btn-primario:hover {
    background-color: #245c27;
    color: var(--color-blanco);
}

/* Botón secundario: outline verde */
.btn-secundario {
    background-color: transparent;
    color: var(--color-verde-btn);
    border: 2px solid var(--color-verde-btn);
}

.btn-secundario:hover {
    background-color: var(--color-fondo-verde);
}

/* Botón con aspecto de enlace: sin recuadro ni fondo, texto en negro
   y subrayado solo al pasar el ratón. Usado en "« Primera" / "Última »"
   de la paginación para diferenciarlos de Anterior/Siguiente. */
.btn-enlace {
    background-color: transparent;
    border: none;
    color: var(--color-negro);
    text-decoration: none;
}

.btn-enlace:hover {
    background-color: transparent;
    text-decoration: underline;
}


/* ============================================================
   6. TARJETAS (Cards)
   Contenedor con fondo blanco, sombra y bordes redondeados.
   Se usan para métricas, accesos rápidos, etc.
   ============================================================ */
.card {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
}

/* Tarjeta de métrica (Home): número grande + etiqueta */
.card-metrica {
    text-align: center;
    border-top: 4px solid var(--color-verde-btn);
}

.card-metrica__numero {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    line-height: 1.2;
}

.card-metrica__label {
    font-size: 0.9rem;
    color: var(--color-gris-texto);
    margin-top: var(--espacio-xs);
}

/* Tarjeta de acceso rápido */
.card-acceso {
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--color-gris-medio);
}

.card-acceso:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-acceso__icono {
    font-size: 2.5rem;
    margin-bottom: var(--espacio-sm);
}

.card-acceso__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espacio-xs);
}

.card-acceso__descripcion {
    font-size: 0.9rem;
    color: var(--color-gris-texto);
    margin-bottom: var(--espacio-sm);
}


/* ============================================================
   7. FORMULARIOS (Inputs y Selects)
   Estilos para campos de texto, email, password y <select>.
   ============================================================ */
.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--espacio-sm);
}

.form-grupo label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-negro);
}

.form-control {
    height: 44px;
    padding: 0 var(--espacio-sm);
    border: 1.5px solid var(--color-gris-medio);
    border-radius: var(--radio-input);
    font-family: var(--fuente-principal);
    font-size: 0.95rem;
    color: var(--color-negro);
    background-color: var(--color-blanco);
    transition: border-color 0.2s ease;
    width: 100%;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

/* Mensaje de error bajo un campo */
.form-error {
    font-size: 0.875rem;
    color: var(--estado-no-beneficiaria);
    display: none; /* Se muestra con JS cuando hay error */
}

.form-error.visible {
    display: block;
}


/* ============================================================
   8. TABLA
   Estilos para tablas de datos (solicitudes, convocatorias).
   ============================================================ */
.tabla-wrapper {
    overflow-x: auto;  /* En pantallas pequeñas, la tabla hace scroll horizontal */
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table thead {
    background-color: var(--color-gris-claro);
}

table th {
    padding: var(--espacio-sm);
    text-align: left;
    font-weight: 600;
    color: var(--color-gris-texto);
    border-bottom: 2px solid var(--color-gris-medio);
}

table td {
    padding: var(--espacio-sm);
    border-bottom: 1px solid var(--color-gris-medio);
    color: var(--color-negro);
    vertical-align: middle;
}

/* Filas alternas con fondo muy suave */
table tbody tr:nth-child(even) {
    background-color: var(--color-gris-claro);
}

table tbody tr:hover {
    background-color: var(--color-fondo-verde);
}

/* ── Tabla responsive: en <600px las filas se convierten en tarjetas ──
   Técnica data-label: cada <td> tiene un atributo data-label="Columna"
   que se muestra como prefijo con ::before. El <thead> se oculta.
   Solo afecta a .tabla-wrapper (buscador de solicitudes), no a otras tablas.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tabla-wrapper {
        overflow-x: visible;
        box-shadow: none;
        border-radius: 0;
    }

    .tabla-wrapper table thead {
        display: none;
    }

    .tabla-wrapper table,
    .tabla-wrapper table tbody,
    .tabla-wrapper table tr,
    .tabla-wrapper table td {
        display: block;
        width: 100%;
    }

    .tabla-wrapper table tbody tr {
        background: var(--color-blanco);
        border: 1px solid var(--color-gris-medio);
        border-radius: var(--radio-card);
        margin-bottom: 0.65rem;
        padding: 0.6rem 0.8rem;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }

    /* Cancelar fondo alterno de escritorio */
    .tabla-wrapper table tbody tr:nth-child(even) {
        background: var(--color-blanco);
    }

    .tabla-wrapper table tbody tr:hover {
        background: var(--color-fondo-verde);
    }

    .tabla-wrapper table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.28rem 0;
        border: none;
        gap: 0.5rem;
        font-size: 0.88rem;
        text-align: right;
    }

    /* Línea separadora entre campos dentro de la tarjeta */
    .tabla-wrapper table tbody td:not(:last-child) {
        border-bottom: 1px solid var(--color-gris-claro);
    }

    /* Etiqueta de columna: content del atributo data-label */
    .tabla-wrapper table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-gris-texto);
        white-space: nowrap;
        min-width: 70px;
        flex-shrink: 0;
        text-align: left;
    }
}

@media (max-width: 600px) {
    /* tabla-convoc: mantener como tabla real y hacer scroll horizontal */
    .tabla-wrapper:has(.tabla-convoc) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabla-wrapper .tabla-convoc          { display: table; width: 100%; min-width: 280px; }
    .tabla-wrapper .tabla-convoc thead    { display: table-header-group; }
    .tabla-wrapper .tabla-convoc tbody    { display: table-row-group; }
    .tabla-wrapper .tabla-convoc tr       { display: table-row; margin: 0; padding: 0; border: none; box-shadow: none; border-radius: 0; }
    .tabla-wrapper .tabla-convoc th                { display: table-cell; padding: 8px 6px; font-size: 0.8rem; white-space: nowrap; text-align: center; }
    .tabla-wrapper .tabla-convoc td                { display: table-cell; padding: 8px 6px; font-size: 0.85rem; border: none; text-align: center; }
    .tabla-wrapper .tabla-convoc th:first-child,
    .tabla-wrapper .tabla-convoc td:first-child    { width: 18%; }
    .tabla-wrapper .tabla-convoc td::before { display: none; }
    .tabla-wrapper .tabla-convoc tbody tr:nth-child(odd)  td { background-color: #fff; }
    .tabla-wrapper .tabla-convoc tbody tr:nth-child(even) td { background-color: #f5f7f6; }
}


/* ============================================================
   9. BADGES DE ESTADO
   Pequeñas etiquetas de colores según el estado de la solicitud.
   ============================================================ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-blanco);
}

.badge-concedida       { background-color: var(--estado-concedida); }
.badge-no-beneficiaria { background-color: var(--estado-no-beneficiaria); }
.badge-excluida        { background-color: var(--estado-excluida); }
.badge-desistida       { background-color: var(--estado-desistida); }


/* ============================================================
   11. SECCIONES GENÉRICAS
   Padding y encabezados para cada bloque de contenido.
   ============================================================ */
.seccion {
    padding: var(--espacio-xl) 0;
}

.seccion--gris {
    background-color: var(--color-gris-claro);
}

.seccion__cabecera {
    text-align: center;
    margin-bottom: var(--espacio-lg);
}

.seccion__titulo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espacio-xs);
}

.seccion__subtitulo {
    font-size: 1rem;
    color: var(--color-gris-texto);
}


/* ============================================================
   12. GRIDS
   Disposición en cuadrícula para tarjetas.
   ============================================================ */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-md);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-md);
}

/* En pantallas medianas, el grid de 3 pasa a 2 columnas */
@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) and (min-width: 901px) {
    /* Navbar en pantallas medianas: reducir fuente para evitar solapamiento */
    .navbar__links a,
    .navbar__links .btn-login {
        font-size: 1rem;
    }
}

@media (max-width: 900px) {
    /* ── Hamburguesa activa en tablet y móvil ── */
    .navbar {
        padding: 0 var(--espacio-sm);
    }
    .navbar__logo-text { display: block; }
    .navbar__hamburger { display: flex; }

    .navbar__links {
        display: none;
        position: fixed;
        top: var(--altura-nav);
        left: 0;
        right: 0;
        background-color: var(--nav-oscuro);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--espacio-md) var(--espacio-lg);
        gap: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 1001;
    }
    .navbar--open .navbar__links { display: flex; }

    .navbar__links li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .navbar__links li:last-child { border-bottom: none; }

    .navbar__links a {
        font-size: 1rem;
        padding: 14px 12px;
        display: block;
        border-bottom: none !important;
        border-left: 3px solid transparent;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .navbar__links a:hover,
    .navbar__links a.activo {
        border-left-color: var(--color-acento);
        color: #fff;
        border-bottom: none !important;
    }

    .navbar__user-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
        width: 100%;
    }
    .navbar__user-controls .navbar__user-link {
        padding: 14px 12px;
        display: block;
        width: 100%;
        font-size: 1rem;
        border-left: 3px solid transparent;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .navbar__user-controls .navbar__user-link + .navbar__user-link {
        border-top: 1px solid rgba(255,255,255,0.12);
        padding-top: 14px;
        margin-top: -8px;
    }
    .navbar__user-controls .navbar__user-link:hover {
        border-left-color: var(--color-acento);
        color: #fff;
        border-bottom: none;
    }
    .navbar__links .btn-login {
        display: block;
        width: fit-content;
        margin: 0.5rem auto 0;
        padding: 8px 28px;
        font-size: 1rem;
        border-radius: 20px;
    }
}


/* ============================================================
   14. ESTADOS DE CARGA Y ERROR
   Mensajes que se muestran mientras se cargan datos de la API
   o cuando hay un error de red.
   ============================================================ */
.estado-carga {
    text-align: center;
    padding: var(--espacio-xl);
    color: var(--color-gris-texto);
    font-size: 1rem;
}

/* Empty state del buscador — extiende .estado-carga con icono SVG, texto en
   dos líneas (título + sugerencia) y botón "Limpiar filtros" como CTA */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-sm);
}

.estado-vacio__icono {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}

.estado-vacio__titulo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.estado-vacio__sub {
    margin: 0;
    font-size: 0.9rem;
}

.estado-error {
    text-align: center;
    padding: var(--espacio-lg);
    color: var(--estado-no-beneficiaria);
    font-size: 0.95rem;
    background-color: #ffeaea;
    border-radius: var(--radio-card);
    border: 1px solid #f5c6c6;
}


/* ============================================================
   15. PAGINACIÓN
   Controles de siguiente / anterior para la tabla de solicitudes.
   ============================================================ */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espacio-sm);
    margin-top: var(--espacio-md);
}

.paginacion span {
    font-size: 0.88rem;
    color: var(--color-gris-texto);
    white-space: nowrap;
}


/* ── Barra de control sobre la tabla (info + orden) ── */
.tabla-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-sm);
    margin: 2rem 0 var(--espacio-sm);
    flex-wrap: wrap;
}


/* ============================================================
   16. FILTROS (Buscador)
   Barra de filtros para la página de solicitudes.
   ============================================================ */
.filtros {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
    margin-bottom: var(--espacio-md);
}

.resultados-card {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
}

.btn-csv.btn-secundario {
    background-color: var(--color-blanco);
}

.btn-csv.btn-secundario:hover {
    background-color: var(--color-fondo-verde);
}

.filtros__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm);
    align-items: flex-end;
}

.filtros__fila .form-grupo {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .filtros__fila {
        flex-direction: column;
    }
    .filtros__botones {
        justify-content: center;
    }
    .filtros__fila .form-grupo {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
    .filtros__fila .form-grupo label {
        text-align: left;
    }
}


/* ============================================================
   11. HERO PARTIDO (texto izquierda + imagen derecha)

   ¿Por qué este layout?
   El diseño original del proyecto usaba un bloque "Sobre el
   proyecto" con texto a la izquierda y una imagen de animales
   a la derecha. Esto mejora la jerarquía visual y hace la
   página más dinámica que un hero centrado. Usamos CSS Grid
   de dos columnas iguales (1fr 1fr) para que se adapte bien
   en móvil colapsando a una sola columna.
   ============================================================ */
.portada-split {
    background: linear-gradient(160deg, var(--color-fondo-verde) 0%, #d4f5e2 100%);
    padding: var(--espacio-xl) 0;
}

.portada-split__contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espacio-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Dos columnas iguales */
    align-items: center;
    gap: var(--espacio-xl);
}

.portada-split__texto {
    /* El texto ocupa la columna izquierda */
}

.portada-split__kicker {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gris-texto);
    margin-bottom: 0.4rem;
}

.portada-split__titulo {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    margin-bottom: var(--espacio-sm);
    line-height: 1.2;
}

.portada-split__descripcion {
    font-size: 1rem;
    color: var(--color-gris-texto);
    line-height: 1.7;
    margin-bottom: var(--espacio-lg);
    max-width: 520px;
}

/* Enlaces dentro del texto del hero (p. ej. Ley 7/2023): subrayados y en verde
   para distinguirlos como enlace (los <a> globales no llevan subrayado). */
.portada-split__descripcion a {
    color: var(--color-verde-btn);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.portada-split__descripcion a:hover {
    color: var(--color-hover);
}

.portada-split__imagen {
    /* La imagen ocupa la columna derecha */
    border-radius: var(--radio-card);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: #c8efd8;  /* Fondo de respaldo si la imagen no carga */
}

.portada-split__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* La imagen cubre el contenedor sin deformarse */
    border-radius: var(--radio-card);
    display: block;
}

/* Fallback si no hay imagen: placeholder verde con emoji */
.portada-split__imagen-placeholder {
    font-size: 5rem;
    text-align: center;
    padding: var(--espacio-xl);
}

@media (max-width: 768px) {
    .portada-split__contenedor {
        grid-template-columns: 1fr; /* En móvil, apilamos texto e imagen */
    }

    .portada-split__imagen {
        order: -1; /* En móvil, la imagen va arriba */
    }

    .portada-split__titulo {
        font-size: 1.9rem;
    }
}


/* ============================================================
   12b. SECCIÓN PRINCIPAL CON MÉTRICAS
   Bloque blanco con título centrado y tres tarjetas verdes.
   ============================================================ */
.seccion-datos {
    padding: var(--espacio-lg) 0;
    background-color: var(--color-blanco);
}

.seccion-datos__titulo {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    text-align: center;
    margin-bottom: var(--espacio-xs);
}

.seccion-datos__subtitulo {
    font-size: 1rem;
    color: var(--color-gris-texto);
    text-align: center;
    margin-bottom: var(--espacio-lg);
}


/* ============================================================
   14b. TARJETAS DE MÉTRICAS — VERSIÓN VERDE
   Estilo acorde al diseño anterior: fondo verde suave,
   número grande y etiqueta pequeña debajo.

   ¿Por qué dos estilos de card-metrica?
   El original usaba tarjetas con fondo verde y número grande
   abajo. Se mantiene para no romper con la estética definida
   en la memoria del proyecto (issue 7A).
   ============================================================ */
.card-metrica-verde {
    background-color: var(--color-fondo-verde);
    border-radius: var(--radio-card);
    padding: var(--espacio-md) var(--espacio-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.card-metrica-verde__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gris-texto);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-metrica-verde__numero {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    line-height: 1.1;
}

.card-metrica-verde__subtitulo {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    line-height: 1.4;
}


/* ============================================================
   15b. TARJETAS DE CONVOCATORIAS POR AÑO
   Tres tarjetas (2025, 2024, 2023), cada una con el año
   en grande, estado "Cerrada", y las líneas EPA y EELL
   con su importe.

   ¿Por qué tarjetas en lugar de tabla?
   Las tarjetas por año facilitan la comparación visual
   de convocatorias a golpe de vista, como hacen plataformas
   de referencia como datos.gob.es.
   ============================================================ */
.card-anio {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    border: 1px solid var(--color-gris-medio);
    padding: var(--espacio-md);
}

.card-anio__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-sm);
}

.card-anio__year {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-verde-btn);
}

.card-anio__estado {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gris-texto);
    background-color: var(--color-gris-claro);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-gris-medio);
}

.card-anio__lineas {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-xs);
    border-top: 1px solid var(--color-gris-medio);
    padding-top: var(--espacio-sm);
    margin-bottom: var(--espacio-sm);
}

.card-anio__linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.card-anio__linea-tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gris-texto);
    font-weight: 500;
}

.card-anio__linea-importe {
    font-weight: 700;
    color: var(--color-negro);
}

.card-anio__enlace {
    font-size: 0.875rem;
    color: var(--color-verde-btn);
    font-weight: 600;
    display: block;
    padding-top: var(--espacio-xs);
    border-top: 1px solid var(--color-gris-medio);
}

.card-anio__enlace:hover {
    text-decoration: underline;
}


/* ============================================================
   17b. FOOTER
   Diseño en dos zonas:
   · Zona principal (verde oscuro): logo a la izquierda,
     enlaces de navegación a la derecha.
   · Zona inferior (verde muy oscuro): créditos de datos
     y aviso de proyecto educativo.

   ¿Por qué verde oscuro (#163a25) y no negro?
   El verde oscuro pertenece a la misma paleta del proyecto y
   transmite más coherencia temática que un gris neutro.
   Además diferencia claramente el pie de página del cuerpo
   de la web sin resultar tan severo como el negro puro.

   Sticky footer: el <footer> se queda siempre al pie gracias
   al flexbox definido en body (sección 2 de este CSS).
   ============================================================ */

/* ============================================================
   Footer unificado en verde oscuro institucional para
   coherencia visual con el navbar en todas las páginas.
   ============================================================ */
.footer-principal {
    --footer-bg:        #1A3429;                  /* espejo del --nav-oscuro */
    --footer-bg-sub:    #142b20;
    --footer-texto:     rgba(255, 255, 255, 0.88);
    --footer-texto-dim: rgba(255, 255, 255, 0.52);
    --footer-borde:     rgba(255, 255, 255, 0.10);

    background-color: var(--footer-bg);
    color: var(--footer-texto);
    border-top: none;                             /* sin línea superior visible */
}

/* ── Zona principal: logo + enlaces ── */
.footer-principal__zona {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacio-md) var(--espacio-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-sm);
    flex-wrap: wrap;
}

/* Logo + nombre del proyecto */
.footer-principal__marca {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    font-size: 0.92rem;
    color: var(--footer-texto);
}

/* Logo PNG — sin filtro de inversión; drop-shadow para visibilidad */
.footer-principal__marca img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Nombre del proyecto en blanco puro para máxima legibilidad */
.footer-principal__marca strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* Columna derecha: enlaces de navegación */
.footer-principal__nav {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    font-size: 0.88rem;
}

.footer-principal__nav a {
    color: var(--footer-texto);
    transition: color 0.2s ease;
}

.footer-principal__nav a:hover {
    color: #FFFFFF;
}

/* Separadores | */
.footer-principal__sep {
    color: var(--footer-borde);
}

/* ── Páginas legales (aviso-legal.html, privacidad.html) ──
   Estas dos páginas llevaban todos sus estilos en atributos `style` dentro
   del HTML. Se migran a clases: repetidos a mano en cada sección, cualquier
   retoque obligaba a tocar trece sitios y ya habían empezado a divergir. */
.pagina-legal {
    padding-top: 3rem;
    padding-bottom: 4rem;
    max-width: 760px;
}

.legal-seccion {
    margin-bottom: 2rem;
}

.pagina-legal__titulo {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--color-negro);
}

.legal-seccion__titulo {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.legal-seccion p + p {
    margin-top: 0.75rem;
}

.legal-lista {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    line-height: 1.8;
}


/* ── Franja de campaña (temporal) ──
   Aviso puntual sobre una movilización del sector. Nace con fecha de
   caducidad: `home.js` la oculta pasada la fecha, para no depender de que
   alguien se acuerde de quitarla (ver FIN_CAMPANA).

   Naranja #F67C01, muestreado del propio cartel: es el color oficial de la
   campaña y se usa tal cual. Al coincidir exactamente, la banda naranja de la
   imagen se funde con la franja y no se ve el borde del cartel.

   TEXTO OSCURO, NO BLANCO. Sobre este naranja el blanco se queda en 2,69:1,
   muy por debajo del mínimo AA (4,5:1) — peor incluso que el ámbar del
   sistema, que ya se descartó en su día por ese motivo. En `--color-negro`
   sube a 5,98:1, y de paso queda coherente con el cartel, que es naranja con
   las figuras en negro.

   Se acepta a sabiendas que el naranja coincide con el ámbar de "no
   beneficiaria": aquí manda la identidad de la campaña, no el código de
   colores de los datos. Es una franja temporal que se retira sola. */
.banner-campana {
    display: none;               /* home.js lo muestra si está en fecha */
    background-color: #F67C01;
    color: var(--color-negro);
    /* La altura la marcan los carteles (3,25rem), no el texto, así que el
       padding vertical va corto: 0,35rem deja la franja en ~63 px, algo más
       alta que cuando la marcaba una línea de texto (~50 px).
       El padding lateral es la mitad del habitual para que los carteles se
       acerquen al borde en vez de quedar flotando hacia el centro. */
    padding: 0.35rem var(--espacio-sm);
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.banner-campana.visible {
    display: block;
}

/* Fila: cartel — texto — cartel.

   El ancho máximo es alto (1500px) porque es lo que separa los carteles del
   borde en pantallas anchas: con el límite del texto (900px) quedaban muy
   metidos hacia dentro. El tope sigue existiendo para que en monitores muy
   panorámicos no acaben tan lejos del texto que parezcan otra cosa. */
.banner-campana__interior {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    max-width: 1500px;
    margin-inline: auto;
}

/* Altura fija y ancho automático: el cartel se adapta sin deformarse.
   `flex-shrink: 0` evita que se aplaste cuando el texto necesita sitio. */
.banner-campana__cartel {
    height: 3.25rem;
    width: auto;
    flex-shrink: 0;
}

.banner-campana__contenido {
    max-width: 900px;
}

.banner-campana a {
    color: var(--color-negro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.banner-campana a:hover {
    text-decoration-thickness: 2px;
}

/* En pantalla estrecha los carteles se quitan: el texto ocupa varias líneas y
   con ellos a los lados quedaría una columna de palabras sueltas. Se recupera
   el padding original, porque sin carteles la altura vuelve a marcarla el
   texto. */
@media (max-width: 600px) {
    .banner-campana {
        padding: 0.85rem var(--espacio-lg);
    }

    .banner-campana__cartel {
        display: none;
    }
}


/* ── Franja de apoyo ──
   Va en su propia línea, entre la fila principal y los créditos: el texto
   necesita explicarse y metido entre los enlaces recargaría la fila y se
   partiría mal en móvil.

   El proyecto NO recauda para sí mismo. Esta franja señala una causa, y así
   está redactada: sin ella se leería como una petición encubierta, que es
   justo lo que las condiciones de Teaming no admiten (y contradiría el
   "independiente y sin ánimo de lucro" de encima). Ver aviso-legal.html. */
.footer-apoyo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1.15rem var(--espacio-lg);
    /* Un tono por encima del verde del pie, reutilizando el de las cabeceras
       de tabla: distingue la franja sin inventar un color nuevo y deja las
       dos bandas de abajo como las oscuras.
       El texto va en blanco pleno, no atenuado: sobre este fondo más claro
       el atenuado se queda en 2,98:1 de contraste y no llega al mínimo AA
       (4,5:1). En blanco sube a 5,36:1. */
    background-color: var(--color-verde-tabla);
    border-bottom: 1px solid var(--footer-borde);
    font-size: 0.9375rem;
    color: var(--footer-texto);
    text-align: center;
}

/* Pastilla blanca: el logo es negro en un 62% y sobre el verde del footer
   quedaría como una mancha. Mismo criterio que las tarjetas de recursos,
   donde los logos ajenos también van sobre blanco. */
.footer-apoyo__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 112px;
    height: 86px;
    /* Sin pastilla blanca: sobre el verde claro de la franja el logo se
       sostiene solo. En el verde oscuro del pie sí hacía falta, porque el
       logo es negro en un 62% y quedaba como una mancha. */
    order: 2;
    border-radius: 6px;
    transition: transform 0.2s ease, outline-color 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
}

/* Señales de que es pulsable, sin ponerlo en el texto */
.footer-apoyo__logo:hover img {
    transform: scale(1.04);
}

.footer-apoyo__logo:focus-visible {
    outline-color: #ffffff;
}

.footer-apoyo__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-apoyo__texto {
    margin: 0;
    max-width: 92ch;
}

.footer-apoyo__texto a {
    color: var(--footer-texto);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.footer-apoyo__texto a:hover {
    color: #ffffff;
}

/* ── Zona inferior: créditos ── */
.footer-principal__creditos {
    background-color: var(--footer-bg-sub);
    border-top: 1px solid var(--footer-borde);
    padding: 10px var(--espacio-lg);
    text-align: center;
    font-size: 0.875rem;
    color: var(--footer-texto-dim);
}

.footer-principal__creditos a {
    color: var(--footer-texto-dim);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.footer-principal__creditos a:hover {
    color: var(--footer-texto);
}

/* Punto en el que marca + enlaces dejan de caber en una línea: en vez de
   partirse a la izquierda (space-between con wrap), apilamos en columna y
   centramos las dos líneas. */
@media (max-width: 850px) {
    .footer-principal__zona {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--espacio-sm);
    }

    .footer-principal__nav {
        flex-wrap: wrap;
        gap: var(--espacio-xs);
        justify-content: center;
    }

    /* La franja de apoyo se apila igual que el resto del pie. Sin esto se
       apoyaba solo en flex-wrap: funcionaba, pero el logo quedaba colgando
       con demasiado aire y el padding lateral se comía el ancho útil. */
    .footer-apoyo {
        flex-direction: column;
        gap: 0.85rem;
        padding: 1rem var(--espacio-md);
    }

    .footer-apoyo__logo {
        width: 96px;
        height: 74px;
    }
}


/* ============================================================
   PLACEHOLDER DE GRÁFICO
   Caja de marcador de posición para los gráficos de Chart.js
   que se implementarán en la issue 7C.
   ============================================================ */
.grafico-placeholder {
    background-color: var(--color-gris-claro);
    border: 2px dashed var(--color-gris-medio);
    border-radius: var(--radio-card);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-gris-texto);
    font-size: 0.9rem;
    gap: var(--espacio-xs);
}

.grafico-placeholder__icono {
    font-size: 2.5rem;
    opacity: 0.4;
}

.grafico-placeholder__titulo {
    font-weight: 600;
    color: var(--color-negro);
}

/* Canvas de Chart.js (oculto hasta 7C) */
canvas {
    display: block;
    max-width: 100%;
}


/* ============================================================
   21. BOTONES ADICIONALES
   · btn-verde : variante verde oscuro para formularios de auth
   · btn-auth  : modificador de ancho completo para botones
                 dentro de tarjetas de autenticación
   ============================================================ */
.btn-verde {
    background-color: var(--color-verde-btn);
    color: var(--color-blanco);
    border: 2px solid var(--color-verde-btn);
}

.btn-verde:hover {
    background-color: #245c27;
    border-color: #245c27;
}

.btn-verde:focus-visible {
    background-color: #245c27;
    border-color: #245c27;
    outline: 3px solid var(--color-foco);
    outline-offset: 3px;
}

/* Ancho completo — para el botón de submit en login / registro */
.btn-auth {
    width: 100%;
    justify-content: center;
    margin-top: var(--espacio-sm);
    font-size: 1rem;
    padding: 14px var(--espacio-md);
}

.btn-auth:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}


/* ============================================================
   22. PÁGINAS DE AUTENTICACIÓN (login.html / recuperar-password.html)
   Diseño: split card (imagen izquierda + formulario derecha)
   con calidad de formulario GOV.UK.
   ============================================================ */

/* ── Fondo de la página de autenticación ── */
.auth-fondo {
    background-color: var(--color-fondo-verde);
    min-height: calc(100vh - var(--altura-nav));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-xl) var(--espacio-lg);
}

/* Wrapper centrado con ancho máximo */
.auth-page {
    width: 100%;
    max-width: 920px;
}
.auth-page--centrado {
    text-align: center;
}

/* Enlace de contexto encima de la card — ancla institucional */
.auth-page__servicio {
    font-size: 0.9rem;
    margin-bottom: var(--espacio-md);
}

.auth-page__servicio a {
    color: var(--color-verde-btn);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.auth-page__servicio a:hover {
    text-decoration: underline;
    gap: 10px;
}

/* ── Card principal: grid 2 columnas ── */
.auth-card {
    background-color: var(--color-blanco);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    display: grid;
    grid-template-columns: 45% 55%;
    overflow: hidden;
    min-height: 580px;
}

.auth-card--simple {
    grid-template-columns: 1fr;
    max-width: 480px;
    min-height: unset;
}

/* ── Columna izquierda: panel decorativo con círculo geométrico ──
   Fondo claro (#f0f5f1) con un gran círculo verde centrado y un
   blob secundario en la esquina inferior-derecha. La foto se centra
   sobre el círculo para crear profundidad visual.
   ─────────────────────────────────────────────────────────────────── */
.auth-card__imagen {
    background-color: #f0f5f1;        /* verde muy suave casi blanco */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;              /* imagen centrada verticalmente */
    justify-content: center;
}

/* Blob 1: gran mancha verde oscura en la zona superior-derecha.
   Reemplaza el círculo geométrico por una forma orgánica fluida. */
.auth-card__circulo {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: var(--color-verde-btn);   /* #2E7D32 */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 0;
}

/* Blob 2: acento redondeado en la esquina inferior-derecha */
.auth-card__blob {
    position: absolute;
    width: 160px;
    height: 160px;
    background-color: var(--color-primario);    /* #47C079 */
    opacity: 0.55;
    border-radius: 62% 38% 70% 30% / 45% 65% 35% 55%;
    bottom: -20px;
    right: -20px;
    z-index: 0;
}

/* Foto del animal: centrada sobre el círculo.
   object-fit: contain muestra la imagen entera sin recortarla.
   drop-shadow da profundidad respecto al círculo de fondo. */
.auth-card__foto {
    position: relative;
    z-index: 1;
    width: 88%;
    max-height: 88%;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.20));
}

.auth-card__foto-placeholder {
    position: relative;
    z-index: 1;
    color: var(--color-verde-btn);
    font-size: 0.9rem;
}

/* ── Columna derecha: formulario ── */
.auth-card__formulario {
    padding: var(--espacio-xl) var(--espacio-xl) var(--espacio-xl) var(--espacio-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;    /* sin gap extra — el espaciado lo dan los márgenes de cada elemento */
}

/* Título principal del formulario */
.auth-card__titulo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: 6px;
    line-height: 1.2;
}

/* Subtítulo descriptivo (añadido en fase wireframe v2) */
.auth-card__subtitulo {
    font-size: 0.93rem;
    color: var(--color-gris-texto);
    margin-bottom: var(--espacio-md);
    line-height: 1.5;
}

/* Enlace "¿No tienes cuenta?" */
.auth-card__enlace {
    margin-top: var(--espacio-sm);
    font-size: 0.9rem;
    color: var(--color-gris-texto);
}

.auth-card__enlace a {
    color: var(--color-verde-btn);
    font-weight: 600;
    text-decoration: none;
}

.auth-card__enlace a:hover {
    text-decoration: underline;
}

/* ── Alerta de error / éxito ── */
.auth-alerta {
    border-left: 4px solid var(--estado-no-beneficiaria);
    background-color: #fdf2f2;
    color: #9b1c1c;
    padding: 11px var(--espacio-sm);
    border-radius: 0 var(--radio-input) var(--radio-input) 0;
    font-size: 0.9rem;
    margin-bottom: var(--espacio-sm);
    display: none;
}

.auth-alerta.visible {
    display: block;
}

/* Variante de éxito (registro correcto) */
.auth-alerta--ok {
    border-left-color: var(--estado-concedida);
    background-color: #f0fdf4;
    color: #14532d;
}

/* ── Separador "o continúa con" (si se usa en el futuro) ── */
.auth-separador {
    text-align: center;
    margin: var(--espacio-sm) 0;
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    position: relative;
}

.auth-separador::before,
.auth-separador::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background-color: var(--color-gris-medio);
}

.auth-separador::before { left: 0; }
.auth-separador::after  { right: 0; }

/* ── Botones sociales (OAuth futuro) ── */
.auth-social {
    display: flex;
    gap: var(--espacio-sm);
}

.btn-social {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px var(--espacio-sm);
    border: 1.5px solid var(--color-gris-medio);
    border-radius: var(--radio-btn);
    background-color: var(--color-blanco);
    font-size: 0.88rem;
    font-family: var(--fuente-principal);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.btn-social:not(:disabled):hover {
    border-color: #aaa;
    background-color: var(--color-gris-claro);
}

.btn-social:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-social__icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Grupos de campo (GOV.UK style) ── */
.grupo-campo {
    margin-bottom: var(--espacio-sm);
}

.grupo-campo--horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.grupo-campo--horizontal .etiqueta-campo {
    margin-bottom: 0;
    cursor: pointer;
}

/* Texto de ayuda pequeño bajo un campo de formulario */
.campo-nota {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-gris-texto);
}

/* Botón sin estilos visuales (parece texto plano) */
.btn-texto {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
/* Etiqueta del campo */
.etiqueta-campo {
    display: block;
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--color-negro);
    margin-bottom: 6px;
}

/* Input principal (calidad institucional) */
.campo-password-wrapper {
    position: relative;
}

.campo-password-wrapper .input-campo {
    padding-right: 44px;
}

.btn-ojo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-gris-texto);
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.btn-ojo:hover { color: var(--color-negro); }

.input-campo {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 var(--espacio-sm);
    border: 2px solid var(--color-negro);
    border-radius: var(--radio-input);
    font-size: 0.97rem;
    font-family: var(--fuente-principal);
    color: var(--color-negro);
    background-color: var(--color-blanco);
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.input-campo:focus {
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
    border-color: var(--color-foco);
}

/* Estado de error: borde izquierdo rojo */
.input-campo.campo-invalido {
    border-left: 4px solid var(--estado-no-beneficiaria);
}

/* Variante textarea (formulario de contacto): altura automática y
   redimensionado solo vertical, con padding superior/inferior propio. */
.input-campo--area {
    height: auto;
    min-height: 120px;
    padding: var(--espacio-sm);
    line-height: 1.5;
    resize: vertical;
}

/* ============================================================
   PÁGINA DE CONTACTO — formulario centrado de una columna
   ------------------------------------------------------------
   Layout propio (no la "auth-card" de login/registro): una tarjeta
   blanca centrada sobre fondo gris claro, con los campos a lo ancho.
   ============================================================ */
.contacto-fondo {
    background-color: var(--color-gris-claro);
}

.contacto-page {
    max-width: 620px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
}

.contacto-card {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-medio);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    padding: 2.5rem;
}

.contacto-card__titulo {
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--color-negro);
}

.contacto-card__intro {
    color: var(--color-gris-texto);
    margin: 0 0 1.75rem;
    line-height: 1.5;
}

/* Asterisco de campo obligatorio y su leyenda explicativa */
.campo-obligatorio {
    color: var(--estado-no-beneficiaria);
    font-weight: 700;
}

.form-leyenda {
    font-size: 0.85rem;
    color: var(--color-gris-texto);
    margin: 0 0 1.25rem;
}

@media (max-width: 600px) {
    .contacto-card {
        padding: 1.5rem;
    }
}

/* Mensaje de error bajo el campo */
.campo-error {
    display: none;
    font-size: 0.875rem;
    color: var(--estado-no-beneficiaria);
    margin-top: 4px;
    font-weight: 600;
}

.campo-error.visible {
    display: block;
}

/* ── Requisitos de contraseña (registro) ── */
.password-requisitos {
    margin-top: var(--espacio-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Cada línea de requisito */
.password-req {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    padding-left: 16px;
    position: relative;
}

/* Punto por defecto (no cumplido) */
.password-req::before {
    content: '·';
    position: absolute;
    left: 4px;
    font-weight: 700;
    color: var(--color-gris-texto);
}

/* Tick verde cuando se cumple el requisito (JS añade clase .ok) */
.password-req.ok {
    color: var(--estado-concedida);
    font-weight: 600;
}

.password-req.ok::before {
    content: '✓';
    color: var(--estado-concedida);
}

/* ── Responsive: en móvil se oculta la columna de imagen ── */
@media (max-width: 680px) {
    .auth-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .auth-card__imagen {
        display: none;
    }

    .auth-card__formulario {
        padding: var(--espacio-lg) var(--espacio-md);
    }
}


/* ============================================================
   23. ESTADÍSTICAS (estadisticas.html)
   Dashboard con 4 KPIs + 4 gráficos (Chart.js).
   ============================================================ */

/* Fondo verde suave para toda la página de estadísticas */
.fondo-stats {
    background-color: var(--color-fondo-verde);
    min-height: calc(100vh - var(--altura-nav));
    padding: var(--espacio-lg) 0;
    overflow-x: hidden;
}

/* Grid de 4 columnas para KPIs */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-md);
}

@media (max-width: 900px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Tarjeta KPI */
.card-kpi {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--espacio-xs);
}

.card-kpi__label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-gris-texto);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-kpi__numero {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--nav-oscuro);
    line-height: 1.1;
}

#kpi-ccaa-top {
    font-size: 1.3rem;
}

.card-kpi__tag {
    font-size: 0.78rem;
    color: var(--color-gris-texto);
    background-color: var(--color-gris-claro);
    border-radius: 20px;
    padding: 2px 10px;
    align-self: center;
}

/* Tarjeta de gráfico */
.card-grafico {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
}

.card-grafico__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espacio-sm);
    flex-wrap: nowrap;
}

.card-grafico__titulo {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-negro);
    margin: 0;
}

.card-grafico__subtitulo {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    margin: 2px 0 0;
}

.card-grafico__badge {
    font-size: 0.75rem;
    color: var(--color-verde-btn);
    background-color: rgba(46, 125, 50, 0.1);
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
    align-self: flex-start;
}

/* Contenedor del canvas de Chart.js */
.chart-container {
    position: relative;
    height: 280px;
    width: 100%;
}

/* Variante para donut: altura menor y centrado */
.chart-container--donut {
    height: 200px;
}

/* En móvil estrecho los gráficos reducen altura para no dominar el viewport */
@media (max-width: 480px) {
    .chart-container {
        height: 220px;
    }
    .chart-container--donut {
        height: 180px;
    }
}

/* Leyenda personalizada del donut */
.leyenda-estados {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-xs);
    justify-content: center;
}

.leyenda-estados--vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--color-gris-texto);
}

.leyenda-item__color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Lista del ranking Top 5 */
.ranking-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-xs);
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--espacio-xs) var(--espacio-sm);
    background-color: var(--color-gris-claro);
    border-radius: var(--radio-input);
    font-size: 0.88rem;
}

.ranking-item__posicion {
    font-weight: 700;
    color: var(--color-verde-btn);
    min-width: 24px;
}

.ranking-item__nombre {
    flex: 1;
    padding: 0 var(--espacio-xs);
    color: var(--color-negro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-item__importe {
    font-weight: 600;
    color: var(--color-gris-texto);
    white-space: nowrap;
}

/* Aviso de pendiente cuando el endpoint no está listo */
.ranking-pendiente {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    background-color: var(--color-gris-claro);
    border-left: 3px solid var(--color-gris-medio);
    padding: var(--espacio-xs) var(--espacio-sm);
    border-radius: 0 var(--radio-input) var(--radio-input) 0;
}

.ranking-pendiente code {
    font-family: monospace;
    background-color: var(--color-gris-medio);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}


/* ============================================================
   24. ZONA PRIVADA (privado.html)
   Estructura de dos zonas: banner de saludo (verde oscuro)
   y cuerpo de contenido (gris neutro).
   ============================================================ */

/* Banner superior: saludo + badge de rol + datos de perfil */
.privado-banner {
    background-color: var(--banner-privado);
    color: var(--color-blanco);
    padding: var(--espacio-xl) 0 var(--espacio-lg);
}

.privado-banner h1,
.privado-banner h2,
.privado-banner h3 {
    color: var(--color-blanco);
}

.privado-banner__badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--color-blanco);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: var(--espacio-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.privado-banner__btn-admin {
    display: none;
    margin-top: 1rem;
    padding: .5rem 1.2rem;
    background: rgba(255, 255, 255, .15);
    color: var(--color-blanco);
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, .5);
    transition: background 0.2s ease;
}
.privado-banner__btn-admin:hover {
    background: rgba(255, 255, 255, .28);
}
.privado-banner__btn-admin--visible { display: inline-block; }

/* Cuerpo: crema cálida para que las cards blancas resalten */
.privado-cuerpo {
    background-color: var(--fondo-privado);
    padding: var(--espacio-xl) 0;
    min-height: 50vh;
}

.privado-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-lg);
    align-items: start;
}

.privado-card {
    background-color: #fff;
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-lg);
}

@media (max-width: 768px) {
    .privado-dos-columnas {
        grid-template-columns: 1fr;
    }
}

/* Grid de 2 columnas para el contenido exclusivo */
.privado-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-md);
}

@media (max-width: 640px) {
    .privado-grid {
        grid-template-columns: 1fr;
    }
}

/* Cada ítem del contenido exclusivo */
.privado-item {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    border-left: 4px solid var(--banner-privado);
    padding: var(--espacio-md);
    display: flex;
    gap: var(--espacio-sm);
    align-items: flex-start;
}

/* Estado de carga — sin borde izquierdo de color */
.privado-item--cargando {
    border-left-color: var(--color-gris-medio);
}

/* Icono dentro del ítem */
.privado-item__icono {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.privado-item__label {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.privado-item__valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-negro);
    line-height: 1.1;
}

.privado-item__detalle {
    font-size: 0.875rem;
    color: var(--color-gris-texto);
    margin-top: 4px;
}

/* Bloque de cierre de sesión */
.privado-sesion {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md) var(--espacio-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-md);
    flex-wrap: wrap;
    margin-top: var(--espacio-lg);
}

.privado-sesion__titulo {
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: 4px;
}

.privado-sesion__descripcion {
    font-size: 0.88rem;
    color: var(--color-gris-texto);
}

/* Animación shimmer para estados de carga */
@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.privado-item--cargando .privado-item__valor {
    animation: shimmer 1.4s ease-in-out infinite;
    color: var(--color-gris-texto);
}


/* ============================================================
   25. Badge de agrupación (Paso 15)
   ============================================================ */

.badge-agrupacion {
    background-color: var(--color-azul);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 6px;
}

.badge-tramo {
    background-color: #b45309;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 6px;
}

.btn--sm {
    padding: 6px 16px;
    font-size: 0.88rem;
}

.convoc-pendiente {
    color: var(--color-gris-texto);
    font-size: 0.875rem;
    font-style: italic;
}

.tabla-convoc th {
    background-color: var(--color-verde-tabla);
    color: #fff;
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
}

.tabla-convoc td {
    text-align: center;
    background-color: #fff;
}

.tabla-convoc tbody tr:nth-child(even) td {
    background-color: #f5f7f6;
}

/* Fechas-enlace de las tablas (convocatoria→BDNS, resolución→BOE): subrayadas
   para que se vean clicables, ya que los <a> globales no llevan subrayado.
   Excluye el botón "Ver solicitudes" (.btn). */
.tabla-convoc td a:not(.btn) {
    color: var(--color-verde-btn);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.tabla-convoc td a:not(.btn):hover {
    color: var(--color-hover);
}


/* ── Tabla del umbral: versión ligera ──
   La tabla de convocatorias es densa y con muchas columnas, y por eso lleva
   cabecera rellena y filas alternas. La del umbral son dos filas: ese peso
   visual la hacía parecer más importante que el texto que la explica.
   Aquí solo se marcan las líneas, que es lo que necesita para leerse.
   `.tabla-umbral` no tenía estilos propios, así que esto no afecta a la
   otra tabla de la página. */
.tabla-umbral {
    border-collapse: collapse;
    /* Fondo propio: la sección del umbral va sobre crema y con las celdas
       transparentes la tabla se confundía con el fondo de la página. */
    background-color: #ffffff;
    border-radius: var(--radio-card);
    overflow: hidden;
}

.tabla-umbral th,
.tabla-umbral td {
    background-color: #ffffff;
    border: none;
    border-bottom: 1px solid var(--color-gris-medio);
    padding: 10px 14px;
}

.tabla-umbral thead th {
    color: var(--color-verde-tabla);
    font-weight: 700;
    border-bottom: 2px solid var(--color-verde-tabla);
}

/* Filas alternas fuera: con dos filas solo añade ruido */
.tabla-umbral tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

/* La primera columna es la etiqueta de la fila, no un dato */
.tabla-umbral tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--color-verde-tabla);
}

.tabla-umbral tbody tr:last-child th,
.tabla-umbral tbody tr:last-child td {
    border-bottom: none;
}


/* ============================================================
   26. Spinner de carga (Paso 17)
   ============================================================ */

.spinner {
    display: none;
    margin: 20px auto;
    border: 4px solid #ddd;
    border-top: 4px solid var(--color-azul);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   27. Caja de error estructurado (Paso 18)
   ============================================================ */

.error-box {
    background: #ffe5e5;
    border: 1px solid #ff8a8a;
    padding: 16px;
    border-radius: 6px;
    margin-top: 20px;
}

/* Secciones de la zona privada */
.privado-divisor {
    border: none;
    border-top: 1px solid var(--color-gris-medio);
    margin: 2rem 0;
}

.privado-seccion__titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--nav-oscuro);
    margin: 0 0 0.4rem;
}

.privado-seccion__subtitulo {
    font-size: 0.9rem;
    color: var(--color-gris-texto);
    margin: 0 0 1.2rem;
}

/* Wrapper con scroll horizontal para tablas anchas */
.tabla-scroll {
    overflow-x: auto;
}

/* Skeleton de carga para tabla resumen */
.privado-item--cargando-tabla {
    height: 48px;
    border-radius: 6px;
}

/* Mensaje de error dentro de la tabla resumen */
.tabla-error-msg {
    color: #c62828;
    font-size: 0.875rem;
    margin: 0;
}

/* Acción de verificación de email (verificar-email.html) */
.verif-accion {
    margin-top: 1.5rem;
}

/* Enlace "Volver" dentro del banner de zona privada */
.privado-banner__volver {
    display: inline-block;
    margin-top: var(--espacio-sm);
    padding: .4rem 1.1rem;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.privado-banner__volver:hover {
    background:   rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.85);
    color:        #fff;
}

/* Tarjeta de acceso al área de contenido exclusivo */
.privado-acceso-exclusivo {
    display:         flex;
    align-items:     center;
    gap:             1.2rem;
    background:      var(--color-fondo-verde);
    border:          2px solid var(--color-verde-btn);
    border-radius:   10px;
    padding:         1.2rem 1.5rem;
    text-decoration: none;
    color:           var(--color-negro);
    box-shadow:      0 2px 8px rgba(46,125,50,0.12);
    transition:      background 0.18s, box-shadow 0.18s, border-color 0.18s;
    margin-bottom:   0.5rem;
}

.privado-acceso-exclusivo:hover {
    background:   #c8efc8;
    border-color: var(--nav-oscuro);
    box-shadow:   0 4px 16px rgba(46,125,50,0.22);
}

.privado-acceso-exclusivo__icono {
    font-size:  2rem;
    flex-shrink: 0;
}

.privado-acceso-exclusivo__texto {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    gap:             4px;
}

.privado-acceso-exclusivo__texto strong {
    font-size: 1rem;
    color:     var(--nav-oscuro);
    font-weight: 700;
}

.privado-acceso-exclusivo__texto span {
    font-size: 0.875rem;
    color:     var(--color-gris-texto);
}

.privado-acceso-exclusivo__flecha {
    font-size:   1.4rem;
    color:       var(--color-verde-btn);
    flex-shrink: 0;
    transition:  transform 0.2s ease;
}

.privado-acceso-exclusivo:hover .privado-acceso-exclusivo__flecha {
    transform: translateX(5px);
}

/* Mensaje de éxito al cambiar contraseña */
.cambiar-password-ok {
    color: var(--color-verde-btn);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Tabla resumen zona privada */
.resumen-tabla-card {
    background-color: #fff;
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    overflow: hidden;
    margin-bottom: var(--espacio-lg);
}

@media (max-width: 768px) {
    .resumen-tabla-card {
        overflow: visible;
    }
    .resumen-tabla {
        table-layout: auto !important;
        min-width: 520px;
    }
}

/* Skeleton de carga — simula la forma de la tabla mientras llegan los datos */
.skeleton-tabla {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
    margin-bottom: var(--espacio-lg);
}

.skeleton-tabla__cabecera {
    background: var(--nav-oscuro);
    height: 42px;
}

.skeleton-tabla__fila {
    height: 46px;
    background: linear-gradient(90deg, #e8f3ea 30%, #cce5d0 50%, #e8f3ea 70%);
    background-size: 400% 100%;
    animation: shimmer-verde 1.4s ease-in-out infinite;
    border-bottom: 1px solid #d4e8d8;
}

@keyframes shimmer-verde {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.resumen-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.resumen-tabla th,
.resumen-tabla td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid var(--color-gris-medio);
}

.resumen-tabla td:first-child {
    text-align: left;
}

.resumen-tabla th {
    background: var(--color-verde-tabla);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.resumen-tabla tbody tr:hover td {
    background: var(--color-gris-claro);
}

.resumen-tabla__totales td {
    font-weight: 700;
    background: #f0f4f0;
    border-top: 2px solid var(--color-verde-tabla);
    border-bottom: none;
}

.resumen-tabla__pendiente td {
    color: var(--color-gris-texto);
    font-style: italic;
}

.resumen-tabla__pendiente td[colspan] {
    text-align: center;
}

.resumen-tabla__tipo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.resumen-tabla__tipo--epa  { background: #e3f2fd; color: #1565c0; }
.resumen-tabla__tipo--eell { background: #e8f5e9; color: #2e7d32; }

/* Documentos oficiales zona privada */
.privado-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.privado-docs__grupo {
    background: #fff;
    border: 1px solid var(--color-gris-medio);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
}

.privado-docs__subtitulo {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-verde-btn);
    margin: 0 0 0.8rem;
}

.privado-docs__subtitulo--negro {
    color: var(--color-negro);
}

.privado-docs__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.privado-docs__lista a,
.privado-docs__lista span {
    font-size: 0.875rem;
    color: var(--color-verde-btn);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.privado-docs__lista span {
    color: var(--color-gris-texto);
    font-style: italic;
}

.privado-docs__lista a::before {
    content: "↗";
    font-size: 0.75rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.privado-docs__lista span::before {
    content: "⏳";
    font-size: 0.75rem;
    flex-shrink: 0;
}

.privado-docs__lista a:hover {
    text-decoration: underline;
}

/* Honeypot: campo invisible para humanos, visible para bots que rellenan formularios */
.hp-trampa {
    display: none;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* Contenedor de avisos — fondo verde para integrarse con el hero */
#avisos-banner {
    background-color: #DFF0E1;
    padding: 0.5rem var(--espacio-lg);
}

/* Ancho tope en px y NO centrados: van pegados a la izquierda a propósito.
   Antes era `max-width: 70%`, que ataba su tamaño al ancho de la pantalla y
   los hacía crecer sin fin en monitores grandes; con un valor fijo se
   comportan igual en cualquier resolución.
   Que queden a la izquierda en lugar de alineados con el contenido centrado
   de más abajo es una decisión estética de la autora, no un descuido. */
#avisos-banner .aviso-banner {
    max-width: 1200px;
    border-radius: 6px;
    border-left-width: 5px;
    margin: 0.4rem 0;
}

/* Banner de avisos: convocatorias en tramitación (sin resolución aún) */
.aviso-banner {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aviso-banner__icono {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.aviso-banner__texto strong {
    display: block;
    font-size: 0.95rem;
    color: #78350f;
    margin-bottom: 2px;
}

.aviso-banner__texto p {
    margin: 0;
    font-size: 0.875rem;
    color: #92400e;
    line-height: 1.4;
}

/* ============================================================
   28. Botón de descarga de gráfico como PNG (Task 2.2)
   ============================================================ */

/**
 * .btn-descargar-png
 * Botón pequeño tipo ghost (borde verde, fondo transparente)
 * que aparece en la cabecera de cada tarjeta de gráfico.
 * Empieza oculto (display:none) y el JS lo muestra solo cuando
 * el gráfico se ha pintado correctamente con Chart.js.
 * Al hacer clic llama a chart.toBase64Image() y descarga el PNG.
 */
.btn-descargar-png {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--fuente-base, 'Inter', sans-serif);
    color: var(--color-verde-btn);
    background: transparent;
    border: 1.5px solid var(--color-verde-btn);
    border-radius: var(--radio-btn, 6px);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.btn-descargar-png:hover,
.btn-descargar-png:focus-visible {
    background: var(--color-verde-btn);
    color: #ffffff;
    outline: none;
}

.btn-descargar-png:focus-visible {
    box-shadow: 0 0 0 3px rgba(71, 192, 121, 0.35);
}

/* ============================================================
   29. Badge de tendencia ↑/↓ en tarjetas KPI (Task 2.3)
   ============================================================ */

/**
 * .tendencia-badge
 * Pastilla pequeña que aparece bajo el número principal del KPI.
 * Muestra la variación % del último año respecto al anterior:
 *   ↑ verde  → crecimiento
 *   ↓ rojo   → descenso
 * Empieza oculta (display:none); home.js la muestra si hay ≥2 años.
 * WCAG AA: #2E7D32 sobre #e8f5e9 = 5,4:1 ✓  |  #C62828 sobre #fce4ec = 5,1:1 ✓
 */
.tendencia-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 6px;
    white-space: nowrap;
}

.tendencia-badge--sube {
    background: #e8f5e9;
    color: #2E7D32;
}

.tendencia-badge--baja {
    background: #fce4ec;
    color: #C62828;
}

/* ============================================================
   30. Top-5 lista de entidades con barra de proporción (Task 2.4)
   ============================================================ */

/**
 * .top5-lista
 * Lista ordenada de las 5 entidades con más importe.
 * Cada ítem muestra: posición · nombre · barra proporcional · importe.
 * La barra usa un <span> hijo cuyo ancho se calcula en JS como
 * porcentaje respecto al valor máximo (el ítem #1 = 100%).
 */
.top5-lista {
    list-style: none;
    padding: 0;
    margin: var(--espacio-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.top5-lista__item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
}

.top5-lista__pos {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-gris-texto);
    text-align: right;
    flex-shrink: 0;
}

.top5-lista__nombre-barra {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.top5-lista__nombre {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-negro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pista de la barra de proporción */
.top5-lista__pista {
    height: 6px;
    background: var(--color-gris-claro, #F3F4F6);
    border-radius: 999px;
    overflow: hidden;
}

/* Relleno dinámico — su width% se establece por JS */
.top5-lista__fill {
    display: block;
    height: 100%;
    background: var(--color-verde-btn);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.top5-lista__valor {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}


/* ------------------------------------------------------------
   Nota al pie con asterisco (KPI de recurrencia EELL, importe 2021 en
   exclusivo, etc.). Texto pequeño y gris que remite a un asterisco.
   ------------------------------------------------------------ */
.nota-asterisco {
    margin-top: var(--espacio-sm);
    margin-bottom: var(--espacio-lg);
    font-size: 0.85rem;
    color: var(--color-gris-texto);
    line-height: 1.5;
}


/* ============================================================
   25. SKIP-NAV — Accesibilidad por teclado (WCAG 2.4.1)
   ============================================================ */

/**
 * .skip-nav
 * Enlace "Saltar al contenido principal" oculto visualmente
 * pero accesible para usuarios de teclado y lectores de pantalla.
 * Al recibir foco (Tab) aparece en la esquina superior izquierda
 * con contraste WCAG AA (#fff sobre #1a3a1a = 12:1).
 *
 * Requiere que el destino tenga id="contenido-principal".
 */
.skip-nav {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    background: #1a3a1a;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 0 0 6px 0;
    text-decoration: none;
    white-space: nowrap;
}

.skip-nav:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
}


/* ============================================================
   29. FICHA DE ENTIDAD (entidad.html)
   Tarjeta de datos de entidad y tabla de historial de solicitudes.
   ============================================================ */

/* Tarjeta simple: borde suave + sombra ligera */
.tarjeta {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-medio);
    border-radius: var(--radio-card);
    padding: var(--espacio-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.tarjeta h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espacio-xs);
}

/* Desglose de municipios de una agrupación EELL */
.agrupacion-detalle {
    background-color: var(--color-gris-claro);
    border: 1px solid var(--color-gris-medio);
    border-left: 4px solid var(--color-verde-btn);
    border-radius: var(--radio-card);
    padding: var(--espacio-md);
}

.agrupacion-detalle h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espacio-sm);
}

@media (max-width: 640px) {
    .tarjeta {
        padding: var(--espacio-sm);
    }
    .agrupacion-detalle {
        padding: var(--espacio-sm);
        border-left-width: 3px;
    }
}


/* ============================================================
   30. PANEL DE ADMINISTRACIÓN (admin.html)
   Panel exclusivo para rol admin. Estructura:
   banner rojo → cuerpo gris → secciones card.
   ============================================================ */

/* ── Banner superior ── */
.admin-banner {
    background-color: #7F1D1D;   /* Rojo oscuro institucional */
    color: var(--color-blanco);
    padding: var(--espacio-xl) 0 var(--espacio-lg);
}

.admin-banner__titulo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-blanco);
    margin: 0 0 var(--espacio-xs);
}

.admin-banner__meta {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--espacio-sm);
}

.admin-banner__volver {
    display:         inline-block;
    margin-top:      var(--espacio-sm);
    font-size:       0.88rem;
    font-weight:     600;
    color:           #fff;
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.15);
    border:          1px solid rgba(255, 255, 255, 0.45);
    padding:         4px 14px;
    border-radius:   var(--radio-btn);
    transition:      background 0.2s, border-color 0.2s;
}

.admin-banner__volver:hover {
    background:   rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.8);
    color:        #fff;
}

/* ── Cuerpo: fondo gris claro ── */
.admin-cuerpo {
    background-color: #fdf4f5;
    padding: var(--espacio-xl) 0;
    min-height: 400px;
}

/* ── Alerta admin ── */
.admin-alerta {
    display: none;
    background-color: #FFF3CD;
    border: 1px solid #F59E0B;
    border-left: 4px solid #D97706;
    border-radius: 6px;
    padding: var(--espacio-sm) var(--espacio-md);
    margin-bottom: var(--espacio-md);
    font-size: 0.9rem;
    color: #B45309;
}

.admin-alerta.visible { display: block; }

/* ── Grid de estadísticas del sistema ── */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-md);
    margin-bottom: var(--espacio-xl);
}

.admin-stat {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: var(--espacio-md);
    text-align: center;
    border-top: 3px solid var(--admin-rojo);
}

.admin-stat__valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--nav-oscuro);
    display: block;
    line-height: 1.2;
}

.admin-stat__label {
    font-size: 0.82rem;
    color: var(--color-gris-texto);
    margin-top: 4px;
    display: block;
}

/* ── Sección tipo card ── */
.admin-seccion {
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    margin-bottom: var(--espacio-lg);
    overflow: hidden;
}

@media (max-width: 768px) {
    .admin-seccion {
        overflow: visible;
    }
    .admin-seccion__cuerpo {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.admin-seccion__cabecera {
    background: var(--admin-rojo);
    color: #fff;
    padding: .9rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-seccion__cabecera h2,
.titulo-admin {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.admin-seccion__subtitulo {
    font-size: .8rem;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}

.admin-seccion__cuerpo {
    padding: 1.25rem 1.5rem;
}

/* ── Alta de usuarios ──
   Plegado por defecto: el uso habitual de la sección es consultar el listado,
   no crear cuentas, así que el formulario no roba espacio hasta que se pide. */
.admin-alta {
    border: 1px solid var(--color-gris-medio);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.admin-alta__resumen {
    cursor: pointer;
    padding: .6rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-verde-btn);
    list-style: none;
}

.admin-alta__resumen::before {
    content: "+ ";
    font-weight: 700;
}

.admin-alta[open] .admin-alta__resumen::before {
    content: "− ";
}

.admin-alta__form {
    padding: 0 .9rem .9rem;
}

.admin-alta__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
    margin-bottom: .75rem;
}

.admin-alta__requisitos,
.admin-alta__nota {
    font-size: .875rem;
    color: #555;
    margin: 0 0 .5rem;
}

.admin-alta__requisitos--error {
    color: var(--estado-excluida);
    font-weight: 600;
}

/* ── Avisos de convocatorias ── */
.admin-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px solid #f0ebeb;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-aviso:last-child { border-bottom: none; }
.admin-aviso__info { flex: 1; min-width: 200px; }
.admin-aviso__titulo { font-weight: 600; font-size: .9rem; }
.admin-aviso__meta   { font-size: .8rem; color: #666; margin-top: .1rem; }
.admin-aviso__acciones { display: flex; gap: .5rem; flex-shrink: 0; }
.admin-acciones-td { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Fila de gestión del plazo de solicitud dentro de cada aviso activo */
.admin-aviso__plazo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.admin-plazo-label { font-size: .8rem; color: #555; display: flex; align-items: center; gap: .35rem; }
.admin-plazo-input { font-size: .8rem; padding: .2rem .4rem; border: 1px solid var(--color-gris-medio); border-radius: 6px; }
.admin-plazo-badge { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.admin-plazo-badge--abierto { background: #E2F0E4; color: #2E6B4F; }
.admin-plazo-badge--cerrado { background: #E0E0E0; color: #555; }
.admin-plazo-badge--falta   { background: #FDECC8; color: #8A5A00; }
.admin-aviso--resuelta .admin-aviso__titulo { color: #888; font-weight: 500; }
.admin-aviso--resuelta .admin-aviso__meta   { color: #aaa; }

.admin-resueltas { margin-top: 1rem; }
.admin-resueltas__summary {
    cursor: pointer;
    font-size: .82rem;
    color: #555;
    background: #f0f0f0;
    border-radius: 4px;
    padding: .3rem .7rem;
    list-style: none;
    display: inline-block;
}
.admin-resueltas__summary:hover { background: #e0e0e0; }
details[open] .admin-resueltas__summary::before { content: '▼ '; }
.admin-resueltas__summary::before { content: '▶ '; font-size: .7rem; }
.admin-resueltas__lista { margin-top: .25rem; }

.admin-seccion__pie {
    font-size: 0.78rem;
    color: var(--color-gris-texto);
    margin-top: var(--espacio-sm);
    padding-top: var(--espacio-sm);
    border-top: 1px solid var(--color-gris-medio);
}

/* ── Estado vacío ── */
.admin-vacio {
    text-align: center;
    color: var(--color-gris-texto);
    font-size: 0.9rem;
    padding: var(--espacio-lg) 0;
}

/* ── Controles de logs ── */
.admin-logs-controls {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    margin-bottom: var(--espacio-sm);
    flex-wrap: wrap;
}

/* Subtítulo de cada sub-bloque de logs del cron (BDNS / health) */
.admin-logs-subtitulo {
    margin: var(--espacio-lg) 0 var(--espacio-sm);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-negro);
}
.admin-logs-subtitulo:first-child {
    margin-top: 0;
}
.admin-logs-fichero {
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-gris-texto);
}

/* Paginación de la tabla de usuarios (reutiliza .paginacion) */
.admin-usuarios-paginacion {
    margin-top: var(--espacio-md);
}

.admin-logs-controls label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-negro);
}

.admin-logs-controls select {
    padding: 4px 8px;
    border: 1px solid var(--color-gris-medio);
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: var(--fuente-principal);
}

/* ── Log pre ── */
.admin-logs-pre {
    background-color: #111827;
    color: #D1FAE5;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    padding: var(--espacio-md);
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
    white-space: pre;
}

.admin-logs-pre--error {
    color: #FCA5A5;
}

/* ── Botones de acción (activar/desactivar, cambiar rol) ── */
.btn-accion {
    background: none;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: .25rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--fuente-principal);
    transition: background 0.15s;
}

.btn-accion:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-accion--verde       { color: #2a5a2a; }
.btn-accion--verde:hover { background: #e8f0e8; }

.btn-accion--rojo        { color: var(--admin-rojo); }
.btn-accion--rojo:hover  { background: #f3e0e2; }

.btn-accion--gris        { color: #555; }
.btn-accion--gris:hover  { background: #f0f0f0; }

/* ── Toast de confirmación ── */
.admin-toast {
    position: fixed;
    bottom: var(--espacio-lg);
    right: var(--espacio-lg);
    background-color: var(--color-verde-btn);
    color: var(--color-blanco);
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-btn);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 9999;
    pointer-events: none;
}

.admin-toast.visible {
    transform: translateY(0);
    opacity: 1;
}

/* ── Tabla dentro de admin ── */
.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-tabla th {
    background-color: #F3F4F6;
    border-bottom: 2px solid var(--color-gris-medio);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--color-negro);
}

.admin-tabla td {
    border-bottom: 1px solid var(--color-gris-medio);
    padding: 8px 12px;
    vertical-align: middle;
}

.admin-tabla tr:last-child td { border-bottom: none; }
.admin-tabla tr:hover td { background: #fdf8f8; }

.badge-rol {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 3rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-rol--admin      { background: #f3e0e2; color: #7F1D1D; }
.badge-rol--registrado { background: #e8f0e8; color: #2a5a2a; }

.badge-activo {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 3rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-activo--si { background: #d4edda; color: #155724; }
.badge-activo--no { background: #f8d7da; color: #721c24; }

/* ── Responsive admin ── */
@media (max-width: 900px) {
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-banner__titulo {
        font-size: 1.5rem;
    }

    .admin-seccion__cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .admin-logs-pre {
        font-size: 0.72rem;
    }
}


/* ============================================================
   31. PALETA NUEVA — index.html (Issue 14)
   Scoped a .pagina-inicio para no afectar el resto de páginas.
   Aplicado a <body class="pagina-inicio"> en index.html.
   ============================================================ */

/* --- 31.1 Override de variables de color (solo portada) --- */
.pagina-inicio {
    --color-primario:    #47C079;   /* se mantiene para chart.js */
    --color-hover:       #55D494;
    --color-fondo-verde: #EAF3EE;

    --color-verde-home:  #2E6B4F;   /* Verde propio de home — no pisa --color-verde-btn global */
    --color-foco:        #2E6B4F;   /* Foco WCAG */

    --color-arena:       #F2E9D8;   /* Fondo de tarjetas métricas, nav hover */
    --color-azul-nuevo:  #3A556A;   /* Azul complementario */
    --color-neutro:      #EDEAE6;   /* Neutro cálido — separadores, fondos */
    --color-texto:       #1A1A1A;   /* Texto principal de alta legibilidad */
}

/* --- 31.2 Hero / portada-split --- */
.pagina-inicio .portada-split {
    background: linear-gradient(135deg, #EAF3EE 0%, var(--color-neutro) 100%);
    padding: 4rem 0 4.5rem;
}

.pagina-inicio .portada-split__titulo {
    color: var(--color-verde-home);
    font-size: 2.8rem;
}

.pagina-inicio .portada-split__kicker {
    color: var(--color-azul-nuevo);
}

.pagina-inicio .portada-split__descripcion {
    color: var(--color-texto);
}

.pagina-inicio .btn-verde {
    background-color: var(--color-verde-home);
    border-color: var(--color-verde-home);
}

.pagina-inicio .btn-verde:hover {
    background-color: #245c3e;
    border-color: #245c3e;
}

.pagina-inicio .btn-verde:focus-visible {
    background-color: #245c3e;
    border-color: #245c3e;
    outline: 3px solid var(--color-foco);
    outline-offset: 3px;
}

/* --- 31.3 Tarjetas de métricas --- */
.pagina-inicio .metricas-grid .metric-card {
    background-color: var(--color-arena);
    border-top: 4px solid var(--color-verde-home);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- 31.4 Navbar (solo portada) — NEUTRALIZADO --- */
/* El navbar oscuro (#1A3429) está definido globalmente en Section 3.
   No se necesita ningún override por .pagina-inicio. */

/* --- 31.5 Footer (solo portada) — NEUTRALIZADO --- */
/* El footer oscuro (#1A3429) está definido globalmente en Section 17b.
   No se necesita ningún override por .pagina-inicio. */

/* ═══════════════════════════════════════════════════════════════════
   32. MODAL DE CONCLUSIONES (modal-grafica.js)
   Usado en index.html, estadisticas-epas.html y estadisticas-eell.html.
   El modal se inyecta dinámicamente en el DOM por modal-grafica.js.
   ═══════════════════════════════════════════════════════════════════ */

/* Trigger: botón que abre el modal desde la tarjeta de gráfica.
   Fondo verde claro desde el principio + texto verde oscuro: se ve
   como elemento interactivo sin necesidad de hover. Contenido
   centrado (el botón se estira al ancho de la tarjeta por el flex
   layout del padre). En hover el verde se intensifica. */
.card-grafico__trigger {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding: 0.45rem 0.95rem;
    background: var(--color-fondo-verde);
    border: 1px solid var(--color-foco);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--color-foco);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.card-grafico__trigger:hover,
.card-grafico__trigger:focus-visible {
    background: var(--color-foco);
    color: var(--color-blanco);
    outline: 2px solid var(--color-foco);
    outline-offset: 2px;
}

/* Contenedor del modal: capa fija que cubre la pantalla */
.modal-grafica {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-grafica--visible {
    display: flex;
}

/* Backdrop: fondo semitransparente oscuro */
.modal-grafica__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Panel: contenedor blanco centrado con sombra */
.modal-grafica__panel {
    position: relative;
    width: min(90vw, 720px);
    max-height: 82vh;
    background-color: var(--color-blanco);
    border-radius: var(--radio-card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Imagen de la gráfica como fondo tenue */
.modal-grafica__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

/* Contenido superpuesto sobre la imagen */
.modal-grafica__contenido {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Ocupa el panel (flex column) y permite que __cuerpo tenga scroll:
       flex:1 + min-height:0 en lugar de height:100% (que no resuelve con
       el max-height del panel y hacía que el texto largo se recortara). */
    flex: 1;
    min-height: 0;
}

/* Cabecera: título + botón cerrar */
.modal-grafica__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-sm);
    padding: var(--espacio-md) var(--espacio-md) var(--espacio-xs);
    border-bottom: 1px solid var(--color-gris-claro);
}

.modal-grafica__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-negro);
    margin: 0;
    line-height: 1.3;
}

.modal-grafica__cerrar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-gris-medio);
    border-radius: 50%;
    font-size: 1rem;
    color: var(--color-gris-texto);
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}

.modal-grafica__cerrar:hover,
.modal-grafica__cerrar:focus-visible {
    border-color: var(--color-foco);
    color: var(--color-foco);
    outline: 2px solid var(--color-foco);
    outline-offset: 2px;
}

/* Cuerpo: texto de conclusiones */
.modal-grafica__cuerpo {
    padding: var(--espacio-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-grafica__titulo-tag {
    font-weight: 400;
    color: var(--color-gris-texto);
    font-size: 0.9em;
}

.modal-grafica__texto {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-negro);
    margin: 0;
}
.modal-grafica__texto p {
    margin: 0 0 0.85rem;
}
.modal-grafica__texto p:last-child {
    margin-bottom: 0;
}
.modal-grafica__texto ul {
    margin: 0 0 0.85rem;
    padding-left: 1.4rem;
}
.modal-grafica__texto li {
    margin-bottom: 0.25rem;
}
.modal-grafica__fuentes {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gris-medio);
    font-size: 0.8rem;
    color: var(--color-gris-texto);
}
.modal-grafica__fuentes a {
    color: var(--color-azul);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .modal-grafica__panel {
        width: 95vw;
        max-height: 88vh;
    }
    .modal-grafica__cabecera {
        padding: var(--espacio-sm);
    }
    .modal-grafica__cuerpo {
        padding: var(--espacio-sm);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   33. ESTÉTICA VISUAL — index.html (inspirada en referencia Filey Cat)
   Todas las reglas con prefijo .pagina-inicio — solo afectan a la home.
   Capa encima de Sección 31: misma especificidad, orden posterior gana.

   Objetivos:
   · Navbar verde muy oscuro con texto blanco
   · Hero fondo crema cálida, ancho completo
   · Imagen del hero con gato-portada.jpg + corte orgánico (clip-path)
   · Botón CTA visible, pill-shaped, verde brillante
   · Tarjetas más suaves (radio 16px, sombra cálida)
   · Sección de datos con fondo crema en vez de blanco frío
   · Footer ajuste borde-top con el verde brillante del CTA
   ═══════════════════════════════════════════════════════════════════ */

/* --- 33.0 Variables adicionales (amplían las de Sección 31) --- */
.pagina-inicio {
    --nav-oscuro:    #1A3429;   /* Verde muy oscuro para el navbar */
    --btn-cta:       #2DC26C;   /* Verde brillante: botón CTA y acentos */
    --btn-cta-hover: #25A85B;   /* CTA en hover */
    --hero-crema:    #FAF4EE;   /* Fondo crema cálida del hero */
    --texto-hero:    #132D1F;   /* Texto oscuro del hero (alto contraste) */
    --card-radio:    16px;      /* Radio de esquinas más redondeado */
    --sombra-calida: 0 4px 20px rgba(26, 52, 41, 0.11);
}

/* ─── 33.1 NAVBAR — ahora global (Section 3) ───────────────────── */
/* Los estilos de navbar oscuro están en la Section 3 global.
   No se necesita override por .pagina-inicio. */

/* ─── 33.2 HERO — fondo crema, ancho completo ──────────────────── */
.pagina-inicio .portada-split {
    background: #DFF0E1;
    padding: 0;
    overflow: hidden;
}

/* Contenedor centrado con ancho máximo */
.pagina-inicio .portada-split__contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    grid-template-columns: 50fr 50fr;
    gap: 0;
    align-items: center;
}

/* Columna texto: padding interior para respirar */
.pagina-inicio .portada-split__texto {
    padding: clamp(var(--espacio-xl), 5vw, 72px) clamp(var(--espacio-md), 4vw, 56px)
             clamp(var(--espacio-xl), 5vw, 72px) clamp(var(--espacio-lg), 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ─── 33.3 TIPOGRAFÍA DEL HERO ──────────────────────────────────── */
.pagina-inicio .portada-split__kicker {
    color: var(--btn-cta);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.09em;
}

.pagina-inicio .portada-split__titulo {
    color: var(--texto-hero);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.1;
    margin-bottom: var(--espacio-sm);
}

.pagina-inicio .portada-split__descripcion {
    color: #4A5650;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: var(--espacio-md);
}

.pagina-inicio .portada-split__descripcion:last-of-type {
    margin-bottom: 0;
}

/* ─── 33.4 BOTÓN CTA DEL HERO — pill-shaped, verde brillante ────── */
.pagina-inicio .portada-split__texto .btn-primario {
    background-color: var(--color-verde-btn);
    border-radius: 50px;
    padding: 9px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    align-self: flex-start;
    letter-spacing: 0.01em;
    margin-top: var(--espacio-md);
    transition: background-color 0.2s ease;
}

/* El hover anterior incluía `transform: translateY(-1px)` para dar un
   efecto sutil de elevación. Eliminado porque el desplazamiento de 1 px
   durante la transición producía subpixel rendering del texto blanco
   y el botón se veía momentáneamente borroso. El cambio de color ya
   aporta affordance suficiente. */
.pagina-inicio .portada-split__texto .btn-primario:hover {
    background-color: #245c27;
    color: #FFFFFF;
}

.pagina-inicio .portada-split__texto .btn-primario:focus-visible {
    background-color: #245c27;
    outline: 3px solid var(--texto-hero);
    outline-offset: 3px;
}

/* ─── 33.5 IMAGEN DEL HERO — gato-portada.jpeg ──── */
/*
   Técnica: la imagen se carga en HTML con <img src="assets/img/home/gato-portada.jpg">.
   El contenedor actúa solo como wrapper con overflow: hidden.
   La <img> usa object-fit: cover y object-position: center 10%
   para encuadrar la cabeza/torso del gato. clip-path: none — bordes limpios.
*/
.pagina-inicio .portada-split__imagen {
    display: block;
    background-color: transparent;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    min-height: 0;
}

.pagina-inicio .portada-split__imagen img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* ─── 33.6 SECCIÓN DE DATOS — crema cálida ─────────── */
.pagina-inicio .seccion-datos {
    background-color: var(--hero-crema, #FAF4EE);
}

.pagina-inicio .seccion-datos__titulo {
    color: var(--texto-hero);
}

/* ─── 33.7 TARJETAS DE MÉTRICAS — más suaves y cálidas ─────────── */
.pagina-inicio .card-metrica-verde {
    background-color: #FFFFFF;
    border-radius: var(--card-radio);
    border-top: 4px solid var(--color-acento);
    box-shadow: var(--sombra-calida);
    padding: var(--espacio-lg) var(--espacio-md);
}

.pagina-inicio .card-metrica-verde__numero {
    color: var(--texto-hero);
}

/* ─── 33.8 SECCIÓN DE GRÁFICOS (fondo-stats) — verde suave ── */
.pagina-inicio .fondo-stats {
    background-color: #DFF0E1;
    min-height: auto;
    /* Separador sutil: convocatorias y gráficas comparten fondo verde; esta línea
       las delimita (antes las separaba la sección crema de resoluciones, ya fusionada). */
    border-top: 2px solid #BFE3C9;
}
.pagina-inicio .fondo-stats .seccion {
    padding: 0;
}

/* ─── 33.9 TARJETAS DE GRÁFICOS — radio mayor, sombra cálida ────── */
.pagina-inicio .card-grafico {
    border-radius: var(--card-radio);
    box-shadow: var(--sombra-calida);
}

/* ─── 33.10 FOOTER — ahora global (Section 17b) ────────────────── */
/* Los estilos de footer oscuro están en la Section 17b global.
   No se necesita override por .pagina-inicio. */

/* ─── 33.11 RESPONSIVE HERO ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .pagina-inicio .portada-split__contenedor {
        grid-template-columns: 1fr;
        padding: 0;
        min-height: auto;
    }

    .pagina-inicio .portada-split__imagen {
        order: -1;
        margin: 0 var(--espacio-md);
        border-radius: 12px;
    }

    .pagina-inicio .portada-split__imagen img {
        object-fit: cover;
        height: clamp(240px, 55vw, 380px);
        object-position: 50% 35%;
    }

    .pagina-inicio .portada-split__texto {
        padding: var(--espacio-lg) var(--espacio-md);
        text-align: center;
        align-items: center;
    }

    .pagina-inicio .portada-split__titulo {
        font-size: 2.1rem;
    }

    .pagina-inicio .portada-split__descripcion {
        max-width: 100%;
    }

    .pagina-inicio .portada-split__texto .btn-primario {
        align-self: center;
        margin-top: var(--espacio-md);
    }
}


/* ============================================================
   34. AJUSTES ADICIONALES — 2026-05-17
   ============================================================ */

/* ─── 34.1 PÁGINA 404 — contenedor más compacto ────────────────── */
/*
   Los estilos inline del HTML (max-width:950px / max-width:620px)
   se sobreescriben desde CSS con !important sin modificar el HTML.
   El modificador .auth-card--simple solo lo usa 404.html,
   por lo que el cambio no afecta al resto de páginas auth.
*/
.auth-card--simple {
    max-width: 520px !important;
    margin: 0 auto !important;
}

/* Imagen de la página 404 */
.auth-card--simple .auth-card__formulario img {
    max-width: 320px !important;
    margin: 0 auto 0.3rem !important;
}

/* Padding interior más ceñido */
.auth-card--simple .auth-card__formulario {
    padding: 0.5rem 1.75rem 1.75rem !important;
}


/* ─── 34.2 PÁGINAS DE ERROR (404 y 50x) ────────────────────────── */
.pagina-error {
    background: var(--color-blanco);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.pagina-error__btn {
    display: block;
    width: fit-content;
    margin: 0.75rem auto 0;
    padding: 0.5rem 1.75rem;
}

/* ─── 34.3 PÁGINA 404 ──────────────────────────────────────────── */
.pagina-404 {
    max-width: 560px;
}
.pagina-404__imagen {
    padding: 0 2.5rem;
}
.pagina-404__imagen img {
    width: 100%;
    display: block;
}
.pagina-404__contenido {
    padding: 0.6rem 2rem 1.2rem;
}
.pagina-404__texto {
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

/* ─── 34.4 PÁGINA 50x ──────────────────────────────────────────── */
.pagina-50x {
    max-width: 720px;
}
.pagina-50x__contenido {
    padding: 2rem 1.5rem 1.75rem;
}
.pagina-50x__imagen {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0.5rem auto;
    border-radius: 12px;
}
.pagina-50x__titulo {
    font-size: 1.65rem;
    margin-bottom: 0.5rem;
}
.pagina-50x__texto {
    margin-bottom: 0.25rem;
    line-height: 1.4;
    font-size: 1.05rem;
}
.pagina-50x__simpatico {
    font-style: italic;
    margin-bottom: 0.5rem;
    color: var(--color-verde-btn);
    font-size: 1.05rem;
}
.pagina-50x__botones {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* ─── 34.3 RECUPERAR CONTRASEÑA — contenedor compacto ──────────────── */
/*
   recuperar-password.html usa .auth-card--simple pero el wrapper .auth-page
   heredaba el ancho de 920px (diseñado para login/registro de 2 columnas).
   Aquí se reduce el ancho del wrapper para alinearlo con la card de 480px
   y se ajusta el padding vertical del fondo.
   Alcance: scoped via :has(#recuperar-alerta) — solo afecta a esta página.
   Compatible: Chrome 105+, Firefox 121+, Safari 15.4+.
*/
.auth-fondo:has(#recuperar-alerta) {
    align-items: flex-start;          /* no centra verticalmente */
    padding-top: 50px;
    padding-bottom: 50px;
}

.auth-page:has(#recuperar-alerta) {
    max-width: 460px;                 /* alineado con la card (480px) */
}

/* El enlace "← Volver a iniciar sesión" queda alineado con el borde
   izquierdo de la card porque ambos comparten el mismo ancho máximo. */


/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 35 — REFACTOR INLINE STYLES (Tarea 13.2)
   Clases extraídas de atributos style="" de buscador.html e index.html.
   ─────────────────────────────────────────────────────────────────── */

/* 35.0 buscador.html — buscador de entidades */

/* Campo de búsqueda de entidad: ocupa más espacio que los demás filtros */
.form-grupo--entidad {
    flex: 2;
    min-width: 200px;
}

/* Fila de botones de acción del formulario de filtros */
.filtros__botones {
    display: flex;
    gap: var(--espacio-sm);
    margin-top: var(--espacio-sm);
}

/* Leyenda de tramos EELL (visual; display:none permanece inline, gestionado por JS) */
.leyenda-tramos {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-gris-texto);
}

/* Info de resultados ("Mostrando X de Y…") */
.info-resultados {
    font-size: 0.9rem;
    color: var(--color-gris-texto);
}

/* Zona derecha de los controles sobre la tabla (orden + CSV) */
.tabla-controles__derecha {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    flex-wrap: wrap;
}

/* Form-grupo del selector de orden (horizontal, sin margen extra) */
.form-grupo--orden {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--espacio-xs);
}

/* Etiqueta del selector de orden */
.label-orden {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Select de orden con anchura mínima fija */
.select-orden {
    min-width: 180px;
}

/* Botón de descarga CSV */
.btn-csv {
    white-space: nowrap;
    font-size: 0.88rem;
}

/* 35.0b index.html — métricas de carga */

/* Tarjeta de métricas que ocupa el ancho completo del grid */
.metricas-carga {
    grid-column: 1 / -1;
}

/* 35.0c Estadísticas (epas + eell) y index — bloques de cabecera de sección */

/* Wrapper de cabecera antes de los grids de KPIs y gráficos */
.bloque-intro {
    margin-bottom: var(--espacio-lg);
    text-align: center;
}

/* Título principal H1/H2 dentro del bloque-intro */
.bloque-titulo {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-negro);
}

/* Variante de bloque-titulo en tamaño medio (secciones internas) */
.bloque-titulo--md {
    font-size: 1.75rem;
}

/* Subtítulo descriptivo bajo el título */
.bloque-subtitulo {
    color: var(--color-gris-texto);
    margin-top: 4px;
}

/* Párrafo de fecha de actualización */
.bloque-actualizacion {
    margin-top: var(--espacio-xs);
}

/* Enlace a fuente de datos (pequeño, color azul) */
.link-fuente {
    font-size: 0.9rem;
    color: var(--color-azul);
}

/* Bloque de convocatorias centrado (display:none gestionado por JS) */
.convocatorias-bloque {
    margin-top: 0;
    text-align: center;
}
.convocatorias-subtitulo {
    margin-bottom: var(--espacio-md);
}

/* Dos subtítulos seguidos (descripción + nota de «Ver»): el segundo se pega al
   primero en lugar de dejar el gap completo entre párrafos. */
.convocatorias-subtitulo + .convocatorias-subtitulo {
    margin-top: calc(0.25rem - var(--espacio-md));
}

/* Variante de card-grafico__titulo con texto centrado */
.card-grafico__titulo--centrado {
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Nota pequeña bajo tabla de convocatorias */
.convocatorias-nota {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-gris-texto);
}

/* Enlaces dentro de la nota (Bases reguladoras): azul institucional
   coherente con el resto de enlaces externos del sitio. Subrayado por
   convención web; se quita en hover para dar feedback. */
.convocatorias-nota a {
    color: var(--color-azul);
    text-decoration: underline;
}

.convocatorias-nota a:hover,
.convocatorias-nota a:focus-visible {
    text-decoration: none;
}

/* Utilidad: margin-bottom lg en contenedores de grid */
.mb-lg {
    margin-bottom: var(--espacio-lg);
}

/* Utilidad: margin-top xl */
.mt-xl {
    margin-top: var(--espacio-xl);
}

/* 35.0d index.html — bloque de convocatorias y resoluciones */

/* Título de sub-bloque (convocatorias, resoluciones…) */
.sub-bloque__titulo {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--espacio-sm);
}

/* Versión centrada del sub-bloque__titulo */
.sub-bloque__titulo--centrado {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-align: center;
}


/* ── Umbral de puntuación (corte de concesión por año) ── */
/* Banda crema entre las dos secciones verdes del inicio (convocatorias y
   gráficos), para romper la secuencia de dos verdes seguidos. */
#seccion-umbral {
    background-color: var(--hero-crema, #FAF4EE);
    padding: var(--espacio-lg) 0;
}

.umbral-bloque {
    text-align: center;
}

.umbral-intro {
    /* Ancho completo del contenedor (como las dos tablas de arriba) para que
       el texto ocupe más en horizontal y menos en alto. */
    margin: 0 auto var(--espacio-md);
    text-align: justify;
    hyphens: auto;              /* guionado (lang="es") para evitar huecos feos */
    font-size: 0.95rem;
    color: var(--color-gris-texto);
    line-height: 1.6;
}
.umbral-intro p + p {
    margin-top: var(--espacio-sm);
}

/* El ancho se limita en el wrapper (no en la tabla) para que el border-radius
   de .tabla-wrapper envuelva la tabla y las esquinas queden redondeadas. */
.umbral-wrapper {
    max-width: 640px;
    margin-inline: auto;
    /* La tabla va debajo del texto que la explica; sin este aire quedaban
       pegados y se leían como un solo bloque. */
    margin-top: 1.75rem;
}

.umbral-sin-corte {
    color: var(--color-gris-texto);
    font-style: italic;
}
.umbral-detalle {
    color: var(--color-gris-texto);
    font-size: 0.85em;
}

/* Subtítulo centrado del sub-bloque */
.sub-bloque__subtitulo {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-gris-texto);
    margin-bottom: var(--espacio-md);
}

.fondo-crema {
    background-color: var(--hero-crema, #FAF4EE);
    min-height: calc(100vh - var(--altura-nav));
}

#seccion-convocatorias {
    background-color: #DFF0E1;
    padding: var(--espacio-lg) 0;
}

.seccion-resoluciones {
    background-color: var(--hero-crema, #FAF4EE);
    padding: var(--espacio-lg) 0;
}

/* Número grande en tarjeta resumen (ej. total concedido) */
.card-grafico__numero {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-verde-btn);
    margin: 0;
}

/* Nota secundaria bajo el número */
.card-grafico__nota {
    color: var(--color-gris-texto);
    font-size: 0.9rem;
    margin-top: 6px;
}

/* Pie de tarjeta con links de acción */
.card-grafico__pie {
    margin-top: auto;
    padding-top: var(--espacio-md);
}

/* Enlace de acción dentro de tarjeta de estadística */
.link-estadistica {
    display: inline-block;
    color: var(--color-azul);
    font-size: 0.9rem;
}

.link-estadistica + .link-estadistica {
    margin-left: 12px;
}

/* Variante de card-grafico con layout flex columna */
.card-grafico--col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Grid lado a lado para las dos tasas (éxito / fracaso) */
.tasa-kpi-grid {
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--espacio-md) 0;
}

.tasa-kpi-item {
    text-align: center;
}

.tasa-kpi-item .card-grafico__numero {
    font-size: 5.5rem;
    line-height: 1;
}

.card-grafico__numero--exito   { color: #2E7D32; }   /* = badge Concedida */
.card-grafico__numero--fracaso { color: #C62828; }   /* = badge Excluida  */

.card-grafico__nota--xs {
    font-size: 0.72rem;
    margin-top: 2px;
}

/* Variante de chart-container centrada (para placeholder del mapa de calor) */
.chart-container--centrado {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder del mapa de calor CCAA (Tarea 13.3 pendiente) */
.mapa-placeholder {
    text-align: center;
    color: var(--color-gris-texto);
}

.mapa-placeholder__icono {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.mapa-placeholder__texto {
    font-size: 0.9rem;
}

/* 35.0e entidad.html — leyenda de tramos */
/* (reutiliza .leyenda-tramos de solicitudes; se añade
   aquí solo el margin diferente que usa entidad) */
.leyenda-tramos--entidad {
    margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 36 — MODAL DE ENTIDAD
   Ficha resumen de entidad abierta desde buscador.html.
   Backdrop semitransparente + card centrada + animación fade+scale.
   ─────────────────────────────────────────────────────────────────── */

/* 36.1 Backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--espacio-md);
    /* Estado inicial: oculto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.modal-backdrop.modal-abierto {
    opacity: 1;
    visibility: visible;
}

/* 36.2 Card del modal */
.modal-card {
    background-color: var(--color-blanco);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Animación de entrada */
    transform: scale(0.93) translateY(12px);
    transition: transform 0.22s ease, opacity 0.22s ease;
    opacity: 0;
}

.modal-backdrop.modal-abierto .modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 36.3 Cabecera del modal */
.modal-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-sm);
    padding: var(--espacio-md) var(--espacio-md) var(--espacio-sm);
    border-bottom: 1px solid var(--color-gris-medio);
    flex-shrink: 0;
}

.modal-cabecera__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-texto);
    margin: 0;
    line-height: 1.35;
}

.modal-cabecera__cif {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-gris-texto);
    display: block;
    margin-top: 2px;
}

/* 36.4 Botón de cierre */
.modal-cerrar {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gris-texto);
    font-size: 1.4rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
}

.modal-cerrar:hover,
.modal-cerrar:focus-visible {
    color: var(--color-texto);
    background-color: var(--color-fondo-verde);
    outline: 2px solid var(--color-verde-btn);
    outline-offset: 2px;
}

/* 36.5 Cuerpo scrollable */
.modal-cuerpo {
    padding: var(--espacio-md);
    overflow-y: auto;
    flex: 1;
}

/* 36.6 Filas de datos de la ficha */
.modal-dato {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.modal-dato__etiqueta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-negro);
    flex-shrink: 0;
}

.modal-dato__etiqueta::after {
    content: ':';
}

.modal-dato__valor {
    font-size: 0.9rem;
    color: var(--color-gris-texto);
}

/* 36.7 Tabla de histórico dentro del modal */
.modal-historico-titulo {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gris-texto);
    margin: var(--espacio-md) 0 var(--espacio-xs);
}

.modal-historico-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.modal-historico-tabla th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gris-texto);
    padding: 6px 8px;
    border-bottom: 2px solid var(--color-gris-medio);
}

.modal-historico-tabla td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--color-gris-medio);
    color: var(--color-texto);
    vertical-align: middle;
}

.modal-historico-tabla tbody tr:last-child td {
    border-bottom: none;
}

.modal-tabla__expediente {
    font-size: 0.78rem;
    color: var(--color-gris-texto);
    word-break: break-all;
}

/* 36.8 Estado de carga / error / vacío dentro del modal */
.modal-estado {
    text-align: center;
    padding: var(--espacio-lg) var(--espacio-md);
    color: var(--color-gris-texto);
    font-size: 0.92rem;
}

.modal-estado--error {
    color: var(--color-rojo, #c0392b);
}

/* 36.9 Pie del modal con enlace a ficha completa */
.modal-pie {
    padding: var(--espacio-sm) var(--espacio-md);
    border-top: 1px solid var(--color-gris-medio);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-sm);
    flex-shrink: 0;
    background-color: var(--color-fondo-verde);
}

/* 36.10 Enlace a la ficha completa */
.modal-enlace-pagina {
    font-size: 0.875rem;
    color: var(--color-verde-btn);
    text-decoration: none;
    font-weight: 500;
}

.modal-enlace-pagina:hover {
    text-decoration: underline;
}

/* 36.11 Responsive: móvil */
@media (max-width: 600px) {
    .modal-card {
        max-height: 92vh;
        border-radius: 8px;
    }

    .modal-cabecera {
        padding: var(--espacio-sm);
    }

    .modal-cuerpo {
        padding: var(--espacio-sm);
    }

    .modal-pie {
        padding: var(--espacio-sm);
    }
}


/* ═══════════════════════════════════════════════════════════════
   SECCIÓN 37 — MAPA DE CALOR CCAA
   estadisticas-eell.html — choropleth Leaflet + GeoJSON
   ═══════════════════════════════════════════════════════════════ */

.mapa-ccaa-hint {
    display: none;
}

@media (max-width: 768px) {
    .mapa-ccaa-hint {
        display:     block;
        font-size:   0.8rem;
        color:       var(--color-gris-texto);
        text-align:  center;
        margin-bottom: 0.5rem;
        font-style:  italic;
    }
}

.mapa-ccaa-wrapper {
    position: relative;
    width:    100%;
}

.mapa-info-central {
    position:         absolute;
    top:              50%;
    left:             50%;
    transform:        translate(-50%, -50%);
    z-index:          1200;
    background:       var(--color-blanco);
    border-radius:    8px;
    box-shadow:       0 3px 14px rgba(0,0,0,0.22);
    padding:          7px 11px;
    font-family:      'Inter', sans-serif;
    font-size:        0.78rem;
    line-height:      1.5;
    color:            var(--color-negro);
    pointer-events:   none;
    text-align:       center;
    white-space:      nowrap;
}

#mapa-ccaa {
    height:           640px;
    width:            100%;
    border-radius:    8px;
    background-color: var(--color-fondo-verde);
}

.mapa-leyenda {
    background-color: var(--color-blanco);
    padding:          10px 14px;
    border-radius:    6px;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.14);
    font-family:      'Inter', sans-serif;
    font-size:        0.78rem;
    line-height:      1.5;
    color:            var(--color-gris-texto);
}

.mapa-leyenda__titulo {
    font-weight:    600;
    font-size:      0.74rem;
    margin:         0 0 6px 0;
    color:          var(--color-negro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mapa-leyenda__fila {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 3px;
}

.mapa-leyenda__color {
    display:       inline-block;
    width:         14px;
    height:        14px;
    border-radius: 3px;
    flex-shrink:   0;
    border:        1px solid rgba(0, 0, 0, 0.08);
}

.leaflet-tooltip {
    font-family:      'Inter', sans-serif;
    font-size:        0.82rem;
    line-height:      1.5;
    border:           none !important;
    border-radius:    6px;
    box-shadow:       0 2px 10px rgba(0, 0, 0, 0.16);
    padding:          8px 12px;
    color:            var(--color-negro);
    background-color: var(--color-blanco);
}

.leaflet-tooltip::before {
    display: none !important;
}

@media (max-width: 768px) {
    #mapa-ccaa { height: 400px; }
    .mapa-leyenda {
        padding:   6px 8px;
        font-size: 0.68rem;
    }
    .mapa-leyenda__titulo {
        font-size:     0.62rem;
        margin-bottom: 4px;
    }
    .mapa-leyenda__fila {
        gap:           5px;
        margin-bottom: 2px;
    }
    .mapa-leyenda__color {
        width:  10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    #mapa-ccaa { height: 320px; border-radius: 6px; }
}

/* Etiquetas de nombre sobre las CCAA del mapa */
.mapa-label {
    pointer-events: none;
    transform:      translate(-50%, -50%);
    text-align:     center;
}
.mapa-label-badge {
    display:          inline-block;
    font-family:      'Inter', sans-serif;
    font-size:        0.65rem;
    font-weight:      600;
    color:            #1A1A1A;
    white-space:      nowrap;
    background-color: rgba(255, 255, 255, 0.85);
    padding:          1px 5px;
    border-radius:    3px;
    box-shadow:       0 1px 3px rgba(0,0,0,0.2);
}

/* Eliminar artefactos de bordes entre tiles al hacer zoom en Leaflet */
.leaflet-tile {
    border: none;
    outline: none;
}
.leaflet-tile-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Indicador de nivel de zoom del mapa */
.mapa-zoom-indicator {
    background-color: rgba(255, 255, 255, 0.85);
    padding:          4px 8px;
    border-radius:    4px;
    font-family:      'Inter', sans-serif;
    font-size:        0.72rem;
    font-weight:      600;
    color:            var(--color-gris-texto);
    box-shadow:       0 1px 4px rgba(0,0,0,0.15);
    pointer-events:   none;
}

/* Fix agresivo para líneas entre tiles Leaflet */
.leaflet-container {
    background: #e8e0d4;
}
.leaflet-tile-pane img {
    margin: -1px;
    padding: 1px;
}

/* Eliminar outline de foco al clicar polígonos Leaflet */
.leaflet-interactive:focus {
    outline: none;
}

/* Modal top 10 municipios (exclusivo.html) */
.modal-ccaa {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.5);
    z-index:         2000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}
.modal-ccaa__panel {
    background:    var(--color-blanco);
    border-radius: 16px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.2);
    width:         100%;
    max-width:     680px;
    max-height:    80vh;
    overflow-y:    auto;
}
.modal-ccaa__cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.5rem 0.75rem;
    border-bottom:   1px solid var(--color-gris-claro);
}
.modal-ccaa__titulo {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--nav-oscuro);
    margin:      0;
}
.modal-ccaa__cerrar {
    background: none;
    border:     none;
    font-size:  1.4rem;
    cursor:     pointer;
    color:      var(--color-gris-texto);
    line-height: 1;
    padding:    0 0.25rem;
}
.modal-ccaa__cerrar:hover { color: var(--color-negro); }
.modal-ccaa__cuerpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     1.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 768px) {
    .modal-ccaa__cuerpo {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}
.modal-ccaa__col-titulo {
    font-size: 0.875rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:         var(--color-gris-texto);
    margin:        0 0 0.75rem;
}
.modal-ccaa__lista {
    list-style: none;
    margin:     0;
    padding:    0;
}
.modal-ccaa__lista li {
    display:       flex;
    align-items:   baseline;
    gap:           0.5rem;
    padding:       0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}
.modal-ccaa__lista li:last-child { border-bottom: none; }
.modal-ccaa__pos {
    font-size:   0.72rem;
    font-weight: 700;
    color:       var(--color-gris-texto);
    min-width:   1.2rem;
}
.modal-ccaa__nombre {
    flex:        1;
    color:       var(--color-negro);
    font-size: 0.875rem;
}
.modal-ccaa__importe {
    font-weight: 600;
    color:       var(--color-verde-btn);
    white-space: nowrap;
}

.modal-ccaa__col-nota {
    font-size:  0.73rem;
    color:      var(--color-gris-texto);
    margin:     -0.25rem 0 0.5rem;
    font-style: italic;
}

/* ============================================================
   PÁGINAS LEGALES (aviso-legal.html, privacidad.html)
   ============================================================ */

/* Enlace "← Volver al inicio" en la cabecera de las páginas legales.
   Azul institucional (en lugar del verde primario del resto del sitio)
   para que el lector identifique inmediatamente el enlace de retorno. */
.legal-back-link {
    color:     var(--color-azul);
    font-size: 0.9rem;
}

/* ============================================================
   BOTÓN "VOLVER ARRIBA" (scroll-arriba.js)
   ------------------------------------------------------------
   Botón flotante fijo en la esquina inferior derecha. Oculto por
   defecto; JS le añade .btn-subir--visible cuando hay scroll.
   z-index por debajo de modales (2000/9999) y del navbar (1200)
   para no taparlos, pero por encima del contenido normal.
   ============================================================ */
.btn-subir {
    position:         fixed;
    bottom:           1.5rem;
    right:            1.5rem;
    z-index:          1100;

    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            3rem;
    height:           3rem;
    padding:          0;

    background-color: var(--color-verde-btn);
    color:            var(--color-blanco);
    border:           none;
    border-radius:    50%;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.25);
    cursor:           pointer;

    /* Oculto y no interactivo hasta que haya scroll suficiente. */
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(0.5rem);
    transition:       opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.btn-subir--visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.btn-subir:hover {
    background-color: var(--color-primario);
}

.btn-subir:focus-visible {
    outline:        3px solid var(--color-foco);
    outline-offset: 2px;
}

.btn-subir__icono {
    font-size:   1.5rem;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .btn-subir {
        transition: opacity 0.01ms, visibility 0.01ms;
        transform:  none;
    }
    .btn-subir--visible {
        transform: none;
    }

    /* El logo de la franja de apoyo crece al pasar por encima: es decoración
       y debe desaparecer si se ha pedido reducir el movimiento. El contorno
       de foco se mantiene, porque eso no es decoración sino navegación. */
    .footer-apoyo__logo,
    .footer-apoyo__logo:hover img {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   PÁGINA DE RECURSOS (recursos.html)
   Migrado desde el <style> embebido del HTML. Cada bloque de
   categoría lleva un tono pastel distinto, suave sobre el fondo
   crema de la página.
   ============================================================ */
.recursos-bloque {
    margin-bottom: var(--espacio-xl);
    border-radius: 14px;
    padding: var(--espacio-md);
}

.recursos-bloque--proteccion     { background: #E2F0E4; }  /* verde pastel */
.recursos-bloque--colonias       { background: #E1EEF9; }  /* azul pastel */
.recursos-bloque--especializadas { background: #ECE6F6; }  /* lila pastel */
.recursos-bloque--campanas       { background: #FCE4EC; }  /* rosa pastel */
.recursos-bloque--guias          { background: #FBF0DC; }  /* crema pastel */

/* ── Tarjeta de guía o documento ──
   El resto de la página son tarjetas de ORGANIZACIONES, con su logo. Estas
   son documentos y artículos, que no tienen logo propio: forzarlos al mismo
   molde habría obligado a repetir el logo de quien los publica. Aquí manda
   el título, que es lo que se busca al mirar una lista de lecturas. */
.card-guia {
    background: #ffffff;
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-guia__tipo {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-verde-tabla);
    margin: 0;
}

.card-guia__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.card-guia__titulo a {
    color: var(--color-negro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.card-guia__titulo a:hover {
    color: var(--color-verde-btn);
}

.card-guia__descripcion {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Los <a> globales van sin subrayado y con color heredado, así que dentro de
   un párrafo pasarían por texto corriente. Aquí hay enlaces a organismos en
   mitad de la frase y tienen que verse pulsables. */
.card-guia__descripcion a {
    color: var(--color-verde-btn);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card-guia__descripcion a:hover {
    color: var(--color-hover);
}

.recursos-bloque__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--espacio-md);
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.recursos-bloque__titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-negro);
    margin: 0;
}

/* Tarjeta de entidad */
.card-entidad {
    background: #ffffff;
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espacio-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.card-entidad a { order: 2; }

.card-entidad img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: center;
}

.card-entidad__nombre {
    order: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-negro);
    margin: 0;
}

.card-entidad__categoria {
    display: none;
}

.card-entidad__descripcion {
    order: 3;
    font-size: 0.88rem;
    color: var(--color-gris-texto);
    margin: 0;
    line-height: 1.5;
}

/* Grid flexible de 3 columnas */
.grid-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-md);
}

@media (max-width: 900px) {
    .grid-recursos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-recursos {
        grid-template-columns: 1fr;
    }
}

/* Nota al pie de la página de recursos */
.recursos-nota {
    font-size: 0.82rem;
    color: var(--color-gris-texto);
    margin-top: var(--espacio-lg);
    padding-top: var(--espacio-sm);
    border-top: 1px solid var(--color-gris-medio);
}


/* ============================================================
   BUSCADOR DE EXCLUSIONES (exclusiones.html)
   ============================================================ */

/* El desplegable de causa muestra "código — motivo" y necesita
   más ancho que los selects cortos de tipo/año. */
.form-grupo--causa {
    min-width: 260px;
    flex: 1 1 260px;
}

/* Chip con el/los código(s) de causa. Es un <button> (accesible por
   teclado) que abre el modal con el motivo completo de cada código.
   En rojo, el color de estado "excluida" de los badges. */
.chip-causa {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--estado-excluida);
    border-radius: 20px;
    background-color: #FDECEA;   /* rojo suave, tinte de --estado-excluida */
    color: var(--estado-excluida);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chip-causa:hover,
.chip-causa:focus-visible {
    background-color: var(--estado-excluida);
    color: #fff;
}

/* Lista código → motivo dentro del modal de causas */
.modal-causas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-causas-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* El código va en su propia "pastilla" alineada con la primera línea,
   en el mismo rojo que el chip de la tabla. */
.modal-causas-lista__codigo {
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: center;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: #FDECEA;   /* rojo suave, tinte de --estado-excluida */
    color: var(--estado-excluida);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Variante para las tarjetas de exclusiones (estadísticas EPA/EELL):
   el botón de conclusiones va en el rojo del estado "excluida" pero
   rebajado (fondo translúcido), a juego con sus gráficas. */
.card-grafico--exclusiones .card-grafico__trigger {
    background: rgba(198, 40, 40, 0.08);      /* --estado-excluida al 8% */
    border-color: rgba(198, 40, 40, 0.55);
    color: var(--estado-excluida);
}

.card-grafico--exclusiones .card-grafico__trigger:hover,
.card-grafico--exclusiones .card-grafico__trigger:focus-visible {
    background: var(--estado-excluida);
    color: var(--color-blanco);
    outline-color: var(--estado-excluida);
}