/* ==========================================================================
   update-edi-finance.css
   Estilos propios de edi.finance, separados del template de Astro.
   Se carga DESPUES de BaseLayout para poder sobreescribir cuando haga falta.
   Agregar aqui todo el CSS personalizado del sitio.
   ========================================================================== */

/* Tu codigo CSS aqui */

/* ==========================================================================
   Paleta de marca (azul/rojo, reemplaza el verde del template original).
   Cambiar SOLO estos valores si hay que ajustar la paleta de nuevo.
   Nota: BaseLayout.css tiene ~100 usos de estos colores escritos como hex
   literal (no via variable) directamente en componentes especificos del
   template; esos NO se actualizan solos si cambias estas variables, hace
   falta otra pasada de busqueda y reemplazo sobre ese archivo tambien.
   ========================================================================== */
:root {
	--edi-blue: #14377d;
	--edi-blue-2: #133475;
	--edi-blue-3: #163c89;
	--edi-blue-4: #184194;
	--edi-red: #ef373e;
	--edi-red-2: #f25f64;
	--edi-red-ink: #ffffff;
}

:root,
.theme-edi,
.theme-dark {
	--accent: var(--edi-red);
	--accent-2: var(--edi-red-2);
	--accent-ink: var(--edi-red-ink);
	--pill-ink: var(--edi-red);
}

.theme-edi {
	--bg: var(--edi-blue);
	--bg-2: var(--edi-blue-2);
	--surface: var(--edi-blue-3);
	--surface-2: var(--edi-blue-4);
}

/* ==========================================================================
   Logo EDI (raster). El template dimensionaba el logo por ANCHO (width:142px)
   y en movil por max-width:60vw, pensado para el SVG original (muy alargado,
   ~6:1). El logo EDI es mas cuadrado (~3:1), asi que a ese ancho crecia de alto
   y descuadraba el header. Lo fijamos por ALTURA (ancho auto). !important para
   ganarle a las reglas del template (algunas ya usan !important).
   ========================================================================== */
.nav-logo-link img.logo,
.nav-drawer-head img.logo {
	height: 30px !important;
	width: auto !important;
	max-width: 150px !important;
}

footer .foot-brand-block img.logo {
	height: 26px !important;
	width: auto !important;
	max-width: 140px !important;
	margin-left: 0 !important;
}

/* ==========================================================================
   Contraste del texto secundario sobre el fondo AZUL (body.theme-edi).
   El template traia el texto "muted" en grises heredados de la paleta vieja:
   --ink-2 (#c0aeaf, gris rosado) y --ink-3 (#886e6f, gris oscuro), mas un
   gris literal #907a7b hardcodeado en algunos componentes. Sobre el azul
   (#14377d) esos grises se leen mal. Los pasamos a blanco / casi-blanco para
   que resalten. Este CSS se carga DESPUES de BaseLayout, asi que gana por
   orden a igualdad de especificidad.
   ========================================================================== */
body.theme-edi {
	--ink-2: #ffffff;
	--ink-3: #e9edfb;
}

/* Grises literales (no via variable) que quedaban gris-sobre-azul:
   captions y separadores de meta. Los numeros del dropdown (.nav-dd-idx)
   ya no van aqui: tienen su propia regla en rojo mas abajo. */
body.theme-edi .p-caps .p-cap-idx,
body.theme-edi :is(.p-caps, .pl-feats) .pl-panel-meta :is(.sep, span:not(.cat)) {
	color: #ffffff;
}

/* Accesibilidad: el contador de panel (.pl-panel-meta span "01 OF 09") y las
   captions venian gris literal #907a7b, que sobre las tarjetas claras (crema)
   daban ratio ~3.4 y el override blanco de arriba (solo tema azul) los volvia
   invisibles sobre crema. Fijamos un gris oscuro legible en las tarjetas claras
   de plataforma / data feed, con !important para ganarle al literal de BaseLayout. */
.pl-panel-meta :is(.sep, span:not(.cat)),
.pl-panel-footer-meta,
.pl-cat-label > span,
.api-card-ver, .api-card-endpoint,
.sg-flow-time {
	color: #5a4d4e !important;
}

/* Mismos grises literales, pero sobre el azul: el token del snippet de codigo
   (#c89268 = 3.8) y el rojo de las bajadas del feed (#ef4444 sobre #343d7f =
   2.63) quedaban por debajo de AA. Se aclaran manteniendo el matiz. */
.tk-cl {
	color: #e8b184 !important;
}
.api-feed-item .sent.is-neg {
	color: #ff9a9a !important;
}

