/* ==========================================================================
   SHELL — la franja, el escenario de una columna y el acompañante
   (fase T1; reescrito en FASE V, V2-C — PLAN.md §V.4)

   La franja arriba (≤ 64 px), el escenario con UNA pieza a la vista (~720 px,
   centrado) y, desde 1180 px, un solo panel al costado: el acompañante. Lo
   demás vive en los cuartos (estilos/cuartos.css). Salieron los dos rieles,
   la topbar y el ticker.
   ========================================================================== */

/* T0 dejaba el padding en `body` para centrar el `.panel` único de antes.
   El shell es full-bleed (la franja va a sangre) y cada zona pone su propio
   padding — si `body` sigue sumando el suyo, todo queda corrido. */
body { padding: 0; }

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- La franja (FASE V, V2-C; PLAN.md §V.4) ------------------------------
   Reemplaza a la topbar. ≤ 64 px en el escritorio; en el celular, dos líneas
   y la barra de cuartos abajo, fija. La llena `src/ui/franja.js` desde la
   `vista`: mientras el relato cuenta un split, no cambia. */

.franja {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--franja-alto);
  padding: 0 var(--s-4);
  background-color: var(--bg-chrome);
  background-image: repeating-linear-gradient(
    0deg,
    var(--scanline) 0 1px,
    transparent 1px 3px
  );
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--ice-dim);
}

