/* ============================================================================
   ESCALERA EMPRENDEDORA — CAPA DE MEJORA VISUAL Y BLINDAJE (2026-09-28)
   ----------------------------------------------------------------------------
   Se carga DESPUES de styles.css. Enriquecer, nunca reemplazar.

   Incluye:
     1) Z-INDEX EXPLICITO en los 3 modales  ← corrige la fragilidad que causo
        el bug del 2026-09-28 (questionModal quedaba sin `hidden` y tapaba el
        boton del dado, porque los modales tenian z-index:auto y competian).
     2) IDENTIDAD de la marca real (NEUROCONECTA): azul marino del logo, cian,
        y dorado como acento de valor.
     3) DETALLES LINDOS: superficies con mas profundidad, tipografia cuidada,
        micro-interacciones y responsive para tablet/celular (es juego de aula).
   ============================================================================ */

/* ══════════════ 1 · PALETA E IDENTIDAD (colores del logo) ══════════════ */

:root {
  /* Paleta NEUROCONECTA — extraida del logo real por muestreo de saturacion */
  --nc-azul: #002040;        /* color dominante del logo */
  --nc-azul-h: #001030;      /* sombra mas honda */
  --nc-azul-medio: #14507a;
  --nc-cian: #2090a0;        /* "NEUROCONECTA" y la mascota */
  --nc-cian-claro: #e2f4f7;
  --nc-oro: #d4a017;         /* valor, logro */
  --nc-oro-claro: #f7dfa0;
  --nc-verde: #2b7a2b;
  --nc-rojo: #c7241e;
  --nc-blanco: #ffffff;

  /* Pisos de los modales, de menor a mayor. Explicitos para que NUNCA
     compitan entre si (esa fue la causa raiz en tira-separa-gana).
     OJO: al añadir un modal NUEVO hay que darle su piso aqui Y en la regla
     de abajo. Si se olvida queda con z-index:auto y el tablero se le cruza. */
  --z-modal-jugadores: 900;
  --z-modal-pregunta: 1000;
  --z-modal-reporte: 1001;
  --z-modal-llegada: 1002;
}

/* Fondo con los colores de la marca (mas profundo y elegante) */
body {
  background:
    radial-gradient(1200px 700px at 4% 8%, rgba(32, 144, 160, .40) 0%, rgba(32, 144, 160, 0) 55%),
    radial-gradient(1000px 600px at 96% 92%, rgba(212, 160, 23, .26) 0%, rgba(212, 160, 23, 0) 52%),
    linear-gradient(155deg, var(--nc-azul-h) 0%, var(--nc-azul) 48%, #0a2b45 100%);
  background-attachment: fixed;
}

/* ══════════════ 2 · BLINDAJE DE MODALES (la correccion del bug) ══════════════ */

/* Cada modal tiene SU piso. Asi, aunque dos se abrieran a la vez, el orden es
   predecible y no hay empate de z-index (que fue la causa raiz en
   tira-separa-gana y la fragilidad detectada aqui).
   OJO: al añadir un modal NUEVO (como el de jugadores) hay que darle su piso
   aqui. Si se olvida queda con z-index: auto y el tablero se le atraviesa. */
#jugadoresModal   { z-index: var(--z-modal-jugadores); }
#questionModal    { z-index: var(--z-modal-pregunta); }
#reportModal      { z-index: var(--z-modal-reporte); }
#arrivalChoiceModal { z-index: var(--z-modal-llegada); }

/* El velo tiene que ser OPACO de verdad. Con .45 el tablero se veia por
   debajo y competia con el texto: la pregunta no se leia con claridad. */
.modal {
  background: rgba(3, 14, 26, .82) !important;
  backdrop-filter: blur(3px);
}

/* Con un modal abierto, la pagina de atras no debe poder desplazarse: si no,
   aparece la barra de scroll del navegador al lado de la tarjeta y da la
   sensacion de que el juego esta a medias. El juego es de UNA pantalla. */
body:has(.modal:not(.hidden)) {
  overflow: hidden;
}

/* Barra de scroll discreta y de la marca (para cuando SI haga falta). */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 144, 160, .65) transparent;
}

/* Aunque JS fallara y un modal quedara sin `hidden`, el velo no debe comerse
   los clics del HUD indefinidamente: el modal solo captura cuando esta visible
   de verdad. `.hidden` sigue siendo el mecanismo principal. */
.modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Los modales de contenido (pregunta y llegada) NO deben cerrarse al hacer clic
   fuera, para no perder la pregunta por un toque accidental en el celular.
   El de reporte si, porque es solo lectura. */
