/* ---------------------------------------------------
    TIPOGRAFÍA ASVEF
    Se carga después de style5.css y main.css (index.php).
    Una sola familia (Lato 400 / 400 cursiva / 700, cargada en index.php),
    texto de lectura oscuro y alineado a la izquierda, a todo el ancho de la columna (como antes).
----------------------------------------------------- */

:root {
    --fuente-texto: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --texto: #222;              /* 15,9:1 sobre blanco */
    --texto-secundario: #555;   /* 7,5:1 */
    --verde-asvef: #008D36;     /* color de marca: solo en texto grande (4,3:1) */
    --verde-texto: #007A2F;     /* mismo verde, oscurecido para texto normal (5,5:1) */
    --azul-asvef: #0099CD;      /* título de página: texto grande (3,3:1) */

    --tam-meta: 0.875rem;       /* 14px: fechas, categorías, datos auxiliares */
    --tam-base: 1rem;           /* 16px: interfaz y texto general */
    --tam-lectura: 1.0625rem;   /* 17px: cuerpo de las noticias */
    --tam-titulo: 1.25rem;      /* 20px: títulos de noticia y de bloque */
    --tam-pagina: 1.75rem;      /* 28px: título de la página */
}

/* ---------- base ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--fuente-texto);
    font-size: var(--tam-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--texto);
}
/* style5.css ponía los párrafos en Poppins 300 gris claro */
p {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
::selection {
    background: var(--verde-asvef);
    color: #fff;
}

/* ---------- títulos: caja normal, sin espaciado añadido ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-wrap: balance;
}
h1 {
    font-size: var(--tam-titulo);
    color: var(--verde-asvef);
}
h3, h4 {
    letter-spacing: 0;
    color: var(--texto);
}

/* título de la página (encima del contenido) */
.mensaje {
    font-size: var(--tam-pagina);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--azul-asvef);
    text-wrap: balance;
}

/* títulos de noticia (portada y consellerías) */
.titulo {
    text-transform: none;
    font-size: var(--tam-titulo);
    line-height: 1.3;
}
.titulo a {
    color: var(--texto);
}
.titulo a:hover,
.titulo a:focus {
    color: var(--verde-texto);
}

/* encabezados de los paneles (registro, avisos) */
.panel-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--tam-titulo);
    color: var(--texto);
}

/* ---------- metadatos ---------- */
.fecha {
    font-style: normal;
    font-weight: 400;
    font-size: var(--tam-meta);
    color: var(--texto-secundario);
    font-variant-numeric: tabular-nums;
}

/* ---------- lectura ---------- */
.container,
.corta,
.descripcion,
.junta {
    text-align: left;
}
.descripcion {
    font-size: var(--tam-lectura);
    line-height: 1.65;
    margin-left: 0;
    margin-right: 0;
}
/* el contenido viene de CKEditor con estilos en línea: sin justificar y en la familia del sitio */
.descripcion [style*="justify"],
.junta [style*="justify"],
.corta [style*="justify"] {
    text-align: left !important;
}
.descripcion [style*="font-family"],
.junta [style*="font-family"],
.corta [style*="font-family"] {
    font-family: var(--fuente-texto) !important;
}
/* algunos textos se guardaron dentro de <samp>/<code> (monoespaciada) por error del editor */
.descripcion samp, .descripcion code, .descripcion tt, .descripcion kbd,
.junta samp, .junta code, .junta tt, .junta kbd,
.corta samp, .corta code, .corta tt, .corta kbd {
    font-family: var(--fuente-texto);
    font-size: inherit;
}
.descripcion table,
.junta table {
    font-variant-numeric: tabular-nums;
}
/* las tablas anchas (DOG, plazas) se desplazan dentro de su recuadro en lugar de
   ensanchar la página: en móvil el navegador alejaba todo y el texto quedaba diminuto */
