/**
 * Premios APDHE — hoja de estilos para el tema hijo (Flatsome Child).
 *
 * Dirección: «Editorial APDHE» — replica el lenguaje visual de la web
 * (negro #10100e, teal #069eac, gris #f6f6f6, esquinas rectas, titulares
 * bold en mayúsculas, badges negros, tipografía Supreme heredada del body).
 *
 * Reglas de integración:
 * - Todo va prefijado con .apdhe-* : no toca nada del theme ni de UX Builder.
 * - No declara font-family: hereda 'Supreme' de body (definida en estilo.css).
 * - Colores literales de marca en custom properties propias del bloque,
 *   independientes de las variables de Flatsome.
 * - Todo funciona sin JS; premios-apdhe.js es mejora progresiva.
 *
 * Alcance de clases (emite el plugin, nunca cambia):
 *   .apdhe-resumen / __titulo / __fase / __ceremonia
 *   .apdhe-fases > .apdhe-fase (--actual --pasada --{slug}) / __nombre / __fecha
 *   .apdhe-convocatoria
 *   .apdhe-candidaturas / __categoria / __lista / .apdhe-candidatura
 *     / __imagen / __inicial / __cuerpo / __nombre / __texto
 *   .apdhe-votaciones > .apdhe-aviso (--ok --error --info) + .apdhe-form-voto
 *     .apdhe-campo--texto · --email · --consentimiento > .apdhe-check
 *     .apdhe-categoria / __nombre / __descripcion / __opciones
 *     .apdhe-opcion · .apdhe-tile / __imagen / __inicial / __nombre / --blanco
 *     .apdhe-hp · .cf-turnstile
 *     .apdhe-acciones / .apdhe-boton · .apdhe-ayuda
 *   .apdhe-finalistas / __categoria / __lista / .apdhe-finalista
 *   .apdhe-ganadores / __categoria / __lista / .apdhe-ganadora / __nota / __honorifica
 *   .apdhe-historico / __edicion / __titulo
 *   .apdhe-ceremonia / __fecha / __lugar
 * Clases que añade ESTE CSS/JS:
 *   .apdhe-progreso (--ok --pendiente) · .apdhe-categoria--incompleta
 *
 * Desde el plugin v0.2.0 el formulario pide nombre, apellidos y correo +
 * consentimiento, y las candidaturas van en tiles (imagen destacada + nombre);
 * sin imagen destacada, un bloque con la inicial. Sin ese CSS el formulario
 * sigue siendo usable (lista vertical simple).
 *
 * Desde el plugin v0.2.1 el shortcode apdhe_premios_candidaturas pinta fichas
 * de los perfiles por categoría (imagen + nombre + texto del editor); desde
 * v1.2.1 son fichas horizontales (retrato a la izquierda, texto a la derecha,
 * dos por fila en escritorio) para que las biografías largas sean cómodas.
 * Sin ese CSS queda una lista de imágenes y nombres igualmente legible.
 *
 * @package Apdhe\Premios\Child  v1.2.1
 */

/* ---------------------------------------------------------------------
 * 0. Tokens de marca (scoped) + reglas defensivas contra Flatsome/UX Builder
 * ------------------------------------------------------------------- */
.apdhe-resumen,
.apdhe-fases,
.apdhe-convocatoria,
.apdhe-candidaturas,
.apdhe-votaciones,
.apdhe-finalistas,
.apdhe-ganadores,
.apdhe-historico,
.apdhe-ceremonia {
        --apdhe-negro: #10100e;
        --apdhe-teal: #069eac;
        --apdhe-teal-texto: #056a73;   /* teal oscurecido para texto pequeño (AA sobre blanco) */
        --apdhe-gris: #f6f6f6;
        --apdhe-error: #ee6055;        /* mismo rojo que el formulario de contacto */
        --apdhe-error-texto: #b23c33;  /* rojo oscurecido para texto pequeño (AA sobre blanco) */
        --apdhe-tinta-suave: rgba(16, 16, 14, 0.62);
        --apdhe-linea: rgba(16, 16, 14, 0.16);
        --apdhe-linea-clara: rgba(246, 246, 246, 0.16);
        box-sizing: border-box;
}

/* UX Builder y algunos themes aplican list-style/padding a ol·ul dentro de
   the_content: neutralizamos SOLO dentro de bloques apdhe-. */
