/* Piezas de formulario que se repiten en varias páginas.
 *
 * Aquí sólo entra lo que usan DOS SITIOS O MÁS. Vivían dentro de la hoja de
 * quien las estrenó —la casilla estaba en calendario.css, porque el primero que
 * la necesitó fue el diálogo de un evento— y eso se paga en cuanto hace falta
 * la misma pieza en otra página: o se copia (y se separan) o se arrastra una
 * hoja entera por una regla.
 *
 * Los colores salen de las variables de cada cara, que son las mismas en las
 * dos, así que esta hoja no sabe nada del tema claro ni del oscuro.
 */

/* ----------------------------------------------------------------- solo-voz
   Lo que está para que lo lea un lector de pantalla y no para verse: el título
   de la página en la app del comité, la explicación de un icono suelto.

   No es display: none ni visibility: hidden —eso también lo esconde de quien
   lee en voz alta, que es justo a quien va dirigido—: se queda de un píxel y
   recortado. El white-space: nowrap es para que el texto no se parta dentro de
   ese píxel, que en algunos lectores lo dejaba sin espacios entre palabras. */
.solo-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------- salto
   "Saltar al contenido": lo primero que encuentra quien navega con el
   tabulador. Sin esto hay que pasar por el logo, las dos secciones, los
   botones de la cabecera y la rueda de ajustes ANTES de llegar a lo que uno
   venía a hacer, y eso es en cada carga de página.

   Está siempre en el árbol —no aparece de la nada al enfocarlo— pero fuera de
   la pantalla; al recibir el foco baja a su sitio. Va por encima de la
   cabecera pegada (z-index 10) o se pintaría debajo de ella. */
.salto {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--titulo);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(11, 22, 96, .28);
  transform: translateY(calc(-100% - 16px));
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.salto:focus-visible {
  transform: none;
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
/* El destino del salto no es un control, así que sin tabindex="-1" el foco no
   se le pega y el siguiente tabulador volvería al principio. Lleva el -1 en el
   HTML; aquí sólo se le quita el contorno, que no es él quien se está usando. */
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .salto { transition: none; }
}

/* ------------------------------------------------------------------ casilla
   Una opción que se marca, con su nombre y, debajo, qué significa marcarla.
   La usan el diálogo de un evento ("Visible para todo el pueblo"), la ficha de
   un artículo ("No enseñarlo todavía") y el reparto de permisos del panel. */
.casilla {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  cursor: pointer;
  font-weight: 400;
}
/* width: auto porque las hojas de las páginas estiran los <input> a lo ancho
   —son campos de texto— y un checkbox no lo es. Sin esto sale de 428×12 px. */
.casilla input { width: auto; margin-top: 3px; flex: none; }
/* min-width: 0 y el partido de palabras: en una fila flex el texto no se
   encoge por debajo de su palabra más larga, y basta con que una no tenga
   espacios —una clave de traducción sin traducir, una URL pegada— para que
   empuje la casilla fuera del diálogo. Con esto se parte y se queda dentro. */
.casilla > span { min-width: 0; }
.casilla strong,
.casilla em { overflow-wrap: anywhere; }
.casilla strong { display: block; font-size: 14px; color: var(--tinta); }
.casilla em { display: block; font-style: normal; font-size: 13px; color: var(--tinta-suave); }
/* El fondo va por variable y no en crema fijo. Escrito a mano, #fdf8ec salía
   igual en los dos temas, y en el oscuro la tinta es casi blanca: una casilla
   marcada daba 1,1:1 —no se leía—. --oro-tenue es claro en el tema claro y
   oscuro en el oscuro, que es lo que tiene que hacer una SUPERFICIE. */
.casilla:has(input:checked) { border-color: var(--oro); background: var(--oro-tenue); }