.descripcion table,
.junta table {
    display: block;
    width: auto !important;     /* CKEditor guarda width:0px en línea */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* enlaces dentro del texto: style5.css les quitaba color y subrayado */
.descripcion a:not(.article),
.junta a:not(.article) {
    color: var(--verde-texto);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.descripcion a:not(.article):hover,
.junta a:not(.article):hover {
    text-decoration-thickness: 2px;
}

/* ---------- cabecera ---------- */
.asociacion {
    font: 700 var(--tam-meta)/1.35 var(--fuente-texto);
    color: var(--verde-texto);
    letter-spacing: 0;
}
@media (min-width: 1000px) {
    .asociacion {
        font: 700 var(--tam-base)/1.4 var(--fuente-texto);
    }
}
.navbar-nav > li > a,
.navbar-light .navbar-nav .nav-link {
    font: 400 var(--tam-meta)/1.8 var(--fuente-texto);
    color: var(--texto-secundario);
}
/* main.css ponía el texto en blanco al pasar el ratón, invisible sobre la barra blanca */
.nav > li > a:focus,
.nav > li > a:hover,
.nav > li > a:active,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--verde-texto);
}

/* ---------- encuestas (columna derecha) ---------- */
.listadoder {
    font-size: var(--tam-meta);
    line-height: 1.4;
}

/* ---------- imágenes dentro del contenido (CKEditor) ----------
   El editor guarda las fotos con float y alto/ancho fijos en línea: se deformaban
   y quedaban pegadas al borde. Se respetan sus proporciones, se separan del texto
   y en móvil ocupan todo el ancho. */
.junta img,
.descripcion img {
    max-width: 100%;
    height: auto !important;
}
.junta img[style*="float:right"], .junta img[style*="float: right"],
.descripcion img[style*="float:right"], .descripcion img[style*="float: right"] {
    width: min(320px, 40%) !important;
    margin: 0.35rem 0 1.25rem 2rem !important;
}
.junta img[style*="float:left"], .junta img[style*="float: left"],
.descripcion img[style*="float:left"], .descripcion img[style*="float: left"] {
    width: min(320px, 40%) !important;
    margin: 0.35rem 2rem 1.25rem 0 !important;
}
.junta img[style*="float"],
.descripcion img[style*="float"] {
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
@media (max-width: 767px) {
    .junta img[style*="float"],
    .descripcion img[style*="float"] {
        float: none !important;
        display: block;
        width: 100% !important;
        margin: 0.5rem 0 1.25rem !important;
    }
}

/* ---------- formularios ----------
   La etiqueta de cada campo ocupa lo que necesita su texto; antes el campo la
   estrechaba y se recortaba («Repetir contraseña», «Correo electrónico»). */
.input-group-prepend > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------- enlace secundario en los formularios de acceso ----------
   style5.css pinta todos los botones de gris oscuro: «¿Has olvidado la contraseña?»
   competía con «Entrar». Se muestra como enlace. */
.btn.btn-link.olvide,
.solo-socios .btn.btn-link {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--verde-texto);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    min-height: 2.75rem;
}
.btn.btn-link.olvide:hover,
.btn.btn-link.olvide:focus,
.solo-socios .btn.btn-link:hover,
.solo-socios .btn.btn-link:focus {
    color: var(--texto);
}

/* ---------- selector de idioma (ES | GL) ----------
   Sustituye a las banderas de 20×15 px: texto, zona táctil de 44 px
   y enlace a la misma página en el otro idioma. */