ol.apdhe-fases,
ul.apdhe-candidaturas__lista,
ul.apdhe-finalistas__lista,
ul.apdhe-ganadores__lista,
.apdhe-historico ul.apdhe-ganadores__lista {
        list-style: none !important;
        margin: 0;
        padding: 0;
}

/* Flatsome fuerza box-sizing y estilos de widget; blindamos fieldset/legend. */
.apdhe-votaciones fieldset,
.apdhe-votaciones legend {
        min-width: 0;
        box-sizing: border-box;
}

/* Evita que el header sticky de Flatsome tape el ancla #apdhe-form-voto. */
.apdhe-votaciones {
        scroll-margin-top: 110px;
}

/* ---------------------------------------------------------------------
 * 1. Avisos (respuesta del voto, estado de fases, etc.)
 * ------------------------------------------------------------------- */
.apdhe-aviso {
        margin: 0 0 1.6em;
        padding: 1em 1.2em;
        border-left: 4px solid var(--apdhe-negro);
        background: var(--apdhe-gris);
        font-size: 0.98rem;
        line-height: 1.5;
        text-align: left;
}
.apdhe-aviso--ok {
        border-left-color: var(--apdhe-teal);
        background: rgba(6, 158, 172, 0.08);
}
.apdhe-aviso--error {
        border-left-color: var(--apdhe-error);
        background: rgba(238, 96, 85, 0.08);
}

/* ---------------------------------------------------------------------
 * 2. Resumen de la edición (.apdhe_premios)
 * ------------------------------------------------------------------- */
.apdhe-resumen {
        border-top: 3px solid var(--apdhe-negro);
        padding-top: 1.1em;
        margin-bottom: 2em;
}
.apdhe-resumen__titulo {
        margin: 0 0 0.5em;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.3;
        text-align: left;
}
.apdhe-resumen__fase {
        margin: 0.4em 0 0.2em;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
}
.apdhe-resumen__fase strong {
        color: var(--apdhe-teal-texto);
        font-weight: 700;
}
.apdhe-resumen__ceremonia {
        margin: 0.2em 0 0;
        font-size: 0.95rem;
        color: var(--apdhe-tinta-suave);
        text-align: left;
}

/* ---------------------------------------------------------------------
 * 3. Timeline de fases (.apdhe_premios_fases) — línea numerada vertical
 * ------------------------------------------------------------------- */
ol.apdhe-fases {
        counter-reset: apdhefase;
        margin-bottom: 2em;
}
li.apdhe-fase {
        position: relative;
        counter-increment: apdhefase;
        padding: 0 0 2em 64px;
        min-height: 44px;
}
li.apdhe-fase:last-child {
        padding-bottom: 0.2em;
}
/* Círculo numerado (teal; la actual en negro con halo teal) */
.apdhe-fase::before {
        content: counter(apdhefase);
        position: absolute;
        left: 0;
        top: 0;
        width: 44px;
        height: 44px;
        border: 2px solid var(--apdhe-teal);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--apdhe-teal);
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
}
/* Línea que une los pasos */
.apdhe-fase::after {
        content: "";
        position: absolute;
        left: 21px;
        top: 48px;
        bottom: 6px;
        width: 2px;
        background: var(--apdhe-linea);
}
.apdhe-fase:last-child::after {
        content: none;
}
.apdhe-fase__nombre {
        display: block;
        padding-top: 9px;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.25;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--apdhe-negro);
}
.apdhe-fase__fecha {
        display: block;
        margin-top: 0.15em;
        font-size: 0.92rem;
        color: var(--apdhe-tinta-suave);
}
/* Fases ya vividas: se atenúan */
.apdhe-fase--pasada::before {
        opacity: 0.55;
}
.apdhe-fase--pasada .apdhe-fase__nombre {
        color: var(--apdhe-tinta-suave);
}
/* Fase vigente: círculo negro + halo teal + «— en curso» generado por CSS */
.apdhe-fase--actual::before {
        background: var(--apdhe-negro);
        border-color: var(--apdhe-negro);
        box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--apdhe-teal);
}
.apdhe-fase--actual .apdhe-fase__nombre::after {
        content: " — en curso";
        color: var(--apdhe-teal-texto);
        font-size: 0.82em;
        letter-spacing: 0.05em;
}
/* Fases futuras: círculo blanco con borde negro */
.apdhe-fase:not(.apdhe-fase--pasada):not(.apdhe-fase--actual)::before {
        background: #fff;
        border-color: var(--apdhe-negro);
        color: var(--apdhe-negro);
}

