/* Ajustes — el botón y el panel, iguales en las dos caras.
   Tira de las variables de color de cada cara (--fondo, --tarjeta, --tinta…),
   que ya son las mismas en las dos, así que hereda el tema sin saber nada de
   él. Lo que sí vive aquí es el tamaño del texto y el "poco movimiento",
   porque se aplican a la página entera y no a un trozo.

   TODO VA EN rem, no en px. El tamaño del texto se cambia desde este mismo
   panel, y si el panel estuviera en píxeles sería lo único de la aplicación
   que no obedece al interruptor que lleva dentro. */

/* Aquí estaba el tamaño del texto: subía el font-size de la raíz y todo lo que
   va en rem crecía con él. Se ha quitado. Para eso está el zoom del navegador y
   el tamaño de letra del sistema, que además valen para todas las páginas y no
   sólo para ésta, y no se quedan a medias con lo que esté escrito en píxeles.

   En su sitio, en el panel, está "de cuántas en cuántas se ven las apps", que
   es lo que de verdad se quería tocar en un móvil. */

/* --------------------------------------------------------------- [hidden]
   `hidden` es una regla del NAVEGADOR, y es de las flojas: cualquier
   `display: flex` de una hoja nuestra la gana sin querer. O sea que poner
   `algo.hidden = true` desde JavaScript deja de esconder nada en cuanto ese
   algo tiene display propio, y no avisa: el elemento sigue ahí, pulsable, con
   el código convencido de que lo ha escondido.

   Ya ha pasado dos veces —el teléfono de al lado del merchandising, y sus
   botones de "Colocar" y "Los textos", que seguían saliendo mirando la tienda
   en modo "cómo se ve"—. Se arregla de una vez y para todas las páginas: esta
   hoja la carga el sitio entero. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ color-scheme */
/* Le dice al navegador de qué color va la página, y con eso pinta lo suyo:
   barras de desplazamiento, menús de <select>, el fondo antes de que llegue el
   CSS. Va aquí y no en cada hoja porque esta la carga todo el sitio.

   Hay apps OSCURAS POR DISEÑO —el bingo, el proyector y el vídeo— que no
   tienen versión clara: se proyectan en una pared o se miran a oscuras, y ahí
   un fondo blanco deslumbra. Se marcan con data-tema-fijo y se quedan en
   oscuro elija lo que elija cada uno, porque ponerles el esquema claro sólo
   conseguiría barras blancas sobre un fondo negro.

   Los disfraces ESTABAN en esa lista y ya no: es una app de gestión que se usa
   con luz, y lo único que le faltaba era la paleta clara. */
:root[data-tema-fijo="oscuro"] { color-scheme: dark; }
:root[data-tema="oscuro"]:not([data-tema-fijo]) { color-scheme: dark; }
:root[data-tema="claro"]:not([data-tema-fijo]) { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"]:not([data-tema-fijo]) { color-scheme: dark; }
}

/* ---------------------------------------------------------- poco movimiento */
/* La preferencia del sistema ya la respeta cada hoja por su cuenta; esto es
   para quien la quiere sólo aquí. Se apaga todo salvo la opacidad, que no se
   mueve: un fundido no marea a nadie y sin él las cosas aparecen de golpe. */
