/* ==========================================================================
   25 · RESUMEN — la pestaña que por dentro sigue llamándose `tablero`

   Se rehízo el 16 de septiembre de 2026 para leerse de un vistazo: menos
   cajas con borde de color, menos iconos compitiendo, cifras más grandes y un
   solo acento —el rojo— para lo que hay que mirar. Lo que se decidió cuando
   era el Tablero sigue en pie, y se puede discutir pero no ignorar:

   1. **LAS BARRAS SON HTML, NO SVG.** El panel ya dibuja proporciones con un
      `div` de fondo y una `<i>` con el ancho puesto a mano — `.pts-via__barra`,
      `.pos-barra`, `.reparto`—. Seguir con eso da tres cosas gratis que un
      `<svg>` cuesta pelear: se adapta al ancho sin recalcular nada, los
      rótulos son texto de verdad y hereda los mismos tokens de color. Un
      gráfico de barras es una lista de barras; no hace falta un lienzo.

   2. **CADA SEDE TIENE SU COLOR, Y ES EL MISMO EN TODAS PARTES.** Sur en rojo
      de marca, norte en naranja. Por eso lo que NO es una sede —cómo llegó la
      venta, nuevos contra viejos— va en la escala de marrones y cremas: si
      fuera rojo y naranja, se leería como sur y norte.

   3. **LA ESCALA SE DICE.** Cada gráfico enseña su máximo arriba a la derecha.
      Una barra sin escala solo dice «esta es más alta que aquella», que ya se
      ve; con el máximo escrito, además dice cuánto.

   Y una del movimiento: **todo lo que se anima es `transform`, `opacity` o
   `clip-path`**, que el navegador compone sin volver a medir la página. Las
   barras crecían animando `height`, y noventa barras recalculando su alto en
   cada cuadro se notaban en el computador de la caja.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La entrada escalonada de lo de dentro. `--i` lo pone el JS en orden.
-------------------------------------------------------------------------- */
.tbl-a {
  animation: tbl-entra .55s var(--ease) both;
  animation-delay: min(calc(var(--i, 0) * 50ms), 450ms);
}
@keyframes tbl-entra   { from { opacity: 0; transform: translateY(12px); } }
@keyframes tbl-crece   { from { transform: scaleY(0); } }
@keyframes tbl-crece-x { from { transform: scaleX(0); } }
@keyframes tbl-aparece { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   La cabecera
-------------------------------------------------------------------------- */
.tbl-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin: .2rem 0 1.5rem;
  animation: tbl-entra .6s var(--ease) both;
}
.tbl-cab__hola { margin: 0 0 .2rem; font-size: .88rem; font-weight: 500; color: var(--tinta-3); }
.tbl-cab__t {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 700;
  letter-spacing: -.028em;
}
.tbl-cab__f {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem;
  margin: .5rem 0 0; font-size: .85rem; color: var(--tinta-3);
}

/* Abierta o cerrada, con su punto. Se usa en la cabecera y en «La caja». */
.tbl-sede-hoy { display: inline-flex; align-items: center; gap: .4rem; }
.tbl-sede-hoy i {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--arena);
}
.tbl-sede-hoy.abierta i { background: var(--verde-cl); }