/* ---------------------------------------------------------------------
 * 4. Convocatoria (.apdhe_premios_convocatoria)
 * ------------------------------------------------------------------- */
.apdhe-convocatoria {
        max-width: 72ch;
        margin-bottom: 2em;
}
.apdhe-convocatoria a {
        color: var(--apdhe-teal-texto);
        text-decoration: underline;
        text-underline-offset: 2px;
}
.apdhe-convocatoria a:hover,
.apdhe-convocatoria a:focus {
        color: var(--apdhe-teal-texto);
        text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
 * 5. Formulario de votación (.apdhe_premios_votaciones)
 *    Caja editorial con borde negro; opciones tipo tarjeta seleccionable.
 * ------------------------------------------------------------------- */
.apdhe-votaciones {
        border: 2px solid var(--apdhe-negro);
        padding: 2em;
        background: #fff;
}
.apdhe-votaciones ::selection {
        background: var(--apdhe-teal);
        color: #fff;
}

/* 5.1 Nombre, apellidos y correo — réplica del estilo subrayado del
   formulario de contacto */
.apdhe-campo--texto,
.apdhe-campo--email {
        margin: 0 0 1.7em;
}
.apdhe-campo--texto label,
.apdhe-campo--email label {
        display: block;
        margin-bottom: 0.45em;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
}
.apdhe-campo--texto input,
.apdhe-campo--email input {
        width: 100%;
        height: 50px;
        padding: 0 0.2em;
        border: 0;
        border-bottom: 1px solid var(--apdhe-negro);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 1.05rem;
}
.apdhe-campo--texto input:focus,
.apdhe-campo--email input:focus {
        outline: none;
        border-bottom-color: var(--apdhe-teal);
        box-shadow: 0 1px 0 0 var(--apdhe-teal);
}
.apdhe-campo--texto input:focus-visible,
.apdhe-campo--email input:focus-visible {
        outline: 2px solid var(--apdhe-teal);
        outline-offset: 3px;
}

/* 5.1b Consentimiento de privacidad (checkbox cuadrado de marca) */
.apdhe-campo--consentimiento {
        margin: 1.8em 0 0;
}
.apdhe-check {
        display: flex;
        align-items: flex-start;
        gap: 0.65em;
        font-size: 0.98rem;
        line-height: 1.5;
        text-align: left;
        cursor: pointer;
}
.apdhe-check input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        position: relative;
        width: 20px;
        height: 20px;
        margin: 2px 0 0;
        border: 2px solid var(--apdhe-negro);
        border-radius: 0;
        background: #fff;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
}
.apdhe-check input[type="checkbox"]:checked {
        background: var(--apdhe-teal);
        border-color: var(--apdhe-teal);
}
.apdhe-check input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 1px;
        width: 6px;
        height: 11px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
}
.apdhe-check input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--apdhe-teal);
        outline-offset: 2px;
}
.apdhe-check a {
        color: var(--apdhe-teal-texto);
        text-decoration: underline;
        text-underline-offset: 2px;
}
.apdhe-check a:hover,
.apdhe-check a:focus {
        color: var(--apdhe-teal-texto);
        text-decoration-thickness: 2px;
}

/* 5.1c Escritorio: nombre, apellidos y correo en tres columnas.
   El formulario pasa a rejilla de 3 columnas donde cada hijo ocupa una
   fila completa, salvo los tres campos de contacto que comparten la
   primera fila (se colocan solos por orden del DOM). El honeypot
   (position:absolute) queda fuera del flujo de la rejilla. En
   pantallas de 768px o menos no se aplica: una columna como hasta ahora. */
@media (min-width: 769px) {
        .apdhe-form-voto {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                column-gap: 2em;
        }
        .apdhe-form-voto > * {
                grid-column: 1 / -1;
                min-width: 0;
        }
        .apdhe-form-voto > .apdhe-campo--texto,
        .apdhe-form-voto > .apdhe-campo--email {
                grid-column: auto;
        }
        /* Dentro de la rejilla los márgenes verticales ya no se colapsan:
           1.5em (fin de la última categoría) + 0.3em = 1.8em, el mismo
           espacio que había en flujo de bloques. */
        .apdhe-form-voto > .apdhe-campo--consentimiento {
                margin-top: 0.3em;
        }
}

