/* ═══════════════════════════════════════════════════════════════
   Piezas compartidas por todas las páginas: ritmo de secciones,
   revelado al hacer scroll e impresión.

   Se carga después de las hojas de componente y antes de la hoja de
   cada página, así que aquí solo va lo que es común a todo el sitio.
   ═══════════════════════════════════════════════════════════════ */

/* ── RITMO VERTICAL ───────────────────────────────────────────── */
.seccion {
    padding: 72px 0;
}

.seccion + .seccion {
    border-top: 1px solid var(--linea);
}

.fondo-claro {
    background: var(--hueso-claro);
}

.fondo-tinta {
    background: var(--tinta);
    color: #fff;
}

.fondo-tinta h1,
.fondo-tinta h2,
.fondo-tinta h3 {
    color: #fff;
}

/*
 * ── REVELADO AL HACER SCROLL: RETIRADO ───────────────────────────
 *
 * Aquí vivían .reveal/.rl/.rr y su pareja .on. No animaban nada: no
 * existía estado de partida (ninguna de las 16 hojas declaraba
 * opacity:0 ni un transform inicial), así que .on ponía opacity:1 y
 * transform:none, que ya son los valores por defecto. Ningún marcado
 * usaba las clases. Se retira el bloque en lugar de completarlo: la
 * Fase 4 lo añadirá a conciencia si el diseño lo pide, con el estado
 * de partida bajo html.js para no ocultar nada sin JavaScript.
 *
 * Retirados también los dos scripts que acompañaban al bloque:
 * js/reveal.js y js/lazy-load-images.js ya no existen ni se cargan
 * desde partials/footer.php. Observaban cero elementos y se
 * descargaban en todas las páginas.
 */

/* ── CABECERA DE PÁGINA ───────────────────────────────────────── */
/*
 * Portada corta de una página interior: antetítulo, h1 y entradilla. No
 * es el hero de la portada (ese vive en style-page-inicio.css con sus
 * propias clases): aquí solo hay texto, sin imagen ni altura fija.
 *
 * Estaba escrito palabra por palabra, comentario incluido, en las cuatro
 * hojas de el-congreso, patrocinadores, precongreso y sede: 36 líneas
 * idénticas por hoja. Sube aquí una sola vez. Como cada página carga
 * exactamente UNA hoja de página, subirlo a la capa común no puede
 * afectar a ninguna que no lo use.
 *
 * programa y ponentes traen su propio marcado (.programa-intro,
 * .ponentes-cabecera) y no pueden usar estas clases sin tocar el PHP:
 * sus hojas alinean el ritmo con estos mismos valores.
 */
.cabecera-pagina {
    padding: 54px 0 40px;
    border-bottom: 1px solid var(--linea);
}

.antetitulo-pagina {
    font-size: var(--txt-rotulo);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 0 0 12px;
}

.entradilla-pagina {
    font-size: var(--txt-entradilla);
    color: var(--gris);
    max-width: 62ch;
    margin: 16px 0 0;
}

/* ── ACCIONES Y NOTAS ─────────────────────────────────────────── */
.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 26px 0 0;
}

.nota {
    font-size: var(--txt-servicio);
    color: var(--gris);
    margin: 14px 0 0;
    max-width: 62ch;
}

/* ── PANEL ────────────────────────────────────────────────────── */
/*
 * La caja que NO es tarjeta: avisos del programa, caja del filtro,
 * estados vacíos, caja de logo. Seis cajas con cinco rellenos distintos
 * en cuatro hojas; misma deriva que style-colors.css da por erradicada
 * en la tarjeta, reaparecida con otros nombres. Una sola definición y
 * una sola medida (--panel-relleno).
 *
 * Los selectores marcados «alias» son el nombre que hoy trae el marcado.
 * Cuando el PHP escriba class="panel …" desaparecen de esta lista; no
 * se repite ni una declaración mientras tanto.
 */
.panel,
.estado-vacio,
/* alias: programa.php */
.programa-avisos,
.programa-filtros,
.programa-vacio,
/* alias: patrocinadores.php */
.proximamente,
.logo,
/* alias: precongreso.php */
.sin-datos {
    padding: var(--panel-relleno);
    border: 1px solid var(--linea);
    border-radius: var(--tarjeta-radio);
    background: var(--hueso-claro);
}

/* ── ESTADO VACÍO ─────────────────────────────────────────────── */
/*
 * «No hay resultados», «todavía no hay datos», «próximamente». Tres
 * hojas lo resolvieron de tres maneras (una caja, un párrafo gris suelto
 * y un bloque centrado con borde discontinuo). Uno solo, con una
 * variante destacada para cuando el estado ES el contenido de la
 * sección y no puede leerse como un hueco.
 */
.estado-vacio,
.programa-vacio,
.sin-datos,
.proximamente {
    max-width: 60ch;
    margin: 24px 0 0;
    color: var(--gris);
}

.estado-vacio-destacado,
.proximamente {
    margin-inline: auto;
    padding: 46px 26px;
    border-style: dashed;
    text-align: center;
}

/* ── AVISOS ───────────────────────────────────────────────────── */
/*
 * Lo que aún no está confirmado se dice con todas las letras. Cuatro
 * páginas lo escribieron con cuatro rellenos y dos grosores de filete;
 * aquí va uno. Filete morado de marca, fondo claro y cero rojos ni
 * iconos de advertencia: el aviso informa, no alarma.
 *
 * .aviso-sobrio  apaga el filete (dato de servicio, no advertencia).
 * .aviso-ruta    lleva el filete al color de la ruta y suelta el fondo.
 */
.avisos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 24px 0 0;
}

.aviso,
/* alias: plantillas/ponencia.php y plantillas/persona.php */
.ficha-avisos {
    max-width: 68ch;
    margin: 24px 0 0;
    padding: 12px 16px;
    border-left: 4px solid var(--morado);
    background: var(--hueso-claro);
    font-size: var(--txt-menor);
    color: var(--tinta);
}

/* Dentro de la pila el hueco lo pone .avisos, no cada aviso. */
.avisos .aviso {
    margin: 0;
}

/* Sobre fondo claro el aviso perdería el canto: sube un tono. */
.fondo-claro .aviso {
    background: var(--hueso);
}

.aviso-sobrio {
    border-left-color: var(--linea);
    color: var(--gris);
}

.aviso-ruta,
.ficha-avisos {
    border-left-color: var(--c);
    background: none;
    padding: 2px 0 2px 16px;
}

/* ── IMPRESIÓN ────────────────────────────────────────────────── */
@media print {
    /* Justificación de !important: la hoja impresa tiene que ganar a
       reglas de componente muy específicas (#go-top-button, .sticky)
       sin duplicar aquí sus selectores. */
    header,
    footer,
    #go-top-button,
    #device-menu-container,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .seccion {
        padding: 18pt 0;
    }

    /* Una ponencia o una ficha no debe partirse entre dos hojas. */
    .seccion,
    figure,
    li {
        break-inside: avoid;
    }

    /* En papel un enlace sin dirección no lleva a ninguna parte. */
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}