/* Placeholders de los formularios: blancos pero translucidos, para que se
   lean sobre el azul sin confundirse con texto ya escrito. */
body.theme-edi .api-form .api-form-field input::placeholder,
body.theme-edi .api-form .api-form-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Scroll reveal: las secciones entran deslizandose, alternando derecha/
   izquierda, conforme el usuario hace scroll. Escondido bajo .edi-reveal-ready
   (la agrega el JS) para que el contenido quede visible por defecto si el
   JS no carga.
   ========================================================================== */
.edi-reveal-ready {
	overflow-x: hidden;
}

.edi-reveal-ready section[data-screen-label] {
	opacity: 0;
	transition: opacity 1.4s ease-out, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.edi-reveal-ready section[data-screen-label].edi-reveal-right {
	transform: translateX(220px);
}

.edi-reveal-ready section[data-screen-label].edi-reveal-left {
	transform: translateX(-220px);
}

.edi-reveal-ready section[data-screen-label].edi-reveal-visible {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.edi-reveal-ready section[data-screen-label] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Matriz de comparacion espejada (solo desktop). El contenido de las celdas
   se invirtio en el HTML; aca invertimos el grid para que los anchos calcen
   (5 columnas de producto + la columna ancha de etiqueta, ahora a la derecha).
   Scopeado a >=901px; en <=900px BaseLayout ya apila la matriz en 1 columna.
   ========================================================================== */
@media (min-width: 901px) {
	body.theme-edi .sg-matrix-row,
	.sg-matrix-row {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.4fr);
	}
}

/* ==========================================================================
   Language switcher (desktop): anclar el menu al boton.
   El template dejaba .locale-menu en position:fixed con top/right
   hardcodeados (top:60px; right:16px), asi que al abrir el panel se corria
   hacia el borde derecho de la pantalla y quedaba descuadrado respecto al
   boton "EN/ES/PT". Como .locale-dd ya es position:relative y ningun
   ancestro recorta con overflow, lo anclamos en absolute para que cuelgue
   derechito bajo el boton, alineado a su borde derecho.
   ========================================================================== */
/* ==========================================================================
   Seccion Productos del home: 3 tarjetas (Platform, Data Feed, APIs) en una
   sola fila. El template dejaba la grilla en 2 columnas (1fr 1fr), asi que
   con 3 tarjetas quedaba el 4o cuadrante vacio (resto de cuando existian
   Terminal/Excel/MCP). Pasamos a 3 columnas de 768px para arriba; en movil
   (<=767px) BaseLayout ya la apila en 1 columna.
   ========================================================================== */
@media (min-width: 768px) {
	body.theme-edi .products-grid,
	.products-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Logo del header en movil: el link trae inline margin-left:-21px (pensado
   para alinear el glifo al borde del contenedor en desktop, donde el padding
   es 32px). En movil el padding del contenedor es ~20px, asi que ese -21px
   deja el logo pegado/recortado contra el borde izquierdo. En <=767px lo
   neutralizamos para que respete el padding (~20px de aire). Necesita
   !important para ganarle al estilo inline.
   ========================================================================== */
@media (max-width: 767px) {
	.nav-logo-link {
		margin-left: 0 !important;
	}
}

body.theme-edi .locale-dd .locale-menu,
.locale-dd .locale-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	/* Al pasar de fixed (containing block = viewport) a absolute (containing
	   block = .locale-dd, angosto), el menu se encogia al min-width y los
	   botones PT-BR/EN/ES se envolvian en 2 filas. width:max-content lo
	   dimensiona a su contenido (una sola fila), como en el diseno original. */
	width: max-content;
	max-width: none;
}

/* ==========================================================================
   Header (tema azul): oscurecer el fondo del nav. Estaba en
   rgba(20,55,125,.82) (#14377d translucido) = casi igual al fondo de la
   pagina, y con la translucidez sobre el hero se veia mas claro, dejando el
   logo cream sin contraste. Lo bajamos a un navy mas oscuro y mas opaco
   (punto intermedio hacia mas oscuro) para que el logo resalte.
   Solo afecta al tema azul (theme-edi); el tema oscuro no se toca.
   ========================================================================== */
body.theme-edi {
	--nav-bg: rgba(12, 30, 74, 0.94);
}

/* ==========================================================================
   Header movil, parte 2:
   - Logo del drawer (hamburguesa): mismo inline margin-left:-21px que lo
     dejaba pegado al borde del panel; lo neutralizamos (~20px de aire).
   - Switcher de idioma del top-bar (.locale-dd): en movil abria un menu que
     se fundia con el fondo / no se veia, y ademas es redundante con el
     selector de idioma que ya vive dentro de la hamburguesa (.nd-locale).
     Lo ocultamos en <=767px.
   - Drawer scrolleable: en pantallas cortas el contenido (incl. el switcher
     del fondo) quedaba fuera de vista sin poder scrollear.
   ========================================================================== */
.nav-drawer-head > a {
	margin-left: 0 !important;
}
.nav-drawer-inner {
	overflow-y: auto;
}
@media (max-width: 767px) {
	/* Especificidad >= a la regla de BaseLayout
	   (@media(max-width:900px){.nav-right .locale-dd{display:inline-block!important}}). */
	body .nav-right .locale-dd {
		display: none !important;
	}
}

/* ==========================================================================
   Tutoriales: los dos videos (que mostraban branding viejo del template)
   se reemplazaron por una explicacion de texto (.tt-explain) de la Plataforma
   y del Data Feed. Ocupa el ancho del panel, legible, sin la grilla de video.
   ========================================================================== */
.tt-panel-grid.tt-explain-grid {
	display: block;
}
.tt-explain {
	max-width: 760px;
}
.tt-explain p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0 0 16px;
}
.tt-explain p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Lightbox de screenshots (JS en update-edi-finance.js -> initLightbox).
   Fondo oscuro a pantalla completa con la captura expandida y centrada.
   ========================================================================== */
