/* ---------------------------------------------------------------------------
   Rushy — hoja única.

   No se usa Bootstrap en F1. Lo que hace falta hasta acá son formularios, tablas
   y una barra: son ~200 líneas propias contra ~230 KB de framework. Bootstrap se
   evalúa en F5 (pulido móvil), cuando exista una pantalla que lo justifique; hasta
   entonces sería peso sin uso. Ver PLAN_MAESTRO_V1.md §5.2.

   Móvil primero: el cliente usa Rushy con el pulgar.
   --------------------------------------------------------------------------- */

:root {
    --tinta: #1c2024;
    --tinta-suave: #5b6470;
    --fondo: #f6f7f9;
    --superficie: #ffffff;
    --borde: #dfe3e8;
    /* UNA sola violeta de marca en todo Rushy. La landing usaba #7c5cff y las pantallas
       de trabajo un azul: eran dos productos con el mismo nombre. Este tono es además el
       que pasa contraste con texto blanco encima (5,8:1); #7c5cff da 4,3 y no llega, así
       que ése queda sólo como color decorativo sobre fondo oscuro. */
    --acento: #6d3ff0;
    --acento-tinta: #ffffff;
    --ok: #157347;
    --error: #b02a37;
    --alerta: #9a6700;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
}

/* --- Barra --- */
.barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
/* Envuelve. Un ítem flex no baja de su contenido por el min-width:auto que trae
   por defecto, así que sin esto la tira de enlaces empuja la página a lo ancho:
   con cinco entraba en 375 px y con seis se iba a 459, y toda la tienda quedaba
   con desplazamiento horizontal. El ancho lo manda el teléfono, no la barra. */
.nav-cliente { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; }
.nav-cliente a { color: var(--tinta-suave); text-decoration: none; }
.nav-cliente a:hover { color: var(--acento); }
.derecha { margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }
.usuario { color: var(--tinta-suave); font-size: .875rem; }
.en-linea { display: inline; }
.chip {
    background: var(--fondo); border: 1px solid var(--borde);
    border-radius: 999px; padding: .15rem .65rem; font-size: .8125rem; color: var(--tinta-suave);
}

/* --- Estructura --- */
main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.angosto { max-width: 26rem; margin: 3rem auto; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; margin: 2rem 0 .75rem; }
.pie {
    max-width: 62rem; margin: 0 auto; padding: 1rem;
    display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
    color: var(--tinta-suave); font-size: .8125rem; border-top: 1px solid var(--borde);
}
.pie-legales { display: flex; flex-wrap: wrap; gap: .35rem 1rem; min-width: 0; }
.pie-legales a { color: inherit; text-decoration: none; }
.pie-legales a:hover, .pie-legales a:focus-visible { text-decoration: underline; }

.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem;
}

/* --- Formularios: 44 px de alto mínimo, para el pulgar --- */
.campo { margin-bottom: 1rem; }
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.ayuda { display: block; font-weight: 400; color: var(--tinta-suave); font-size: .8125rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
    width: 100%; min-height: 44px; padding: .55rem .75rem;
    border: 1px solid var(--borde); border-radius: var(--radio);
    font: inherit; color: inherit; background: var(--superficie);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}

/* SE TIENE QUE VER DÓNDE ESTÁ EL FOCO. Los campos ya lo marcaban; los botones, los
   enlaces y el selector de idioma dependían del anillo del navegador, que sobre el
   violeta de un botón primario casi no se distingue. Es `:focus-visible` y no
   `:focus`: quien toca con el dedo o hace clic no ve un anillo que no pidió, y quien
   se mueve con el teclado lo ve siempre. */
