/* Ekonatura · Selector de idioma · Estilos.
 *
 * Tres piezas:
 *   1. el botón permanente del pie, con el código del idioma abierto;
 *   2. el menú contextual anclado a ese botón;
 *   3. el aviso compacto de sugerencia de inglés.
 *
 * El aviso usa los tokens existentes (--ek-ink, --ek-paper, --ek-line,
 * --ek-coral). El menú define su propia paleta clara/oscura porque vive
 * dentro del pie, cuyos tokens se invierten en modo oscuro.
 */

/* --- 1 · Botón permanente ------------------------------------------------ */
/* El botón es texto, no un círculo: «ES · EN». El sistema visual global
   aplica a los controles del pie un círculo de 44 px; aquí se aparta esa
   regla (una clase más de especificidad) porque el selector es un simple
   indicador de idioma y debe ocupar lo mínimo.
   El área táctil se conserva en móvil: con puntero grueso el botón mantiene
   44 px de alto, aunque lo que se ve siga siendo el texto. */
.ek-language-widget{position:relative;display:inline-flex;flex:none}
body.ek-integrated .ek-footer-quickprefs button.ek-language-trigger{
 display:inline-flex;align-items:center;justify-content:center;flex:none;
 box-sizing:border-box;
 /* El sistema visual global fija el círculo de 44 px con `!important`; aquí
    se deshace con la misma prioridad para que el selector sea un texto. */
 width:auto!important;min-width:0!important;height:auto!important;min-height:30px;
 padding:2px 5px;margin:0;
 border:0;border-radius:7px;
 background:transparent;color:inherit;cursor:pointer;
 opacity:1;
 font-family:inherit;font-size:.68rem;font-weight:600;
 letter-spacing:.1em;line-height:1;
 white-space:nowrap;
}
.ek-language-codes{display:inline-flex;align-items:center;gap:.32em}
/* El código que no es el abierto se atenúa, pero sin bajar del contraste
   mínimo (4.5:1) sobre el grafito del pie. */