#reportModal { cursor: pointer; }
#reportModal .modal-card { cursor: auto; }

/* ══════════════ 3 · SUPERFICIES CON PROFUNDIDAD ══════════════ */

.panel-jugador,
.barra-turno {
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s cubic-bezier(.22, .61, .36, 1),
              border-color .3s ease;
}

.panel-jugador:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 144, 160, .75);
  box-shadow: 0 16px 38px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(32, 144, 160, .35);
}

/* El titulo del tablero: acento cian y oro del logo */
.tablero-titulo {
  background: linear-gradient(135deg, #ffffff 0%, var(--nc-cian-claro) 55%, var(--nc-oro-claro) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brillo-titulo 8s linear infinite;
  letter-spacing: .01em;
}

@keyframes brillo-titulo {
  to { background-position: 200% center; }
}

/* ══════════════ 4 · DINERO Y ESTADO (jerarquia clara) ══════════════ */

.panel-jugador {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pj-dinero {
  font-family: "Baloo 2", cursive;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.pj-etiqueta {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .74;
  margin-top: 2px;
}

.pj-select {
  font-size: .9rem;
  padding: .35rem .55rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .95);
  color: var(--nc-azul);
  font-weight: 600;
  max-width: 100%;
}

.pj-casilla {
  font-size: .8rem;
  opacity: .84;
  line-height: 1.3;
}

.pj-dinero.subiendo, .money.subiendo { animation: pulso-dinero .6s ease; }

@keyframes pulso-dinero {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ══════════════ 5 · TABLERO: mas presencia y contraste ══════════════ */

.board {
  border-radius: 18px;
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .85),
              inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: box-shadow .4s ease;
}

/* LEGIBILIDAD (problema medido 2026-09-28):
   los numeros de casilla estaban a 8.96px de fuente y peso 400 -> ilegibles,
   y encima las escaleras (opacidad .95) tapaban el numero.
   Se sube el tamano, se pone en negrita y se sube el contraste del texto. */
.board > *:not(.overlay) {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0d2138 !important;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .22s ease;
}

/* Casilla bajo el cursor: se ilumina (invita a explorar el tablero) */
.board > *:not(.overlay):hover {
  transform: scale(1.06);
  z-index: 3;
  box-shadow: 0 0 0 2px var(--nc-cian), 0 8px 18px -8px rgba(32, 144, 160, .9);
}

/* Las ESCALERAS bajan de opacidad para NO tapar los numeros.
   Siguen viendose (son parte del atractivo) pero dejan leer el tablero. */
#ladderLayer img {
  opacity: .68 !important;
  z-index: 2;   /* por debajo del hover de casilla (z:3), encima del tablero */
  transition: opacity .3s ease;
}

/* Si el jugador quiere verlas con todo detalle, se avivan al pasar el mouse */
#ladderLayer:hover img { opacity: .92 !important; }

/* Las fichas SIEMPRE por encima de todo (hay que ver donde esta cada quien) */
.token-layer {
  z-index: 4 !important;
}

/* ══════════════ 6 · BOTONES CON VIDA ══════════════ */

.roll-btn,
.secondary-btn,
.option-btn,
.arrival-actions button {
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .3s ease,
              background .3s ease,
              border-color .3s ease;
}

/* Destello que cruza el boton al pasar el mouse */
.roll-btn::after,
.secondary-btn::after,
.option-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .7s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.roll-btn:hover::after,
.secondary-btn:hover::after,
.option-btn:hover::after { left: 145%; }

.roll-btn:hover:not(:disabled),
.secondary-btn:hover,
.option-btn:hover,
.arrival-actions button:hover {
  transform: translateY(-3px) scale(1.02);
}

/* El boton del dado es la accion principal: acento cian del logo y glow */
.roll-btn {
  background: linear-gradient(135deg, var(--nc-cian) 0%, #1a7c8a 100%);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 10px 26px -12px rgba(32, 144, 160, .9);
}

.roll-btn:hover:not(:disabled) {
  box-shadow: 0 16px 38px -14px rgba(32, 144, 160, 1), 0 0 0 4px rgba(32, 144, 160, .20);
}

/* Cuando esta DESHABILITADO debe verse claramente inactivo (evita confusion) */
.roll-btn:disabled {
  filter: grayscale(.55) brightness(.75);
  cursor: not-allowed;
}

/* ══════════════ 7 · OPCIONES DE RESPUESTA (lo mas usado del juego) ══════════════ */

.option-btn {
  text-align: left;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #eef5fb);
  border: 1.5px solid rgba(0, 32, 64, .16);
  color: var(--nc-azul);
  font-weight: 600;
  box-shadow: 0 4px 12px -6px rgba(0, 32, 64, .35);
}

.option-btn:hover {
  background: linear-gradient(160deg, var(--nc-cian-claro), #d3ecf2);
  border-color: var(--nc-cian);
  box-shadow: 0 12px 26px -10px rgba(32, 144, 160, .75);
  color: var(--nc-azul-h);
}

.option-btn:active { transform: translateY(-1px) scale(.995); }

/* ══════════════ 8 · TARJETA DE MODAL (legibilidad y aire) ══════════════ */

.modal-card {
  border-radius: 20px;
  border-top: 4px solid var(--nc-cian);
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .8),
              inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: entrar-modal .34s cubic-bezier(.22, .61, .36, 1);
}

@keyframes entrar-modal {
  from { transform: translateY(18px) scale(.97); }
  to   { transform: translateY(0) scale(1); }
}

.modal-card h2 {
  color: var(--nc-azul);
  line-height: 1.22;
}

/* El texto de la pregunta: es lo que el jugador DEBE leer primero */
#questionText,
#arrivalChoiceText {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #24323f;
}

/* El aviso de consecuencia (fallar = retroceder) en tono ambar, no rojo:
   informa sin alarmar. */
#questionHint,
#arrivalChoiceText + * {
  color: #8a6208;
  background: #fdf6e3;
  border-left: 3px solid var(--nc-oro);
  border-radius: 0 10px 10px 0;
  padding: .55rem .8rem;
  margin-top: .9rem;
}