.selector-idioma {
    display: inline-flex;
    flex: none;
    border: 1px solid #c9d3cc;
    border-radius: 999px;
    overflow: hidden;
    font: 700 var(--tam-meta)/1 var(--fuente-texto);
    letter-spacing: 0.04em;
}
.selector-idioma a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    color: var(--texto-secundario);
    text-decoration: none;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.selector-idioma a + a {
    border-left: 1px solid #c9d3cc;
}
.selector-idioma a:hover {
    color: var(--verde-texto);
    background: #f3faf5;
}
.selector-idioma a[aria-current="true"] {
    background: var(--verde-texto);
    color: #fff;
}
.selector-idioma a:focus-visible {
    outline: 2px solid var(--verde-asvef);
    outline-offset: -4px;
}
.selector-idioma-cabecera {
    margin: 0 0.75rem;
}
/* en el menú lateral (fondo verde) */
.selector-idioma-lateral {
    margin: 0.5rem 20px 1.5rem;
    border-color: rgba(255, 255, 255, 0.7);
}
.selector-idioma-lateral a {
    color: #fff;
}
.selector-idioma-lateral a + a {
    border-left-color: rgba(255, 255, 255, 0.7);
}
.selector-idioma-lateral a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.selector-idioma-lateral a[aria-current="true"] {
    background: #fff;
    color: var(--verde-texto);
}
.selector-idioma-lateral a:focus-visible {
    outline-color: #fff;
}

/* ---------- botón del menú ----------
   style5.css le quitaba el foco (outline: none !important) y medía 40 px. */
#sidebarCollapse {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 6px;
}
#sidebarCollapse:focus-visible {
    outline: 2px solid var(--verde-asvef) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #sidebarCollapse span,
    .selector-idioma a {
        transition: none !important;
    }
}

/* ---------- títulos de página y de bloque ----------
   El título de la página es ahora un <h1 class="mensaje">; los bloques de la columna
   derecha y los apartados de cada página son <h2> con el mismo aspecto que antes. */
h1.mensaje {
    margin: 0;
}
.recuadro h2,
h2.subtitulo-pagina {
    font-size: var(--tam-titulo);
    color: var(--verde-asvef);
}
/* apartados del formulario de alta: mismo tamaño que tenían como <h4> */
#formregistro h2.panel-title {
    margin: 10px 0 30px;
    font-size: var(--tam-titulo);
    color: var(--texto);
}
/* mensajes de los formularios (antes iban dentro de títulos vacíos) */
.aviso-formulario {
    margin: 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}
.aviso-formulario:empty,
.aviso-formulario > :empty {
    margin: 0;
}

/* ---------- saltar al contenido ----------
   Solo aparece al llegar con el tabulador; es lo primero de la página. */
.saltar-contenido {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: var(--verde-texto);
    color: #fff;
    font-weight: 700;
    transform: translateY(calc(-100% - 1rem));
}
.saltar-contenido:focus,
.saltar-contenido:hover {
    transform: none;
    color: #fff;
    text-decoration: underline;
    outline: 2px solid #fff;
    outline-offset: -4px;
}
#contenido:focus {
    outline: none;
}

/* ---------- carrusel: botón de pausa ---------- */
.carrusel-pausa {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 16;                 /* por encima de flechas e indicadores */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.carrusel-pausa:hover {
    background: rgba(0, 0, 0, 0.8);
}
.carrusel-pausa:focus {
    outline: none;
}
.carrusel-pausa:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--verde-texto);
}
.carrusel-pausa .icono-reanudar,
.carrusel-pausa[data-estado="pausado"] .icono-pausa {
    display: none;
}
.carrusel-pausa[data-estado="pausado"] .icono-reanudar {
    display: block;
}

/* ---------- menú lateral: verde sólido ----------
   Sustituye el degradado a verde lima de la plantilla por un verde bosque de la marca.
   Texto blanco a 9,9:1; los botones de acción, a más de 4,5:1. */
