/* Theme Name: CIAT News Theme URI: https://www.ciat.org/ Author: CIAT Description: Tema institucional limpio para www.ciat.org, reconstruido desde cero para WordPress 7 y PHP 8.4. Reproduce la apariencia del sitio anterior (identidad CIAT, cabecera blanca de dos filas, tarjetas de noticia, sidebar y pie azul) sin heredar código del tema legado. Compatible con Polylang. Version: 1.17.33 Requires at least: 7.0 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ciat-news Domain Path: /languages */ /* Todos los valores llevan al lado el del sitio publicado del que salen. La medición está en docs/migration/visual-parity.md; donde nos separamos del original es siempre por accesibilidad y está anotado con «AA». */ :root { /* Los colores de este bloque los declara `theme.json`, y aqui se consumen. La direccion importa: el selector de color del editor necesita un hex literal para dibujar la muestra y calcular contraste, y un `var()` ahi no se previsualiza ni se mide. Asi que la verdad vive en `theme.json` y `:root` la recoge. El segundo argumento de cada `var()` no es una segunda verdad: solo entra en juego si `theme.json` desapareciera, y sin el el sitio se quedaria literalmente sin color sin dar ni un error. Trampa que conviene conocer: si alguien cambia un hex en `theme.json` y no toca el de aqui, no se nota hasta el dia que falte `theme.json`. */ --color-primary: var(--wp--preset--color--primary, #003b64); /* navy CIAT: nav, pie, botones */ --color-link: var(--wp--preset--color--link, #337ab7); /* enlaces, título de entrada y de widget */ --color-lang: #23378b; /* selector de idioma (parche del original de 2026-08-10) */ --color-card-title: #36484d; /* título de tarjeta en el listado */ /* Color de la categoría en la tarjeta. En el original varía por término —CIATBlog en verde, las de noticias en azul—, así que aquí es un token que la propia tarjeta reasigna por slug (ver `.cat-*` en «News cards»). Este es el valor por defecto, el que se lleva cualquier categoría sin color propio: hay 80 y no todas necesitan uno. Se usa el azul de enlace medido y no el #348ccf del original, que a 18px da 3,6:1 sobre blanco y no llega a AA. El verde del blog es el medido y da 5,5:1, así que ese sí se conserva. */ --color-category: var(--color-link); --color-category-blog: var(--wp--preset--color--category-blog, #2b782b); /* CIATBlog */ --color-surface: var(--wp--preset--color--surface, #fff); /* fondo de cabecera, nav y desplegables */ --color-on-primary: var(--wp--preset--color--surface, #fff); /* texto sobre navy */ --color-border: #e5e5e5; /* filetes; 4px bajo la cabecera y el pie */ --color-text: var(--wp--preset--color--text, #666); --color-text-muted: #6f6f6f; /* AA: el original usa #777 (4,48:1) */ --color-heading: var(--wp--preset--color--heading, #000); --color-bg: var(--wp--preset--color--surface, #fff); --color-bg-alt: var(--wp--preset--color--bg-alt, #f8f8f8); /* caja de la barra lateral */ /* Panel ancho de la navegación (`mega-menu`). El gris del panel y el filete entre columnas son los medidos; el azul de las cabeceras se oscurece porque el del original, #348ccf, da 3,2:1 sobre ese gris y son 12px en negrita, que no cuentan como texto grande. El de aquí da 5,2:1. */ --color-mega-bg: #f1f1f1; --color-mega-rule: #c1c1c1; --color-mega-heading: #26699e; /* AA: el original usa #348ccf (3,2:1) */ /* El original usaba grises de 2,6:1 y 4,0:1 sobre navy. El footer reconstruido usa blanco para todo su texto; hover y foco se distinguen por forma (subrayado y outline), no reduciendo el contraste. */ --color-footer-text: #fff; --color-footer-link: #fff; --color-focus: #e25b32; /* solo el anillo de foco; no está en el original */ /* Los dos del banner van en rgba y no en hex porque se pintan encima de una imagen cualquiera: la transparencia es parte del color, no una opacidad aplicada al elemento, que también apagaría el icono o el texto de encima. Los dos valores están elegidos por contraste en el peor caso, que es una imagen blanca debajo: el navy al 78% da 6,1:1 con la flecha blanca y el negro al 55% da 4,7:1 con el pie de foto blanco. Bajar cualquiera de los dos porcentajes rompe el 4,5:1 de WCAG AA. */ --color-hero-control: rgba(0, 59, 100, .78); /* flechas y pausa del banner */ --color-hero-caption: rgba(0, 0, 0, .55); /* franja del pie de foto del banner */ --font-body: 'Open Sans', Arial, Helvetica, sans-serif; --border-hairline: 1px solid var(--color-border); /* Colores de marca de cada red, para los botones de compartir. El azul de Facebook se oscurece de #1877F2 a #0C63D4 porque el oficial da 4,23:1 sobre blanco y no llega al 4,5:1 de WCAG AA; el resto son los oficiales y ya pasan (X 21:1, LinkedIn 5,69:1). */ --radius-share: 8px; /* botones de compartir: mas redondeados que el resto */ --brand-facebook: #0c63d4; --brand-x: #000; --brand-linkedin: #0a66c2; --brand-youtube: #c00; --brand-whatsapp: #128c3f; --radius: 3px; --wrap: 1230px; --gap: 20px; /* escala real del original: 5 · 10 · 20 · 30 */ --gap-lg: 30px; --nav-height: 47px; --hero-ratio: 40 / 7; /* banner: los 1440×252 medidos en el original */ } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } img { max-width: 100%; height: auto; } a { color: var(--color-link); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* El original declara `font-weight: normal` en h1..h6 y no usa letter-spacing en ninguna hoja; los titulares son de peso regular, no negrita. */ h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: 400; line-height: 1.3; margin: 0 0 .5em; } h1 { font-size: 1.55rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.2rem; color: var(--color-primary); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } /* Utilidades de accesibilidad. Sin ellas WordPress muestra texto que solo debería leer un lector de pantalla (etiqueta del buscador, título de la paginación). */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; background: var(--color-surface); padding: 8px 14px; z-index: 1000; } /* ---------- Header ---------- El original no tiene barra superior: la cabecera es blanca y de dos filas (marca + idioma arriba, navegación debajo), cerrada por un filete de 4px. */ .site-header { background: var(--color-surface); } .site-header .wrap { display: flex; align-items: center; gap: var(--gap-lg); padding-top: 10px; padding-bottom: 10px; } .site-branding .site-title { margin: 0; font-size: 1.7rem; } .site-branding .site-title a { color: var(--color-primary); text-decoration: none; } .site-branding img { max-height: 72px; width: auto; } .site-branding .site-description { margin: 2px 0 0; font-size: .8rem; color: var(--color-text-muted); } .header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--gap); } .lang-switcher { position: relative; color: var(--color-primary); } .lang-switcher .language-flag { display: none; } .lang-switcher__trigger { display: flex; align-items: center; gap: 8px; min-width: 142px; border: 0; border-radius: 5px; background: transparent; color: var(--color-primary); padding: 8px 10px; font: inherit; font-weight: 600; cursor: pointer; } .lang-switcher__trigger:hover { background: transparent; } .lang-switcher__trigger:focus-visible, .lang-switcher__menu a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .lang-switcher__chevron { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; } .lang-switcher.is-open .lang-switcher__chevron { transform: translateY(2px) rotate(225deg); } .lang-switcher__menu { z-index: 120; list-style: none; min-width: 190px; margin: 7px 0 0; padding: 5px; border: var(--border-hairline); border-radius: 6px; background: var(--color-surface); box-shadow: 0 8px 22px rgb(0 59 100 / 18%); } .lang-switcher__menu li { margin: 0; } .lang-switcher__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px; color: var(--color-lang); text-decoration: none; } .lang-switcher__menu a:hover { background: var(--color-bg-alt); text-decoration: underline; text-underline-offset: 2px; } .lang-switcher__menu a[aria-current="page"] { background: var(--color-bg-alt); color: var(--color-primary); font-weight: 600; } .language-flag { flex: 0 0 auto; width: 24px; height: 16px; border: 1px solid rgb(0 0 0 / 16%); border-radius: 2px; background-position: center; background-size: cover; box-shadow: 0 1px 1px rgb(0 0 0 / 8%); } .language-flag--es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='%23aa151b' d='M0 0h24v16H0z'/%3E%3Cpath fill='%23f1bf00' d='M0 4h24v8H0z'/%3E%3C/svg%3E"); } .language-flag--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='%23fff' d='M0 0h24v16H0z'/%3E%3Cpath stroke='%23b22234' stroke-width='2' d='M0 1h24M0 5h24M0 9h24M0 13h24'/%3E%3Cpath fill='%233c3b6e' d='M0 0h11v8H0z'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='2' cy='2' r='.65'/%3E%3Ccircle cx='5.5' cy='2' r='.65'/%3E%3Ccircle cx='9' cy='2' r='.65'/%3E%3Ccircle cx='3.75' cy='4' r='.65'/%3E%3Ccircle cx='7.25' cy='4' r='.65'/%3E%3Ccircle cx='2' cy='6' r='.65'/%3E%3Ccircle cx='5.5' cy='6' r='.65'/%3E%3Ccircle cx='9' cy='6' r='.65'/%3E%3C/g%3E%3C/svg%3E"); } .js .lang-switcher__menu { position: absolute; top: 100%; right: 0; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .js .lang-switcher.is-open .lang-switcher__menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .no-js .lang-switcher__trigger { display: none; } .no-js .lang-switcher__menu { display: flex; } /* ---------- Navigation ---------- Enlaces de 14px en navy, caja de 47px y sin mayúsculas: el original declara `text-transform: none` de forma explícita. Señal de estado: el original solo pasaba de #003b64 a #555 al pasar el ratón. Son dos navy casi iguales a 14px, y para quien navega con teclado no había señal ninguna. Aquí se conserva el cambio de color y se le suma un filete navy de 3px bajo el elemento, pintado con `box-shadow` para que no mueva la fila, más subrayado en los enlaces de los paneles. Desplegables: dos formas, un solo markup. - Normal: el panel cuelga del
  • , mide lo que necesite y se ancla a su izquierda. - Ancho (`mega-menu`): ocupa el contenedor entero y reparte a sus hijos directos en columnas. La clase la escribe el editor en el campo «Clases CSS» de Apariencia → Menús; ver README.md, «Crear el menú principal». Quién los abre depende de si hay JavaScript, y el porqué está en header.php: sin él mandan `:hover` y `:focus-within`, con él manda `.is-open`. */ .main-nav { background: var(--color-surface); border-bottom: 4px solid var(--color-border); } /* Posicionado a propósito: es el bloque de referencia de los paneles anchos. Sin esto se anclarían al
  • y medirían lo que mida su rótulo. */ .main-nav .wrap { display: flex; align-items: center; position: relative; } .main-nav ul { list-style: none; margin: 0; padding: 0; } .main-nav .nav-menu { display: flex; flex-wrap: wrap; } .main-nav li { position: relative; } /* El enlace y su botón de despliegue son una sola fila de la barra. */ .main-nav .nav-menu > li { display: flex; align-items: center; } .main-nav a { display: block; font-size: .93rem; color: var(--color-primary); padding: 0 14px; line-height: var(--nav-height); text-decoration: none; } .main-nav a:hover, .main-nav a:focus, .main-nav .current-menu-item > a { color: var(--color-text); } .main-nav .nav-menu > li:hover > a, .main-nav .nav-menu > li.is-open > a, .main-nav .nav-menu > li > a:focus, .main-nav .nav-menu > li.current-menu-item > a, .main-nav .nav-menu > li.current-menu-ancestor > a { box-shadow: inset 0 -3px 0 var(--color-primary); } /* Solo el primer nivel se despliega. Lo que hay dentro —columnas de un panel ancho, o sublista de un desplegable normal— viaja con él y no se oculta por separado; así el mismo par de reglas sirve para las dos formas. */ .main-nav .nav-menu > li > .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--color-bg-alt); min-width: 240px; z-index: 50; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); } .main-nav .sub-menu a { padding: 8px 15px; line-height: 1.5; } .main-nav .sub-menu a:hover, .main-nav .sub-menu a:focus { text-decoration: underline; } /* Tercer nivel de un desplegable normal: sangrado dentro del panel abierto. */ .main-nav .nav-menu > li:not(.mega-menu) > .sub-menu .sub-menu a { padding-left: 30px; } .no-js .main-nav .nav-menu > li:hover > .sub-menu, .no-js .main-nav .nav-menu > li:focus-within > .sub-menu, .js .main-nav .nav-menu > li.is-open > .sub-menu { display: block; } /* Botón que abre cada desplegable, añadido por ciat_news_nav_submenu_toggle(). Se oculta sin JavaScript porque ahí no haría nada: sería una parada muerta del tabulador, y el panel ya se abre al enfocar el enlace. */ .submenu-toggle { display: flex; align-items: center; align-self: stretch; margin-left: -8px; padding: 0 12px 0 0; border: 0; background: none; color: var(--color-primary); cursor: pointer; } .submenu-toggle-icon { display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .is-open > .submenu-toggle .submenu-toggle-icon { transform: translateY(2px) rotate(-135deg); } .no-js .submenu-toggle { display: none; } /* ---------- Panel ancho de varias columnas ---------- `position: static` en el elemento marcado devuelve el anclaje al contenedor: es lo único que hace falta para que el panel mida todo el ancho en vez del rótulo que lo abre. */ .main-nav .nav-menu > .mega-menu { position: static; } .main-nav .nav-menu > .mega-menu > .sub-menu { left: 0; right: 0; min-width: 0; padding: var(--gap) 20px var(--gap-lg); background: var(--color-mega-bg); flex-wrap: wrap; } .no-js .main-nav .nav-menu > .mega-menu:hover > .sub-menu, .no-js .main-nav .nav-menu > .mega-menu:focus-within > .sub-menu, .js .main-nav .nav-menu > .mega-menu.is-open > .sub-menu { display: flex; } /* Una columna por hijo directo: el número de columnas lo decide la estructura del menú y no un ajuste del tema, así que añadir una columna es añadir un elemento en wp-admin. `flex: 1 1 0` las reparte a partes iguales y `min-width: 0` impide que un rótulo largo ensanche la suya. */ .main-nav .mega-menu > .sub-menu > li { flex: 1 1 0; min-width: 0; padding: 0 var(--gap); border-left: 2px solid var(--color-mega-rule); } .main-nav .mega-menu > .sub-menu > li:first-child { padding-left: 0; border-left: 0; } /* Cabecera de columna: 12px, negrita y mayúsculas. Sigue siendo un enlace —lo es en el original— y por eso conserva foco y subrayado. */ .main-nav .mega-menu > .sub-menu > li > a { padding: 0 0 6px; font-size: .8rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; color: var(--color-mega-heading); } .main-nav .mega-menu > .sub-menu > li > .sub-menu a { padding: 3px 0; font-size: .8rem; line-height: 1.5; color: var(--color-primary); } /* Fila ancha (`mega-row`): una columna que ocupa el panel entero y reparte sus enlaces en tantas columnas de texto como quepan. Es lo que sostiene la lista de países del desplegable «CIAT» sin necesidad de 41 columnas de menú. */ .main-nav .mega-menu > .sub-menu > li.mega-row { flex-basis: 100%; margin-top: var(--gap); padding: var(--gap) 0 0; border-left: 0; border-top: 2px solid var(--color-mega-rule); } .main-nav .mega-row > .sub-menu { columns: 170px; column-gap: var(--gap-lg); } .main-nav .mega-row > .sub-menu > li { break-inside: avoid; } /* ---------- Marcas sueltas del elemento de menú ---------- Como `mega-menu`, se escriben en el campo «Clases CSS» de Apariencia → Menús. Los iconos son SVG propios embebidos como máscara para que hereden `currentColor` y sigan al estado del enlace; no se copia ningún asset del sitio anterior. */ .main-nav .nav-menu > .menu-right { margin-left: auto; } .main-nav .menu-icon-home > a::before, .main-nav .menu-icon-user > a::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: currentColor; mask: var(--menu-icon) center / contain no-repeat; -webkit-mask: var(--menu-icon) center / contain no-repeat; } .main-nav .menu-icon-home > a { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3z'/%3E%3C/svg%3E"); } .main-nav .menu-icon-user > a { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/%3E%3C/svg%3E"); } /* Elemento de solo icono. El rótulo se deja de ver pero sigue en el documento, así que el enlace conserva nombre accesible: el del original no lo tenía. */ .main-nav .menu-hide-label > a { font-size: 0; } .main-nav .menu-hide-label > a::before { margin-right: 0; } .nav-toggle { display: none; } /* ---------- Layout ---------- */ .site-main { padding: var(--gap-lg) 0 50px; } /* Dos columnas solo si sidebar.php realmente pintó widgets; así el área de contenido no reserva una columna vacía cuando no hay ninguno. El reparto es el del original: contenedor de 1230px, principal ≈75% y lateral ≈25%. */ .content-area:has(.sidebar) .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap-lg); } .page-title { color: var(--color-link); margin-bottom: var(--gap); } /* ---------- Banner de portada (área hero-1 + bloque ciat/hero-carousel) ---------- El área la pinta index.php por encima de .content-area, así que el banner ocupa el ancho de la ventana y no el contenedor de 1230px, como el del sitio publicado. Debajo lleva el mismo filete de 4px que cierra la cabecera. */ .hero-widgets { margin-bottom: var(--gap-lg); border-bottom: 4px solid var(--color-border); } /* El banner arranca pegado a la navegación, como en el original, así que se anula el respiro superior de .site-main; el de abajo lo pone el propio banner. Sin banner colocado, .site-main se queda como estaba. */ .site-main:has(.hero-widgets) { padding-top: 0; } .site-main:has(.ciat-institutional-banner) { padding-top: 0; } /* El mismo banner cuando vive como primer bloque de la portada (el contrato editorial lo quiere ahí para que toda la portada se edite en una sola página). `.front-page-content` no impone ancho, así que el bloque ya sale a sangre completa; aquí solo se replican el filete, el respiro inferior y el pegado a la navegación que traía el área `hero-1`. */ .front-page-content > .wp-block-ciat-hero-carousel { margin-bottom: var(--gap-lg); border-bottom: 4px solid var(--color-border); } .site-main:has(.front-page-content > .wp-block-ciat-hero-carousel:first-child) { padding-top: 0; } /* Cierre compartido por los banners de las páginas institucionales. Se apuntan únicamente sus cajas semánticas de primer nivel: así el filete no termina en portadas, tarjetas ni imágenes internas que también viven dentro de ellas. El filete pertenece a la propia caja —antes de su margen inferior— para quedar pegado al banner en cualquier ancho, igual que el de portada, sin añadir un bloque decorativo al contenido editable. */ :is( .entry-content > .ciat-institutional-banner, .ciat-technical-assistance > .ciat-institutional-banner, .ciat-training-page .ciat-training-page__banner, .ciat-cooperation-page .entry-content > .ciat-cooperation-banner, .ciat-publications-page > .ciat-publications-page__latest ) { border-bottom: 4px solid var(--color-border); } /* Contrato reusable de ancho completo para el banner institucional genérico. */ .entry-content > .ciat-institutional-banner { left: 50%; margin: 0 0 var(--gap-lg) -50vw; max-width: none; position: relative; width: 100vw; } .entry-content > .ciat-institutional-banner img { display: block; height: auto; width: 100%; } .ciat-hero-carousel { position: relative; } /* Aquí se resuelve el salto de altura del carrusel anterior, que cambiaba de alto al llegar a una diapositiva con otra proporción y movía la página entera que tenía debajo. Son dos reglas y ninguna necesita JavaScript: 1. El alto lo fija la caja y nunca la imagen: --hero-ratio son los 1440×252 medidos en el sitio publicado, y aspect-ratio los convierte en una altura proporcional al ancho de la ventana. 2. Todas las diapositivas ocupan la misma celda de la rejilla (grid-area: 1/1) y se ocultan con visibility, no con display: ninguna sale del flujo al ocultarse, así que el alto del contenedor no depende de cuál esté visible. visibility además las saca del orden de tabulación y del árbol de accesibilidad, que es lo que evita que se pueda tabular a un enlace invisible. El precio es que una imagen con otra proporción se recorta (object-fit: cover) en lugar de mover la página. Es el intercambio correcto: el recorte se ve al preparar la imagen y se corrige ahí; el salto lo sufre quien lee. */ .ciat-hero-track { display: grid; aspect-ratio: var(--hero-ratio); overflow: hidden; background: var(--color-bg-alt); } .ciat-hero-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; } .ciat-hero-slide.is-current { opacity: 1; visibility: visible; } /* Dentro de cada diapositiva manda el marcado de core/image:
    , un opcional cuando la imagen lleva enlace y el . Los tres tienen que llenar la caja para que el enlace sea todo el banner y no solo la franja que ocupe la imagen. */ .ciat-hero-slide figure { position: relative; height: 100%; margin: 0; } .ciat-hero-slide a { display: block; height: 100%; } .ciat-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* El pie de foto del bloque de imagen se pinta encima del banner, y es la respuesta al peor defecto del carrusel anterior: allí el texto iba rasterizado dentro del PNG, así que no se podía traducir, no lo leía un lector de pantalla y no se podía buscar. Aquí es texto de verdad, lo escribe quien compone el banner y Polylang lo traduce con el resto del contenido. La franja opaca existe porque debajo hay una fotografía cualquiera: sin ella el contraste del texto depende de la imagen. */ .ciat-hero-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 20px; background: var(--color-hero-caption); color: var(--color-on-primary); font-size: .9rem; text-align: center; } /* Los tres botones los crea view.js, no el servidor: sin JavaScript no habría rotación que gobernar y quedarían controles inertes. Su contenedor (.ciat-hero-controls) no se estila: existe solo para ponerlos por delante de la pista en el orden de tabulación, y al no estar posicionado los botones se sitúan contra .ciat-hero-carousel. */ .ciat-hero-button { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-hero-control); color: var(--color-on-primary); cursor: pointer; } /* Al pasar por encima el fondo se opaca en vez de aclararse: aclararlo bajaría el contraste de la flecha blanca justo cuando se está usando. */ .ciat-hero-button:hover { background: var(--color-primary); } .ciat-hero-prev { top: 50%; left: var(--gap); transform: translateY(-50%); } .ciat-hero-next { top: 50%; right: var(--gap); transform: translateY(-50%); } /* El interruptor de pausa es más pequeño que las flechas porque se usa una vez y no debe competir con ellas; 32px siguen muy por encima del objetivo táctil mínimo de 24px de WCAG 2.2 AA. Va arriba a la derecha para no chocar ni con la flecha siguiente ni con el pie de foto. */ .ciat-hero-toggle { top: var(--gap); right: var(--gap); width: 32px; height: 32px; } /* Iconos dibujados con bordes en vez de SVG: el tema no guarda iconos propios —los de compartir salen del núcleo— y una punta de flecha es un cuadrado girado del que solo se pintan dos lados. El desplazamiento de 3px compensa que el cuadrado girado no queda centrado en su caja. */ .ciat-hero-prev .ciat-hero-icon, .ciat-hero-next .ciat-hero-icon { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .ciat-hero-prev .ciat-hero-icon { transform: rotate(-135deg); margin-left: 3px; } .ciat-hero-next .ciat-hero-icon { transform: rotate(45deg); margin-right: 3px; } /* Dos barras mientras rota; triángulo de reproducción cuando está detenida. */ .ciat-hero-toggle .ciat-hero-icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; } .ciat-hero-toggle.is-paused .ciat-hero-icon { width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 4px; } /* Con movimiento reducido view.js no rota nada; esto quita además el fundido de las flechas, que sí siguen funcionando. */ @media (prefers-reduced-motion: reduce) { .ciat-hero-slide { transition: none; } } /* ---------- News cards ---------- La tarjeta del bloque «Lo último» del original, en este orden: foto 16/9, categoría coloreada según el término, título regular en gris pizarra, firma —solo donde el origen la mostraba— y fecha pequeña en negrita. Sin extracto: ese solo lo lleva la tarjeta de búsqueda, y el porqué está en `template-parts/content-card.php`. Ni mayúsculas ni filete inferior: el original no tiene ninguno de los dos. LAS COLUMNAS. Cuatro por encima de 992px y una por debajo, como el original. El paso intermedio a dos no estaba ahí y se añade: en tableta, una sola columna da una foto enorme con un título de cinco palabras y obliga a desplazarse una pantalla por noticia. Y una consecuencia que conviene ver escrita: la rejilla de cuatro columnas del original mide **exactamente** el contenedor (285 × 4 + 30 × 3 = 1230), o sea que es una rejilla a ancho completo y no convive con la barra lateral. Con lateral, la columna principal no pasa nunca de 860px —1230 menos 40 de padding, 300 de lateral y 30 de calle—, y cuatro casillas ahí miden 192px: ni la foto ni el título aguantan. Por eso con lateral el techo son tres columnas de 267px, lo más parecido a las 285 medidas. Solo hace falta por encima de 1030px, que es donde el lateral deja de apilarse debajo. */ /* `1fr` es `minmax(auto, 1fr)`, y ese `auto` deja que el min-content de una tarjeta ensanche su columna: una imagen migrada de 3000px --o rota, con su atributo width intacto-- estiraba la rejilla a 3400px de DOM en un viewport de 1440. Se vio al listar articulos en las fichas de persona, que hasta ahora salian vacias. El resto del tema ya usa `minmax(0, 1fr)`; esta rejilla se habia quedado con la forma vieja. */ .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); } @media (min-width: 581px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1031px) { .content-area:has(.sidebar) .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .news-card { padding-bottom: var(--gap); min-width: 0; } .news-card .card-thumb { display: block; overflow: hidden; margin-bottom: 12px; background: var(--color-bg-alt); } /* El original forzaba 285×160 sobre originales de 1920×1200, así que deformaba todas las fotos: 285/160 es 1,78 y el original 1,6. Eso no se replica. Aquí la proporción se declara y el sobrante lo recorta `cover`: se conserva la forma de la caja, no el estiramiento. */ .news-card .card-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .3s ease; } .news-card .card-thumb:hover img { transform: scale(1.04); } .card-category { display: inline-block; font-size: 1.125rem; color: var(--color-category); margin-bottom: 5px; } /* Un color por categoría, y añadir uno es esto: un token en `:root` y una línea aquí que se lo asigna a un slug. La clase `cat-` la emite `ciat_news_primary_category()` sin saber de colores, así que ninguna categoría nueva toca PHP y la que no tenga línea se queda con `--color-category`, que sigue siendo un color legible. */ .cat-ciatblog { --color-category: var(--color-category-blog); } .card-title { font-size: 1rem; margin: 0 0 5px; line-height: 1.4; } .card-title a { color: var(--color-card-title); } .card-meta { font-size: .75rem; color: var(--color-text-muted); margin: 0; } /* Firma arriba y fecha debajo, cada una en su línea, como el original. */ .card-meta .byline { display: block; color: var(--color-link); } /* La fecha del original va en negrita. `j M Y` sale en minúscula en español («19 ago 2026»); la capital es tipográfica, no un dato, así que se pone aquí y no en el formato, que también rige la versión en inglés. */ .card-meta .posted-on { display: block; font-weight: 700; text-transform: capitalize; } .card-excerpt { font-size: .9rem; color: var(--color-text); margin-top: 10px; } .card-excerpt p { margin: 0; } /* La tarjeta con extracto —solo búsqueda— necesita el doble de ancho: dos columnas como techo, haya lateral o no. Los dos selectores son el mismo caso escrito para las dos especificidades que compiten arriba. */ @media (min-width: 581px) { .card-grid:has(.card-excerpt), .content-area:has(.sidebar) .card-grid:has(.card-excerpt) { grid-template-columns: repeat(2, 1fr); } } /* ---------- Single / page ---------- El título de entrada del original es azul de enlace, de peso regular y de 20px, no un titular grande en negro. */ .entry-header .entry-title { color: var(--color-link); margin-bottom: 8px; } /* Las tres piezas (fecha, firma, comentarios) se leen como tres cosas, no como una frase: --gap-lg es la calle ancha del original. */ .entry-meta { display: flex; flex-wrap: wrap; gap: var(--gap-lg); font-size: .82rem; color: var(--color-text-muted); margin-bottom: var(--gap); } .entry-featured { margin: 0 0 var(--gap); } .entry-content p { margin: .5em 0 1.5em; } .entry-content a { text-decoration: underline; } .entry-content h2, .entry-content h3 { margin-top: 1.4em; } .entry-content ul, .entry-content ol { line-height: 2; } /* Contenido convertido de CIATData (publicador migration/etl/targeted/ciatdata-paginas): viaja dentro de un grupo `.ciat-ciatdata` para conservar el aspecto del sitio anterior sin tocar el resto del sitio: enlaces sin subrayado (solo al pasar), listas sin viñeta con sangría corta (el tema anterior anulaba el fondo de los `li`), párrafos y listas más compactos y botones sin subrayado. */ .entry-content .ciat-ciatdata a:not(.wp-block-button__link):not(.ciat-button) { text-decoration: none; } .entry-content .ciat-ciatdata a:not(.wp-block-button__link):not(.ciat-button):hover, .entry-content .ciat-ciatdata a:not(.wp-block-button__link):not(.ciat-button):focus-visible { text-decoration: underline; } .entry-content .ciat-ciatdata p { margin: 0 0 1em; } .entry-content .ciat-ciatdata ul { list-style: none; padding-left: 0; margin: 0 0 1em; line-height: 1.7; } .entry-content .ciat-ciatdata ol { margin: 0 0 1em; line-height: 1.7; } .entry-content .ciat-ciatdata .wp-block-button__link { text-decoration: none; font-size: 1.05rem; } .entry-content .ciat-ciatdata .wp-block-button__link:hover, .entry-content .ciat-ciatdata .wp-block-button__link:focus-visible { text-decoration: none; opacity: .92; } /* Título descriptivo largo bajo el H1 (el `contentheading` azul del tema anterior). */ .entry-content .ciat-ciatdata > .wp-block-heading { color: var(--color-link); margin-top: 1em; } /* Banners de Tribunales: texto centrado en dos líneas, grande y sin subrayado sobre la foto atenuada. */ .entry-content .ciat-ciatdata .wp-block-cover .wp-block-heading { text-align: center; font-size: 1.6rem; line-height: 1.3; margin: 0; padding: 0 16px; color: #fff; } .entry-content .ciat-ciatdata .wp-block-cover .wp-block-heading a { color: #fff; text-decoration: none; } /* Studies Network: pestañas de texto plano con subrayado en la activa, y las dos cajas del original (reuniones en rejilla de tres, noticias en filas con la fecha apilada a la izquierda), ambas con borde gris y barra superior navy. */ .entry-content .ciat-ciatdata .ciat-tablist { gap: 0; border-bottom: 1px solid var(--color-border); } .entry-content .ciat-ciatdata .ciat-tab-button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 16px; color: var(--color-text); font-weight: 400; } .entry-content .ciat-ciatdata .ciat-tab-button:hover { background: none; text-decoration: underline; } .entry-content .ciat-ciatdata .ciat-tab-button[aria-selected="true"] { background: none; color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; } .entry-content .ciat-ciatdata .ciat-tabs.is-tabbed .ciat-tab:not([hidden]) { border-top: 0; padding-top: 16px; } .entry-content .ciat-ciatdata-meetings, .entry-content .ciat-ciatdata-news { margin: 20px 0; border: 1px solid #ddd; border-top: 8px solid var(--color-primary); padding: 16px; } .entry-content .ciat-ciatdata-meetings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .entry-content .ciat-ciatdata-meeting .wp-block-image { margin: 0 0 8px; } .entry-content .ciat-ciatdata-meeting .wp-block-heading { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; } .entry-content .ciat-ciatdata-meeting p { margin: 0; font-size: .8rem; } .entry-content .ciat-ciatdata-news__item { display: grid; grid-template-columns: 48px 130px minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-bottom: 1px solid #eee; } .entry-content .ciat-ciatdata-news__item:last-child { border-bottom: 0; } .entry-content .ciat-ciatdata-news__item > * { grid-column: 3; margin: 0 0 6px; } .entry-content .ciat-ciatdata-news__item > .ciat-ciatdata-news__date { grid-column: 1; grid-row: 1 / span 4; text-align: right; font-size: .8rem; line-height: 1.4; color: var(--color-text-muted); } .entry-content .ciat-ciatdata-news__item > .wp-block-image { grid-column: 2; grid-row: 1 / span 4; margin: 0; } .entry-content .ciat-ciatdata-news__item .wp-block-heading { font-size: 1rem; line-height: 1.3; } .entry-content .ciat-ciatdata-news__item .wp-block-heading a { color: var(--color-primary); } .entry-content .ciat-ciatdata-news__categories { font-size: .8rem; font-weight: 600; color: var(--color-link); } .entry-content .ciat-ciatdata-news__item p { font-size: .9rem; } @media (max-width: 700px) { .entry-content .ciat-ciatdata-meetings { grid-template-columns: 1fr; } .entry-content .ciat-ciatdata-news__item { grid-template-columns: 48px minmax(0, 1fr); } .entry-content .ciat-ciatdata-news__item > * { grid-column: 2; } .entry-content .ciat-ciatdata-news__item > .wp-block-image { grid-row: auto; } } .entry-footer { margin-top: 26px; padding-top: 16px; border-top: var(--border-hairline); font-size: .85rem; } .entry-footer .tags a { display: inline-block; background: var(--color-bg-alt); padding: 3px 10px; margin: 0 6px 6px 0; border-radius: var(--radius); } /* La firma solo es enlace cuando existe la ficha de esa persona; hereda el color de enlace y se subraya al pasar por encima para que se distinga del resto de la línea de metadatos, que no lo es. */ .byline-link { color: var(--color-link); } .byline-link:hover, .byline-link:focus-visible { text-decoration: underline; } /* ---------- Ficha de persona ---------- La foto de la ficha llega dentro del contenido migrado, flotada a la izquierda; el bloque de artículos va debajo y necesita cerrar ese flotado. */ .single-person .entry-content::after { content: ""; display: block; clear: both; } .person-articles { margin-top: var(--gap-lg); padding-top: var(--gap); border-top: var(--border-hairline); } .person-articles-title { color: var(--color-link); margin-bottom: var(--gap); } /* ---------- Bloque ciat/share ---------- La barra se engancha al final del contenido, así que hereda el subrayado de .entry-content a; por eso lo anula. La altura baja de los 44px que pedia la pauta AAA de tamano de destino a 36px. Se puede porque el boton dejo de medir lo que mide su texto: ahora ocupa un tercio del ancho del contenido, asi que el destino sigue siendo enorme aunque sea mas plano, y 36px queda muy por encima del minimo AA de 24px. Si algun dia estos botones vuelven a medir su contenido, esta altura hay que revisarla. Los botones se reparten el ancho disponible en vez de medir lo que mide su texto: `flex: 1 1 0` con base 0 ignora el contenido al repartir, así que todos salen iguales y añadir una red mañana los reajusta solo, sin tocar este archivo. El catálogo de redes se edita con el filtro `ciat_share_networks`; el reparto no es asunto suyo. */ .ciat-share { margin: var(--gap-lg) 0 0; } .ciat-share-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .ciat-share-item { flex: 1 1 0; min-width: 44px; } .ciat-share-list a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-share); background: var(--color-primary); color: var(--color-on-primary); font-size: .85rem; text-decoration: none; } .ciat-share-list .ciat-share-facebook a { background: var(--brand-facebook); } .ciat-share-list .ciat-share-x a { background: var(--brand-x); } .ciat-share-list .ciat-share-linkedin a { background: var(--brand-linkedin); } .ciat-share-list .ciat-share-whatsapp a { background: var(--brand-whatsapp); } /* El hover no aclara el fondo: aclararlo bajaria el contraste del icono blanco por debajo del umbral. El aviso de que el boton responde es el nombre que aparece y un filete interior, que no tocan el color de fondo. */ .ciat-share-list a:hover, .ciat-share-list a:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); } .ciat-share-icon { display: flex; } .ciat-share-icon svg { width: 20px; height: 20px; fill: currentColor; } /* El nombre de la red sale al pasar por encima y no ocupa sitio el resto del tiempo, para que el icono quede centrado en el boton siempre y no se desplace al aparecer la etiqueta. Se posiciona fuera del flujo en vez de ocultarse con `display:none` porque el lector de pantalla ya tiene el `aria-label` del enlace, mas explicito que esta palabra suelta. */ .ciat-share-label { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 4px 9px; border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-primary); font-size: .78rem; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .ciat-share-list a:hover .ciat-share-label, .ciat-share-list a:focus-visible .ciat-share-label { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .ciat-share-label { transition: none; transform: translateX(-50%); } .ciat-share-list a:hover .ciat-share-label, .ciat-share-list a:focus-visible .ciat-share-label { transform: translateX(-50%); } } /* Los enlaces dentro de .ciat-box heredaban --color-link sobre el gris de la caja: 4,29:1, por debajo de AA. Con el navy institucional dan 10,93:1. */ .entry-content .ciat-box a { color: var(--color-primary); } /* ---------- Comentarios ---------- La sección arranca vacía en todo el corpus (los comentarios del sitio anterior no se migraron), así que el estado vacío es el caso normal. */ .comments-area { margin-top: 40px; padding-top: var(--gap); border-top: var(--border-hairline); } .comments-title, .comment-reply-title { font-size: 1.2rem; color: var(--color-link); } .comments-empty, .comments-closed { color: var(--color-text-muted); font-size: .9rem; } .comment-list { list-style: none; margin: 0 0 var(--gap-lg); padding: 0; } .comment-list .children { list-style: none; margin: 0; padding-left: var(--gap); } .comment-body { padding: var(--gap) 0; border-bottom: var(--border-hairline); } .comment-meta { font-size: .82rem; color: var(--color-text-muted); } .comment-form label { display: block; font-size: .85rem; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: var(--border-hairline); padding: 8px; font: inherit; font-size: .9rem; } .comment-form .submit { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-size: .9rem; cursor: pointer; } /* ---------- Clases que WordPress emite dentro del contenido importado ---------- */ .alignleft { float: left; margin: 0 var(--gap) 12px 0; } .alignright { float: right; margin: 0 0 12px var(--gap); } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .entry-content::after { content: ""; display: block; clear: both; } .wp-caption { max-width: 100%; margin-bottom: 1.1em; } .wp-caption img { display: block; } .wp-caption-text, .gallery-caption { font-size: .82rem; color: var(--color-text-muted); padding-top: 6px; } /* ---------- Contenido convertido desde los shortcodes del stack legado ---------- Solo lo que el HTML nativo no resuelve solo. Lo demás sale de elementos que ya se ven bien sin CSS:
    ,
    ,
      , ,
      ,
      y