:root {
  --texto-claro: #f2ead6;

  --marmol-base-1: #fbfaf8;
  --marmol-base-2: #eae8e4;
  --marmol-vena: rgba(110, 110, 108, 0.4);
  --marmol-vena-suave: rgba(150, 150, 148, 0.2);

  --ficha-u: 4.2vmin;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #2b2b2b 0%, #0a0a0a 100%);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  /* Letra más gruesa en general (costaba leer con el peso normal) — el
     texto que ya llevaba su propio font-weight (nombres, botones, avisos...)
     sigue con el suyo, esto solo sube el peso por defecto de lo demás
     (historial, libreta, panel de ajustes). */
  font-weight: 600;
  overflow: hidden;
}

input, select, button {
  font-weight: inherit;
}

.mesa-wrapper {
  /* Ancho y alto con el MISMO valor calculado, en vez de dejar el alto en
     manos de aspect-ratio: así el cuadrado es exacto, sin depender de cómo
     redondee el navegador la proporción. flex-shrink:0 evita además que el
     contenedor flex lo estreche y lo deje rectangular. */
  width: min(97vw, 97vh, 1600px);
  height: min(97vw, 97vh, 1600px);
  flex-shrink: 0;
  /* El punto de fuga de la inclinación (ver .mesa). Cuanto más pequeño, más
     exagerada la perspectiva; a esta distancia se nota que hay profundidad
     sin que el fondo se vaya. */
  perspective: 1700px;
}

.mesa {
  position: relative;
  width: 100%;
  height: 100%;
  /* Radio grande a propósito: suaviza la silueta para que no se lea a primera
     vista como un cuadrado perfecto, sin llegar a cambiar su forma. */
  border-radius: 5%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);

  /* ── Inclinación de la mesa ──
     Gira sobre el eje horizontal, como si estuvieras sentado a ella en vez de
     mirándola desde arriba. Lo hace el navegador; NO toca la geometría.
     Toda la cadena se sigue calculando en píxeles planos en tablero.js y lo
     que se inclina es el resultado ya dibujado — por eso los clics, las
     puntas y las pruebas del trazado siguen valiendo igual.
     El punto de giro va por debajo del centro para que al inclinarse se
     hunda el fondo y no se levante todo. */
  transform: rotateX(var(--inclinacion, 0deg));
  transform-origin: center 65%;
  transition: transform 0.35s ease;
}

/* El canto de la mesa: un bisel iluminado por arriba y en sombra por abajo,
   que es lo que hace que se lea como un objeto con grosor y no como un
   rectángulo pintado. */
.mesa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5%;
  pointer-events: none;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    inset 3px 0 8px rgba(0, 0, 0, 0.10),
    inset -3px 0 8px rgba(0, 0, 0, 0.10);
}

.mesa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5%;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.18), inset 0 0 90px rgba(0, 0, 0, 0.08);
}

/* Fondo: mármol blanco. Otros fondos se añadirán como variantes .mesa--nombre más adelante. */
.mesa--marmol::before {
  background:
    linear-gradient(124deg, transparent 41%, var(--marmol-vena-suave) 42%, transparent 43.5%,
      transparent 57%, var(--marmol-vena) 58%, transparent 59.5%),
    linear-gradient(32deg, transparent 22%, var(--marmol-vena-suave) 23%, transparent 25%,
      transparent 66%, var(--marmol-vena-suave) 67%, transparent 69%),
    linear-gradient(78deg, transparent 71%, var(--marmol-vena) 72%, transparent 73.5%),
    radial-gradient(ellipse at 22% 28%, rgba(0, 0, 0, 0.05), transparent 45%),
    radial-gradient(ellipse at 78% 74%, rgba(0, 0, 0, 0.04), transparent 50%),
    linear-gradient(160deg, var(--marmol-base-1), var(--marmol-base-2));
}

.area-juego {
  /* Límite solo lógico (lo usa tablero.js para saber cuándo girar la cadena);
     no debe dibujarse, la mesa tiene que verse lisa.
     El inset se deriva de dónde están de verdad las manos en vez de ser un
     porcentaje a ojo: la mano arranca al 3% del borde y ocupa 2 anchos de
     ficha, así que el área llega justo hasta ahí más un pequeño respiro de
     0,15 fichas. Antes era un 14% fijo, que dejaba 0,54 fichas de espacio
     muerto entre la línea roja y las fichas del jugador — ese hueco es el
     que ahora se aprovecha, sin que nada tenga que rebasar la roja. */
  position: absolute;
  inset: calc(3% + var(--ficha-u) * 2.15);
}

/* Zona de juego: el sitio real del que dispone la cadena (el mismo cuadro
   que usa tablero.js). Mismo inset que #area-juego para coincidir con ella
   en pantalla; no puede vivir DENTRO de #area-juego porque esa se vacía y se
   vuelve a rellenar en cada jugada. z-index por debajo de las fichas: es un
   sombreado del mármol, no un recuadro encima. */
.zona-juego {
  position: absolute;
  inset: calc(3% + var(--ficha-u) * 2.15);
  pointer-events: none;
  z-index: 1;
}

/* Solo un velo oscuro apenas perceptible, sin filo: se adivina dónde acaba
   la mesa sin que llegue a leerse como un recuadro. */
.zona-juego-cuadro {
  position: absolute;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.028);
  border-radius: 3px;
}

/* Removido + reparto animados al empezar una mano nueva (ver
   animarRepartoYRemovido en main.js): fichas boca abajo temporales que
   saltan por la mesa y luego "vuelan" a cada mano, imitando el ritual real
   (remover con las manos, repartir 7 a cada uno). Encima de mesa/mano/área
   de juego mientras dura, sin bloquear clics. */
.reparto-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* ── Arranque: caja de dominó y fichas sacadas ────────────────────────── */
.caja-domino {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 8;
  cursor: pointer;
}

.caja-domino.visible { display: flex; }