/* 5.2 Categorías: fieldset con legend incrustado en el borde */
.apdhe-categoria {
        margin: 0 0 1.5em;
        padding: 1.2em 1.4em 1.4em;
        border: 1px solid var(--apdhe-negro);
        scroll-margin-top: 110px;
        transition: border-color 0.25s, box-shadow 0.25s;
}
.apdhe-categoria__nombre {
    padding: 0 0.6em;
    margin-left: -0.6em;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
    width: fit-content;
    border-bottom: 0;
}
.apdhe-categoria__descripcion {
        margin: 0.2em 0 1em;
        font-size: 0.95rem;
        color: var(--apdhe-tinta-suave);
        text-align: left;
}
/* Categoría sin votar tras intentar enviar (clase puesta por premios-apdhe.js) */
.apdhe-categoria--incompleta {
        border-color: var(--apdhe-error);
        box-shadow: 0 0 0 1px var(--apdhe-error);
}
.apdhe-categoria--incompleta .apdhe-categoria__nombre {
        color: var(--apdhe-error-texto);
}

/* 5.3 Radio-tarjetas (base común a la opción y al tile) */
.apdhe-opcion {
        display: flex;
        align-items: flex-start;
        gap: 0.7em;
        padding: 0.8em 0.95em;
        margin-bottom: 0.6em;
        border: 1px solid var(--apdhe-linea);
        background: #fff;
        font-size: 1rem;
        line-height: 1.45;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.apdhe-opcion:hover {
        border-color: var(--apdhe-negro);
}
/* Radio nativo ocultable, rediseñado (el estado vive en el input: sin JS y accesible) */
.apdhe-opcion input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 2px 0 0;
        border: 2px solid var(--apdhe-negro);
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
}
.apdhe-opcion input[type="radio"]:checked {
        border-color: var(--apdhe-teal);
        background: radial-gradient(circle, var(--apdhe-teal) 0 45%, transparent 50%);
}
.apdhe-opcion input[type="radio"]:focus-visible {
        outline: 2px solid var(--apdhe-teal);
        outline-offset: 2px;
}
/* Tarjeta marcada (mejora con :has; si el navegador no lo soporta,
   el propio radio ya refleja el estado) */
.apdhe-opcion:has(input[type="radio"]:checked) {
        border-color: var(--apdhe-teal);
        box-shadow: inset 0 0 0 1px var(--apdhe-teal);
        background: rgba(6, 158, 172, 0.05);
}
.apdhe-opcion:has(input[type="radio"]:focus-visible) {
        outline: 2px solid var(--apdhe-teal);
        outline-offset: 2px;
}
/* «En blanco»: misma tarjeta pero punteada y en gris */
.apdhe-opcion--blanco {
        border-style: dashed;
        color: var(--apdhe-tinta-suave);
        font-style: italic;
}
.apdhe-opcion--blanco input[type="radio"] {
        border-color: var(--apdhe-tinta-suave);
}
.apdhe-opcion--blanco:has(input[type="radio"]:checked) {
        border-color: var(--apdhe-tinta-suave);
        box-shadow: inset 0 0 0 1px var(--apdhe-tinta-suave);
        background: var(--apdhe-gris);
}

/* 5.3b Tiles de candidatura (plugin v0.2.0): imagen destacada + nombre en grid.
   Cada categoría trae 3-5 candidaturas; el grid reparte en columnas iguales y
   en móvil pasa a 1-2 columnas. El radio nativo sigue siendo la fuente del
   estado: sin :has() la selección se ve en el propio radio. */