.edi-lb {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 3vw;
	background: rgba(7, 12, 28, 0.92);
	backdrop-filter: blur(4px);
	cursor: zoom-out;
}
.edi-lb.is-open {
	display: flex;
}
.edi-lb-img {
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	cursor: default;
}
.edi-lb-close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s;
}
.edi-lb-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Carrusel del hero (home): reemplaza la animacion isometrica por capturas
   reales de la plataforma dentro de un marco tipo ventana de navegador.
   ========================================================================== */
/* Contenedor: ocupa la 2da columna del hero-inner. En movil baja el orden
   para quedar debajo del texto (igual que hacia el viejo .iso-stage). */
.hero-inner .hero-stage {
	min-width: 0;
}
.hero-carousel {
	position: relative;
	width: 100%;
}
/* Marco de la ventana: fondo navy, borde sutil y sombra para dar profundidad. */
.hcar-frame {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #0b1e46;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7),
		0 6px 22px -10px rgba(0, 0, 0, 0.55);
}
/* Barra superior tipo navegador con los 3 puntos y la URL. */
.hcar-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.045);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hcar-tdot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	flex: none;
}
.hcar-tdot:nth-child(1) {
	background: #ef5f5f;
}
.hcar-tdot:nth-child(2) {
	background: #f0b429;
}
.hcar-tdot:nth-child(3) {
	background: #37c26b;
}
.hcar-url {
	margin-left: 10px;
	font-family: "Geist Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(241, 239, 228, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Viewport con relacion de aspecto de las capturas (1440x900). */
.hcar-viewport {
	position: relative;
	aspect-ratio: 1440 / 900;
	background: #0b1e46;
}
/* Cada diapositiva se apila y hace crossfade + un leve zoom-out al entrar. */
.hcar-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.015);
	transition: opacity 0.8s ease, transform 1.3s ease;
	pointer-events: none;
}
.hcar-slide.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.hcar-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	cursor: zoom-in;
}
/* Caption sobre un degradado inferior; muestra el nombre del modulo activo. */
.hcar-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 16px 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(transparent, rgba(6, 16, 38, 0.82));
	pointer-events: none;
}
.hcar-caption em {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent, #ef373e);
	flex: none;
}
.hcar-caption span {
	font-family: "Geist Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
}
/* Indicadores: barritas que se ensanchan y se tinen de acento cuando activas. */
.hcar-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}
.hcar-dotbtn {
	width: 24px;
	height: 4px;
	border-radius: 2px;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(241, 239, 228, 0.22);
	transition: background 0.25s, width 0.25s;
}
.hcar-dotbtn:hover {
	background: rgba(241, 239, 228, 0.4);
}
.hcar-dotbtn.is-active {
	background: var(--accent, #ef373e);
	width: 34px;
}
/* Sin animacion de entrada si el usuario pidio reduce-motion. */
@media (prefers-reduced-motion: reduce) {
	.hcar-slide {
		transition: none;
	}
}
/* En movil el hero apila en 1 columna; la captura va debajo del texto. */
@media (max-width: 849px) {
	.hero-inner .hero-stage {
		order: 2;
		margin-top: 8px;
	}
}

/* === Arquitectura (home): 3 formas de conectar en una fila (1/3 c/u) === */
/* Fila de 3 columnas, tarjetas verticales: numero grande arriba, nombre en
   tipografia mayor y descripcion mas larga. Cubre EN/ES/PT. */
.arch-diagram .arch-row.layer-products{
	grid-template-columns:repeat(3,1fr) !important;
	gap:14px !important;
	margin-bottom:28px;
}
.arch-diagram .arch-row.layer-products .arch-card{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:26px 26px !important;
	border-top:3px solid #14377d;
}
.arch-diagram .arch-row.layer-products .ac-idx{
	font-size:30px !important;
	font-weight:600;
	line-height:1;
	color:#14377d !important;
	letter-spacing:0 !important;
}
.arch-diagram .arch-row.layer-products .ac-name{
	font-size:20px !important;
	font-weight:600 !important;
	margin-top:2px !important;
	letter-spacing:-.01em;
}
.arch-diagram .arch-row.layer-products .ac-desc{
	font-size:14.5px !important;
	line-height:1.5 !important;
	margin-top:2px !important;
}
/* Movil: apilar en 1 columna. */
@media (max-width:760px){
	.arch-diagram .arch-row.layer-products{grid-template-columns:1fr !important}
}

/* === Header sticky en desktop === */
/* El header (.nav-wrap) ya tiene position:sticky, pero el overflow-x:hidden de
   html/body (anti scroll horizontal) crea un scroll-container que ROMPE sticky
   en PC. overflow-x:clip recorta igual el desborde horizontal SIN crear scroll
   container, de modo que sticky vuelve a funcionar. En movil el nav usa
   position:fixed (media query <=900px), asi que no se ve afectado. */
html, body { overflow-x: clip !important; }

/* ===== Arte estatico de los heroes de "customer types" (.sol-art) =====
   Reemplaza las escenas isometricas animadas del template. BaseLayout dimensiona
   .iso-stage para aquellas escenas (scale 1.3 y desplazamiento en >=1280px, ancho
   185vw con margenes negativos en movil) porque su dibujo sangraba fuera del
   viewBox. Los SVG nuevos estan centrados y contenidos, asi que se neutralizan
   esos ajustes y se deja el stage como una caja cuadrada normal. El "order" del
   grid movil NO se toca (define la posicion del arte respecto del titular). */
.iso-stage.sol-art{
	width:100% !important;
	max-width:440px;
	margin:0 auto !important;
	transform:none !important;
	aspect-ratio:1;
}
@media (max-width:849px){
	.iso-stage.sol-art{max-width:360px}
}
@media (max-width:767px){
	.iso-stage.sol-art{max-width:300px}
}

/* ===== FAQ: acordeon simple =====
   Se quitaron el buscador (.fq-search) y el indice lateral (.fq-toc). BaseLayout
   arma .fq-grid como dos columnas (220px para el aside + contenido); sin el aside
   quedaba una columna fantasma a la izquierda. Se pasa a una sola columna. */
.fq-grid{
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 !important;
}

/* ===== Soluciones: grilla de "otros tipos de cliente" =====
   BaseLayout la arma a 4 columnas, pensada para las 6 tarjetas originales. Ahora
   son 5 (cada pagina excluye la suya y ya no se lista la de pension/RPPS), asi
   que 4 columnas dejaban una fila de 4 + una huerfana. Con 3 columnas quedan
   3 arriba y 2 abajo. El bloque movil de BaseLayout (<=900px, 2 columnas) no se
   toca: alli 5 tarjetas caen en 2+2+1. */
@media (min-width: 901px) {
	.sg-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Soluciones: rojo solido en matriz y testimonios =====
   BaseLayout pintaba estos elementos con alfa, asi que el acento se perdia:
   - .sg-matrix-check del estado is-primary: en el tema azul una regla del rebrand
     lo dejaba en #14377d (el mismo azul del fondo) con el glifo en rojo, y en
     desktop ademas ocultaba el glifo (color:transparent). Resultado: el circulo
     destacado no se distinguia. Ahora es rojo plano con el punto en blanco.
   - .sg-pain-area: la pill de categoria ("RESEARCH", "RIESGO"...) de cada tarjeta
     de problema. En el tema azul era background:#ef373e8c (rojo al 55%) con texto
     #14377d. Ahora rojo plano con el texto en blanco. */
body.theme-edi .sg-matrix-cell.is-primary .sg-matrix-check,
.sg-matrix-cell.is-primary .sg-matrix-check {
	background: var(--edi-red, #ef373e);
	color: #ffffff;
	opacity: 1;
}

body.theme-edi .sg-pain-area,
.sg-pain-area {
	background: var(--edi-red, #ef373e);
	border-color: var(--edi-red, #ef373e);
	color: #ffffff;
}

/* ===== Switcher de idioma: el activo, en rojo solido =====
   BaseLayout marcaba el idioma actual solo con color de texto en el menu de
   escritorio (.locale-menu button.is-active{color:var(--accent)}), que sobre el
   fondo del panel se perdia; y en el drawer movil (.nd-locale) lo marcaba con
   background:var(--surface), que es casi el mismo azul del panel. Ahora ambos
   usan fondo rojo y texto blanco. */
body.theme-edi .locale-menu button.is-active,
.locale-menu button.is-active {
	background: var(--edi-red, #ef373e);
	color: #ffffff;
	font-weight: 500;
}

body.theme-edi .nd-locale button.is-active,
.nd-locale button.is-active {
	background: var(--edi-red, #ef373e);
	color: #ffffff;
}

/* el hover no debe pisar al activo */
.locale-menu button.is-active:hover {
	background: var(--edi-red, #ef373e);
}

/* ===== Home: grilla de tipos de cliente a 3 columnas =====
   BaseLayout la arma a 4 columnas (>1100px), pensada para cuando habia 7 u 8
   tarjetas. Ahora son 6, asi que 4 columnas dejaban 4 + 2. Con 3 quedan dos
   filas limpias de 3. Solo se toca la franja de escritorio: entre 768 y 1100px
   BaseLayout ya usa 2 columnas (3 filas de 2) y por debajo de 767px la grilla
   se convierte en carrusel horizontal; ninguno de esos casos se altera. */
@media (min-width: 1101px) {
	.solutions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== "LA NUEVA ERA EDI FINANCE" y hermanos: pill roja =====
   .p-overview-label (apis / data-feed / plataforma, 3 idiomas) venia como texto
   rojo con un borde superior rojo: sobre el fondo azul se perdia. Ahora es una
   pill de fondo rojo con texto blanco. Se anula el border-top del template. */
body.theme-edi .p-overview-label,
.p-overview-label {
	background: var(--edi-red, #ef373e);
	color: #ffffff;
	border-top: 0;
	padding: 6px 12px;
	border-radius: 999px;
	line-height: 1;
}

/* ===== Numeros de indice del dropdown del nav (solo PC) =====
   .nav-dd-idx son los "01, 02..." de los menus Productos / Tipos de cliente.
   Venian en gris claro (var(--ink-3) en oscuro, #907a7b en el tema azul) y no
   se leian; antes los pasamos a blanco. Ahora van en rojo en AMBOS temas.
   El drawer movil no los usa (su submenu es .nd-sub, sin numeracion), asi que
   esta regla es de escritorio por construccion. */
body.theme-edi .nav-dd-idx,
body.theme-dark .nav-dd-idx,
.nav-dd-idx {
	color: var(--edi-red, #ef373e);
}

/* ===== Arquitectura (home): numeros 01/02/03 en el tema oscuro =====
   La fila .layer-products lleva el numero y el borde superior en azul fijo
   (#14377d), que sobre la tarjeta crema del tema claro se lee bien, pero en
   theme-dark queda azul sobre fondo oscuro y se pierde. En oscuro van en rojo. */
body.theme-dark .arch-diagram .arch-row.layer-products .ac-idx {
	color: var(--edi-red, #ef373e) !important;
}
body.theme-dark .arch-diagram .arch-row.layer-products .arch-card {
	border-top-color: var(--edi-red, #ef373e);
}

/* ------------------------------------------------------------------
   SWITCHER DE IDIOMA: BANDERAS EN VEZ DE CODIGOS DE 2 LETRAS
   Los botones del dropdown de escritorio (.locale-menu), los del drawer
   movil (.nd-locale) y el indicador del idioma actual (.locale-current)
   muestran ahora un <svg class="locale-flag"> con la bandera del pais de
   origen del idioma. Se usa SVG inline y no emoji porque Windows no
   dibuja los emoji de bandera (los muestra como dos letras).
   ------------------------------------------------------------------ */
.locale-flag {
	display: block;
	width: 22px;
	height: 11px;
	border-radius: 2px;
	/* Filo tenue: la bandera francesa y la del Reino Unido tienen blanco
	   en el borde y sin esto se funden con el fondo del panel. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}
.locale-menu button,
.nd-locale button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.locale-current {
	display: inline-flex;
	align-items: center;
}
/* El activo ya va con fondo rojo solido; el filo blanco de la bandera
   se refuerza para que no se pierda contra ese rojo. */
.locale-menu button.is-active .locale-flag,
.nd-locale button.is-active .locale-flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}