/* ============================================================
   CABECERA: ENTRAR · CREAR CUENTA · IDIOMA CON MAPA (dueño, 6-oct-2026)
   ------------------------------------------------------------
   Va en el <head> de las páginas con la cabecera común (10-oct-2026,
   la cabecera completa desde el primer pintado); si una página vieja no
   la trae, la carga assets/js/cabecera-acceso.js con la misma versión ?v=.

   Colores, medidas y fuentes: solo tokens (tokens.css y los --f-* de
   familia.css). Móvil primero; zonas para el dedo de 44 px.
   ============================================================ */

/* Marca de «hoja ya puesta» (10-oct-2026): la página trae esta hoja en su
   <head> (sola o dentro de un paquete de build-css) y el JS la da por
   lista desde el primer pintado, sin volver a pedirla. */
:root { --cy-hoja-acceso: 1; }

/* Ocultos por el JS mientras no tocan (sesión, hoja aún sin cargar). */
.f-cabecera :is(.cy-acceso, .cy-idioma-cab)[hidden], .f-hoja .cy-hoja-idioma[hidden] { display: none !important; }

/* ---------- Entrar · Crear cuenta ---------- */
.f-cabecera .cy-acceso {
  position: relative;
  /* Si faltara sitio (idiomas de palabras largas), se estrechan con «…»
     antes que desbordar la cabecera. */
  display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 48px;
  height: 34px; max-width: 132px; padding: 0 12px;
  border-radius: var(--f-r-pill, 999px);
  font: var(--f-peso-ui, 500) .8125rem/1 var(--f-fuente, var(--fuente));
  white-space: nowrap; text-decoration: none;
  transition: background var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease);
}
/* El texto va en su propia cajita para cortarlo con «…» si no cabe. */
.f-cabecera .cy-acceso__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Entrar: discreto, solo con borde fino. */
.f-cabecera .cy-acceso--entrar { color: var(--f-texto); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.f-cabecera .cy-acceso--entrar:hover { background: var(--f-sup-2); }
/* Crear cuenta: la acción principal, en lima. */
.f-cabecera .cy-acceso--alta { color: var(--f-lima-tinta); background: var(--f-lima); font-weight: 600; }
.f-cabecera .cy-acceso--alta:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
/* Zona para el dedo de 44 px de alto (se ven de 34): capa invisible que
   sobresale 5 px por arriba y por abajo, sin invadir a los vecinos. */
.f-cabecera .cy-acceso::after { content: ""; position: absolute; inset: -5px 0; }
.f-cabecera .cy-acceso:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.f-cabecera .cy-acceso:active { transform: scale(.98); }

/* Sin sesión, Entrar y Crear cuenta sustituyen a «Empieza a crear»
   (vuelve con la sesión, junto al avatar). */
html[data-cy-acceso="visitante"] .f-cabecera .f-cabecera__cta { display: none; }

/* ---------- Botón del idioma (mundo) ---------- */
.f-cabecera .cy-idioma-cab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: var(--f-r-pill, 999px);
  color: var(--f-texto-2);
  font: var(--f-peso-ui, 500) .75rem/1 var(--f-fuente, var(--fuente)); letter-spacing: .04em;
  transition: background var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease);
}
.f-cabecera .cy-idioma-cab:hover { color: var(--f-texto); background: var(--f-sup-2); }
.f-cabecera .cy-idioma-cab:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.f-cabecera .cy-idioma-cab .cy-icono-mundo { width: 20px; height: 20px; flex: none; }

/* ---------- Fila «Idioma» del menú ☰ (solo móvil) ---------- */
.f-hoja .cy-hoja-idioma { box-shadow: 0 1px 0 var(--f-linea); }
.f-hoja .cy-hoja-idioma__boton {
  width: 100%; display: flex; align-items: center; gap: var(--f-e-3, 12px);
  min-height: 56px; padding: 0;
  color: var(--f-texto); font-size: 1.0625rem; font-weight: var(--f-peso-ui, 500); text-align: start;
}
.f-hoja .cy-hoja-idioma__boton:focus-visible { outline: none; border-radius: var(--f-r-control, 10px); box-shadow: var(--anillo-foco); }
.f-hoja .cy-hoja-idioma__boton .cy-icono-mundo { width: 20px; height: 20px; flex: none; color: var(--f-texto-2); }
.f-hoja .cy-hoja-idioma__actual { margin-inline-start: auto; color: var(--f-texto-3); font-size: .9375rem; }
.f-hoja .cy-hoja-idioma__flecha { width: 16px; height: 16px; flex: none; color: var(--f-texto-3); }
html[dir="rtl"] .f-hoja .cy-hoja-idioma__flecha { transform: scaleX(-1); }

