/* ==========================================================================
   SBTR · tablero de inicio
   --------------------------------------------------------------------------
   Se apoya por completo en los tokens de sbtr-tema.css. La retícula es de
   caja flexible y no usa media queries: cada bloque declara el ancho mínimo
   con el que sigue siendo legible y el navegador decide cuántos caben.
   ========================================================================== */

.tablero {
  display: flex;
  flex-direction: column;
  gap: var(--sb-s4);
}

/* --- retícula fluida ---------------------------------------------------- */

.tb-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-s4);
}

/* min-width:0 evita que una tabla ancha estire su columna */
.tb-fila > * {
  flex: 1 1 min(100%, 21rem);
  min-width: 0;
}

/* los indicadores necesitan menos ancho: caben mas por fila */
.tb-fila.tb-kpis > * { flex: 1 1 min(100%, 14.5rem); }

.tb-fila > .tb-ancho  { flex-grow: 2; flex-basis: min(100%, 32rem); }
.tb-fila > .tb-angosto { flex-grow: 1; flex-basis: min(100%, 17rem); }

/* --- encabezado --------------------------------------------------------- */

.tb-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sb-s2) var(--sb-s3);
  margin: 0 0 var(--sb-s1);
}

.tb-titulo h1 {
  margin: 0;
  font-size: var(--sb-t-2x);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--sb-ink);
}

.tb-titulo p {
  margin: 0;
  font-size: var(--sb-t-sm);
  color: var(--sb-muted);
}

/* --- indicador ---------------------------------------------------------- */

.tb-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sb-s2);
  padding: var(--sb-s4);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r);
  box-shadow: var(--sb-sh-1);
  transition: box-shadow var(--sb-base), border-color var(--sb-base);
}

a.tb-kpi { color: inherit; text-decoration: none; }

a.tb-kpi:hover,
a.tb-kpi:focus-visible {
  border-color: var(--sb-line-2);
  box-shadow: var(--sb-sh-2);
  text-decoration: none;
}

a.tb-kpi:focus-visible { outline: none; box-shadow: var(--sb-ring); }

.tb-kpi-eti {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: var(--sb-t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sb-muted);
}

.tb-kpi-eti > .fa { font-size: 1.05em; color: var(--sb-accent); flex: none; }

.tb-kpi-cifra {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sb-s2);
  line-height: 1;
}

.tb-kpi-cifra b {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--sb-ink);
}

.tb-kpi-cifra small {
  font-size: var(--sb-t-sm);
  font-weight: 500;
  color: var(--sb-muted);
}

.tb-kpi-pie {
  font-size: var(--sb-t-sm);
  color: var(--sb-muted);
  font-variant-numeric: tabular-nums;
}

.tb-kpi-pie b { color: var(--sb-ink-2); font-weight: 600; }

/* el indicador toma el color de su estado sólo cuando el estado lo amerita */
.tb-kpi.es-crit .tb-kpi-cifra b { color: var(--sb-crit); }
.tb-kpi.es-warn .tb-kpi-cifra b { color: var(--sb-warn); }
.tb-kpi.es-crit .tb-kpi-eti > .fa { color: var(--sb-crit); }
.tb-kpi.es-warn .tb-kpi-eti > .fa { color: var(--sb-warn); }

/* --- variación contra el periodo anterior ------------------------------- */

.tb-delta {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .5em;
  border-radius: 999px;
  font-size: var(--sb-t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tb-delta.sube  { background: var(--sb-ok-soft);   color: var(--sb-ok); }
.tb-delta.baja  { background: var(--sb-crit-soft); color: var(--sb-crit); }
.tb-delta.plano { background: var(--sb-surface-2); color: var(--sb-muted); }

/* --- tarjeta genérica del tablero --------------------------------------- */

.tb-caja {
  display: flex;
  flex-direction: column;
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r);
  box-shadow: var(--sb-sh-1);
  overflow: hidden;
}

.tb-caja > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sb-s2);
  padding: var(--sb-s3) var(--sb-s4);
  border-bottom: 1px solid var(--sb-line);
}

.tb-caja > header h2 {
  margin: 0;
  font-size: var(--sb-t-md);
  font-weight: 600;
  color: var(--sb-ink);
}

.tb-caja > header .tb-nota {
  font-size: var(--sb-t-xs);
  color: var(--sb-muted);
}

.tb-caja > header a {
  font-size: var(--sb-t-xs);
  font-weight: 600;
  color: var(--sb-accent);
}

.tb-cuerpo { padding: var(--sb-s4); flex: 1; }
.tb-cuerpo.sin-aire { padding: 0; }

/* --- gráfico de barras --------------------------------------------------- */

.tb-barras { position: relative; }

.tb-barras svg { display: block; width: 100%; height: auto; overflow: visible; }