a:focus-visible, button:focus-visible, summary:focus-visible, label.btn:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}
.fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila > * { flex: 1 1 12rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: .5rem 1.1rem;
    border: 1px solid transparent; border-radius: var(--radio);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    background: var(--acento); color: var(--acento-tinta);
    /* Sólo se anima al pasar por encima o al apretar, nunca en reposo: la transición
       existe mientras dura el gesto y después el navegador no vuelve a trabajar. */
    transition: filter .15s ease, transform .12s ease;
}
.btn:hover { filter: brightness(.94); }
.btn:active { transform: translateY(1px); }
.btn-sutil { background: transparent; color: var(--tinta-suave); border-color: var(--borde); }
.btn-peligro { background: var(--error); }
.acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* --- Avisos --- */
.aviso { padding: .75rem 1rem; border-radius: var(--radio); margin: 0 0 1rem; font-size: .9375rem; }
.aviso.ok { background: #e8f5ee; color: var(--ok); }
.aviso.error { background: #fdecee; color: var(--error); }
.aviso.alerta { background: #fdf6e3; color: var(--alerta); }
.lista-errores { margin: 0; padding-inline-start: 1.1rem; }
.field-validation-error { color: var(--error); font-size: .8125rem; display: block; margin-top: .25rem; }

/* --- Rushy está trabajando ---------------------------------------------------
   El aro gira con `transform` y nada más: es lo único que el navegador puede componer
   sin repintar en cada cuadro. Animar `border-color`, `box-shadow` o `width` obligaría
   al hilo principal a trabajar en cada frame, para siempre, también durante el scroll.
   La animación se apaga entera si la persona pidió menos movimiento. */
.btn-trabajando { pointer-events: none; opacity: .85; gap: .5rem; }
.btn-trabajando::before {
    content: ""; width: 1em; height: 1em; flex: 0 0 auto;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: rushy-giro .7s linear infinite;
}
.btn-inactivo { pointer-events: none; opacity: .45; }
@keyframes rushy-giro { to { transform: rotate(360deg); } }
/* Quien pidió menos movimiento no recibe ninguno, tampoco el de las transiciones que
   se agregaron al pulir la interfaz. El aro de «trabajando» se detiene pero el botón
   sigue diciendo que está trabajando: lo que se apaga es la animación, no el aviso. */
@media (prefers-reduced-motion: reduce) {
    .btn-trabajando::before { animation: none; }
    .btn, .pieza, .ico-punta { transition: none; }
}

/* --- Tablas: en móvil, scroll horizontal propio; nunca el body --- */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { text-align: start; padding: .65rem .75rem; border-bottom: 1px solid var(--borde); }
th { font-size: .8125rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .02em; }
tbody tr:hover { background: var(--fondo); }

.estado { font-size: .8125rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; }
.estado-activo { background: #e8f5ee; color: var(--ok); }
.estado-suspendido { background: #fdf6e3; color: var(--alerta); }
.estado-provisionando { background: #eef2f7; color: var(--tinta-suave); }
.estado-cerrado { background: #fdecee; color: var(--error); }

.vacio { color: var(--tinta-suave); text-align: center; padding: 3rem 1rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; }

@media (max-width: 32rem) {
    .barra { gap: .5rem; }
    .usuario { display: none; }
    main { padding: 1rem .75rem 2rem; }
}

/* ===========================================================================
   F2 — material, propuesta y lista de contenido.

   MÓVIL PRIMERO, y no como declaración: elegir fotos, revisar la propuesta y
   aprobar son los tres gestos que el comercio va a hacer treinta veces por mes,
   con un pulgar y de parado. Todo lo tocable de acá mide 44 px como mínimo.
   =========================================================================== */

/* --- Galería de material ------------------------------------------------ */

.galeria {
    display: grid;
    /* auto-fill y no auto-fit: con una sola foto, auto-fit la estira a todo el
       ancho y se ve como un error. */
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}

/* La pieza y su cruz son DOS botones, y por eso hace falta una caja que los
   contenga: uno adentro del otro sería HTML inválido y el navegador lo desarma
   solo, dejando la cruz fuera de la miniatura. */
.pieza-caja { position: relative; min-width: 0; }

.pieza {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--borde);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--fondo);
    cursor: pointer;
    transition: border-color .15s ease;
    /* El área táctil sale del aspect-ratio, que con el mínimo de 96px de la
       grilla ya supera los 44 px en los dos ejes. */
}

.pieza img,
.pieza video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pieza.elegida { border-color: var(--acento); }

/* El número de orden NO es decoración: en un carrusel, cuál va primero es
   contenido, y la persona tiene que poder verlo sin adivinar. */
.pieza-orden {
    position: absolute; top: .25rem; inset-inline-start: .25rem;
    min-width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--acento); color: #fff;
    font-size: .8125rem; font-weight: 600;
    opacity: 0;
}
.pieza.elegida .pieza-orden { opacity: 1; }

.pieza-tipo {
    position: absolute; bottom: .25rem; inset-inline-end: .25rem;
    padding: .1rem .35rem; border-radius: .25rem;
    background: rgba(0,0,0,.65); color: #fff; font-size: .6875rem;
}

/* Sacar una pieza de la biblioteca. Está SIEMPRE visible y no aparece con el
   puntero: en un teléfono no hay `hover`, y una acción que sólo existe con mouse
   es una acción que la mitad de los comercios no tiene. */
.pieza-quitar {
    position: absolute; top: .25rem; inset-inline-end: .25rem;
    width: 34px; height: 34px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(12, 16, 22, .68); color: #fff;
    cursor: pointer;
}
.pieza-quitar svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.pieza-quitar:hover { background: var(--error); }
.pieza-quitar:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Mientras el servidor confirma, la pieza deja de invitar a tocarla. No se saca
   de la pantalla hasta que haya respuesta: si falla, tiene que volver a estar. */
.pieza-yendose { opacity: .45; pointer-events: none; }

/* Lo que existe en el HTML pero todavía no corresponde mostrar. Es una clase y no
   un atributo `style`: la política de contenido de Rushy no admite estilos en
   línea, y un `hidden` a mano se pisa con cualquier regla de `display`. */
.oculto { display: none; }

/* --- Vista previa ------------------------------------------------------- */

.previa { max-width: 30rem; }

.previa-medios { display: flex; gap: .5rem; overflow-x: auto; }
.previa-medios img,
.previa-medios video {
    width: 100%; flex: 0 0 100%; border-radius: .5rem; display: block;
}

.previa-texto { margin-top: .75rem; }

/* El copy conserva los saltos de línea que escribió el modelo: es el texto que
   se va a publicar, y reflowearlo acá haría que la vista previa no sea fiel. */
.copy { white-space: pre-wrap; margin: 0 0 .5rem; }

.hashtags { margin: 0; }
.hashtags span { color: var(--acento); margin-inline-end: .35rem; font-size: .9375rem; }

.versiones { list-style: none; padding: 0; margin: 0; }
.versiones li { padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.versiones li:last-child { border-bottom: 0; }

/* --- Lista de contenido ------------------------------------------------- */

.lista-contenido { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }

.fila-contenido {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    /* 44 px de alto mínimo: es una fila entera tocable, no un enlace de texto. */
    min-height: 44px;
    padding: .75rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: .5rem;
    color: inherit; text-decoration: none;
}
.fila-contenido:hover { border-color: var(--acento); }
.fila-objetivo { flex: 1 1 12rem; font-weight: 500; }

/* --- Acciones grandes --------------------------------------------------- */

.btn-grande { font-size: 1.0625rem; padding: .85rem 1.5rem; min-height: 48px; }

.acciones-pie { margin: 1.5rem 0 2rem; align-items: center; }

textarea {
    width: 100%; padding: .65rem .75rem; font: inherit;
    border: 1px solid var(--borde); border-radius: .375rem;
    background: var(--superficie); color: inherit; resize: vertical;
    min-height: 44px;
}

/* Oculta para la vista pero no para un lector de pantalla. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Conexiones ---------------------------------------------------------- */

.lista-conexiones { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }

.conexion-cabecera {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; margin-bottom: .5rem;
}

/* Una conexión que ya no sirve se ve distinta SIN desaparecer: es historia, y la
   pantalla tiene que poder explicar qué pasó con ella. */
.conexion.inactiva { background: var(--fondo); color: var(--tinta-suave); }
.conexion.inactiva .conexion-cabecera strong { font-weight: 500; }

.pie-legal { margin-top: 2rem; }

/* --- Páginas legales ----------------------------------------------------- */

.legal { max-width: 42rem; }
.legal h2 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul, .legal ol { padding-inline-start: 1.25rem; }
.legal li { margin-bottom: .4rem; }

/* --- Calendario ---------------------------------------------------------- */

.cabecera-calendario {
    display: flex; align-items: baseline; gap: 1rem;
    flex-wrap: wrap; margin-bottom: .25rem;
}
.cabecera-calendario h1 { margin: 0; }
.cabecera-calendario .acciones { margin: 0; }

/* Siete columnas SIEMPRE, también en un teléfono: un calendario que se reordena
   en una sola columna deja de ser un calendario. Lo que se achica es la celda, y
   la envoltura de tabla ya permite desplazarlo de costado si hiciera falta. */
.calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(2.6rem, 1fr));
    gap: 1px;
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    min-width: 20rem;
}

.calendario-encabezado {
    background: var(--fondo); color: var(--tinta-suave);
    font-size: .75rem; font-weight: 600; text-align: center; padding: .35rem 0;
}

.calendario-dia {
    background: var(--superficie);
    min-height: 4.25rem; padding: .25rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.calendario-dia.fuera { background: var(--fondo); }
.calendario-dia.fuera .calendario-numero { color: var(--tinta-suave); opacity: .6; }
.calendario-dia.hoy { outline: 2px solid var(--acento); outline-offset: -2px; }

.calendario-numero { font-size: .75rem; color: var(--tinta-suave); }

.calendario-pieza {
    display: block; font-size: .6875rem; font-weight: 600;
    border-radius: 999px; padding: .1rem .35rem;
    text-decoration: none; white-space: nowrap; overflow: hidden;
}

.explicacion:empty { display: none; }

/* --- Panel del administrador --------------------------------------------- */

/* Lo que necesita atención va primero Y se ve distinto. El orden solo no alcanza:
   quien mira la tabla no sabe dónde termina "lo urgente" y empieza el resto. */
tr.necesita-atencion { background: #fdf6e3; }
tr.necesita-atencion td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }

.alarma { color: var(--error); font-weight: 600; }

th .ayuda { font-weight: 400; }

/* --- Ajustes que antes iban en atributos style ---------------------------- */
/*
   NO son azúcar: la CSP de Rushy no admite `unsafe-inline`, y un atributo
   `style="…"` es exactamente lo que esa directiva bloquea. Cada uno de estos
   nombres reemplaza a un atributo que había en una vista.
*/

.pegado-arriba { margin-top: 0; }
.pegado-abajo { margin-bottom: 0; }
.sin-margen { margin: 0; }
.acciones-pegadas { margin-top: 0; }
.separado-arriba { margin-top: 1rem; }

/* Una tarjeta que contiene una tabla no lleva su propio relleno: la tabla ya
   tiene el suyo y el doble margen la deja flotando. */
.tarjeta-tabla { padding: 0; }

/* El código de invitación se muestra UNA sola vez y hay que poder dictarlo. */
.tarjeta-destacada { border-color: var(--ok); }
.codigo-grande { font-size: 1.4rem; letter-spacing: .06em; }

.codigos-recuperacion { columns: 2; list-style: none; padding: 0; }
.codigos-recuperacion li { padding: .15rem 0; }

/* --- Resultados principales ---------------------------------------------------
   Cuatro cifras en una grilla que ENVUELVE. A 375 px entran dos y dos; en una PC,
   las cuatro. `minmax(0, 1fr)` y no `1fr` a secas: sin el 0, una cifra larga fija
   el ancho de la columna y la fila desborda — es el mismo defecto que tuvo la barra
   de navegación (G12), y por eso la comprobación de 375 px cubre esta pantalla. */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}
.cifra {
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}
.cifra-numero {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cifra-rotulo {
    display: block;
    font-size: .75rem;
    color: var(--tinta-suave);
}
/* Lo que necesita atención se ve distinto, no sólo se ordena distinto. Y el color no
   es lo único: el rótulo ya dice "No salieron". */
.cifra-alerta { border-color: var(--error); }
.cifra-alerta .cifra-numero { color: var(--error); }

/* --- Derecha a izquierda (hebreo) --------------------------------------------
   No hay una hoja aparte ni un bloque `[dir=rtl]` con todo espejado: las reglas
   de arriba usan propiedades LÓGICAS (`margin-inline-start`, `inset-inline-end`,
   `text-align: start`), así que el navegador las da vuelta solo con el `dir` del
   documento. Una hoja espejada a mano es una segunda hoja que mantener, y la que
   se olvida de actualizar es siempre la del idioma que nadie mira.

   Lo único que queda acá es lo que NO tiene equivalente lógico. */

/* El número de orden de una pieza del carrusel es una posición dentro de la
   imagen, y en RTL tiene que ir al otro vértice. */
[dir="rtl"] .pieza-orden { inset-inline-start: auto; inset-inline-end: .25rem; }
[dir="rtl"] .pieza-tipo  { inset-inline-end: auto;   inset-inline-start: .25rem; }

/* El calendario NO se espeja: lunes a domingo se lee igual en hebreo, y dar
   vuelta la grilla haría que el día 1 apareciera arriba a la derecha de una
   tabla que la persona ya sabe leer. Se fija la dirección de la grilla y se
   deja el texto de cada celda en la del documento. */
[dir="rtl"] .calendario { direction: ltr; }
[dir="rtl"] .calendario-dia, [dir="rtl"] .calendario-encabezado { direction: rtl; }

/* --- Selector de idioma --------------------------------------------------
   Vive en la BARRA, en todas las pantallas. Estaba sólo en el pie: siete idiomas
   son de lo que más distingue a Rushy y había que llegar al final de la página
   para enterarse — dentro del espacio del comercio, donde nadie baja, no existía.

   Es un <details>/<summary>: abre, cierra, se recorre con el teclado y anuncia su
   estado a un lector de pantalla sin una línea de JavaScript. Cerrar al tocar
   afuera y con Escape lo agrega rushy-ui.js, que ya está en todas las pantallas.

   `unicode-bidi: isolate` es lo que arregla el caso mixto. Un nombre en hebreo
   dentro de una lista latina —o al revés— hace que el algoritmo bidireccional
   reordene los vecinos, y en RTL «Italiano» aparecía separado del resto y en
   otro renglón. Aislado, cada nombre se ordena sólo dentro de su propia caja. */
.selector-idioma { position: relative; }

.selector-idioma > summary {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 40px; padding: .3rem .55rem;
    border: 1px solid var(--borde); border-radius: 999px;
    background: var(--superficie); color: var(--tinta-suave);
    font-size: .8125rem; font-weight: 600;
    cursor: pointer; user-select: none;
    /* La flechita nativa del <summary> no se puede alinear ni teñir: el ícono de
       punta que dibuja la marca es el que se mueve al abrir. */
    list-style: none;
}
.selector-idioma > summary::-webkit-details-marker { display: none; }
.selector-idioma > summary:hover { color: var(--tinta); border-color: var(--acento); }
.selector-idioma > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.ico-globo, .ico-punta {
    flex: none; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ico-globo { width: 16px; height: 16px; }
.ico-punta { width: 11px; height: 11px; transition: transform .18s ease; }
.selector-idioma[open] > summary .ico-punta { transform: rotate(180deg); }

/* La sigla es para el teléfono y el nombre entero para el resto. Las dos están
   marcadas aria-hidden y el nombre accesible lo pone el aria-label del summary,
   así que un lector de pantalla escucha «Idioma: Español» en los dos anchos. */
.idioma-sigla { display: none; }
@media (max-width: 30rem) {
    .idioma-nombre { display: none; }
    .idioma-sigla { display: inline; letter-spacing: .04em; }
}

/* Cerrado significa CERRADO, sin depender de cómo cada navegador esconda el
   contenido de un <details>. Medido en Chromium: con la lista posicionada de forma
   absoluta, `getBoundingClientRect` seguía devolviendo 176 × 303 px con el selector
   cerrado —no se pinta ni se puede tocar, pero el navegador la sigue midiendo—. Una
   regla explícita no deja lugar a que otro navegador resuelva eso distinto. */
.selector-idioma:not([open]) .idiomas { display: none; }

.selector-idioma .idiomas {
    position: absolute; z-index: 20;
    inset-inline-end: 0; top: calc(100% + .4rem);
    display: flex; flex-direction: column; gap: .1rem;
    min-width: 11rem; padding: .35rem;
    background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}

.selector-idioma .idiomas a,
.selector-idioma .idiomas .idioma-actual {
    unicode-bidi: isolate;
    display: flex; align-items: center;
    min-height: 40px; padding: .3rem .6rem;
    border-radius: .375rem; font-size: .875rem;
}

.selector-idioma .idiomas a { text-decoration: none; color: var(--tinta); }
.selector-idioma .idiomas a:hover,
.selector-idioma .idiomas a:focus-visible { background: var(--fondo); color: var(--acento); }

/* El idioma actual no es un enlace: se distingue por peso y superficie, no por
   un color que también podría leerse como «deshabilitado». */
.selector-idioma .idiomas .idioma-actual {
    font-weight: 700; color: var(--tinta); background: var(--fondo);
}

/* --- Crear: la biblioteca y lo elegido son dos cosas distintas ---------------
   El renglón de «elegidas» tiene que poder leerse de un vistazo: cuando hay algo
   elegido pasa a ser una afirmación del estado del formulario, no una ayuda más. */
.titulo-biblioteca { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.elegidas { margin-top: .5rem; }
.elegidas.elegidas-hay { color: var(--acento); font-weight: 600; }