.caja-domino img {
  width: min(19.8vmin, 180px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s ease;
}

.caja-domino:hover img { transform: scale(1.03); }

.caja-pie {
  background: rgba(0, 0, 0, 0.6);
  color: var(--texto-claro);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Las 28 fichas ordenadas encima de la mesa, antes de removerlas. */
.fichas-sueltas {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.reparto-ficha {
  position: absolute;
  /* Sin transición aquí a propósito: durante el removido, la posición y el
     giro se actualizan a mano cada fotograma (requestAnimationFrame, ver
     main.js) para trazar el remolino circular — una transición CSS iría a
     la zaga de esas actualizaciones continuas y se vería a tirones. */
}

/* Fase de reparto: "vuelo" con transición suave de cada ficha hacia la mano
   que le toca. */
.reparto-ficha--volando {
  transition: left 0.5s ease-in-out, top 0.5s ease-in-out, opacity 0.3s ease-in 0.2s;
}

.jugador {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* Sin recuadro: solo el texto del nombre sobre la propia mesa. */
.etiqueta {
  display: flex;
  /* En fila para que el triángulo de altas o bajas vaya DELANTE del nombre
     (Miguel, 18-9-2026). En los lados, con writing-mode vertical, "delante"
     sigue siendo antes del nombre al leerlo. */
  flex-direction: row;
  align-items: center;
  gap: 3px;
}

.nombre {
  font-size: 0.85rem;
  font-weight: 800;
  color: #111;
}

.jugador-norte {
  top: 0.3%;
  left: 50%;
  transform: translateX(-50%);
}

.jugador-sur {
  bottom: 0.3%;
  left: 50%;
  transform: translateX(-50%);
}

/* Este y Oeste van DENTRO de la mesa, pegados al borde, igual que Norte y
   Sur. Estuvieron un tiempo sacados fuera con un inset negativo (-8%), pero
   eso rompía la silueta cuadrada de la mesa y dependía de que la ventana
   fuese apaisada. Al borde y sin solaparse con las fichas gracias al
   writing-mode de .etiqueta (ver más abajo). */
.jugador-este {
  right: 0.3%;
  top: 50%;
  transform: translateY(-50%);
}

.jugador-oeste {
  left: 0.3%;
  top: 50%;
  transform: translateY(-50%);
}

/* El jugador de turno: el mismo nombre pero en verde (sin recuadro ni
   resplandor, que el nombre ya no lleva caja). */
.jugador-actual .nombre {
  color: #17914f;
}

/* Sello de "Pasa": vive dentro de .mano-* (ver index.html), superpuesto a
   las propias fichas de esa mano en vez de junto al nombre — puesto junto al
   nombre desplazaba la etiqueta al aparecer/desaparecer (.jugador es flex-
   column, y Sur/Este/Oeste se posicionan por bottom/center, así que un hijo
   nuevo movía el resto). .mano ya es position:absolute, así que este sello
   se centra sobre ella sin afectar a ningún otro elemento. Vuelto al tamaño
   pequeño/insignia original (no el marco grande que cubría toda la mano).
*/
.sello-pasa {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 3;
  pointer-events: none;
  color: #ff4d4d;
  border: 2px solid #ff4d4d;
  border-radius: 6px;
  padding: 0px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.55);
  text-shadow: 0 0 6px rgba(255, 77, 77, 0.7);
  white-space: nowrap;
}

.sello-pasa.visible {
  display: block;
}

/* En Este/Oeste la mano es una columna estrecha y alta: el sello se gira
   para leerse a lo largo de ella, igual que ya se gira el nombre del
   jugador en esos dos asientos — con el mismo toque de inclinación (8°) que
   Sur/Norte en vez de quedar perfectamente perpendicular, para que parezca
   un sello real y no un texto simplemente rotado 90°. */
.mano-este .sello-pasa,
.mano-oeste .sello-pasa {
  transform: translate(-50%, -50%) rotate(82deg);
}

/* Este y Oeste: texto en vertical con writing-mode en vez de rotate(). Con
   rotate() el elemento seguía "ocupando" en el layout su ancho horizontal
   original (el giro es solo visual), así que el contenedor reservaba ~70px
   de ancho y la etiqueta acababa cayendo encima de las fichas de la mano.
   Con writing-mode el elemento es de verdad estrecho y alto, así que cabe
   pegado al borde de la mesa sin invadir las fichas. */
.jugador-este .etiqueta,
.jugador-oeste .etiqueta {
  writing-mode: vertical-rl;
}

.jugador-oeste .etiqueta {
  /* Para que en el lado izquierdo se lea de abajo hacia arriba, igual que
     antes con rotate(90deg). */
  transform: rotate(180deg);
}

/* Indicador temporal de conexión con Firebase, solo mientras se prueba el
   juego en red — un aviso discreto, no un elemento permanente del juego. */
/* Va DENTRO de la barra de iconos, a su izquierda: abajo se solapaba con la
   explicación de la jugada que se revisa (Miguel, 16-9-2026). */
.estado-red {
  margin-right: 4px;
  padding: 4px 9px;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.35);
  color: var(--texto-claro);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.estado-red:empty {
  display: none;
}

.estado-red.ok {
  border-color: #34d399;
  color: #34d399;
}

.estado-red.error {
  border-color: #ff4d4d;
  color: #ff4d4d;
}




.sala-fondo {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
}

.sala-fondo.visible {
  display: flex;
}

.sala {
  position: relative;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #1d1d1d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 18px 22px 20px;
  color: var(--texto-claro);
  font-size: 0.82rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.sala-cerrar {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  color: var(--texto-claro);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
}

.sala-cerrar:hover { opacity: 1; }

.sala-titulo {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.sala-titulo span {
  color: #ffd257;
  letter-spacing: 2px;
}

.sala-texto {
  margin: 0 0 14px;
  opacity: 0.85;
  line-height: 1.45;
}

.sala-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sala-botones {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.mesa-guardada {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mesa-guardada span { flex: 1; }

.mesa-guardada-muerta { opacity: 0.5; }

/* Una partida a medias se distingue: es la que se quiere retomar. */
.mesa-a-medias { color: #ffd257; }

.sala-botones--extremos {
  justify-content: space-between;
}

.sala-separador {
  margin: 16px 0 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.75;
}

.sala-aviso {
  margin-top: 10px;
  min-height: 1.2em;
  color: #ffd257;
}

.sala-asientos {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
}

.sala-asientos th,
.sala-asientos td {
  text-align: left;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sala-asientos th {
  font-size: 0.72rem;
  opacity: 0.7;
}

.sala-asientos select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: var(--texto-claro);
  padding: 2px 4px;
}

.sala-asientos select option { color: #111; }

.sala-fila-mia { background: rgba(255, 210, 87, 0.09); }

/* Aviso dentro del panel de ajustes cuando esos ajustes los manda la mesa. */
.config-aviso-red {
  background: rgba(255, 210, 87, 0.14);
  border: 1px solid rgba(255, 210, 87, 0.45);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  color: #ffd257;
  white-space: normal;
  line-height: 1.35;
}


/* Punto de presencia: gris si ese jugador aún no ha entrado, verde cuando sí. */
.sala-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: #777;
}

.sala-punto.conectado {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}

.sala-boton-enlace {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--texto-claro);
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
}

.sala-enlace-texto {
  width: 100%;
  margin-top: 4px;
  font-size: 0.68rem;
}

.sala-chat {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sala-chat-titulo {
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.8;
}

.sala-chat-lista {
  list-style: none;
  margin: 0 0 8px;
  padding: 8px 10px;
  height: 130px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.sala-chat-lista li { padding: 2px 0; }

.sala-chat-yo { color: #ffd257; }

.sala-chat-escribir {
  display: flex;
  gap: 8px;
}

.sala-chat-escribir .entrada-texto { flex: 1; }

.oculto { display: none; }

.marcador {
  position: fixed;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 7px 14px;
  color: var(--texto-claro);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  gap: 8px;
  z-index: 50;
}

.marcador-separador {
  opacity: 0.4;
}

/* "Estás educando a tu MicaMi". Va bajo el marcador, en la misma esquina, y
   solo aparece con el educar encendido (Miguel, 15-9-2026: "que en la mesa me
   indique que estoy educando el MicaMi xxx, que me muestre la regla de %"). */
.educando {
  position: fixed;
  /* Abajo a la izquierda, justo encima del aviso de la red. Bajo el marcador
     NO cabe: ahí vive la libreta, y el cartel le escribía encima la fecha y la
     cabecera de la tabla (se vio en la primera comprobación en pantalla). */
  bottom: 46px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 190px;
  padding: 6px 12px 7px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 210, 87, 0.35);
  border-radius: 10px;
  color: var(--texto-claro);
  font-size: 0.78rem;
  z-index: 50;
}

/* Gana al display:flex de arriba por especificidad: con el atributo hidden
   puesto, el cartel no se ve. */
.educando[hidden] { display: none; }

.educando-quien b { color: var(--oro); }

/* La regla de % que pidió Miguel: cuánto sabe de ti, de un vistazo. */
.educando-barra {
  height: 5px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  overflow: hidden;
}

.educando-dentro {
  display: block;
  height: 100%;
  background: var(--oro);
  transition: width 0.3s ease;
}

.educando-pie { opacity: 0.7; }

/* ── Todas las condiciones de una ficha (botón derecho sobre ella) ──
   Se cumple / no se cumple / aquí no puede darse, y el peso al lado cuando tu
   MicaMi la puntúa. Lo que no lleva peso es lo que el motor VE pero tu árbol
   no mira: de ahí salen las ramas nuevas. */
/* El empujón de P30 en la ventana de condiciones: no es una condición, así
   que va aparte y con su signo (Miguel, 18-9-2026). */
.argumento-porpunto { font-size: 0.75rem; color: #928c7e; margin: 2px 0 6px; }
.argumento-porpunto.suma { color: #86efac; }
.argumento-porpunto.resta { color: #fca5a5; }

.condiciones-grupo { margin: 10px 0 4px; }

.condiciones-titulo {
  color: #928c7e;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.condicion {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 6px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  font-size: 0.78rem;
}

.condicion b {
  flex: 0 0 2.4rem;
  color: #928c7e;
  font-weight: 600;
  font-size: 0.72rem;
}

.condicion span { flex: 1; }

.condicion i {
  font-style: normal;
  font-weight: 700;
  color: var(--oro);
}

/* Se cumple: verde, como lo seguro en el resto del programa. */
.condicion.si {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.09);
}

.condicion.no { opacity: 0.55; }

/* La que tu MicaMi sí puntúa se marca aparte: es la diferencia entre "esto
   pasa" y "esto me importa". */
.condicion.puntua { background: rgba(255, 210, 87, 0.12); }
.condicion.puntua.si { background: rgba(34, 197, 94, 0.16); }

/* Aquí no puede darse: ni se cumple ni dejará de cumplirse, así que no es un
   "no" cualquiera. */
.condicion.imposible {
  opacity: 0.35;
  font-style: italic;
  border-left-color: transparent;
}

/* ── La tanda de salidas ──
   Siete fichas y una pregunta. Va en medio de la pantalla porque es lo único
   que se está haciendo mientras dura. */
.tanda {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(680px, 94vw);
  padding: 0 18px 18px;
  background: #1b1c21;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}

.tanda.abierto {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.tanda-mano {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 14px;
}

.tanda-mano .ficha {
  width: 58px;
  height: auto;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tanda-mano .ficha:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}

.tanda-pie {
  color: #928c7e;
  font-size: 0.76rem;
  text-align: center;
}

.mensaje {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, #2c2c2c, #161616);
  border: 1px solid #ffd257;
  border-radius: 10px;
  padding: 8px 20px;
  color: #fff8e7;
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 1.4em;
  max-width: 70vw;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 210, 87, 0.35);
  z-index: 50;
}

.mensaje:empty {
  display: none;
}

/* Conversacion de la mesa: en la columna de la derecha, debajo de la lista
   de jugadas, para dejar libre abajo el cajon de mensajes de partida. Solo
   sale estando en una mesa en red. */
.chat-panel {
  display: none;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--texto-claro);
  font-size: 0.76rem;
}

.chat-panel.visible { display: flex; }

.chat-titulo {
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 4px;
}

.chat-lista {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  height: 110px;
  overflow-y: auto;
}

.chat-lista li { padding: 2px 0; }

/* Avisos de la mesa (quién sale, quién vuelve): sin nombre delante y
   apagados, para que no se confundan con lo que escribe la gente. */
.chat-sistema {
  font-style: italic;
  opacity: 0.7;
}

/* Traducido: se nota con un subrayado de puntos; al pincharlo se ve el
   original (y al revés). */
.chat-traducido {
  cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

/* El idioma delante de un mensaje que no se ha podido traducir. */
.chat-lengua {
  display: inline-block;
  margin-right: 4px;
  padding: 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  font-size: 0.62rem;
  opacity: 0.8;
}

.chat-traducir {
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
}

.sala-ausente { opacity: 0.7; }

.sala--corta { width: min(420px, 94vw); }

.abandonar-botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.abandonar-botones .boton-continuar { padding: 8px 14px; }

.abandonar-botones .boton-peligro {
  background: #8b2a2a;
  border-color: #8b2a2a;
  color: #fff;
}
.abandonar-botones .boton-peligro:hover { background: #a33434; }

.abandonar-botones .boton-discreto {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--texto-claro);
}
.abandonar-botones .boton-discreto:hover { background: rgba(255, 255, 255, 0.08); }

.chat-escribir { display: flex; gap: 6px; align-items: center; }

.chat-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-cabecera .chat-titulo { margin-bottom: 0; }

.chat-idioma {
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto-claro);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  padding: 1px 4px;
}

.chat-idioma option { background: #1d1d1d; }

.chat-micro { flex: none; }

/* Según lo que haya puesto el anfitrión (sala.js, aplicarConversacion): sin
   texto no se escribe, pero la lista sigue, que ahí van los avisos de la mesa. */
.chat-panel.sin-texto .chat-escribir,
.chat-panel.sin-texto .chat-idioma { display: none; }

.chat-voz {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.chat-panel.con-voz .chat-voz { display: flex; }

.chat-voz .boton-continuar { padding: 3px 10px; font-size: 0.74rem; }

#voz-silencio.silenciado,
#voz-silencio.silenciado:hover { background: #c0392b; color: #fff; }

.voz-quien { opacity: 0.8; font-size: 0.7rem; }

/* El nombre de quien está hablando se ilumina en la mesa (js/voz.js). */
.etiqueta.hablando {
  border-radius: 6px;
  box-shadow: 0 0 0 2px #2eb872, 0 0 12px rgba(46, 184, 114, 0.7);
  background: rgba(46, 184, 114, 0.18);
}
.chat-micro:disabled { opacity: 0.35; cursor: not-allowed; }

/* Escuchando: en rojo y latiendo, que se note que el micrófono está abierto. */
.chat-micro.escuchando,
.chat-micro.escuchando:hover {
  background: #c0392b;
  color: #fff;
  animation: latido-micro 1s ease-in-out infinite;
}

@keyframes latido-micro {
  50% { box-shadow: 0 0 0 5px rgba(200, 60, 60, 0.35); }
}

.chat-escribir .entrada-texto { flex: 1; }

/* El cajón entero es tocable cuando hay algo pendiente (ver el onclick en
   main.js): en una tableta no hay teclado a mano. */
.mensaje-partida:has(.boton-continuar) { cursor: pointer; }

/* El cajón de abajo: el aviso de CalculaFinal encima del mensaje de partida.
   Lo coloca posicionarMensajePartida (main.js). Sin nada dentro no ocupa ni
   tapa clics. */
.cajon-mensajes {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 60vw;
  z-index: 60;
  pointer-events: none;
}

.cajon-mensajes > * { pointer-events: auto; }

.mensaje-partida {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  background: linear-gradient(135deg, #2c2c2c, #161616);
  border: 1px solid #ffd257;
  border-radius: 10px;
  padding: 10px 20px;
  color: #fff8e7;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 210, 87, 0.35);
}

.mensaje-partida.visible {
  display: flex;
}

.boton-continuar {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid #ffd257;
  background: #ffd257;
  color: #201a00;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.boton-continuar:hover {
  background: #ffdd75;
}






/* Controles de formulario del cajón (antes colgaban de .panel-config). */
.cajon input:disabled,
.cajon select:disabled,
.cajon button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cajon select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  color: var(--texto-claro);
  padding: 4px 6px;
}

.cajon select option { color: #111; }

.entrada-numero {
  width: 74px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: var(--texto-claro);
  padding: 2px 4px;
}



.entrada-texto {
  width: 128px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: var(--texto-claro);
  padding: 2px 4px;
}



.boton-capturar-tecla {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: var(--texto-claro);
  padding: 2px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.boton-capturar-tecla:hover {
  background: rgba(255, 255, 255, 0.2);
}

.boton-capturar-tecla.capturando {
  border-color: #ffd257;
  color: #ffd257;
}

.fila-rango {
  display: flex;
  align-items: center;
  gap: 6px;
}

.valor-rango {
  font-size: 0.72rem;
  opacity: 0.75;
  width: 3.2em;
  text-align: right;
}

/* La columna de la derecha: la lista de jugadas y, justo debajo, su mando. */
.columna-jugadas {
  position: fixed;
  /* Por debajo de la barra de iconos, que empieza arriba a 10 y mide unos 37
     con su relleno. Estaba en 46 y se solapaban ocho pixeles. */
  top: 58px;
  right: 10px;
  width: 260px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.historial {
  max-height: 40vh;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--texto-claro);
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
}

.historial.oculto {
  display: none;
}

.historial-titulo {
  font-weight: 700;
  font-size: 0.78rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.historial-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.historial-lista li {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* La arroba de Micarán en el centro de la mesa: por debajo de las fichas y de
   la zona de juego, y sin estorbar a ningún clic. Del tamaño de una ficha a lo
   largo (dos unidades), para que no compita con la partida (Miguel, 21-9-2026;
   antes era el logo grande, al 38% de la mesa). */
.marca-mesa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--ficha-u) * 2);
  aspect-ratio: 145 / 128;   /* la de la imagen */
  background: url('../assets/icono/Arroba-large.png') center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.historial-numero {
  opacity: 0.55;
  font-size: 0.65rem;
  margin-right: 2px;
}

.historial-puntas {
  color: #ffd257;
  font-weight: 700;
}

.historial-pasa {
  color: #ff5c5c;
  font-weight: 700;
}

/* La jugada la decidió CalculaFinal. Verde como el aviso de debajo. */
.historial-punto-final {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 4px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.8);
  vertical-align: middle;
}

/* Y el que solo COINCIDE con lo que diría CalculaFinal (la puso otro criterio)
   va hueco, para distinguirlo del que decidió él (26-9-2026). */
.historial-punto-final.coincide {
  background: transparent;
  box-shadow: inset 0 0 0 2px #22c55e;
}

/* LOS TANTOS DETRÁS DEL PUNTO (Miguel, 27-9-2026): siempre desde nuestro lado,
   verde si anotamos nosotros y rojo si anotan ellos. Pequeños y en cursiva para
   que no le quiten la vista a la ficha, que es lo que se lee de la línea. */
.historial-tantos-final {
  font-size: 0.78em;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  margin-left: 3px;
}

.historial-tantos-final.gana { color: #4ade80; }
.historial-tantos-final.pierde { color: #f87171; }

/* El contador se presenta como una libreta de espiral: papel crema con
   renglones y margen rojo, como se anotaría a mano una partida real. */
.contador {
  position: fixed;
  top: 54px;
  left: 10px;
  /* Antes 430px: con las columnas de la tabla ya repartidas a propósito
     (ver .contador-tabla) y "Resultado" partiéndose en dos líneas en vez de
     forzar una sola línea larguísima, no hace falta tanto ancho — y con
     430px el panel llegaba a tapar la etiqueta del jugador Oeste.
     El +1cm es un ensanche pedido despues: los anchos de columna van en
     porcentaje, asi que el hueco extra se lo lleva sobre todo Resultado,
     que es la que se parte en dos lineas. */
  width: calc(320px + 1cm);
  max-height: 75vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, transparent 22px, rgba(200, 60, 60, 0.35) 22px, rgba(200, 60, 60, 0.35) 23px, transparent 23px),
    #f5efd8;
  background-size: 100% 18px, 100% 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  /* Margen izquierdo justo lo que pide la línea roja (dibujada a 22-23px,
     ver el gradiente de background arriba) más un pelín de aire, no de
     sobra como antes — para dejarle más sitio a la tabla. */
  padding: 12px 8px 10px 25px;
  color: #3a2f1a;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.74rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.contador.oculto {
  display: none;
}

/* Muelle de espiral: una fila de aros metálicos vistos de frente. */
.contador-muelle {
  position: absolute;
  top: -9px;
  left: 10px;
  right: 10px;
  height: 16px;
  background-image: radial-gradient(
    circle at center,
    transparent 0 34%,
    #9a9a9a 34% 62%,
    transparent 62%
  );
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.contador-titulo {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 2px;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: wavy;
}

.contador-abrio {
  font-size: 0.68rem;
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 6px;
  min-height: 1em;
  text-align: center;
}

.contador-tabla-envoltorio {
  overflow-y: auto;
  overflow-x: auto;
  flex: 1;
  min-height: 0;
}

.contador-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  /* Anchos fijos por columna (ver th:nth-child abajo): Nº y Marcador son
     cortos y no necesitan tanto sitio como se les venía dando; ese hueco se
     lo queda Resultado, la columna con más texto. Esto es lo que permite
     estrechar todo el panel sin cortar nada (ver .contador). */
  table-layout: fixed;
}

/* La primera columna lleva el numero y el boton de guardar esa mano, asi que
   necesita sitio: con el 7% de antes cabian 11 px utiles y el boton se
   recortaba entero (las celdas llevan overflow:hidden). */
.contador-tabla th:nth-child(1) { width: 17%; }
.contador-tabla th:nth-child(2) { width: 18%; }
.contador-tabla th:nth-child(3) { width: 47%; }
.contador-tabla th:nth-child(4) { width: 18%; }

/* Marcador a tope a la derecha de su columna, sin desperdiciar hueco a un
   valor corto ("24-18") como si fuera texto normal alineado a la izquierda. */
.contador-tabla th:nth-child(4),
.contador-tabla td:nth-child(4) {
  text-align: right;
}

.contador-tabla th {
  text-align: left;
  border-bottom: 2px solid #3a2f1a;
  padding: 2px 4px;
  font-size: 0.65rem;
}

.contador-tabla td {
  padding: 3px 6px;
  border-bottom: 1px dashed rgba(58, 47, 26, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Resultado es la única columna con texto realmente largo ("Cerrado: ganamos
   · 24 pts") — se deja partir en dos líneas en vez de forzar todo el panel
   a ser más ancho solo por esta columna. */
.contador-tabla td:nth-child(3) {
  white-space: normal;
}

.contador-fila {
  cursor: pointer;
}

.contador-fila:hover {
  background: rgba(58, 47, 26, 0.08);
}

.contador-fila td.gana-nosotros {
  color: #1c7a3e;
  font-weight: 700;
}

.contador-fila td.gana-ellos {
  color: #a4231e;
  font-weight: 700;
}

.contador-marcador {
  font-weight: 700;
  font-size: 0.85rem;
}

.contador-fila-partida td {
  background: rgba(255, 210, 87, 0.18);
  border-top: 2px solid #ffd257;
  border-bottom: 2px solid #ffd257;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  padding: 5px 6px;
}

.contador-detalle-fila td {
  background: rgba(58, 47, 26, 0.06);
  font-size: 0.65rem;
  padding: 4px 8px;
}

.contador-detalle-fila.oculta {
  display: none;
}

.contador-detalle-fila div {
  padding: 1px 0;
}

.contador-detalle-total {
  font-weight: 700;
  border-top: 1px dashed rgba(58, 47, 26, 0.4);
  margin-top: 2px;
  padding-top: 2px !important;
}

.contador-stats {
  border-top: 2px solid #3a2f1a;
  margin-top: 6px;
  padding-top: 6px;
  font-size: 0.66rem;
  line-height: 1.5;
}

/* Las fichas tienen grosor: un filo claro arriba, uno oscuro abajo y una
   sombra que las despega de la mesa. Es lo que las hace parecer puestas
   ENCIMA y no dibujadas. */
.ficha {
  display: block;
  border-radius: calc(var(--ficha-u) * 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 calc(var(--ficha-u) * -0.05) calc(var(--ficha-u) * 0.05) rgba(0, 0, 0, 0.20) inset,
    0 3px 6px rgba(0, 0, 0, 0.42);
}

.ficha-vertical {
  width: var(--ficha-u);
  height: calc(var(--ficha-u) * 2);
}

.ficha-horizontal {
  width: calc(var(--ficha-u) * 2);
  height: var(--ficha-u);
}

/* La ficha OBLIGADA: la única que puede poner quien no tiene nada que pensar.
   Parpadea unas veces antes de caer para que la mesa lo vea. No pensar es
   información —no le queda ninguna otra de los dos palos abiertos, y eso es
   una deducción segura— y si pasa en un suspiro, esa información se pierde.

   Se marca con luz y no con opacidad: las fichas de los demás se ven de
   canto, y una tira fina que se apaga y se enciende no se aprecia. */
.ficha.obligada {
  box-shadow: 0 0 0 2px #ffd257, 0 0 14px 3px rgba(255, 210, 87, 0.85),
              0 2px 5px rgba(0, 0, 0, 0.4);
  filter: brightness(1.6);
}

/* La interrogación QUIETA: la de cuando no hay nada que pensar. Es el mismo
   dibujo que la que pasea, y eso es a propósito — lo que distingue los dos
   casos es el MOVIMIENTO. Si recorre la mano, ha pensado; si se queda en una
   ficha parpadeando, no había nada que pensar.

   Sin transición de sitio: no va a ninguna parte, y heredando la del paseo
   entraba deslizándose desde la esquina. (El sitio lo pone el JS en el
   propio elemento, así que aquí solo hay que quitarle el movimiento.) */
.interrogante-parada {
  transition: opacity 0.22s ease;
}

.interrogante-parada.apagada { opacity: 0.12; }

/* La ficha que se está llevando con el ratón, y la que se queda en su hueco
   mientras tanto. */
.ficha-arrastrada {
  position: fixed;
  z-index: 62;
  pointer-events: none;
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

.ficha.agarrada { opacity: 0.28; }

/* La punta a la que apunta lo que se arrastra: se agranda para que se vea
   que soltando ahí, cae ahí. */
.marcador-punta.apuntada {
  animation: none;
  transform: scale(1.35);
  background: radial-gradient(circle, rgba(255, 210, 87, 0.8), rgba(255, 210, 87, 0.22) 70%);
  box-shadow: 0 0 18px rgba(255, 210, 87, 0.75);
}

.marcador-punta.aconsejada.apuntada {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.85), rgba(52, 211, 153, 0.25) 70%);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.8);
}

/* Ficha en vuelo: la copia que va de la mano a la línea. Va en position fixed
   y sobre todo lo demás porque cruza la mesa entera, y no debe estorbar a los
   clics mientras viaja. La duración sigue el ritmo del juego: quien juega
   rápido no quiere esperar a que la ficha aterrice. */
.ficha-volando {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transition: left var(--vuelo, 0.28s) cubic-bezier(0.33, 0.9, 0.4, 1),
              top var(--vuelo, 0.28s) cubic-bezier(0.33, 0.9, 0.4, 1),
              width var(--vuelo, 0.28s) ease,
              height var(--vuelo, 0.28s) ease;
}

/* ── Fichas de canto ──
   Las de los otros tres se ven de FILO: las tienen de pie mirándoles a ellos
   y tú les ves el canto.

   Dos cosas del primer dominó de Miguel, y las dos importan:

   1. El filo es tan largo como ANCHA es la ficha (una unidad), no como larga.
      Estaba puesto a dos unidades y salían unas tiras larguísimas.
   2. Va partido en dos mitades: NEGRA la del reverso y CLARA la del anverso.
      La ficha se inclina hacia su dueño, así que la cara mira a su dueño y el
      reverso mira al centro de la mesa — o sea, a ti. Por eso la mitad negra
      cae siempre del lado del centro, y cambia según dónde esté sentado.

   El grosor es 0,40 del ancho, que es la proporción de su pantalla. */
.ficha-canto {
  --grosor: calc(var(--ficha-u) * 0.40);
  --negro: #17171a;
  --marfil: #efe9dc;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 2px;
}

/* Los de los lados: el filo de pie, tan alto como ancha es la ficha. */
.ficha-canto-izquierda,
.ficha-canto-derecha {
  width: var(--grosor);
  height: var(--ficha-u);
}

/* El de enfrente: el filo tumbado. */
.ficha-canto-abajo {
  width: var(--ficha-u);
  height: var(--grosor);
}

/* Y de qué lado cae el reverso. El corte va seco, sin degradado: son dos
   caras de la ficha, no una sombra. */
.ficha-canto-abajo {
  background: linear-gradient(to bottom, var(--marfil) 0 50%, var(--negro) 50% 100%);
}

.ficha-canto-izquierda {
  background: linear-gradient(to left, var(--marfil) 0 50%, var(--negro) 50% 100%);
}

.ficha-canto-derecha {
  background: linear-gradient(to right, var(--marfil) 0 50%, var(--negro) 50% 100%);
}

/* Los huecos de las ya jugadas, del mismo tamaño para que no se recoloquen. */
.ficha-hueco.ficha-canto-izquierda,
.ficha-hueco.ficha-canto-derecha {
  width: calc(var(--ficha-u) * 0.40);
  height: var(--ficha-u);
}

.ficha-hueco.ficha-canto-abajo {
  width: var(--ficha-u);
  height: calc(var(--ficha-u) * 0.40);
}

/* Hueco de una ficha ya jugada, cuando "agrupar mano al jugar" está
   desactivado: mismo tamaño que una ficha real (ver .ficha-vertical/
   .ficha-horizontal, se añaden junto a esta clase), pero vacío, para que las
   demás fichas de la mano no se reagrupen y queden donde estaban. */
.ficha-hueco {
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--ficha-u) * 0.12);
}

.mano {
  position: absolute;
  display: flex;
  gap: calc(var(--ficha-u) * 0.12);
  z-index: 2;
}

.mano-norte,
.mano-sur {
  left: 50%;
  transform: translateX(-50%);
}

/* Las manos van por DENTRO de los nombres, que viven pegados al borde
   (0,3%). La separación se mide en rem y no en %: el nombre ocupa lo que
   ocupa una línea de texto, y eso no crece con la mesa — con un porcentaje,
   en una ventana pequeña las fichas volvían a taparlo. */
.mano-norte {
  top: calc(0.3% + 2.2rem);
}

.mano-sur {
  bottom: 3%;
}

.mano-sur .ficha {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* El amarillo, el verde y el azul valen para las CUATRO manos cuando se
   ven las fichas (Miguel, 18-9-2026). El puntero y el salto al pasar por
   encima siguen siendo solo de la tuya: las otras no se juegan. */
.ficha.jugable {
  box-shadow: 0 0 0 2px #ffd257, 0 2px 5px rgba(0, 0, 0, 0.4);
}

.ficha.consejo {
  box-shadow: 0 0 0 2px #34d399, 0 0 10px rgba(52, 211, 153, 0.7), 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Lo que haría CalculaFinal, si quien juega a mano lo tiene puesto y entra.
   Azul, para compararlo con su consejero; si coinciden, los dos anillos. */
.ficha.consejo-final {
  box-shadow: 0 0 0 2px #38bdf8, 0 0 10px rgba(56, 189, 248, 0.75), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.ficha.consejo.consejo-final {
  box-shadow: 0 0 0 2px #34d399, 0 0 0 5px #38bdf8, 0 0 12px rgba(56, 189, 248, 0.7), 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* En Jugadores, bajo un sitio que se juega a mano: su consejero y su
   CalculaFinal, sangrados para que se lean como cosa del sitio de arriba. */
.fila.fila-consejo { padding-left: 22px; }
.fila.fila-consejo[hidden] { display: none; }

/* Se puede pinchar: la tuya siempre, y la del que está en turno cuando
   tienes las manos destapadas (Miguel, 18-9-2026). */
.ficha.jugable.se-puede-poner { cursor: pointer; }
.ficha.jugable.se-puede-poner:hover {
  transform: translateY(-12%);
}

/* Dónde cabe la ficha. AMARILLO donde se puede poner y VERDE donde te la
   aconsejan, el mismo idioma que las fichas de la mano (Miguel, 20-9-2026). */
.marcador-punta {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 87, 0.5), rgba(255, 210, 87, 0.1) 70%);
  border: 2px solid #ffd257;
  cursor: pointer;
  z-index: 5;
  animation: pulso-punta 1s ease-in-out infinite;
}

.marcador-punta.aconsejada {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.55), rgba(52, 211, 153, 0.12) 70%);
  border-color: #34d399;
}

@keyframes pulso-punta {
  0%, 100% { transform: scale(0.85); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.mano-este,
.mano-oeste {
  flex-direction: column;
  top: 50%;
  transform: translateY(-50%);
}

.mano-este {
  right: calc(0.3% + 2.2rem);
}

.mano-oeste {
  left: calc(0.3% + 2.2rem);
}


/* ── Posibles (modo aprendizaje) ──────────────────────────────────────────
   Las 28 fichas en pequeño para cada RIVAL, con la disposición del programa
   original: fichas de pie en columnas de 7-6-5-4-3-2-1 alineadas por abajo
   (arriba van tumbadas en filas), la columna larga pegada al borde. Cada
   columna es un palo, de modo que se ve de un golpe cuál se ha terminado.

   Solo tres paneles: de mi propia mano no hace falta, ya sé lo que tengo.
   Y solo en modo aprendizaje — en una mesa en red esto sería hacer trampas. */
.posibles {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 6;
}

.posibles.visible { display: block; }

.posibles-panel { position: absolute; }

/* Cada rival en su esquina, con el ángulo recto del triángulo contra ella y
   el lado largo pegado al borde de fuera. El nombre va SOBRE ese lado largo:
   horizontal arriba, y en vertical a los costados en los dos de abajo, igual
   que las etiquetas de los jugadores este y oeste.
   Los tres a la misma distancia del borde. Con el nombre al costado (y ya no
   debajo) el triángulo baja hasta la esquina él solo, sin necesidad de
   separarlo. */
.posibles-panel.oeste { left: 1.5%; bottom: 1.5%; }
.posibles-panel.este  { right: 1.5%; bottom: 1.5%; }
.posibles-panel.norte { right: 1.5%; top: 1.5%; }

/* El retoque fino va sobre las FICHAS, no sobre el panel entero: moviendo el
   panel se llevaba el nombre con él y se salía de la mesa. Con translate se
   corren sin cambiar el sitio que ocupan, así que el nombre no se entera. */
.oeste .posibles-rejilla,
.este .posibles-rejilla { transform: translateY(1mm); }
.norte .posibles-rejilla { transform: translateX(1mm); }

/* Las columnas, una al lado de otra y pegadas por abajo. En el lado este se
   invierten, para que la columna larga quede contra su borde. */
.posibles-rejilla {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.este .posibles-rejilla { flex-direction: row-reverse; }

/* Arriba las fichas van tumbadas y en filas apiladas hacia abajo, con la
   fila larga arriba del todo, pegada al borde. */
.norte .posibles-rejilla {
  flex-direction: column;
  align-items: flex-end;
}

.posibles-columna {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.norte .posibles-columna { flex-direction: row; }

/* De pie: la mitad de anchas que altas, como en el original. Se miden en
   anchos de ficha para que encojan y crezcan con la mesa. */
.posibles-ficha {
  width: calc(var(--ficha-u) * 0.508);
  height: calc(var(--ficha-u) * 1.016);
  display: block;
  border-radius: 2px;
  transition: opacity 0.15s ease;
  /* El panel entero (.posibles) es pointer-events: none a propósito, para no
     robarle el arrastre a la mesa que hay debajo. Sin este auto, el mouse
     atraviesa la ficha y llega a la mesa — que es justo lo que le pasaba al
     tooltip: no es que no funcionara, es que el evento nunca llegaba. */
  pointer-events: auto;
}

.norte .posibles-ficha {
  width: calc(var(--ficha-u) * 1.016);
  height: calc(var(--ficha-u) * 0.508);
}

/* El nombre del jugador cuyas fichas se están mirando. En negro sobre el
   mármol; el halo claro es para que se lea también sobre una veta oscura. */
.posibles-pie {
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85);
}

/* Arriba, el nombre encima del lado largo. Debajo se metería en la mesa;
   encima queda junto a su jugador. */
.norte .posibles-pie { margin-bottom: 5px; text-align: right; }

/* A los costados el nombre va en VERTICAL, como las etiquetas de los
   jugadores este y oeste. Con writing-mode y no con rotate(): rotado, el
   elemento seguiría ocupando su ancho horizontal en el layout y empujaría
   las fichas. Y a la izquierda se gira 180° para que se lea de abajo arriba,
   igual que la etiqueta del oeste. */
.oeste .posibles-panel-fila,
.este .posibles-panel-fila { display: flex; align-items: flex-end; gap: 4px; }

.oeste .posibles-pie,
.este .posibles-pie {
  writing-mode: vertical-rl;
  align-self: stretch;
}

.oeste .posibles-pie { transform: rotate(180deg); }

/* Descartada: se sabe que nadie la puede tener ya. Se deja puesta pero
   apagada, para que el hueco siga contando y el triángulo se lea. */
.posibles-ficha.descartada { opacity: 0.16; }

/* Grado de certeza, con el código de colores de siempre:

     verde     100%   no puede ser de otra manera
     amarillo   75%   convención fiable
     naranja    50%
     rojo       25%   apenas un indicio

   El verde marca lo que SÍ tiene. Los otros tres marcan lo que probablemente
   NO tiene, y por eso la ficha además se aclara: cuanto más segura es la
   deducción, menos presente está. */
.posibles-ficha.segura {
  outline-style: solid;
  outline-width: 1.5px;
  outline-offset: -1px;
}

.posibles-ficha.segura { outline-color: #22c55e; }

/* Posibles estimadas (calcularEstimadas). Verde lima, que es verde —se da por
   sabida— sin ser el verde de lo que se sabe de verdad:
     estimada para él        marco lima con halo; el halo porque en el tamaño
                             de los paneles un marco lima solo se confundía
                             con el de una ficha calculada alta
     estimada para otro      apagada, pero menos que una descartada de verdad */
.posibles-ficha.segura.estimada {
  outline-color: #a3e635;
  outline-width: 2px;
  box-shadow: 0 0 6px 2px rgba(163, 230, 53, 0.9);
}
.posibles-ficha.descartada.estimada { opacity: 0.4; }

/* "Situada entera" o "activa CalculaFinal", en el pie del panel. */
.posibles-situada { color: #166534; font-weight: 800; }

/* El aviso de CalculaFinal, en el cajón de los mensajes de partida: gris si
   alguien lo activa pero todavía no puede entrar, verde si entraría. Antes fue
   sobre la mesa (se montaba en la línea de juego) y bajo la lista de jugadas. */
.aviso-calculafinal {
  max-width: 340px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: linear-gradient(135deg, #2c2c2c, #161616);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  color: #d6d3cb;
}
.aviso-calculafinal.entra {
  color: #86efac;
  border-color: #22c55e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(34, 197, 94, 0.35);
}
.aviso-calculafinal[hidden] { display: none; }

/* Improbables: el marco dice cuánto de fiable es la deducción y la
   transparencia, cuánto se descuenta esa ficha. */
/* Lo PROBABLE es la noticia contraria: se cree que SÍ la tiene. Va con la
   ficha encendida y el marco del color de su grado — como lo seguro, que
   también se ve entero, y al revés que lo improbable, que se apaga. Mirando
   el panel: lo que se ve, lo tiene; lo que se desvanece, no. */
.posibles-ficha.probable {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: -1px;
}

.posibles-ficha.probable.f75 { outline-color: #eab308; }
.posibles-ficha.probable.f50 { outline-color: #f97316; }
.posibles-ficha.probable.f25 { outline-color: #ff3b3b; }

.posibles-ficha.improbable { outline-style: solid; outline-width: 1.5px; outline-offset: -1px; }
.posibles-ficha.improbable.f75 { outline-color: #eab308; opacity: 0.42; }
.posibles-ficha.improbable.f50 { outline-color: #f97316; opacity: 0.62; }
.posibles-ficha.improbable.f25 { outline-color: #ff3b3b; opacity: 0.8; }

/* Probabilidad calculada (js/probabilidad.js): mismo lenguaje que arriba,
   interpolado sin escalones en vez de fijo a 25/50/75/100. El color y la
   opacidad los pone el JS por ficha porque son un número continuo, no una de
   estas cuatro clases — aquí solo se fija la forma del marco. */
.posibles-ficha.calculada {
  outline-style: solid;
  outline-width: 1.5px;
  outline-offset: -1px;
  transition: outline-color 0.15s ease, opacity 0.15s ease;
}

/* Tooltip propio, compartido por las fichas de posibles y los botones de
   palo (js/main.js, mostrarTooltip). El title nativo tardaba casi un
   segundo y pedía clavar el mouse en 20px de ficha; este sale al instante,
   siguiendo el cursor. Mismo lenguaje que .palo-detalle: cristal oscuro
   solido, esquinas redondeadas, sin más.
   white-space: pre-line respeta los saltos de línea que ya trae el texto
   (el desglose de probabilidad.js: base, cada señal, total) en vez de
   aplastarlos en una sola línea interminable. */
.tooltip-ficha {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  background: rgba(0, 0, 0, 0.85);
  color: var(--texto-claro);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;
  max-width: 240px;
  padding: 6px 9px;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  /* Por encima de todo, también del laboratorio (110-112): explica sus números. */
  z-index: 120;
  transition: opacity 0.1s ease;
}

.tooltip-ficha.abajo { transform: translate(-50%, 0); }

/* Sobre la mesa (pintarFichasCadena) el tooltip puede caer fuera del mármol
   claro, sobre el fondo oscuro de la página que rodea la mesa — oscuro
   sobre oscuro no se leía. Papelito claro en vez de cristal, para que se
   vea sea cual sea lo que tenga detrás. */
.tooltip-ficha.claro {
  background: #fff3c4;
  color: #2b2408;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.tooltip-ficha.visible { opacity: 1; }


/* ══ Interfaz: barra, cajón y controles ═══════════════════════════════════
   Todo lo de aquí comparte un mismo lenguaje: cristal oscuro esmerilado
   sobre el mármol, esquinas redondeadas, oro (#ffd257) para lo encendido y
   iconos de trazo (js/iconos.js). Antes eran dos emoji sueltos y un
   desplegable que crecía hasta salirse de la pantalla. */

:root {
  --cristal: rgba(20, 20, 22, 0.82);
  --cristal-claro: rgba(255, 255, 255, 0.09);
  --oro: #ffd257;
}

/* ── Barra de herramientas ── */
.barra {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--cristal);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cristal-claro);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 51;
}

.barra-boton {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #cfcabb;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.barra-boton:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Encendido = oro. Es lo que no se podía hacer con un emoji. */
.barra-boton.activo { background: rgba(255, 210, 87, 0.16); color: var(--oro); }

.barra-separador {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.14);
}

/* ── Cajón de ajustes ── */
.cajon-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 59;
}

.cajon-fondo.visible { opacity: 1; pointer-events: auto; }

/* EL MENÚ, POR ENCIMA DE TODO (Miguel, 27-9-2026: *"cuando saques el menú,
   hazlo por encima de todo, incluso de los mensajes de juego"*). Los mensajes
   de la esquina (.cajon-mensajes) estaban en el mismo 60 que el cajón, así que
   quien ganaba dependía del orden del HTML, y le tapaban el menú. Por encima de
   los mensajes (60), de la pregunta de la pensada larga (70), de la sala (100),
   de las ventanas del laboratorio (110-112) y del tooltip de ficha (120): con
   el menú abierto, nada tiene que flotar sobre él. Y no se pisa con nada,
   porque todo lo que abre un panel cierra antes el menú (abrirCajon(false)). */
#cajon-fondo { z-index: 124; }

.cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(370px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--cristal);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--cristal-claro);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  /* Fuera de pantalla hasta que se abre; entra deslizándose. */
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 125;
}

.cajon.abierto { transform: translateX(0); }

.cajon-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cajon-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f2ede0;
}

.icono-boton {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfcabb;
  cursor: pointer;
}

.icono-boton:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* El cuerpo se desplaza solo: por eso ya no importa cuántos ajustes haya. */
.cajon-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 24px;
  color: #e8e2d0;
  font-size: 0.85rem;
}

.grupo { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.grupo:last-child { border-bottom: 0; }

.grupo-titulo {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oro);
}

.grupo-nota {
  margin: 12px 0 6px;
  font-size: 0.72rem;
  color: #9e988a;
}

/* Etiqueta a la izquierda, control a la derecha: la mirada baja recta por
   los controles en vez de ir zigzagueando. */
.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  cursor: pointer;
}

.fila > span:first-child { display: flex; flex-direction: column; }
.fila small { color: #928c7e; font-size: 0.68rem; line-height: 1.3; margin-top: 2px; }

.fila select,
.fila .entrada-texto,
.fila .entrada-numero { min-width: 128px; }

/* Guardar los cuatro nombres de golpe: el boton manda en la fila y el aviso
   de "guardados" va debajo, sin empujar nada. */
.fila-nombres-mios { flex-direction: column; align-items: stretch; gap: 4px; }
.fila-nombres-mios button { width: 100%; }
.fila-nombres-mios small { color: #6f8f63; }

/* ── Interruptor de palanca ── */
.palanca {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.18s ease;
}

.palanca::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e9e4d6;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.palanca:checked { background: var(--oro); }
.palanca:checked::after { transform: translateX(16px); background: #2a2418; }
.palanca:disabled { opacity: 0.4; cursor: not-allowed; }


/* ── Por qué (argumento de las fichas posibles) ───────────────────────────
   Ventana centrada con el razonamiento agrupado por motivo: no interesan
   veintiocho líneas sueltas, sino "estas cuatro, porque pasó al 3". */
.argumento {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.97);
  width: min(460px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--cristal);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cristal-claro);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 62;
}

.argumento.abierto {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.argumento-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 18px;
  color: #e8e2d0;
  font-size: 0.84rem;
}

/* Un bloque por motivo. La barrita de color dice de qué certeza se habla,
   con el mismo código que los recuadros de las fichas. */
.argumento-grupo {
  padding: 10px 0 10px 12px;
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 4px;
}

.argumento-grupo.segura { border-left-color: #22c55e; }
.argumento-grupo.descartada { border-left-color: rgba(255, 255, 255, 0.18); }
.argumento-grupo.probable.f75 { border-left-color: #eab308; }
.argumento-grupo.probable.f50 { border-left-color: #f97316; }
.argumento-grupo.probable.f25 { border-left-color: #ff3b3b; }
.argumento-grupo.probable .argumento-motivo { color: #fde047; }
.argumento-grupo.improbable.f75 { border-left-color: #eab308; }
.argumento-grupo.improbable.f50 { border-left-color: #f97316; }
.argumento-grupo.improbable.f25 { border-left-color: #ff3b3b; }

.argumento-motivo { font-weight: 700; margin-bottom: 6px; }
.argumento-grupo.segura .argumento-motivo { color: #6ee7a8; }
.argumento-grupo.estimada { border-left-color: #a3e635; }
.argumento-grupo.estimada .argumento-motivo { color: #d9f99d; }
.argumento-grupo.descartada.estimada .argumento-fichas img { opacity: 0.6; }
.argumento-grupo.improbable.f75 .argumento-motivo { color: #fde047; }
.argumento-grupo.improbable.f50 .argumento-motivo { color: #fdba74; }
.argumento-grupo.improbable.f25 .argumento-motivo { color: #fca5a5; }

/* Lo supuesto se ve un punto más apagado que lo seguro, también aquí: el
   argumento y el panel tienen que dar la misma impresión de un vistazo. */
.argumento-grupo.improbable .argumento-fichas img { opacity: 0.6; }

.argumento-fichas { display: flex; flex-wrap: wrap; gap: 3px; }

.argumento-fichas img {
  width: 20px;
  height: 40px;
  border-radius: 2px;
}

.argumento-resumen {
  margin: 10px 0 4px;
  color: #9e988a;
  font-size: 0.78rem;
}

/* El icono que abre todo esto, junto al nombre. Amarillo para que se vea
   que es una ayuda de estudio y no parte de la partida. */
.posibles-porque {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  /* Negro como el nombre que lleva al lado: en amarillo sobre el mármol
     claro apenas se distinguía. */
  color: #000;
  cursor: pointer;
  pointer-events: auto;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.posibles-porque:hover { color: #6b6b6b; }

/* Al costado el nombre va en vertical, así que el icono se endereza para no
   quedar tumbado con él. */
.oeste .posibles-porque,
.este .posibles-porque { writing-mode: horizontal-tb; }


/* ── "Está pensando" ──────────────────────────────────────────────────────
   El programa original encendía una bombilla, y además paseaba un signo de
   interrogación de ficha en ficha (Juego.vb). Aquí se pasa la mano por
   encima: cada ficha se hunde y se oscurece como una tecla de piano al
   pulsarla, rebota clara al soltarla, y el gesto va corriendo de una a la
   siguiente.

   El desfase de cada ficha lo pone marcarPensando() desde JS y NO con
   nth-child: en el contenedor de la mano hay más cosas además de fichas (el
   sello de "Pasa", y los huecos que dejan las jugadas cuando no se reagrupa
   la mano), así que contar hijos en CSS daba desfases en fichas equivocadas
   — por eso no se apreciaba la onda. */
/* La interrogación que pasea por las fichas de quien está decidiendo. Es lo
   que hacía el original (el PictureBox "Interrogante" de Juego.vb, que se
   colocaba encima de cada ficha por turno).

   Se hizo primero con una animación CSS de brillo, y no se veía: el navegador
   no aceptaba calc(var(--pensada) / 2) como duración y el valor caía a 0s, o
   sea que la animación entera pasaba en un instante. Un elemento que se mueve
   de verdad no puede fallar así de callado: o está encima de una ficha o no
   está. */
.interrogante {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(var(--ficha-u) * 0.8);
  height: calc(var(--ficha-u) * 0.8);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #ffd257;
  font-size: calc(var(--ficha-u) * 0.62);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  /* Se desliza de una ficha a la siguiente en vez de saltar. Con 0,12 s el
     recorrido era casi un salto y parecía un tic; ahora la duración la pone
     el JS en --paso, un poco más corta que el intervalo, para que llegue y
     descanse un instante sobre cada ficha antes de seguir. */
  transition: left var(--paso, 220ms) ease-in-out, top var(--paso, 220ms) ease-in-out;
}

/* LA PENSADA LARGA. Se para el doble de tiempo y repasa las fichas cuatro
   veces en vez de dos: está avisando a su compañero de que la ficha que va a
   poner rompe un acuerdo de la pareja, y que por tanto no deduzca nada de
   ella. Se distingue a simple vista —dos interrogaciones y en rojo— porque es
   justo lo contrario de una pensada normal: no dice, desdice. */
.interrogante.larga {
  color: #ff8a5c;
  background: rgba(60, 0, 0, 0.82);
  box-shadow: 0 2px 12px rgba(255, 90, 40, 0.55);
  width: calc(var(--ficha-u) * 0.95);
  height: calc(var(--ficha-u) * 0.95);
  font-size: calc(var(--ficha-u) * 0.42);
  letter-spacing: -0.04em;
}

/* La ficha que está mirando en este momento. El resalte también entra y sale
   suave: encendiéndose de golpe cada pocos milisegundos, parpadeaba. */
.ficha.mirada {
  filter: brightness(1.18);
  outline: 2px solid rgba(255, 210, 87, 0.75);
  outline-offset: 1px;
}

/* Solo las tres de enfrente y los lados: la tuya ya tiene su propia
   transición para el hover, y una regla sobre `.mano .ficha` la habría
   pisado por ir más abajo con la misma especificidad. */
.mano-norte .ficha,
.mano-este .ficha,
.mano-oeste .ficha {
  transition: filter 0.2s ease, outline-color 0.2s ease;
}




/* ── Cuántas quedan de cada palo ──────────────────────────────────────────
   Siete fichas por palo. La cifra grande son las que andan en manos ajenas,
   que es el número que de verdad se juega; entre paréntesis, las que tengo
   yo. Los dos palos abiertos van resaltados, que son los que se miran.
   En la esquina que queda libre de la mesa (las otras tres las ocupan los
   paneles de fichas posibles). */
.palos {
  position: absolute;
  left: 1.5%;
  top: 1.5%;
  display: none;
  gap: 3px;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 9px;
  z-index: 6;
}

.palos.visible { display: flex; }

.palo {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 3px 4px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #e8e2d0;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.1;
}

.palo:hover { background: rgba(255, 255, 255, 0.16); }

/* Palo abierto ahora mismo en la mesa. */
.palo.abierto { border-color: var(--oro); }

/* El que se está consultando: sus fichas salen resaltadas en los paneles. */
.palo.elegido { background: var(--oro); color: #241f10; }

.palo-numero { font-size: 0.82rem; font-weight: 700; }
.palo-fuera { font-size: 0.95rem; font-weight: 700; }
.palo-mias { font-size: 0.6rem; opacity: 0.7; }

/* Ninguna fuera: el palo está agotado para los rivales. */
.palo.agotado .palo-fuera { color: #6ee7a8; }
.palo.elegido.agotado .palo-fuera { color: #146c3a; }

/* El palo de la salida, leído (ver lecturaDeLaSalidaEnPantalla en main.js):
   raya verde debajo si la salida se lee fuerte, roja si floja. */
.palo.salida-fuerte { box-shadow: inset 0 -3px 0 #4ade80; }
.palo.salida-floja { box-shadow: inset 0 -3px 0 #f87171; }
.palo-detalle-reparto.salida-fuerte { color: #86efac; }
.palo-detalle-reparto.salida-floja { color: #fca5a5; }

/* Altas o bajas, bajo el nombre (ver pintarAltasOBajas en main.js). */
.juego-altas {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: help;
}
.juego-altas[data-juega="altas"] { color: #b45309; }
.juego-altas[data-juega="bajas"] { color: #1d4ed8; }

/* Fichas del palo consultado, dentro de los paneles de posibles. */
.posibles-ficha.resaltada {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
  z-index: 2;
}

.posibles-ficha.apagada { opacity: 0.1; }


/* Las fichas que quedan del palo consultado. Justo debajo del contador, y se
   ve tambien —sobre todo— con los paneles de posibles apagados: sin esto,
   pulsar un palo sin los posibles a la vista no haria nada. */
.palo-detalle {
  position: absolute;
  left: 1.5%;
  top: calc(1.5% + var(--ficha-u) * 1.95);
  display: none;
  max-width: min(300px, 38%);
  padding: 7px 9px 8px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 9px;
  z-index: 7;
}

.palo-detalle.visible { display: block; }

.palo-detalle-titulo {
  margin-bottom: 6px;
  white-space: nowrap;
}

/* Cuantas quedan del palo: es la cifra que se busca de un vistazo, asi que
   va sola en su renglon, grande y en oro. */
.palo-detalle-quedan {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--oro);
  font-size: 0.76rem;
  font-weight: 700;
}

.palo-detalle-cuenta {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* El desglose, debajo y mas discreto. */
.palo-detalle-desglose {
  margin-top: 2px;
  color: #cfcabb;
  font-size: 0.7rem;
}

/* El reparto por rival (derivado de probabilidad.js): mismo tono que el
   desglose, pero con permiso para partirse en dos líneas — puede llevar los
   tres nombres, y .palo-detalle-titulo hereda white-space:nowrap. */
.palo-detalle-reparto {
  margin-top: 3px;
  color: #cfcabb;
  font-size: 0.68rem;
  white-space: normal;
}

.palo-detalle-fichas { display: flex; flex-wrap: wrap; gap: 3px; }

.palo-detalle-ficha {
  width: calc(var(--ficha-u) * 0.44);
  height: calc(var(--ficha-u) * 0.88);
  border-radius: 2px;
}

/* Las mias: ya se donde estan, no son las que hay que adivinar. */
.palo-detalle-ficha.mia {
  outline: 2px solid #34d399;
  outline-offset: -1px;
  opacity: 0.55;
}


/* ── Mando de ensayo ──────────────────────────────────────────────────────
   Retroceder, avanzar y reproducir la mano. Abajo en el centro de la mesa,
   sobre la mano del sur, que es donde se está mirando. */
/* Se puede arrastrar y se queda donde lo dejes (ver arrancarArrastreMando).
   Por eso la posicion va en left/top y no en bottom: al arrastrarlo se
   escriben esas dos, y mezclar los dos sistemas lo hacia saltar. */
/* Justo debajo de la lista de jugadas, a su ancho (ver .columna-jugadas). */
.mando {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 2px 4px;
  background: var(--cristal);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cristal-claro);
  border-radius: 11px;
}

.mando.visible { display: flex; }

.mando-boton {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfcabb;
  cursor: pointer;
}

.mando-boton:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mando-boton:disabled { opacity: 0.28; cursor: default; }
.mando-boton.activo { background: rgba(255, 210, 87, 0.18); color: var(--oro); }

.mando-cuenta {
  padding: 0 5px;
  color: #cfcabb;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Mirando el pasado: se avisa, porque si no parece que la partida se ha
   quedado colgada. */
/* Nombre de la partida de archivo que hay puesta. */
.mando-archivo {
  max-width: 12ch;
  padding: 0 6px;
  color: #8fd3ff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mando-aviso {
  padding: 0 8px 0 4px;
  color: var(--oro);
  font-size: 0.7rem;
  font-weight: 700;
}

/* La jugada que se está mirando, resaltada en la lista. */
.historial-lista li.mirando {
  background: rgba(255, 210, 87, 0.22);
  border-radius: 4px;
}

.historial-lista li { cursor: pointer; }


/* ── Manos y partidas guardadas ───────────────────────────────────────────
   Una mano guardada es su registro (ver js/guardar.js), asi que la lista es
   corta de pintar: nombre, cuando y de que tamaño. */
.guardar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.boton-menor {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8e2d0;
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.boton-menor:hover { background: rgba(255, 255, 255, 0.16); }

.guardada {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.guardada-texto { flex: 1; min-width: 0; }
.guardada-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guardada-datos { color: #928c7e; font-size: 0.7rem; }

.guardada-boton {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cfcabb;
  cursor: pointer;
  flex: 0 0 auto;
}

.guardada-boton:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.guardada-boton.peligro:hover { background: rgba(255, 59, 59, 0.25); color: #ff9a9a; }

.guardadas-vacio { color: #928c7e; font-size: 0.74rem; padding: 6px 0; }


/* ── Menú por páginas ─────────────────────────────────────────────────────
   Portada con las secciones y, al elegir una, esa página entra deslizándose
   con su flecha de volver. Es como funcionan los menús de los navegadores, y
   funciona por lo mismo: cabe en cualquier pantalla y no obliga a leer
   cuarenta opciones para encontrar una. */
.cajon-cabecera { gap: 4px; }
.cajon-titulo { flex: 1; }

.pagina { animation: entra-pagina 0.18s ease-out; }
.pagina.oculta { display: none; }

@keyframes entra-pagina {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina { animation: none; }
}

.menu-grupo {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.menu-grupo:last-child { border-bottom: 0; }

.menu-rotulo {
  padding: 10px 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oro);
}

/* Cada sección es una fila con su icono a la izquierda, el nombre y una
   línea que explica qué hay dentro: sin esa línea hay que entrar a mirar. */
.menu-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.menu-fila:hover { background: rgba(255, 255, 255, 0.08); }

.menu-icono { display: grid; place-items: center; color: var(--oro); flex: 0 0 auto; }
.menu-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-texto b { font-weight: 700; }
.menu-texto small { color: #928c7e; font-size: 0.7rem; margin-top: 1px; }
.menu-flecha { display: grid; place-items: center; color: #6f6a5e; flex: 0 0 auto; }

.pagina-nota {
  margin: 4px 0 10px;
  color: #928c7e;
  font-size: 0.74rem;
}

/* Lo que sabe de ti el MicaMi que estás educando, en la página del menú. La
   barra es la misma que en el taller (css/micami.css), para que se reconozca. */
.ficha-educando { margin: 10px 0 12px; }
.ficha-educando .madurez {
  display: block;
  width: 100%;
  height: 6px;
  margin: 5px 0 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  overflow: hidden;
}
.ficha-educando .madurez-dentro { display: block; height: 100%; background: var(--oro); }
.ficha-educando .madurez-cifra { color: #928c7e; font-size: 0.72rem; }

/* Las jugadas que tu MicaMi no sabe explicar (ver pintarSinExplicar, main.js). */
.sin-explicar { margin-top: 10px; }
.aviso-sin-explicar { color: #e7c86b; }
.sin-explicar-una {
  margin: 8px 0;
  padding: 7px 9px 9px;
  border-left: 3px solid #6f6a5e;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}
/* Las que el motor ve iguales son las que más valen: ahí falta una condición. */
.sin-explicar-una.iguales { border-left-color: #e7c86b; }
.sin-explicar-cabeza { color: #cfcabb; font-size: 0.72rem; font-weight: 700; }
.sin-explicar-mano { display: flex; flex-wrap: wrap; gap: 3px; margin: 5px 0; }
.sin-explicar-mano .palo-detalle-ficha { height: 34px; width: auto; }
.sin-explicar-mano .la-tuya { outline: 2px solid #86efac; outline-offset: 1px; }
.sin-explicar-mano .la-suya { outline: 2px solid #fca5a5; outline-offset: 1px; }
.sin-explicar-que { color: #e8e2d0; font-size: 0.76rem; }
.sin-explicar-porque { color: #928c7e; font-size: 0.7rem; margin: 3px 0 6px; }
.sin-explicar-una .entrada-texto { width: 100%; box-sizing: border-box; }
/* ── Los códigos (J36, S4, P28, A6) en azul y para leerlos ──
   Miguel, 16-9-2026: "poner en azul los JX y poder leerlos en un mensaje".
   Van como botón, no como span, para que funcionen con el teclado. */
.codigo-micami {
  background: none;
  border: 0;
  padding: 0 1px;
  font: inherit;
  font-weight: 700;
  color: #7dd3fc;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.codigo-micami:hover { color: #bae6fd; }
.mensaje-codigo {
  position: absolute;
  z-index: 60;
  padding: 10px 26px 10px 12px;
  border: 1px solid #7dd3fc;
  border-radius: 8px;
  background: #11161d;
  color: #e8e2d0;
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.mensaje-codigo-titulo { color: #7dd3fc; font-weight: 700; margin-bottom: 4px; }
.mensaje-codigo-cerrar {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: 0;
  color: #928c7e;
  font-size: 1rem;
  cursor: pointer;
}
.sin-explicar-pie { display: flex; gap: 8px; align-items: center; }
.sin-explicar-pie .entrada-texto { flex: 1; }

/* El cuaderno de un MicaMi, mano a mano (Miguel, 20-9-2026). */
.tabla-cuaderno { margin-top: 8px; font-size: 0.76rem; }
.tabla-cuaderno td, .tabla-cuaderno th { padding: 2px 8px; }
.tabla-cuaderno tr.sin-decisiones { opacity: 0.55; }

/* La casilla del porqué: escribir, Guardar, y decir si se ha guardado. */
.nota-porque { display: flex; gap: 6px; align-items: center; flex: 1; flex-wrap: wrap; }
.nota-porque .entrada-texto { flex: 1; min-width: 180px; }
.nota-dicho { font-size: 0.7rem; color: #86efac; white-space: nowrap; }
.nota-dicho.mal { color: #fca5a5; }
/* La explicación: un párrafo por idea, que se lea de arriba abajo. */
.sin-explicar-porque > div + div,
.revision-porque > div + div { margin-top: 3px; }

/* ── Revisar una jugada en la mesa ──
   La ficha que se jugó, en verde; la que el MicaMi habría jugado, en rojo.
   Van con sombra además del borde porque sobre el tapete un borde fino se
   pierde entre las fichas de al lado. */
.ficha.revision-tuya {
  outline: 3px solid #86efac;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(134, 239, 172, 0.7);
  border-radius: 4px;
}
.ficha.revision-suya {
  outline: 3px solid #fca5a5;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(252, 165, 165, 0.7);
  border-radius: 4px;
}
.revision-jugada {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 55;
  width: min(420px, calc(100vw - 24px));
  padding: 10px 28px 10px 12px;
  border: 1px solid #7dd3fc;
  border-radius: 10px;
  background: rgba(17, 22, 29, 0.96);
  color: #e8e2d0;
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.revision-titulo { color: #7dd3fc; font-weight: 700; margin-bottom: 4px; }
.revision-que { margin-bottom: 4px; }
.revision-verde { color: #86efac; font-weight: 700; }
.revision-roja { color: #fca5a5; font-weight: 700; }
.revision-porque { color: #b9b3a3; margin-bottom: 6px; }
.revision-jugada .entrada-texto { width: 100%; box-sizing: border-box; }
.revision-pie { color: #928c7e; font-size: 0.7rem; margin-top: 6px; }
/* ── La pregunta del programa (preguntarAlUsuario en main.js) ──
   Sustituye al confirm del navegador, que salía con "localhost dice…" delante
   (27-9-2026). Va por encima de todo, menú incluido (125), porque desde el menú
   es de donde se pregunta. El fondo tapa la mesa para que se vea que hay algo
   que contestar, y pinchando en él se dice no. */
.aviso-fondo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 130;
}

.aviso {
  width: min(420px, 100%);
  padding: 16px 18px;
  border: 1px solid var(--cristal-claro);
  border-radius: 14px;
  background: #1c1a16;
  color: #f2e9dd;
  font-size: 0.82rem;
  line-height: 1.4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
}

.aviso-titulo {
  color: #ffd257;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}

.aviso-texto { color: #cfc7b8; }

.aviso-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

/* La pregunta de la pensada larga cuando juegas tú (main.js). Va en el centro
   y en rojo, del mismo color que la interrogación doble que la acompaña. */
.pregunta-larga {
  position: fixed;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(430px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid #ff8a5c;
  border-radius: 12px;
  background: rgba(30, 8, 4, 0.95);
  color: #f2e9dd;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.pregunta-larga-titulo {
  color: #ff8a5c;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 5px;
}
.pregunta-larga-botones {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.revision-cerrar {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: 0;
  color: #928c7e;
  font-size: 1.1rem;
  cursor: pointer;
}


/* ── Acuerdos de pareja ──
   Cada fila lleva su fiabilidad escrita y del color que le toca, el mismo con
   el que se van a pintar luego las fichas en la mesa. Así se lee el color
   antes de verlo en el panel y no hay que aprenderse una leyenda. */
.acuerdos { display: flex; flex-direction: column; }
.acuerdo + .acuerdo { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.acuerdo b { font-weight: 600; }
.acuerdo .grado { font-weight: 700; }
.acuerdo .grado.f75 { color: #eab308; }
.acuerdo .grado.f50 { color: #f97316; }
.acuerdo .grado.f25 { color: #ff3b3b; }

/* Los que están reservados y todavía no hacen nada: se enseñan para que se
   vea el sitio que ocupan, pero apagados y sin poder tocarse. */
.acuerdo.pendiente { opacity: 0.4; cursor: default; }

/* La cuenta de salidas: números cortos, y el pie en oro cuando el valor ya no
   es el del original. */
.cuenta-salidas .entrada-numero { min-width: 0; width: 64px; }
.acuerdo small.cambiado { color: var(--oro); }
#cuenta-salidas-original { margin-top: 8px; }

/* ── Guía ── */
.guia { font-size: 0.82rem; line-height: 1.5; }
.guia p { margin: 0 0 10px; color: #d8d2c2; }
.guia b { color: #f2ede0; }

.guia h4 {
  margin: 16px 0 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--oro);
}


/* Botón de guardar dentro de la libreta: en el título para la partida entera
   y junto al número de cada mano. Relleno cuando ya está guardada, de modo
   que la libreta hace además de índice de lo que se ha conservado. */
.libreta-guardar {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(58, 47, 26, 0.62);
  cursor: pointer;
}

.libreta-guardar:hover { color: #3a2f1a; }
.libreta-guardar.guardado { color: #1f7a44; }
.libreta-guardar.guardado:hover { color: #b03030; }

.contador-titulo { display: flex; align-items: center; justify-content: center; gap: 2px; }

/* Numero de mano y su boton, sin que el relleno se coma el sitio. */
.contador-num {
  white-space: nowrap;
  padding-right: 0 !important;
  overflow: visible !important;
}


/* Las manos de una partida guardada, desplegadas debajo de ella: una partida
   las guarda todas, asi que hay que poder sacar cualquiera y no solo la
   ultima. */
.guardada-manos {
  margin: 0 0 6px 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 8px;
}

.guardada-mano {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.guardada-mano-texto {
  flex: 1;
  min-width: 0;
  color: #b8b2a4;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Poner esta mano en la mesa, desde la libreta: es el indice natural de una
   partida guardada, mejor que una lista en el menú. */
.libreta-mesa {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(58, 47, 26, 0.62);
  cursor: pointer;
}

.libreta-mesa:hover:not(:disabled) { color: #1f5f8b; }

/* La que ya está puesta: marcada y sin nada que pulsar. */
.libreta-mesa.puesta { color: #1f5f8b; cursor: default; }

.libreta-guardar:disabled { cursor: default; }

/* La flecha de desplegar las manos de una partida guardada. */
.guardada-boton.desplegado svg { transform: rotate(180deg); }

/* ══ Laboratorio de condiciones (js/laboratorio.js) ═══════════════════════
   El reparto manual y el panel de probabilidades. Mismo lenguaje que el
   resto de la interfaz: cristal oscuro, oro para lo elegido. */

/* ── Reparto manual ── */
.lab-reparto {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.97);
  width: min(700px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #161618;
  border: 1px solid var(--cristal-claro);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  /* Por encima de todo lo de la mesa (lo más alto llega a 100). */
  z-index: 112;
}

/* Su oscurecido tapa también el panel de probabilidades: mientras se reparte,
   solo se toca el reparto. */
#lab-reparto-fondo { z-index: 111; }

.lab-reparto.abierto {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.lab-reparto-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px 14px;
  color: #e8e2d0;
  font-size: 0.8rem;
}

.lab-ayuda { margin: 0 0 10px; color: #b9b3a3; font-size: 0.74rem; }

.lab-reparto-contenido { display: flex; gap: 18px; align-items: flex-start; }

/* El montón, en el mismo triángulo que el panel de posibles. */
.lab-monton { display: flex; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.lab-monton-columna { display: flex; flex-direction: column; gap: 3px; }

.lab-ficha {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  border-radius: 3px;
  cursor: pointer;
}

.lab-ficha img { display: block; width: 22px; height: 44px; border-radius: 3px; }
.lab-ficha:hover img { outline: 2px solid var(--oro); outline-offset: 1px; }

/* Ya dada: se apaga y lleva encima la inicial de su sitio. */
.lab-ficha.dada img { opacity: 0.28; }

.lab-ficha-marca {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--oro);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 2px #000;
}

.lab-sitios { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.lab-sitio {
  padding: 6px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
}

.lab-sitio:hover { background: rgba(255, 255, 255, 0.04); }

/* El sitio al que van las fichas que se pinchen. */
.lab-sitio.destino { border-color: var(--oro); background: rgba(255, 210, 87, 0.07); }

.lab-sitio-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }

.lab-sitio-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #f2ede0;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-sitio-cuenta { color: #928c7e; font-variant-numeric: tabular-nums; }
.lab-sitio-cuenta.completa { color: #34d399; }

.lab-sitio-modo {
  max-width: 96px;
  padding: 1px 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8e2d0;
  font-size: 0.72rem;
}

.lab-sitio-modo option { color: #111; }

.lab-sale {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #b9b3a3;
  font-size: 0.7rem;
  white-space: nowrap;
  cursor: pointer;
}

.lab-sale.elegido { border-color: var(--oro); background: var(--oro); color: #201a00; }

.lab-sitio-fichas { display: flex; flex-wrap: wrap; gap: 3px; min-height: 44px; }
.lab-sitio-fichas img { width: 22px; height: 44px; border-radius: 3px; cursor: pointer; }
.lab-sitio-fichas img:hover { outline: 2px solid #f87171; outline-offset: 1px; }

.lab-hueco { width: 22px; height: 44px; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 3px; }

.lab-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lab-pie-estado { flex: 1; color: #b9b3a3; font-size: 0.74rem; text-align: right; }

.lab-boton {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8e2d0;
  font-size: 0.78rem;
  cursor: pointer;
}

.lab-boton:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.lab-boton.principal { border-color: var(--oro); background: var(--oro); color: #201a00; }
.lab-boton.principal:hover:not(:disabled) { background: #ffdd75; }
.lab-boton:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Panel de probabilidades ── */
/* Arriba a la derecha de fábrica; se arrastra por la cabecera y se queda
   donde se deje (ver arrancarArrastreLab). */
.lab-prob {
  position: fixed;
  top: 58px;
  right: 10px;
  width: min(372px, 44vw);
  max-height: calc(100vh - 140px);
  display: none;
  flex-direction: column;
  background: #161618;
  border: 1px solid var(--cristal-claro);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: #e8e2d0;
  font-size: 0.74rem;
  z-index: 110;
}

.lab-prob.visible { display: flex; }
.lab-prob.arrastrando { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7); }

/* Con el menú abierto manda el menú: es donde está el interruptor, y el panel
   lo taparía entero. */
body:has(.cajon.abierto) .lab-prob { z-index: 45; }

.lab-prob-cabecera {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 8px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
}

.lab-prob.arrastrando .lab-prob-cabecera { cursor: grabbing; }

.lab-prob-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lab-prob-titulo { color: var(--oro); font-size: 0.82rem; font-weight: 700; }

.lab-prob-jugada {
  overflow: hidden;
  color: #f2ede0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-prob-opciones {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  color: #cfcabb;
  cursor: pointer;
}

.lab-prob-leyenda { margin-left: auto; color: #928c7e; font-size: 0.68rem; }

.lab-prob-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px; }

.lab-seccion {
  display: block;
  margin: 8px 2px 2px;
  color: var(--oro);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lab-nota { display: block; margin: 0 2px 5px; color: #928c7e; font-size: 0.66rem; line-height: 1.35; }

.lab-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.lab-tabla th {
  position: sticky;
  top: 0;
  padding: 3px 4px;
  background: #161618;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}

.lab-th-nombre { display: block; color: #f2ede0; font-size: 0.72rem; }
.lab-th-papel { display: block; color: #928c7e; font-size: 0.6rem; font-weight: 600; }

.lab-tabla td { padding: 3px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }

.lab-etiqueta { width: 1%; }
.lab-palo { display: inline-block; min-width: 14px; color: #f2ede0; font-size: 0.86rem; font-weight: 800; }
.lab-palo-fuera { margin-left: 4px; color: #928c7e; font-size: 0.62rem; }
.lab-mini { display: inline-block; width: 30px; height: 15px; border-radius: 2px; vertical-align: middle; }
.lab-mini-texto { margin-left: 4px; color: #cfcabb; font-size: 0.66rem; vertical-align: middle; }

.lab-antes { color: #8a8475; font-size: 0.66rem; }
.lab-ahora { color: #f2ede0; font-weight: 700; }
.lab-ahora.apagado { color: #57534e; }
.lab-abajo { color: #928c7e; font-size: 0.64rem; }
.lab-real { color: #34d399; font-weight: 700; }

.lab-delta { margin-left: 3px; font-size: 0.64rem; font-weight: 700; }
.lab-delta.sube { color: #4ade80; }
.lab-delta.baja { color: #f87171; }

/* El número toma el color de lo que es, igual que en las fichas posibles. */
.lab-celda.segura .lab-ahora { color: #4ade80; }
/* Posibles estimadas: para él o para otro, en lima como en los paneles. */
.lab-celda.estimada .lab-ahora { color: #a3e635; }
.lab-celda.descartada.estimada .lab-ahora { color: #65743f; }
.lab-celda.descartada .lab-ahora { color: #6b665c; }
.lab-celda.probable .lab-ahora,
.lab-celda.improbable .lab-ahora { color: #fde047; }

/* Con las cuatro manos a la vista: quién la tiene de verdad. */
.lab-celda.la-tiene { border-radius: 4px; box-shadow: inset 0 0 0 1.5px #34d399; }

/* ── Corregir tu MicaMi desde la mesa (21-9-2026) ─────────────────────────
   El anillo MORADO es lo que elegiría con el borrador; va por fuera, con
   outline, para que se vea a la vez que el verde y el azul. */
.ficha.borrador {
  outline: 3px dashed #e879f9;
  outline-offset: 3px;
}

/* La ventana se mueve por la cabecera y, corrigiendo, no tapa la mesa. */
.argumento .cajon-cabecera { cursor: move; user-select: none; }
.argumento.movida,
.argumento.movida.abierto { transform: none; }
.argumento.corrigiendo { width: min(540px, 94vw); max-height: 88vh; }

.correccion { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 8px; }

.correccion-marcador { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.correccion-marcador th { text-align: left; color: #928c7e; font-weight: 600; font-size: 0.7rem; padding: 2px 6px; }
.correccion-marcador th + th,
.correccion-marcador td + td { text-align: right; width: 4.5rem; }
.correccion-marcador td { padding: 3px 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; }
.correccion-marcador tr:hover td { background: rgba(255, 255, 255, 0.06); }
.correccion-marcador tr.esta td { font-weight: 700; color: #f2ede0; }
.correccion-marcador tr.la-de-hoy td:first-child { color: #34d399; }
.correccion-marcador tr.la-del-borrador td:last-child { color: #e879f9; font-weight: 700; }

.correccion-leyenda,
.correccion-nota { font-size: 0.72rem; color: #928c7e; }
.correccion-aviso {
  font-size: 0.76rem;
  padding: 6px 8px;
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 4px;
}
.correccion-bien {
  font-size: 0.76rem;
  padding: 6px 8px;
  border-left: 3px solid #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
}

.correccion-botones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.correccion-titulo { font-weight: 700; color: #f2ede0; font-size: 0.85rem; }
.correccion-subtitulo { font-weight: 600; color: #e8e2d0; font-size: 0.78rem; margin-bottom: 3px; }

.correccion-propuestas { display: flex; flex-direction: column; gap: 8px; }
.correccion-datos,
.correccion-propuesta,
.correccion-borrador {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.correccion-borrador { border-color: rgba(232, 121, 249, 0.45); }
.correccion-propuesta.ejemplo { border-style: dashed; }
.correccion-propuesta .boton-menor { align-self: flex-start; }
.correccion-cambio b { color: #928c7e; margin-right: 2px; }
.correccion-cambio small { color: #928c7e; }
.correccion-condicion { color: #cfc8b6; }
.correccion-efecto { color: #86efac; }
.correccion-efecto.pierde { color: #fca5a5; }
.correccion-perdidas summary { cursor: pointer; color: #cfc8b6; }
.correccion-perdidas div { color: #928c7e; padding-left: 10px; }

.peso-botones { display: inline-flex; gap: 2px; margin-left: 4px; }
.peso-boton {
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid rgba(232, 121, 249, 0.5);
  border-radius: 4px;
  background: rgba(232, 121, 249, 0.1);
  color: #f5d0fe;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.peso-boton:hover { background: rgba(232, 121, 249, 0.25); }