.tb-barras .rejilla { stroke: var(--sb-line); stroke-width: 1; }
.tb-barras .eje     { fill: var(--sb-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
/* Todas las barras son del color de la marca: lo que se está mirando es la
   serie entera. El periodo en curso se distingue por opacidad, no por ser
   el único con color — si no, una semana en cero deja el gráfico en gris. */
.tb-barras .barra   { fill: var(--sb-accent); opacity: .38; transition: opacity var(--sb-fast), fill var(--sb-fast); }
.tb-barras .barra.destacada { opacity: 1; }
.tb-barras g:hover .barra   { opacity: 1; fill: var(--sb-accent-h); }
.tb-barras .zona    { fill: transparent; cursor: default; }

.tb-globo {
  position: absolute;
  z-index: 5;
  padding: .35em .6em;
  border-radius: var(--sb-r-sm);
  background: var(--sb-ink);
  color: #FFF;
  font-size: var(--sb-t-xs);
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity var(--sb-fast);
  box-shadow: var(--sb-sh-2);
}

.tb-globo.visible { opacity: 1; }
.tb-globo b { font-variant-numeric: tabular-nums; }

/* --- anillo de avance ---------------------------------------------------- */

.tb-anillo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-s3);
}

.tb-anillo svg { width: min(100%, 12rem); height: auto; }
.tb-anillo .hueco { stroke: var(--sb-surface-2); }
.tb-anillo .cifra { fill: var(--sb-ink); font-size: 15px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.tb-anillo .rotulo { fill: var(--sb-muted); font-size: 5.5px; text-anchor: middle; letter-spacing: .09em; }

/* --- leyenda / lista con valores ---------------------------------------- */

.tb-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sb-s2);
  width: 100%;
}

.tb-lista li {
  display: flex;
  align-items: center;
  gap: var(--sb-s2);
  font-size: var(--sb-t-sm);
  color: var(--sb-ink-2);
}

.tb-punto {
  flex: none;
  width: .7em;
  height: .7em;
  border-radius: 3px;
  background: var(--sb-surface-3);
}

.tb-lista .nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-lista .valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sb-ink);
  white-space: nowrap;
}

/* --- barras horizontales (sin javascript) -------------------------------- */

.tb-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sb-s3);
}

.tb-rank li { display: flex; flex-direction: column; gap: .35em; min-width: 0; }

.tb-rank .fila {
  display: flex;
  align-items: baseline;
  gap: var(--sb-s2);
  font-size: var(--sb-t-sm);
}

.tb-rank .fila .nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sb-ink-2);
}

.tb-rank .fila .valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sb-ink);
  white-space: nowrap;
}

.tb-rank .fila .apoyo { font-size: var(--sb-t-xs); color: var(--sb-muted); white-space: nowrap; }

.tb-pista {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: var(--sb-surface-2);
  overflow: hidden;
}

.tb-pista > span { display: block; height: 100%; min-width: 0; }

.tb-pista .normal { background: var(--sb-accent); }
.tb-pista .camara { background: var(--sb-info); }
.tb-pista .ok     { background: var(--sb-ok); }
.tb-pista .warn   { background: var(--sb-warn); }
.tb-pista .crit   { background: var(--sb-crit); }
.tb-pista .info   { background: var(--sb-info); }
.tb-pista .mudo   { background: var(--sb-line-2); }

/* --- tabla compacta del tablero ------------------------------------------ */

/* la tabla prefiere desplazarse antes que aplastar una columna */
.tb-tabla { width: 100%; min-width: 20rem; margin: 0; font-size: var(--sb-t-sm); }

.tb-tabla th {
  padding: var(--sb-s2) var(--sb-s4);
  font-size: var(--sb-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sb-muted);
  background: var(--sb-surface-2);
  border-bottom: 1px solid var(--sb-line);
  white-space: nowrap;
}