/* ══════════════ 9 · ESCALERAS Y FICHAS (profundidad) ══════════════ */

#ladderLayer img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}

.token-layer > * {
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .6));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              filter .3s ease;
}

/* ══════════════ 10 · LOG Y REPORTE (legibilidad de datos) ══════════════ */

.log {
  font-size: .95rem;
  line-height: 1.5;
  border-radius: 12px;
}

.report-content {
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
  border-radius: 12px;
  background: #f2f6fb;
  border: 1px solid rgba(0, 32, 64, .12);
  color: #1d2a38;
}

/* ══════════════ 11 · FOCO VISIBLE (accesibilidad) ══════════════ */

button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--nc-oro);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ══════════════ 12 · MOVIMIENTO REDUCIDO (accesibilidad) ══════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════ 13 · RESPONSIVE (es juego de aula: tablet y celular) ══════════════ */

@media (max-width: 860px) {
  .app-shell { width: 96vw; margin: 10px auto 16px; gap: 10px; }

  /* El tablero deja de tener paneles al lado: pasan arriba, en dos columnas,
     y el tablero se queda con todo el ancho (sigue siendo lo mas grande). */
  .board { border-radius: 14px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }

  .panel-jugador { padding: 8px 10px; }
  .tablero-titulo { font-size: 1.05rem; }
  .pj-dinero { font-size: 1.2rem; }

  /* Controles mas grandes: se juega con el dedo */
  .roll-btn, .secondary-btn { flex: 1 1 auto; min-height: 48px; }
  .barra-turno { flex-wrap: wrap; gap: 8px; }

  /* En celular las opciones necesitan area tactil comoda */
  .option-btn {
    min-height: 52px;
    padding: .8rem .9rem;
    font-size: .97rem;
  }

  .modal { padding: 12px; }
  .modal-card { border-radius: 16px; padding: 14px; width: 100%; }
  .modal-card h2 { font-size: 1.1rem; }
  #questionText, #arrivalChoiceText { font-size: 1rem; }
}

@media (max-width: 420px) {
  .tablero-titulo { font-size: 1.1rem; }
  .pj-casilla { font-size: .78rem; }
  .pj-dinero { font-size: 1.05rem; }
}

/* ══════════════ 14 · PANTALLAS BAJAS (portatiles de aula) ══════════════ */

@media (max-height: 680px) {
  .app-shell { gap: 8px; margin-top: 6px; }
  .tablero-titulo { font-size: 1.05rem; }
  /* OJO: el tablero debe encogerse ENTERO (ancho y alto a la vez).
     Ponerle solo max-height lo APLASTA: el contenedor sigue cuadrado, el
     tablero queda a la mitad de alto, las casillas dejan de ser cuadradas y
     todo lo dibujado encima (escaleras, rodaderos, fichas) se estira
     deformado. Medido: 729x729 de contenedor con 729x356 de tablero.
     Con la disposición de 3 columnas, el propio `min(100%, 78vh)` del tablero
     ya respeta la altura; aquí solo se recorta el aire de los márgenes. */
  .zona-tablero { gap: 4px; }
}