.franja-lockup {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}
.franja-monograma {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--bg-sunken);
  border: 1px solid var(--ice-dim);
  clip-path: var(--clip-corte-sm);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--ice);
}
/* El nombre del juego solo en el inicio: en la carrera, el lugar es de quién sos. */
.franja-nombre {
  display: none;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: var(--track-cartel);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.shell[data-pieza="inicio"] .franja-nombre { display: inline; }

.franja-estado {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
}
/* Las dos líneas de la franja (franja.js): en el escritorio y la tableta no existen (`display: contents`); en el celular
   son las dos filas de la franja (más abajo). */
.franja-linea { display: contents; }
.franja-quien,
.franja-org,
.franja-cuando {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex: 0 1 auto;
}
.franja-quien { color: var(--ink); flex-shrink: 0; max-width: 16em; }
.franja-org { flex-shrink: 2; }
.franja-quien .rol-marca { font-size: 16px; }
.franja-cuando { color: var(--ice); font-variant-numeric: tabular-nums; gap: 0; }
.franja-cuando .franja-texto { flex: 0 1 auto; }
.franja-cuando .franja-ventana { white-space: pre; }
.franja-pips { margin-left: var(--s-2); }
.franja-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.franja-pips { display: flex; gap: 4px; flex: 0 0 auto; }
.franja-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.franja-pip--hecho { background: var(--ink-dim); }
.franja-pip--actual {
  background: var(--live);
  box-shadow: 0 0 6px var(--live-glow);
}

/* El número: el nivel con su banda (en el amateur, el rango) y cuánto se movió en este split. */
.franja-nivel {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex: 0 0 auto;
  margin-left: auto;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  clip-path: var(--clip-corte-sm);
  background: var(--bg-sunken);
}
.franja-nivel-numero {
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.franja-nivel[data-banda="prospecto"] .franja-nivel-numero { color: var(--nivel-prospecto); }
.franja-nivel[data-banda="titular"] .franja-nivel-numero { color: var(--nivel-titular); }
.franja-nivel[data-banda="elite"] .franja-nivel-numero { color: var(--nivel-elite); }
.franja-nivel[data-banda="clase_mundial"] .franja-nivel-numero { color: var(--nivel-clase_mundial); }
.franja-nivel-banda { font-size: var(--fs-1); color: var(--ink-dim); }
.franja-ventana-corta { display: none; }
.franja-nivel-pico { font-size: var(--fs-0); letter-spacing: var(--track-label); color: var(--ink-mute); }
.franja-nivel-rango { color: var(--ink); font-variant-numeric: tabular-nums; }
.franja-delta { font-size: var(--fs-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.franja-delta--sube { color: var(--up); }
.franja-delta--baja { color: var(--down); }

.franja-controles { display: flex; gap: var(--s-2); flex: 0 0 auto; margin-left: auto; }
.franja-estado:not(:empty) ~ .franja-controles { margin-left: 0; }
.franja-toggle {
  display: grid;
  place-items: center;
  min-width: 40px;
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-3);
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  clip-path: var(--clip-corte-sm);
  border-radius: 0;
}
.franja-toggle:hover:not(:disabled) {
  background: var(--live-fill);
  border-color: var(--live);
  color: var(--live);
  box-shadow: none;
}
.franja-toggle[aria-pressed="true"] {
  border-color: var(--live);
  color: var(--live);
}
/* Inertes hasta que cargan los módulos: que se vean apagados, no rotos. */
.franja-toggle:disabled { opacity: 0.3; cursor: default; }

/* Entre 900 y 1279 px la barra de cuartos come lugar: el club queda en su chip (el nombre, en su `title`), sin pips ni
   nombre de la banda (el color la dice), y la ayuda se abre con `?`. */
@media (min-width: 900px) and (max-width: 1279px) {
  .franja { gap: var(--s-3); }
  .franja-estado { gap: var(--s-3); }
  .franja-org .org-chip + .franja-texto,
  .franja-pips,
  .franja-nivel-banda,
  #ayudaTeclas { display: none; }
}

/* El celular y la tableta: dos líneas. Arriba quién sos y tu número; abajo tu club y cuándo. */
@media (max-width: 899px) {
  .franja {
    height: auto;
    min-height: var(--franja-alto);
    gap: var(--s-3);
    padding: var(--s-1) var(--s-3);
  }
  .franja-estado {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas:
      "quien quien nivel"
      "org cuando cuando";
    align-items: center;
    column-gap: var(--s-3);
    row-gap: 2px;
  }
  .franja-quien { grid-area: quien; }
  .franja-org { grid-area: org; font-size: var(--fs-1); }
  .franja-cuando { grid-area: cuando; font-size: var(--fs-1); }
  .franja-nivel { grid-area: nivel; margin-left: 0; justify-self: end; padding: 2px var(--s-2); }
  .franja-nivel-numero { font-size: var(--fs-4); }
}
@media (max-width: 639px) {
  /* En la carrera, el lugar del monograma es de quién sos (en el inicio sigue el lockup entero). */
  .shell:not([data-pieza="inicio"]) .franja-lockup { display: none; }
  .franja-nivel-banda,
  .franja-pips { display: none; }
  .franja-ventana-larga { display: none; }
  .franja-ventana-corta { display: inline; }
  .franja-toggle { min-width: 36px; padding: var(--s-1) var(--s-2); }

  /* Dos filas. Arriba, quién sos (handle de hasta 16 caracteres · rol) y los controles; abajo, el club, el momento y tu
     número, que ocupa todo el ancho: ahí el club y la edad no se cortan, y lo único que se acorta es la ventana ("Temporada
     regular") y, si el club es larguísimo, su nombre. Antes los controles y la caja del nivel con el ▲ le dejaban al
     handle ~120 px y salía "WWW…". */
  .franja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "arriba controles"
      "abajo abajo";
    align-items: center;
    column-gap: var(--s-2);
    row-gap: 2px;
  }
  .franja-lockup { grid-area: arriba; }
  .franja-estado { display: contents; }
  .franja-controles { grid-area: controles; margin-left: 0; }
  .franja-linea {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .franja-linea--1 { grid-area: arriba; }
  .franja-linea--2 { grid-area: abajo; }
  .franja-linea--1 .franja-quien { max-width: none; flex: 0 1 auto; }
  /* El renglón de abajo reparte el lugar así: la edad y el año y tu número no se achican; si falta lugar se achica primero
     la ventana (shrink 100, hasta "…"). El club no se achica salvo que sea larguísimo (tope: 62% del ancho). `.franja-cuando` se deshace para que la edad y
     la ventana sean ítems del mismo renglón. */
  .franja-linea--2 .franja-cuando { display: contents; font-size: var(--fs-1); }
  .franja-linea--2 .franja-org { flex: 0 0 auto; max-width: 62%; margin-right: var(--s-3); font-size: var(--fs-1); }
  .franja-linea--2 .franja-cuando .franja-texto { flex: 0 0 auto; font-size: var(--fs-1); color: var(--ice); }
  .franja-linea--2 .franja-cuando .franja-ventana { flex: 0 100 auto; margin-right: var(--s-3); }
  .franja-linea--2 .franja-nivel { margin-left: auto; padding: 2px var(--s-2); }
  .franja-linea--2 .franja-nivel { gap: var(--s-1); }
  .franja-linea--2 .franja-nivel-numero { font-size: var(--fs-4); }
  .franja-linea--2 .franja-nivel-rango { font-size: var(--fs-1); }
  .franja-linea--2 .franja-nivel-rango + .franja-delta { font-size: var(--fs-0); }
}

/* --- El cuerpo: el escenario y el acompañante (V2-C) -----------------------
   Una columna de ~720 px, centrada, con UNA pieza a la vista. Desde 1180 px
   se le suma un solo panel al costado (el acompañante) cuando la pieza tiene
   contexto; sin él (`[hidden]`), el escenario queda centrado solo. Flex y no
   grilla: sin `:has()` ni columnas fantasma (antes, tres columnas de 260 |
   1fr | 280 dejaban el escenario en ~264 px entre 900 y 1179 px: D88). */

.shell-cuerpo {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5);
}

.escenario {
  flex: 0 1 var(--escenario-columna);
  min-width: 0;
  max-width: var(--escenario-columna);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
/* El inicio (el draft) es un formulario ancho: no es una parada, no se rediseña acá. */
.shell[data-pieza="inicio"] .escenario {
  flex-basis: var(--escenario-inicio);
  max-width: var(--escenario-inicio);
}
/* `#setup`/`#carrera` traen su propio `.panel` (chaflán, sombra); acá solo
   se les saca el centrado de 1080px que tenía sentido cuando `.panel` era
   el único contenedor de la página entera — ahora el ancho lo da la
   columna. Especificidad natural por anidamiento, sin !important. */
.escenario .panel { max-width: none; margin: 0; }

/* El acompañante: solo existe a la vista desde 1180 px (el corte de siempre),
   pegado bajo la franja mientras el escenario corre. */
.acompanante { display: none; }
@media (min-width: 1180px) {
  .acompanante {
    flex: 0 0 var(--acompanante-ancho);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: sticky;
    top: calc(var(--franja-alto-real, var(--franja-alto)) + var(--s-5));
    max-height: calc(100vh - var(--franja-alto-real, var(--franja-alto)) - 2 * var(--s-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- Las piezas del escenario (FASE V, V2-B; PLAN.md §V.4) ---------------
   `.shell[data-pieza]` lo escribe solo el director (src/ui/escena.js); cada
   nodo del escenario dice en qué piezas se ve (`data-piezas` en index.html).
   Una regla por pieza esconde lo que no es suyo, sin pisar el `display` de lo
   que sí: el `hidden` propio de cada renderer sigue mandando por
   `[hidden] { display: none !important }` (base.css). Reemplaza a los `hidden`
   que app.js prendía y apagaba panel por panel. */
.shell[data-pieza="inicio"] .escenario [data-piezas]:not([data-piezas~="inicio"]),
.shell[data-pieza="relato"] .escenario [data-piezas]:not([data-piezas~="relato"]),
.shell[data-pieza="decision"] .escenario [data-piezas]:not([data-piezas~="decision"]),
.shell[data-pieza="partido"] .escenario [data-piezas]:not([data-piezas~="partido"]),
.shell[data-pieza="mercado"] .escenario [data-piezas]:not([data-piezas~="mercado"]),
.shell[data-pieza="minijuego"] .escenario [data-piezas]:not([data-piezas~="minijuego"]),
.shell[data-pieza="final"] .escenario [data-piezas]:not([data-piezas~="final"]) { display: none; }

/* Luz de estudio: pisa `--horizon` del body (base.css lo consume). */
body[data-fase="amateur"] { --horizon: var(--horizon-amateur); }
body[data-ventana="playoffs"],
body[data-ventana="internacional"],
body[data-serie="on"] { --horizon: var(--gold-horizon); }
body[data-peligro="on"] { --horizon: var(--danger-horizon); }

/* La final (antes `body[data-legado="on"]`): la tarjeta sola, centrada. El
   feed y el marcador no son parte de la pieza (`data-piezas`). */
.shell[data-pieza="final"] .tarjeta { margin-top: 0; }

/* ==========================================================================
   Breakpoints. `tokens.css` reajusta las medidas que son token en estos
   mismos cortes; acá solo cambia la estructura (la de la franja y la barra
   de cuartos está en su sección y en cuartos.css).
   ========================================================================== */

@media (max-width: 899px) {
  .shell-cuerpo { padding: var(--s-4); gap: var(--s-4); }
}

@media (max-width: 639px) {
  .shell-cuerpo { padding: var(--s-3); }
  .escenario .panel { padding: var(--s-5) var(--s-4); }
}