:root {
    --verde-menu: #0B5130;
    --verde-menu-hondo: #08402A;
}
#sidebar {
    background: var(--verde-menu);
    filter: none;
}
#sidebar ul.components {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#sidebar ul li a:hover,
#sidebar ul p a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: var(--verde-menu-hondo);
}
#sidebar ul ul a {
    background: var(--verde-menu-hondo);
}
#sidebar ul ul a:hover {
    background: rgba(0, 0, 0, 0.25);
}
/* Afíliate: botón blanco; Entrar: contorno blanco */
#sidebar a.download {
    background: #fff;
    color: var(--verde-menu);
    font-weight: 700;
}
#sidebar a.download:hover {
    background: #E8F2EC;
    color: var(--verde-menu);
}
#sidebar a.article,
#sidebar a.article:hover {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
#sidebar a.article:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
/* fuera del menú, los botones verdes usan el verde de texto (5,5:1 con blanco) */
a.article,
a.article:hover {
    background: var(--verde-texto) !important;
}

/* ---------- noticia: foto principal y vídeos ----------
   main.css recortaba la foto a 350 px de alto sin escalarla (en el móvil solo se veía
   un trozo) y los vídeos no tenían ancho máximo (ensanchaban la página). */
.fotopost {
    max-height: none;
    overflow: visible;
}
.fotopost img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 560px);
    margin: 0 auto;
    border-radius: 4px;
}
.video-noticia,
.pretty video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1rem;
    background: #000;
    border-radius: 4px;
}
/* las direcciones largas del texto parten la línea en lugar de salirse */
.descripcion,
.junta {
    overflow-wrap: break-word;
}
.descripcion a,
.junta a {
    overflow-wrap: anywhere;
}

/* ---------- Ligazóns: visor de documentos ---------- */
#modaltrabajo .modal-dialog {
    max-width: min(960px, calc(100vw - 1rem));
}
.visor-documento {
    width: 100%;
    height: min(75vh, 720px);
}
.visor-documento iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.visor-imagen {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    height: auto;
    margin: 0 auto;
}
.visor-audio {
    width: 100%;
}
.visor-aviso {
    margin: 1.5rem 0 1rem;
}

/* ---------- columna derecha: enlaces con espacio para el dedo ----------
   Antes medían 19 px de alto y estaban pegados; ahora cada uno ocupa al menos 32 px. */
.recuadro ul > li > a {
    display: inline-block;
    min-height: 2rem;
    padding: 0.25rem 0;
    line-height: 1.5;
}
/* «Máis enquisas» (no el logotipo de «Inicio», que también es .article) */
.recuadro .text-center > a.article {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
}
.opcion-enquisa {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0;
    margin: 0;
    cursor: pointer;
}
.opcion-enquisa input {
    margin-top: 0.3em;
    flex: none;
}
/* lista de enquisas: toda la fila es el enlace */
.votacion li {
    padding: 0;
}
.votacion li a {
    display: block;
    padding: 0.625rem 0.75rem;
    color: var(--texto-secundario);
}
.votacion li a:hover {
    color: var(--texto);
}
@media (pointer: coarse) {
    .recuadro ul > li > a {
        min-height: 2.75rem;
        padding: 0.6rem 0;
    }
}

/* #contenido tenía poco margen interior (nada por debajo de 1000 px, 5 px a la derecha por encima)
   y las .row de Bootstrap (con -15 px a cada lado) sobresalían: el móvil alejaba toda la página
   y en escritorio aparecía una barra horizontal. Con #content (5 px) suman los 15 px que necesitan. */
#contenido,
#content > footer {
    padding-left: 10px;
    padding-right: 10px;
}

/* logotipo de la cabecera: la caja es 150×60 y la imagen 2,1:1; se encaja sin deformarse */
img.logotipo {
    object-fit: contain;
}

/* ---------- documentos de la noticia ----------
   Una fila por documento: icono, nombre legible con formato y peso, y dos acciones
   (ver en el visor o descargar). */
