/* ======================================================================
   EL TERMINAL RENOVADO: base común de las piezas (tanda 0, 2026-11-04)
   ======================================================================
   Publicado para todos el 2026-11-05 (antes, sólo con la vista previa). El
   plan entero está en
   `terminal_plan.md` (§4 sistema visual, §4.6 tallas, §4.7 móvil); el contrato
   para las tandas 1–6, al final del mismo plan.

   Qué hay aquí, en este orden:
     1. Tokens nuevos (pista de barras, divisor, selector, series), en los dos
        temas. **Nunca un color suelto en una plantilla**: si falta uno, se
        añade aquí con su valor oscuro y claro.
     2. El marco de la pieza (`pieces/_frame.html`): cabecera, selector, pie,
        estados (vacío, cargando, aviso).
     3. Piezas sueltas para el cuerpo: cifra, chapa, barra con pista, leyenda,
        filas, sparkline con punto final.
     4. Tallas: lo que se enseña según el tamaño de **la pieza** (`@container
        pieza`), nunca de la ventana.
     5. El tablero: cortes por el ancho del tablero (`@container tablero`) y la
        lista del móvil, con las cajitas de dos en dos.
     6. La bandeja: miniatura de la talla y «View all» por apartado.

   Se mantienen nuestros colores (cian de acento, verde neón) y el radio 12
   frente a los ejemplos (decisión del 2026-11-04). */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* La pista de una barra: se distingue del fondo de la tarjeta (F10: con
     `--surface-sunken` la columna «Range» apenas se veía). */
  --track: #1f2836;
  /* El divisor entre filas, más suave que el borde de la tarjeta. */
  --tp-div: rgba(255, 255, 255, 0.055);
  /* El selector segmentado: el contenedor, el botón pulsado y su borde. */
  --seg-bg: #141b26;
  --seg-on: #232d3c;
  --seg-on-ring: rgba(255, 255, 255, 0.08);
  /* Las series de entidad (donuts, barras apiladas), en este orden: BTC,
     ETH, la tercera, la cuarta, la quinta y «el resto». */
  --series-1: #f7931a;
  --series-2: #7b93f0;
  --series-3: #2bb3c0;
  --series-4: #c084fc;
  --series-5: #f0b90b;
  --series-6: #8e99aa;
}
:root[data-theme="light"] {
  --track: #e8ecf1;
  --tp-div: #ebeef3;
  --seg-bg: #f1f4f8;
  --seg-on: #ffffff;
  --seg-on-ring: rgba(15, 23, 42, 0.10);
  --series-1: #d97706;
  --series-2: #5b6fd6;
  --series-3: #0e8a96;
  --series-4: #9333ea;
  --series-5: #b38600;
  --series-6: #6b7685;
}

/* --- 2. El marco -------------------------------------------------------- */
/* La pieza es una tarjeta, sin la banda de las cabeceras viejas: el título
   va dentro del relleno, como en los ejemplos. */
