/* MiSiniestro · panel de paletas de estación («Panel de llegadas»). Es la pieza oscura de arriba de cada pantalla:
   negro mate en marco de acero, letras blancas condensadas en celdas con la ranura central y el piloto naranja para
   lo que pasa ahora. Solo da la noticia; lo que hay que leer va debajo, en claro (.lectura). */

.tablero {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem .625rem .5rem;
  /* Marco de acero de 10 px (con el canto inferior más claro) alrededor del fondo mate del panel. */
  border: 10px solid transparent;
  border-bottom-width: 14px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(to top, var(--acero-claro) 4px, transparent 4px) border-box,
    linear-gradient(var(--acero), var(--acero-oscuro)) border-box;
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(0, 0, 0, .8);
  color: var(--letra-panel);
}

.tablero-etiqueta {
  margin: 0 .125rem;
  font-family: var(--fuente-panel);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--letra-panel-suave);
}

/* ---------- Paletas: una celda por carácter; las palabras no se parten, la línea sí entre ellas ---------- */
.paletas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .18em .3em;
  font-family: var(--fuente-panel);
  font-weight: 700;
  /* Con la letra muy ampliada la celda no pasa del 9 % del ancho: así una palabra larga (PS-26-04817) cabe en
     360 px; a tamaño normal manda --paleta. */
  font-size: min(var(--paleta), 9vw);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.paletas-grande {
  font-size: min(var(--paleta-grande), 11vw);
}

.paletas-palabra {
  display: inline-flex;
  flex-wrap: wrap; /* último recurso: una palabra que aun así no quepa se parte, nunca se recorta */
  gap: .08em;
  max-width: 100%;
  perspective: 12em;
}

.paleta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .7em;
  height: 1.3em;
  padding: 0 .04em;
  border-radius: 2px;
  background: linear-gradient(var(--paleta-arriba) 0 calc(50% - 1px), var(--ranura) calc(50% - 1px) calc(50% + 1px), var(--paleta-abajo) calc(50% + 1px));
  box-shadow: 0 1px 0 #2A2A2A, 0 2px 3px rgba(0, 0, 0, .6);
  color: var(--letra-panel);
  text-transform: uppercase;
  transform-origin: 50% 50%;
}

.paleta-piloto {
  color: var(--naranja);
}

/* Giro de una celda: se pliega sobre la ranura, cambia de letra a mitad y vuelve (180 ms, ver ui/panel.js). */
.paleta.girando {
  animation: paleta-giro 180ms var(--salida);
}

@keyframes paleta-giro {
  0% {
    transform: rotateX(0);
  }

  50% {
    transform: rotateX(-88deg);
    filter: brightness(1.8);
  }

  100% {
    transform: rotateX(0);
  }
}

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

/* ---------- Filas: «GREMIO · NOMBRE — ESTADO». Con la letra ampliada el estado baja a una segunda línea ---------- */
.fila-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .125rem 1rem;
  margin: 0;
  padding: .5rem .125rem;
  border-top: 1px solid var(--linea-panel);
  font-family: var(--fuente-panel);
  font-weight: 600;
  font-size: var(--fila-panel);
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--letra-panel);
}

.tablero-etiqueta + .fila-panel {
  border-top: 0;
}

.fila-izq {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fila-der {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.estado-hecho .fila-der,
.estado-terminada .fila-der {
  color: var(--hecho);
}

.estado-pendiente .fila-der,
.estado-prevista .fila-der {
  color: var(--pendiente);
}

.estado-cancelado .fila-der {
  color: var(--cancelado);
}

.estado-hoy .fila-der,
.estado-en-camino .fila-der,
.estado-en-casa .fila-der {
  color: var(--ahora);
}

/* Piloto encendido junto a lo que pasa ahora: una lámpara, no solo el color de la letra. */
.estado-hoy .fila-der::before,
.estado-en-camino .fila-der::before,
.estado-en-casa .fila-der::before {
  content: '';
  width: .5em;
  height: .5em;
  flex: none;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 2px rgba(255, 115, 0, .25), 0 0 6px 1px rgba(255, 115, 0, .55);
}

.estado-cancelado .fila-izq {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--letra-panel-suave);
}

/* Palabra del estado de la fila de Hoy en paletas pequeñas (giran al cambiar el estado). Llevan el color del estado. */
.fila-der .paletas-fila {
  font-size: 1em;
  gap: .1em .25em;
}

.fila-der .paletas-fila .paleta {
  color: inherit;
}