/* ===== Design tokens (calcados de dashboard-almacen para consistencia entre
   herramientas Japi) ===== */
:root{
  --mps:#E01F26; --green:#17924A; --amber:#B8860B; --amber-bg:#FCF3DC; --blue:#3E6FDB;
  /* Ronda 8: séptimo color de la barra de Estatus de Ruta. Antes la
     paleta daba la vuelta y repetía el ROJO en dos segmentos, que en
     una barra apilada se leen como si fueran lo mismo. */
  --violeta:#6A4FBF; --teal:#0E7C86;
  /* Ronda 6 item 6: Francisco pidió "el fondo de la página sutilmente
     distinto al de las tarjetas" y "sombras sutiles". El fondo baja de
     #EEF0F3 a #E7EAEF y la sombra se profundiza (ver --shadow): con el par
     anterior las tarjetas blancas se leían pegadas al fondo, planas. */
  --bg:#E7EAEF; --card:#FFFFFF; --card-2:#F7F8FA;
  --ink:#171A1F; --ink-2:#3A414B; --muted:#7C8593; --line:#E3E6EB;
  --ic-green-bg:#E4F4EB; --ic-red-bg:#FCEAEB; --ic-amber-bg:#FCF3DC; --ic-blue-bg:#E7EDFC; --ic-slate-bg:#EDF0F4;
  --shadow:0 1px 2px rgba(20,25,35,.06), 0 2px 4px rgba(20,25,35,.05), 0 10px 24px rgba(20,25,35,.09);
  --shadow-hi:0 2px 6px rgba(20,25,35,.08), 0 14px 34px rgba(20,25,35,.12);
  --grid-line:#EDF0F4;

  /* Ronda 6 item 5: --w-name sube de 220 a 244px -- el ícono de tendencia
     nuevo le comió ~16px a la columna y dos nombres ("Ventas Tiendas y
     Promotorías", "% Capacidad de Producción") se partían en dos líneas. */
  --w-num:32px; --w-owner:98px; --w-status:152px; --w-name:244px; --w-metaw:124px;
  /* FEEDBACK-ronda3 item 2: --w-expander había crecido de 30px a 60px al
     agregarle el encabezado "Semanas anteriores" (FEEDBACK-ronda2 A1) --
     Francisco lo reportó como demasiado ancho. Vuelve a angostarse a 42px
     (visiblemente más angosta que las columnas de semana) apoyándose en el
     encabezado en 2 líneas más pequeño de `.expander-label` (ver más abajo)
     para que el texto siga siendo legible sin agrandar la columna.
     FEEDBACK-ronda3 item 5: --w-week sube ligeramente (84->90px) para darle
     aire al "% resuelto <24h" que ahora se agrega debajo del conteo en la
     fila de Reclamos, sin que se vea apretado. */
  /* La proyección mide LO MISMO que sus dos vecinas (quetzales del mes), así
     que mide igual: 132px. Estuvo en 190px desde que el bloque derecho se hizo
     fijo el 31/08/2026, y se notaba como un escalón al final de la fila. */
  --w-week:90px; --w-mensual:132px; --w-mensual-meta:132px; --w-proyeccion:132px;
  --w-expander:42px;
  --en-curso-bg:#EAF1FD; --en-curso-ink:#2B5FBE;
  /* A3 (FEEDBACK-ronda4): columnas de META (Meta Semanal, Mensual Actual,
     Mensual Meta) -- tinte de fondo + línea de borde propios para que se
     lean como columnas de REFERENCIA, no como una semana más. */
  --goal-bg:#F1F3F7; --goal-line:#B9C0CC;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1015; --card:#181B22; --card-2:#1F232C;
    --ink:#F3F5F8; --ink-2:#C4CAD4; --muted:#8A93A2; --line:#282D37;
    --violeta:#9B85E8; --teal:#4FC3CE;
    --ic-green-bg:#122e20; --ic-red-bg:#2E1517; --ic-amber-bg:#2C2410; --ic-blue-bg:#1B2340; --ic-slate-bg:#222833;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.45);
    --shadow-hi:0 2px 8px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.6);
    --grid-line:#232833;
    --en-curso-bg:#152A47; --en-curso-ink:#8FB4F0;
    --goal-bg:#1B2028; --goal-line:#454D5C;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1015; --card:#181B22; --card-2:#1F232C;
  --ink:#F3F5F8; --ink-2:#C4CAD4; --muted:#8A93A2; --line:#282D37;
  --ic-green-bg:#122e20; --ic-red-bg:#2E1517; --ic-amber-bg:#2C2410; --ic-blue-bg:#1B2340; --ic-slate-bg:#222833;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.45);
  --shadow-hi:0 2px 8px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.6);
  --grid-line:#232833;
  --en-curso-bg:#152A47; --en-curso-ink:#8FB4F0;
  --goal-bg:#1B2028; --goal-line:#454D5C;
}
:root[data-theme="light"]{
  --bg:#EEF0F3; --card:#FFFFFF; --card-2:#F7F8FA;
  --ink:#171A1F; --ink-2:#3A414B; --muted:#7C8593; --line:#E3E6EB;
  --ic-green-bg:#E4F4EB; --ic-red-bg:#FCEAEB; --ic-amber-bg:#FCF3DC; --ic-blue-bg:#E7EDFC; --ic-slate-bg:#EDF0F4;
  --shadow:0 1px 2px rgba(20,25,35,.05), 0 6px 18px rgba(20,25,35,.07);
  --shadow-hi:0 2px 6px rgba(20,25,35,.08), 0 14px 34px rgba(20,25,35,.12);
  --grid-line:#EDF0F4;
  --en-curso-bg:#EAF1FD; --en-curso-ink:#2B5FBE;
  --goal-bg:#F1F3F7; --goal-line:#B9C0CC;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
.dash{min-height:100vh;display:flex;flex-direction:column;gap:10px;padding:14px 18px}
.muted{color:var(--muted)}

/* ===== Header ===== */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.logo{background:linear-gradient(160deg,#2a2d33,#0c0d10);color:#fff;font-weight:800;letter-spacing:.5px;
  padding:8px 12px;border-radius:11px;font-size:15px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.brand-txt h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.brand-txt p{margin:2px 0 0;font-size:13px;color:var(--muted);font-weight:500}
.top-right{display:flex;align-items:center;gap:12px}
.btn{font:inherit;font-weight:700;font-size:13px;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;text-decoration:none;
  display:inline-block}
.btn:hover{background:var(--card-2)}
/* Pedido CEO ronda 5 item 4: el aviso pasaba desapercibido (chiquito, sin
   fondo, 2.5s) -- ahora es una píldora de color con más tamaño; sin estado
   (ok/err) no ocupa espacio ni se ve nada, así que no estorba el resto del
   tiempo. La confirmación en el propio botón (`.btn.save-ok`, más abajo) es
   el refuerzo principal -- este aviso es el respaldo para guardados que no
   pasan por un botón individual visible en pantalla. */
.save-status{font-size:14px;font-weight:800;text-align:right;border-radius:8px}
.save-status.ok{color:var(--green);background:var(--ic-green-bg);padding:7px 14px}
.save-status.err{color:var(--mps);background:var(--ic-red-bg);padding:7px 14px}

/* ===== Tabla con freeze de columnas y encabezado ===== */
.grid-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);
  max-height:calc(100vh - 150px);min-height:480px;
  /* item 7: espacio de sobra al fondo para que el scrollbar horizontal
     (que vive DENTRO de este contenedor con overflow:auto) nunca tape la
     última fila de la tabla. */
  padding-bottom:18px}
table.grid{border-collapse:separate;border-spacing:0;font-size:12.5px;white-space:nowrap;width:max-content}
.grid th,.grid td{padding:5px 7px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  background:var(--card)}
.grid thead th{position:sticky;top:0;z-index:2;background:var(--card-2);font-weight:700;
  color:var(--ink-2);font-size:11.5px;line-height:1.25;
  /* item 1: default de encabezados es texto -> izquierda. Las columnas
     numéricas se vuelven a alinear a la derecha (o centro) más abajo con
     selectores más específicos (clase+clase) para que SIEMPRE ganen sobre
     esta regla, sin depender del orden de aparición en el archivo. */
  text-align:left}
.grid .frozen{position:sticky;z-index:1;background:var(--card)}
.grid thead .frozen{z-index:3}
.grid tbody tr:hover td{background:var(--card-2)}
.grid tbody tr:hover td.frozen{background:var(--card-2)}
.grid tbody tr:hover td.col-en-curso{background:var(--en-curso-bg)}

.col-num{left:0;width:var(--w-num);text-align:center;color:var(--muted)}
.col-owner{left:var(--w-num);width:var(--w-owner);text-align:left}
.col-status{left:calc(var(--w-num) + var(--w-owner));width:var(--w-status);text-align:center}
.col-name{left:calc(var(--w-num) + var(--w-owner) + var(--w-status));width:var(--w-name);
  white-space:normal;text-align:left}
/* A2 (FEEDBACK-ronda4): con el expander "+" fuera de la tabla (ver
   .expander-bar más abajo), Meta Semanal vuelve a ser la ÚLTIMA columna
   frozen -- el divisor de sombra que marcaba el borde del bloque fijo se
   mueve de col-name a acá, donde de verdad termina el freeze ahora. */
.col-metaw{left:calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name));
  width:var(--w-metaw);text-align:right;box-shadow:2px 0 4px -2px rgba(0,0,0,.08)}
.col-week{width:var(--w-week);text-align:right;font-weight:600}
.col-mensual{width:var(--w-mensual);min-width:var(--w-mensual);max-width:var(--w-mensual);text-align:right}
.col-mensual.col-proyeccion{width:var(--w-proyeccion);min-width:var(--w-proyeccion);max-width:var(--w-proyeccion)}
.col-mensual-meta{width:var(--w-mensual-meta)}
.col-notas{min-width:190px;text-align:left;white-space:normal}

/* ===== A3 (FEEDBACK-ronda4): columnas de META (Meta Semanal, Mensual
   Actual, Mensual Meta) -- deben leerse como columnas de REFERENCIA, no
   como una semana más. Francisco pidió explícitamente "un borde más ancho";
   se suma también un tinte de fondo propio y encabezado más pesado, sobrio
   (mismos tokens de tema, sin colores nuevos "gritones"). `.col-goal` es
   compartida por las 3 <th>/<td>; el borde grueso va en los bordes
   EXTERIORES de cada grupo -- Meta Semanal es un grupo de 1 columna (lleva
   los dos bordes); Mensual Actual + Mensual Meta son un grupo de 2 (el
   borde grueso va solo en el IZQUIERDO de Actual y el DERECHO de Meta,
   nunca entre ambas, para que se lean como UN bloque de referencia). */
.grid td.col-goal,.grid th.col-goal{background:var(--goal-bg)}
.grid tbody tr:hover td.col-goal{background:var(--goal-bg)}
.grid thead th.col-goal{font-weight:800}
.grid td.col-metaw.col-goal,.grid th.col-metaw.col-goal{
  border-left:2px solid var(--goal-line);border-right:2px solid var(--goal-line)}
/* La línea GRUESA solo abre el bloque de referencia (antes de Mensual Actual)
   y lo cierra (después de Proyección). Entre Mensual Actual, Mensual Meta y
   Proyección va la línea normal de la cuadrícula -- Francisco: *"no debería
   ser tan fuerte (...) para que se entienda como que esas tres van juntas"*.
   `col-proyeccion` también lleva `col-mensual`, así que sin excluirla acá se
   comía un borde de 2px justo donde él lo señaló. */
.grid td.col-mensual.col-goal:not(.col-mensual-meta):not(.col-proyeccion),
.grid th.col-mensual.col-goal:not(.col-mensual-meta):not(.col-proyeccion){
  border-left:2px solid var(--goal-line)}
/* FEEDBACK-ronda7: el borde GRUESO que cierra el bloque de referencia se mudó
   de Mensual Meta a Proyección fin de mes. Proyección entró después de Mensual
   Meta y quedaba FUERA del recuadro, "cortada" -- Francisco: *"no se tiene que
   sentir cortado; la línea divisoria debe ser la misma, muy delgadita, y hasta
   después de proyección viene la línea gruesa"*. Entre Mensual Meta y
   Proyección va la línea normal de la cuadrícula, no una de 2px. */
.grid td.col-proyeccion.col-goal,.grid th.col-proyeccion.col-goal{
  border-right:2px solid var(--goal-line)}

/* FEEDBACK-ronda3 item 5: Reclamos es DUAL (# ingresados + % resuelto <24h,
   ver DESIGN §3 #9) -- `valor_secundario` se pinta como una segunda línea
   compacta debajo del conteo, SOLO cuando la fila lo trae (cualquier otro
   indicador nunca la muestra). Reutiliza el lenguaje visual de
   `.col-week-hint` (Ingreso Manual): chico, apagado, sin agrandar el resto
   de filas de la tabla. */
.week-sub{display:block;font-size:9.5px;font-weight:600;color:var(--muted);line-height:1.2;margin-top:1px}

/* item 11: preview de Notas — una sola línea truncada con "…" para que la
   celda/fila NUNCA crezca; el texto completo vive en el <textarea> oculto
   (.notas-full) y se edita en el popover (ver .notas-modal-*). */
.notas-trigger{display:block;width:100%;max-width:100%;font:inherit;font-size:12.5px;
  color:inherit;background:transparent;border:1px solid transparent;border-radius:5px;
  padding:3px 5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer}
.notas-trigger:hover{border-color:var(--line);background:var(--card-2)}
.notas-trigger:focus-visible{outline:none;border-color:var(--muted);background:var(--card)}
.notas-trigger.notas-empty{color:var(--muted);font-style:italic}

/* item 10: columna "En curso" (semana todavía-no-cerrada) — visualmente
   distinta de las semanas ya congeladas: fondo/tinte propio, encabezado en 2
   líneas, siempre la última columna. */
.col-week.col-en-curso{background:var(--en-curso-bg);color:var(--en-curso-ink);
  border-left:2px solid var(--en-curso-ink)}
.grid thead th.col-en-curso{background:var(--en-curso-bg);color:var(--en-curso-ink);
  border-left:2px solid var(--en-curso-ink);text-align:center;font-size:10.5px;line-height:1.3}
.col-week.col-en-curso.st-green,.col-week.col-en-curso.st-red,.col-week.col-en-curso.st-yellow{
  background:var(--en-curso-bg);color:var(--en-curso-ink)}

/* Encabezados numéricos: selectores clase+clase para ganarle en especificidad
   al `.grid thead th{text-align:left}` de arriba sin importar el orden.
   FEEDBACK-ronda3 item 1: Francisco reportó los encabezados (fechas de
   semana, Meta Semanal, Mensual Actual, Mensual Meta) alineados a la
   derecha -- calzaban con los números de abajo pero se veían raros como
   TÍTULO de columna. Van CENTRADOS (más legible que a la izquierda para
   textos cortos de 1-2 palabras); los VALORES numéricos de las celdas de
   datos (`.col-week{text-align:right}` general, más abajo) NO cambian. */
.grid thead th.col-num{text-align:center}
.grid thead th.col-status{text-align:center}
.grid thead th.col-metaw,
.grid thead th.col-week,
.grid thead th.col-mensual{text-align:center}