html[data-movimiento="poco"] *,
html[data-movimiento="poco"] *::before,
html[data-movimiento="poco"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------- el botón */
/* "Poco intrusivo" es sin fondo y sin borde, no diminuto: si hay que buscarlo
   con lupa deja de ser discreto y pasa a estar escondido. Ocupa lo mismo que
   los botones que tiene al lado y se enciende al pasar por encima. */
.aj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  flex: none;
  border: none;
  border-radius: .6rem;
  background: none;
  /* Hereda el color de lo que tiene alrededor, que es lo que lo hace discreto:
     blanco en la cabecera azul —que es azul en los dos temas— y tinta apagada
     en un pie claro. Sin bajarle la opacidad: en la cabecera lo dejaba gris
     al lado de tres botones blancos, y ahí lo discreto ya lo dan la falta de
     fondo y la falta de borde. */
  color: currentColor;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.aj-btn:hover { background: rgba(127, 127, 127, .18); }
/* Un cuarto de vuelta al pasar por encima: es una rueda dentada, y girar es lo
   que hacen las ruedas. */
.aj-btn:hover svg { transform: rotate(45deg); }
.aj-btn svg { transition: transform 320ms cubic-bezier(.23, 1, .32, 1); }
.aj-btn:active { transform: scale(.92); }

/* En un fondo claro sí se apaga un poco, o un icono a tinta plena en mitad de
   un pie gris pesa más que el propio pie. */
.pie .aj-btn { opacity: .7; }
.pie .aj-btn:hover { opacity: 1; }

/* La que se pone sola, en las apps que no tienen cabecera donde colgarla.
   ARRIBA A LA DERECHA, que es donde está en todas las que sí la tienen: la
   caja, el bingo, el merchandising, la tienda y la portada la llevan ahí, y una
   que estuviera abajo a la izquierda sólo en algunas apps obliga a buscarla
   cada vez. Estaba abajo por no tapar los botones de la app, pero el precio de
   eso era que en media casa no estaba donde se la busca. */
.aj-btn.aj-suelta {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  top: max(10px, env(safe-area-inset-top));
  z-index: 40;
  opacity: .35;
  /* Con su propio fondo: cae encima de contenido cualquiera y sin él no se
     vería sobre una foto clara. */
  background: rgba(127, 127, 127, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.aj-btn.aj-suelta:hover { opacity: 1; background: rgba(127, 127, 127, .3); }
.aj-btn:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.aj-btn svg { width: 1.4rem; height: 1.4rem; flex: none; }

/* ------------------------------------------------- los colores del panel
 *
 * El panel se pintaba con las variables de cada cara —--tarjeta, --tinta,
 * --borde…— dando por hecho que todas las páginas las traen. No las traen: los
 * disfraces, el vídeo y las clasificatorias tienen su propia paleta con otros
 * nombres, y ahí var(--tarjeta) no vale nada. El resultado era un panel sin
 * fondo, sin bordes y con el texto del color que tocara, encima de la página:
 * ilegible justo en las apps desde las que más se abre.
 *
 * Así que el panel se pinta con LOS SUYOS. Cada uno usa el de la casa si lo hay
 * —y entonces el panel sigue heredando el tema de la app, como hasta ahora— y
 * si no hay, uno de esta hoja, que también tiene sus dos temas. Con esto el
 * panel se ve bien en cualquier página, incluida una que se escriba mañana sin
 * acordarse de declarar nada.
 */
:root {
  /* Los de reserva, para cuando la página no trae paleta. */
  --aj-def-tarjeta: #ffffff;
  --aj-def-tinta: #1a2040;
  --aj-def-tinta-suave: #666c8d;
  --aj-def-borde: #dde2f2;
  --aj-def-titulo: #0b1660;
  --aj-def-titulo-2: #12279c;
  --aj-def-campo: #f7f9ff;
  --aj-def-azul: #1d3fe8;
  --aj-def-oro: #d9a520;
  --aj-def-oro-borde: rgba(217, 165, 32, .5);

  --aj-tarjeta: var(--tarjeta, var(--aj-def-tarjeta));
  --aj-tinta: var(--tinta, var(--aj-def-tinta));
  --aj-tinta-suave: var(--tinta-suave, var(--aj-def-tinta-suave));
  --aj-borde: var(--borde, var(--aj-def-borde));
  --aj-titulo: var(--titulo, var(--aj-def-titulo));
  --aj-titulo-2: var(--titulo-2, var(--aj-def-titulo-2));
  --aj-campo: var(--campo, var(--aj-def-campo));
  --aj-azul: var(--azul, var(--aj-def-azul));
  --aj-oro: var(--oro, var(--aj-def-oro));
  --aj-oro-borde: var(--oro-borde, var(--aj-def-oro-borde));
}

/* Y los de reserva, en oscuro. Se cambian sólo los de RESERVA: la página que
   traiga los suyos sigue mandando, esté en el tema que esté. */
:root[data-tema="oscuro"],
:root[data-tema-fijo="oscuro"] {
  --aj-def-tarjeta: #141c36;
  --aj-def-tinta: #e9edfc;
  --aj-def-tinta-suave: #98a3c9;
  --aj-def-borde: #28325a;
  --aj-def-titulo: #dfe6ff;
  --aj-def-titulo-2: #b9c8f7;
  --aj-def-campo: #0e1630;
  --aj-def-azul: #5a7dff;
  --aj-def-oro: #e9bd47;
  --aj-def-oro-borde: rgba(233, 189, 71, .38);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    --aj-def-tarjeta: #141c36;
    --aj-def-tinta: #e9edfc;
    --aj-def-tinta-suave: #98a3c9;
    --aj-def-borde: #28325a;
    --aj-def-titulo: #dfe6ff;
    --aj-def-titulo-2: #b9c8f7;
    --aj-def-campo: #0e1630;
    --aj-def-azul: #5a7dff;
    --aj-def-oro: #e9bd47;
    --aj-def-oro-borde: rgba(233, 189, 71, .38);
  }
}

/* -------------------------------------------------------------- el panel */
dialog.aj-dlg {
  width: min(28rem, calc(100vw - 1.75rem));
  padding: 0;
  border: 1px solid var(--aj-borde);
  border-radius: 1rem;
  background: var(--aj-tarjeta);
  color: var(--aj-tinta);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .32);
}
dialog.aj-dlg::backdrop {
  background: rgba(6, 11, 30, .5);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
dialog.aj-dlg[open] { animation: aj-entra 200ms cubic-bezier(.23, 1, .32, 1); }
@keyframes aj-entra {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

.aj-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem .8rem .75rem 1.25rem;
  border-bottom: 1px solid var(--aj-borde);
}
.aj-cab h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  /* --titulo y no --azul-noche: el segundo es una SUPERFICIE azul marino, la
     misma en los dos temas, y de texto sobre una tarjeta oscura no se lee. */
  color: var(--aj-titulo);
}
.aj-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border: none;
  border-radius: .6rem;
  background: none;
  color: var(--aj-tinta-suave);
  cursor: pointer;
}
.aj-cerrar:hover { background: var(--aj-campo); color: var(--aj-tinta); }
.aj-cerrar:focus-visible { outline: 2px solid var(--aj-azul); outline-offset: -2px; }
/* flex: none o el aspa se encoge hasta ser un punto: es hija de un contenedor
   flexible y, sin decirle que no, cede su ancho como cualquier otra. */
