/* ============================================================================ Banderas del conmutador de idioma — 27-ago-2026 ---------------------------------------------------------------------------- Petición del operador: que el EN/ES del menú lleve bandera. Por qué en CSS y no en el Twig: - Regla del proyecto (`projects/web-drupal/CLAUDE.md`): «No modificar Twig templates para ajustes visuales — solo CSS», y «cada cambio CSS en archivo nuevo». - La bandera es DECORATIVA: el significado lo llevan ya el texto «EN»/«ES» y el `aria-label` del enlace. Un `::before` es invisible para los lectores de pantalla, que es exactamente lo que se quiere; una bandera anunciada sería ruido. Y hay un motivo más: el conmutador cambió de forma mientras se hacía esto, y el CSS aguanta las dos formas sin tocar el Twig de nadie. ⚠️ DOS MARCADOS, y la bandera sale del ENLACE, no de la página: El 27-ago-2026 otra sesión pasó el conmutador a TRES idiomas, con un enlace por idioma y su `hreflang` (`FR`). El marcado viejo era un único enlace SIN `hreflang`. La bandera se elige por el `hreflang` —el idioma al que lleva el enlace, que es lo que hay que anunciar— y sólo se cae a mirar el idioma de la PÁGINA cuando el enlace no lo trae. Un cuarto idioma es un bloque más aquí abajo. 🚨 POR QUÉ LAS DEL HEADER EMPIEZAN EN 1140 px (medido, no estimado): La cabecera va tan justa que cada bandera cuesta ~28 px y eso desborda el CTA dorado fuera del viewport. Medido con Playwright en el espejo, con las webfonts ya aplicadas, borde derecho del CTA menos ancho del viewport: con banderas sin banderas ES 1025 +83 +54 ya desbordaba ANTES ES 1080 +29 +1 ya desbordaba ANTES ES 1140 −29 −42 ok EN 1025 +14 −7 ← ROTURA NUEVA que causarían EN 1080 −39 −40 ok ≥1200 idéntico idéntico (ahí el ancho lo fija el contenedor) O sea: entre 1025 y 1139 px la cabecera ya estaba rota en español —defecto previo que documenta `selector-idioma-3.css` y que decidió no arreglar— y las banderas lo empeoran y rompen además el inglés. Así que ahí NO se pintan: quedan las píldoras de texto, exactamente como estaban. Por debajo de 1025 px manda el cajón móvil, que sí las lleva siempre. Si algún día se rediseña la cabecera en ese rango, este `@media` se baja. Por qué SVG en data-uri y no un emoji 🇬🇧/🇪🇸/🇫🇷: Windows + Chrome no dibuja las banderas emoji — pinta las letras «GB»/«ES» en su lugar. Muchos padres entran desde Windows. Por qué sin `clipPath` en la Union Jack: A 12 px de alto el contracambiado de las diagonales no se distingue, y un `clipPath` obligaría a un `id`, que saldría VARIAS veces (un enlace por idioma × cabecera y cajón) y sería HTML inválido. Por qué `:lang()` y no `[lang="es"]` en el fallback: `html.html.twig:39` emite el atributo `lang` DOS veces —el segundo, a mano, sale vacío porque `language.getId()` no resuelve en esa plantilla—. Gana el primero al parsear, así que hoy funcionarían los dos, pero `:lang()` mira el idioma COMPUTADO y no depende de ese defecto. Si el idioma no resuelve, no se pinta bandera y el texto sigue ahí: degradación segura. Carga dentro de la library `frontend/redesign-2026` con weight 401, detrás de `redesign-2026.css` (400) y DELANTE de `selector-idioma-3.css` (440), que es de otra sesión y sólo toca `padding`, `font-size` y `gap` en 1025-1280: no se pisan. ============================================================================ */ /* --- Las banderas, declaradas una sola vez ------------------------------- Van como custom properties en el ENLACE y el `::before` las hereda: cada bandera se declara en un sitio, y el `@media` de más abajo decide sólo si se pinta o no. */ /* Reino Unido — 2:1, de ahí los 24 px. */ .site-header .header-lang[hreflang="en"], #mobile-drawer .mobile-drawer__link--lang[hreflang="en"], html:lang(es) .site-header .header-lang:not([hreflang]), html:lang(es) #mobile-drawer .mobile-drawer__link--lang:not([hreflang]) { --lc-bandera-ancho: 24px; --lc-bandera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); } /* España — 3:2, de ahí los 18 px. */ .site-header .header-lang[hreflang="es"], #mobile-drawer .mobile-drawer__link--lang[hreflang="es"], html:lang(en) .site-header .header-lang:not([hreflang]), html:lang(en) #mobile-drawer .mobile-drawer__link--lang:not([hreflang]) { --lc-bandera-ancho: 18px; --lc-bandera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23AA151B' d='M0 0h60v40H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 10h60v20H0z'/%3E%3C/svg%3E"); } /* Francia — 3:2. */ .site-header .header-lang[hreflang="fr"], #mobile-drawer .mobile-drawer__link--lang[hreflang="fr"] { --lc-bandera-ancho: 18px; --lc-bandera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23002654' d='M0 0h20v40H0z'/%3E%3Cpath fill='%23fff' d='M20 0h20v40H20z'/%3E%3Cpath fill='%23ED2939' d='M40 0h20v40H40z'/%3E%3C/svg%3E"); } /* --- Cajón móvil: bandera SIEMPRE ---------------------------------------- Aquí sobra el ancho, así que no hay `@media`. El enlace es de BLOQUE, con borde inferior y min-height 44px: `flex` y no `inline-flex`, o la fila deja de ocupar el ancho y el borde se encoge hasta el texto. */ #mobile-drawer .mobile-drawer__link--lang { display: flex; align-items: center; gap: 8px; } #mobile-drawer .mobile-drawer__link--lang[hreflang]::before, html:lang(es) #mobile-drawer .mobile-drawer__link--lang:not([hreflang])::before, html:lang(en) #mobile-drawer .mobile-drawer__link--lang:not([hreflang])::before { content: ""; flex: 0 0 auto; height: 12px; width: var(--lc-bandera-ancho, 24px); background-image: var(--lc-bandera); background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 2px; /* Filete: sin él, el blanco de la bandera se derrama sobre el fondo y el borde de la bandera desaparece por un lado. */ box-shadow: 0 0 0 1px rgba(39, 39, 37, 0.18); } /* --- Cabecera desktop: sólo desde 1140 px -------------------------------- El razonamiento y la tabla de medidas, en la cabecera del fichero. */ @media (min-width: 1140px) { .site-header .header-lang { display: inline-flex; align-items: center; gap: 6px; } .site-header .header-lang[hreflang]::before, html:lang(es) .site-header .header-lang:not([hreflang])::before, html:lang(en) .site-header .header-lang:not([hreflang])::before { content: ""; flex: 0 0 auto; height: 12px; width: var(--lc-bandera-ancho, 24px); background-image: var(--lc-bandera); background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px rgba(39, 39, 37, 0.18); } }