/* Preventa Sebigus — hoja de estilos única.
   El violeta es el de la instancia de Odoo de la empresa (#6b3e66). La piel oscura
   toma los tonos del addon propio web_dark_mode, porque Odoo 19 Community no trae
   paleta oscura de fábrica. Los verdes y rojos de la planilla son los del formato
   condicional del Excel original, apenas modernizados. */

:root {
  --marca: #6b3e66;
  --marca-claro: #8a5484;
  --marca-suave: #f3edf2;

  --canvas: #f2f1f4;
  --hoja: #ffffff;
  --hoja-2: #fafafb;
  --hoja-3: #f0eef2;
  --linea: #e2dfe4;
  --linea-fuerte: #cdc8d1;

  --tinta: #1f1b23;
  --tinta-2: #5d5765;
  --tinta-3: #8b8494;

  --ok-t: #0f6b3f;   --ok-f: #e4f4ea;   --ok-b: #b8e0c8;
  --mal-t: #a5231a;  --mal-f: #fceceb;  --mal-b: #f1c4c0;
  --avi-t: #8a5a00;  --avi-f: #fdf3e2;  --avi-b: #eed9ac;
  --dato-t: #1d4f91; --dato-f: #eaf1fb;
  /* NEW ITEM: rosa (Ezequiel, 24/09/2026). Era crema y se confundía con el amarillo
     de la fila que encuentra el buscador. */
  --nuevo-t: #a3215f; --nuevo-f: #fce9f2; --nuevo-b: #f6cde0;
  /* USADO COMO REEMPLAZO: amarillito (Abi, 02/10/2026). Propio y no el de aviso, que es
     el de la fila que encuentra el buscador. */
  --uso-t: #7a5c00;  --uso-f: #fff2b3;

  --sombra: 0 1px 2px rgba(20,15,25,.06), 0 4px 12px rgba(20,15,25,.05);
  --radio: 10px;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

:root[data-piel="oscuro"] {
  --marca: #b06aa8;
  --marca-claro: #e87cdc;
  --marca-suave: #2c2436;

  --canvas: #15171f;
  --hoja: #1e2029;
  --hoja-2: #242732;
  --hoja-3: #2b2f3c;
  --linea: #333644;
  --linea-fuerte: #454a5c;

  --tinta: #e8e6ee;
  --tinta-2: #a9a5b6;
  --tinta-3: #7d7889;

  --ok-t: #6ee7a8;   --ok-f: #16302a;   --ok-b: #2c5c48;
  --mal-t: #ff9b92;  --mal-f: #37201f;  --mal-b: #6b3733;
  --avi-t: #f2c469;  --avi-f: #332a17;  --avi-b: #63512a;
  --dato-t: #8ab6f0; --dato-f: #1c2739;
  --nuevo-t: #f7a8cc; --nuevo-f: #33212b; --nuevo-b: #5a2f45;
  --uso-t: #f5d76e;  --uso-f: #3a3214;

  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--tinta);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.num, .n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- cabecera */
/* `header.barra` y no `.barra` suelto: las barras de los gráficos son <rect class="barra">,
   y en SVG2 `height` también es una propiedad CSS del rect. Con `.barra` los 54 px de la
   cabecera pisaban el alto de cada barra y salían todas iguales, colgando del eje. */
header.barra {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; height: 54px;
  background: var(--marca); color: #fff;
  box-shadow: var(--sombra);
}
.barra .logo { font-weight: 700; letter-spacing: .04em; font-size: 15px; white-space: nowrap; }
.barra .logo small { display: block; font-weight: 400; font-size: 10px; opacity: .72; letter-spacing: .12em; }
/* `min-width: 0` para que el menú pueda achicarse: sin eso un elemento flexible no baja
   del ancho de su contenido y en una pantalla angosta empuja la página entera. */
header.barra { overflow: hidden; }
/* Sin barra de scroll: lo que no entra se pliega en la flechita «»», como los marcadores de
   Chrome (Ezequiel, 28/09/2026). Ver acomodarNav() en base.js. */
.barra nav { display: flex; gap: 2px; margin-left: 6px; flex: 1; min-width: 0; overflow: hidden; }
.barra nav a {
  padding: 7px 13px; border-radius: 7px; font-size: 13.5px; flex-shrink: 0;
  color: rgba(255,255,255,.82); white-space: nowrap;
}
.barra nav a.oculto { display: none; }
.barra nav .nav-mas {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: rgba(255,255,255,.85); padding: 6px 9px;
  border-radius: 7px; cursor: pointer;
}
.barra nav .nav-mas[hidden] { display: none; }
.barra nav .nav-mas svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.barra nav .nav-mas:hover, .barra nav .nav-mas.abierto { background: rgba(255,255,255,.13); color: #fff; }
.barra nav .nav-mas.acti { background: rgba(255,255,255,.2); color: #fff; }
.nav-menu {
  position: fixed; z-index: 120; min-width: 200px; padding: 6px; background: var(--hoja);
  border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,15,25,.18);
  animation: nav-menu-entra .16s ease-out;
}
.nav-menu[hidden] { display: none; }
.nav-menu a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--tinta); font-size: 14px; white-space: nowrap; }
.nav-menu a:hover { background: var(--hoja-3); }
.nav-menu a.acti { color: var(--marca); font-weight: 650; background: var(--marca-suave); }
.nav-menu a.destacado { font-weight: 680; color: #3a1c00; background: linear-gradient(120deg, #ffe07a 0%, #ffb63b 50%, #ff8d5c 100%); }
.nav-menu a.destacado::before { content: "✦ "; }
@keyframes nav-menu-entra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none; } }
/* Pestañas más juntas en pantallas medianas. Con «Reemplazos», a 1536 px (1920 con el
   zoom de Windows al 125%) «Aprobaciones» quedaba afuera, y a 1366 una pestaña más que
   antes. Así se ve lo mismo que se veía antes de sumarla. */