.aj-cerrar svg { width: 1.25rem; height: 1.25rem; flex: none; }

.aj-cuerpo { display: grid; gap: 1.15rem; padding: 1.15rem 1.25rem 1.35rem; }
.aj-grupo { display: grid; gap: .5rem; }

/* Fila con etiqueta a un lado e interruptor al otro, y la ayuda debajo. La usan
   los avisos al dispositivo (push). */
.aj-grupo-fila { grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; }
.aj-grupo-fila .aj-ayuda { grid-column: 1 / -1; }
.aj-switch {
  position: relative; width: 46px; height: 26px; flex: none; padding: 0;
  border: none; border-radius: 999px; background: var(--aj-borde); cursor: pointer;
  transition: background-color 180ms ease;
}
.aj-switch.on { background: var(--aj-azul); }
.aj-switch:disabled { opacity: .5; cursor: not-allowed; }
.aj-switch-bola {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.aj-switch.on .aj-switch-bola { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .aj-switch, .aj-switch-bola { transition: none; }
}

/* -------------------------------------------------------- el desplegable
   Los idiomas son seis y van a crecer: en pastillas ocupaban dos filas en el
   móvil y cada uno salía tan estrecho que la bandera y el nombre no cabían.
   En una lista que se despliega caben todos y se lee entero el que está puesto.

   Aquí sólo queda la caja: el botón, la flecha y la lista las pone la pieza
   compartida (comun/piezas.css), que es la misma para todos los desplegables
   de las dos caras. El <select> sigue debajo, escondido, y es quien manda. */
.aj-select-caja { display: grid; }
.aj-eti {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aj-tinta-suave);
}