/* ===== A2 (FEEDBACK-ronda4): "+" de semanas anteriores, AHORA FUERA de la
   tabla. Vive DENTRO de `.grid-wrap` (el contenedor con scroll horizontal)
   pero ANTES del `<table>`, como una barra angosta en el margen -- así se
   desplaza en sincronía con las columnas de semana al hacer scroll lateral
   (nunca se queda "pegado" como las columnas frozen de título) e igual se
   ve siempre alineado sobre la semana más vieja. El spacer replica el ancho
   EXACTO del bloque frozen de título (num+dueño+status+nombre+meta semanal)
   -- mismo cálculo que usan esas columnas para su propio `left`. Afordancia
   calcada del "+" de expandir/contraer de Google Sheets/Excel: cuadrito
   compacto con borde punteado, sin texto (el título/aria-label llevan la
   explicación completa). */
.expander-bar{display:flex;align-items:center;padding:0 0 5px;width:max-content}
/* NOTA: la regla que la vuelve `sticky` está más abajo, junto al resto del
   bloque del expander de ronda 6 -- acá solo su caja. */
.expander-bar-spacer{flex:0 0 calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw));
  min-width:calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw))}
.expander-btn-outer{display:flex;align-items:center;justify-content:center;
  width:var(--w-expander);min-width:var(--w-expander);height:24px;margin:0;border-radius:6px;
  text-decoration:none;color:var(--ink-2);font-weight:800;cursor:pointer;
  background:var(--card);border:1px dashed var(--muted)}
.expander-btn-outer:hover{background:var(--card-2);border-style:solid;border-color:var(--ink-2);color:var(--ink)}
/* A1: feedback inmediato al clic (ver scorecard.js) -- se aplica un instante
   antes de navegar a `?semanas=...`, para que el usuario SIEMPRE vea que el
   clic "hizo algo" aunque el reload sea casi inmediato. */
.expander-btn-outer.is-loading{opacity:.6;pointer-events:none;cursor:progress}
/* Ronda 6 item 4: el "+" vive DENTRO del área con scroll horizontal, así que
   al abrir la tabla en la semana más RECIENTE (ver `scorecard.js`) se quedaba
   fuera de pantalla, a la izquierda. Sticky lo deja siempre pegado al borde
   izquierdo del bloque de semanas -- alcanzable sin importar dónde esté el
   scroll, y sin dejar de estar alineado sobre la columna más vieja. */
.expander-bar{position:sticky;left:0;z-index:4}
.expander-btn-outer-icon{font-size:15px;line-height:1}

/* ===== A1 (FEEDBACK-ronda4): columna "cargando" -- una semana pedida (carga
   inicial o expander) que el backfill de fondo todavía no congela (ver
   app._backfill_semanas_faltantes/scheduler.congelar_semana). Placeholder
   SUTIL a propósito: mismo tamaño de columna que una semana real, fondo/
   texto apagados (mismos tokens que el resto del tema) + puntos con un
   pulso lento -- para que se note "esto se está cargando" sin gritar ni
   romper el layout ni parecer un error. Se llena sola en una carga
   siguiente (auto-refresco modesto mientras haya pendientes, ver
   scorecard.js) cuando el job de fondo ya congeló la semana. */
.col-week.col-pending{background:var(--card-2);color:var(--muted)}
.grid thead th.col-week.col-pending{background:var(--card-2);color:var(--muted);
  font-weight:600;font-size:10.5px}
.cell-pending-dots{display:inline-block;letter-spacing:1px;animation:pending-pulse 1.4s ease-in-out infinite}
@keyframes pending-pulse{0%,100%{opacity:.35}50%{opacity:.9}}

.ind-name{cursor:help;border-bottom:1px dotted var(--muted)}

/* ===== Drill-down (item 13 / R3): shell de sub-filas expandibles =====
   El chevron vive junto al nombre del indicador (col-name). Las sub-filas
   insertadas por scorecard.js reutilizan .frozen en las mismas columnas
   (num/owner/status/name/metaw/expander) para que el freeze siga
   funcionando igual estando expandidas; el desglose en sí vive en una sola
   celda ancha (.drill-value, colspan sobre semanas+mensual+notas) que
   arranca alineada bajo "Indicador". Estilo deliberadamente subordinado:
   fondo distinto, texto más chico/apagado, indentado — para que nunca se
   confunda con una fila de indicador de primer nivel. */
.drill-toggle{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  margin-right:3px;border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-size:10px;line-height:1;padding:0;border-radius:4px;transition:transform .12s ease;
  vertical-align:middle}
.drill-toggle:hover{color:var(--ink);background:var(--card-2)}
.drill-toggle[aria-expanded="true"]{transform:rotate(90deg);color:var(--ink-2)}

.drill-subrow td{background:var(--card-2);color:var(--muted);font-size:11px;font-weight:500}
.drill-subrow td.frozen{background:var(--card-2)}
.drill-subrow:hover td{background:var(--card-2)}
.drill-subrow:hover td.frozen{background:var(--card-2)}
.drill-subrow .drill-indent{padding-left:27px;white-space:nowrap;overflow:hidden}
.drill-subrow .drill-value{text-align:left;color:var(--ink-2);font-weight:600;white-space:nowrap}
.drill-subrow-empty .drill-indent,.drill-subrow-empty .drill-value{font-style:italic;color:var(--muted);font-weight:500}
/* Ronda 6 item 3: un mensaje explicativo no puede quedar cortado por el ancho
   de la columna del nombre -- ocupa la celda ancha y se envuelve. */
.drill-subrow-empty .drill-value{white-space:normal;line-height:1.45;padding:6px 10px}
/* El contenido del desglose se queda pegado justo a la derecha del bloque de
   columnas fijas, sin importar dónde esté el scroll horizontal. */
.drill-value-inner{position:sticky;display:inline-block;max-width:640px;
  left:calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw) + 8px)}
.drill-subrow-empty .drill-value-inner{white-space:normal}
/* "Esto sí debería tener desglose y todavía no está construido" se distingue
   de "este indicador es un solo número": es trabajo pendiente, no un límite. */
.drill-subrow-pendiente td{background:var(--ic-blue-bg)}
.drill-subrow-pendiente .drill-value{color:var(--en-curso-ink);font-style:normal;font-weight:600}

/* ===== Ronda 6 item 4: columnas recién traídas por el "+" =====
   Entran por la IZQUIERDA, que es donde la tabla NO está parada (abre en la
   semana más reciente) -- sin un resalte temporal el clic parecía no hacer
   nada. El aviso de arriba dice el rango; esto lo señala en la cuadrícula.
   Se apaga solo a los ~6s (lo quita el JS). */
.col-week.col-nueva{box-shadow:inset 0 0 0 1px var(--blue)}
.grid thead th.col-week.col-nueva{background:var(--ic-blue-bg);color:var(--en-curso-ink)}
.expander-aviso{margin:0 0 8px;padding:7px 12px;border-radius:8px;background:var(--ic-blue-bg);
  color:var(--en-curso-ink);font-size:12.5px;font-weight:700;border:1px solid var(--en-curso-ink);
  transition:opacity .4s}
.expander-aviso.fade{opacity:0}

/* ===== Color coding sobrio por status/dirección ===== */
.col-week.st-green{background:var(--ic-green-bg);color:var(--green)}
.col-week.st-red{background:var(--ic-red-bg);color:var(--mps)}
.col-week.st-yellow{background:var(--ic-amber-bg);color:var(--amber)}
.col-week.st-none{color:var(--muted)}

/* Ronda 6 item 2: el semáforo tiene que GRITAR. Antes era solo texto de color
   sobre fondo transparente (con la opción "Auto" en gris, indistinguible de
   una celda vacía). Ahora es una pastilla con fondo, borde y negrita: se lee
   de un vistazo desde lejos, que es todo el punto de un semáforo. ⚪ Sin dato
   se queda deliberadamente apagado y sin color -- no es un status, es la
   ausencia de uno. */
.status-select{font-weight:800;border-radius:999px;padding:4px 8px;text-align:center;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.status-select.st-green{color:var(--green);background:var(--ic-green-bg);border-color:var(--green)}
.status-select.st-red{color:var(--mps);background:var(--ic-red-bg);border-color:var(--mps)}
.status-select.st-yellow{color:var(--amber);background:var(--ic-amber-bg);border-color:var(--amber)}
.status-select.st-sindato{color:var(--muted);background:transparent;border-color:var(--line);font-weight:600}
/* Subtítulo del encabezado Status: la fecha de la semana que lo dicta. */
.grid thead th .th-sub{display:block;font-size:9.5px;font-weight:600;color:var(--muted);
  letter-spacing:.2px;text-transform:none}

/* ===== Celdas editables ===== */
.cell-input{font:inherit;font-size:12.5px;color:inherit;background:transparent;border:1px solid transparent;
  border-radius:5px;padding:3px 5px;width:100%;text-align:inherit}
/* item 9: Meta Semanal / Mensual Meta ahora son <input type="text"> (no
   spinner posible en text, pero se refuerza por si algún navegador o campo
   futuro vuelve a usar type=number) alineados a la derecha por ser numéricos. */
.editable-metaw,.editable-mensual-meta{text-align:right}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.no-spinner[type="number"]{-moz-appearance:textfield}
.cell-input:hover{border-color:var(--line)}
.cell-input:focus{outline:none;border-color:var(--muted);background:var(--card)}
.cell-input.saving{opacity:.55}
.cell-input.save-err{border-color:var(--mps);background:var(--ic-red-bg)}
select.cell-input{appearance:auto;cursor:pointer}

/* FEEDBACK-ronda3 item 4: las celdas editables (Meta Semanal, Mensual Meta,
   Dueño, Status, el trigger de Notas) se veían idénticas a las de solo
   lectura -- sobre todo en modo oscuro, donde un borde `transparent` es
   invisible. `.editable-field` (clase compartida por los 5 campos, además
   de sus clases propias como `.cell-input`/`.notas-trigger`) les pone un
   borde tenue + fondo apenas distinto EN REPOSO -- ambos ya definidos como
   variables de tema (`--line`/`--card-2`), así que funcionan igual en claro
   y oscuro sin tokens nuevos -- y un estado hover/focus más marcado
   (`--muted`) para que se note claramente dónde se puede escribir. Sutil a
   propósito: mismo peso visual que el resto del diseño, nada de bordes
   gruesos ni colores nuevos. Se declara DESPUÉS de `.cell-input`/
   `.notas-trigger` (mismo peso de especificidad, una sola clase) para que
   gane por orden de aparición sin necesitar !important. */
.editable-field{border-color:var(--line);background:var(--card-2)}
.editable-field:hover{border-color:var(--muted)}
.editable-field:focus,.editable-field:focus-visible{border-color:var(--muted);background:var(--card)}

/* Arreglo bug CEO (17/08/2026): Meta Semanal derivada de la meta mensual
   (nadie tecleó una propia) -- el número se ve en el placeholder, nunca en
   `value` (así nunca se confunde con una meta que alguien guardó a mano).
   Estilo del placeholder explícito en cursiva + `--muted`, más marcado que
   el gris por defecto del navegador, para que la diferencia salte a la
   vista sin agregar un color nuevo al sistema. */
.meta-derivada::placeholder{color:var(--muted);font-style:italic;opacity:1}

.hint{font-size:12px;margin:2px 2px 4px}

/* ===== Plan popover (item 11 + FEEDBACK-ronda2 A4) — pop-up centrado sobre
   la columna de Notas con TÍTULO (una línea) arriba y DESCRIPCIÓN (párrafo)
   abajo; no cambia el alto de la fila de la tabla (la celda sigue truncada).
   Overlay + tarjeta centrada, paleta sobria igual al resto del dashboard. ===== */
.notas-modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,16,.45);
  z-index:50;align-items:center;justify-content:center;padding:20px}
.notas-modal-overlay.open{display:flex}
.notas-modal{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);padding:18px 20px;width:min(560px,100%);
  display:flex;flex-direction:column;gap:10px}
.notas-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notas-modal-title{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
/* A4: la X de cierre pedida explícitamente por Francisco -- cierra sin
   guardar, igual que Escape o clic fuera de la tarjeta. */
.notas-modal-close{font:inherit;font-size:18px;line-height:1;color:var(--muted);
  background:transparent;border:none;cursor:pointer;padding:2px 7px;border-radius:6px}
.notas-modal-close:hover{background:var(--card-2);color:var(--ink)}
.notas-modal-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin:2px 0 -5px}
.notas-modal-titulo-input{font:inherit;font-size:14px;font-weight:700;color:var(--ink);
  background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.notas-modal-titulo-input:focus{outline:none;border-color:var(--muted);background:var(--card)}
.notas-modal-textarea{font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);
  background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  min-height:150px;resize:vertical;white-space:pre-wrap}
.notas-modal-textarea:focus{outline:none;border-color:var(--muted)}
.notas-modal-err{margin:0;min-height:15px;font-size:12px;font-weight:600;color:var(--mps)}
.notas-modal-actions{display:flex;justify-content:flex-end;gap:8px}