.widget.tp { border-radius: var(--radius); box-shadow: var(--sheen), var(--shadow); }
.widget.tp > header.tp-head {
  display: flex; align-items: center; gap: var(--s2); min-width: 0;
  padding: var(--s4) var(--s5) var(--s2); background: none;
  border: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.widget.tp > header .tp-title {
  font-size: var(--size-md); font-weight: 700; letter-spacing: -0.015em; color: var(--text);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Lo de la derecha de la cabecera: selector, leyenda o rótulo. */
.tp-ctx { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.tp-label {
  font-size: var(--size-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.tp-legend { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--size-2xs);
  color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.widget.tp > header .tools { margin-left: 0; }
.widget.tp > .tp-body { padding: var(--s2) var(--s5) var(--s4); flex: 1 1 auto; min-height: 0;
  overflow: auto; display: flex; flex-direction: column; gap: var(--s3); }
/* Con pie, el cuerpo no lleva relleno de abajo: lo pone el pie. */
.widget.tp > .tp-body:not(:last-child) { padding-bottom: var(--s2); }

/* El selector segmentado: la forma de `.psh-seg` (Presales), con sus tokens.
   Botones de 28 px de alto (guía §10), `aria-pressed`, teclado. */
.tp-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--seg-bg);
  border: 1px solid var(--tp-div); flex: none; }
.tp-seg button {
  font: inherit; font-size: var(--size-2xs); font-weight: 600; color: var(--text-muted);
  background: none; border: 0; border-radius: 7px; padding: 0 9px; min-height: 26px; min-width: 34px;
  cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tp-seg button:hover:not([disabled]) { color: var(--text); }
.tp-seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--text);
  box-shadow: 0 0 0 1px var(--seg-on-ring), 0 1px 2px rgb(0 0 0 / 14%); }
.tp-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Un rango sin datos todavía: tachado, desactivado y con su «we have N days
   so far» al pasar por encima (`title`). */
.tp-seg button[disabled] { color: var(--text-faint); text-decoration: line-through; cursor: not-allowed; opacity: .7; }
/* **El mismo selector con radios**, para lo que cambia sin pedir nada al
   servidor (pestañas, vistas, filtros: con `:has()` en la hoja de la tanda).
   Integración del 2026-11-04: las tandas 3–6 traían cada una su copia
   (`.t3-view`, `.t4-sw`, `.t5-tabs`, `.t6-seg`) y ahora todas son `.tp-seg`.
   Dos formas de marcarlo: `<label><input type="radio"><span>…</span></label>`
   o `<input type="radio" id><label for>…</label>`. El radio queda fuera de la
   vista pero en el orden del teclado. */
.tp-seg { text-transform: none; letter-spacing: 0; }
.tp-seg label { position: relative; display: inline-flex; cursor: pointer; }
.tp-seg input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tp-seg input[type="radio"] + label, .tp-seg label > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 26px; padding: 0 9px;
  border-radius: 7px; font-size: var(--size-2xs); font-weight: 600; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tp-seg input[type="radio"] + label:hover, .tp-seg label:hover > span { color: var(--text); }
.tp-seg input:checked + label, .tp-seg input:checked + span { background: var(--seg-on); color: var(--text);
  box-shadow: 0 0 0 1px var(--seg-on-ring), 0 1px 2px rgb(0 0 0 / 14%); }
.tp-seg input:focus-visible + label, .tp-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-seg input:disabled + span, .tp-seg input:disabled + label { color: var(--text-faint); opacity: .6; cursor: not-allowed; }

/* La variante de dos líneas (periodo y su variación), para el 01 Precio. */
.tp-seg.tp-seg-2 button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 36px; line-height: 1.15; padding: 2px 10px; }
.tp-seg.tp-seg-2 button small { font-size: var(--size-2xs); font-weight: 600; }

/* El pie: una línea gris de contexto y «View all →» a la derecha. */
.widget.tp > .tp-foot {
  display: flex; align-items: center; gap: var(--s3); min-width: 0;
  padding: var(--s2) var(--s5) var(--s4); font-size: var(--size-xs); color: var(--text-faint);
}
.tp-foot-ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-all { margin-left: auto; flex: none; color: var(--accent); font-weight: 600; font-size: var(--size-xs);
  white-space: nowrap; }
.tp-all:hover { text-decoration: underline; }

/* Vacío: centrado y apagado, con la razón cuando se sabe. */
.tp-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; color: var(--text-faint); font-size: var(--size-sm); padding: var(--s4) 0; }
.tp-empty b { font-weight: 600; color: var(--text-muted); }
.tp-empty span { font-size: var(--size-xs); max-width: 36ch; }

/* Cargando: el esqueleto con la forma de la pieza… */
.tp-skel { display: grid; gap: var(--s2); }
.tp-skel i { display: block; height: 12px; border-radius: 6px; background: var(--track);
  animation: tp-pulso 1.2s ease-in-out infinite; }
.tp-skel i:nth-child(2n) { width: 78%; }
.tp-skel i:nth-child(3n) { width: 56%; }
@keyframes tp-pulso { 50% { opacity: .45; } }
/* …y al cambiar de rango, la pieza **no se vacía**: se vela un poco y el
   selector sigue a mano. */
.widget.tp.tp-loading > .tp-body { opacity: .45; transition: opacity .15s; pointer-events: none; }
.widget.tp.tp-loading .tp-seg { cursor: progress; }
/* El aviso discreto si el cambio de rango no llega: se queda el anterior. */
.tp-note { font-size: var(--size-2xs); color: var(--down); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tp-skel i { animation: none; } }

/* --- 3. Piezas del cuerpo ----------------------------------------------- */
/* La cifra de la pieza: héroe en las grandes, más contenida en las pequeñas
   (ver tallas). Siempre con cifras de ancho fijo. */
.tp-fig { font-size: var(--size-xl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--text); font-variant-numeric: tabular-nums; }
.tp-fig.tp-hero { font-size: clamp(var(--size-xl), 9cqi, var(--size-3xl)); font-weight: 800; }
.tp-num { font-variant-numeric: tabular-nums; }
.tp-sub { font-size: var(--size-sm); color: var(--text-muted); }
.tp-faint { color: var(--text-faint); }

/* La chapa («LOWEST IN 30 DAYS», «MIXED SIGNALS», «HELPS»): fondo translúcido
   (variantes .up .down .warn .violet .accent; «violet» y no «info», que es la
   «i» de toda la web)
   sobre el color de su significado, nunca un hex. */
.tp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
  font-size: var(--size-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-muted); background: color-mix(in srgb, var(--text-faint) 14%, transparent); }