/* Las opciones, a la vista y no en un desplegable: son dos o tres por fila y
   así se ve de un golpe cuál está puesta y qué otras hay. */
.aj-ops {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .375rem;
  padding: .25rem;
  border-radius: .75rem;
  background: var(--aj-campo);
  border: 1px solid var(--aj-borde);
}
.aj-op {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .4rem;
  border: none;
  border-radius: .55rem;
  background: none;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--aj-tinta-suave);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.aj-op:hover:not(.on) { color: var(--aj-tinta); }
.aj-op:focus-visible { outline: 2px solid var(--aj-azul); outline-offset: -2px; }
/* La opción marcada NO se pinta de fondo: el fondo lo pone el recuadro que se
   desliza por debajo. Si lo pintaran las dos, durante el viaje habría dos
   recuadros a la vez, el que sale y el que llega. */
.aj-op.on { color: var(--aj-titulo); }

/* El recuadro viajero. Va detrás de los botones y lo coloca ajustes.js
   midiendo la opción marcada: en CSS no hay forma de saber dónde cae, y en la
   fila de idiomas además se mueve en dos direcciones porque van en rejilla. */
.aj-ind {
  position: absolute;
  top: .25rem;
  left: .25rem;
  border-radius: .55rem;
  background: var(--aj-tarjeta);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: transform 300ms cubic-bezier(.23, 1, .32, 1),
              width 300ms cubic-bezier(.23, 1, .32, 1),
              height 300ms cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}

/* Los idiomas son cinco y no caben en una fila: se reparten en rejilla y cada
   uno lleva su bandera, que se reconoce antes que el nombre escrito —sobre
   todo si no sabes leer el idioma en el que está la página—. */
.aj-ops.idiomas {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.aj-ops.idiomas .aj-op { justify-content: flex-start; padding-left: .6rem; }
/* Redonda: el lienzo ya viene recortado a un cuadrado (viewBox 4 0 16 16), así
   que un cuadro del mismo alto y ancho con las esquinas al 50% da un círculo sin
   deformar la bandera. overflow oculto para que las esquinas no asomen. */
.aj-bandera {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  /* clip-path además del redondeo: recorta el propio SVG a un círculo con toda
     fiabilidad, que border-radius sobre un <svg> no siempre recorta el dibujo. */
  clip-path: circle(50%);
  /* Un filo tenue: sin él, una bandera con el borde blanco (Italia, Francia) se
     derrama sobre el fondo claro y parece que le falta un trozo. */
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35);
}

.aj-ayuda { margin: .15rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--aj-tinta-suave); }
/* Aquí iba el botón "Traer la versión nueva" (.aj-accion) y su flecha girando.
   Ya no existe: la app se actualiza sola al desplegar (ver autoActualizar en
   comun/ajustes.js), así que su estilo se ha ido con él. */

/* En el móvil sube desde abajo y se cierra tirando de ella hacia abajo, como el
   resto de diálogos de la casa. Eso ya no está aquí: está en comun/hoja.css,
   que lo hace con CUALQUIER <dialog> del sitio. Aquí había una copia de esas
   reglas y en la caja había otra, y las dos se quedaron a medias —la de aquí
   sin asa, la de allí con un asa de adorno de la que no se podía tirar—, que es
   lo que pasa cuando una misma idea está escrita en dos sitios. */

@media (prefers-reduced-motion: reduce) {
  .aj-op, .aj-btn, .aj-btn svg, .aj-ind { transition: none; }
}


/* ----------------------------------------------------------- la versión
   Qué versión lleva este aparato. Una línea al pie del panel, con el rótulo a
   la izquierda y el número a la derecha, separados por una guía de puntos —como
   un índice— para que el ojo llegue de uno al otro sin tener que medir.

   Se queda aunque el diagnóstico que colgaba de ella ya no haga falta: es lo
   que convierte un "me sigue pasando" en un dato que se puede leer en voz alta
   y comparar con lo que está subido. Y un día lo va a hacer falta otra vez. */