/* Móvil: el mundo no cabe en la cabecera (va al menú ☰), y entre el logo
   y los botones basta un hueco menor (en árabe «تسجيل الدخول» es largo). */
@media (max-width: 767px) {
  .f-cabecera .cy-idioma-cab { display: none !important; }
  html[data-cy-acceso="visitante"] .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
}
/* Tableta y ordenador: el mundo está arriba; sin fila en el menú ☰. */
@media (min-width: 768px) {
  .f-hoja .cy-hoja-idioma { display: none !important; }
  .f-cabecera .cy-acceso { height: 36px; max-width: 168px; padding: 0 14px; font-size: .875rem; }
  .f-cabecera .cy-acceso::after { inset: -4px 0; }
}
/* Ordenador estrecho: menú completo a la vista; el mundo, sin el código. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .f-cabecera .cy-idioma-cab__codigo { display: none; }
  .f-cabecera .cy-acceso { max-width: 140px; padding: 0 12px; }
}
/* De 1080 a 1199 px, en los idiomas de palabras largas (ruso, filipino,
   vietnamita, polaco…), el menú y los botones se juntan un poco para que
   quepa todo en una fila (medido en scripts/test-cabecera-acceso-idioma.mjs). */
@media (min-width: 1080px) and (max-width: 1199px) {
  .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
  .f-cabecera .f-nav { margin-left: var(--f-e-1, 4px); }
  .f-cabecera .f-nav__enlace { padding: 0 8px; }
  .f-cabecera .f-cabecera__fin { gap: 6px; }
  .f-cabecera .cy-idioma-cab { min-width: 40px; padding: 0 8px; }
  .f-cabecera .cy-acceso { padding: 0 10px; }
}
/* Pantallas muy estrechas: un poco menos de relleno para que quepa todo. */
@media (max-width: 380px) {
  .f-cabecera .cy-acceso { max-width: 112px; padding: 0 10px; font-size: .75rem; }
}
/* Ruso, filipino y polaco (auditoría v338, idi-01): su menú es tan ancho que
   desde 1280 px (la fila mide de 1.216 a 1.240 px, también a 1920) «Entrar» y
   «Crear cuenta» quedaban en «В…» y «Ре…». Se aprietan como entre 1080 y
   1279 px. En el móvil, filipino y polaco llevan algo menos de relleno
   («Zaloguj …», «Mag-sign …» a 390 y 360). */
@media (min-width: 1280px) {
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-nav { margin-left: 0; }
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-nav__enlace { padding: 0 8px; }
}
/* Entre 1080 y 1279 px ni así cabían en ruso, filipino, polaco, portugués y
   vietnamita (cortes desde 1080 hasta 1150): «Útiles gratis» va con su nombre
   corto, como ya en ruso y vietnamita, y la letra baja un punto, como en ruso. */
@media (min-width: 1080px) and (max-width: 1279px) {
  html:is(:lang(fil), :lang(pl), :lang(pt)) .f-cabecera .f-nav__largo { display: none; }
  html:is(:lang(fil), :lang(pl), :lang(pt)) .f-cabecera .f-nav__corto { display: inline; }
  html:is(:lang(fil), :lang(pl), :lang(vi)) .f-cabecera .f-nav__enlace { font-size: .8125rem; padding: 0 5px; }
}
/* El ruso, el más largo, aún necesitaba 46 px a 1080: medio punto menos y menos aire. */
@media (min-width: 1080px) and (max-width: 1199px) {
  html:lang(ru) .f-cabecera .f-cabecera__fila { gap: var(--f-e-2, 8px); }
  html:lang(ru) .f-cabecera .f-nav { gap: 0; margin-left: 0; }
  html:lang(ru) .f-cabecera .f-nav__enlace { font-size: .78125rem; padding: 0 4px; }
  /* Alemán: en las páginas SEO el punto de la sección actual le quitaba los 7 px que faltaban a 1080. */
  html:lang(de) .f-cabecera .f-nav__enlace { padding: 0 5px; }
}
@media (max-width: 767px) {
  html:is(:lang(fil), :lang(pl)) .f-cabecera .cy-acceso { padding: 0 10px; }
}
@media (max-width: 380px) {
  html:is(:lang(fil), :lang(pl)) .f-cabecera .cy-acceso { padding: 0 8px; }
}