/* --- Si la caja se está leyendo -------------------------------------------- */
.tbl-vivo {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem 1rem .5rem .8rem; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.tbl-vivo__p {
  position: relative; width: 9px; height: 9px; flex: none;
  border-radius: 50%; background: var(--arena);
}
.tbl-vivo--vivo  .tbl-vivo__p { background: var(--verde-cl); }
.tbl-vivo--tarde .tbl-vivo__p { background: var(--naranja); }
/* La onda: una sola, lenta, y en `transform` para no costar nada. Es lo único
   de la pantalla que se mueve sin que nadie lo toque, y por eso es suave. */
.tbl-vivo--vivo .tbl-vivo__p::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--verde-cl);
  animation: tbl-onda 2.8s var(--ease-suave) infinite;
}
@keyframes tbl-onda {
  from { transform: scale(1); opacity: .45; }
  70%, to { transform: scale(3.2); opacity: 0; }
}
.tbl-vivo__t { display: flex; flex-direction: column; line-height: 1.2; }
.tbl-vivo__t b { font-size: .84rem; font-weight: 600; }
.tbl-vivo__t small { font-size: .74rem; color: var(--tinta-3); }
.tbl-vivo--tarde .tbl-vivo__t b { color: #A8650E; }

/* --------------------------------------------------------------------------
   Los mandos
   --------------------------------------------------------------------------
   Un mando es una fila de opciones con una pastilla debajo de la puesta. La
   pastilla es un solo elemento que se desliza —su sitio lo mide el JS—, no un
   fondo que se apaga en una opción y se enciende en otra: así se ve A DÓNDE
   se fue la elección, que es lo que hace que se sienta que respondió.
-------------------------------------------------------------------------- */
.tbl-mando {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .8rem 1.2rem; flex-wrap: wrap;
  margin-bottom: 1.15rem;
}
.tbl-filtros { display: flex; gap: .5rem; flex-wrap: wrap; }

.tbl-seg {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 12px; background: var(--crema-2);
}
.tbl-seg__pila {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; z-index: -1;
  border-radius: 9px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(33,22,16,.08), 0 3px 10px rgba(33,22,16,.06);
}
.tbl-seg--vivo .tbl-seg__pila {
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.tbl-seg__o {
  position: relative; display: inline-flex; align-items: center;
  padding: .45rem .85rem; border-radius: 9px;
  font-size: .84rem; font-weight: 600; color: var(--tinta-3); white-space: nowrap;
  transition: color .25s var(--ease);
}
.tbl-seg__o:hover { color: var(--tinta); }
.tbl-seg__o[aria-pressed="true"] { color: var(--tinta); }
.tbl-seg__o:focus-visible { outline-offset: 0; border-radius: 9px; }

/* Las secciones: la misma pieza, con la pastilla vuelta un subrayado. */
.tbl-seg--linea {
  background: none; padding: 0; border-radius: 0; gap: .15rem;
  box-shadow: inset 0 -1px 0 var(--linea-sutil);
}
.tbl-seg--linea .tbl-seg__pila {
  top: auto; bottom: 0; height: 2px; z-index: 1;
  border-radius: 2px; background: var(--rojo); box-shadow: none;
}
.tbl-seg--linea .tbl-seg__o {
  padding: .5rem .75rem .75rem; border-radius: 8px; font-size: .95rem;
}
.tbl-seg--linea .tbl-seg__o[aria-selected="true"] { color: var(--tinta); }
.tbl-seg__n {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 .3rem; margin-left: .4rem;
  border-radius: 99px; background: var(--rojo); color: #fff;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  animation: tbl-aparece .3s var(--ease) both;
}

/* --- Mientras llegan los datos de otro período ------------------------------
   Lo de debajo se atenúa y una línea corre bajo los mandos. Las dos cosas
   llegan con un respiro de retraso: la API suele contestar antes, y un
   parpadeo de medio cuadro se lee como un fallo, no como que está cargando. */
.tbl-carga {
  position: relative; height: 2px; margin: -.75rem 0 .73rem;
  border-radius: 2px; overflow: hidden; opacity: 0;
  transition: opacity .2s var(--ease);
}
.tbl-carga::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  background: linear-gradient(90deg, transparent, var(--rojo), transparent);
}
.tbl--cargando .tbl-carga { opacity: 1; transition-delay: .15s; }
.tbl--cargando .tbl-carga::after { animation: tbl-corre 1.1s var(--ease-io) infinite; }
@keyframes tbl-corre { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

.tbl-cuerpo { transition: opacity .25s var(--ease); }
.tbl--cargando .tbl-cuerpo { opacity: .5; pointer-events: none; transition-delay: .12s; }

/* Desde cuándo guarda la caja. Era una banda ámbar a todo lo ancho; es una
   nota: tiene que estar, no tiene que gritar. */
.tbl-borde {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: -.3rem 0 1.1rem; font-size: .8rem; line-height: 1.5; color: var(--tinta-3);
  animation: tbl-aparece .4s var(--ease) both;
}
.tbl-borde .ico { flex: none; margin-top: .2em; color: var(--naranja); }
.tbl-borde b { color: var(--tinta-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Las cifras
-------------------------------------------------------------------------- */
/* Cuatro en fila o dos y dos, nunca tres y una suelta debajo. */
.tbl-kpis, .tbl-huesos__kpis {
  display: grid; gap: .75rem; margin-bottom: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .tbl-kpis, .tbl-huesos__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tbl-cifra { display: flex; flex-direction: column; min-width: 0; }
.tbl-kpi {
  padding: 1.05rem 1.15rem 1.05rem; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.tbl-cifra__e {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 500; color: var(--tinta-3);
}
/* El tono es un punto al lado del rótulo, no un borde de color: separa una
   cifra buena de una que hay que mirar sin pintar la tarjeta entera. */
.tbl-cifra--bien .tbl-cifra__e::after,
.tbl-cifra--flojo .tbl-cifra__e::after,
.tbl-cifra--ojo .tbl-cifra__e::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-cl);
}
.tbl-cifra--flojo .tbl-cifra__e::after { background: var(--naranja); }
.tbl-cifra--ojo   .tbl-cifra__e::after { background: var(--rojo-vivo); }

.tbl-cifra__n {
  margin: .35rem 0 .5rem;
  font-family: var(--display); font-weight: 600; line-height: 1.05;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); letter-spacing: -.02em;
  color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tbl-cifra__p {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem;
  font-size: .78rem; line-height: 1.35; color: var(--tinta-3);
}
.tbl-cifra--ojo .tbl-cifra__p { color: var(--rojo); }

.tbl-cifra--chica .tbl-cifra__n { font-size: 1.5rem; margin: .25rem 0 .3rem; }
.tbl-datos {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

/* La variación, en una ficha pequeña con su flecha. Verde si sube, ámbar si
   baja: un día flojo no es una alarma, y el rojo queda para lo que sí lo es. */
.tbl-delta {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .1rem .42rem; border-radius: 6px;
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--crema-2); color: var(--tinta-2);
}
.tbl-delta svg { width: .5rem; height: .5rem; fill: currentColor; }
.tbl-delta--baja svg { transform: rotate(180deg); }
.tbl-delta--bien  { background: var(--verde-sua); color: var(--verde); }
.tbl-delta--flojo { background: var(--ambar-sua); color: #A8650E; }

/* La serie en miniatura al pie de la cifra. El alto va en %, así que la caja
   tiene alto fijo: sin él las barritas medirían cero. */
.tbl-mini {
  display: flex; align-items: flex-end; gap: 2px;
  height: 30px; margin-top: auto; padding-top: .8rem; box-sizing: content-box;
}
.tbl-mini i {
  flex: 1 1 0; min-width: 1px; border-radius: 2px 2px 0 0;
  background: var(--crema-3); transform-origin: bottom;
  animation: tbl-crece .6s var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + 150ms);
}
.tbl-mini--denso { gap: 1px; }
.tbl-mini i.cero { background: var(--crema-2); }
.tbl-mini i.hoy  { background: var(--rojo); }

/* --------------------------------------------------------------------------
   Las tarjetas
-------------------------------------------------------------------------- */
.tbl-caja {
  min-width: 0; margin-bottom: .75rem;
  padding: 1.2rem 1.25rem 1.25rem; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
}
.tbl-caja__cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .6rem 1rem; margin-bottom: 1.05rem;
}
.tbl-caja__t { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -.012em; }
.tbl-caja__d {
  margin: .3rem 0 0; max-width: 62ch;
  font-size: .8rem; line-height: 1.5; color: var(--tinta-3);
}
.tbl-caja__d b { color: var(--tinta-2); font-weight: 600; }

/* Cuando hay un plato vendido y agotado, la tarjeta lo dice con una raya. */
.tbl-caja--alerta { border-color: rgba(176,30,36,.22); box-shadow: inset 3px 0 0 var(--rojo); }

.tbl-par {
  display: grid; gap: .75rem; margin-bottom: .75rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.tbl-par > .tbl-caja { margin-bottom: 0; }
.tbl-par--ancho { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.tbl-conteo {
  display: inline-grid; place-items: center; flex: none;
  min-width: 26px; height: 26px; padding: 0 .45rem; border-radius: 99px;
  background: var(--crema-2); color: var(--tinta-2);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tbl-conteo--mal { background: var(--rojo); color: #fff; }

.tbl-nada { margin: 0; font-size: .84rem; color: var(--tinta-3); }

.tbl-nota {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linea-sutil);
  font-size: .8rem; line-height: 1.5; color: var(--tinta-3);
}
.tbl-nota .ico { flex: none; margin-top: .2em; }
.tbl-nota b { color: var(--tinta-2); font-weight: 600; }
.tbl-nota--bien .ico { color: var(--verde); }
.tbl-nota--mal { color: var(--rojo-osc); }
.tbl-nota--mal .ico { color: var(--rojo); }

/* Los juegos de la página del pedido: los dos juntos arriba, y cada uno con
   su nombre y sus cuatro cifras. */
.tbl-juego__total { margin: 0 0 .2rem; font-size: .84rem; line-height: 1.5; color: var(--tinta-3); }
.tbl-juego__total b { color: var(--tinta); font-weight: 700; }
.tbl-juego__t {
  margin: 1.1rem 0 .7rem; padding-top: .9rem; border-top: 1px solid var(--linea-sutil);
  font-family: var(--sans); font-size: .88rem; font-weight: 700; color: var(--tinta-2);
}

.tbl-ok { display: flex; align-items: flex-start; gap: .55rem; margin: 0;
          font-size: .86rem; line-height: 1.5; color: var(--tinta-2); }
.tbl-ok .ico { flex: none; margin-top: .15em; font-size: 1.1em; color: var(--verde); }

/* Lo que se abre a pedido. */
.tbl-caja:not(.tbl-todo) .tbl-extra { display: none !important; }
.tbl-todo .tbl-extra { animation: tbl-entra .4s var(--ease) both; }
.tbl-mas {
  margin-top: .75rem; padding: .3rem 0;
  font-size: .8rem; font-weight: 600; color: var(--rojo);
}
.tbl-mas:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   El gráfico de barras
-------------------------------------------------------------------------- */
.tbl-graf { position: relative; margin: 0; }
.tbl-graf__max {
  display: block; margin: -.35rem 0 .45rem; text-align: right;
  font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}

/* Con noventa días en el celular las columnas no caben: se deslizan en vez de
   aplastarse hasta ser invisibles. `--min` lo pone el JS según cuántas hay. */
.tbl-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: .2rem; }

/* Las barras y sus rótulos van en DOS filas hermanas y no anidados. Con el
   rótulo dentro de la columna, la caja de las barras deja de medir lo que dice
   —le cabe además el texto— y un `height: 40%` pasa a ser el 40% de otra cosa.
   Separados, la fila de barras mide exactamente su alto y los porcentajes que
   pone el JS son de verdad. Las dos filas comparten `--gap` y `--min`, así que
   cada rótulo cae debajo de su barra. */
.tbl-barras {
  position: relative; display: flex; gap: var(--gap, 4px);
  height: 176px; min-width: 100%;
  border-bottom: 1px solid var(--linea);
}
/* El techo y la mitad. Sin una referencia, la barra más alta parece el techo
   del mundo y no de esta pantalla. */
.tbl-barras::before, .tbl-barras::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
  border-top: 1px dashed var(--linea-sutil);
}
.tbl-barras::before { top: 0; }
.tbl-barras::after  { top: 50%; }

/* La ranura es el blanco del ratón y ocupa todo el ancho; la barra dibujada
   dentro tiene tope. Siete barras de 150 px de ancho parecen bloques de
   cemento, y con la ranura entera como blanco sigue siendo fácil apuntarles. */
.tbl-b {
  position: relative; flex: 1 1 0; min-width: var(--min, 14px);
  transition: opacity .2s var(--ease);
}
.tbl-b__pila {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: min(100%, var(--ancho, 44px));
  display: flex; flex-direction: column-reverse;
  transform-origin: bottom;
  animation: tbl-crece .75s var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}
.tbl-b__p { display: block; flex: none; width: 100%; }
/* En `column-reverse` el último hijo del marcado es el de arriba: ahí va el
   redondeo, no en el contenedor. */
.tbl-b__p:last-child { border-radius: 5px 5px 0 0; }
.tbl-b__p--uno, .tbl-b__p--sur { background: var(--rojo); }
.tbl-b__p--norte { background: var(--naranja); }
.tbl-b--pico .tbl-b__p--uno { background: var(--rojo-osc); }

/* Al pasar por encima, las demás se apagan: se sabe cuál dice el globo. */
.tbl-barras:hover .tbl-b:not(:hover) { opacity: .42; }

/* La marca de «así suele ser»: una raya sobre la barra del día. Compara sin
   meter una segunda serie que doblaría el número de barras.

   Va en blanco con un contorno oscuro: casi siempre cae DENTRO de la barra,
   que es roja, y ahí una raya oscura no se ve; las veces que sobresale queda
   sobre crema, y ahí la blanca sola tampoco. Con el contorno se ve en los dos. */
.tbl-b__ref {
  position: absolute; left: 0; right: 0; margin: 0 auto; height: 0;
  width: min(100%, var(--ancho, 44px));
  border-top: 2px dashed rgba(255, 255, 255, .95);
  filter: drop-shadow(0 0 1px rgba(33, 22, 16, .85));
  pointer-events: none;
  animation: tbl-aparece .4s var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + 700ms);
}

.tbl-ejes { display: flex; gap: var(--gap, 4px); min-width: 100%; height: 1.45rem; margin-top: .4rem; }
.tbl-ejes span { position: relative; flex: 1 1 0; min-width: var(--min, 14px); }
.tbl-ejes b {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: .05rem .38rem; border-radius: 99px;
  font-size: .68rem; font-weight: 500; line-height: 1.5; color: var(--tinta-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Con pocos rótulos cada uno es más ancho que su ranura: los de las puntas se
   alinean hacia dentro para no salirse del cuadro. */
.tbl-ejes--ralo .primero b { left: 0; transform: none; }
.tbl-ejes--ralo .ultimo  b { left: auto; right: 0; transform: none; }
.tbl-ejes .nulo b  { opacity: .5; }
.tbl-ejes .pico b  { color: var(--tinta); font-weight: 700; }
.tbl-ejes .ahora b { background: var(--rojo); color: #fff; font-weight: 700; opacity: 1; }

.tbl-tip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  padding: .38rem .62rem; border-radius: 9px;
  background: var(--nori); color: var(--crema);
  font-size: .76rem; font-weight: 500; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(22,16,13,.22);
  opacity: 0;
  transition: opacity .15s var(--ease), transform .22s var(--ease);
}
.tbl-tip--on { opacity: 1; }

.tbl-leyenda {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .7rem;
  font-size: .76rem; color: var(--tinta-3);
}
.tbl-leyenda--cab { margin: .15rem 0 0; justify-content: flex-end; }
.tbl-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.tbl-leyenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tbl-leyenda i.uno, .tbl-leyenda i.sur { background: var(--rojo); }
.tbl-leyenda i.norte { background: var(--naranja); }
.tbl-leyenda i.ref { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--tinta-3); }

/* El día que todavía no tiene ventas. */
.tbl-espera {
  display: grid; justify-items: center; gap: .3rem;
  padding: 2.2rem 1rem; text-align: center; color: var(--tinta-3);
}
.tbl-espera .ico { font-size: 2rem; opacity: .45; margin-bottom: .3rem; }
.tbl-espera b { color: var(--tinta); font-size: .95rem; font-weight: 600; }
.tbl-espera span { font-size: .82rem; }

/* --------------------------------------------------------------------------
   Listas
-------------------------------------------------------------------------- */
.tbl-rank, .tbl-facts { list-style: none; margin: 0; padding: 0; }

.tbl-r {
  display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  grid-template-areas: "n t v" ". b b";
  column-gap: .65rem; align-items: center;
  padding: .62rem 0; border-top: 1px solid var(--linea-sutil);
}
.tbl-r:first-child { border-top: 0; padding-top: 0; }
.tbl-r__n {
  grid-area: n; font-size: .74rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.tbl-r__t { grid-area: t; min-width: 0; line-height: 1.3; }
.tbl-r__t b {
  display: block; font-size: .88rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbl-r__t span { font-size: .74rem; color: var(--tinta-3); }
.tbl-r__v { grid-area: v; text-align: right; line-height: 1.25; }
.tbl-r__v strong { display: block; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl-r__v small { font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tbl-r__barra {
  grid-area: b; height: 4px; margin-top: .45rem;
  border-radius: 4px; background: var(--crema-2); overflow: hidden;
}
.tbl-r__barra i {
  display: block; height: 100%; border-radius: 4px; background: var(--rojo);
  transform-origin: left;
  animation: tbl-crece-x .8s var(--ease) both;
  animation-delay: calc(min(calc(var(--i, 0) * 45ms), 400ms) + 180ms);
}
.tbl-r:not(:first-child) .tbl-r__barra i { background: rgba(176, 30, 36, .55); }

/* Las últimas facturas: hora, número con su sede y mesa, total. */
.tbl-f {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  gap: .8rem; align-items: center;
  padding: .6rem 0; border-top: 1px solid var(--linea-sutil); font-size: .86rem;
}
.tbl-f:first-child { border-top: 0; padding-top: 0; }
.tbl-f__h { font-size: .8rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tbl-f__t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tbl-f__t b { font-weight: 600; }
.tbl-f__t small {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; color: var(--tinta-3);
}
.tbl-f__t em { font-style: normal; font-weight: 600; color: var(--rojo); }
.tbl-f__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl-f--anulada .tbl-f__v { color: var(--tinta-3); font-weight: 500; text-decoration: line-through; }

.tbl-punto { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rojo); }
.tbl-punto--norte { background: var(--naranja); }

/* Clave y valor, para el estado de la caja. */
.tbl-kv { display: grid; margin: 0; }
.tbl-kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-top: 1px solid var(--linea-sutil); font-size: .84rem;
}
.tbl-kv > div:first-child { border-top: 0; padding-top: 0; }
.tbl-kv dt { color: var(--tinta-3); }
.tbl-kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--tinta); }
.tbl-mal { color: var(--rojo); }

/* --------------------------------------------------------------------------
   Reparto, alertas, fichas
-------------------------------------------------------------------------- */
.tbl-reparto__barra {
  display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden;
  animation: tbl-revela .9s var(--ease) both .15s;
}
@keyframes tbl-revela {
  from { clip-path: inset(0 100% 0 0 round 99px); }
  to   { clip-path: inset(0 0 0 0 round 99px); }
}
.tbl-reparto__barra i { display: block; height: 100%; }
.tbl-c--a { background: var(--tinta-2); }
.tbl-c--b { background: var(--arena); }
.tbl-c--c { background: var(--crema-3); }
.tbl-reparto__ley { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tbl-reparto__ley li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.6rem;
  align-items: center; gap: .65rem; font-size: .85rem;
}
.tbl-reparto__ley i { width: 10px; height: 10px; border-radius: 3px; }
.tbl-reparto__ley em { font-style: normal; font-size: .76rem; color: var(--tinta-3); margin-left: .25rem; }
.tbl-reparto__ley b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl-reparto__ley small { text-align: right; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Lo único de la pantalla que es un problema y no una métrica. Va arriba de
   «Ahora» y se toca entero para ir a verlo. */
.tbl-alerta {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  margin-bottom: .75rem; padding: .8rem 1rem; border-radius: 16px;
  text-align: left; color: var(--tinta);
  background: var(--rojo-sua); border: 1px solid rgba(176,30,36,.18);
  transition: background .2s var(--ease);
}
.tbl-alerta:hover { background: rgba(176, 30, 36, .14); }
.tbl-alerta__i {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 11px; background: var(--rojo); color: #fff;
}
.tbl-alerta__t { flex: 1; min-width: 0; line-height: 1.35; }
.tbl-alerta__t b { display: block; font-size: .9rem; font-weight: 600; }
.tbl-alerta__t small { font-size: .78rem; color: var(--tinta-2); }
.tbl-alerta__ir {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--rojo);
}
.tbl-alerta__ir .ico { transition: transform .25s var(--ease); }
.tbl-alerta:hover .tbl-alerta__ir .ico { transform: translateX(3px); }

.tbl-aviso {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 0 0 .75rem; padding: .8rem 1rem; border-radius: 16px;
  background: var(--ambar-sua); font-size: .85rem; line-height: 1.5; color: var(--tinta-2);
}
.tbl-aviso .ico { flex: none; margin-top: .18em; color: #A8650E; }
.tbl-aviso b { color: var(--tinta); font-weight: 600; }

.tbl-choque {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem 0; border-top: 1px solid var(--linea-sutil);
}
.tbl-choque:first-child { border-top: 0; padding-top: 0; }
.tbl-choque__t { flex: 1; min-width: 12rem; line-height: 1.4; }
.tbl-choque__t b { font-size: .92rem; font-weight: 600; }
.tbl-choque__t span { display: block; font-size: .78rem; color: var(--tinta-3); }

.tbl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tbl-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .32rem .7rem; border-radius: 99px;
  background: var(--crema); border: 1px solid var(--linea-sutil); font-size: .8rem;
}
.tbl-chip small { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.tbl-google {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tbl-ficha {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.05rem; border-radius: 14px; background: var(--crema);
}
.tbl-ficha__n {
  font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.tbl-ficha--flojo .tbl-ficha__n { color: #A8650E; }
.tbl-ficha__t { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.tbl-ficha__t b { font-size: .86rem; font-weight: 600; }
.tbl-ficha__t small { font-size: .76rem; color: var(--tinta-3); }

/* Cinco estrellas grises y las mismas cinco en naranja encima, recortadas a
   la puntuación: 4,7 se ve como cuatro y casi una más, sin dibujar medias. */
.tbl-estrellas { position: relative; display: inline-flex; font-size: .9rem; line-height: 1; }
.tbl-estrellas > span { display: inline-flex; gap: 2px; }
.tbl-estrellas .ico { fill: currentColor; stroke-width: 1; }
.tbl-estrellas__base { color: var(--crema-3); }
.tbl-estrellas__lleno {
  position: absolute; top: 0; left: 0; color: var(--naranja);
  clip-path: inset(0 calc(100% - var(--r)) 0 0);
  animation: tbl-estrella 1s var(--ease) both .35s;
}
@keyframes tbl-estrella { from { clip-path: inset(0 100% 0 0); } }

/* El vacío con pasos reutiliza `.crm-vacio`; acá solo se centra el texto. */
.tbl-vacio { text-align: center; color: var(--tinta-3); padding: .6rem 0 .4rem; }

/* --------------------------------------------------------------------------
   Los huesos, con la forma de lo que viene
-------------------------------------------------------------------------- */
.tbl-huesos { display: grid; gap: .8rem; }
.tbl-huesos__cab { height: 84px; width: min(100%, 24rem); border-radius: 16px; }
.tbl-huesos__kpis .hueso { height: 124px; border-radius: 18px; }
.tbl-huesos__graf { height: 290px; border-radius: 20px; }

/* --------------------------------------------------------------------------
   26 · Pantalla angosta
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tbl-par--ancho { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .tbl-cab { margin-bottom: 1.1rem; gap: .9rem; }
  .tbl-vivo { padding: .4rem .85rem .4rem .7rem; }

  /* `nowrap` no es de adorno: en columna y envolviendo, el renglón mide lo que
     pide su hijo más ancho —las cinco secciones en fila— y no lo que mide la
     pantalla, así que los mandos se salían por la derecha. */
  .tbl-mando { flex-direction: column; flex-wrap: nowrap; align-items: stretch;
               gap: .75rem; margin-bottom: 1rem; }
  /* Las secciones se deslizan si no caben; los filtros reparten el ancho. */
  .tbl-seg--linea { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tbl-seg--linea::-webkit-scrollbar { display: none; }
  .tbl-seg--linea .tbl-seg__o { flex: 1 0 auto; justify-content: center;
                                padding-inline: .42rem; font-size: .86rem; }
  .tbl-seg--linea .tbl-seg__n { margin-left: .25rem; }
  /* `minmax(0, …)` y `min-width: 0`: sin ellos la rejilla mide los mandos por
     lo que piden sus rótulos sin partir, y el de período se salía 22 px de un
     teléfono de 375. */
  .tbl-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .tbl-filtros .tbl-seg { display: flex; min-width: 0; }
  .tbl-filtros .tbl-seg__o { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .3rem; }

  .tbl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .tbl-kpi { padding: .85rem .9rem; border-radius: 16px; }
  .tbl-cifra__n { font-size: 1.4rem; }
  .tbl-cifra__p { font-size: .74rem; }

  .tbl-caja { padding: 1rem; border-radius: 18px; }
  .tbl-caja__cab { flex-wrap: wrap; }
  .tbl-barras { height: 140px; }
  /* El aviso entero se lee a lo ancho, y «Revisar» baja a su propio renglón. */
  .tbl-alerta { flex-wrap: wrap; row-gap: .5rem; align-items: flex-start; }
  .tbl-alerta__t { flex-basis: calc(100% - 34px - .85rem); }
  .tbl-alerta__ir { margin-left: calc(34px + .85rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tbl-a, .tbl-cab, .tbl-borde, .tbl-seg__n, .tbl-mini i, .tbl-b__pila, .tbl-b__ref,
  .tbl-r__barra i, .tbl-reparto__barra, .tbl-estrellas__lleno, .tbl-todo .tbl-extra,
  .tbl--cargando .tbl-carga::after { animation: none; }
  .tbl-vivo--vivo .tbl-vivo__p::after { display: none; }
  .tbl-seg--vivo .tbl-seg__pila, .tbl-tip, .tbl-b, .tbl-cuerpo { transition: none; }
}