.tp-chip.up { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.tp-chip.down { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
.tp-chip.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tp-chip.violet { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.tp-chip.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }

/* La barra con su pista. `--v` es la parte llena, de 0 a 100. */
.tp-bar { position: relative; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 40px; }
.tp-bar > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); border-radius: inherit;
  background: var(--accent); }
.tp-bar.up > i { background: var(--up-fill); }
.tp-bar.down > i { background: var(--down); }
.tp-bar.violet > i { background: var(--info); }
/* La barra que crece desde el centro (subidas a la derecha, bajadas a la
   izquierda): `--v` de -100 a 100. */
.tp-bar.tp-bar-mid > i { left: 50%; width: calc(max(var(--v, 0), 0) * .5%); }
.tp-bar.tp-bar-mid.down > i { left: auto; right: 50%; width: calc(max(-1 * var(--v, 0), 0) * .5%); }

/* La leyenda: una muestra de color y su nombre. Las series, con `--series-N`. */
.tp-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tp-key::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--accent)); }
.tp-s1 { --k: var(--series-1); } .tp-s2 { --k: var(--series-2); } .tp-s3 { --k: var(--series-3); }
.tp-s4 { --k: var(--series-4); } .tp-s5 { --k: var(--series-5); } .tp-s6 { --k: var(--series-6); }

/* Filas de lista, con el divisor suave; la señalada, resaltada. */
.tp-rows { display: grid; }
.tp-row { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s2) 0;
  border-top: 1px solid var(--tp-div); font-size: var(--size-sm); }
.tp-row:first-child { border-top: 0; }
.tp-row.on { background: var(--surface-hover); border-radius: var(--radius-sm); margin: 0 calc(-1 * var(--s2));
  padding-left: var(--s2); padding-right: var(--s2); border-color: transparent; }
.tp-row > .tp-grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row > .tp-end { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }

/* El área y la sparkline: el dibujo lo hace `charts` en el servidor; aquí el
   punto final con su halo y la línea de referencia discontinua. */
.tp-chart { position: relative; line-height: 0; min-height: 0; }
.tp-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tp-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--k, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k, var(--accent)) 25%, transparent); }
.tp-ref { stroke: var(--text-faint); stroke-dasharray: 3 3; stroke-width: 1; fill: none; }

/* Una fila a la que `terminal-pieces.js` ha dado un poco más de alto para
   que la lista no corte la última a medias (2026-11-05): lo de dentro, al
   centro, sin estirar sus pistas. */
[data-tp-fit]:not(tr) { align-content: center; }

/* El bocadillo de las piezas (`[data-tp-tip]`) es el de todo el sitio desde
   el 2026-11-05: `static/tip.css` y `static/tip.js`. */

/* --- 4. Tallas ----------------------------------------------------------
   S 4×3 · T 4×6 · W 8×3 · L 8×6 · XL 12×6 (plan §4.6). Las piezas no se
   parten por la ventana: cada una enseña lo que cabe en **su** tamaño. Las
   clases de abajo son las que usan las plantillas para decirlo:

   - `.tp-when-wide`: sólo si la pieza es ancha (≥ 600 px, W/L/XL).
   - `.tp-when-tall`: sólo si es alta (≥ 380 px, T/L/XL).
   - `.tp-when-big`:  sólo si es las dos cosas (L/XL).
   - `.tp-hide-small`: se va en una pieza estrecha (< 360 px).
   El «View all» del pie se va antes que su línea de contexto. */
.tp-when-wide, .tp-when-tall, .tp-when-big { display: none !important; }
@container pieza (min-width: 600px) { .tp-when-wide { display: revert !important; } }
@container pieza (min-height: 380px) { .tp-when-tall { display: revert !important; } }
@container pieza (min-width: 600px) and (min-height: 380px) { .tp-when-big { display: revert !important; } }
@container pieza (max-width: 359px) {
  .tp-hide-small { display: none !important; }
  .widget.tp > header.tp-head, .widget.tp > .tp-body, .widget.tp > .tp-foot { padding-left: var(--s4); padding-right: var(--s4); }
  .tp-fig { font-size: var(--size-lg); }
}
@container pieza (max-width: 220px) { .tp-all { display: none; } }
/* Una pieza baja (3 filas o menos) no tiene sitio para el pie. */
@container pieza (max-height: 230px) { .widget.tp > .tp-foot { display: none; } }

/* --- 5. El tablero ------------------------------------------------------ */
/* La rejilla se mide a sí misma (F7): los cortes miran el tablero y no la
   ventana. Con el script, gridstack hace lo mismo (`breakpointForWindow:
   false`); sin él, esto sostiene la lista del móvil. */
.tp-board { container-type: inline-size; container-name: tablero; }