/* ============================================================
   DIÁLOGO: los 20 idiomas con su bandera (como la pantalla del pie)
   Vive fuera de .f-cabecera: trae su propio reinicio para que no le
   afecten las hojas antiguas de cada página.
   ============================================================ */
.cy-idiomas {
  box-sizing: border-box;
  width: min(880px, calc(100vw - 2 * var(--f-gutter, 16px))); max-width: none;
  max-height: min(800px, calc(100dvh - 2 * var(--f-gutter, 16px)));
  margin: auto; padding: var(--f-e-6, 24px);
  border: 0; border-radius: var(--f-r-media, 22px);
  background: var(--f-sup-1); color: var(--f-texto);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), var(--f-sombra-menu);
  overflow: auto; overscroll-behavior: contain;
  font-family: var(--f-fuente, var(--fuente)); font-size: 1rem; font-weight: var(--f-peso-cuerpo, 400);
  line-height: 1.4; letter-spacing: normal; text-align: start;
  -webkit-font-smoothing: antialiased;
}
.cy-idiomas:not([open]) { display: none; }
.cy-idiomas *, .cy-idiomas *::before, .cy-idiomas *::after { box-sizing: border-box; }
.cy-idiomas :where(h2, h3, p, ul, li) { margin: 0; padding: 0; font-size: inherit; }
.cy-idiomas :where(ul) { list-style: none; }
.cy-idiomas :where(a) { color: inherit; text-decoration: none; }
.cy-idiomas :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; }
.cy-idiomas::backdrop { background: color-mix(in srgb, var(--negro-abismo) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cy-idiomas[open] { animation: cy-idiomas-entra var(--f-medio, 300ms ease) both; }
@keyframes cy-idiomas-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.cy-idiomas__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4, 16px); margin-bottom: var(--f-e-5, 20px); }
.cy-idiomas h2 { font-size: var(--f-t-3, 1.25rem); font-weight: var(--f-peso-titulo, 550); line-height: 1.2; color: var(--f-texto); }
.cy-idiomas__cerrar { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--f-texto-2); }
.cy-idiomas__cerrar:hover { color: var(--f-texto); background: var(--f-sup-3); }
.cy-idiomas__cerrar svg { width: 20px; height: 20px; }
.cy-idiomas :is(a, button):focus-visible { outline: none; box-shadow: var(--anillo-foco); }

/* ---------- Lista de idiomas: bandera y nombre, como la pantalla del pie ---------- */
.cy-idiomas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--f-e-2, 8px); }
.cy-idiomas__opcion {
  display: flex; align-items: center; gap: var(--f-e-3, 12px);
  width: 100%; min-height: 52px; padding: 0 var(--f-e-4, 16px);
  border-radius: var(--f-r-tarjeta, 16px);
  background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea);
  color: var(--f-texto-2); font-size: .9375rem; font-weight: var(--f-peso-ui, 500); line-height: 1.2; text-align: start;
  transition: background var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease);
}
.cy-idiomas__opcion:hover { color: var(--f-texto); background: var(--f-sup-3); }
.cy-idiomas__opcion[aria-current="true"] { color: var(--f-texto); background: var(--f-lima-suave); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.cy-idiomas__bandera { flex: none; width: 32px; height: 24px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--f-linea-fuerte); }
.cy-idiomas__nombre { min-width: 0; overflow-wrap: anywhere; }
.cy-idiomas .cy-idiomas__opcion:focus-visible { box-shadow: var(--anillo-foco); }