.apdhe-categoria__opciones {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 0.9em;
        margin: 0.4em 0 0.2em;
}
.apdhe-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;  /* anula el flex-start de .apdhe-opcion: el nombre ocupa el ancho */
        gap: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
}
/* Radio esquina: fondo blanco para destacar sobre la foto */
.apdhe-tile input[type="radio"] {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        margin: 0;
        background: #fff;
        box-shadow: 0 0 0 3px #fff;
}
.apdhe-tile__imagen {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        background: var(--apdhe-gris);
        overflow: hidden;
}
.apdhe-tile__imagen img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
        border-radius: 0;
        box-shadow: none;
}
/* Sin imagen destacada: inicial del título sobre gris de marca */
.apdhe-tile__inicial {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
        color: var(--apdhe-teal);
        background: linear-gradient(180deg, #fff 0%, var(--apdhe-gris) 100%);
}
.apdhe-tile__nombre {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 3.8em;
        padding: 0.75em 0.8em;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-align: center;
        color: var(--apdhe-negro);
}
/* Tile marcado: filo teal doble (con :has; sin él, el radio ya lo indica) */
.apdhe-tile:has(input[type="radio"]:checked) {
        border-color: var(--apdhe-teal);
        box-shadow: inset 0 0 0 2px var(--apdhe-teal);
}
.apdhe-tile:hover {
        border-color: var(--apdhe-negro);
}
.apdhe-tile:has(input[type="radio"]:checked):hover {
        border-color: var(--apdhe-teal);
}
/* «En blanco» como tile punteado, sin imagen y centrado */
.apdhe-tile--blanco {
        border-style: dashed;
        justify-content: center;
}
.apdhe-tile--blanco .apdhe-tile__nombre {
        font-style: italic;
        color: var(--apdhe-tinta-suave);
}
.apdhe-tile--blanco:has(input[type="radio"]:checked) {
        border-color: var(--apdhe-tinta-suave);
        box-shadow: inset 0 0 0 2px var(--apdhe-tinta-suave);
        background: var(--apdhe-gris);
}

/* 5.4 Honeypot — CRÍTICO: invisible a personas, presente para bots.
   Nada de display:none / visibility:hidden (los bots los ignoran). */
.apdhe-hp {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
}

/* 5.5 Turnstile */
.apdhe-form-voto .cf-turnstile {
        margin: 1.2em 0;
        min-height: 65px;
}

/* 5.6 Barra de progreso (la inserta premios-apdhe.js; sin JS no existe) */
.apdhe-progreso {
        display: flex;
        align-items: baseline;
        gap: 0.5em;
        margin: 1.4em 0 0;
        padding: 0.85em 1em;
        border-left: 4px solid var(--apdhe-negro);
        background: var(--apdhe-gris);
        font-size: 0.98rem;
        font-weight: 600;
        text-align: left;
}
.apdhe-progreso--ok {
        border-left-color: var(--apdhe-teal);
        background: rgba(6, 158, 172, 0.08);
        color: var(--apdhe-teal-texto);
}
.apdhe-progreso--pendiente {
        border-left-color: var(--apdhe-error);
        background: rgba(238, 96, 85, 0.07);
        color: #b23c33;
}

/* 5.7 Botón de envío y ayuda */
.apdhe-acciones {
        margin: 1.6em 0 0;
}
.apdhe-boton {
        display: inline-block;
        min-height: 52px;
        padding: 0.85em 2.4em;
        border: 2px solid var(--apdhe-negro);
        border-radius: 0;
        background: var(--apdhe-negro);
        color: var(--apdhe-gris);
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        line-height: 1.3;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        box-shadow: none;
        transition: background-color 0.25s, border-color 0.25s, transform 0.1s;
}
.apdhe-boton:hover {
        background: var(--apdhe-teal);
        border-color: var(--apdhe-teal);
        color: #fff;
}
.apdhe-boton:active {
        transform: translateY(1px);
}
.apdhe-boton:focus-visible {
        outline: 2px solid var(--apdhe-teal);
        outline-offset: 3px;
}
.apdhe-ayuda {
        margin: 0.9em 0 0;
        font-size: 0.9rem;
        color: var(--apdhe-tinta-suave);
        text-align: left;
}

/* ---------------------------------------------------------------------
 * 6. Finalistas (.apdhe_premios_finalistas)
 * ------------------------------------------------------------------- */
.apdhe-finalistas {
        margin-bottom: 2em;
}
.apdhe-finalistas__categoria {
        margin: 1.8em 0 0.8em;
        padding-top: 0.7em;
        border-top: 2px solid var(--apdhe-negro);
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1.3;
}
.apdhe-finalistas__categoria::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 0.55em;
        background: var(--apdhe-teal);
}
.apdhe-finalistas__lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0 2.5em;
}
.apdhe-finalista {
        padding: 0.65em 0;
        border-bottom: 1px solid var(--apdhe-linea);
        font-size: 1.02rem;
        font-weight: 500;
        line-height: 1.45;
}

