/* ═══ Corsi ═════════════════════════════════════════════════════════════════
   Mismo criterio de corrección visual que TOL/WCST/SDMT/BTA/BS-D/Claves/PASAT/Span
   de Dígitos: .screen--center fija min-height:80vh, que con contenido más corto que
   eso deja el tablero "pegado" arriba con vacío debajo. */
.screen--corsi.screen--center { min-height: calc(100vh - 42px); }
.screen--corsi-mode.screen--center { min-height: calc(100vh - 42px); }
.screen--corsi { width: 100%; max-width: 820px; }

/* Tarjeta que contiene toda la tarea (chip + mensaje + tablero + zona de
   estacionamiento), mismo lenguaje visual que .pasat-panel/.span-panel, en vez de
   flotar directo sobre la pantalla. El tablero pasa de una pizarra oscura con
   bloques grises planos a un "pegboard" claro con fichas — coherente con el resto
   de la app en vez de una estética de juego aparte. */
.corsi-panel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
  padding: 28px 26px;
}
.corsi-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.corsi-msg { min-height: 1.35em; margin: 0 0 2px; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.corsi-board {
  position: relative; width: min(72vw, 720px); aspect-ratio: var(--corsi-ratio, 255 / 205);
  margin: 3px auto; overflow: hidden; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: inset 0 1px 3px rgba(15, 30, 45, .05);
  touch-action: none; user-select: none;
}
.corsi-block {
  position: absolute; box-sizing: border-box;
  background: var(--surface); border: 2px solid var(--ink-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(15, 30, 45, .1);
  cursor: default; touch-action: none; user-select: none;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .1s;
}
.corsi-board--response .corsi-block { cursor: pointer; }
.corsi-board--response .corsi-block:hover { border-color: var(--accent); }
.corsi-block.lit {
  background: var(--accent); border-color: var(--accent-dark);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 4px 14px rgba(37, 99, 165, .3);
}
.corsi-block.picked {
  background: var(--accent-dark); border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 10px rgba(37, 99, 165, .45);
  transform: scale(.96);
}
.corsi-board--presenting { cursor: none; }
.corsi-parking {
  width: min(72vw, 720px); min-height: 38px; margin: 3px auto 0; padding: 7px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.corsi-parking:hover { border-color: var(--accent); color: var(--ink); }

@media (max-width: 900px), (max-height: 650px) {
  .corsi-board, .corsi-parking { width: min(85vw, 600px); }
}

/* El tamaño de cada bloque se calcula en JS como % del tablero, a partir de
   milímetros físicos (blockStyle(), helpers/tests/corsi.js), sin chequeo de
   colisión entre bloques — agrandar el bloque en sí (como se intentó antes)
   hace que bloques ya cercanos en el layout físico se superpongan. En vez de
   eso, se agranda el tablero completo: como el tamaño de cada bloque es un %
   fijo del tablero, esto agranda todos los bloques a la vez sin tocar su
   posición relativa. 380px de ancho de tablero ya deja el bloque de 30mm en
   ~44px (30/255 × 380 ≈ 44.7px) — pero un min-width fijo puede superar el
   viewport en un celular angosto y sacar el tablero de los márgenes (bloques
   inalcanzables, un tablero espacial parcialmente fuera de pantalla no sirve
   aunque sea "scrolleable"). Se usa min(vw, 380px) en su lugar: nunca excede
   el ancho seguro, y se acerca a los 44px todo lo que la pantalla permita.
   Se recorta también el padding lateral del panel para recuperar espacio. */
@media (pointer: coarse), (hover: none) {
  .corsi-panel { padding-inline: 12px; }
  /* 100vw no alcanza solo: hay que descontar el padding fijo entre el borde
     de la pantalla y el tablero (24px×2 de .screen + 12px×2 del panel de
     arriba = 72px) o el board sigue calculando más ancho del que realmente
     cabe. */
  .corsi-board, .corsi-parking { width: min(calc(100vw - 72px), 380px); }
}