.ek-language-code{opacity:.62;transition:opacity .15s ease}
.ek-language-code.is-current{opacity:1}
.ek-language-trigger:is(:hover,:focus-visible){background:#ffffff14;opacity:1}
.ek-language-trigger:focus-visible{outline:2px solid var(--ek-coral,#f0b399);outline-offset:3px}
@media(pointer:coarse){
 body.ek-integrated .ek-footer-quickprefs button.ek-language-trigger{min-height:44px;padding:0 8px}
}

/* --- 2 · Menú contextual anclado ------------------------------------------
 * No oscurece la página y no es un diálogo: queda junto a su botón, dentro
 * del pie (que es grafito también en modo claro).
 *
 * La paleta es propia del menú en vez de los tokens del pie: dentro del
 * footer los tokens se invierten en modo oscuro y dejarían texto oscuro
 * sobre fondo oscuro. Así texto, opción activa y estados mantienen el
 * contraste en claro y en oscuro. */
.ek-language-menu{
 --ek-menu-bg:#f7f4ef;
 --ek-menu-fg:#2b2f30;
 --ek-menu-muted:#5b5f60;
 --ek-menu-line:#dcd7cf;
 --ek-menu-alt:#eae7e1;
 --ek-menu-hover:#00000012;
 box-sizing:border-box;
 position:absolute;right:0;bottom:calc(100% + 8px);z-index:70;
 width:max-content;min-width:0;max-width:min(200px,calc(100vw - 24px));
 padding:5px;
 border:1px solid var(--ek-menu-line);
 border-radius:12px;
 background:var(--ek-menu-bg);
 color:var(--ek-menu-fg);
 box-shadow:0 14px 34px #1a1e1f33;
}
:root[data-ek-theme="dark"] .ek-language-menu{
 --ek-menu-bg:#444a4b;
 --ek-menu-fg:#f5f1eb;
 --ek-menu-muted:#d3cec6;
 --ek-menu-line:#6d7475;
 --ek-menu-alt:#525a5b;
 --ek-menu-hover:#ffffff1f;
}
.ek-language-menu[hidden]{display:none}

/* Opciones dentro del menú: mismo marcado que las de Preferencias, con la
   paleta del menú. */
/* Opciones del desplegable del pie: una línea por idioma, sin estados
   ni códigos repetidos. El idioma abierto se distingue por su peso
   tipográfico (y por `aria-current`), no por un recuadro. */
.ek-language-menu .ek-lang-list{display:grid;gap:1px}
.ek-language-menu .ek-lang-option{
 display:block;
 min-height:0;padding:6px 9px;
 border-color:transparent;
 border-radius:8px;
 background:transparent;
 color:var(--ek-menu-fg);
}
.ek-language-menu .ek-lang-option a{
 display:block;flex:none;min-width:0;
 color:var(--ek-menu-fg);
}
.ek-language-menu .ek-lang-option-name{font-size:.86rem;font-weight:450;line-height:1.25}
.ek-language-menu .ek-lang-option[data-current="true"]{border-color:transparent;background:var(--ek-menu-alt)}
.ek-language-menu .ek-lang-option[data-current="true"] .ek-lang-option-name{font-weight:600}
.ek-language-menu .ek-lang-option-state{color:var(--ek-menu-muted)}
.ek-language-menu .ek-lang-option:is(:has(a:hover),:has(a:focus-visible)){background:var(--ek-menu-hover)}
.ek-language-menu .ek-lang-option--fallback a{color:var(--ek-menu-fg)}
.ek-language-menu .ek-lang-option-note{
 display:block;margin-top:1px;
 font-size:.68rem;line-height:1.25;opacity:.72;
}
/* El pie pinta sus enlaces de crema con `body.ek-integrated .ek-footer :is(a,…)`
   —specificidad (0,3,2): una clase no basta y el enlace saldría crema sobre
   fondo claro (ratio ~1,02). El id del menú (único por página) gana sin
   depender de dónde viva el widget ni de `!important`. */
#ek-language-panel a,
.ek-language-menu .ek-lang-option a{color:var(--ek-menu-fg)}
#ek-language-panel a:is(:hover,:focus-visible){color:var(--ek-menu-fg)}
.ek-language-menu .ek-lang-option a:focus-visible{outline-color:var(--ek-coral,#f0b399)}

.ek-lang-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ek-lang-option{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 flex-wrap:wrap;
 min-height:48px;padding:10px 12px;
 border:1px solid transparent;border-radius:10px;
}
.ek-lang-option a{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 flex:1 1 auto;min-width:0;
 color:inherit;text-decoration:none;
}
.ek-lang-option-name{font-size:1rem;font-weight:500;line-height:1.3}
.ek-lang-option-state{
 font-size:.8rem;line-height:1.35;opacity:.72;text-align:right;
}
.ek-lang-option a:is(:hover,:focus-visible) .ek-lang-option-name{text-decoration:underline;text-underline-offset:3px}
.ek-lang-option a:focus-visible{outline:2px solid var(--ek-coral,#f0b399);outline-offset:2px;border-radius:8px}
.ek-lang-option[data-current="true"]{
 border-color:var(--ek-line,#666561);
 background:var(--ek-surface-alt,#e9e6e0);
}
.ek-lang-option[data-current="true"] .ek-lang-option-state{font-weight:600;opacity:1}
.ek-lang-option--fallback{
 flex-direction:column;align-items:flex-start;gap:4px;
}
.ek-lang-option--fallback .ek-lang-option-state{text-align:left;opacity:.8}
.ek-lang-option--fallback a{
 justify-content:flex-start;gap:8px;
 font-size:.86rem;text-decoration:underline;text-underline-offset:3px;
 min-height:32px;
}

/* --- 3 · Aviso compacto -------------------------------------------------- */
.ek-language-notice{
 position:fixed;z-index:9000;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
 transform:translateX(-50%);
 width:min(520px,calc(100vw - 24px));
 display:flex;align-items:center;justify-content:space-between;gap:14px;
 flex-wrap:wrap;
 padding:12px 14px;
 border:1px solid var(--ek-line,#666561);
 border-radius:14px;
 background:var(--ek-paper,#f5f1eb);
 color:var(--ek-ink,#292d2e);
 box-shadow:0 10px 30px #1a1e1f2e;
 font-size:.9rem;line-height:1.4;
}
.ek-language-notice-text{margin:0;flex:1 1 180px;min-width:0}
.ek-language-notice-text strong{font-weight:600}
.ek-language-notice-actions{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.ek-language-notice-en,.ek-language-notice-es{
 appearance:none;display:inline-flex;align-items:center;justify-content:center;
 min-height:40px;padding:8px 14px;
 border-radius:999px;font-size:.86rem;font-weight:500;line-height:1.2;
 cursor:pointer;text-decoration:none;
}
.ek-language-notice-en{
 background:var(--ek-ink,#292d2e);color:var(--ek-paper,#f5f1eb);border:1px solid var(--ek-ink,#292d2e);
}
.ek-language-notice-es{
 background:transparent;color:inherit;border:1px solid var(--ek-line,#666561);
}
.ek-language-notice-en:is(:hover,:focus-visible){opacity:.9}
.ek-language-notice-es:is(:hover,:focus-visible){background:#0000000f}
.ek-language-notice-en:focus-visible,
.ek-language-notice-es:focus-visible{outline:2px solid var(--ek-coral,#f0b399);outline-offset:2px}

@media(max-width:700px){
 .ek-language-notice{
  left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));
  width:auto;transform:none;
  padding:12px;
 }
 .ek-language-notice-actions{width:100%}
 .ek-language-notice-en,.ek-language-notice-es{flex:1 1 auto}
}

@media(prefers-reduced-motion:reduce){
 .ek-language-notice{transition:none}
}