/* ---------------------------------------------------------------------
 * 6b. Candidaturas (.apdhe_premios_candidaturas) — fichas de los perfiles
 *     Ficha HORIZONTAL (v1.2.1): retrato cuadrado a la izquierda y nombre
 *     + biografía a la derecha, dos fichas por fila en escritorio. Con
 *     biografías largas, las tarjetas verticales a 3-4 columnas quedaban
 *     como columnas estrechas kilométricas; así el texto gana una medida
 *     de lectura de ~55-65 caracteres y la ficha se acorta a la mitad.
 *     Cabecera de categoría idéntica a la de finalistas (cuadrado teal)
 *     e inicial de reserva como los tiles de votación.
 * ------------------------------------------------------------------- */
.apdhe-candidaturas {
        margin-bottom: 2em;
}
/* Cabecera de categoría: idéntica a la de finalistas */
.apdhe-candidaturas__categoria {
        margin: 1.8em 0 0.9em;
        padding-top: 0.7em;
        border-top: 2px solid var(--apdhe-negro);
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1.3;
}
.apdhe-candidaturas__categoria::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 0.55em;
        background: var(--apdhe-teal);
}
/* Dos fichas por fila. align-items:start evita que las tarjetas de una
   misma fila se estiren hasta la altura de la más larga (antes, la ficha
   sin biografía arrastraba un hueco blanco enorme). */
ul.apdhe-candidaturas__lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2em 1.4em;
        align-items: stretch;
}
/* Ficha horizontal: rejilla interna [retrato 128px | cuerpo]. Tarjeta
   recta con borde fino; prefijo li. contra el theme. */
li.apdhe-candidatura {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        align-items: start;
        margin: 0;
        border: 1px solid var(--apdhe-linea);
        background: #fff;
        overflow: hidden;
        transition: border-color 0.25s;
}
li.apdhe-candidatura:hover {
        border-color: var(--apdhe-negro);
}
/* Retrato cuadrado anclado arriba; el object-fit del img recorta la foto
   sin deformarla y la inicial de reserva hereda el mismo cuadrado. */
.apdhe-candidatura__imagen {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--apdhe-gris);
}
.apdhe-candidatura__imagen img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
}
/* Sin imagen destacada: bloque con la inicial, como los tiles de votación */
.apdhe-candidatura__inicial {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1;
        color: var(--apdhe-teal);
        background: linear-gradient(180deg, #fff 0%, var(--apdhe-gris) 100%);
}
.apdhe-candidatura__cuerpo {
        padding: 1em 1.15em 1.25em;
}
.apdhe-candidatura__nombre {
        margin: 0 0 0.45em;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.35;
        text-align: left;
}
.apdhe-candidatura__texto {
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: left;
        overflow-wrap: break-word;
}
.apdhe-candidatura__texto p {
        margin: 0 0 0.8em;
        text-align: left;
}
.apdhe-candidatura__texto p:last-child {
        margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * 7. Ganadoras (.apdhe_premios_ganadores) — sección oscura
 * ------------------------------------------------------------------- */
.apdhe-ganadores {
        margin: 2.5em 0;
        padding: 2.4em 2.2em;
        background: var(--apdhe-negro);
        color: var(--apdhe-gris);
}
.apdhe-ganadores__categoria {
        margin: 1.6em 0 0.6em;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--apdhe-teal);
}
.apdhe-ganadores__categoria:first-child {
        margin-top: 0;
}
.apdhe-ganadora {
        padding: 0.7em 0;
        border-bottom: 1px solid var(--apdhe-linea-clara);
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.4;
        color: #fff;
        text-align: left;
}
.apdhe-ganadora__nota {
        font-size: 0.92rem;
        font-weight: 400;
        color: rgba(246, 246, 246, 0.6);
}
.apdhe-ganadora__honorifica {
        display: inline-block;
        margin-left: 0.6em;
        padding: 0.2em 0.6em;
        background: var(--apdhe-teal);
        color: var(--apdhe-negro);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        vertical-align: middle;
}

/* Las mismas listas dentro del histórico viven sobre fondo claro */
.apdhe-historico .apdhe-ganadores__categoria {
        margin: 1.3em 0 0.5em;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        color: var(--apdhe-teal-texto);
}
.apdhe-historico .apdhe-ganadora {
        font-size: 1.05rem;
        color: var(--apdhe-negro);
        border-bottom-color: var(--apdhe-linea);
}
.apdhe-historico .apdhe-ganadora__nota {
        color: var(--apdhe-tinta-suave);
}

/* ---------------------------------------------------------------------
 * 8. Ceremonia (.apdhe_premios_ceremonia) — bloque oscuro con filo teal
 * ------------------------------------------------------------------- */
.apdhe-ceremonia {
        margin: 2.5em 0;
        padding: 2.4em 2.2em;
        background: var(--apdhe-negro);
        color: var(--apdhe-gris);
        border-left: 6px solid var(--apdhe-teal);
}
.apdhe-ceremonia__fecha {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.15;
        color: #fff;
        text-align: left;
}
.apdhe-ceremonia__lugar {
        margin: 0.35em 0 0;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--apdhe-teal);
        text-align: left;
}

