/* ═══════════════════════════════════════════════════════════════
Capa de tarjetas: la caja compartida por programa, ponentes,
precongreso, el-congreso y patrocinadores.
Regla de la capa: la caja se define UNA vez en .tarjeta. Todo lo
demás son modificadores que añaden solo lo que cambia (un filete,
un color de ruta, un comportamiento de enlace). Ninguna hoja
style-page-*.css debe volver a declarar background, border,
border-radius ni padding de una tarjeta: si una página necesita
una variante nueva, se añade aquí como modificador.
Se carga antes de style.css y de la hoja de cada página, así que
cualquiera de las dos puede matizar una tarjeta sin !important.
═══════════════════════════════════════════════════════════════ */
/* ── LA CAJA ──────────────────────────────────────────────────── */
/*
* Única definición de la caja en todo el sitio. El relleno y el radio
* vienen de style-colors.css, donde queda anotada la deriva de 2-4px
* que unifican.
*/
.tarjeta {
background: var(--hueso-claro);
border: 1px solid var(--linea);
border-radius: var(--tarjeta-radio);
padding: var(--tarjeta-relleno);
/*
* En una rejilla, un elemento con min-width:auto (el valor por
* defecto) se niega a encogerse por debajo de su contenido, y una
* palabra como «inmunohistoquímica» ensancharía la columna. Con
* min-width:0 la caja cede y el overflow-wrap:break-word que
* hereda de parte la palabra donde toca.
*/
min-width: 0;
}
/* ── MODIFICADORES ────────────────────────────────────────────── */
/*
* Cada uno se escribe junto a .tarjeta en el marcado
* (class="tarjeta tarjeta-sesion") y aporta SOLO su diferencia.
* Ninguno repite la caja.
*/
/* Programa: sesión de una franja horaria. Lleva la marca de la ruta
en el canto izquierdo; el color de ruta jamás pinta el texto. */
.tarjeta-sesion {
border-left: 6px solid var(--c);
display: flex;
flex-direction: column;
}
/* Ponentes: misma caja, filete de 4px. */
.tarjeta-ponente {
border-left: 4px solid var(--c);
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Ruta temática: la marca va arriba, en banda, para que la tarjeta se
lea como cabecera de su ruta y no como una sesión más. */
.tarjeta-ruta {
border-top: 5px solid var(--c);
}
/*
* Tarjeta sobria: la misma caja, apagada un punto. La usan los trámites
* y el descanso de la Jornada Precongreso, que son servicio y no
* contenido: sin fondo y con el borde discontinuo, las tres mesas
* destacan sin necesidad de colorear ni un texto.
*
* Vivía en style-page-precongreso.css, que declaraba «background» y
* «border-style» sobre elementos class="tarjeta bloque bloque-tramite»
* —es decir, sobre tarjetas—: justo lo que prohíbe la cabecera de esta
* hoja. Sube aquí como modificador, que es lo que siempre fue.
*/
.tarjeta-sobria,
/* alias: precongreso.php */
.bloque-tramite,
.bloque-descanso {
background: transparent;
border-style: dashed;
}
/*
* Filete de ruta de 6px sobre una tarjeta, sin más. Es el mismo canto de
* .tarjeta-sesion para una caja que no es una sesión (las mesas de la
* Jornada Precongreso). Toma var(--c), no --morado literal: en una
* página sin data-ruta --c YA vale el morado de marca, así que el
* resultado es idéntico y la tarjeta se colorea sola el día que la
* jornada se reparta por rutas.
*/
.tarjeta-filete,
/* alias: precongreso.php */
.bloque-mesa {
border-left: 6px solid var(--c);
}
/*
* Tarjeta lisa (el-congreso, patrocinadores): no necesita clase. Es
* .tarjeta a secas. Se deja escrito para que nadie invente
* .tarjeta-simple ni vuelva a copiar la caja en su hoja de página.
*/
/* ── TARJETA ENLACE ───────────────────────────────────────────── */
/*
* Dos formas de hacer clicable la caja entera. Las dos dejan un solo
* elemento interactivo por tarjeta: nada de un dentro de otro ,
* que duplica paradas de tabulador y confunde al lector de pantalla.
*
* 1) La tarjeta ES el enlace:
* 2) La tarjeta CONTIENE un enlace que se estira sobre ella:
*
*
*
* Así el nombre accesible del enlace es el título, no el bloque
* entero, y el resto del texto de la tarjeta sigue siendo
* seleccionable.
*
* No hay transform en el :hover. El movimiento sobraba y obligaba a
* desandarlo dentro de prefers-reduced-motion; el realce se hace con
* sombra y color de filete, que no se mueven. La transición sí se
* declara: la regla global de style-generic.css la anula sola cuando
* el sistema pide menos movimiento.
*/
.tarjeta-enlace,
.tarjeta-con-enlace {
color: var(--tinta);
text-decoration: none;
transition: box-shadow .18s ease, border-color .18s ease;
}
.tarjeta-enlace {
display: block;
}
.tarjeta-con-enlace {
position: relative;
}
.tarjeta-enlace:hover,
.tarjeta-con-enlace:hover {
border-color: var(--c);
box-shadow: 0 14px 32px rgba(0, 26, 45, .13);
}
.tarjeta-enlace h3,
.tarjeta-con-enlace h3 {
color: inherit;
}
.tarjeta-enlace:hover h3,
.tarjeta-con-enlace:hover .enlace-cubre {
text-decoration: underline;
text-decoration-color: var(--c);
text-underline-offset: 3px;
}
/* El enlace estirado: su ::after cubre la tarjeta y recoge el clic. */
.enlace-cubre {
color: inherit;
text-decoration: none;
}
.enlace-cubre::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
/*
* El foco tiene que verse alrededor de la tarjeta, no de las tres
* palabras del título. Se dibuja sobre el ::after, que ya tiene el
* tamaño de la caja, y se le pasa el radio de la tarjeta para que el
* contorno siga la esquina redondeada.
*/
.enlace-cubre:focus-visible {
outline: none;
}
.enlace-cubre:focus-visible::after {
outline: 3px solid var(--morado);
outline-offset: 3px;
border-radius: var(--tarjeta-radio);
}
/* ── REJILLA ──────────────────────────────────────────────────── */
/*
* .rejilla ya está tomada por el hero de la portada, así que la
* rejilla de tarjetas se llama .tarjetas, como en el sistema visual.
*
* Sin media queries: auto-fill reparte las columnas que quepan y a
* partir de 320px cae sola a una. El min() evita que una columna de
* 280px desborde una pantalla de 320px (el contenedor deja 276px de
* ancho útil). --tarjetas-min permite a la Fase 4 pedir columnas más
* anchas o más estrechas sin escribir otra rejilla.
*/
.tarjetas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tarjetas-min, 280px)), 1fr));
gap: var(--tarjetas-hueco, 22px);
align-items: start;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
/* ── PIEZAS DE DENTRO ─────────────────────────────────────────── */
/*
* Etiqueta de ruta. Es el único sitio donde el color de ruta toca
* texto, y lo hace como fondo: --c pinta la píldora y --sc el texto
* que va encima. Las cinco parejas cumplen AA.
*/
.etiqueta {
display: inline-flex;
align-items: center;
/* Dentro de una tarjeta en columna flex, sin esto la píldora se
estira de canto a canto y deja de leerse como etiqueta. */
align-self: flex-start;
gap: 8px;
background: var(--c);
color: var(--sc);
border-radius: 999px;
padding: 6px 14px;
font-size: var(--txt-rotulo);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
margin: 0 0 12px;
}
/*
* Variante sin fondo, para cuando la tarjeta ya lleva el filete de la
* ruta y una píldora de color sería redundante. El punto sustituye al
* fondo como marca; el texto se queda en tinta.
*/
.etiqueta-sobria {
background: none;
color: var(--tinta);
padding: 0;
}
.punto {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--c);
flex: none;
}
/* ── EL DISCO DE LA INICIAL ───────────────────────────────────── */
/*
* Ninguna de las personas del Congreso tiene fotografía y puede que no
* llegue a tenerla. Un hueco gris esperando una imagen se lee como error
* de carga; las iniciales sobre el disco de su ruta se leen como
* decisión. --c pinta el DISCO y --sc la letra que va encima: el color
* de ruta nunca es color de texto.
*
* Existía dos veces (.ponente-retrato de 74px en la rejilla de ponentes
* y .inicial de 84px en la ficha) y las dos copias se habían separado:
* solo una traía la regla de alto contraste forzado, y en papel una
* imprimía el aro y la otra un círculo macizo de tinta. Una definición y
* dos medidas, --inicial-tamano y --inicial-letra.
*
* Cuando lleguen las fotos, esta misma caja las recibe sin cambiar de
* tamaño ni de posición: basta con que la plantilla imprima un ![]()
.
*/
.inicial,
/* alias: ponentes.php */
.tarjeta .ponente-retrato {
--inicial-tamano: 84px;
--inicial-letra: 38px;
display: grid;
place-items: center;
flex: none;
width: var(--inicial-tamano);
height: var(--inicial-tamano);
border-radius: 50%;
overflow: hidden;
background: var(--c);
color: var(--sc);
font-family: var(--font-headers);
font-size: var(--inicial-letra);
font-weight: 650;
line-height: 1;
/* Dos iniciales no se parten ni se separan de su disco. */
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.inicial img,
.ponente-retrato img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* En alto contraste forzado el navegador descarta los colores de fondo:
* sin borde, el disco desaparece y las iniciales quedan flotando. El
* borde del sistema lo mantiene visible. Estaba solo en la hoja de
* ponentes, así que el disco de la ficha se esfumaba.
*/
@media (forced-colors: active) {
.inicial,
.tarjeta .ponente-retrato {
border: 1px solid CanvasText;
}
}
/* Línea de hora y datos de servicio: dónde y cuándo, en gris. */
.tarjeta-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
font-size: var(--txt-servicio);
color: var(--gris);
margin: 0 0 12px;
}
.tarjeta-meta .hora {
font-family: var(--font-headers);
font-size: 17px;
font-weight: 650;
color: var(--tinta);
}
/*
* Escala del titular de tarjeta. El sistema visual oscilaba entre 19,
* 20 y 21px según la página: se unifica en --txt-h3 (20px), que es lo
* que ya vale un h3 del sitio. Aquí solo se ajustan el interlineado y
* el margen, que un h3 suelto no trae.
*/
.tarjeta > h3,
.tarjeta-titulo {
font-size: var(--txt-h3);
line-height: 1.22;
margin: 0 0 10px;
}
/*
* El cuerpo de texto de la tarjeta, en gris y sin margen sobrante.
*
* Va dentro de :where() a proposito. Escrito como «.tarjeta p» la regla
* pesa (0,1,1) y le gana a cualquier clase suelta de una hoja de pagina,
* que pesa (0,1,0): al construir la Fase 4 eso obligo a tres hojas
* distintas a inventarse cualificadores (.tarjeta p.sesion-ponentes,
* .tarjeta .ponente-rotulo, .cifras .cifra-dato) para poder cambiar el
* tamano de un parrafo. Cinco parches para la misma causa.
*
* :where() no aporta especificidad, asi que esto pesa (0,1,0) y una
* clase de pagina lo matiza sin trucos. Sigue siendo un valor por
* defecto util; deja de ser una barrera.
*
* Compatibilidad: :where() es de 2021, anterior a text-wrap:balance y
* aspect-ratio, que esta web ya usa. No abre ningun frente nuevo.
*/
.tarjeta :where(p) {
font-size: var(--txt-menor);
color: var(--gris);
line-height: 1.5;
margin: 0 0 12px;
}
.tarjeta > :last-child {
margin-bottom: 0;
}
/* Empuja el pie de la tarjeta al fondo cuando la caja es flex. */
.tarjeta-pie {
margin-top: auto;
padding-top: 14px;
}
/* ── IMPRESIÓN ────────────────────────────────────────────────── */
@media print {
/* Una tarjeta partida entre dos hojas se lee dos veces a medias. */
.tarjeta {
break-inside: avoid;
background: #fff;
box-shadow: none;
}
/* En papel el filete grueso se come el margen de la hoja. */
.tarjeta-sesion,
.tarjeta-ponente {
border-left-width: 4px;
}
.tarjetas {
gap: 12pt;
}
/* En papel el disco lleno se lleva media carga de tinta por tarjeta y
no aporta nada: se queda el aro. */
.inicial,
.tarjeta .ponente-retrato {
background: none;
color: var(--tinta);
border: 1.5pt solid var(--tinta);
}
}