.documentos-lista {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
.documento {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
}
.documento-icono {
    flex: none;
    width: 2rem;
    font-size: 1.625rem;
    line-height: 1;
    text-align: center;
    color: var(--verde-texto);
}
.documento-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.documento-nombre {
    font-weight: 700;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.documento-meta {
    font-size: var(--tam-meta);
    color: var(--texto-secundario);
}
.documento-acciones {
    display: flex;
    flex: none;
    gap: 0.25rem;
}
.documento-accion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-weight: 700;
    color: var(--verde-texto);
}
.documento-accion:hover,
.documento-accion:focus {
    color: var(--verde-texto);
    background: #E8F2EC;
}
@media (max-width: 575.98px) {
    .documento {
        flex-wrap: wrap;
    }
    .documento-acciones {
        width: 100%;
        justify-content: flex-end;
        margin-top: -0.25rem;
    }
}

/* ---------- visor de documentos (modal) ---------- */
.visor-modal .modal-dialog {
    max-width: min(960px, calc(100vw - 1rem));
}
.visor-titulo {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.visor-modal .modal-body {
    padding: 0.5rem;
}
.visor-modal .visor-documento {
    height: min(calc(100vh - 12rem), 780px);
    min-height: 18rem;
}
.visor-acciones {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.visor-acciones > * {
    margin: 0 !important;
}
.visor-acciones .btn-link {
    margin-right: auto !important;
    color: var(--verde-texto);
}
.visor-aviso {
    margin: 1.5rem 1rem;
    text-align: center;
}
/* main.css pinta todas las cabeceras de modal de gris oscuro y los .btn de 27 px:
   el visor usa su propio aspecto, claro y con botones de 44 px */
.visor-modal .modal-header {
    align-items: center;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
}
.visor-modal .modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.5rem -0.25rem -0.5rem 0.5rem;
    padding: 0;
    background: transparent;
    color: var(--texto) !important;
    font-size: 1.75rem;
    opacity: 0.75;
}
.visor-modal .modal-header .close:hover {
    opacity: 1;
}
.visor-modal .modal-footer {
    padding: 0.75rem;
    border-top: 1px solid #e2e2e2;
}
.visor-modal .visor-acciones .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 700;
}
.visor-modal .visor-acciones .btn-link {
    background: transparent;
    color: var(--verde-texto);
}
.visor-modal .visor-acciones .btn-outline-secondary {
    background: #fff;
    border-color: var(--verde-texto);
    color: var(--verde-texto);
}
.visor-modal .visor-acciones .btn-primary {
    background: var(--verde-texto);
    border-color: var(--verde-texto);
    color: #fff;
}
.visor-modal .visor-acciones .btn-link:hover,
.visor-modal .visor-acciones .btn-outline-secondary:hover {
    background: #E8F2EC;
    color: var(--verde-texto);
}
.visor-modal .visor-acciones .btn-primary:hover {
    background: var(--verde-menu, #0B5130);
    color: #fff;
}

/* ---------- botones pequeños del PDF, en la línea de la fecha ----------
   En las tarjetas el título se estira sobre toda la noticia (::after): los botones
   van por encima para recibir su propio clic. 24 px de alto: el mínimo de WCAG 2.5.8. */
.noticia-pdf {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 0.375rem;
    vertical-align: middle;
}
.boton-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid var(--verde-texto);
    border-radius: 3px;
    background: #fff;
    color: var(--verde-texto);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}
.boton-pdf:hover,
.boton-pdf:focus {
    background: #E8F2EC;
    color: var(--verde-texto);
    text-decoration: none;
}
.boton-pdf:focus-visible {
    outline: 2px solid var(--verde-texto);
    outline-offset: 2px;
}

/* «Máis enquisas» no puede ser más ancho que su columna (a 900 px la columna mide 80 px) */
.recuadro .text-center > a.article {
    max-width: 100%;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: normal;
    hyphens: manual;
}

/* Entre 576 y 1199 px, con el menú lateral abierto, la columna derecha (col-sm-2/col-md-2) se quedaba
   en unos 66 px útiles y «Consellerías» o «Máis enquisas» no cabían: la página se desbordaba.
   En ese tramo la columna derecha pasa debajo del contenido, como en el móvil. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    #contenido .row > .col-lg-10.col-md-10,
    #contenido .row > .col-lg-2.col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------
    BOTONES, CAMPOS Y MODALES (repaso final)
    main.css (compartido con el panel, por eso no se toca) pinta todos los .btn de gris
    casi negro, cuadrados y de 27 px, y las cabeceras de modal de #333. En la web pública
    siguen el sistema verde de ASVEF, como el menú, el visor y los botones del PDF.
----------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.25;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
.btn:hover,
.btn:focus {
    border: 1px solid transparent;
}
.btn:focus {
    box-shadow: none;
}
.btn:focus-visible {
    outline: 2px solid var(--verde-texto);
    outline-offset: 2px;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--verde-texto);
    border-color: var(--verde-texto);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--verde-menu);
    border-color: var(--verde-menu);
    color: #fff;
}
.btn-outline-secondary,
.btn-secondary,
.btn-default {
    background: #fff;
    border-color: var(--verde-texto);
    color: var(--verde-texto);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-secondary:hover,
.btn-default:hover {
    background: #E8F2EC;
    border-color: var(--verde-texto);
    color: var(--verde-texto);
}
.btn-link,
.btn-link:hover,
.btn-link:focus {
    background: transparent;
    border-color: transparent;
}
.btn-lg {
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    font-size: 1.125rem;
}
.btn-block {
    display: flex;
    width: 100%;
}
/* validator.js marca el botón como .disabled mientras faltan campos; no se apaga,
   porque al pulsarlo el formulario explica qué falta */
form .btn.disabled {
    opacity: 1;
    cursor: pointer;
}

/* campos: un solo borde, esquinas como los botones y foco verde */
.form-control,
form input[type='text'],
form select {
    min-height: 2.75rem;
    border: 1px solid #c4ccd2;
    border-radius: 4px;
}
textarea.form-control {
    min-height: 7rem;
}
.form-control:focus {
    border-color: var(--verde-texto);
    box-shadow: 0 0 0 3px rgba(0, 122, 47, 0.2);
}
.input-group-text {
    border-color: #c4ccd2;
    border-radius: 4px;
}

/* modales: cabecera clara, como el visor de documentos */
.modal-header {
    align-items: center;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
}
.modal-header .modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--texto);
}
.modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.5rem -0.25rem -0.5rem 0.5rem;
    padding: 0;
    background: transparent;
    color: var(--texto) !important;
    font-size: 1.75rem;
    opacity: 0.75;
}
.modal-header .close:hover {
    opacity: 1;
}
.modal-body {
    padding: 1rem;
}
.modal-footer {
    padding: 0.75rem;
    border-top: 1px solid #e2e2e2;
}
.modal-content {
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}
/* «Votar» de la enquisa lateral: botón principal */
.votarbt.btn {
    background: var(--verde-texto);
    border-color: var(--verde-texto);
    color: #fff;
}
.votarbt.btn:hover,
.votarbt.btn:focus {
    background: var(--verde-menu);
    color: #fff;
}

/* bloques-botón de la columna derecha («Inicio» con logotipo, «Benvida», «Afíliate»):
   la regla de los enlaces de la lista no debe quitarles el ancho ni el relleno */
.recuadro ul.CTAs > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-align: center;
}
.recuadro ul.CTAs img {
    display: block;
    width: 100%;
    max-width: 10rem;
    height: auto;
    margin: 0 auto;
}

/* Ligazóns › Documentos: el enlace bajo cada vista previa y las acciones «Ver» / «Descargar»
   (antes 19 y 23 px de alto, por debajo de los 24 px de WCAG 2.5.8) */
.enlace-vista {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    color: var(--verde-texto);
    font-weight: 700;
}
.enlace-acciones {
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.25rem 0 1rem;
}
/* las vistas previas de los documentos son iframe de 220 px fijos: no pueden ser más anchas que su columna */
.thumbnail iframe {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
}