/* ---------------------------------------------------------------------
 * 9. Histórico (.apdhe_premios_historico) — claro, ritmo editorial
 * ------------------------------------------------------------------- */
.apdhe-historico {
        margin: 2em 0;
}
.apdhe-historico__edicion {
        margin: 0 0 2.2em;
        padding-top: 1.1em;
        border-top: 2px solid var(--apdhe-negro);
}
.apdhe-historico__titulo {
        margin: 0 0 0.8em;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
 * 10. Accesibilidad y movimiento
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
        .apdhe-resumen *,
        .apdhe-fases *,
        .apdhe-candidaturas *,
        .apdhe-votaciones *,
        .apdhe-finalistas *,
        .apdhe-ganadores *,
        .apdhe-historico *,
        .apdhe-ceremonia * {
                transition: none !important;
                animation: none !important;
        }
}

/* ---------------------------------------------------------------------
 * 11. Responsive (corte de 768px, igual que estilo.css del child)
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
        .apdhe-votaciones {
                padding: 1.3em;
        }
        .apdhe-categoria {
                padding: 1em 0.9em 1.1em;
        }
        .apdhe-categoria__opciones {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 0.7em;
        }
        /* Listado a una columna; la ficha sigue horizontal con retrato menor */
        ul.apdhe-candidaturas__lista {
                grid-template-columns: 1fr;
                gap: 1em;
        }
        li.apdhe-candidatura {
                grid-template-columns: 104px minmax(0, 1fr);
        }
        .apdhe-candidatura__inicial {
                font-size: 2.2rem;
        }
        .apdhe-fase {
                padding-left: 56px;
        }
        .apdhe-fase::before {
                width: 38px;
                height: 38px;
                font-size: 1.05rem;
        }
        .apdhe-fase::after {
                left: 18px;
                top: 42px;
        }
        .apdhe-fase__nombre {
                padding-top: 5px;
        }
        .apdhe-finalistas__lista {
                grid-template-columns: 1fr;
        }
        .apdhe-ganadores,
        .apdhe-ceremonia {
                padding: 1.6em 1.3em;
        }
        .apdhe-ceremonia__fecha {
                font-size: 1.6rem;
        }
        .apdhe-boton {
                width: 100%;
        }
}

/* Móvil estrecho: 2 columnas fijas de tiles, fichas a una columna */
@media (max-width: 480px) {
        .apdhe-categoria__opciones {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.6em;
        }
        /* Pantalla estrecha: cabecera compacta (retrato 88px + nombre) y
           biografía a todo el ancho debajo. display:contents promueve nombre
           y texto a items de la rejilla de la ficha para poder repartirlos
           en áreas; si el navegador no lo soporta, la ficha queda horizontal
           como en el corte anterior (sigue siendo legible). */
        li.apdhe-candidatura {
                grid-template-columns: 88px minmax(0, 1fr);
                grid-template-areas:
                        "foto nombre"
                        "texto texto";
                row-gap: 0.55em;
                column-gap: 0.9em;
                padding: 0.9em;
        }
        .apdhe-candidatura__imagen {
                grid-area: foto;
        }
        .apdhe-candidatura__cuerpo {
                display: contents;
        }
        .apdhe-candidatura__nombre {
                grid-area: nombre;
                margin: 0;
                align-self: center;
        }
        .apdhe-candidatura__texto {
                grid-area: texto;
        }
        .apdhe-tile__nombre {
                font-size: 0.78rem;
                min-height: 3.4em;
                padding: 0.65em 0.6em;
        }
}