/* ===== Tabs (Semanal / Ingreso Manual) ===== */
.tabs{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.tab{font:inherit;font-weight:700;font-size:12.5px;color:var(--muted);text-decoration:none;
  padding:6px 12px;border-radius:7px}
.tab:hover{color:var(--ink-2)}
.tab.tab-active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ===== Ingreso Manual: selector de dueño (item 14, R4) — cada quien ve
   SOLO su(s) sección(es); nada de todo abierto a la vez. ===== */
.owner-tabs{display:flex;gap:6px;flex-wrap:wrap}
.owner-tab{font:inherit;font-weight:700;font-size:13px;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:7px 16px;cursor:pointer}
.owner-tab:hover{color:var(--ink-2);background:var(--card-2)}
.owner-tab.owner-tab-active{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* ===== Ingreso Manual: tarjetas por indicador (R4: rediseño items 14-18) ===== */
.manual-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.manual-card.owner-hidden{display:none}
.manual-card h2{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.manual-card > p.muted{margin:0;font-size:12px;max-width:760px}
.manual-card .grid-wrap{max-height:none}
.manual-grid{width:max-content}
/* item 15: freeze DEDICADO a Ingreso Manual. A diferencia del Semanal (que
   apila columnas num/owner/status antes del nombre y por eso `.col-name`
   trae un `left` calculado con esos anchos), acá la única columna fija es
   la de cuenta/campo — siempre pegada a `left:0`. Reusar `.col-name` del
   Semanal fue el bug reportado: desplazaba la columna fija ~280px y hacía
   que ingresos/egresos de la primera semana visible quedaran "encimados"
   al hacer scroll lateral. */
.manual-grid .frozen{left:0;box-shadow:2px 0 4px -2px rgba(0,0,0,.08)}
.manual-col-label{width:196px;min-width:196px;white-space:normal;text-align:left;font-weight:700}
.manual-grid .col-week{width:152px}
.manual-grid thead .col-week{text-align:center}
.col-week-hint{display:block;font-size:9.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-top:1px}

/* item 16/18: UNA fila por cuenta, dos inputs COMPACTOS lado a lado (no
   apilados con etiqueta encima como antes) -> la fila mide una sola línea
   de alto en vez de un bloque de dos renglones -> tabla mucho más baja.
   OJO: el flex va en un <div> ADENTRO del <td>, nunca en el <td> mismo —
   un <td> con display:flex se "blockifica" (CSS Display L3) y pierde su
   comportamiento de celda de tabla, rompiendo el layout de toda la fila. */
.manual-cell{padding:4px 6px}
.ie-pair{display:flex;gap:4px}
.ie-input{width:68px;text-align:right;font-size:11.5px;padding:3px 4px}
.manual-cell-readonly{text-align:center;font-weight:800;color:var(--ink-2);background:var(--card-2)}
.manual-save-row td{background:var(--card-2);text-align:center;padding:5px}
.manual-save-row .btn{width:100%;text-align:center;padding:5px 8px;font-size:12px}
.manual-save-row .btn.save-err{border-color:var(--mps);background:var(--ic-red-bg);color:var(--mps)}
/* Item 4: el propio botón confirma el guardado (además del aviso de arriba)
   -- "✓ Guardado" en verde unos segundos, aplica tanto en Metas como en
   Ingreso Manual porque ambos botones de guardar viven dentro de un
   `.manual-save-row`. */
.manual-save-row .btn.save-ok{border-color:var(--green);background:var(--ic-green-bg);color:var(--green)}

/* ================================================================
   Dashboard con gráficos (/graficos) — FEEDBACK-ronda2 B1.
   Lenguaje visual calcado de dashboard-almacen (ver DESIGN.md/FEEDBACK-
   ronda2 "Lenguaje visual del dashboard de ALMACÉN"): divisores de sección
   con raya corta + MAYÚSCULAS, tarjeta con ícono en cuadrito + píldora de
   estado, números grandes con color semántico, dona con % al centro +
   panel de niveles, barras pareadas con delta anotado, barra apilada
   segmentada con leyenda en grilla. Todo dibujado con SVG/CSS propios —
   sin librerías de gráficas externas. ================================ */

@property --pct{ syntax:'<number>'; inherits:false; initial-value:0; }

.viz-dash .top-right{gap:12px}

/* ---- Rótulo de área: raya corta + etiqueta MAYÚSCULAS ----
   FEEDBACK-ronda8 W2: antes esto era `.viz-eyebrow`, una banda a TODO LO
   ANCHO arriba de cada área. Francisco: "sigues creyendo que para cada área
   hay que darle como ENTER y ponerlo abajo (...) pueden vivir en la misma
   línea de tarjetas contabilidad y operaciones pero tienen sus títulos para
   diferenciar". Ahora el rótulo vive DENTRO de su grupo (`.area-grupo`), que
   ocupa solo su pedazo de ancho, así que dos o tres áreas comparten renglón.
   Queda chico (11px) a propósito: es una etiqueta de grupo, no un titular
   que compita con los números. */
.area-label{display:flex;align-items:center;gap:7px;margin:0 2px 1px;font-size:11px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.area-bar{width:14px;height:4px;border-radius:3px;flex:0 0 auto}

/* ---- Tarjeta base ---- */
.viz-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  gap:6px;min-width:0;text-decoration:none;color:inherit;position:relative;
  transition:transform .15s ease, box-shadow .15s ease}
a.viz-card{cursor:pointer}
a.viz-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi);border-color:var(--muted)}
.viz-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.viz-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.viz-ic svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viz-ic-mps{background:var(--ic-red-bg)} .viz-ic-mps svg{stroke:var(--mps)}
.viz-ic-blue{background:var(--ic-blue-bg)} .viz-ic-blue svg{stroke:var(--blue)}
.viz-ic-amber{background:var(--ic-amber-bg)} .viz-ic-amber svg{stroke:var(--amber)}
.viz-ic-green{background:var(--ic-green-bg)} .viz-ic-green svg{stroke:var(--green)}
.viz-ic-slate{background:var(--ic-slate-bg)} .viz-ic-slate svg{stroke:var(--ink-2)}
.viz-title{font-size:14px;font-weight:750;color:var(--ink);letter-spacing:-.01em;margin:0;line-height:1.2}

.viz-pill{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.viz-pill-green{color:var(--green);background:var(--ic-green-bg)}
.viz-pill-red{color:var(--mps);background:var(--ic-red-bg)}
.viz-pill-yellow{color:var(--amber);background:var(--ic-amber-bg)}
.viz-pill-none{color:var(--muted);background:var(--card-2)}

/* ---- Fila resumen: héroe + comparativa + semáforo ---- */
.viz-row-resumen{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin-top:8px}

/* ---- Héroe: dona (conic-gradient, igual patrón que almacen .gauge) + niveles ---- */
.hero-card .viz-title{font-size:15px}
/* La dona vive ahora dentro de la tarjeta fusionada de Ventas Japi
   (`.hero-fusion-dona`, FEEDBACK-ronda8 W2 punto 3) -- antes tenía tarjeta
   propia (`.hero-gauge-wrap`). Su tamaño escala con el ALTO de la ventana:
   en la tele se ve grande, en una laptop no empuja la página hacia abajo. */
.hero-fusion-dona{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;flex:0 0 auto}
.hero-fusion-dona .gauge{--pct:0;--gc:var(--green);
  width:clamp(86px,12vh,124px);height:clamp(86px,12vh,124px);border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--gc) calc(var(--pct)*1%), var(--grid-line) 0);
  display:grid;place-items:center;position:relative;transition:--pct .6s ease}
.hero-fusion-dona .gauge::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.hero-fusion-dona .gauge-pct{font-size:clamp(21px,3vh,29px)}
.gauge-center{position:relative;z-index:1;text-align:center}
.gauge-pct{font-size:24px;font-weight:850;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.gauge-sub{font-size:10px}
.goal-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;background:var(--card-2);
  border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.glv{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;column-gap:8px;
  font-size:11.5px;padding:4px 5px;border-radius:6px}
.glv .glv-name{font-weight:700;color:var(--ink-2)}
.glv b{font-weight:850;color:var(--ink);font-size:13px;text-align:right;white-space:nowrap}
.glv-pct{font-weight:800;font-size:11px;text-align:right;min-width:56px}
.glv-pct.green{color:var(--green)}
.glv.alcanzado{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 14%,transparent),transparent)}
.glv.alcanzado .glv-name{color:var(--green);font-weight:800}
.hero-abs{margin-top:10px;font-size:25px;font-weight:900;letter-spacing:-.02em}
.hero-abs .muted{font-size:14px;font-weight:650}
/* item 1/R2-B1: "barras GRUESAS" -- la barra de progreso del héroe (la
   tarjeta más importante del dashboard) pasa de 8px a 12px. */
.progress-track{height:12px;background:var(--grid-line);border-radius:7px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:7px;transition:width .6s ease}
/* Mini cajas "Faltan para la meta" / "días restantes" / "ritmo necesario"
   (benchmark bono14): número arriba, rótulo abajo. Antes iban en línea
   (número y rótulo lado a lado) y con tres cajas en el ancho de una tarjeta
   se partían feo. */
.hero-falta{display:flex;flex-direction:column;gap:1px;padding:7px 9px;
  background:var(--card-2);border:1px solid var(--line);border-radius:9px}