@media (max-width: 1800px) { .barra nav a { padding: 7px 10px; } }
@media (max-width: 1440px) { .barra nav a { padding: 6px 7px; font-size: 13px; } }
.barra nav a:hover { background: rgba(255,255,255,.13); color: #fff; }
.barra nav a.acti { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
/* «Reemplazos» resalta (Ezequiel, 24/09/2026): dorado sobre el violeta, un brillo que lo
   cruza cada tanto y dos destellos que titilan. Quieto si el sistema pide menos movimiento. */
/* `flex-shrink: 0`: con `overflow: hidden` su ancho mínimo pasa a ser cero y el menú
   flexible lo aplastaba hasta dejar «Re». */
.barra nav a.destacado {
  position: relative; overflow: hidden; flex-shrink: 0; color: #3a1c00; font-weight: 680;
  padding-left: 18px; padding-right: 18px;
  background: linear-gradient(120deg, #ffe07a 0%, #ffb63b 50%, #ff8d5c 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 2px 12px rgba(255,182,59,.5);
}
.barra nav a.destacado:hover { color: #3a1c00; background: linear-gradient(120deg, #ffe890 0%, #ffc24f 50%, #ff9c6e 100%); }
.barra nav a.destacado.acti { color: #3a1c00; box-shadow: inset 0 0 0 2px #fff, 0 2px 14px rgba(255,182,59,.7); }
.barra nav a.destacado::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg); animation: ree-brillo 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes ree-brillo { 0%, 58% { left: -70%; } 100% { left: 135%; } }
.barra nav a.destacado .destello {
  position: absolute; line-height: 1; color: #fff; pointer-events: none;
  text-shadow: 0 0 5px rgba(255,255,255,.95), 0 0 2px #fff;
  animation: ree-titila 1.9s ease-in-out infinite;
}
.barra nav a.destacado .destello.d1 { top: 2px; right: 5px; font-size: 10px; }
.barra nav a.destacado .destello.d2 { bottom: 2px; left: 5px; font-size: 8px; animation-delay: .95s; }
@keyframes ree-titila {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@media (max-width: 1440px) { .barra nav a.destacado { padding-left: 13px; padding-right: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .barra nav a.destacado::after { display: none; }
  .barra nav a.destacado .destello { animation: none; opacity: .9; }
}
.barra select {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px; padding: 6px 9px; font-size: 13px; max-width: 230px;
}
.barra select option { color: #222; }
.barra select:disabled { opacity: .45; }
#selTemporada { max-width: 150px; font-weight: 600; }
#selRubro { max-width: 200px; }
.barra .icono {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px; width: 34px; height: 32px; cursor: pointer; line-height: 1;
}
.barra .icono:hover { background: rgba(255,255,255,.26); }
.corte { font-size: 11.5px; color: rgba(255,255,255,.78); white-space: nowrap; text-align: right; }
.corte b { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ layout */
.pagina { padding: 20px; max-width: 1680px; margin: 0 auto; }
.pagina.ancha { max-width: none; padding: 0; }

.titulo-pag { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.titulo-pag h1 { font-size: 21px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.titulo-pag .sub { color: var(--tinta-2); font-size: 13px; }

.tarjeta {
  background: var(--hoja); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta > h2 {
  margin: 0; padding: 13px 16px; font-size: 13px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 1px solid var(--linea);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tarjeta > h2 .pista { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--tinta-3); }

.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px) { .r2, .r3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi {
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px 16px 15px; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.kpi .rot { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.kpi .val { font-size: 27px; font-weight: 660; letter-spacing: -.02em; margin-top: 5px; line-height: 1.1; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--tinta-2); margin-left: 3px; }
.kpi .pie { font-size: 12px; color: var(--tinta-2); margin-top: 5px; }
.kpi.destacado { background: linear-gradient(160deg, var(--marca) 0%, var(--marca-claro) 130%); border-color: transparent; color: #fff; }
.kpi.destacado .rot, .kpi.destacado .pie { color: rgba(255,255,255,.82); }
.kpi.destacado .val small { color: rgba(255,255,255,.8); }

.barrita { display: block; height: 7px; border-radius: 4px; background: var(--linea); overflow: hidden; margin-top: 10px; }
.barrita > i { display: block; height: 100%; border-radius: 4px; background: var(--marca); }
.kpi.destacado .barrita { background: rgba(255,255,255,.25); }
.kpi.destacado .barrita > i { background: #fff; }

/* ------------------------------------------------------------------ tablas */
table.datos { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.datos th {
  position: sticky; top: 0; z-index: 2; background: var(--hoja-2);
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-2);
  padding: 9px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
table.datos th.der, table.datos td.der { text-align: right; }
table.datos td { padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
/* Con los anchos clavados, un texto más largo que su columna tiene que cortarse en vez
   de empujarla. `break-word` y no `anywhere`: parte entre palabras siempre que puede, y
   sólo mete la tijera adentro de una si esa sola palabra no entra. Con `anywhere` un
   cliente quedaba como «DISTRIBUID / ORA JADE TAKEM». */
table.datos td { overflow-wrap: break-word; }
/* Un número NO se parte nunca. La regla miraba `td .num` —un span adentro de la
   celda— pero las celdas de importe llevan la clase en el `td`, así que quedaban
   afuera: al poner los importes completos, «$105.677.533,18» se cortaba en dos
   renglones. Las fechas, lo mismo. */
table.datos td .codigo, table.datos td .num { overflow-wrap: normal; }
table.datos td.num, table.datos td.fecha, table.datos td .codigo {
  overflow-wrap: normal; white-space: nowrap;
}
/* Juguetes tiene 4.294 productos y 2.320 pedidos: dibujar todas las filas de una
   costaba más de un segundo. Con esto el navegador arma sólo las que se ven y va
   completando al hacer scroll; la altura declarada evita que la barra salte. */
table.datos.larga tbody tr { content-visibility: auto; contain-intrinsic-size: auto 41px; }
table.datos tbody tr:hover td { background: var(--marca-suave); }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos th.orden { cursor: pointer; user-select: none; }
table.datos th.orden:hover { color: var(--marca); }
table.datos th.asc::after { content: " ▲"; font-size: 9px; }
table.datos th.desc::after { content: " ▼"; font-size: 9px; }
.tabla-scroll { max-height: 480px; overflow: auto; }
/* Ninguna tabla puede empujar la página a lo ancho: si no entra, se corre adentro de su
   tarjeta. Se hace con un contenedor y NO poniéndole `display:block` a la tabla: eso
   convierte a thead y tbody en dos tablas independientes, cada una calcula sus anchos
   por su cuenta y los títulos quedan corridos respecto de los datos. */
.tarjeta { max-width: 100%; }
.tabla-ancha { overflow-x: auto; max-width: 100%; }

.pastilla {
  display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px;
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
/* Adentro de una tabla de ancho fijo la pastilla larga (una licencia, por ejemplo)
   se parte en dos líneas en vez de derramarse sobre la columna de al lado. */
table.datos td .pastilla { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

.p-ok  { color: var(--ok-t);  background: var(--ok-f);  border-color: var(--ok-b); }
.p-mal { color: var(--mal-t); background: var(--mal-f); border-color: var(--mal-b); }
.p-avi { color: var(--avi-t); background: var(--avi-f); border-color: var(--avi-b); }
.p-neu { color: var(--tinta-2); background: var(--hoja-2); border-color: var(--linea); }

.mini { color: var(--tinta-3); font-size: 12px; }
.codigo { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-2); }
.tot-fila { font-weight: 700; }
/* La fila de totales en un tfoot se queda pegada abajo del cuadro con scroll: los
   totales se ven desde el arranque, sin bajar quinientas filas. */
/* El sticky va en el TFOOT y no en las celdas: Chrome ignora ottom en un td suelto
   pero si clava el grupo de filas entero. */
table.datos tfoot {
  position: sticky; bottom: 0; z-index: 3;
}
table.datos tfoot td {
  background: var(--hoja-2); font-weight: 700;
  box-shadow: 0 -2px 0 var(--linea-fuerte);
}
.tot-fila td { background: var(--hoja-2); }
.mini-foto img { width: 34px; height: 34px; object-fit: contain; background: #fff;
  border: 1px solid var(--linea); border-radius: 6px; display: block; }

/* ================================================================ PLANILLA */
.planilla-barra {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  background: var(--hoja); border-bottom: 1px solid var(--linea); flex-wrap: wrap;
  position: sticky; top: 54px; z-index: 40;
}
.planilla-barra input[type=search] { min-width: 210px; }
/* La de la planilla va en dos renglones (01/10/2026): buscador y desplegable del mismo
   ancho arriba y abajo, así producto/pedido y marcas/vendedores quedan encolumnados. */
.planilla-barra.pb-dos { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 7px; padding: 8px 14px; }
.planilla-barra .pb-fila { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.planilla-barra #qProd, .planilla-barra #qPed { width: 260px; }
.planilla-barra #fSec, .planilla-barra #fVend { width: 200px; }
.planilla-barra #fMarca, .planilla-barra #fCat { width: 180px; }
/* Pantalla Secciones (05/10/2026): la fila de cada categoría y la barra de acción pegada
   abajo, con lo elegido y la sección a asignar. */
#tSec tr.sec-grupo td { background: var(--hoja-3); position: sticky; top: 0; }
#tSec input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.sec-accion { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; background: var(--hoja); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); font-size: 13.5px; color: var(--tinta-2); }
.sec-accion.con-elegidos { border-color: var(--marca); }
.sec-accion b { color: var(--tinta); }
.sec-accion input { width: 260px; padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: 7px;
  background: var(--hoja); color: var(--tinta); font-size: 13.5px; }
/* Configuración: la miniatura de cada banner de sección y el nombre que se le pone. */
.sec-banner { display: block; width: 300px; height: auto; border-radius: 6px; border: 1px solid var(--linea); }
.sec-nombre { width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--linea-fuerte);
  border-radius: 7px; background: var(--hoja); color: var(--tinta); font-size: 14px; }
.planilla-barra input[type=search], .planilla-barra select {
  padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: 7px;
  background: var(--hoja); color: var(--tinta); font-size: 13px;
}
.planilla-barra .sep { flex: 1; }
.planilla-barra .divisor { width: 1px; height: 22px; background: var(--linea); }
.chip {
  padding: 6px 11px; border: 1px solid var(--linea-fuerte); border-radius: 99px;
  background: var(--hoja); cursor: pointer; font-size: 12.5px; color: var(--tinta-2);
  white-space: nowrap;
}
.chip:hover { border-color: var(--marca); color: var(--marca); }
.chip.acti { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
/* El botoncito de Excel de cada cuadro del tablero: baja ese cuadro tal como se ve.
   Va absoluto en la esquina y el h2 le reserva el lugar, para no desarmar el flex
   que tiene el título a la izquierda y la pista a la derecha. */
.tarjeta h2.con-xls { position: relative; padding-right: 46px; }
.btn-xls {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 3px; cursor: pointer; line-height: 0;
  border-radius: 6px; opacity: .55;
}
.btn-xls:hover { opacity: 1; background: var(--hoja-3); }
.btn-xls:disabled { opacity: .25; cursor: default; }

/* «Ventas por Vendedor» del Tablero general (09/10/2026): llamativo, verde Excel, y el
   ícono gira mientras se arman los archivos. */
.btn-ventas-vend {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
  padding: 7px 14px 7px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: #107C41; color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16,124,65,.35); transition: transform .12s, box-shadow .12s;
}
.btn-ventas-vend svg { background: #fff; border-radius: 4px; padding: 2px; width: 20px; height: 20px; }
.btn-ventas-vend:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,124,65,.45); }
.btn-ventas-vend:disabled { cursor: progress; opacity: .85; transform: none; }
.btn-ventas-vend.bajando svg { animation: o-rotar 1s linear infinite; }
/* El atajo al Seguimiento, al lado: turquesa neón (Ezequiel, 09/10/2026). */
.btn-seguimiento {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 7px 14px 7px 11px;
  border-radius: 9px; text-decoration: none; white-space: nowrap; font-weight: 800; font-size: 13px;
  color: #003B3A; background: linear-gradient(135deg, #2DFFEF, #00D9C8);
  box-shadow: 0 0 0 1px rgba(0,217,200,.5), 0 0 14px rgba(0,240,225,.55), 0 2px 8px rgba(0,180,170,.35);
  transition: transform .12s, box-shadow .12s;
}
.btn-seguimiento:hover { transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,217,200,.7), 0 0 22px rgba(0,240,225,.8), 0 4px 12px rgba(0,180,170,.45); }
:root[data-piel="oscuro"] .btn-seguimiento { color: #00201F; }

/* El filtro NEW ITEM de la planilla, con el rosa de la etiqueta (01/10/2026). */
.chip.chip-nuevo { color: var(--nuevo-t); border-color: var(--nuevo-b); font-weight: 700; letter-spacing: .04em; }
.chip.chip-nuevo:hover { border-color: var(--nuevo-t); color: var(--nuevo-t); }
.chip.chip-nuevo.acti { background: var(--nuevo-t); border-color: var(--nuevo-t); color: var(--nuevo-f); }
/* No es un interruptor sino una acción: se distingue para que no se lea como apagado. */
.chip-accion {
  border-color: var(--marca); color: var(--marca); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip-accion svg { flex: 0 0 auto; }
.chip-accion:hover { background: var(--marca-suave); }
.chip-accion:disabled { opacity: .5; cursor: default; }

/* La barra de buscar de las pantallas que no son la planilla: se apoya arriba de la
   tarjeta y las dos comparten el marco, como si fueran una sola pieza. */
.barra-filtro {
  position: static; border: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) 0 0;
}
.tarjeta.bajo-barra { border-radius: 0 0 var(--radio) var(--radio); border-top: 0; }
/* En el tablero la barra no tiene una tabla pegada abajo: cierra sola. */
.barra-filtro.suelta { border-radius: var(--radio); }
.kpis-bajo-barra { margin-top: 16px; }
/* Dentro de una tarjeta, debajo del título. */
.tarjeta > .barra-filtro {
  border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 8px 14px;
}

/* Aviso flotante: aparece abajo a la derecha y se va solo. */
#aviso-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 900; max-width: 460px;
  padding: 11px 15px; border-radius: 9px; background: var(--tinta); color: var(--hoja);
  font-size: 13px; line-height: 1.45; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#aviso-flotante.visible { opacity: 1; transform: none; }

.grid {
  display: grid;
  background: var(--hoja);
  border-top: 1px solid var(--linea);
  overflow: hidden;
  max-width: 100%;
  --z: 1;   /* lo pisa el selector de zoom; la letra acompaña a la geometría */
}
/* fila 1: macro + atributos del pedido · fila 2: títulos + clientes · fila 3: la matriz */
.g-macro    { grid-area: 1 / 1; z-index: 34; overflow: hidden;
              background: var(--hoja-3); border-right: 2px solid var(--linea-fuerte);
              border-bottom: 1px solid var(--linea); }
.g-atrib    { grid-area: 1 / 2; z-index: 24; overflow: hidden; background: var(--hoja-3);
              border-bottom: 1px solid var(--linea); }
.g-titulos  { grid-area: 2 / 1; z-index: 32; overflow: hidden; background: var(--hoja-2);
              border-right: 2px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte); }
.g-clientes { grid-area: 2 / 2; z-index: 22; overflow: hidden; background: var(--hoja-2);
              border-bottom: 1px solid var(--linea-fuerte); }
.g-fijo     { grid-area: 3 / 1; z-index: 20; overflow: hidden; background: var(--hoja);
              border-right: 2px solid var(--linea-fuerte); }
/* cuando las columnas fijas no entran en la pantalla, ese bloque se corre solo */
.g-fijo.corrible { overflow-x: auto; overflow-y: hidden; }
.g-cuerpo   { grid-area: 3 / 2; overflow: auto; }
.g-lienzo, .g-capa, .g-fijo-capa { position: relative; }
.g-macro .g-fijo-capa { display: flex; height: 100%; }
/* La capa de los títulos tiene que ocupar toda la banda. Sin esto el `height:100%` de
   `.hprod` no resuelve —su contenedor no tiene altura propia— y el bloque de títulos
   medía lo que medía el texto: 22 px arriba de una banda de 40, con la mitad de abajo
   vacía. Centrarlos ahí adentro no alcanzaba, porque la casilla misma estaba corrida. */
.g-titulos .g-fijo-capa { height: 100%; }

/* --- esquina: el bloque macro (columnas I:M del Excel) -------------------- */
/* NADA DE HUECO BLANCO EN EL MEDIO (Ezequiel, 15/09/2026). El alto de la esquina lo
   fija la cabecera del pedido, que es más alta que su contenido natural, así que el
   sobrante se reparte entre las dos filas de tarjetas (ver `.dos-filas`). Antes iba
   `space-between` y el sobrante quedaba como un vacío entre las dos mitades. */
.macro { flex: 1; min-width: 0; padding: calc(11px * var(--z)) calc(13px * var(--z));
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: calc(10px * var(--z)); overflow: hidden; }
/* SEIS CIFRAS EN UNA SOLA LÍNEA, y `nowrap` es a propósito: si envolvieran, la segunda
   fila empujaría el cuadro por etapa fuera del `overflow:hidden` de `.macro`, y en las
   temporadas con etapa no sobran más de veinte píxeles de alto.
   Los anchos van por peso, no fijos: el bloque mide lo que miden las columnas fijas, que
   depende del ancho de la ventana. Las dos del objetivo pesan la mitad —fue el pedido—,
   los importes pesan más porque llevan hasta trece dígitos con puntos y centavos. */
.macro-cifras { display: flex; gap: calc(10px * var(--z)); flex-wrap: nowrap; flex: 0 0 auto; }
.mc {
  flex: 1.8 1 0; min-width: 0; background: var(--hoja); border: 1px solid var(--linea);
  border-radius: 8px; padding: calc(8px * var(--z)) calc(11px * var(--z)) calc(9px * var(--z));
  overflow: hidden;
  /* Más altas que su texto, con el número centrado: es lo que llena la esquina sin
     estirar nada de forma rara. El tope lo pone `.macro-cifras`, que no crece. */
  min-height: calc(108px * var(--z));
  display: flex; flex-direction: column; justify-content: center;
}
/* Los pesos salieron de medir el número más largo de cada una en la pantalla viva, no de
   repartir en partes iguales: un importe con centavos ocupa el triple que un porcentaje,
   y «7.115,34» recortado a «7.11…» sería peor que no ponerlo. */
.mc.destacado { flex-grow: 2.6; }
.mc.chica { flex-grow: 1.5; }
.mc.plata  { flex-grow: 2.4; }
.mc span { display: block; font-size: calc(11px * var(--z)); letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3); font-weight: 650; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc b { display: block; font-size: calc(35px * var(--z)); font-weight: 690; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.1;
  /* Un importe que no entre muestra «…» y se ve que falta, en vez de cortarse callado. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Los importes van completos y con centavos —«no quiero ver resumido los totales»—, así
   que necesitan cuerpo propio: en el de 31 px no entra ni la mitad. */
.mc.plata b { font-size: calc(20px * var(--z)); letter-spacing: -.015em; margin-top: calc(4px * var(--z)); }
.mc.chica b { font-size: calc(22px * var(--z)); margin-top: calc(4px * var(--z)); }
.mc.bultos b { font-size: calc(25px * var(--z)); }
.mc.destacado { background: var(--marca); border-color: var(--marca); color: #fff; }
.mc.destacado span { color: rgba(255,255,255,.82); }
.mc.destacado .barrita { margin-top: calc(7px * var(--z)); height: calc(8px * var(--z));
  background: rgba(255,255,255,.28); }
.mc.destacado .barrita > i { background: #fff; }
/* El objetivo como una marca en la barra del porcentaje vendido (01/10/2026). La barra
   deja ver la marca por arriba y por abajo, y el número va debajo de la marca. */
.mc-prog { position: relative; }
.mc-prog.con-obj { padding-bottom: calc(15px * var(--z)); }
.mc.destacado .mc-prog .barrita { overflow: visible; }
.mc.destacado .barrita > b.meta { top: min(-3px, calc(-4px * var(--z))); bottom: min(-3px, calc(-4px * var(--z)));
  width: max(2px, calc(3px * var(--z))); margin-left: max(-1px, calc(-1.5px * var(--z))); border-radius: 2px;
  background: #ffc83d; opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.mc .mc-obj { position: absolute; top: calc(100% - 13px * var(--z)); transform: translateX(-50%);
  font-style: normal; font-size: max(9px, calc(11px * var(--z))); font-weight: 750; letter-spacing: .05em;
  line-height: 1.2; white-space: nowrap; color: #ffd76a; }
.mc .mc-obj.der { transform: translateX(calc(-100% + 3px * var(--z))); }
.mc .mc-obj.izq { transform: translateX(calc(-3px * var(--z))); }
/* Con una marca elegida en el filtro, las tarjetas suman sólo esa marca y lo dice acá. */
.mc .mc-marca { display: inline-block; align-self: flex-start; margin-top: calc(6px * var(--z));
  padding: calc(1px * var(--z)) calc(8px * var(--z)); border-radius: 999px; font-style: normal;
  font-size: calc(10.5px * var(--z)); font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  background: #fff; color: var(--marca); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Dos filas de tarjetas: arriba pesos, abajo bultos (Ezequiel, 28/09/2026). Las columnas
   son las mismas en las dos filas, así cada importe queda arriba de sus bultos; a la
   izquierda, el porcentaje vendido arriba y el % objetivo abajo. Sin la tabla por etapa
   (salió ese mismo día), las dos filas se reparten todo el alto de la esquina. */
.macro-cifras.dos-filas { display: grid; flex: 1 1 auto; min-height: 0;
  grid-template-columns: 2.2fr 2.4fr 2.4fr 2.4fr; grid-template-rows: 1fr 1fr;
  gap: calc(10px * var(--z)); }
.macro-cifras.dos-filas .mc { min-height: 0; }
/* La info de cada tarjeta va centrada (Ezequiel, 01/10/2026); la barra sigue de punta a punta. */
.macro-cifras.dos-filas .mc { text-align: center; }
.macro-cifras.dos-filas .mc .mc-marca { align-self: center; }
.macro-cifras.dos-filas .mc.chica b { font-size: calc(27px * var(--z)); margin-top: calc(4px * var(--z)); }
.macro-cifras.dos-filas .mc.plata b { font-size: calc(23px * var(--z)); letter-spacing: -.015em;
  margin-top: calc(4px * var(--z)); }
.macro-cifras.dos-filas .mc.bultos b { font-size: calc(27px * var(--z)); margin-top: calc(4px * var(--z)); }
.mc b small { font-size: .5em; font-weight: 600; color: var(--tinta-3); margin-left: .35em;
  letter-spacing: 0; }
/* El Descuento 2 debajo de cada total en pesos (DEV-1135): «DF» y el monto, en azul. */
.mc .mc-d2 { display: block; font-style: normal; margin-top: calc(3px * var(--z));
  font-size: max(10px, calc(12px * var(--z))); font-weight: 700; color: var(--dato-t);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- esquina: los rótulos de las filas de atributo (celdas P:Q del Excel) - */
.atrib-rotulos {
  flex: 0 0 auto; width: calc(196px * var(--z)); border-left: 1px solid var(--linea-fuerte);
  display: flex; flex-direction: column; background: var(--hoja-2);
}
.atrib-rotulos .rot {
  display: flex; align-items: center; justify-content: flex-end; text-align: right;
  padding: 0 calc(8px * var(--z)); font-size: calc(13px * var(--z)); font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 1px solid var(--linea); line-height: 1.1; overflow: hidden;
}

/* --- las filas de atributo, una columna por pedido ------------------------ */
.atrib-col {
  position: absolute; top: 0; box-sizing: border-box; cursor: pointer;
  border-right: 1px solid var(--linea);
}
.atrib-col:hover, .atrib-col.resalta { background: var(--marca-suave); }
.atrib-col.anulado { opacity: .45; }
.atrib {
  position: relative;
  display: flex; align-items: center; padding: 0 calc(7px * var(--z));
  font-size: calc(14px * var(--z));
  border-bottom: 1px solid var(--linea); color: var(--tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La celda que lleva la marca de aprobación le hace lugar por dentro: el alto y el
   ancho de la celda no cambian, así que la grilla mide exactamente lo mismo. */
.atrib.con-apr { padding-right: calc(21px * var(--z)); }
.atrib.n { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.atrib.centrado { justify-content: center; font-variant-numeric: tabular-nums; }
.atrib.fuerte { font-weight: 700; font-size: calc(15px * var(--z)); color: var(--tinta); }
.atrib.a-ok  { color: var(--ok-t);  background: var(--ok-f); font-weight: 650; }
.atrib.a-avi { color: var(--avi-t); background: var(--avi-f); font-weight: 650; }
.atrib.a-mal { color: var(--mal-t); background: var(--mal-f); font-weight: 650; }
/* ALERTAS (DEV-0975): dos banderitas que se reparten la celda. Prendidas van LLENAS
   (rojo = deuda vencida +120 días, amarillo = ND por cheque rechazado sin aplicar);
   apagadas, verde suave; sin leer, gris. Llenas y no con borde fino: a zoom chico la
   celda mide 77 px y un contorno de color no se distingue. */
.atrib.alertas { gap: calc(4px * var(--z)); padding: calc(4px * var(--z)) calc(5px * var(--z)); }
.atrib.alertas .bandera { flex: 1 1 0; min-width: 0; height: 100%; display: flex;
  align-items: center; justify-content: center; border-radius: calc(5px * var(--z));
  font-size: calc(11.5px * var(--z)); font-weight: 750; letter-spacing: .03em;
  overflow: hidden; white-space: nowrap; border: 1px solid transparent; }
.bandera.b-mal { color: #fff; background: #d0342c; border-color: #b52a23; }
.bandera.b-avi { color: #4a3700; background: #f5c518; border-color: #d9ab00; }
.bandera.b-ok  { color: var(--ok-t);  background: var(--ok-f);  border-color: var(--ok-b); }
.bandera.b-neu { color: var(--tinta-3); background: var(--hoja-2); border-color: var(--linea); }

/* --- fila 14: el cliente encabezando su columna -------------------------- */
/* El nombre del cliente es el título de la columna del pedido: va centrado en los dos
   ejes, igual que los títulos de la izquierda y que los bultos que encabeza. */
.hcol {
  position: absolute; top: 0; box-sizing: border-box; cursor: pointer;
  padding: 4px 6px; border-right: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
}
.hcol .cli {
  font-weight: 650; font-size: calc(15px * var(--z)); line-height: 1.22; color: var(--tinta);
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* La etiqueta que dice que la columna es una PRESELECCIÓN y no un pedido de venta:
   chica, debajo del nombre, para que se note sin robarle lugar al cliente. */
.hcol .pre-marca {
  display: block; margin-top: calc(2px * var(--z)); font-size: calc(9px * var(--z));
  letter-spacing: .08em; font-weight: 700; color: var(--marca);
}
.hcol:hover, .hcol.resalta { background: var(--marca-suave); }
.hcol.resalta { box-shadow: inset 0 -3px 0 var(--marca); }
.hcol.anulado { opacity: .45; text-decoration: line-through; }

/* --- títulos de las columnas de producto -------------------------------- */
/* Los títulos van centrados en su casilla, en los dos ejes. Antes colgaban del piso de
   la fila (`flex-end` + un padding), y con títulos de una y de dos renglones mezclados
   —CODIGO al lado de STOCK DDN 26 (BULTOS)— quedaban a distinta altura. Cada título es
   ahora una casilla de alto completo con su texto centrado adentro, así que la línea
   divisoria también llega de arriba abajo, como en una planilla de verdad. */
.hprod {
  display: flex; align-items: stretch; height: 100%; box-sizing: border-box;
  font-size: calc(10.5px * var(--z)); letter-spacing: .03em; text-transform: uppercase;
  font-weight: 650; color: var(--tinta-2);
}
.hprod span {
  cursor: pointer; user-select: none; padding: calc(4px * var(--z)) calc(6px * var(--z));
  line-height: 1.15; border-left: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.hprod span:first-child { border-left: 0; }
.hprod span.oculta { color: var(--tinta-3); font-style: italic; }
.hprod span:hover { color: var(--marca); }
.hprod span.ordenada { color: var(--marca); text-decoration: underline; }

/* --- filas de producto --------------------------------------------------- */
.fprod {
  position: absolute; left: 0; box-sizing: border-box;
  display: flex; align-items: stretch; cursor: pointer;
  border-bottom: 1px solid var(--linea);
}
.fprod:hover, .fprod.resalta { background: var(--marca-suave); }
.fprod.franja { background: var(--hoja-2); }
.fprod .cel {
  display: flex; align-items: center; padding: 0 calc(10px * var(--z)); overflow: hidden;
  border-right: 1px solid var(--linea); font-size: calc(15px * var(--z));
}
.fprod .cel.n { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.fprod .cel.fuerte { font-weight: 680; }

/* Los campos que se leen de un vistazo, columna abajo: el código para ubicar el
   artículo y los cinco números con los que se mide. Centrados y un punto más grandes
   que el resto de la ficha; los títulos de arriba se centran con ellos para que no
   queden corridos. La descripción, las medidas y la foto no se tocan: ésas se leen
   de izquierda a derecha. */
/* Va con `.cel.` adelante a propósito: `.fprod .cel.n` alinea a la derecha y con dos
   clases nada más esta regla perdía por especificidad y no centraba nada. */
.fprod .cel.col-codigo, .fprod .cel.col-precio, .fprod .cel.col-stock,
.fprod .cel.col-pct, .fprod .cel.col-saldo, .fprod .cel.col-vendido,
.fprod .cel.col-uxb, .fprod .cel.col-reemplazos {
  justify-content: center; text-align: center;
  padding: 0 calc(5px * var(--z)); font-size: calc(17px * var(--z));
}
/* (los títulos ya se centran todos en la regla de `.hprod span`) */
.fprod .cel.c-ok  { color: var(--ok-t);  background: var(--ok-f); font-weight: 650; }
.fprod .cel.c-mal { color: var(--mal-t); background: var(--mal-f); font-weight: 650; }
/* REEMPLAZOS con las dos puntas en la misma celda (02/10/2026): arriba lo reemplazado
   (verde), abajo lo usado como reemplazo (amarillo, entre paréntesis). El fondo es de la
   celda: entera de un color con un solo número, mitad y mitad con los dos, y cada número
   centrado en su mitad (Ezequiel, 02/10/2026). */
.fprod .cel.r-fondo-ree { background: var(--ok-f); }
.fprod .cel.r-fondo-uso { background: var(--uso-f); }
.fprod .cel.r-fondo-dos { background: linear-gradient(to bottom, var(--ok-f) 50%, var(--uso-f) 50%); }
.fprod .reem-dos { display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; font-weight: 650; }
.fprod .cel.r-fondo-dos .reem-dos { align-self: stretch; width: 100%; }
.fprod .cel.r-fondo-dos .reem-dos > span { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.fprod .reem-dos .r-ree { color: var(--ok-t); }
.fprod .reem-dos .r-uso { color: var(--uso-t); }
/* La ficha del producto: de lo vendido, cuánto se pidió directo y cuánto entró como
   reemplazo (05/10/2026). El amarillo es el de «usado como reemplazo» de la planilla. */
.v-desglose { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--tinta-2); }
.v-desglose b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.v-ree, .v-desglose .v-ree b { color: var(--uso-t); }
.v-desglose .v-ree { background: var(--uso-f); border-radius: 5px; padding: 0 6px; }
/* La foto manda en la fila, igual que en el Excel: ahí la fila mide 200 puntos y la
   columna IMAGEN 65 caracteres, casi todo para la imagen. */
.fprod .cel-foto { justify-content: center; padding: calc(4px * var(--z)); }
.fprod .foto {
  max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff;
  object-fit: contain;
}
:root[data-piel="oscuro"] .fprod .foto { box-shadow: 0 0 0 1px var(--linea); }
.fprod .desc { display: flex; flex-direction: column; justify-content: center; gap: calc(3px * var(--z)); }
.fprod .desc b {
  display: block; font-weight: 650; font-size: calc(15px * var(--z)); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fprod .desc span {
  display: block; color: var(--tinta-3); font-size: calc(12.5px * var(--z)); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- la matriz ----------------------------------------------------------- */
/* Los bultos de cada pedido son EL dato de la planilla: el ojo baja por la columna del
   cliente buscándolos. Van grandes y centrados en la celda, no arrinconados a la
   derecha como un número de contabilidad. */
.celda {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(4px * var(--z)); font-size: calc(30px * var(--z));
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
  /* Con este cuerpo de letra el número más grande de la base ocupa 61 de los 88 px de
     la celda, así que sobra lugar. Igual se corta acá adentro: un número que se
     derrame sobre la columna de al lado se lee como del pedido vecino. */
  overflow: hidden;
}
.celda.hay { background: var(--dato-f); color: var(--dato-t); font-weight: 650; }
.celda.franja { background: var(--hoja-2); }
.celda.hay.franja { background: var(--dato-f); }
.celda .cero { color: var(--tinta-3); opacity: .5; font-size: calc(14px * var(--z)); }

/* --- NEW ITEM -------------------------------------------------------------
   El artículo que se estrena en la temporada: la etiqueta «NEW ITEM» va arriba de la
   descripción y la fila va EN BLANCO (Ezequiel, 24/09/2026: primero fue crema, después
   rosa, y quedó sin color). Va DESPUÉS de `.franja` y ANTES de `.hallada` a propósito:
   el blanco le gana al rayado de las filas pares, y la búsqueda le gana al blanco. */
.fprod.nueva, .fprod.nueva.franja { background: var(--hoja); }
/* La misma etiqueta en todas las pantallas. Va en bloque para quedar arriba del nombre. */
.nuevo-item {
  display: block; width: fit-content; margin-bottom: 3px; padding: 1px 7px;
  border-radius: 4px; background: var(--nuevo-b); color: var(--nuevo-t);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.5;
  white-space: nowrap;
}
/* En la planilla crece con el zoom, y le gana a `.fprod .desc span`, que la haría gris
   y recortada como el detalle. */
.fprod .desc .nuevo-item {
  display: block; width: fit-content; margin: 0; overflow: visible;
  -webkit-line-clamp: unset; color: var(--nuevo-t);
  padding: calc(1px * var(--z)) calc(7px * var(--z)); border-radius: calc(4px * var(--z));
  font-size: calc(11px * var(--z)); line-height: 1.5;
}
.titulo-pag + .nuevo-item, .pagina > .nuevo-item { margin: 0 0 6px; }

/* --- la búsqueda de producto no filtra, marca ------------------------------
   Va acá abajo a propósito: `.fprod.franja` y `.celda.franja` tienen la misma fuerza,
   así que la fila buscada se ve marcada sólo si estas reglas van después. */
.fprod.hallada, .fprod.hallada.franja,
.celda.hallada, .celda.hallada.franja { background: var(--avi-f); }
.celda.hay.hallada, .celda.hay.hallada.franja { background: var(--dato-f); }
.fprod.hallada .cel { border-right-color: var(--avi-b); }
/* La que se fue a buscar, con una barra al costado: entre cinco coincidencias marcadas
   igual, no se sabría en cuál está parado el buscador. */
.fprod.hallada.foco { box-shadow: inset 4px 0 0 var(--marca); }
.sin-hallazgo { color: var(--mal-t); }

.planilla-pie {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 12.5px; color: var(--tinta-2);
  background: var(--hoja); border-top: 1px solid var(--linea-fuerte);
}
.planilla-pie b { color: var(--tinta); font-weight: 680; margin-left: 10px; }

/* ------------------------------------------------------------------- ficha */
.ficha { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } }
.ficha .galeria img { width: 100%; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); object-fit: contain; aspect-ratio: 1; padding: 8px; }
.ficha .tiras { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ficha .tiras img { width: 54px; height: 54px; border-radius: 6px; background: #fff;
  border: 1px solid var(--linea); object-fit: contain; cursor: pointer; padding: 2px; }
.ficha .tiras img.acti { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }

dl.props { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; font-size: 13px; }
dl.props dt { color: var(--tinta-3); font-size: 12px; }
dl.props dd { margin: 0; font-weight: 550; }
.linea-pre { white-space: pre-line; }

/* --------------------------------------------------------------- la ruedita */
/* Copia del indicador de carga de Odoo 19: el mismo SVG de /web/static/img/spin.svg
   con sus dos animaciones, y el velo con desenfoque del o_blockUI. */
.o-bloqueo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; cursor: wait; color: #fff;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: o-aparecer .12s ease both;
}
.o-bloqueo[hidden] { display: none; }
@keyframes o-aparecer { from { opacity: 0; } to { opacity: 1; } }

.o-spinner { animation: o-rotar 1s linear infinite; }
.o-spinner circle { stroke-dasharray: 120, 120; animation: o-trazo 2.5s ease infinite; }
@keyframes o-rotar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes o-trazo {
  0%        { stroke-dashoffset: 120;  stroke-width: 2px; }
  35%, 50%  { stroke-dashoffset: 0;    stroke-width: 8px; }
  85%, 100% { stroke-dashoffset: -120; stroke-width: 2px; }
}
.o-mensaje { font-size: 13.5px; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ------------------------------------------------------------- formularios */
.o-dialogo {
  position: fixed; inset: 0; z-index: 150; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.o-dialogo-caja {
  background: var(--hoja); border-radius: var(--radio); box-shadow: var(--sombra-alta, 0 20px 60px rgba(0,0,0,.35));
  width: min(520px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  border: 1px solid var(--linea);
}
.o-dialogo-caja > h2 {
  margin: 0; padding: 15px 20px; font-size: 15px; font-weight: 660;
  border-bottom: 1px solid var(--linea);
}
.o-dialogo-cuerpo { padding: 18px 20px; overflow: auto; }
.o-dialogo-cuerpo label {
  display: block; margin-bottom: 14px; font-size: 12px; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); position: relative;
}
.o-dialogo-cuerpo input, .o-dialogo-cuerpo select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid var(--linea-fuerte); border-radius: 8px;
  background: var(--hoja); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.o-dialogo-cuerpo input:focus, .o-dialogo-cuerpo select:focus {
  outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca);
}
.o-dialogo-cuerpo .sufijo {
  position: absolute; right: 12px; bottom: 10px; color: var(--tinta-3);
  font-size: 13px; font-weight: 400; text-transform: none;
}
.o-dialogo-cuerpo p.mini { text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5; }

/* Lista de categorías raíz: un rubro puede abarcar varias, así que van con casilla. */
.o-dialogo-cuerpo .campo { margin-bottom: 14px; }
.o-dialogo-cuerpo .campo > .rot {
  display: block; font-size: 12px; font-weight: 640; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-2);
}
.o-dialogo-cuerpo .campo > .rot i {
  margin-left: 7px; text-transform: none; letter-spacing: 0; font-style: normal;
  font-weight: 400; color: var(--tinta-3);
}
.lista-casillas {
  margin-top: 6px; max-height: 208px; overflow-y: auto;
  border: 1px solid var(--linea-fuerte); border-radius: 8px; background: var(--hoja);
}
.o-dialogo-cuerpo .casilla {
  display: flex; align-items: baseline; gap: 9px; margin: 0; padding: 7px 11px;
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13.5px;
  color: var(--tinta); cursor: pointer; border-bottom: 1px solid var(--linea);
}
.o-dialogo-cuerpo .casilla:last-child { border-bottom: 0; }
.o-dialogo-cuerpo .casilla:hover { background: var(--marca-suave); }
.o-dialogo-cuerpo .casilla input {
  display: inline; width: auto; margin: 0; padding: 0; flex: 0 0 auto;
}
.o-dialogo-cuerpo .casilla i {
  margin-left: 7px; font-style: normal; color: var(--tinta-3); font-size: 12px;
}
.o-dialogo-pie {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 13px 20px; border-top: 1px solid var(--linea); background: var(--hoja-2);
  border-radius: 0 0 var(--radio) var(--radio);
}
.o-dialogo-pie .err { flex: 1; color: var(--mal-t); font-size: 12.5px; }

table.datos button.chip { padding: 4px 9px; font-size: 11.5px; }
table.datos button.chip:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------------------ varios */
.cargando { padding: 60px; text-align: center; color: var(--tinta-3); }
.vacio { padding: 34px; text-align: center; color: var(--tinta-3); font-size: 13px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  border-radius: 9px; font-size: 12.5px; line-height: 1.45;
  background: var(--avi-f); color: var(--avi-t); border: 1px solid var(--avi-b);
}
.aviso b { font-weight: 680; }

/* Una temporada que todavía no arrancó. No es un error ni un vacío: es lo normal la
   mayor parte del año, así que se ve como una tarjeta y no como una advertencia. */
.proximamente {
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 30px 32px; max-width: 780px;
}
.proximamente .grande {
  font-size: 30px; font-weight: 690; letter-spacing: -.02em; color: var(--marca);
  margin-bottom: 8px;
}
.proximamente p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.proximamente p.mini { margin: 16px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.proximamente table.datos { border: 1px solid var(--linea); border-radius: 8px; }
.proximamente a { color: var(--marca); text-decoration: underline; }
/* Para lo que no es un dato de color sino algo que está mal y hay que arreglar. */
.aviso-mal { background: var(--mal-f); color: var(--mal-t); border-color: var(--mal-b); }
.leyenda { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tinta-3); flex-wrap: wrap; }
.volver { color: var(--tinta-2); font-size: 13px; }
.volver:hover { color: var(--marca); }

.barra-dato { position: relative; }
.barra-dato > i {
  position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 3px;
  background: var(--marca); opacity: .16;
}
.barra-dato > span { position: relative; }

.gr { width: 100%; display: block; }
.gr .eje { stroke: var(--linea); stroke-width: 1; }
.gr .rot { fill: var(--tinta-3); font-size: 10px; }
.gr .area { fill: var(--marca); opacity: .14; }
.gr .linea { fill: none; stroke: var(--marca); stroke-width: 2; stroke-linejoin: round; }
.gr .meta { stroke: var(--mal-t); stroke-width: 1.5; stroke-dasharray: 5 4; }
.gr .barra { fill: var(--marca); opacity: .8; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 7px; border: 3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ---------------------------------------------------------------- entrar */
.entrar {
  max-width: 380px; margin: 8vh auto 0; background: var(--hoja);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 30px 32px;
}
.entrar .grande {
  font-size: 25px; font-weight: 690; letter-spacing: -.02em; color: var(--marca);
  margin-bottom: 6px;
}
.entrar p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
.entrar p.mini { margin: 14px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.entrar label {
  display: block; margin-bottom: 13px; font-size: 12px; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2);
}
.entrar input {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid var(--linea-fuerte); border-radius: 8px;
  background: var(--hoja); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 400; text-transform: none;
  letter-spacing: 0;
}
.entrar input:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.entrar .chip.acti { width: 100%; padding: 10px; font-size: 14px; margin-top: 4px; }

/* quién está adentro, arriba a la derecha */
/* --- quién está adentro, arriba a la derecha ---------------------------- */
.quien { margin-left: 6px; }
.quien-btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 3px 8px 3px 3px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .10);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background .12s ease, border-color .12s ease;
}
.quien-btn:hover, .quien-btn.abierto {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4);
}
.quien-nom { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien-flecha { width: 9px; height: 6px; opacity: .8; flex: 0 0 auto; }
.quien-btn.abierto .quien-flecha { transform: rotate(180deg); }

/* El avatar: las iniciales sobre el color propio de la persona. */
.quien-ini {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 750; letter-spacing: .02em;
  background: hsl(var(--tono) 62% 55%); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.quien-ini.grande { width: 40px; height: 40px; font-size: 15px; }

/* `fixed` y con z-index por encima de la grilla: adentro del header quedaba atrapado
   en su contexto de apilamiento y la planilla lo tapaba. */
.menu-quien {
  position: fixed; z-index: 800; min-width: 250px;
  top: 52px; right: 12px;
  background: var(--hoja); border: 1px solid var(--linea-fuerte); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 14px;
}
.menu-quien .mq-cab {
  display: flex; align-items: center; gap: 11px; line-height: 1.35;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.menu-quien .mq-cab b { display: block; font-size: 14px; }
.menu-quien .mq-cab .mini { font-size: 11.5px; color: var(--tinta-3); }
.menu-quien .mq-etiquetas {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;
}
.menu-quien .chip { display: block; width: 100%; margin-top: 6px; text-align: center; }

/* LOS LENTES DE SANTI (16/10/2026): el tilde en el menú y, puestos, la pastilla del header */
.ic-lentes { width: 20px; height: 20px; flex: 0 0 auto; }
.menu-quien .mq-lentes {
  display: flex; align-items: center; gap: 9px; cursor: pointer; line-height: 1.3;
  padding: 9px 10px; margin-bottom: 6px; border-radius: 9px;
  border: 1px solid var(--linea); background: var(--hoja);
}
.menu-quien .mq-lentes:hover { border-color: var(--marca-claro); }
.menu-quien .mq-lentes.puestos { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }
.menu-quien .mq-lentes input { margin: 0; }
.menu-quien .mq-lentes b { display: block; font-size: 13px; }
.menu-quien .mq-lentes .mini { font-style: normal; font-size: 11px; color: var(--tinta-3); }
.menu-quien .mq-solo {
  margin: 0 0 10px; padding: 0 0 0 18px; font-size: 11.5px; color: var(--tinta-3); line-height: 1.4;
}
.barra .lentes-on {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-left: 6px;
  padding: 4px 10px 4px 8px; border-radius: 99px; font: inherit; font-size: 12px; font-weight: 700;
  color: #1b1b1f; background: #ffd54a; border: 1px solid #f2c200;
  box-shadow: 0 0 0 3px rgba(255, 213, 74, .25);
}
.barra .lentes-on:hover { background: #ffe07a; }
@media (max-width: 900px) { .barra .lentes-on span { display: none; } }
.pastilla.p-marca { background: var(--marca-suave); color: var(--marca); }

@media (max-width: 900px) {
  .quien-nom, .quien-flecha { display: none; }
  .quien-btn { padding: 3px; }
}

/* ------------------------------------------------- aprobar / rechazar */
/* El redondelito va absoluto adentro de la celda del estado: no empuja nada, no
   cambia el alto de la fila ni el ancho de la columna. */
.apr {
  position: absolute; right: calc(3px * var(--z)); top: 50%;
  transform: translateY(-50%);
  width: calc(17px * var(--z)); height: calc(17px * var(--z));
  padding: 0; border-radius: 99px; cursor: pointer; line-height: 1;
  font-size: calc(11px * var(--z)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px var(--hoja);   /* lo despega del color de fondo de la celda */
}
/* Sin decidir tiene que verse SIEMPRE, no sólo al pasar por encima: es la invitación a
   tomar la decisión, y si no se ve, nadie la toma. Va en el violeta de la marca, que en
   la grilla no se usa para ningún dato: no se confunde con el estado del pedido. */
.apr.sin {
  border: 0; background: var(--marca); color: #fff;
}
.apr.sin:hover { transform: translateY(-50%) scale(1.18); }
.apr.si:hover, .apr.no:hover { transform: translateY(-50%) scale(1.18); }
.apr { transition: transform .09s ease; }
.apr.si  { border: 0; background: var(--ok-t);  color: var(--ok-f); }
.apr.no  { border: 0; background: var(--mal-t); color: var(--mal-f); }
.apr:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* El cartel flota por encima de la grilla: es fixed para que la grilla no tenga que
   crecer ni hacerle lugar. */
.apr-pop {
  position: fixed; z-index: 400; width: 268px; padding: 13px 14px;
  background: var(--hoja); border: 1px solid var(--linea-fuerte);
  border-radius: 10px; box-shadow: var(--sombra); font-size: 13px;
}
.apr-pop .apr-cab { line-height: 1.35; margin-bottom: 10px; }
.apr-pop .apr-cab b { display: block; }
.apr-pop .mini { display: block; font-size: 11.5px; color: var(--tinta-3); }
.apr-ya {
  padding: 7px 9px; border-radius: 7px; margin-bottom: 10px; line-height: 1.35;
  font-weight: 640; font-size: 12.5px;
}
.apr-ya.si { background: var(--ok-f);  color: var(--ok-t); }
.apr-ya.no { background: var(--mal-f); color: var(--mal-t); }
.apr-ya .mini { font-weight: 400; color: inherit; opacity: .8; }
.apr-motivo {
  display: block; font-size: 11px; font-weight: 640; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-2);
}
.apr-motivo .mini { display: inline; text-transform: none; letter-spacing: 0; }
.apr-motivo textarea {
  display: block; width: 100%; margin-top: 5px; padding: 7px 9px; resize: vertical;
  border: 1px solid var(--linea-fuerte); border-radius: 7px;
  background: var(--hoja); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 400; text-transform: none;
  letter-spacing: 0;
}
.apr-botones { display: flex; gap: 6px; margin-top: 10px; }
.apr-botones .chip { flex: 1; justify-content: center; }
.apr-botones .chip.si { background: var(--ok-t);  border-color: var(--ok-t);  color: var(--ok-f); }
.apr-botones .chip.no { background: var(--mal-t); border-color: var(--mal-t); color: var(--mal-f); }
.apr-nota {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--tinta-3);
  border-top: 1px solid var(--linea); padding-top: 8px;
}

/* Una fila de tabla que describe algo que todavía no está disponible. */
tr.apagado { opacity: .5; }

/* La cinta que le recuerda a un vendedor que los números son los suyos. */
.cinta-vend {
  padding: 7px 18px; font-size: 12.5px; line-height: 1.4;
  background: var(--avi-f); color: var(--avi-t);
  border-bottom: 1px solid var(--avi-b);
}

/* La cinta de una temporada cerrada: sus números ya no se actualizan. */
.cinta-temp {
  padding: 7px 18px; font-size: 12.5px; line-height: 1.4;
  background: var(--hoja-2); color: var(--tinta-2);
  border-bottom: 1px solid var(--linea-fuerte);
}

/* El mismo botón de aprobación, pero dentro de una tabla: acá no hay grilla que
   correr, así que va en el flujo y con el tamaño de la letra de al lado. */
.apr.apr-linea {
  position: static; transform: none; margin-left: 6px; vertical-align: middle;
  width: 18px; height: 18px; font-size: 11px; box-shadow: none;
}
.apr.apr-linea:hover { transform: scale(1.18); }

/* «Entraron datos nuevos»: avisa sin interrumpir. Antes la pantalla se repintaba
   sola y le movía el piso al que estaba leyendo. */
.chip-nuevos {
  position: fixed; right: 18px; bottom: 18px; z-index: 700;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 12px; border-radius: 99px; cursor: pointer;
  background: var(--hoja); color: var(--tinta);
  border: 1px solid var(--linea-fuerte); box-shadow: 0 6px 20px rgba(0,0,0,.16);
  font: inherit; font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.chip-nuevos.visible { opacity: 1; transform: none; }
.chip-nuevos:hover { border-color: var(--marca); }
.chip-nuevos b { color: var(--marca); font-weight: 650; }
.chip-nuevos .punto {
  width: 8px; height: 8px; border-radius: 99px; background: var(--marca);
  flex: 0 0 auto; animation: latir 1.6s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .chip-nuevos .punto { animation: none } }

/* --- la decisión financiera en la ficha del pedido --------------------- */
/* Acá no se es sutil: el que abre esta pantalla vino a mirar el pedido para decidir. */
.decision {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px; padding: 14px 18px; border-radius: 11px;
  border: 1px solid var(--linea-fuerte); background: var(--hoja);
}
.decision.pend { border-color: var(--avi-b); background: var(--avi-f); }
.decision.si   { border-color: var(--ok-b);  background: var(--ok-f); }
.decision.no   { border-color: var(--mal-b); background: var(--mal-f); }
.decision .dec-texto { flex: 1 1 auto; line-height: 1.4; }
.decision .dec-texto b { font-size: 14.5px; }
.decision.pend .dec-texto b { color: var(--avi-t); }
.decision.si   .dec-texto b { color: var(--ok-t); }
.decision.no   .dec-texto b { color: var(--mal-t); }
.decision .dec-texto .mini { font-size: 12.5px; color: var(--tinta-2); }
.decision .dec-icono {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.decision.si .dec-icono  { background: var(--ok-t);  color: var(--ok-f); }
.decision.no .dec-icono  { background: var(--mal-t); color: var(--mal-f); }
.decision .dec-botones { display: flex; gap: 9px; flex: 0 0 auto; }

.btn-grande {
  padding: 10px 20px; border-radius: 9px; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; letter-spacing: .01em;
  transition: filter .12s ease, transform .08s ease;
}
.btn-grande:hover  { filter: brightness(1.08); }
.btn-grande:active { transform: translateY(1px); }
.btn-grande.si { background: var(--ok-t);  color: var(--ok-f); }
.btn-grande.no { background: var(--mal-t); color: var(--mal-f); }
.btn-grande:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

@media (max-width: 760px) {
  .decision { flex-wrap: wrap; }
  .decision .dec-botones { width: 100%; }
  .btn-grande { flex: 1; }
}

/* --- la decisión en la lista de pedidos -------------------------------- */
/* Sutil: en una lista larga lo que se lee es el pedido y el cliente. Los botones de un
   pedido YA DECIDIDO aparecen sólo al pasar por la fila —cambiar de opinión es raro—;
   los de uno pendiente están siempre, porque ahí sí hay algo que hacer. */
.celda-aprob { white-space: nowrap; }
.acciones-aprob {
  display: inline-flex; gap: 4px; margin-left: 7px; vertical-align: middle;
}
.acciones-aprob.al-pasar { opacity: 0; transition: opacity .12s ease; }
tr:hover .acciones-aprob.al-pasar,
.acciones-aprob.al-pasar:focus-within { opacity: 1; }
.acciones-aprob button {
  width: 24px; height: 24px; padding: 0; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-fuerte); background: var(--hoja); color: var(--tinta-3);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.acciones-aprob .btn-si:hover {
  background: var(--ok-t); border-color: var(--ok-t); color: var(--ok-f);
}
.acciones-aprob .btn-no:hover {
  background: var(--mal-t); border-color: var(--mal-t); color: var(--mal-f);
}
.acciones-aprob button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* El botón que el cartel sugiere, según con cuál de los dos se lo abrió. */
.apr-botones .chip.sugerido { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Toda la fila abre el pedido, no sólo su número. */
tr[data-ir] { cursor: pointer; }

/* La marca de una decisión que ya no se puede cambiar: se ve igual que el botón pero no
   invita a tocarla, porque no hay nada que hacer. */
.apr.apr-marca { cursor: default; }
.apr.apr-marca:hover { transform: translateY(-50%); }
.apr.apr-marca.apr-linea:hover { transform: none; }

/* Menú Reemplazos. Sólo tokens que ya existen: el tema oscuro sale solo. */
.barrita { position: relative; }
.barrita > b.meta { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tinta); opacity: .7; }
.kpi.destacado .barrita > b.meta { background: rgba(0,0,0,.55); }
.kpi.destacado .pie a { color: #fff; }
.gr .barra.en-curso { opacity: .45; }
.gr .etq { fill: var(--tinta); font-size: 12px; font-weight: 650; }
.tasa-barra { position: relative; height: 5px; border-radius: 3px; background: var(--linea); margin-top: 4px; min-width: 70px; }
.tasa-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--marca); }
.tasa-barra > b { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--tinta); }
.causas-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--linea); }
.causas-barra > i { display: block; height: 100%; background: var(--tinta-3); }
.causa-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--tinta-3); }
.c-otro_pedido { background: var(--avi-t) !important; }
.c-a_medias { background: var(--dato-t) !important; }
.c-sin_reemplazo { background: var(--mal-t) !important; }
.corte .aviso-corte { color: #ffd479; font-weight: 600; }
/* En la piel oscura la cabecera es un violeta claro y el amarillo casi no se leía (~2,7:1). */
:root[data-piel="oscuro"] .corte .aviso-corte { background: rgba(0,0,0,.32); padding: 0 4px; border-radius: 4px; }
/* Una tasa no se parte en dos renglones («9,6» arriba y «%» abajo): la regla general de
   las pastillas en tabla las deja cortarse para las licencias, que son largas. */
table.datos td.tasa .pastilla { white-space: nowrap; overflow-wrap: normal; }

/* ===================================================================================
   FICHA DEL PRODUCTO: el selector de cara (Ezequiel, 24/09/2026). Grande y con la marca
   que se desliza de una opción a la otra; el texto de la elegida va en blanco encima.
   =================================================================================== */
.selector-vista {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 6px; margin: 0 0 18px; border-radius: 18px;
  background: var(--hoja-3); border: 1px solid var(--linea); box-shadow: inset 0 1px 2px rgba(20,15,25,.05);
}
.selector-vista > button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 13px; color: var(--tinta-2); transition: color .3s;
}
.selector-vista > button:disabled { cursor: not-allowed; opacity: .5; }
.selector-vista > button svg {
  width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.selector-vista > button b { display: block; font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.selector-vista > button small { display: block; font-size: 12px; opacity: .8; margin-top: 1px; }
.selector-vista .sv-marca {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px);
  border-radius: 13px; background: linear-gradient(120deg, var(--marca) 0%, var(--marca-claro) 100%);
  box-shadow: 0 6px 18px rgba(107,62,102,.28), 0 1px 3px rgba(0,0,0,.12);
  transition: transform .42s cubic-bezier(.22,.9,.25,1);
}
.selector-vista[data-cara="reemplazos"] .sv-marca { transform: translateX(100%); }
.selector-vista[data-cara="comercial"] > button[data-cara="comercial"],
.selector-vista[data-cara="reemplazos"] > button[data-cara="reemplazos"] { color: #fff; }
.selector-vista > button:not(:disabled):hover { color: var(--marca); }
.selector-vista[data-cara="comercial"] > button[data-cara="comercial"]:hover,
.selector-vista[data-cara="reemplazos"] > button[data-cara="reemplazos"]:hover { color: #fff; }
.vs-aviso {
  margin-left: auto; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 650;
  white-space: nowrap; border: 1px solid transparent;
}
.vs-aviso.mal { background: var(--mal-f); color: var(--mal-t); border-color: var(--mal-b); }
.vs-aviso.ok  { background: var(--ok-f);  color: var(--ok-t);  border-color: var(--ok-b); }
@media (max-width: 700px) {
  .selector-vista > button { padding: 11px 12px; gap: 9px; }
  .selector-vista > button small, .vs-aviso { display: none; }
}
@media (prefers-reduced-motion: reduce) { .selector-vista .sv-marca { transition: none; } }

/* ===================================================================================
   MENÚ REEMPLAZOS rehecho (24/09/2026). Colores fijos, los mismos que la planilla:
   verde reemplazado, azul lo que entró como reemplazo, rojo perdido, ámbar pendiente.
   =================================================================================== */
.pastilla.p-dato { color: var(--dato-t); background: var(--dato-f); border-color: transparent; }

.ree-periodos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.seg-periodo {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px;
  border-radius: 12px; background: var(--hoja-3); border: 1px solid var(--linea); min-width: 330px;
}
.seg-periodo > button {
  position: relative; z-index: 1; border: 0; background: none; padding: 8px 16px; cursor: pointer;
  font-weight: 620; font-size: 13.5px; color: var(--tinta-2); border-radius: 9px; transition: color .25s;
}
.seg-periodo > button.acti { color: #fff; }
.seg-periodo > i {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 9px; background: linear-gradient(120deg, var(--marca), var(--marca-claro));
  box-shadow: 0 3px 10px rgba(107,62,102,.25); transition: transform .35s cubic-bezier(.22,.9,.25,1);
}
.seg-periodo[data-sel="mes"] > i { transform: translateX(100%); }
.seg-periodo[data-sel="temporada"] > i { transform: translateX(200%); }
/* El mismo slide, de a dos (Por código / Por cliente). */
.seg-dos { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
  border-radius: 12px; background: var(--hoja-3); border: 1px solid var(--linea); min-width: 270px; }
.seg-dos > button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 16px;
  cursor: pointer; font-weight: 620; font-size: 13.5px; color: var(--tinta-2); border-radius: 9px;
  transition: color .25s; }
.seg-dos > button.acti { color: #fff; }
.seg-dos > i { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2);
  border-radius: 9px; background: linear-gradient(120deg, var(--marca), var(--marca-claro));
  box-shadow: 0 3px 10px rgba(107,62,102,.25); transition: transform .35s cubic-bezier(.22,.9,.25,1); }
.seg-dos[data-sel="cli"] > i, .seg-dos[data-sel="mar"] > i { transform: translateX(100%); }
/* El selector Por sección / Por marca del ranking del tablero (05/10/2026). */
.rank-sel { padding: 10px 14px 4px; display: flex; }

/* --- ENTRAR A UNA TARJETA del menú Reemplazos (29/09/2026): se abre un panel por la
   derecha con lo que suma, por código o por cliente, y cada renglón se despliega. --- */
.ree-cifra.abrible { cursor: pointer; transition: transform .18s, box-shadow .18s; }
.ree-cifra.abrible:hover, .ree-cifra.abrible:focus-visible { transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,15,25,.12); outline: none; }
.ree-cifra.abrible::after { content: "›"; position: absolute; top: 8px; right: 14px; font-size: 22px;
  line-height: 1; color: var(--tinta-3); opacity: .45; transition: opacity .18s, transform .18s; }
.ree-cifra.abrible:hover::after { opacity: 1; transform: translateX(3px); }

.ree-det-velo { position: fixed; inset: 0; z-index: 950; background: rgba(20,12,24,0);
  transition: background .3s; }
.ree-det-velo.abierto { background: rgba(20,12,24,.4); }
/* El panel de «Reemplazar» (06/10/2026): el mismo cajón, más angosto. */
.ree-det.ree-rmp { width: min(720px, 100vw); }
.ree-rmp-tabla { width: 100%; }
.ree-rmp-tabla input.ree-rmp-b { width: 84px; text-align: right; }
button.ree-reemplazar { padding: 3px 10px; font-size: 12px; }
.ree-det { position: absolute; top: 0; right: 0; bottom: 0; width: min(1000px, 100vw);
  background: var(--canvas); display: flex; flex-direction: column;
  box-shadow: -14px 0 44px rgba(0,0,0,.22); transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,.9,.25,1); }
.ree-det-velo.abierto .ree-det { transform: none; }
.ree-det-cab { position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 22px 26px 16px 30px; background: var(--hoja); border-bottom: 1px solid var(--linea); }
.ree-det-cab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--linea-fuerte); }
.ree-det.k-ree .ree-det-cab::before { background: var(--ok-t); }
.ree-det.k-sin .ree-det-cab::before { background: var(--mal-t); }
.ree-det.k-ele .ree-det-cab::before { background: var(--marca); }
.ree-det.k-irr .ree-det-cab::before { background: var(--tinta-3); }
.ree-det-cab .rot { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3);
  font-weight: 650; }
.ree-det-cifras { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 6px 0 4px; }
.ree-det-cifras b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.ree-det-cifras b small { font-size: 14px; font-weight: 500; color: var(--tinta-2); margin-left: 5px; }
.ree-det-cifras span { font-size: 24px; font-weight: 640; opacity: .88; }
.ree-det.k-ree .ree-det-cifras { color: var(--ok-t); }
.ree-det.k-sin .ree-det-cifras { color: var(--mal-t); }
.ree-det.k-ele .ree-det-cifras { color: var(--marca); }
.ree-det-x { flex: 0 0 auto; border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--hoja-3); color: var(--tinta-2); font-size: 15px; transition: background .15s, transform .15s; }
.ree-det-x:hover { background: var(--linea); transform: rotate(90deg); }
.ree-det-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 26px; }
.ree-det-barra input[type=search] { flex: 1; min-width: 200px; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--linea-fuerte); background: var(--hoja); color: var(--tinta); font: inherit; }
.ree-det-cuerpo { flex: 1; overflow: auto; padding: 0 26px 26px; }
.ree-det-tabla { width: 100%; background: var(--hoja); border-radius: var(--radio); }
.ree-det-tabla > tbody > tr.grupo { cursor: pointer; }
.ree-det-tabla > tbody > tr.grupo > td:first-child { position: relative; padding-left: 28px; }
.ree-det-tabla > tbody > tr.grupo > td:first-child::before { content: "▸"; position: absolute; left: 10px;
  top: 50%; transform: translateY(-50%); color: var(--tinta-3); transition: transform .2s; }
.ree-det-tabla > tbody > tr.grupo.abierto > td:first-child::before { transform: translateY(-50%) rotate(90deg); }
.ree-det-tabla > tbody > tr.grupo.abierto > td { background: var(--marca-suave); }
.ree-det-tabla > tbody > tr.sub { display: none; }
.ree-det-tabla > tbody > tr.grupo.abierto + tr.sub { display: table-row; }
.ree-det-tabla > tbody > tr.sub > td { padding: 4px 10px 12px 28px; background: var(--marca-suave); }
.ree-sub { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--hoja);
  border-radius: 8px; overflow: hidden; }
.ree-sub th { text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 650; padding: 7px 10px; border-bottom: 1px solid var(--linea); }
.ree-sub th.der { text-align: right; }
.ree-sub td { padding: 6px 10px; border-bottom: 1px solid var(--linea); }
.ree-sub tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .ree-det-cab, .ree-det-barra { padding-left: 16px; padding-right: 16px; }
  .ree-det-cuerpo { padding: 0 12px 16px; }
  .seg-dos { min-width: 0; width: 100%; }
}
.ree-nav { display: flex; align-items: center; gap: 10px; }
.ree-nav b { font-size: 15px; font-weight: 650; }
.ree-nav .chip { font-size: 16px; line-height: 1; padding: 5px 12px; }
.ree-nav .chip:disabled { opacity: .35; cursor: default; }

.ree-cabecera { display: grid; grid-template-columns: minmax(330px, 420px) 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .ree-cabecera { grid-template-columns: 1fr; } }
.ree-hero {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px;
  border-radius: var(--radio); box-shadow: var(--sombra); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, var(--marca-claro) 0%, var(--marca) 55%, #4d2b49 100%);
}
.ree-hero .rot { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; font-weight: 650; }
.ree-hero .grande { font-size: 20px; line-height: 1.25; margin: 4px 0 6px; font-weight: 500; }
.ree-hero .grande b { font-weight: 750; }
.ree-hero .mini { color: rgba(255,255,255,.82); }
.ree-delta { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 650; padding: 3px 9px;
  border-radius: 99px; background: rgba(255,255,255,.16); }
.ree-delta.sube { background: rgba(110,231,168,.25); }
.ree-delta.baja { background: rgba(255,155,146,.28); }

.ree-anillo { position: relative; width: 164px; height: 164px; flex: none; }
.ree-anillo.chico { width: 110px; height: 110px; }
.ree-anillo svg { width: 100%; height: 100%; display: block; }
.ree-anillo .pista { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 14; }
.ree-anillo .valor { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round;
  transition: stroke-dasharray .9s cubic-bezier(.22,.9,.25,1); }
.ree-anillo.t-ok .valor { stroke: #6ee7a8; }
.ree-anillo.t-avi .valor { stroke: #f2c469; }
.ree-anillo.t-mal .valor { stroke: #ff9b92; }
.ree-anillo .meta { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.ree-anillo .centro { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
/* El porcentaje manda en el anillo (Ezequiel, 25/09): grande, con el «%» chico al lado.
   El rótulo lleva clase propia: una regla por `span` agarraba también al número animado
   (que va en un span) y lo dejaba en 11 px. */
.ree-anillo .centro b { font-size: 46px; font-weight: 780; letter-spacing: -.03em; line-height: 1;
  display: flex; align-items: baseline; }
.ree-anillo .centro b .pc { font-size: .5em; font-weight: 700; margin-left: 1px; opacity: .85; }
.ree-anillo.chico .centro b { font-size: 30px; }
.ree-anillo .centro .rotulo { font-size: 11px; opacity: .8; margin-top: 5px; }

.ree-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ree-cifra {
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 15px 16px 14px; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.ree-cifra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--linea-fuerte); }
.ree-cifra.k-ree::before { background: var(--ok-t); }
.ree-cifra.k-sin::before { background: var(--mal-t); }
.ree-cifra.k-obj::before { background: var(--avi-t); }
.ree-cifra.k-ent::before { background: var(--dato-t); }
/* Por elección (DEV-0932): se cambió teniendo stock, no es agotado. */
.ree-cifra.k-ele::before { background: var(--marca); }
/* Irreemplazable (DEV-0961): el cliente no acepta reemplazos; no es faltante. */
.ree-cifra.k-irr::before { background: var(--tinta-3); }
.ree-cifra .rot { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); font-weight: 650; }
.ree-cifra .val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1.05; }
.ree-cifra .val small { font-size: 13px; font-weight: 500; color: var(--tinta-2); margin-left: 4px; }
.ree-cifra.k-ree .val { color: var(--ok-t); }
.ree-cifra.k-sin .val { color: var(--mal-t); }
.ree-cifra.k-ent .val { color: var(--dato-t); }
.ree-cifra.k-ele .val { color: var(--marca); }
/* La plata pesa lo mismo que los bultos (Ezequiel, 24/09): casi del mismo cuerpo y con el
   color de la tarjeta, un punto más liviana para que las dos cifras no compitan. */
.ree-cifra .plata { font-size: 24px; font-weight: 640; letter-spacing: -.02em; line-height: 1.1;
  color: var(--tinta); margin-top: 6px; opacity: .88; }
.ree-cifra.k-ree .plata { color: var(--ok-t); }
.ree-cifra.k-sin .plata { color: var(--mal-t); }
.ree-cifra.k-ent .plata { color: var(--dato-t); }
.ree-cifra.k-ele .plata { color: var(--marca); }
.ree-cifra .pie { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }

.ree-segunda { margin-bottom: 16px; }
/* Las dos filas comparten las columnas (display: contents): con una grilla por fila, el
   número de la derecha —más largo en plata— achicaba esa barra y parecía un total menor. */
.ree-vs { padding: 16px 18px 14px; display: grid; grid-template-columns: 76px 1fr auto;
  column-gap: 12px; row-gap: 14px; align-items: center; }
.ree-vs-fila { display: contents; }
.ree-vs > .leyenda, .ree-vs > .mini { grid-column: 1 / -1; }
.ree-vs-rot { font-size: 12px; font-weight: 650; color: var(--tinta-2); }
.ree-vs-barra { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--hoja-3); }
.ree-vs-barra > i { display: block; height: 100%; transition: width .8s cubic-bezier(.22,.9,.25,1); }
.ree-vs-num { font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.ree-vs-num b { color: var(--ok-t); }
.b-ree, .leyenda i.c-ree { background: var(--ok-t); }
.b-per, .leyenda i.c-per { background: var(--mal-t); }
.b-mar, .leyenda i.c-mar { background: var(--avi-t); }
.leyenda i.c-ago { background: var(--linea-fuerte); }
.ree2 .leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-left: 8px; }
.ree2 .leyenda i:first-child { margin-left: 0; }
.ree-leyenda { margin-top: 4px; }

.ree-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); }
.ree-numeros > div { background: var(--hoja); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.ree-numeros b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ree-numeros span { font-size: 12px; color: var(--tinta-3); line-height: 1.3; }
.ree-nota { padding: 8px 14px 10px; }

.ree-serie rect.b-ago { fill: var(--linea-fuerte); opacity: .75; }
.ree-serie rect.b-ree { fill: var(--ok-t); opacity: .9; }
/* Las barras de la evolución crecen desde el piso, escalonadas (el retraso va en línea). */
.ree-serie rect.b-ago, .ree-serie rect.b-ree {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: ree-crece .7s cubic-bezier(.22,.9,.25,1) both;
}
@keyframes ree-crece { from { transform: scaleY(0); } }
/* Las secciones entran de a una, apenas desde abajo. */
.ree2 > .ree-periodos, .ree2 > .ree-cabecera, .ree2 > .rejilla, .ree2 > .tarjeta,
.ree2 > .ree-alertas, .ree-tablas > .tarjeta {
  animation: ree-entra .5s cubic-bezier(.22,.9,.25,1) both;
}
.ree2 > .ree-cabecera { animation-delay: .04s; }
.ree2 > .rejilla { animation-delay: .1s; }
.ree2 > .ree-alertas { animation-delay: .1s; }
.ree2 > .tarjeta { animation-delay: .16s; }
.ree-tablas > .tarjeta { animation-delay: .22s; }
@keyframes ree-entra { from { opacity: 0; transform: translateY(10px); } }
.ree-cifra { transition: transform .25s, box-shadow .25s; }
.ree-cifra:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,15,25,.1); }
@media (prefers-reduced-motion: reduce) {
  .ree-serie rect.b-ago, .ree-serie rect.b-ree, .ree2 > *, .ree-tablas > .tarjeta { animation: none; }
  .ree-anillo .valor, .ree-vs-barra > i { transition: none; }
}

.ree-evolucion { margin-bottom: 16px; }
.ree-tablas { display: grid; gap: 16px; }
/* Un ítem de grilla no se achica por debajo de su contenido: sin esto la tarjeta tomaba el
   ancho de la tabla (1.352 px en un panel de 630) y empujaba la página entera de costado.
   Con min-width 0 la tarjeta se queda en el ancho de la página y la tabla corre adentro. */
.ree-tablas > .tarjeta, .ree-cabecera > *, .ree2 .rejilla > * { min-width: 0; }
.ree-tabla .tabla-scroll { overflow: auto; }
.ree-tabla .ree-filtros { border-radius: 0; flex-wrap: wrap; }
.ree-tabla .ree-filtros select { max-width: 280px; }
td.ree-prod a { display: flex; align-items: center; gap: 10px; color: inherit; }
td.ree-prod a:hover b { color: var(--marca); }
td.ree-prod b { display: block; font-weight: 620; line-height: 1.25; }
td.ree-prod .codigo { display: block; }
table.datos td.c-ree { color: var(--ok-t); font-weight: 650; }
table.datos td.c-ent { color: var(--dato-t); font-weight: 650; }
table.datos td.c-ele { color: var(--marca); font-weight: 650; }
table.datos td.c-sin { color: var(--mal-t); font-weight: 700; }
table.datos td.c-per { color: var(--mal-t); }
table.datos td.c-mar { color: var(--avi-t); }
table.datos td .cero { color: var(--tinta-3); opacity: .45; }

.ree-alertas { display: grid; gap: 8px; margin: 0 0 4px; }
.ree-alerta { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid transparent; }
.ree-alerta.a-mal  { background: var(--mal-f); color: var(--mal-t); border-color: var(--mal-b); }
.ree-alerta.a-avi  { background: var(--avi-f); color: var(--avi-t); border-color: var(--avi-b); }
.ree-alerta.a-dato { background: var(--dato-f); color: var(--dato-t); }
.ree-alerta.a-ok   { background: var(--ok-f); color: var(--ok-t); border-color: var(--ok-b); }
.ree-alerta.a-neu  { background: var(--hoja-2); color: var(--tinta-2); border-color: var(--linea); }

.ree-como { margin-top: 16px; }
.ree-como summary { padding: 12px 16px; cursor: pointer; font-weight: 650; font-size: 13px; color: var(--tinta-2); }
.ree-como ul { margin: 0; padding: 0 20px 14px 36px; line-height: 1.55; }
.ree-prod-vista .ree-cabecera { margin-bottom: 14px; }

/* La ventana de «Ventas por Vendedor» (09/10/2026): velo con un leve fog y desenfoque de la
   pantalla de atrás, caja que entra suave, filas elegibles como tarjetas. */
.vv-velo {
  position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 16px;
  background: rgba(30, 18, 34, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}
.vv-velo.abierto { background: rgba(30, 18, 34, .28); backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1); }
.vv-caja {
  width: min(560px, 100%); max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--hoja); color: var(--tinta); border: 1px solid var(--linea); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 10, 25, .28), 0 2px 8px rgba(20, 10, 25, .12);
  transform: translateY(14px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.vv-velo.abierto .vv-caja { transform: none; opacity: 1; }
.vv-cab { display: flex; align-items: center; gap: 14px; padding: 20px 22px 12px; }
.vv-cab h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.vv-cab p { margin: 2px 0 0; color: var(--tinta-2); font-size: 13px; }
.vv-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(140deg, #e7f6ee, #c9ecd8); box-shadow: inset 0 0 0 1px rgba(16,124,65,.18); }
.vv-icono svg { width: 26px; height: 26px; }
.vv-x { margin-left: auto; align-self: flex-start; border: 0; background: var(--hoja-3); color: var(--tinta-2);
  width: 32px; height: 32px; border-radius: 99px; cursor: pointer; font-size: 14px; }
.vv-x:hover { background: var(--linea); color: var(--tinta); }
.vv-barra { display: flex; align-items: center; gap: 8px; padding: 4px 22px 10px; }
.vv-chip { border: 1px solid var(--linea-fuerte); background: var(--hoja); color: var(--tinta-2);
  padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer; }
.vv-chip:hover { border-color: var(--marca); color: var(--marca); }
.vv-cuenta { margin-left: auto; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.vv-lista { overflow-y: auto; padding: 2px 16px 8px; display: flex; flex-direction: column; gap: 6px; }
.vv-fila {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--hoja-2);
  cursor: pointer; user-select: none; transition: border-color .15s, background .15s, transform .12s;
  animation: vv-entra .32s ease both; animation-delay: calc(var(--i) * 22ms);
}
.vv-fila:hover { border-color: var(--linea-fuerte); transform: translateY(-1px); }
.vv-fila.marcado { border-color: var(--marca); background: var(--marca-suave); }
.vv-fila input { position: absolute; opacity: 0; pointer-events: none; }
.vv-tilde { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--linea-fuerte);
  display: grid; place-items: center; transition: background .15s, border-color .15s; }
.vv-fila.marcado .vv-tilde { background: var(--marca); border-color: var(--marca); }
.vv-fila.marcado .vv-tilde::after { content: ''; width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.vv-nombre { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-nombre small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 12px; margin-top: 1px; }
.vv-venta { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta-2); font-size: 13px; }
.vv-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--linea); }
.vv-cancelar { border: 1px solid var(--linea-fuerte); background: var(--hoja); color: var(--tinta-2);
  padding: 9px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.vv-cancelar:hover { color: var(--tinta); border-color: var(--tinta-3); }
.vv-bajar { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  padding: 9px 18px 9px 12px; border-radius: 10px; background: #107C41; color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(16,124,65,.35); transition: transform .12s, box-shadow .12s, opacity .15s; }
.vv-bajar svg { background: #fff; border-radius: 4px; padding: 2px; width: 20px; height: 20px; }
.vv-bajar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,124,65,.45); }
.vv-bajar:disabled { opacity: .55; cursor: default; box-shadow: none; }
.vv-velo.bajando .vv-bajar { opacity: .9; cursor: progress; }
.vv-velo.bajando .vv-bajar svg, .vv-giro svg { animation: o-rotar 1s linear infinite; }
.vv-velo.bajando .vv-lista, .vv-velo.bajando .vv-barra { pointer-events: none; opacity: .6; }
.vv-cargando, .vv-error { padding: 28px 8px; text-align: center; color: var(--tinta-2); display: flex;
  align-items: center; justify-content: center; gap: 10px; }
.vv-error { color: var(--mal-t); }
.vv-giro { display: inline-grid; }
@keyframes vv-entra { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 520px) { .vv-fila { grid-template-columns: 22px minmax(0, 1fr); } .vv-venta { grid-column: 2; } }

/* SEGUIMIENTO DE VENDEDORES (09/10/2026): impacto, colores fuertes, una mirada. */
.sg { --sg-verde: #15803D; --sg-verde-f: #DCFCE7; --sg-naranja: #C2410C; --sg-naranja-f: #FFEDD5;
  --sg-rojo: #DC2626; --sg-rojo-f: #FEE2E2; --sg-gris: #6B7280; --sg-gris-f: #F3F4F6; }
:root[data-piel="oscuro"] .sg { --sg-verde: #4ADE80; --sg-verde-f: #12301F; --sg-naranja: #FB923C;
  --sg-naranja-f: #3A2214; --sg-rojo: #F87171; --sg-rojo-f: #3B1717; --sg-gris: #9CA3AF; --sg-gris-f: #262A33; }
.sg .titulo-pag { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sg-botones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sg-boton { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; border-radius: 10px;
  padding: 8px 14px 8px 10px; font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap;
  transition: transform .12s, box-shadow .12s; }
.sg-boton svg { background: #fff; border-radius: 4px; padding: 2px; width: 20px; height: 20px; }
.sg-boton.pdf { background: #C81E1E; box-shadow: 0 2px 10px rgba(200,30,30,.35); }
.sg-boton.xls { background: #107C41; box-shadow: 0 2px 10px rgba(16,124,65,.35); }
.sg-boton:hover:not(:disabled) { transform: translateY(-1px); }
.sg-boton:disabled { cursor: progress; opacity: .85; }
.sg-boton.bajando svg { animation: o-rotar 1s linear infinite; }
.vv-icono.pdf { background: linear-gradient(140deg, #fdecec, #f9cfcf); box-shadow: inset 0 0 0 1px rgba(200,30,30,.2); }
.vv-bajar.pdf { background: #C81E1E; box-shadow: 0 4px 14px rgba(200,30,30,.35); }

.sg-pct { display: inline-block; padding: 2px 9px; border-radius: 99px; font-weight: 800; font-size: 12px;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-pct.verde { background: var(--sg-verde-f); color: var(--sg-verde); }
.sg-pct.naranja { background: var(--sg-naranja-f); color: var(--sg-naranja); }
.sg-pct.rojo { background: var(--sg-rojo-f); color: var(--sg-rojo); }
.sg-pct.gris { background: var(--sg-gris-f); color: var(--sg-gris); }
.sg-pct.grande { font-size: 34px; padding: 10px 20px; border-radius: 16px; letter-spacing: -1px; color: #fff; }
.sg-pct.grande.verde { background: #15803D; } .sg-pct.grande.naranja { background: #EA580C; }
.sg-pct.grande.rojo { background: #DC2626; } .sg-pct.grande.gris { background: #6B7280; }

.sg-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.sg-kpi { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; justify-content: center; }
.sg-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.sg-kpi b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sg-kpi small { color: var(--tinta-3); margin-top: 2px; }
/* La tabla de clientes del vendedor (13/10/2026): el desplegable arriba, lo que no pidió en
   tenue y la columna del rubro elegido resaltada. */
.sg-filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sg-filtros label { font-weight: 650; color: var(--tinta-2); display: flex; gap: 8px; align-items: center; }
.sg-filtros select { font: inherit; padding: 5px 8px; border: 1px solid var(--linea-fuerte); border-radius: 8px;
  background: var(--hoja); color: var(--tinta); }
.sg .sg-no { color: var(--tinta-3); opacity: .55; }
.sg .sg-col { background: var(--mal-f); }
.sg-kpi.apagado b { color: var(--tinta-2); font-size: 22px; }
.sg-kpi.centro { align-items: center; background: transparent; border: 0; box-shadow: none; }
.sg-kpi.alerta { background: var(--sg-rojo-f); border-color: var(--sg-rojo); }
.sg-kpi.alerta span, .sg-kpi.alerta b, .sg-kpi.alerta small { color: var(--sg-rojo); }

.sg-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sg-vend { display: block; text-decoration: none; color: inherit; background: var(--hoja); border: 1px solid var(--linea);
  border-top: 5px solid var(--sg-gris); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra);
  transition: transform .14s, box-shadow .14s; animation: vv-entra .35s ease both; animation-delay: calc(var(--i) * 35ms); }
.sg-vend:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,15,25,.12); }
.sg-vend.verde { border-top-color: var(--sg-verde); } .sg-vend.naranja { border-top-color: var(--sg-naranja); }
.sg-vend.rojo { border-top-color: var(--sg-rojo); }
.sg-vend-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-vend-cab b { font-size: 15px; }
.sg-vend-cab .sg-pct { font-size: 14px; padding: 3px 10px; }
.sg-vend-venta { font-size: 24px; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sg-vend-antes { color: var(--tinta-3); font-size: 12px; }
.sg-vend-rubros { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sg-vend-rubros div { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 7px; font-size: 12.5px; }
.sg-vend-rubros i, .sg-leyenda i, .sg-punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sg-vend-nv { margin-top: 10px; padding: 6px 10px; border-radius: 9px; font-weight: 700; font-size: 12.5px;
  background: var(--sg-rojo-f); color: var(--sg-rojo); }
.sg-vend-nv.ok { background: var(--sg-verde-f); color: var(--sg-verde); }

.sg-volver { display: inline-block; margin-bottom: 8px; color: var(--tinta-2); text-decoration: none; font-size: 13px; }
.sg-banda { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: linear-gradient(120deg, #6B3E66, #8a5484);
  color: #fff; border-radius: 16px; padding: 16px 20px; }
.sg-banda > div > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.sg-banda h1 { margin: 2px 0 0; font-size: 30px; color: #fff; letter-spacing: -.02em; }
.sg-frase { font-size: 20px; font-weight: 800; margin: 2px 2px 14px; }
.sg-frase.verde { color: var(--sg-verde); } .sg-frase.naranja { color: var(--sg-naranja); }
.sg-frase.rojo { color: var(--sg-rojo); } .sg-frase.gris { color: var(--sg-gris); }
.sg-dos { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 12px; margin-bottom: 12px; }
.sg-torta-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 14px 14px; }
.sg-leyenda { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.sg-leyenda div { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.sg-leyenda b { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.sg-rubros td { vertical-align: middle; }
.sg-rubros .sg-punto { margin-right: 6px; vertical-align: -1px; }
.sg-barra { height: 5px; border-radius: 3px; margin: 3px 0 0 auto; min-width: 2px; }
.sg-barra.gris { background: var(--linea-fuerte); }
.sg-rubros .apagado { color: var(--tinta-3); }
.sg-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sg-mini { border-radius: 12px; padding: 12px 14px; background: var(--sg-gris-f); }
.sg-mini span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-gris); }
.sg-mini b { display: block; font-size: 20px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sg-mini.alerta { background: var(--sg-rojo-f); } .sg-mini.alerta span, .sg-mini.alerta b { color: var(--sg-rojo); }
.sg-mini.verde { background: var(--sg-verde-f); } .sg-mini.verde span, .sg-mini.verde b { color: var(--sg-verde); }
.sg-pestas { display: flex; gap: 6px; padding: 12px 14px 4px; flex-wrap: wrap; }
.sg-pestas button { border: 1px solid var(--linea-fuerte); background: var(--hoja); color: var(--tinta-2); border-radius: 99px;
  padding: 5px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.sg-pestas button small { color: var(--tinta-3); font-weight: 600; margin-left: 3px; }
.sg-pestas button.acti { background: var(--marca); border-color: var(--marca); color: #fff; }
.sg-pestas button.acti small { color: rgba(255,255,255,.8); }
.sg-estado { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--sg-gris-f); color: var(--sg-gris); white-space: nowrap; }
.sg-estado.no_volvio { background: var(--sg-rojo-f); color: var(--sg-rojo); }
.sg-estado.nuevo { background: var(--sg-verde-f); color: var(--sg-verde); }
.sg-estado.volvio { background: var(--marca-suave); color: var(--marca); }
@media (max-width: 760px) { .sg-dos { grid-template-columns: 1fr; } .sg-botones { margin-left: 0; } }