/* Subir y bajar sólo existen en la lista del móvil (ver abajo). */
.widget-mv { display: none; }

/* **Por debajo de 700 px de tablero, una lista** (F8): en el orden de lectura,
   las cajitas pequeñas de dos en dos y todo lo demás a lo ancho, cada pieza
   con su alto natural y un tope; las tablas hacen scroll dentro. Con las once
   cajitas de fábrica se pasa de unos 2.000 px de scroll antes de Stories a
   menos de la mitad. `!important` porque las posiciones las escriben en línea
   el servidor y la librería. */
@container tablero (max-width: 699px) {
  .tp-board > .grid-stack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3); height: auto !important; min-height: 0; margin: 0; }
  .tp-board > .grid-stack > .grid-stack-item {
    position: relative !important; left: auto !important; top: auto !important;
    width: auto !important; height: auto !important; min-width: 0; grid-column: 1 / -1;
    transform: none !important; }
  .tp-board > .grid-stack > .grid-stack-item[data-tp-small] { grid-column: auto; }
  /* La última cajita pequeña de una serie impar va a lo ancho: si no, deja
     media fila vacía a su lado (2026-11-05; la cuenta la hacen
     `board.lone_small` en el servidor y `terminal.js` al cambiar algo). */
  .tp-board > .grid-stack > .grid-stack-item[data-tp-small][data-tp-solo] { grid-column: 1 / -1; }
  .tp-board > .grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: relative !important; inset: auto !important; width: auto !important;
    height: auto; max-height: 560px; container-type: inline-size; }
  /* Las piezas con tabla o lista: el alto que piden hasta el tope; la tabla
     hace scroll dentro. */
  .tp-board > .grid-stack > .grid-stack-item:not([data-tp-small]) > .grid-stack-item-content { min-height: 180px; }
  .tp-board > .grid-stack > .grid-stack-item[data-tp-h="2"] > .grid-stack-item-content,
  .tp-board > .grid-stack > .grid-stack-item[data-tp-h="3"] > .grid-stack-item-content { min-height: 0; }
  /* La cajita pequeña: alto fijo y su contenedor de tamaño, para que sus
     reglas por alto (`@container pieza`) sigan eligiendo qué enseña. */
  .tp-board > .grid-stack > .grid-stack-item[data-tp-small] > .grid-stack-item-content {
    height: 132px; container-type: size; }
  .tp-board .grid-stack-placeholder { display: none !important; }
  .tp-board .ui-resizable-handle { display: none !important; }
  /* En edición: subir, bajar y quitar, con objetivos de 28 px. */
  .board-editing .tp-board .widget-mv { display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
    background: var(--surface); color: var(--text-muted); }
  .board-editing .tp-board .widget-mv svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; fill: none; }
  .board-editing .tp-board .widget-mv:hover, .board-editing .tp-board .widget-mv:focus-visible {
    color: var(--accent); border-color: var(--accent); }
  .board-editing .tp-board .widget-x { width: 28px; height: 28px; }
  .board-editing .tp-board .grid-stack-item-content > .widget > header { cursor: default; }
}

/* El margen lateral de 16 px de la guía (§10) y la tira de arriba en una
   línea (F8): el texto secundario se va por debajo de 720 px. */
@media (max-width: 720px) {
  main.wrap:has(> .tp-board) { padding-left: var(--s4); padding-right: var(--s4); }
  .topstrip { white-space: nowrap; padding: 0 var(--s4); gap: var(--s2); }
  .topstrip .tp-strip-sub { display: none; }
  .topstrip .board-tools .btn { white-space: nowrap; }
}

/* --- 6. La bandeja ------------------------------------------------------ */
/* La miniatura de la talla con la que nace la pieza: un rectángulo en una
   rejilla de 12×6 que se reconoce antes de leer S, T, W, L o XL. */
.addcard-size { flex: none; align-self: center; width: 30px; height: 16px; border-radius: 3px;
  border: 1px solid var(--line-strong); position: relative; }
.addcard-size::after { content: ""; position: absolute; left: 1px; top: 1px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  width: calc((100% - 2px) * var(--sw, .33)); height: calc((100% - 2px) * var(--sh, .5)); }
.addcard-size[data-size="S"] { --sw: .34; --sh: .5; }
.addcard-size[data-size="T"] { --sw: .34; --sh: 1; }
.addcard-size[data-size="W"] { --sw: .67; --sh: .5; }
.addcard-size[data-size="L"] { --sw: .67; --sh: 1; }
.addcard-size[data-size="XL"] { --sw: 1; --sh: 1; }
/* El rótulo de cada apartado, con su «View all →» a la derecha. */
.tray-sec.tp-tray-sec { display: flex; align-items: baseline; gap: var(--s2); }
.tray-sec .tp-all { font-size: var(--size-2xs); }