.hero-falta b{font-size:clamp(13px,1.8vh,16px);font-weight:850;color:var(--ink);
  line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-falta .muted{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.2}
.hero-falta-ok{background:var(--ic-green-bg)}
.hero-falta-ok b{color:var(--green);font-size:13px}

/* ---- Comparativa: barras pareadas con % de delta anotado encima ---- */
.compare-card{align-items:stretch}
.compare-delta{align-self:center;font-size:22px;font-weight:850;letter-spacing:-.02em;margin:2px 0}
.compare-delta.green{color:var(--green)} .compare-delta.red{color:var(--mps)}
.compare-bars{display:flex;justify-content:center;align-items:flex-end;gap:26px;flex:1;padding-bottom:2px}
.compare-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.compare-bar-val{font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.compare-track{position:relative;width:38px;height:100px;background:var(--card-2);border-radius:8px 8px 3px 3px;overflow:hidden}
.compare-bar{position:absolute;bottom:0;left:0;width:100%;border-radius:6px 6px 0 0;background:var(--muted);
  transition:height .6s ease}
.compare-bar.current{background:var(--mps)}
.compare-bar-cat{font-size:10.5px;text-align:center}

/* ---- Semáforo: barra apilada segmentada + leyenda en grilla ---- */
.stack{display:flex;height:26px;border-radius:8px;overflow:hidden;gap:2px;margin:4px 0 10px;background:var(--grid-line)}
.stack .seg{height:100%;min-width:3px}
.seg-green{background:var(--green)} .seg-yellow{background:var(--amber)}
.seg-red{background:var(--mps)} .seg-none{background:var(--muted)}
.viz-legend-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.viz-legend-grid li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.viz-legend-grid li em{margin-left:auto;font-style:normal;color:var(--muted);font-size:10.5px}
.viz-legend-grid li b{min-width:18px;text-align:right;font-weight:850;color:var(--ink);font-size:13px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.sw-green{background:var(--green)} .sw-yellow{background:var(--amber)}
.sw-red{background:var(--mps)} .sw-none{background:var(--muted)}

/* ---- Gráfica compartida (multi-serie, misma escala) ---- */
.ventas-chart-card{margin-top:6px}
.viz-legend.chip-legend{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.chip-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.chip-legend .sw{border-radius:50%}
.multi-chart-wrap{width:100%}
/* La gráfica multi-serie usa preserveAspectRatio="none", así que se puede fijar
   la altura sin letterboxing. Con height:auto ocupaba ~375px (≈40% del alto del
   dashboard) y dejaba mucho aire muerto; 240px la vuelve densa y legible. */
.multi-svg{width:100%;height:240px;display:block}
.multi-grid{stroke:var(--grid-line);stroke-width:1}

/* ---- Grilla de tarjetas KPI por área ----
   R2-B1: números ENORMES con color semántico + delta AL LADO (no en una
   línea aparte) -- benchmark bono14/almacén ("412 / 388 ... -6%"). */
.viz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;margin-bottom:6px}
.viz-body{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:4px}
.viz-num-wrap{display:flex;flex-direction:column;gap:1px;min-width:0}
.viz-num{font-size:clamp(26px,3.1vw,36px);font-weight:900;letter-spacing:-.02em;line-height:1;
  display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.viz-num-green{color:var(--green)} .viz-num-red{color:var(--mps)}
.viz-num-yellow{color:var(--amber)} .viz-num-none{color:var(--ink)}
.viz-num-delta{font-size:13px;font-weight:800;white-space:nowrap}
.viz-num-delta.green{color:var(--green)} .viz-num-delta.red{color:var(--mps)} .viz-num-delta.muted{color:var(--muted)}
.viz-num-sub{font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.viz-spark{flex:0 0 auto}
.spark-svg{width:96px;height:30px;display:block}
.viz-meta-line{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:11.5px;line-height:1.3;margin-top:3px}
.viz-meta-line .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.viz-owner{flex:0 0 auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
/* R2-B1: "barras GRUESAS" -- de 5px a 7px, con más margen arriba para respirar. */
.viz-progress{height:7px;background:var(--grid-line);border-radius:5px;overflow:hidden;margin-top:6px}
.viz-progress-fill{height:100%;border-radius:5px}
.viz-progress-green{background:var(--green)} .viz-progress-red{background:var(--mps)}
.viz-progress-yellow{background:var(--amber)} .viz-progress-none{background:var(--muted)}

/* ---- Tarjeta de alerta (R2-B1: "borde y glow rojos" cuando algo requiere
   acción YA, no cualquier rojo -- ver `graficos.UMBRAL_ALERTA_PCT`). ---- */
.kpi-card.alert-glow{border-color:var(--mps);
  box-shadow:0 0 0 1px var(--mps), 0 0 0 5px color-mix(in srgb,var(--mps) 14%,transparent), var(--shadow)}
.kpi-card.alert-glow:hover{box-shadow:0 0 0 1px var(--mps), 0 0 0 6px color-mix(in srgb,var(--mps) 20%,transparent), var(--shadow-hi)}
.kpi-card.alert-glow .viz-pill-red{background:var(--mps);color:#fff}

/* ---- Placeholder "próximamente" (% de Uso del OS) — estado vacío con personalidad ---- */
.viz-placeholder{border-style:dashed;justify-content:center;align-items:center;text-align:center;min-height:120px}
.viz-empty p{margin:2px 0;font-size:12.5px}
.viz-empty p:first-child{font-weight:700;color:var(--ink-2)}
.equipo-empty{min-height:100px;justify-content:center;align-items:center;text-align:center;
  border:1px dashed var(--line);border-radius:10px;padding:16px}

/* ---- "Ventas por Equipo vs Meta" (FEEDBACK-ronda3 item 7) — calcada de la
   tarjeta homónima del benchmark bono14: columnas por grupo, un renglón por
   equipo/tienda = punto de color + nombre + barra GRUESA con track claro +
   valor/meta + % a la derecha. ---- */
/* align-items:start es LOAD-BEARING: sin esto, CSS Grid estira cada columna
   al alto de la MÁS LARGA (Tiendas, 7 renglones) -- las columnas más cortas
   (Ecommerce 5, KAM 2) quedaban con un hueco en blanco abajo, justo lo que
   Francisco pidió evitar ("no desperdiciar espacio en blanco"). */
.equipo-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px;align-items:start}
.equipo-col{min-width:0;display:flex;flex-direction:column;gap:2px}
.equipo-col-title{margin:0;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.equipo-col-sin-datos{font-style:italic;padding:4px 0}

/* ---- Task 4: encabezado de cada grupo con su PROPIA barra y total (calcado
   del bono14, brief 4.5) -- antes `.equipo-col-title` era solo el rótulo; ahora
   vive dentro de este wrapper junto con el total acumulado/meta del grupo y una
   barra agregada, separado del listado de equipos por una línea. ---- */
.equipo-col-head{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;
  border-bottom:1px solid var(--line);margin-bottom:1px}
.equipo-col-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.equipo-col-total{font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.equipo-col-total .muted{font-weight:650;font-size:10px}
.equipo-col-head-pct{font-size:11.5px;font-weight:900;white-space:nowrap}
.equipo-col-bar-track{height:7px;background:var(--grid-line);border-radius:5px;overflow:hidden}
.equipo-col-bar-fill{height:100%;border-radius:5px;transition:width .6s ease}
/* FEEDBACK-ronda8 W2: el renglón de equipo pasó de TRES líneas (nombre+%,
   barra, valor) a DOS (nombre+%, y barra+valor en la misma línea). Con 14
   equipos eran ~200px de los 2,117 que medía la pantalla, gastados en
   renglones que se leen igual de bien apretados. */
.equipo-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;grid-template-areas:
  "dot nombre pct" "bar bar valor";column-gap:7px;row-gap:0;align-items:center;
  padding:1px 0}
.equipo-row + .equipo-row{border-top:1px solid var(--grid-line)}
/* Ronda 9: la viñeta es GRIS NEUTRO. Antes traía el color de identidad del
   grupo (ecommerce azul, tiendas verde) y competía con el semáforo: en una
   pantalla donde verde significa "vamos bien", un verde que solo quiere
   decir "esto es Tiendas" confunde. Quien opina del desempeño es la barra
   y el %, con `.viz-progress-*` / `.nivel-*`. */
.equipo-dot{grid-area:dot;width:7px;height:7px;border-radius:50%;align-self:center;
  background:var(--muted);opacity:.4}
.equipo-nombre{grid-area:nombre;font-size:11px;line-height:1.15;font-weight:700;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.equipo-pct{grid-area:pct;font-size:11.5px;line-height:1.15;font-weight:900;text-align:right;white-space:nowrap}
.equipo-pct-green{color:var(--green)} .equipo-pct-amber{color:var(--amber)} .equipo-pct-mps{color:var(--mps)}
/* R2-B1: "barras horizontales GRUESAS" -- 10px, notoriamente más gruesa que
   la barra fina de las tarjetas KPI (7px), igual de gruesa que el "Ritmo" de
   almacén. */
.equipo-bar-track{grid-area:bar;height:8px;background:var(--grid-line);border-radius:6px;overflow:hidden}
.equipo-bar-fill{height:100%;border-radius:6px;transition:width .6s ease}
.equipo-valor{grid-area:valor;font-size:9.5px;line-height:1.1;font-weight:650;color:var(--muted);
  white-space:nowrap;text-align:right}

/* ---- Textos de apoyo compartidos: nota de referencia en cabeceras de
   tarjeta, separador de pie de página, texto chico -- NINGUNO tenía estilo
   propio (heredaban el body por defecto); R2-B1 pide "copiar la honestidad
   de datos" del footer de almacén, que no se lograba sin esto. ---- */
.ref-note{font-size:10.5px;font-weight:650;margin-left:auto;white-space:nowrap;text-align:right}
.small{font-size:11.5px}
.sep{color:var(--line);margin:0 2px}

/* ---- Pie de página: procedencia + alcance de los datos (R2-B1: "copiar
   esta honestidad de datos"). ---- */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-top:10px;padding:12px 14px;
  border-top:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--muted)}
.foot b{color:var(--ink-2);font-weight:800}
.foot a{color:var(--blue);font-weight:700;text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:1100px){
  .viz-row-resumen{grid-template-columns:1fr 1fr}
  .equipo-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .viz-row-resumen{grid-template-columns:1fr}
  .viz-grid{grid-template-columns:1fr}
  .equipo-cols{grid-template-columns:1fr}
}

/* ================================================================
   Dashboard MENSUAL (/graficos) — Task 3 del plan (spec 2026-08-16),
   calcado del dashboard del bono 14 (docs/ref/benchmark-bono14.png).
   Reusa design tokens y clases de arriba (.viz-card/.gauge/.progress-track/
   .viz-pill/.viz-num/.viz-progress/.hero-falta/...); acá solo lo que faltaba
   para la barra superior nueva y el layout de héroe+KPIs en una sola fila. ==== */

/* ---- Barra superior: 3 bloques (marca / píldora del mes / pestañas+status) ----
   `.top` base (usada también por metas.html/semanal.html/como_usar.html) sigue
   siendo un flex simple -- este modificador SOLO aplica acá, nunca la toca. */
.top.top-mensual{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.top-mensual .top-right{flex-direction:column;align-items:flex-end;gap:6px;justify-self:end}
@media (max-width:900px){
  .top.top-mensual{display:flex;flex-wrap:wrap}
  .top-mensual .top-right{align-items:flex-start}
}

.mes-pill{justify-self:center;background:var(--card-2);border:1px solid var(--line);color:var(--ink);
  font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;white-space:nowrap}

.mes-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.dia-badge{font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:var(--green);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
/* El sello de frescura es lo que delata un dato viejo -- SIEMPRE visible,
   nunca oculto detrás de un tooltip (spec §10). */
.frescura{font-size:11.5px;font-weight:650;white-space:nowrap}
.frescura-sin-dato{color:var(--amber);font-weight:800}

/* ================================================================
   FEEDBACK-ronda8 W2 -- EL TABLERO COMPLETO EN UN RECTÁNGULO.

   Pedido textual de Francisco: "que todo quede en un rectángulo, tanto en la
   tele como en la compu, en un solo vistazo". La pantalla medía 2,117px de
   alto (2.4 pantallas de 900px) porque era una PILA vertical: cada área con
   su banda de título a todo lo ancho y su propia fila, y hueco en blanco a
   la derecha. Ahora son dos bandas que llenan el ancho:

   BANDA 1 (`.banda-titulares`), rejilla de 12 columnas:
     fila 1 -> Ventas Japi (cortes + dona, fusionadas) ocupa 4 columnas y las
               DOS filas; a su derecha Leads (4), Pedidos (2) y % Conversión (2).
     fila 2 -> Ventas por equipo se acomoda solo en las 8 columnas libres.
   BANDA 2 (`.banda-areas`) -> los tres grupos de apoyo, uno al lado del otro.

   Acá SÍ se estira (`align-items:stretch`, el default): el punto de esta
   pantalla es llenar el rectángulo. Lo que en la ronda 5 se veía como "hueco
   adentro de la tarjeta" era otra cosa: tarjetas cortas infladas por una
   vecina mucho más alta. Se resuelve con contenido repartido
   (`justify-content:space-between` en `.viz-card`), no dejando aire muerto
   entre tarjetas. */
/* ---- Dieta de la pantalla (solo acá, `.viz-dash`) ----
   El tablero es de MIRAR, no de leer: cada píxel que se va en padding, en
   sombras o en textos de apoyo es un píxel que empuja una tarjeta fuera del
   rectángulo. Todo esto va con `.viz-dash` por delante para no tocar el
   Scorecard Semanal, Metas ni Ingreso Manual, que sí son pantallas de
   trabajo y necesitan su aire. */
.dash.viz-dash{gap:8px;padding:10px 14px}
.viz-dash .brand{gap:11px}
.viz-dash .brand-txt h1{font-size:18px}
.viz-dash .brand-txt p{font-size:11px;margin-top:1px}
/* Las pestañas se partían en DOS renglones y el encabezado crecía 23px por
   una razón puramente tipográfica: acá van más chicas y sin quebrarse. */
.viz-dash .tabs{gap:2px;padding:2px}
.viz-dash .tab{font-size:11px;padding:4px 8px;white-space:nowrap}
/* En celular las pestañas SÍ se parten: si no, la fila de 6 mide más que la
   pantalla y arrastra toda la página a lo ancho. */
@media (max-width:820px){
  .viz-dash .tabs{flex-wrap:wrap}
  .viz-dash .tab{white-space:normal}
}
.viz-dash .mes-status{gap:9px}
.viz-dash .dia-badge{font-size:12px}
.viz-dash .viz-card{padding:9px 11px;gap:5px;border-radius:12px}
.viz-dash .viz-title{font-size:12.5px}
.viz-dash .viz-pill{font-size:9.5px;padding:2px 7px}
.viz-dash .viz-num{font-size:clamp(20px,3.4vh,34px)}
.viz-dash .viz-num-sub{font-size:9.5px;white-space:normal;line-height:1.25}
.viz-dash .viz-meta-line{font-size:10px;margin-top:2px}
.viz-dash .viz-progress{height:6px;margin-top:4px}
.viz-dash .viz-legend-grid{gap:2px 10px}
.viz-dash .viz-legend-grid li{font-size:10px}
.viz-dash .viz-legend-grid li b{font-size:11px}
.viz-dash .stack{height:16px;margin:2px 0 5px}
.viz-dash .ruta-otros-detalle{font-size:9px;line-height:1.3;margin-top:2px}
.viz-dash .ruta-card{gap:3px}
.viz-dash .foot{margin-top:0;padding:6px 10px;font-size:10.5px}

.banda-titulares{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;
  align-items:stretch}
/* Pantalla alta (la TELE, 1080px para arriba): el tablero se estira para
   llenar el rectángulo completo en vez de dejar una franja de fondo vacía
   abajo. El alto de sobra se lo lleva la banda de arriba, que es donde están
   los números que se miran de lejos, y los números ya crecen solos con `vh`.
   En pantallas normales esto no aplica: ahí manda el contenido. */
@media (min-height:950px){
  .dash.viz-dash{height:100vh}
  .banda-titulares{flex:1 1 auto;min-height:0}
  /* Con alto de sobra, los renglones respiran en vez de dejar el aire junto
     todo al final de la tarjeta (que es como se veía "hueco"). */
  .equipo-row{padding:4px 0}
  .equipo-col{gap:4px}
  .equipo-col-head{gap:4px;padding-bottom:7px}
  .leads-trend{margin-top:10px}
}
.banda-titulares > *{min-width:0}
/* FEEDBACK-ronda8: Ventas Japi baja de DOS filas a UNA (queda a la altura de
   la tarjeta de Leads) y la fila que libera se la lleva Venta B2C. Francisco:
   *"hay demasiado espacio vacío en Ventas Japi, podríamos condensar todo lo
   que aparece ahorita en esa tarjeta en una que tenga la altura de la de
   leads"*. La dona se achica y las tres cajitas de abajo se aprietan. */
/* Posición EXPLÍCITA: Ventas Japi arriba a la izquierda y Venta B2C JUSTO
   DEBAJO. Con `span` a secas, B2C se iba a la derecha de Ventas Japi (el
   flujo de la rejilla llena el renglón antes de bajar) y se perdía la lectura
   de "el total, y debajo su parte de consumidor final". */
.ventas-hero-card{grid-column:1 / span 4;grid-row:1}
.b2c-card{grid-column:1 / span 4;grid-row:2}
.ventas-hero-card .hero-fusion{gap:8px}
.ventas-hero-card .gauge{width:clamp(76px,9.5vh,104px);height:clamp(76px,9.5vh,104px)}
.ventas-hero-card .hero-cajas{margin-top:4px}
.ventas-hero-card .hero-falta b{font-size:clamp(12px,1.9vh,15px)}
.ventas-hero-card .hero-falta span{font-size:9px}
.leads-cortes-card{grid-column:5 / span 4;grid-row:1}
.corta-card{grid-column:span 2}
/* Ronda 8: las tarjetas de a pares llevan DOS indicadores adentro, así que
   necesitan el ancho de una tarjeta normal, no el de las "cortas" de antes. */
/* Los pares van de 4 columnas cada uno pero COMPARTIENDO el renglón derecho:
   `par-card` #1 arriba y #2 abajo, en las columnas 9-12, para que la banda
   siga siendo de DOS renglones. Con `span 4` a secas el segundo par empujaba
   "Ventas por equipo" a un tercer renglón y la pantalla volvía a crecer
   (medido: 1,115px contra los 900 que caben). */
/* Los dos pares comparten el renglón de ARRIBA, uno al lado del otro, y así
   "Ventas por equipo" recupera las 8 columnas que necesita abajo: con los
   pares apilados a la derecha, los nombres de equipo se truncaban ("Me...",
   "Pla..."), que es peor que una tarjeta un poco angosta. */
.par-card{grid-column:span 2;grid-row:1}
/* Ronda 9 (punto F): "ventas por equipo" dejó de ser UNA tarjeta ancha y
   ahora son TRES (ecommerce, tiendas y promotorías, KAM). Viven en una
   sub-rejilla que ocupa el mismo hueco de antes; la tercera columna se
   parte a la mitad y abajo va Reclamos: *"el servicio al cliente tiene que
   ver con ventas"*. KAM es el grupo más corto (dos equipos), por eso es el
   que cede la mitad de abajo sin apretar a nadie. */
.equipos-banda{grid-column:5 / span 8;grid-row:2;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto;gap:8px;min-width:0}
.equipos-banda > .equipo-card:nth-child(1),
.equipos-banda > .equipo-card:nth-child(2){grid-row:1 / span 2}
.equipos-banda > .equipo-card:nth-child(3){grid-row:1}
.equipos-banda > .reclamos-card{grid-column:3;grid-row:2}

/* Las tarjetas de esta pantalla reparten su contenido en vez de amontonarlo
   arriba: cuando la rejilla les da alto de sobra, el espacio se va a los
   espacios ENTRE bloques (que es aire legible) y no a un vacío al final. */
.banda-titulares .viz-card,
.banda-areas .viz-card{justify-content:space-between}

/* Monitor mediano (menos de 1,100px, o sea tablet acostada): la dona baja a
   media fila y el resto se reacomoda de a 6 columnas. Arriba de eso se
   mantiene la rejilla de 12 completa, que es la que entra en un solo
   vistazo: una laptop de 1,280px todavía la aguanta. */
@media (max-width:1100px){
  .ventas-hero-card{grid-column:span 6;grid-row:auto}
  .b2c-card{grid-column:span 6;grid-row:auto}
  .leads-cortes-card{grid-column:span 6;grid-row:auto}
  /* Media fila cada una: con `span 3` quedaban dos tarjetas angostas y medio
     renglón en blanco a la derecha, que es justo lo que había que quitar. */
  .corta-card{grid-column:span 6}
  .par-card{grid-column:span 6;grid-row:auto}
  .equipos-banda{grid-column:span 12;grid-row:auto}
}
/* Celular/tablet: acá SÍ se desliza, a propósito (pedido de Francisco: "en
   pantalla chica sí puede deslizar"). Una tarjeta por renglón. */
@media (max-width:820px){
  .banda-titulares{grid-template-columns:1fr}
  /* `grid-row:auto` además de la columna: sin eso, las tarjetas con fila
     FIJA de la rejilla de escritorio (Ventas Japi en la 1, Venta B2C en la
     2) obligaban a la rejilla de una sola columna a seguir midiendo cuatro,
     y en celular cada tarjeta quedaba de 95px de ancho con los números
     saliéndose por la derecha. `.b2c-card` faltaba en esta lista desde que
     se agregó la tarjeta. */
  .ventas-hero-card, .b2c-card, .leads-cortes-card, .corta-card, .par-card,
  .equipos-banda{grid-column:span 1;grid-row:auto}
  .equipos-banda{grid-template-columns:1fr;grid-template-rows:auto}
  .equipos-banda > .equipo-card:nth-child(1),
  .equipos-banda > .equipo-card:nth-child(2),
  .equipos-banda > .equipo-card:nth-child(3),
  .equipos-banda > .reclamos-card{grid-column:1;grid-row:auto}
}

/* ---- Banda 2: tres grupos de área en la MISMA línea ----
   El ancho de cada grupo es proporcional a cuánto tiene que contar:
   ventas y mercadeo 2 tarjetas, contabilidad 3, operaciones 4 (una de ellas
   con los 4 indicadores adentro). `align-content:start` para que las
   tarjetas de un grupo con menos filas no se estiren a lo tonto. */
/* `align-items:stretch` (no `start`): los grupos de la banda tienen que medir
   lo MISMO de alto, si no el que tiene menos filas termina antes y deja una
   franja de fondo debajo. Medido antes del arreglo: Contabilidad cerraba en
   827px y Operaciones en 857px, o sea 30px de negro bajo "Cuentas por cobrar
   B2B" y "Cambio Neto de Efectivo". */
.banda-areas{display:grid;grid-template-columns:4fr 8fr;gap:12px;align-items:stretch}
.area-grupo{display:flex;flex-direction:column;gap:4px;min-width:0}
.area-cards{display:grid;gap:7px;align-content:start;
  /* Misma altura de renglón en los tres grupos: así las tarjetas quedan
     alineadas horizontalmente aunque cada grupo tenga su propia rejilla. */
  grid-auto-rows:minmax(88px,auto)}
.area-ventas .area-cards{grid-template-columns:1fr}
/* Ronda 9: Contabilidad en rejilla 2x2 que LLENA su columna hasta abajo, a la
   misma altura que Estatus de Ruta, Almacén y Producción y calidad. Antes la
   última tarjeta ocupaba las dos columnas y quedaba una franja de fondo vacía
   debajo. */
/* `grid-auto-rows:minmax(88px,1fr)` pisa el `minmax(88px,auto)` general: con
   `auto` cada renglón medía lo que pedía su contenido (102px) y sobraba alto;
   con `1fr` los dos renglones se REPARTEN todo el alto del grupo, así que las
   cuatro tarjetas quedan de la misma altura y llegan hasta abajo. */
.area-conta .area-cards{grid-template-columns:1fr 1fr;align-content:stretch;
  grid-auto-rows:minmax(88px,1fr)}
.area-conta{display:flex;flex-direction:column;min-height:0}
.area-conta .area-cards{flex:1 1 auto}
.conta-card{min-width:0}
/* Los dos pedazos de la cartera B2B: corriente y vencido, uno al lado del
   otro. Lo vencido se pinta en rojo aunque el semáforo de la tarjeta no lo
   esté: es el número que hay que perseguir. */
.cxc-partes{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--muted);
  line-height:1.3;margin-top:1px}
.cxc-partes b{display:block;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.cxc-vencido b{color:var(--mps)}
.area-ops .area-cards{grid-template-columns:repeat(12,minmax(0,1fr))}
/* Los anchos no son iguales a propósito: la leyenda de ruta necesita dos
   columnas de texto (si se angosta, "Por despachar 12% 115" se parte en dos
   renglones), atrasados son dos números chiquitos y los cuatro indicadores
   necesitan lo ancho para no truncar sus nombres. */
.area-ops .ruta-card{grid-column:span 5;grid-row:span 2}
/* Ronda 9 (punto G): ALMACÉN (antes "Pedidos Atrasados") toma el alto de
   DOS renglones, que es el que ocupaban esa tarjeta y la de indicadores
   juntas, porque ahora muestra cuatro números en vez de dos. PRODUCCIÓN Y
   CALIDAD (antes "Indicadores de operación") baja al segundo renglón
   JUSTO DEBAJO de Devoluciones y con su MISMO ancho: *"así queda
   justificado igual que ese"*. */
.area-ops .almacen-card{grid-column:span 3;grid-row:span 2}
.area-ops .devoluciones-card{grid-column:span 4}
.area-ops .ops-minis-card{grid-column:span 4}
@media (max-width:1100px){
  .banda-areas{grid-template-columns:1fr 1fr}
  .area-ops{grid-column:span 2}
}
@media (max-width:820px){
  .banda-areas{grid-template-columns:1fr}
  .area-ops{grid-column:span 1}
  .area-conta .area-cards{grid-template-columns:1fr}

  .area-ops .area-cards{grid-template-columns:1fr}
  .area-ops .ruta-card, .area-ops .almacen-card,
  .area-ops .devoluciones-card, .area-ops .ops-minis-card{grid-column:span 12;grid-row:auto}
}

/* ---- Héroe: color del semáforo (dona + barra) -- clases, no cálculo en la
   plantilla. La plantilla solo pone `gauge-{{ hero.semaforo }}` / `progress-
   fill-{{ hero.semaforo }}`; `hero.semaforo` ya viene armado por
   `dashboard_mes.semaforo()`, la misma función que arma el semáforo de las
   tarjetas KPI -- una sola fuente de verdad para el umbral del color. ---- */
.gauge-green{--gc:var(--green)} .gauge-yellow{--gc:var(--amber)}
.gauge-red{--gc:var(--mps)} .gauge-none{--gc:var(--muted)}
.progress-fill-green{background:var(--green)} .progress-fill-yellow{background:var(--amber)}
.progress-fill-red{background:var(--mps)} .progress-fill-none{background:var(--muted)}

/* ---- Héroe: estado "sin meta"/"sin dato" -- dona apagada + mensaje. ---- */
.hero-sin-meta{display:flex;align-items:center;gap:14px;padding:6px 0;flex-wrap:wrap}
.gauge-off{--pct:0;--gc:var(--muted);opacity:.5}
.hero-sin-meta-txt p{margin:0 0 4px;font-weight:700;color:var(--ink-2);font-size:13px}
.hero-sin-meta-txt a{color:var(--blue);font-weight:700;text-decoration:none;font-size:13px}
.hero-sin-meta-txt a:hover{text-decoration:underline}

/* ---- Héroe: las tres cajitas (Faltan / días restantes / ritmo necesario)
   en un solo renglón. Antes "Ritmo necesario" era una caja aparte a todo lo
   ancho, un renglón más de alto para un solo dato (FEEDBACK-ronda8 W2). ---- */
.hero-cajas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}

/* "Ritmo necesario" es la misma cajita, resaltada en ámbar (benchmark
   bono14). Usa `--ic-amber-bg` (no `--amber-bg`, que no tiene variante de
   tema oscuro). */
.hero-ritmo{background:var(--ic-amber-bg);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.hero-ritmo-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--amber);line-height:1.2}

/* ---- Tarjetas KPI del mes: mismas piezas (.viz-num/.viz-progress/.viz-pill)
   que el resto del dashboard -- `dashboard_mes.semaforo()` devuelve el mismo
   literal "yellow" que el status manual semanal, así que no hace falta
   ningún tono "amber" aparte: una sola convención de nombre, un solo lugar
   con las reglas de color. ---- */

/* ================================================================
   Dashboard MENSUAL — Task 4: leads, ventas por equipo, contabilidad y
   operaciones (la mitad de abajo, ver .superpowers/sdd/task-4-brief.md).
   Reusa las mismas piezas de Task 3 (.viz-card/.viz-num/.viz-progress/
   .viz-pill/.equipo-*/.stack/.seg/.viz-legend-grid); acá solo lo nuevo. === */

/* ---- Leads: la curva del mes DENTRO de la tarjeta de los tres cortes ----
   FEEDBACK-ronda8 W2 punto 2, textual: "leads los pusiste en números arriba
   y en gráfica abajo, elige bien". Ganaron los números; la curva se metió en
   la misma tarjeta y se achicó (56px -> 40px de alto) porque ya no es la
   protagonista de una sección propia, es el contexto de los números. La
   tarjeta de leads de abajo se eliminó por completo. */
.leads-trend{margin-top:6px}
.leads-trend .spark-svg{width:100%;height:clamp(24px,3.3vh,42px);display:block}
.leads-cobertura-aviso{margin:4px 0 0;font-size:9px;font-weight:700;color:var(--amber);
  background:var(--ic-amber-bg);border-radius:7px;padding:4px 6px;line-height:1.3}
/* Cuando hay aviso de cobertura, la curva cede el alto que el aviso ocupa:
   entre las dos cosas se pasaban ~25px del rectángulo. Si el navegador no
   entiende `:has()`, lo único que pasa es que la página crece esos 25px. */
.leads-cortes-card:has(.leads-cobertura-aviso) .leads-trend .spark-svg{height:clamp(18px,2.2vh,28px)}

/* ---- Operaciones: ruta segmentada + atrasados + devoluciones + minis ----
   Ya no es una fila propia (`.ops-row`): las cuatro tarjetas viven en la
   rejilla del grupo "Operaciones" de la banda de abajo (ver `.area-ops`). */
.atrasados-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.atrasados-tile{background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:5px 6px;display:flex;flex-direction:column;gap:1px;justify-content:center;text-align:center}
.atrasados-tile .viz-num{font-size:clamp(18px,2.6vh,26px);display:block}

/* ---- Devoluciones sin operar (W4): la alarma de bodega ----
   Tiene que NOTARSE cuando está en rojo: reusa `.alert-glow` (borde y halo
   rojos, el mismo patrón de "Entregados sin facturar") y además pinta el
   fondo, porque esta tarjeta vive entre otras tres y en una tele se mira de
   lejos. Verde no grita: si está bajo el tope, es una tarjeta normal. */
.devoluciones-card.alert-glow{background:color-mix(in srgb,var(--mps) 7%,var(--card))}

/* ---- Los 4 indicadores de operación, juntos en una tarjeta ----
   Cada uno es un número y su meta; como tarjetas sueltas gastaban 4 bordes,
   4 sombras y 4 paddings para lo mismo (FEEDBACK-ronda8 W2). */
.mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin-top:2px}
.mini-stat{min-width:0;display:flex;flex-direction:column;gap:1px}
.mini-stat-nombre{font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.mini-stat-num{font-size:clamp(16px,2.2vh,22px);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.mini-stat-meta{font-size:9.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-progress-fino{height:4px;margin-top:3px}
/* Ronda 9: Reclamos se fue con ventas, así que acá quedan DOS indicadores.
   Con cuatro columnas quedaban dos huecos en blanco a la derecha. */
.mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* CEO ronda 5 item 1: detalle de "Otros" (estatus de ruta) SIEMPRE visible
   como texto chico debajo de la leyenda -- el `title` del `<li>` (arriba)
   cubre el hover, esto cubre capturas de pantalla donde no hay mouse. */
.ruta-otros-detalle{margin:6px 2px 0;line-height:1.4}
.ruta-otros{cursor:help}

/* ================================================================
   Cómo usar los Scorecards (/como-usar) — FEEDBACK-ronda2 B2. Página de
   lectura: tarjetas de prosa + tablas, mismos tokens que el resto. ======= */
.como-usar{max-width:960px;margin:0 auto}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.info-card h2{margin:0 0 2px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.info-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.info-card ul{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.info-card li{margin-bottom:4px}
.info-card a{color:var(--blue);font-weight:700;text-decoration:none}
.info-card a:hover{text-decoration:underline}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.info-table{width:100%;border-collapse:collapse;font-size:13px}
.info-table th{background:var(--card-2);text-align:left;padding:8px 12px;font-weight:700;
  color:var(--ink-2);border-bottom:1px solid var(--line);white-space:nowrap}
.info-table td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.info-table tbody tr:last-child td{border-bottom:none}
.info-table-indicadores td:nth-child(5){min-width:280px}
.info-dir{white-space:nowrap;font-weight:700;color:var(--ink)}

@media (max-width:640px){
  .dash{padding:10px 12px}
  .grid-wrap{max-height:calc(100vh - 190px)}
  .info-card{padding:14px}
}

/* ---- R5-4: Scorecard Mensual — "No disponible" honesto ----
   El corazón de la pantalla: un indicador que no se puede calcular hoy debe
   DECIRLO en su propia celda, nunca un cero ni un guion mudo que parezca un
   dato faltante por error. Mismo espíritu visual que `.viz-owner` (pill
   pequeña, tono "muted") pero con `cursor:help` -- el motivo completo vive
   en el `title` del elemento. */
.nd-badge{
  display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--muted);background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  padding:2px 8px;cursor:help;white-space:nowrap;
}

/* "MES ABIERTO" no es lo mismo que "NO DISPONIBLE" y no puede verse igual.
   No disponible = nadie sabe calcularlo todavía, gris apagado.
   Mes abierto  = SÍ se calcula, pero la contabilidad de ese mes sigue
   entrando y el número de hoy seria una utilidad falsa; llega solo cuando el
   mes cierre. Por eso va en el azul de "en curso", el mismo tono que ya usa
   la columna de la semana viva en el Semanal. */
.nd-badge.nd-abierto{
  color:var(--en-curso-ink);background:var(--en-curso-bg);border-color:var(--en-curso-ink);
}

/* ================================================================
   FEEDBACK-ronda6 item 6 — LOS TRES NIVELES DE TIEMPO (hoy / semana / mes)

   Es la respuesta al pedido explícito de Francisco de tarjetas con VARIOS
   números de tamaños distintos ("dos, tres, cuatro o cinco"), en vez de la
   fila de tarjetas todas iguales que había: acá el mismo indicador se cuenta
   tres veces, y el TAMAÑO es el que dice cuál mirar primero. Hoy es el número
   grande a propósito -- el propósito de la tarjeta es la gestión diaria.
   ================================================================ */
.cortes-card{gap:2px}
.nivel-etiqueta{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block}
.nivel-hoy{margin-top:1px}
/* Los tres tamaños. La escala es deliberadamente grande (referencia de
   Francisco: pantalla de pared, "todo más grande") y el salto entre niveles
   tiene que leerse de lejos -- por eso el número de HOY es más del doble que
   el del mes, no tres tamaños parecidos.
   FEEDBACK-ronda8 W2: ahora escalan con el ALTO de la ventana (`vh`), que es
   lo que pedía "que quepa igual en la tele y en la compu": en un monitor de
   900px se achican para que el tablero entre completo, y en una pantalla de
   pared crecen solos en vez de quedarse chiquitos en la esquina. */
.nivel-num-xl{font-size:clamp(28px,4.7vh,48px);font-weight:900;letter-spacing:-.03em;line-height:1.02}
.nivel-num-md{font-size:clamp(18px,2.5vh,27px);font-weight:850;letter-spacing:-.02em;line-height:1.1}
.nivel-num-sm{font-size:clamp(14px,2vh,21px);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.nivel-vs{font-size:10px;font-weight:650;display:block;margin-top:1px;line-height:1.3}
/* Colores que GRITAN si vamos bien o mal (pedido textual del item 6). */
.nivel-green{color:var(--green)} .nivel-yellow{color:var(--amber)}
.nivel-red{color:var(--mps)} .nivel-none{color:var(--muted)}
/* Semana y mes comparten renglón, separados por una línea sutil: son el
   contexto del número grande, no tres tarjetas distintas. */
.nivel-abajo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px;
  padding-top:5px;border-top:1px solid var(--line)}
.nivel-bloque{min-width:0}

/* ---- Ventas Japi: la tarjeta fusionada (FEEDBACK-ronda8 W2 punto 3) ----
   "ventas japi y ventas japi % de la meta los veo innecesario tenerlos
   separados": los tres cortes a la izquierda, la dona a la derecha. En
   pantalla angosta la dona se va abajo en vez de espicharse. */
.hero-fusion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.ventas-hero-card .nivel-num-xl{font-size:clamp(32px,6.2vh,62px)}
.ventas-hero-card .nivel-num-md{font-size:clamp(20px,3.1vh,32px)}
/* La dona de Ventas Japi es la única que ocupa dos filas de la rejilla: se
   agranda para llenar ese alto (y porque es el número #1 de la empresa, el
   que se mira desde la tele). */
.ventas-hero-card .gauge{width:clamp(96px,15.5vh,164px);height:clamp(96px,15.5vh,164px)}
.ventas-hero-card .gauge::after{inset:13px}
.ventas-hero-card .gauge-pct{font-size:clamp(23px,3.6vh,36px)}
.hero-fusion-cortes{min-width:0}
@media (max-width:520px){
  .hero-fusion{grid-template-columns:1fr}
}

/* ================================================================
   FEEDBACK-ronda6 item 5 — GRÁFICA DE TENDENCIA POR INDICADOR
   Ícono de gráfico junto a cada indicador; al hacer clic despliega abajo
   (igual que el desglose) la serie semanal con su tendencia suavizada y la
   proyección. Reusa el patrón de sub-fila del drill, incluido el truco del
   contenido sticky (la celda abarca todas las columnas de semana, así que su
   contenido tiene que quedar pegado al bloque fijo para no dibujarse fuera
   de pantalla cuando la tabla está parada en la semana más reciente).
   ================================================================ */
.tend-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  padding:0;margin-right:5px;border:0;background:transparent;border-radius:4px;cursor:pointer;
  color:var(--muted);vertical-align:middle}
.tend-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tend-toggle:hover{color:var(--blue);background:var(--ic-blue-bg)}
.tend-toggle[aria-expanded="true"]{color:var(--blue);background:var(--ic-blue-bg)}

.tend-subrow td{background:var(--card-2)}
.tend-cell{padding:0}
/* `white-space:normal` explícito: la celda de la tabla hereda `nowrap` (ver
   `.grid td`), así que la advertencia se dibujaba en una sola línea larguísima
   y se salía de la pantalla. */
.tend-inner{position:sticky;display:inline-block;padding:10px 12px 12px;white-space:normal;
  left:calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw) + 8px)}
.tend-cargando{font-size:12px;color:var(--muted);font-style:italic;padding:6px 0}
.tend-titulo{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
/* 460px y no 560: el contenido arranca pegado al bloque de columnas fijas
   (~626px) y en una pantalla de 1280 se salía por la derecha, cortando la
   leyenda y la advertencia. */
.tend-svg{width:460px;max-width:100%;height:auto;display:block}

/* Las tres capas del gráfico. El dato crudo va tenue y delgado (está, pero no
   compite); el suavizado grueso y de color (es lo que hay que leer); la
   proyección punteada (nunca puede confundirse con algo que ya pasó). */
.tend-grid{stroke:var(--grid-line);stroke-width:1}
.tend-meta{stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:6 4;opacity:.75}
.tend-crudo{fill:none;stroke:var(--muted);stroke-width:1.2;opacity:.55;
  stroke-linecap:round;stroke-linejoin:round}
.tend-punto{fill:var(--muted);opacity:.55}
.tend-suave{fill:none;stroke:var(--blue);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tend-proy{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-dasharray:5 4;opacity:.85;
  stroke-linecap:round}
.tend-proy-punto{fill:var(--card);stroke:var(--blue);stroke-width:2}
.tend-eje{fill:var(--muted);font-size:9px;font-weight:700;text-anchor:middle}

.tend-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:10.5px;
  font-weight:650;color:var(--muted)}
.tend-legend-item{display:inline-flex;align-items:center;gap:5px}
.tend-key{width:14px;height:0;border-top-width:2.5px;border-top-style:solid;display:inline-block}
.tend-key-crudo{border-top-color:var(--muted);opacity:.55}
.tend-key-suave{border-top-color:var(--blue)}
.tend-key-proy{border-top-color:var(--blue);border-top-style:dashed}
.tend-key-meta{border-top-color:var(--ink-2);border-top-style:dashed}
.tend-resumen{margin-top:6px;font-size:12.5px;font-weight:750;color:var(--ink)}
/* La advertencia de confiabilidad NO es decorativa: sin ella la proyección
   miente cuando la serie trae una temporada (ver tendencia.py). */
.tend-aviso{margin-top:5px;font-size:11.5px;font-weight:700;color:var(--amber);
  background:var(--ic-amber-bg);border-radius:6px;padding:5px 9px;max-width:460px;line-height:1.4}
.tend-legend,.tend-resumen{max-width:460px}
.tend-legend{line-height:1.5}

/* ================================================================
   FEEDBACK-ronda7 — X para borrar el plan + plan VENCIDO de la semana pasada.

   El plan ya vivía atado a su semana, así que cada lunes el corte crea una
   semana nueva SIN plan y el 🟡 no se puede arrastrar: "renovarse cada lunes"
   ya pasaba solo, sin borrar nada. Lo que faltaba era poder VER el de la
   semana pasada para poder preguntar "¿y cuál era el plan que habías
   propuesto para salir del rojo?" antes de exigir uno nuevo.
   ================================================================ */
.notas-fila{display:flex;align-items:center;gap:4px}
.notas-fila .notas-trigger{flex:1 1 auto;min-width:0}
.notas-borrar{flex:0 0 auto;width:19px;height:19px;padding:0;border:0;background:transparent;
  border-radius:5px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;
  display:grid;place-items:center}
.notas-borrar:hover{color:var(--mps);background:var(--ic-red-bg)}
.notas-borrar:disabled{opacity:.5;cursor:progress}

/* El vencido es CONTEXTO, no un plan activo: tenue, tachado y con su fecha.
   Nunca puede confundirse con el plan de esta semana. */
.plan-vencido{display:flex;align-items:baseline;gap:5px;margin-top:3px;font-size:10.5px;
  line-height:1.3;min-width:0}
.plan-vencido-tag{flex:0 0 auto;font-weight:800;letter-spacing:.02em;color:var(--muted);
  background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:1px 6px;
  font-size:9px;text-transform:uppercase}
.plan-vencido-txt{flex:1 1 auto;min-width:0;color:var(--muted);text-decoration:line-through;
  text-decoration-thickness:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dentro del popover el vencido va completo (sin tachar: acá se lee para
   decidir, no para descartarlo de un vistazo) y en un bloque aparte. */
.notas-modal-vencido{margin:2px 0 10px;padding:8px 10px;border-radius:8px;
  background:var(--card-2);border:1px solid var(--line)}
.notas-modal-vencido-head{font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.notas-modal-vencido-titulo{font-size:13px;font-weight:750;color:var(--ink-2)}
.notas-modal-vencido-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}

/* Ronda 7: columna "Proyección fin de mes". Vive dentro del bloque gris de
   columnas de referencia (`.col-goal`) pero en un tono más suave -- no es un
   dato observado, es una cuenta a ritmo constante, y la jerarquía visual
   tiene que decirlo. El color verde/rojo sí es pleno: la pregunta que
   contesta ("¿voy a llegar?") es binaria. */
/* El ancho lo fija `--w-proyeccion` en la regla de arriba, que es más
   específica; acá había un `width:126px` que no aplicaba nunca y contradecía
   al de verdad. Un ancho que no se usa es una pista falsa para el siguiente
   que venga a mover esta columna. */
.col-proyeccion{font-style:italic}
.grid tbody td.col-proyeccion{font-weight:750}
.grid tbody td.col-proyeccion.st-green{color:var(--green)}
.grid tbody td.col-proyeccion.st-red{color:var(--mps)}
.grid tbody td.col-proyeccion.st-none{color:var(--muted)}
.grid thead th.col-proyeccion{font-weight:750;color:var(--ink-2)}

/* Ronda 7: eje Y con valores, semanas de temporada marcadas, y la comparación
   antes/después. El eje faltaba por completo: sin él la línea "se ve planita
   pegada al cero" y no se puede saber de qué tamaño es el movimiento. */
.tend-eje-y{fill:var(--muted);font-size:8.5px;font-weight:700;text-anchor:end}
.tend-punto-atipico{fill:var(--card);stroke:var(--amber);stroke-width:2.2}
.tend-atipico-txt{fill:var(--amber);font-size:8.5px;font-weight:800;text-anchor:middle}
.tend-key-punto{width:8px;height:8px;border-radius:50%;border:2px solid var(--amber);
  background:var(--card);display:inline-block}
.tend-comparacion{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--ink-2);
  background:var(--card-2);border-radius:6px;padding:5px 9px;max-width:460px;line-height:1.4}

/* ================================================================
   FEEDBACK-ronda7 — EL DESGLOSE, REHECHO.
   Sub-filas alineadas con las mismas columnas de semana de la tabla (una
   celda por domingo), una medida a la vez con su selector, y un ícono de
   gráfica por sub-fila. Referencia: el pivot de Odoo que mandó Francisco.
   ================================================================ */
.drill-barra td{background:var(--card-2)}
.drill-controles{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:5px 10px;
  position:sticky;
  left:calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw) + 8px);
  width:max-content}
.drill-control{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.drill-control select{font:inherit;font-size:11.5px;font-weight:700;text-transform:none;
  letter-spacing:0;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:3px 6px}
.drill-control-fijo{color:var(--ink-2)}
/* Qué dimensiones faltan todavía: decirlo es mejor que dejar que parezca
   olvidado (producto, día y asesor necesitan agregaciones nuevas de Odoo). */
.drill-pendientes{font-size:10px;font-weight:650;color:var(--muted);font-style:italic}

/* La celda de una sub-fila: mismo ancho y alineación que la columna de arriba,
   pero visiblemente subordinada (más chica, más tenue, sin negrita). */
.grid tbody td.drill-valor{font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--card-2);text-align:right}
.grid tbody tr.drill-subrow:hover td.drill-valor{background:var(--card-2)}
.drill-etiqueta{display:inline-block;max-width:calc(var(--w-name) - 46px);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.drill-graf{margin-right:4px}
.drill-subrow .drill-indent{padding-left:22px}
/* Las columnas de referencia de una sub-fila se leen subordinadas igual que
   sus celdas de semana, pero conservan el fondo del bloque gris para que los
   bordes gruesos sigan enmarcándolo de arriba a abajo. */
.grid tbody tr.drill-subrow td.col-goal{background:var(--goal-bg)}
.grid tbody tr.drill-subrow:hover td.col-goal{background:var(--goal-bg)}
.grid tbody tr.drill-subrow td.col-en-curso{background:var(--en-curso-bg)}
.grid tbody tr.drill-subrow:hover td.col-en-curso{background:var(--en-curso-bg)}
.grid tbody tr.drill-subrow td.col-proyeccion{font-style:italic}

/* Ronda 7: las instrucciones del pie, en viñetas. Antes era una sola línea
   corrida donde se perdían; ahora una viñeta por instrucción, y solo las que
   no se adivinan mirando la pantalla. */
.hints-titulo{margin:12px 2px 5px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  color:var(--muted)}
/* Ronda 7: DOS columnas, tres viñetas por lado. En la MacBook de Francisco la
   lista de seis obligaba a bajar la página para terminar de leerla; partida
   en dos entra de un solo pantallazo. `break-inside:avoid` para que ninguna
   viñeta se parta a la mitad entre columnas. */
.hints{margin:0 2px;padding:0 0 0 17px;font-size:11.5px;line-height:1.6;
  columns:2;column-gap:34px}
.hints li{margin:0 0 4px;break-inside:avoid;-webkit-column-break-inside:avoid}
.hints strong{color:var(--ink-2);font-weight:750}
/* Pantalla angosta: una sola columna, o las dos quedan ilegibles. */
@media (max-width:900px){.hints{columns:1}}

/* ================================================================
   FEEDBACK-ronda7 — una semana ABIERTA EN SUS 7 DÍAS.
   Los días entran ANTES de la columna de su semana, que se queda como el
   total: así se ve contra qué suman. Más angostos y con fondo propio para
   que se lean como un grupo subordinado y no como siete semanas más.
   ================================================================ */
.col-dia{width:66px;min-width:66px;text-align:right;font-size:10.5px;font-weight:600}
.grid td.col-dia,.grid th.col-dia{background:var(--ic-slate-bg);color:var(--ink-2)}
.grid tbody tr:hover td.col-dia{background:var(--ic-slate-bg)}
.grid thead th.col-dia{text-align:center;font-weight:700;padding-top:3px;padding-bottom:3px}
.col-dia-nombre{display:block;font-size:8.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
/* Un indicador que NO se puede abrir por día (Recompra, % Devoluciones, los
   manuales) deja sus 7 celdas vacías -- nunca un cero, que afirmaría algo. */
.grid td.col-dia-vacio{background:var(--card-2)}
/* La semana abierta cierra el grupo: borde a la izquierda del primer día y a
   la derecha del total, para que se lea como un bloque. */
.grid td.col-dia:first-of-type,.grid th.col-dia:first-of-type{
  border-left:2px solid var(--ink-2)}
.grid td.col-week-abierta,.grid th.col-week-abierta{border-right:2px solid var(--ink-2);
  font-weight:800}
/* El "+" / "−" de abrir la semana en días, pegado a su fecha. */
.dia-toggle{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;
  margin-right:3px;border-radius:4px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font-size:11px;line-height:1;text-decoration:none;vertical-align:middle}
.dia-toggle:hover{color:var(--ink);border-color:var(--ink-2);background:var(--card-2)}

/* Pantalla de LAPTOP (abajo del umbral de la tele): con datos reales aparece
   el aviso de cobertura parcial de leads y el tablero se pasaba ~22px, o sea
   deslizabas para ver el último renglón. Acá se recortan esos píxeles del
   aire, que es de donde hay que sacarlos: nada de contenido se va. Aplica
   solo abajo de 950px de alto, así la tele (que ya calza exacto) no se toca. */
@media (max-height:949px){
  .dash.viz-dash{gap:6px;padding:8px 14px 6px}
  .viz-dash .viz-card{padding:7px 10px}
  .banda-titulares{gap:8px}
  .viz-dash .foot{padding:4px 10px;font-size:10px}
}

/* ================================================================
   FEEDBACK-ronda8 — TARJETAS DE A PARES.
   "Tiene sentido como que pedidos con ticket promedio y ROAS con conversión."
   Cada una se parte a la mitad. Antes Pedidos y Conversión ocupaban una
   tarjeta entera con la mitad de abajo vacía, y Ticket y ROAS vivían en una
   banda aparte al pie, lejos de lo que explican.
   ================================================================ */
.par-card{display:flex;flex-direction:column;gap:5px;justify-content:space-between}
.par-sep{height:1px;background:var(--line);margin:1px 0}
.media{display:flex;flex-direction:column;gap:3px;min-height:0}
.media-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.media-titulo{font-size:11.5px;font-weight:800;color:var(--ink-2);letter-spacing:.01em}
.media-nums{display:flex;align-items:flex-end;gap:14px}
.media-bloque{display:flex;flex-direction:column;gap:0;min-width:0}
.media-nums-kpi{flex-direction:column;align-items:flex-start;gap:0}
.par-card .nivel-num-md{font-size:clamp(17px,2.6vh,26px)}
.par-card .nivel-num-sm{font-size:clamp(13px,1.9vh,18px)}
.par-card .viz-progress{margin-top:3px}

/* ================================================================
   FEEDBACK-ronda9 (19/08) — lo que pidió Francisco viendo la pantalla.
   Solo estilos: la estructura y los textos viven en `graficos.html`.
   ================================================================ */

/* ---- A. Encabezado: un solo título, sin bajada ----
   Se fue el `<p>` de "Scorecard Gerencial · Ventas & Operaciones" (nombrar
   dos áreas dejaba fuera a los demás departamentos que sí salen acá), así
   que el título puede crecer un poco sin empujar nada. */
.viz-dash .brand-txt h1{font-size:20px;letter-spacing:-.01em}

/* ---- I. Tarjetas que abren Odoo ----
   El enlace tiene que NOTARSE sin gritar: en reposo se ve igual que el
   título de siempre, y al pasar el mouse se subraya y aparece la flechita
   en firme. Así una pantalla de pared no se llena de azul. */
.odoo-link{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:3px}
.odoo-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.odoo-ic{font-size:.78em;font-weight:700;color:var(--muted);opacity:.55;line-height:1}
.odoo-link:hover .odoo-ic{color:var(--blue);opacity:1}

/* ---- B. "Día parcial" pegado al número de HOY ----
   Textual: *"tiene como una etiqueta de día parcial en toda la tarjetita,
   hace sentir como que todos los datos son parciales, pero ahí tenés del mes
   y de la semana, no tiene sentido"*. La etiqueta salió del encabezado y
   ahora vive al lado del único número que sí es parcial. `align-items:
   baseline` para que se apoye en la línea del número, no flotando arriba. */
.nivel-hoy-fila{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}
.parcial-tag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--amber);background:var(--ic-amber-bg);
  border-radius:999px;padding:0 6px;white-space:nowrap;vertical-align:baseline;
  margin-left:2px}

/* ---- E. Venta B2C sin meta: el aviso NO puede empujar la tarjeta ----
   La tarjeta mide 4 columnas y la dona ya se lleva su parte del ancho; con
   el texto a tamaño normal, "Sin meta del mes para Venta B2C" se partía en
   cinco renglones y desarmaba la tarjeta. Acá va compacto y acotado. */
.b2c-card .hero-sin-meta-txt{max-width:112px}
.b2c-card .hero-sin-meta-txt p{font-size:10px;line-height:1.25;margin-bottom:2px}
.b2c-card .hero-sin-meta-txt a{font-size:10px;line-height:1.25}

/* ---- E. La dona de Venta B2C ----
   Misma pieza que Ventas Japi, más chica: esta tarjeta mide un renglón de la
   rejilla, no dos. */
.b2c-card .hero-fusion{gap:8px}
.b2c-card .gauge{width:clamp(66px,8.6vh,96px);height:clamp(66px,8.6vh,96px)}
.b2c-card .gauge::after{inset:10px}
.b2c-card .gauge-pct{font-size:clamp(15px,2.3vh,22px)}
.b2c-card .gauge-sub{font-size:8.5px}
.b2c-card .hero-cajas{margin-top:4px}
.b2c-card .hero-falta b{font-size:clamp(12px,1.9vh,15px)}
.b2c-card .hero-falta span{font-size:9px}

/* ---- B. Los pares (Pedidos + Ticket, ROAS + Conversión) ----
   Textual: *"quedó como mucho espacio entre los dos, podrían ser más grandes
   los números"*. El hueco entre las dos mitades se aprieta (de repartir el
   sobrante a un espacio fijo) y los tres números crecen. `justify-content:
   center` en vez de `space-between`: el aire que sobre queda arriba y abajo
   del par, no metido en medio partiéndolo en dos tarjetas visuales. */
.banda-titulares .par-card{justify-content:center;gap:10px}
/* Los tres cortes de una MEDIA tarjeta se acomodan igual que en una tarjeta
   entera (punto C): Hoy solo, a lo ancho y grande, y debajo Semana y Mes de
   a dos, del mismo tamaño entre sí. En un renglón de tres, con los números
   ya crecidos, se encimaban: estas tarjetas miden dos columnas de la rejilla
   y "9.8% 11.2% 12.4%" no cabe en línea. */
.par-card .media-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;align-items:end}
.par-card .media-nums > .media-bloque:first-child{grid-column:1 / -1}
.par-card .media-nums-kpi{display:flex}
.par-card .nivel-num-md{font-size:clamp(24px,4vh,38px)}
.par-card .nivel-num-sm{font-size:clamp(15px,2.3vh,21px)}
.par-card .media-titulo{font-size:12px}
.par-card .media-head{flex-wrap:wrap;row-gap:1px}
.par-card .media{gap:2px}
.par-card .par-sep{margin:0}

/* ---- H. La curva de Leads, rotulada ----
   Textual: *"me parece un poco rara, no sé si esa línea es la de la semana o
   del mes"*. La línea es de leads POR DÍA del mes (la arma Python). Acá se
   dice con todas sus letras y, al lado, el acumulado contra la meta del mes,
   que es la lectura que él busca ("cómo va creciendo hacia la meta"). */
.leads-trend-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-top:6px;flex-wrap:wrap}
.leads-trend-tit{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);line-height:1.2}
.leads-trend-meta{font-size:9.5px;font-weight:750;white-space:nowrap}
.leads-trend{margin-top:2px}

/* ---- F. Las tres tarjetas de equipo ----
   Cada grupo es ahora su propia tarjeta. El encabezado (título + %) y la
   barra del grupo se quedan igual que cuando eran columnas; lo que cambia es
   que la lista de equipos se puede estirar para llenar la tarjeta, así los
   renglones respiran en vez de amontonarse arriba. */
.equipo-card{min-width:0}
.equipo-card .equipo-card-head{align-items:baseline}
.equipo-card .equipo-col-title{font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin:0}
.equipo-card .equipo-col-total{margin-top:1px}
.equipo-lista{display:flex;flex-direction:column;justify-content:space-around;flex:1 1 auto;min-height:0}
.banda-titulares .equipo-card{justify-content:flex-start;gap:3px}

/* ---- F. Reclamos, debajo de KAM ----
   Los dos números que pidió: cuántos entraron y qué porcentaje se resolvió
   antes de 24h. Lado a lado porque son la misma pregunta vista de dos
   formas (cuánto trabajo llegó y qué tan rápido se atendió). */
.reclamos-card{min-width:0}
.reclamos-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.reclamos-bloque{min-width:0;display:flex;flex-direction:column;gap:0}
.reclamos-bloque .nivel-etiqueta{font-size:9px;letter-spacing:.04em;line-height:1.2;
  white-space:normal}

/* ---- G. ALMACÉN: un total grande y sus tres partes ----
   La tarjeta ocupa el alto de dos renglones de la banda de operaciones, así
   que los cuatro números caben en columna sin apretarse: arriba el total
   (todo lo pendiente de piquear) y debajo las tres partes que lo componen.
   Las tres SIEMPRE suman el total; si algún día no cuadran, el que está mal
   es el motor, no la pantalla. */
.almacen-total{display:flex;flex-direction:column;gap:0;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.almacen-card .almacen-total .viz-num{font-size:clamp(26px,4.2vh,42px)}
.almacen-tiles{display:grid;grid-template-columns:1fr;gap:5px;margin-top:5px}
.almacen-tiles .atrasados-tile{text-align:left;padding:4px 7px}
.almacen-tiles .viz-num{font-size:clamp(17px,2.4vh,24px)}
.almacen-tiles .viz-num-sub{font-size:9px;line-height:1.2}
/* El respaldo (mientras el motor no publica los cuatro números) conserva la
   forma vieja de dos casillas lado a lado. */
.almacen-tiles-viejo{grid-template-columns:1fr 1fr}
.almacen-tiles-viejo .atrasados-tile{text-align:center}

/* Con la tarjeta de Almacén al alto de dos renglones, su contenido se reparte
   en vez de dejar el aire al final. */
.banda-areas .almacen-card{justify-content:flex-start}

/* Ronda 9: cada estatus de ruta lleva a Odoo filtrado por ese estatus. El
   enlace ocupa el renglón entero de la leyenda (etiqueta, % y conteo) para
   que el área clickeable sea todo el renglón y no solo el texto. */
.ruta-link{display:contents;color:inherit;text-decoration:none}
.viz-legend-grid li:has(.ruta-link){cursor:pointer;border-radius:4px}
.viz-legend-grid li:has(.ruta-link):hover{background:var(--card-2)}
.viz-legend-grid li:has(.ruta-link):hover span{text-decoration:underline}

/* ---- Cartera B2B por cliente (20/08/2026) -------------------------------
   La tabla la propone Odoo y David la corrige. Tres señales visuales, y cada
   una dice algo distinto: `cartera-corregido` marca el número que tocó una
   persona (le gana a Odoo y sobrevive al refresco del lunes), `cartera-fuera`
   marca la fila que se va a sacar al guardar (todavía se puede deshacer), y
   `cartera-aviso` señala al cliente cuyas facturas no tienen condición de pago
   en Odoo, que es un problema de origen y no de esta pantalla. */
.cartera-grid td.manual-cell{min-width:96px}
.cartera-cliente{font-weight:650}
.cartera-aviso{display:inline-block; margin-left:6px; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:var(--mps);
  border:1px solid var(--mps); border-radius:3px; padding:1px 5px; vertical-align:1px; cursor:help}
.cartera-corregido{position:relative}
.cartera-corregido .cell-input{font-weight:700}
.cartera-corregido::after{content:""; position:absolute; top:3px; right:3px; width:5px; height:5px;
  border-radius:50%; background:var(--ok, #22c55e)}
.cartera-fuera{opacity:.4}
.cartera-fuera .cell-input{text-decoration:line-through}
.cartera-col-nota .cell-input{min-width:150px; text-align:left}
.cartera-col-x{width:34px; text-align:center; padding:0 4px}
.cartera-x{background:none; border:none; color:var(--muted); font-size:17px; line-height:1;
  cursor:pointer; padding:3px 6px; border-radius:4px}
.cartera-x:hover, .cartera-x:focus-visible{background:var(--mps); color:#fff}
.cartera-vacia{padding:18px; text-align:center; color:var(--muted); font-style:italic}
.cartera-pie{display:flex; align-items:center; gap:12px; margin-top:10px}
.cartera-estado{font-size:12px; color:var(--muted)}
.cartera-estado-sucio{color:var(--mps); font-weight:600}
.cartera-estado-ok{color:var(--ok, #22c55e); font-weight:600}
.cartera-estado-error{color:var(--mps); font-weight:600}

/* La tasa del dólar la sugiere el Banguat y se puede pisar a mano: la
   etiqueta dice de dónde vino para que nadie la tome por capturada. */
.tasa-fuente{display:inline-block; margin-left:6px; font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:3px; padding:1px 4px; cursor:help}

/* ---- Pantalla de entrada con Google (20/08/2026) ------------------------
   Una sola cosa que hacer y nada más en pantalla: es lo primero que ve el
   equipo y no debe parecer un formulario que hay que llenar. */
.entrar-fondo{min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg)}
.entrar-caja{width:100%; max-width:410px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:38px 34px 30px; display:flex; flex-direction:column; gap:14px;
  text-align:center}
.entrar-marca{font-size:12px; letter-spacing:.18em; font-weight:800; color:var(--mps)}
.entrar-caja h1{margin:0; font-size:25px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.entrar-sub{margin:0; color:var(--muted); font-size:14px}
.entrar-motivo{margin:0; background:var(--mps); color:#fff; border-radius:8px;
  padding:11px 14px; font-size:13px; line-height:1.4; text-align:left}
.entrar-google{display:flex; align-items:center; justify-content:center; gap:11px;
  margin-top:6px; padding:13px 18px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:#1f1f1f; font-size:15px; font-weight:600; text-decoration:none}
.entrar-google:hover, .entrar-google:focus-visible{border-color:var(--ink-2); background:#f7f7f7}
.entrar-google svg{width:19px; height:19px; flex:none}
.entrar-pie{margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5}

/* ---- Los tres cortes: día y semana a la izquierda, MES en su columna ------
   Francisco, 24/08/2026: *"la jerarquía en el dashboard está invertida, el
   número más grande es el del día y el del mes casi ni se ve; hay manera de
   dejar el más grande el del día pero al del mes darle algún tipo de énfasis"*.

   El día conserva su tamaño y el mes gana por otras tres vías: posición
   propia, una línea que lo separa, y la barra de avance hacia la meta (es el
   único de los tres cortes que se mide contra una). Medido antes de aplicarlo
   contra el dashboard real: el alto de la página no se movió (919px antes y
   después), porque esto solo reacomoda lo que ya vivía dentro de la tarjeta.
   Eso importa: el dashboard ya se pasa por 19px de una pantalla de 900. */
.media-nums{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; align-items:start}
.media-bloque:nth-child(1){grid-column:1; grid-row:1}
.media-bloque:nth-child(2){grid-column:1; grid-row:2}
.media-bloque-mes{grid-column:2; grid-row:1 / span 2;
  border-left:1px solid var(--line); padding-left:12px}
.media-bloque-mes .nivel-num-sm{font-size:19px; font-weight:800}
.media-bloque-mes .nivel-etiqueta{color:var(--ink-2); font-weight:800}
.barra-mes{height:5px; border-radius:3px; background:rgba(127,127,127,.18);
  overflow:hidden; margin-top:5px}
.barra-mes-fill{display:block; height:100%; border-radius:3px; background:currentColor}
@media (max-width:820px){
  /* En celular la tarjeta es angosta: los tres cortes vuelven a apilarse. */
  .media-nums{grid-template-columns:1fr}
  .media-bloque:nth-child(1), .media-bloque:nth-child(2), .media-bloque-mes{
    grid-column:1; grid-row:auto; border-left:0; padding-left:0}
}

/* Metas que NO se teclean porque ya están implícitas en otras (26/08/2026).
   Francisco: "que no sea redundante". La meta de Ventas Japi es exactamente
   la suma de Ecommerce + Tiendas + KAM; tecleada aparte, el día que alguien
   cambie una sola las dos varas se separan en silencio.
   Se ven distintas de una celda editable a propósito: si se vieran iguales,
   alguien intentaría escribir ahí y no entendería por qué no pasa nada. */
.meta-deducida-tag{
  display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--en-curso-ink);background:var(--en-curso-bg);border:1px solid var(--en-curso-ink);
  border-radius:999px;padding:1px 6px;margin-left:6px;cursor:help;white-space:nowrap;vertical-align:middle;
}
input.meta-deducida{
  background:var(--goal-bg);color:var(--muted);border-style:dashed;cursor:not-allowed;
}
input.meta-deducida:focus{outline:none;border-color:var(--line)}

/* El aviso de una dimensión del desglose (26/08/2026). Va en ámbar y no en
   gris "muted": es una advertencia sobre cómo LEER el número, no una nota al
   pie. La de "cliente nuevo vs recurrente" dice que las tiendas facturan todo
   a un solo CONSUMIDOR FINAL, así que el mostrador entero cae en recurrente. */
.drill-aviso-dim{
  font-size:11px;line-height:1.35;color:var(--amber);background:var(--ic-amber-bg);
  border:1px solid var(--amber);border-radius:6px;padding:3px 8px;max-width:640px;cursor:help;
}

/* ================================================================
   FASE 7 — Salud del tablero.

   Lo ROTO arriba y grande, lo que funciona chiquito y al final. Una pantalla
   de salud que abre con una lista de checks verdes hace que uno deje de
   leerla, y el día que algo se rompa el rojo va a estar perdido entre veinte
   verdes.
   ================================================================ */
.salud-veredicto{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:18px 22px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
}
.salud-titulo{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.salud-punto{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
.salud-veredicto.salud-ok{border-color:var(--green)}
.salud-veredicto.salud-ok .salud-punto{background:var(--green)}
.salud-veredicto.salud-aviso{border-color:var(--amber)}
.salud-veredicto.salud-aviso .salud-punto{background:var(--amber)}
.salud-veredicto.salud-alarma{border-color:var(--mps);background:var(--ic-red-bg)}
.salud-veredicto.salud-alarma .salud-punto{background:var(--mps)}

.salud-lista{display:flex;flex-direction:column;gap:10px}
.salud-item{
  display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
}
.salud-item.salud-alarma{border-color:var(--mps);border-left-width:5px}
.salud-item.salud-aviso{border-color:var(--amber);border-left-width:5px}
/* Lo que está bien se ve deliberadamente apagado: es información de fondo,
   no algo que haya que leer. */
.salud-item.salud-ok{opacity:.6;padding:9px 18px}
.salud-badge{
  flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;margin-top:2px;
}
.salud-item.salud-alarma .salud-badge{color:#fff;background:var(--mps)}
.salud-item.salud-aviso .salud-badge{color:#fff;background:var(--amber)}
.salud-item.salud-ok .salud-badge{color:var(--muted);background:var(--card-2);border:1px solid var(--line)}
.salud-cuerpo h2{margin:0;font-size:15px;font-weight:700;color:var(--ink);line-height:1.35}
.salud-item.salud-ok .salud-cuerpo h2{font-size:13.5px;font-weight:600}
.salud-cuerpo p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:80ch}
.salud-pie{margin-top:20px;max-width:90ch}

/* W3: "Mes desde el 17". Cuando el conteo en vivo de leads arranca a media
   mes, el corte del mes es en realidad el de la ventana cubierta, y la
   etiqueta tiene que decirlo. Va más chico y apagado que "Mes" porque es una
   aclaración, no otro rótulo. */
.nivel-desde{font-size:9px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}

/* Banda de un indicador de RANGO (% Capacidad de Producción). Va donde los
   demás indicadores muestran su Meta Mensual editable, pero de solo lectura:
   la banda la fija el catálogo, no el mes. Se pinta apagada a propósito para
   que se lea como "esto no se teclea" y no como un campo que quedó bloqueado
   por error. */
.rango-banda {
  display: inline-block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

/* Sub-fila de RESUMEN del desglose (Nota de Reuniones). Es la única pensada
   para LEERSE en vez de escanearse, así que rompe a propósito con el resto de
   sub-filas: texto que envuelve, ancho de lectura acotado y alineado a la
   izquierda. Un párrafo a 1,400px de ancho no se lee, se saltea. */
.drill-resumen {
  padding: 0;
  text-align: left;
  white-space: normal;
}
/* MISMA técnica sticky que `.drill-value-inner`, y no es opcional: la celda
   abarca todas las columnas de semana, que viven en un contenedor con scroll
   horizontal. Sin esto el párrafo se dibuja donde le toca al ancho total y
   queda fuera de la pantalla, con la fila alta y en blanco. Pasó exactamente
   así la primera vez. */
.drill-resumen-inner {
  position: sticky;
  /* `inline-block` y no `block`, y no es cosmético: con `block` el párrafo
     ocupa todo el ancho de la celda (que abarca las trece columnas de semana)
     y el sticky deja de pegarlo donde debe, así que el texto se dibuja debajo
     de las columnas fijas y se lee cortado por la izquierda. Es el mismo par
     de propiedades que usa `.drill-value-inner`, que lleva rondas
     funcionando: medido, la caja arranca 8px después de donde terminan las
     columnas fijas y ahí se queda aunque la tabla se deslice. */
  display: inline-block;
  max-width: 640px;
  padding: 10px 14px;
  vertical-align: top;
  left: calc(var(--w-num) + var(--w-owner) + var(--w-status) + var(--w-name) + var(--w-metaw) + 8px);
}
.resumen-parrafo {
  margin: 0;
  max-width: 78ch;
  line-height: 1.5;
  font-size: 13px;
}
.resumen-aviso {
  margin: 6px 0 0;
  font-size: 12px;
}
.resumen-detalle {
  margin-top: 8px;
  font-size: 12px;
}
.resumen-detalle summary {
  cursor: pointer;
  color: var(--muted, #6b7280);
}
.resumen-detalle ul {
  margin: 6px 0 0;
  padding-left: 18px;
  max-width: 90ch;
}
.resumen-detalle li {
  margin: 4px 0;
  line-height: 1.45;
}

/* El rótulo de la sub-fila de resumen. Vive DENTRO de la caja y no en una
   celda de nombre propia, porque esta fila usa una sola celda que abarca todo
   el ancho (ver `crearFilaResumen`). */
.resumen-titulo {
  font-weight: 600;
  margin-bottom: 6px;
}

/* ===== Columnas del bloque MENSUAL, pegadas a la DERECHA (31/08/2026) =====
   Francisco: "al deslizar a la izquierda para ver semanas anteriores se
   pierden Mensual Actual, Mensual Meta y Proyección; quiero que queden fijas
   a la derecha y que solo se muevan las columnas de semana en el medio".

   Los `right` se apilan desde afuera hacia adentro, igual que los `left` de
   las columnas de la izquierda. El orden en el HTML tiene que ser el mismo
   que el visual (Actual, Meta, Proyección) o el sticky pega la columna
   equivocada.

   `z-index:2` (uno más que las fijas de la izquierda) NO es capricho: cuando
   la tabla se desliza del todo, los dos bloques se acercan y quien gana el
   traslape tiene que ser el de la derecha, que es el que trae los números que
   Francisco no quiere perder de vista. */
.grid .col-fija-der{position:sticky;z-index:2;background:var(--card)}
.grid thead .col-fija-der{z-index:4}
.grid tbody tr:hover td.col-fija-der{background:var(--card-2)}

.col-mensual.col-proyeccion.col-fija-der{right:0}
.col-mensual.col-mensual-meta.col-fija-der{right:var(--w-proyeccion)}
/* Mensual Actual es la más interna de las tres: se corre el ancho de las
   otras dos. Se escribe con `:not()` porque las tres comparten `col-mensual`
   y sin eso esta regla también le pegaría a las otras dos. */
.col-mensual.col-fija-der:not(.col-mensual-meta):not(.col-proyeccion){
  right:calc(var(--w-proyeccion) + var(--w-mensual-meta))}

/* La sombra va del lado interior, señalando dónde termina lo que se desliza.
   Es la imagen espejo de la que ya lleva `.col-metaw` a la izquierda. */
.col-mensual.col-fija-der:not(.col-mensual-meta):not(.col-proyeccion){
  box-shadow:-2px 0 4px -2px rgba(0,0,0,.08)}

/* ===== Pestaña de CONSULTAS (31/08/2026) =====
   Es la única pantalla del tablero pensada para LEERSE y para escribir en
   ella, no para escanear números. Por eso rompe con el resto a propósito:
   ancho de lectura acotado, texto que envuelve y el campo pegado abajo, como
   cualquier chat. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}
.chat-hilo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 320px;
  padding: 4px 2px;
}

.chat-msg { display: flex; flex-direction: column; gap: 4px; }
.chat-rol {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.chat-cuerpo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.55;
  white-space: normal;
}
/* La pregunta se distingue de la respuesta por el filo, no por el color: el
   tablero ya usa el color para el semáforo y sumarle otro significado lo
   gasta. */
.chat-msg-yo .chat-cuerpo { border-left: 3px solid var(--ic-blue, #0033C3); }
.chat-msg-agente .chat-cuerpo { border-left: 3px solid var(--line); }
.chat-texto { white-space: pre-wrap; }
.chat-pensando { color: var(--muted); font-style: italic; }
.chat-error { color: var(--rojo, #b42318); }

/* De dónde salió el número. Va chiquito y al pie: no compite con la respuesta,
   pero está siempre, porque un dato sin fuente en una reunión pide fe. */
.chat-fuentes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.chat-vacio { padding: 18px 2px; }
.chat-vacio-tit { margin: 0 0 10px; font-weight: 600; }
.chat-vacio-pie { margin-top: 14px; font-size: 12.5px; }
.chat-ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-ejemplo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}
.chat-ejemplo:hover { background: var(--card-2); }

.chat-barra { display: flex; gap: 8px; align-items: flex-end; }
#chat-input {
  flex: 1;
  resize: none;
  font: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  overflow-y: auto;
}
.btn-preguntar { white-space: nowrap; }
.chat-pie { font-size: 12px; margin: 0; }

/* ============================================================
   B4 · LA TABLA DINÁMICA (cruce de dos dimensiones)
   ============================================================
   Vive dentro de la misma caja sticky que el resumen, porque tiene el mismo
   problema: la celda abarca las trece columnas de semana, y sin el sticky la
   tabla se dibuja fuera de la pantalla (el scorecard abre deslizado al
   extremo derecho).

   El ancho máximo es mayor que el del resumen: un párrafo se lee mejor
   angosto, una tabla necesita aire. Si aun así no cabe, se desliza SOLA
   dentro de `.cruce-wrap`, sin empujar la página.

   Todos los colores salen de los tokens (`--card`, `--line`, `--ink`...), así
   que el tema claro y el oscuro quedan resueltos sin una segunda tabla de
   reglas -- y sin el bug clásico de un color definido solo adentro de un
   `@media`, que en el otro tema se queda sin valor. */
.drill-cruce-inner { max-width: 980px; }
.cruce-periodo { font-size: 11px; margin-bottom: 8px; }
.cruce-vacio { font-size: 12px; padding: 6px 0; }
.cruce-wrap { max-width: 100%; overflow-x: auto; }
.cruce-tabla {
  border-collapse: collapse;
  font-size: 12px;
  /* Los números de una tabla se comparan de un vistazo por su LARGO, y sin
     esto los dígitos tienen anchos distintos y las columnas bailan. */
  font-variant-numeric: tabular-nums;
}
.cruce-tabla th, .cruce-tabla td {
  border: 1px solid var(--line);
  padding: 4px 8px;
  white-space: nowrap;
}
.cruce-tabla thead th { background: var(--card-2); font-weight: 700; text-align: right; }
.cruce-tabla th.cruce-esquina { text-align: left; }
.cruce-tabla th.cruce-fila {
  text-align: left; font-weight: 600; color: var(--ink);
  /* El nombre de la fila se queda a la vista mientras la tabla se desliza a
     lo ancho: sin esto, al llegar a la última columna ya no se sabe de qué
     equipo o producto se está leyendo el número. */
  position: sticky; left: 0; background: var(--card); z-index: 1;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.cruce-tabla td.cruce-celda { text-align: right; color: var(--ink-2); }
/* Un cruce sin venta se pinta apagado, no en blanco: el guion dice "no vendió"
   y el hueco diría "no sé", que son cosas distintas. */
.cruce-tabla td.cruce-celda-cero { color: var(--muted); }
.cruce-tabla .cruce-total { font-weight: 700; color: var(--ink); }
.cruce-tabla tfoot .cruce-total { background: var(--card-2); }
.cruce-tabla tr.cruce-fila-otros th, .cruce-tabla tr.cruce-fila-otros td {
  font-style: italic; color: var(--muted);
}
.cruce-pie { font-size: 11px; margin-top: 8px; max-width: 900px; white-space: normal; }

/* El asterisco de una proyección poco confiable (hoy solo KAM). Discreto a
   propósito: tiene que verse al escanear la columna sin robarle atención al
   número, que es lo que la gente vino a leer. El motivo vive en el `title` de
   la celda, no en un ícono aparte. */
.proy-asterisco {
  margin-left: 2px;
  font-weight: 800;
  color: var(--muted);
  cursor: help;
}

/* §4.6 · Recompra y % Devoluciones, dentro de la tarjeta de Venta B2C.
   Viven acá porque son indicadores de B2C (Recompra se mide sobre los equipos
   directos al consumidor) y porque el renglón de titulares no tiene una
   columna libre: meterlas ahí encogía todo lo demás un 14%.
   `margin-top:auto` las pega ABAJO de la tarjeta, que es donde estaba el aire,
   en vez de empujar los cortes de arriba. */
.b2c-calidad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.b2c-calidad-item { min-width: 0; }
.b2c-calidad-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 2px;
}
.b2c-calidad-nom {
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b2c-calidad-num {
  font-size: clamp(20px, 2.1vh, 30px); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* La ventana móvil, que es lo que distingue a estos dos del resto de la
   pantalla. Va SIEMPRE visible: en la tele nadie pasa el cursor. */
.b2c-calidad-pie { font-size: 10.5px; margin-top: 1px; }
@media (max-width: 520px) {
  .b2c-calidad { grid-template-columns: 1fr; }
}

/* 19/09/2026 -- Pedidos de Ventas: cuántos pedidos hay detrás de cada monto,
   EN LA MISMA LÍNEA de la etiqueta ("HOY · 212 pedidos"). La etiqueta va en
   mayúsculas y espaciada; el conteo no, para que se lea como dato y no como
   rótulo. `nowrap`: si partiera en dos renglones estiraría toda la fila de
   titulares, que es justo lo que este acomodo evita. */
.conteo-pedidos{text-transform:none;letter-spacing:0;font-weight:650;color:var(--ink-3, #8a8f98);
  white-space:nowrap}
/* "Pedidos Ecommerce" + la pastilla medían 137 + 6 + 64 = 207px en un
   encabezado de 207: por redondeo bajaba la pastilla y la fila crecía 15px.
   Un punto menos de letra deja holgura también para cuando tenga meta y la
   pastilla diga "105% de hoy". Solo esta tarjeta. */
.media[data-id="pedidos_venta_ecommerce"] .media-titulo{font-size:11px;letter-spacing:0}

/* ================================================================
   06/10/2026 — FILAS COMPACTAS. Francisco: *"están muy altas las filas por
   cierto entonces no se logra leer en una sola vista sin scrollear (...) el
   mensual es más bajito"*. Medido en la copia local: una fila normal medía
   36px y las de Tiendas y Reclamos 50-52px. Las tres causas eran el nombre
   del indicador partido en dos renglones, el plan vencido en un segundo
   renglón debajo de la nota, y 5px de relleno arriba y abajo alrededor de
   campos de 23px. El nombre completo sigue en el tooltip.
   ================================================================ */
.grid tbody td{padding-top:2px;padding-bottom:2px}
.grid tbody .cell-input{padding-top:1px;padding-bottom:1px;line-height:1.25}
.grid tbody .notas-trigger{padding-top:1px;padding-bottom:1px;line-height:1.25}
.grid tbody .col-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid tbody .col-name .ind-name{white-space:nowrap}
.week-sub{font-size:9px;line-height:1.05;margin-top:0}
.notas-trigger.notas-vencido{color:var(--muted);font-style:normal}
.notas-trigger.notas-vencido .plan-vencido-tag{margin-right:5px;vertical-align:1px}
.notas-trigger.notas-vencido .plan-vencido-txt{text-decoration:line-through;text-decoration-thickness:1px}

/* 06/10/2026 — arrastrar filas y ordenar por columna (ver static/filas.js). */
.fila-grip{display:inline-flex;align-items:center;gap:2px;cursor:grab;user-select:none;
  touch-action:none;border-radius:4px;padding:0 2px;color:var(--muted)}
.fila-grip:hover,.fila-grip:focus-visible{background:var(--card-2);color:var(--ink);outline:none}
.fila-grip-puntos{font-size:10px;letter-spacing:-2px;opacity:.45}
.fila-grip:hover .fila-grip-puntos{opacity:1}
body.filas-arrastrando,body.filas-arrastrando *{cursor:grabbing !important;user-select:none}
.grid tbody tr.fila-en-vuelo{position:relative;z-index:6}
.grid tbody tr.fila-en-vuelo td,.grid tbody tr.fila-en-vuelo td.frozen{
  background:var(--ic-blue-bg);box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.grid thead th.th-ordenable{cursor:pointer}
.grid thead th.th-ordenable:hover{color:var(--ink)}
.th-flecha{font-size:8px;margin-left:3px;color:var(--en-curso-ink)}
/* El Mensual muestra el nombre completo de la persona dueña (06/10/2026). */
.dash[data-scorecard="mensual"]{--w-owner:136px}

/* 06/10/2026 — Reclamos: el número abre la lista con enlaces a JotForm. */
.reclamos-link{font:inherit;font-weight:inherit;color:var(--en-curso-ink);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.reclamos-link:hover{text-decoration-style:solid}
.reclamos-modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.28);display:grid;place-items:center;padding:16px}
.reclamos-panel{background:var(--card);color:var(--ink);border-radius:12px;width:min(560px,100%);
  max-height:80vh;display:flex;flex-direction:column;box-shadow:0 18px 40px -12px rgba(0,0,0,.4)}
.reclamos-cab{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--line);font-size:14px}
.reclamos-cuerpo{overflow:auto;padding:8px 10px 12px;font-size:13px}
.reclamos-lista{list-style:none;margin:0;padding:0}
.reclamos-item{display:grid;grid-template-columns:86px 1fr auto;gap:10px;padding:7px 8px;border-radius:7px;
  color:inherit;text-decoration:none;align-items:baseline}
a.reclamos-item:hover{background:var(--card-2)}
.reclamos-fecha{color:var(--muted);font-variant-numeric:tabular-nums}
.reclamos-tipo{font-weight:650}
.reclamos-so{color:var(--muted);font-size:12px;white-space:nowrap}

/* ================================================================
   06/10/2026 — DASHBOARD DEL MES contra META (estilo Bono 14). Una sola
   dimensión de tiempo: el acumulado del mes. Ver templates/graficos.html.
   ================================================================ */
.banda-mes{display:flex;flex-direction:column;gap:8px}
.banda-mes .area-label{margin:2px 0 0}
.mes-grid{display:grid;grid-template-columns:minmax(340px,1.15fr) 3fr;gap:10px;min-width:0}
.mes-hero{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.mes-hero .hero-fusion-dona{align-self:center}
.mes-hero-num{font-size:20px;font-weight:850;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-align:center}
.mes-hero-num .muted{font-size:14px;font-weight:650}
.mes-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.kpi-mes{display:flex;flex-direction:column;gap:4px;justify-content:space-between}
.kpi-mes-num{font-size:clamp(26px,2.6vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.kpi-mes-sub{font-size:11px;line-height:1.25}
.kpi-mes-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.kpi-mes-dif{font-weight:800}
.kpi-mes-dif.dif-pos{color:var(--green)} .kpi-mes-dif.dif-neg{color:var(--mps)}
.banda-mes .equipos-banda{grid-column:auto;grid-row:auto;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto}
.banda-mes .equipos-banda > .equipo-card,
.banda-mes .equipos-banda > .reclamos-card{grid-row:auto;grid-column:auto}
.dia-link{font-size:12px;font-weight:800;color:var(--en-curso-ink);background:var(--ic-blue-bg);
  border-radius:999px;padding:4px 10px;text-decoration:none;white-space:nowrap}
.dia-link:hover{filter:brightness(.95)}
@media (max-width:1100px){
  .mes-grid{grid-template-columns:1fr}
  .mes-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banda-mes .equipos-banda{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .mes-kpis,.banda-mes .equipos-banda{grid-template-columns:1fr}
}