/* -------------------------------------------------------------- desplegable
   La cara de cualquier <select>. El de verdad sigue debajo, escondido, y es
   quien manda; esto es lo que se ve (ver comun/desplegable.js).

   Empezó siendo el menú de las ediciones en la portada del comité: un select
   del sistema no se puede pintar por dentro —la lista la dibuja el sistema
   operativo— y en el móvil salía una rueda que no se parecía a nada de la
   casa. Ahora es la misma pieza para todos los de las dos caras. */
.desp { position: relative; display: inline-flex; flex-direction: column; min-width: 0; }
.desp.desp-ancho { display: flex; width: 100%; }

.desp-cab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px 9px 13px;
  border: 1px solid var(--borde);
  border-radius: 11px;
  background: var(--tarjeta);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--titulo);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.desp-cab:hover { border-color: var(--azul); }
.desp-cab:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.desp.abierto .desp-cab { border-color: var(--azul); }
.desp-apagado .desp-cab { opacity: .55; cursor: not-allowed; }
/* Lo elegido se lleva el hueco que sobra y la flecha se queda al final. */
/* Una sola línea de alto SIEMPRE (1.55em, el interlineado de la caja): con la
   raya de "nada elegido" y la fuente de respaldo, mientras carga la de la casa,
   la línea salía del doble de alto y la caja crecía 30 px para volver a
   encoger al llegar las opciones (un salto de maquetación en cada carga). */
.desp-cual { flex: 1; min-width: 0; height: 1.55em; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desp-cual.vacio { color: var(--tinta-suave); font-weight: 500; }
.desp-flecha { display: flex; flex: none; color: var(--tinta-suave); }
.desp-flecha svg {
  width: 15px; height: 15px;
  transition: transform 300ms cubic-bezier(.23, 1, .32, 1);
}
.desp.abierto .desp-flecha svg { transform: rotate(180deg); }

/* La lista sale POR ENCIMA de lo que hay debajo en vez de empujarlo: si
   empujara, la página entera daría un salto cada vez que se abre una. */
.desp-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  max-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tarjeta);
  /* Cerrada no lleva ni borde ni sombra: si los llevara, se vería una rayita
     flotando debajo del botón cuando no hay nada desplegado. */
  opacity: 0;
  transition: max-height 320ms cubic-bezier(.23, 1, .32, 1),
              opacity 200ms ease,
              box-shadow 200ms ease;
}
.desp.desp-arriba .desp-lista { top: auto; bottom: calc(100% + 6px); }
.desp.abierto .desp-lista {
  opacity: 1;
  border: 1px solid var(--borde);
  box-shadow: 0 10px 28px rgba(11, 22, 96, .16);
}

.desp-op {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--borde);
  background: none;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, padding-left 150ms ease;
}
.desp-op-txt { flex: 1; min-width: 0; }
/* El icono de una opción (la bandera del idioma), delante del texto. Centrado
   aunque la fila alinee por la base, que un dibujo no tiene "base" de texto. La
   bandera se dibuja a sí misma (.aj-bandera); aquí sólo se coloca. */
.desp-icono { display: flex; flex: none; align-self: center; }
.desp-icono[hidden], .desp-icono:empty { display: none; }
.desp-op:first-child { border-top: none; }
.desp-op:hover { background: var(--fondo); color: var(--titulo); padding-left: 18px; }
.desp-op:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.desp-op[disabled] { opacity: .45; cursor: not-allowed; }
.desp-op.on { color: var(--titulo); font-weight: 700; }
/* La que está elegida lleva su marca a la izquierda, que se ve sin leer. */
.desp-op.on::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--azul);
}
/* La pastilla de una opción que dice algo más de sí misma ("en curso"). */
.desp-nota {
  flex: none;
  font-size: 12px;     /* el mínimo legible en el móvil */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--oro-tinta);
  background: var(--oro-fondo);
  border-radius: 999px;
  padding: 1px 7px;
}

@media (prefers-reduced-motion: reduce) {
  .desp-lista, .desp-op, .desp-flecha svg, .desp-cab { transition: none; }
}