/* Language picker. The twelve options sit in a grid, not a list, so nothing needs scrolling.
 *
 * Authorship and ownership: @Tori, @Decypher_oficial */

.idioma { position: relative; display: inline-flex; }

/* The button reuses the theme switch pill, so the header reads as one family of controls. */
.idioma-boton {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2, #bcc2d4);
  background: color-mix(in srgb, var(--surface, #101322) 60%, transparent);
  border: 1px solid var(--hair, #252a42); border-radius: 999px;
  padding: .35rem .7rem .35rem .78rem; cursor: pointer;
  transition: color var(--fast, 120ms), border-color var(--fast, 120ms),
              box-shadow .2s var(--eo, cubic-bezier(.22,1,.36,1));
}
.idioma-boton:hover {
  color: var(--text, #f7f5f2);
  box-shadow: 0 6px 18px rgba(245, 165, 36, .22);
}
.idioma-boton[aria-expanded="true"] {
  color: var(--text, #f7f5f2);
  border-color: var(--gold, #f5a524);
}

/* The open mark is a mono character in gold that turns, the same resource as the question sign.
   No pictograms and no images. */
.idioma-marca {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--acc, #f5a524); font-size: .8em; line-height: 1;
  transition: transform var(--fast, 120ms) var(--ei, cubic-bezier(.4,0,.2,1));
}
.idioma-boton[aria-expanded="true"] .idioma-marca { transform: rotate(180deg); }

/* The panel: glass over ink, like the film modal. No maximum height and no scrolling, because the
   fourteen names fit. */
.idioma-panel {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 60;
  /* The panel is measured by the names it holds, not by the button it hangs from. The cap is what
     keeps it on screen on a phone. */
  width: max-content; max-width: min(92vw, 28rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2px;
  padding: 4px;
  border: 1px solid var(--hair, #252a42); border-radius: 14px;
  background: color-mix(in srgb, var(--ink, #08090f) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  animation: idioma-abrir var(--base, 220ms) var(--eo, cubic-bezier(.22,1,.36,1)) both;
}
.idioma-panel[hidden] { display: none; }

@keyframes idioma-abrir {
  from { opacity: 0; transform: translateY(-6px) scale(.97); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.idioma-op {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  font: inherit; font-size: .82rem; text-align: left; white-space: nowrap;
  color: var(--text-2, #bcc2d4);
  background: transparent; border: 0; border-radius: 999px;
  padding: .4rem .7rem; cursor: pointer;
  transition: color var(--fast, 120ms), background var(--fast, 120ms);
}
.idioma-op:hover {
  color: var(--text, #f7f5f2);
  background: color-mix(in srgb, var(--gold, #f5a524) 12%, transparent);
}
/* The chosen one is said in solid gold, like the active theme pill. */
.idioma-op[aria-selected="true"] {
  background: var(--gold, #f5a524); color: #111220; font-weight: 650;
}

.idioma-codigo {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #8b93aa); min-width: 1.6rem;
}
.idioma-op:hover .idioma-codigo { color: var(--text-2, #bcc2d4); }
.idioma-op[aria-selected="true"] .idioma-codigo { color: #111220; opacity: .7; }

/* Focus is visible, and visible the same way as everywhere else on the site. */
.idioma-boton:focus-visible,
.idioma-op:focus-visible {
  outline: 2px solid var(--gold, #f5a524); outline-offset: 2px;
}

/* On a short wide screen -- a phone on its side -- two columns do not fit down the page, so they
   spread to three. Still nothing to scroll. */
@media (max-height: 460px) {
  .idioma-panel {
    grid-template-columns: repeat(3, minmax(0, max-content));
    max-width: min(94vw, 40rem);
  }
}

/* And on a narrow screen it tightens just enough not to run off the side. */
@media (max-width: 400px) {
  .idioma-op { font-size: .78rem; padding: .38rem .5rem; gap: .38rem; }
  .idioma-codigo { min-width: 1.4rem; }
}

/* --- Touched with a finger, not pointed at ------------------------------------------------
   The option grows to 44px: in a grid of fourteen the neighbour is two pixels away and a miss leaves
   the site in another language. The button only widens its touch area underneath, so its row holds. */
@media (pointer: coarse) {
  .idioma-op { min-height: 44px; }

  .idioma-boton { position: relative; }
  .idioma-boton::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 100%; height: 44px; min-width: 44px;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idioma-panel { animation: none; }
  .idioma-marca, .idioma-boton, .idioma-op { transition: none; }
}


/* --- Right to left -------------------------------------------------------------------------
   Direction is set on <html dir> so the browser reorders whatever rests on logical properties, and
   only the hand-straightened cases stay here. Addresses, commands and checksums never flip. */

[dir="rtl"] .idioma-op { text-align: start; }

[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .mono,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] .cine-lienzo,
[dir="rtl"] .cine-barra {
  direction: ltr;
  text-align: left;
}

/* The text beside the film is prose, so it follows the direction of the page. */
[dir="rtl"] .cine-relato { direction: rtl; text-align: right; }

/* The skip link hides at left:-9999px, which right to left turns into overflow. It is sent to the
   other side and comes back on focus, still reachable by keyboard. */
[dir="rtl"] .skip { left: auto; right: -9999px; }
[dir="rtl"] .skip:focus { left: auto; right: 1rem; }

/* The marquee animates in negative pixels: right to left runs the other way, and the container has
   to clip so what leaves one side does not count as page overflow. */
[dir="rtl"] .marquee { overflow: hidden; }
[dir="rtl"] .track { direction: ltr; }

/* Until the stored catalogue arrives the text that will change stays dimmed. Showing the markup
   English and then jumping reads as a lost language rather than as loading. */
.i18n-esperando [data-i18n]{ opacity:0 }
.i18n-esperando [data-i18n]{ transition:opacity .12s linear }
@media (prefers-reduced-motion:reduce){ .i18n-esperando [data-i18n]{ transition:none } }