/* Móvil (v338, 10-oct-2026): hoja desde abajo como las de Higgsfield, en
   lugar de la ventana centrada de dos columnas, que en un teléfono corto se
   salía de la pantalla. Asa, título centrado con la X, y una sola columna
   con los 20 idiomas que se desliza por dentro (la cabecera queda fija); el
   actual va marcado en lima con su ✓. Mismo diálogo y mismas opciones: solo
   cambia la forma. En árabe y urdu, todo de derecha a izquierda. */
@media (max-width: 767px) {
  /* Tokens propios con respaldo: la hoja también se abre en páginas sin la
     hoja de la familia (Mi cuenta, perfil.html), solo con tokens.css. */
  .cy-idiomas {
    --cyi-fondo: var(--f-sup-1, color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo)));
    --cyi-sup-2: var(--f-sup-2, color-mix(in srgb, var(--blanco-luz) 5.5%, var(--negro-abismo)));
    --cyi-sup-3: var(--f-sup-3, color-mix(in srgb, var(--blanco-luz) 9%, var(--negro-abismo)));
    --cyi-texto: var(--f-texto, var(--blanco-luz));
    --cyi-lima: var(--f-lima, var(--verde-cocuyo));
    --cyi-lima-suave: var(--f-lima-suave, color-mix(in srgb, var(--verde-cocuyo) 10%, transparent));
    --cyi-linea-fuerte: var(--f-linea-fuerte, color-mix(in srgb, var(--blanco-luz) 12%, transparent));
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: 100%;
    max-height: min(88dvh, 760px);
    margin: auto 0 0; padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-radius: var(--f-r-media, 22px) var(--f-r-media, 22px) 0 0;
    background: var(--cyi-fondo); color: var(--cyi-texto);
    box-shadow: inset 0 1px 0 var(--cyi-linea-fuerte), var(--f-sombra-menu, 0 24px 48px transparent);
    flex-direction: column; overflow: hidden;
  }
  .cy-idiomas[open] { display: flex; animation: cy-idiomas-sube var(--f-medio, 300ms ease) both; }
  .cy-idiomas::before { content: ""; flex: none; width: 36px; height: 4px; margin: var(--f-e-2, 8px) auto 0; border-radius: var(--f-r-pill, 999px); background: var(--cyi-linea-fuerte); }
  .cy-idiomas__cabeza { position: relative; flex: none; justify-content: center; min-height: 52px; margin: 0; padding: 0 60px; }
  .cy-idiomas h2 { font-size: var(--f-t-4, 1.0625rem); font-weight: 600; text-align: center; color: var(--cyi-texto); }
  .cy-idiomas__cerrar { position: absolute; inset-inline-end: var(--f-e-3, 12px); top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: var(--f-r-control, 10px); background: var(--cyi-sup-3); color: var(--cyi-texto); }
  .cy-idiomas__lista { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--f-e-1, 4px) var(--f-e-2, 8px) var(--f-e-4, 16px); }
  .cy-idiomas__opcion { position: relative; min-height: 52px; padding: 0 var(--f-e-3, 12px); gap: 14px; border-radius: var(--f-r-control, 10px); background: transparent; box-shadow: none; color: var(--cyi-texto); font-size: 1rem; }
  .cy-idiomas__opcion:hover { background: var(--cyi-sup-2); color: var(--cyi-texto); }
  .cy-idiomas__opcion[aria-current="true"] { background: var(--cyi-lima-suave); box-shadow: none; color: var(--cyi-lima); font-weight: 600; }
  /* ✓ dibujado con dos bordes (sin icono ni color propios). */
  .cy-idiomas__opcion[aria-current="true"]::after { content: ""; flex: none; width: 6px; height: 12px; margin-inline-start: auto; margin-inline-end: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .cy-idiomas__bandera { width: 28px; height: 21px; box-shadow: 0 0 0 1px var(--cyi-linea-fuerte); }
  .cy-idiomas .cy-idiomas__opcion:focus-visible { box-shadow: inset 0 0 0 2px var(--cyi-lima); }
}
@keyframes cy-idiomas-sube { from { transform: translateY(40px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .cy-idiomas[open] { animation: none; }
  .f-cabecera :is(.cy-acceso, .cy-idioma-cab), .cy-idiomas__opcion { transition: none; }
  .f-cabecera .cy-acceso:active { transform: none; }
}