/* las columnas no se parten: la unica que cede espacio es .recorta */
.tb-tabla td {
  padding: var(--sb-s2) var(--sb-s4);
  border-bottom: 1px solid var(--sb-line);
  color: var(--sb-ink-2);
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.tb-tabla tr:last-child td { border-bottom: 0; }
.tb-tabla tbody tr:hover td { background: var(--sb-accent-soft); }

.tb-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-tabla .principal { font-weight: 600; color: var(--sb-ink); }

.tb-tabla .recorta {
  max-width: 0;
  width: 99%;
  min-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- avance de una orden -------------------------------------------------- */

.tb-avance { display: flex; align-items: center; gap: var(--sb-s2); min-width: 6rem; }
.tb-avance .tb-pista { flex: 1; height: 6px; }
.tb-avance small { font-size: var(--sb-t-xs); color: var(--sb-muted); font-variant-numeric: tabular-nums; }

/* --- estados ------------------------------------------------------------- */

.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .15em .55em;
  border-radius: 999px;
  font-size: var(--sb-t-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tb-chip.ok   { background: var(--sb-ok-soft);   color: var(--sb-ok); }
.tb-chip.warn { background: var(--sb-warn-soft); color: var(--sb-warn); }
.tb-chip.crit { background: var(--sb-crit-soft); color: var(--sb-crit); }
.tb-chip.info { background: var(--sb-info-soft); color: var(--sb-info); }
.tb-chip.mudo { background: var(--sb-surface-2); color: var(--sb-muted); }

/* --- avisos --------------------------------------------------------------- */

.tb-avisos { list-style: none; margin: 0; padding: 0; }

.tb-avisos li { border-bottom: 1px solid var(--sb-line); }
.tb-avisos li:last-child { border-bottom: 0; }

.tb-avisos a {
  display: flex;
  align-items: center;
  gap: var(--sb-s3);
  padding: var(--sb-s3) var(--sb-s4);
  font-size: var(--sb-t-sm);
  color: var(--sb-ink-2);
  transition: background var(--sb-fast);
}

.tb-avisos a:hover { background: var(--sb-surface-2); text-decoration: none; color: var(--sb-ink); }
.tb-avisos a > .fa:first-child { flex: none; font-size: 1.1em; }
.tb-avisos a > span { flex: 1; min-width: 0; }
.tb-avisos a > .fa:last-child { flex: none; color: var(--sb-muted); font-size: .9em; }

.tb-avisos .crit > .fa:first-child { color: var(--sb-crit); }
.tb-avisos .warn > .fa:first-child { color: var(--sb-warn); }
.tb-avisos .info > .fa:first-child { color: var(--sb-info); }

/* --- tarjeta principal de bodega ------------------------------------------
   El número que manda el día, y tocarlo abre el lector. Es el destino
   habitual desde una tablet, así que ocupa lo que haría un botón grande.
   -------------------------------------------------------------------------- */

.tb-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sb-s2);
  padding: var(--sb-s5);
  border-radius: var(--sb-r);
  background: var(--sb-accent);
  color: #FFF;
  box-shadow: var(--sb-sh-2);
  transition: background var(--sb-base), transform var(--sb-base);
}

.tb-hero:hover { background: var(--sb-accent-h); color: #FFF; text-decoration: none; transform: translateY(-1px); }
.tb-hero:focus-visible { outline: none; box-shadow: var(--sb-ring); }

.tb-hero-eti {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: var(--sb-t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .8;
}

.tb-hero-cifra { display: flex; align-items: baseline; gap: var(--sb-s2); line-height: 1; }

.tb-hero-cifra b {
  font-size: clamp(3rem, 2rem + 4.5vw, 5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.tb-hero-cifra small { font-size: var(--sb-t-lg); font-weight: 500; opacity: .85; }

.tb-hero-pie { font-size: var(--sb-t-sm); opacity: .85; font-variant-numeric: tabular-nums; }
.tb-hero-pie b { font-weight: 600; opacity: 1; }

/* la columna de indicadores que acompaña a la tarjeta principal */
.tb-columna { display: flex; flex-direction: column; gap: var(--sb-s4); }
.tb-columna > * { flex: 1; }

/* --- distintivo de "aquí no se muestran montos" --------------------------- */

.tb-sinplata {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-left: auto;
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--sb-ok-soft);
  color: var(--sb-ok);
  font-size: var(--sb-t-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* --- listas: leyenda en línea y lista con unidad --------------------------- */

.tb-leyenda { flex-direction: row; flex-wrap: wrap; gap: var(--sb-s4); margin-top: var(--sb-s4); }

.tb-lista .apoyo { font-size: var(--sb-t-xs); color: var(--sb-muted); white-space: nowrap; }
.tb-lista .valor.es-crit { color: var(--sb-crit); }

/* las filas de "la operación hoy" se separan con una línea: son datos
   distintos, no una leyenda */
.tb-lista-ancha { gap: 0; }
.tb-lista-ancha li { padding: var(--sb-s2) 0; border-top: 1px solid var(--sb-line); }
.tb-lista-ancha li:first-child { border-top: 0; padding-top: 0; }

/* --- nota al pie de una tarjeta -------------------------------------------- */

.tb-pie-caja {
  margin: var(--sb-s4) 0 0;
  font-size: var(--sb-t-xs);
  color: var(--sb-muted);
}

/* un nombre de la lista puede ser un enlace sin dejar de recortarse */
.tb-rank .fila .nombre a { color: inherit; }
.tb-rank .fila .nombre a:hover { color: var(--sb-accent); }

/* --- resumen del sistema --------------------------------------------------- */

.tb-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--sb-s4);
}

.tb-cifras div { min-width: 0; }

.tb-cifras dt {
  font-size: var(--sb-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sb-muted);
  margin: 0 0 .2em;
}

.tb-cifras dd {
  margin: 0;
  font-size: var(--sb-t-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink);
}

/* --- vacío ----------------------------------------------------------------- */

.tb-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-s2);
  padding: var(--sb-s5) var(--sb-s4);
  text-align: center;
  color: var(--sb-muted);
  font-size: var(--sb-t-sm);
}

.tb-vacio > .fa { font-size: 1.6rem; color: var(--sb-line-2); }

@media (prefers-reduced-motion: reduce) {
  .tb-kpi, .tb-hero, .tb-globo, .tb-avisos a { transition: none; }
  .tb-hero:hover { transform: none; }
}