/* El tablero del administrador. Todo color sale de las variables de la paleta (estilos.css) y ningún estilo va en línea: lo que depende
   de un dato —el avance de una persona, cuántas ventas hay en una etapa— se dice con un <meter>. Las clases llevan el prefijo `tb-`
   porque «tablero» ya es el nombre de otra pantalla (el tablero de un curso en el taller).

   El color dice lo de siempre: naranja lo pendiente que pide una decisión, turquesa lo que está al día, violeta lo que se puede
   abrir. Con poco ancho, las tarjetas bajan de renglón y las dos columnas se vuelven una; las tablas se desplazan dentro de su caja
   en vez de ensanchar la página. */

.tb-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-bottom: 14px; }
.tb-cabecera .nota { max-width: 75ch; margin: 0; }
.tb-periodo { min-width: 200px; margin-bottom: 0; }

.tb-contenido { display: grid; gap: 4px; }
.tb-seccion { margin-top: 18px; min-width: 0; }
.tb-seccion > h3 { margin-top: 0; }
.tb-seccion h4 { margin: 14px 0 6px; font-size: 13px; color: var(--tenue); }
.tb-seccion > .nota { margin: 0 0 10px; }
.tb-seccion > button { margin-top: 10px; }

/* Lo esencial: una cifra por tarjeta, con su apoyo. Toda la tarjeta se pulsa. */
.tb-tarjetas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tb-tarjetas li { min-width: 0; }
.tb-tarjeta {
  width: 100%; height: 100%; display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; font-weight: 400;
}
.tb-tarjeta:hover, .tb-tarjeta:focus-visible { background: var(--acento-suave); border-color: var(--acento); }
/* El rótulo reserva dos renglones: las cifras de todas las tarjetas quedan a la misma altura aunque un rótulo largo se parta. */
.tb-titulo { font-size: 13px; line-height: 1.3; min-height: 2.6em; }
.tb-valor { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tb-apoyo { font-size: 12px; color: var(--tenue); }

.tb-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; align-items: start; }
.tb-columna { min-width: 0; }
@media (max-width: 900px) { .tb-columnas { grid-template-columns: minmax(0, 1fr); } }

/* Lo que requiere atención: naranja, el color de lo pendiente. */
.tb-atencion-lista li { display: grid; gap: 6px; border-left: 3px solid var(--alerta); }
.tb-atencion-texto { overflow-wrap: anywhere; }
.tb-muestra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--tenue); }
.tb-atencion-lista button { justify-self: start; }

/* El embudo de hoy: una barra por etapa. Las columnas del nombre y del monto miden lo mismo en todas las filas, así todas las barras
   tienen el mismo largo de pista y se leen contra la misma escala. */
.tb-etapas li { padding: 0; border: 0; }
.tb-etapa {
  width: 100%; display: grid; grid-template-columns: 8.75rem minmax(0, 1fr) 9.5rem; gap: 10px; align-items: center;
  text-align: left; padding: 8px 10px; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; font-weight: 400;
}
.tb-etapa:hover, .tb-etapa:focus-visible { background: var(--acento-suave); border-color: var(--acento); }
.tb-etapa meter { width: 100%; height: 14px; }
.tb-etapa-texto { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Las juntas: cuándo, con quién y si ya están preparadas. */
.tb-juntas li { padding: 0; border: 0; }
.tb-junta-boton {
  width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 12px; background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: 8px; font-weight: 400;
}
.tb-junta-boton:hover, .tb-junta-boton:focus-visible { background: var(--acento-suave); border-color: var(--acento); }
.tb-junta-boton .sub { color: var(--tenue); font-size: 13px; overflow-wrap: anywhere; }
.tb-junta-cuando { font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.tb-preparacion { justify-self: start; }
.etiqueta.tb-preparacion.al_dia { background: var(--cian-suave); color: var(--cian-tinta); }
.etiqueta.tb-preparacion.vieja, .etiqueta.tb-preparacion.falta { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.tb-preparacion.sin_venta { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
.tb-llamada { justify-self: start; }
.etiqueta.tb-llamada.lista { background: var(--cian-suave); color: var(--cian-tinta); }
.etiqueta.tb-llamada.incompleta { background: var(--alerta-suave); color: var(--alerta); }

.tb-caja-de-tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; }
.tb-tabla { min-width: 720px; margin-bottom: 0; }
/* La del consumo es de pocas columnas y números cortos: cabe en media pantalla sin desplazarse. */
.tb-tabla.tb-tabla-corta { min-width: 0; }
.tb-tabla th, .tb-tabla td { vertical-align: top; }
.tb-tabla th[scope="row"] { font-weight: 400; color: var(--texto); }
.tb-persona { display: grid; justify-items: start; gap: 2px; }
.tb-persona .sub { color: var(--tenue); font-size: 13px; }
.tb-tabla td { font-variant-numeric: tabular-nums; }
.tb-tabla td .sub { display: block; color: var(--tenue); font-size: 13px; }
.tb-avance { display: flex; align-items: center; gap: 8px; }
.tb-avance meter { width: 110px; height: 10px; flex: none; }

/* Training y licencia. */
.tb-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 10px; }
.tb-dato { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; }
.tb-dato dt { font-size: 12px; line-height: 1.3; min-height: 2.6em; color: var(--tenue); }
.tb-dato dd { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-cursos .tb-avance { padding-top: 2px; }
.tb-licencia-linea { margin: 0 0 6px; }