.aj-marca {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--aj-borde);
  font-size: .75rem;
  color: var(--aj-tinta-suave);
}
.aj-marca-eti {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  flex: none;
}
/* La guía de puntos: el hueco que queda entre el rótulo y el número. */
.aj-marca-eti::after {
  content: "";
  display: inline-block;
  width: 0;
}
.aj-marca::before {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted var(--aj-borde);
  order: 1;
}
.aj-marca-num {
  order: 2;
  flex: none;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  /* Cifras de ancho fijo: la fecha cambia y el número no debe bailar. */
  font-variant-numeric: tabular-nums;
  color: var(--aj-tinta);
  /* El oro de la casa, muy justito: es la marca, no un aviso. */
  border-bottom: 1px solid var(--aj-oro-borde, rgba(217, 165, 32, .45));
  padding-bottom: 1px;
}
/* "¿Qué hay nuevo?": al lado del número, como un enlace. Abre las notas de esta
   versión y las anteriores (ver notas-dlg más abajo). */
.aj-novedades {
  order: 3;
  flex: none;
  border: none;
  background: none;
  padding: 0;
  margin-left: .15rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--aj-azul);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--aj-oro-borde, rgba(217, 165, 32, .45));
}
.aj-novedades:hover { color: var(--aj-tinta); }
.aj-novedades:focus-visible { outline: 2px solid var(--aj-azul); outline-offset: 2px; border-radius: 3px; }


/* ------------------------------------------------------ ¿Qué hay nuevo?
   El modal de las notas de versión. En el ordenador, una tarjeta centrada que
   scrollea si el historial es largo, con la cabecera pegada arriba (sticky) para
   no perder el título ni el aspa. En el móvil, comun/hoja.css lo convierte solo
   en una hoja que sube desde abajo, como el resto de diálogos de la casa. */
dialog.notas-dlg {
  width: min(30rem, calc(100vw - 1.75rem));
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--aj-borde);
  border-radius: 1rem;
  background: var(--aj-tarjeta);
  color: var(--aj-tinta);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .32);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.notas-dlg::backdrop {
  background: rgba(6, 11, 30, .5);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
dialog.notas-dlg[open] { animation: aj-entra 200ms cubic-bezier(.23, 1, .32, 1); }

.notas-cab {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem .8rem .75rem 1.25rem;
  background: var(--aj-tarjeta);
  border-bottom: 1px solid var(--aj-borde);
}
.notas-tit { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--aj-titulo); }

.notas-cuerpo { display: grid; gap: 1.3rem; padding: 1.2rem 1.25rem 1.4rem; }
.notas-aviso { margin: 0; font-size: .9rem; color: var(--aj-tinta-suave); }

.notas-rel { display: grid; gap: .55rem; }
.notas-rel-cab { display: flex; align-items: baseline; gap: .6rem; }
.notas-v {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
  color: var(--aj-titulo);
  border-bottom: 2px solid var(--aj-oro-borde, rgba(217, 165, 32, .45));
  padding-bottom: 1px;
}
/* La versión que llevas puesta —la primera— con el oro relleno, para que se vea
   de un vistazo cuál es "la de ahora". */
.notas-rel:first-child .notas-v {
  background: var(--aj-oro-suave, rgba(217, 165, 32, .16));
  border-radius: .35rem;
  border-bottom-color: transparent;
  padding: .1rem .45rem;
}
.notas-fecha { font-size: .75rem; color: var(--aj-tinta-suave); }
.notas-lista {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .4rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--aj-tinta);
}
.notas-lista li { padding-left: .15rem; }
.notas-lista li::marker { color: var(--aj-oro-borde, rgba(217, 165, 32, .55)); }

/* ------------------------------------------------------- sólo para el lector
   Texto que está en la página para quien la oye y no para quien la ve: el h1
   de las páginas cuyo título visible es la marca (el proyector del bingo, el
   vídeo, los concursos). Vive aquí porque esta hoja la carga toda página de
   las dos caras. La receta es la de siempre: 1 px, recortado, sin sitio. */
.solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}