/* ═══════════════════════════════════════════════════════════
   Los Toro — Portal de vendedores
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Oswald';src:url('../../assets/fonts/oswald-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('../../assets/fonts/oswald-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../../assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../../assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../../assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../../assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --rojo:#BE1818; --rojo-cl:#E0242B;
  --negro:#0B0B0D; --carbon:#121215; --humo:#1A1A1F; --panel:#17171C;
  --borde:#2A2A31; --borde2:#383842;
  --gris:#9A9AA4; --gris-cl:#C9C9D1; --blanco:#fff;
  --ok:#2E9E5B; --alerta:#D08700; --info:#3B7DD8;
  --display:'Oswald',system-ui,sans-serif;
  --texto:'Inter',system-ui,-apple-system,sans-serif;
  --r:6px; --t:.2s ease;
  --cab:71px;               /* alto del encabezado y del bloque del logo */
  --texto-fuerte:#fff;      /* títulos y datos destacados */
  --sombra:rgba(0,0,0,.55);
}

/* ── Tema claro ───────────────────────────────────────────────────
   Mismas variables, otros valores. El rojo de la marca no cambia:
   solo se oscurece un punto para que tenga contraste sobre blanco. */
[data-tema="claro"]{
  --rojo:#B31616; --rojo-cl:#D01F26;
  --negro:#F4F4F6;          /* fondo general */
  --carbon:#FFFFFF;         /* barra lateral */
  --humo:#EDEDF1;           /* hover */
  --panel:#FFFFFF;          /* tarjetas */
  --borde:#DDDDE3; --borde2:#C8C8D2;
  --gris:#6B6B76; --gris-cl:#33333C; --blanco:#111;
  --ok:#1E7F45; --alerta:#9A6200; --info:#2A5FA8;
  --texto-fuerte:#111116;
  --sombra:rgba(20,20,28,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--texto);background:var(--negro);color:var(--gris-cl);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* El anillo azul por defecto del navegador se veía fuera de lugar al hacer
   clic. Se reemplaza por uno de la marca y solo cuando se navega con teclado,
   que es cuando de verdad hace falta. */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--rojo-cl);outline-offset:2px;border-radius:var(--r)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--rojo);color:#fff}

h1,h2,h3,.ph1,.ph2{font-family:var(--display);font-weight:500;text-transform:uppercase;color:var(--texto-fuerte);letter-spacing:.01em;line-height:1.15}
.ph1{font-size:1.5rem;margin-bottom:6px}
.ph2{font-size:1.15rem;margin-bottom:14px}
.ph3{font-family:var(--display);font-weight:500;font-size:.98rem;letter-spacing:.02em;color:var(--texto-fuerte);margin:0 0 10px}
.sub{color:var(--gris);font-size:.9rem}

/* ── Login ────────────────────────────────────────────────── */
/* La tarjeta va centrada. Antes iba arriba a la derecha para no tapar la foto
   del estante, pero en tema claro la foto no se veía —una regla posterior le
   ganaba el fondo al body— y la tarjeta quedaba corrida sobre una pantalla
   vacía, que se lee como un error de maquetación y no como una decisión.
   Va con «body.p-auth» a propósito: así pesa lo mismo que la regla de tema
   claro que antes se lo llevaba por delante. */
body.p-auth{min-height:100vh;display:grid;place-items:center;
  padding:clamp(24px,7vh,72px) clamp(24px,5vw,80px);
  background:linear-gradient(rgba(11,11,13,.93),rgba(11,11,13,.97)),url('../../assets/img/estante-neon.jpg') center/cover fixed}
/* En claro el velo es claro: el mismo negro encima de la foto dejaba una
   pantalla de login oscura dentro de un portal claro. */
[data-tema="claro"] body.p-auth{
  background:linear-gradient(rgba(244,244,247,.92),rgba(244,244,247,.96)),url('../../assets/img/estante-neon.jpg') center/cover fixed}
@media (max-width:720px){ body.p-auth{padding:24px} }
.auth-caja{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:36px 32px}
.auth-logo{height:42px;width:auto;margin:0 auto 26px}

/* ── Shell ────────────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.lat{width:230px;flex:none;background:var(--carbon);border-right:1px solid var(--borde);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* El logo y el título de la página son dos cajas distintas, una en la barra
   lateral y otra en el encabezado, cada una con su propio contenido. Si se
   dejan crecer solas terminan con alturas parecidas pero no iguales —eran 71 y
   66,6 px— y las dos líneas divisorias quedan corridas una de la otra, que es
   de esas cosas que se ven aunque uno no sepa qué está mirando. La altura la
   fija --cab para las dos; el contenido se centra dentro. */
.lat-top{padding:14px 18px;border-bottom:1px solid var(--borde);
  min-height:var(--cab);display:flex;align-items:center}
.lat-top img{height:30px;width:auto}
/* El logo es un enlace al panel: se le saca la decoración de enlace y se le
   da una pista de que se puede tocar. */
.lat-marca{display:inline-flex;align-items:center;text-decoration:none;border-radius:6px;
  transition:opacity .12s}
.lat-marca:hover{opacity:.75}
.lat-marca:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.lat nav{padding:14px 10px;flex:1;overflow-y:auto}
.lat nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--r);
  font-size:.86rem;font-weight:500;color:var(--gris-cl);transition:var(--t);margin-bottom:2px}
.lat nav a:hover{background:var(--humo);color:#fff}
.lat nav a.on{background:var(--rojo);color:#fff}
.lat nav a svg{width:17px;height:17px;flex:none}
/* Contador de mensajes sin leer, pegado al enlace del menú. */
.badge{margin-left:auto;background:var(--rojo);color:#fff;font-size:.66rem;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 5px;line-height:1;font-variant-numeric:tabular-nums}
.lat nav .grupo{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#5C5C66;padding:16px 14px 7px}
/* Fecha, hora y agenda, bajo el logo. El ícono se alinea en los mismos 24px
   que los del menú: 10 del nav más 14 del enlace. */
/* El margen derecho es menor que el izquierdo a propósito: el izquierdo tiene
   que calzar con los íconos del menú, y la fecha necesita todo el ancho que
   pueda para no terminar en «21 de ago…». */
.lat-fecha{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 24px;
  border-bottom:1px solid var(--borde)}
.lat-cal{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--borde);
  border-radius:var(--r);background:none;color:var(--gris);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--t)}
.lat-cal:hover{background:var(--humo);color:var(--texto-fuerte);border-color:var(--borde2)}
.lat-cal svg{width:15px;height:15px}
.lat-cal-mudo{cursor:default}
.lat-cal-mudo:hover{background:none;color:var(--gris);border-color:var(--borde)}
/* Punto rojo cuando hay algo atrasado: el número exacto está adentro. */
.cal-punto{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--rojo-cl);border:2px solid var(--carbon)}
.lat-fecha-txt{min-width:0;line-height:1.25}
/* Solo la primera letra en mayúscula. Con text-transform:capitalize salía
   «Viernes 21 De Agosto», que además no cabía y terminaba cortado. */
.lat-fecha-txt b{display:block;color:var(--texto-fuerte);font-weight:600;font-size:.73rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-fecha-txt b::first-letter{text-transform:uppercase}
.lat-fecha-txt span{display:block;color:var(--gris);font-size:.72rem;
  font-variant-numeric:tabular-nums}

/* El pie usa el mismo margen que el menú: los 10px de la caja más los 14 que
   trae cada elemento adentro dejan todos los íconos sobre la misma línea. */
.lat-pie{padding:12px 10px;border-top:1px solid var(--borde);font-size:.8rem}
.usuario{display:flex;align-items:center;gap:10px;padding:10px 14px 6px;min-width:0}
/* Avatar de iniciales. El tono lo pone el servidor a partir del nombre, así que
   cada persona tiene siempre el mismo color sin guardar nada en ninguna parte. */
.avatar{flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;line-height:1;
  color:hsl(var(--av) 65% 90%);background:hsl(var(--av) 42% 30%);
  border:1px solid hsl(var(--av) 42% 42%)}
/* En claro se da vuelta: fondo suave y letra fuerte del mismo tono. Invertir
   solo la luminosidad deja las iniciales ilegibles sobre una tarjeta blanca. */
[data-tema="claro"] .avatar{color:hsl(var(--av) 55% 26%);background:hsl(var(--av) 60% 90%);
  border-color:hsl(var(--av) 45% 72%)}
.usuario-txt{min-width:0}
.lat-pie b{display:block;color:#fff;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ojo con el selector: acá había un «.lat-pie span{display:block}» general que
   le ganaba en especificidad al .avatar y le sacaba el display:flex — la
   inicial quedaba pegada arriba a la izquierda en vez de centrada. Por eso
   ahora cada span se nombra por su clase y no por el elemento. */
.lat-pie .usuario-txt span{display:block;color:var(--gris);font-size:.72rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-pie a{
  color:var(--rojo-cl);font-size:.76rem;display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:var(--r);transition:var(--t);
}
.lat-pie a:hover{background:var(--humo)}
.lat-pie a:hover{color:#fff}
.lat-pie a svg{width:14px;height:14px;flex:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 26px;min-height:var(--cab);
  border-bottom:1px solid var(--borde);background:var(--carbon);position:sticky;top:0;z-index:20}
.cuerpo{padding:26px;flex:1}
.top .movil-tog{display:none}

/* ── Componentes ──────────────────────────────────────────── */
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);padding:22px}
.caja+.caja{margin-top:18px}
.caja-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}

.rejilla{display:grid;gap:18px}
.r2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);padding:20px}
.kpi .et{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.kpi .n{font-family:var(--display);font-size:1.75rem;color:#fff;line-height:1}
.kpi .pie{font-size:.78rem;color:var(--gris);margin-top:8px}

/* ── Botones ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--r);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:var(--t);
  border:1px solid transparent;white-space:nowrap;line-height:1.2}
.btn-rojo{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn-rojo:hover{background:var(--rojo-cl);border-color:var(--rojo-cl)}
.btn-linea{border-color:var(--borde2);color:#fff}
.btn-linea:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-ok:hover{filter:brightness(1.12)}
.btn-full{width:100%}
.btn-sm{padding:7px 13px;font-size:.7rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn svg{width:15px;height:15px}

/* ── Formularios ──────────────────────────────────────────── */
.form{display:grid;gap:15px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
/* Los controles de la barra de Tienda online se suman a esta regla en vez de
   copiar sus valores: dos copias del mismo estilo se desincronizan al primer
   ajuste, y ahí es cuando aparece un campo con otra cara. Pasó: quedaron sin
   estilo por estar fuera de «.campo». */
.campo input,.campo select,.campo textarea,
.barra-tienda-filtros select,.busca-tienda input{
  background:var(--negro);border:1px solid var(--borde);border-radius:var(--r);padding:11px 13px;
  color:#fff;font-family:var(--texto);font-size:.92rem;transition:var(--t);width:100%}
.campo textarea{resize:vertical;min-height:88px}
.campo input:focus,.campo select:focus,.campo textarea:focus,
.barra-tienda-filtros select:focus,.busca-tienda input:focus{outline:0;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(190,24,24,.16)}
.campo input::placeholder,.campo textarea::placeholder,
.busca-tienda input::placeholder{color:#5C5C66}
.campo input:read-only{background:var(--humo);color:var(--gris)}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.fila-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Cuatro campos cortos en una línea —patente, RUT, nombre—: se apilan solos
   cuando no caben, sin que ninguno quede tan angosto que no se lea. */
.fila-4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* Campo suelto, sin la envoltura .campo: sirve dentro de tablas y en las
   barras de filtro, donde una etiqueta arriba sobraría. */
.inp{background:var(--negro);border:1px solid var(--borde);border-radius:var(--r);
  padding:8px 11px;color:#fff;font-family:var(--texto);font-size:.88rem;
  transition:var(--t);max-width:100%}
.inp:focus{outline:0;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(190,24,24,.16)}
.inp::placeholder{color:#5C5C66}
.inp.num{text-align:right}
.inp.centro{text-align:center}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--gris);
  cursor:pointer;line-height:1.55;margin-bottom:8px}
.check input{margin-top:3px;flex:none;accent-color:var(--rojo)}
.check b{color:#fff;font-weight:600}

/* ── Tablas ───────────────────────────────────────────────── */
.tabla-env{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{background:var(--humo);text-align:left;padding:11px 13px;font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--borde)}
tbody td{padding:11px 13px;border-bottom:1px solid var(--borde);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.022)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Para columnas de conteo cortas —«8», «11»— alineadas a la derecha quedan
   pegadas al título de la columna siguiente y cuesta leer a qué fila
   pertenecen. Centradas se leen de un vistazo. */
.cen{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla th.cen{text-align:center}
.tabla-vacia{padding:44px 20px;text-align:center;color:var(--gris)}

.paginacion{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:18px}
.paginacion .btn{min-width:38px}
.paginacion [hidden]{display:none!important}

/* ── Estados ──────────────────────────────────────────────── */
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;border:1px solid}
.c-borrador  {color:var(--gris);      border-color:var(--borde2);   background:rgba(154,154,164,.1)}
.c-enviada   {color:#7FB3F0;          border-color:#3B7DD8;         background:rgba(59,125,216,.12)}
.c-aceptada  {color:#6FD494;          border-color:var(--ok);       background:rgba(46,158,91,.14)}
.c-rechazada {color:#F09B9B;          border-color:var(--rojo);     background:rgba(190,24,24,.14)}
.c-en_bodega {color:#F0C877;          border-color:var(--alerta);   background:rgba(208,135,0,.14)}
/* Pedido que entró solo desde la lista pública: todavía no es una venta, así
   que no puede verse igual que una aceptada. Va en el azul de «llegó algo». */
.c-solicitada{color:#9FC6F5;          border-color:#3B7DD8;         background:rgba(59,125,216,.16)}
.c-despachada{color:#6FD494;          border-color:var(--ok);       background:rgba(46,158,91,.2)}
.c-anulada   {color:#77777F;          border-color:var(--borde2);   background:transparent;text-decoration:line-through}

/* ── Avisos ───────────────────────────────────────────────── */
.alerta{border-radius:var(--r);padding:12px 15px;font-size:.87rem;margin-bottom:14px;border:1px solid}
.alerta.ok  {background:rgba(46,158,91,.12); border-color:rgba(46,158,91,.5);  color:#9BE0B8}
.alerta.err {background:rgba(190,24,24,.12); border-color:rgba(190,24,24,.5);  color:#F0BDBD}
.alerta.info{background:rgba(59,125,216,.1); border-color:rgba(59,125,216,.45);color:#A9CBF5}
.alerta.av  {background:rgba(214,158,46,.12); border-color:rgba(214,158,46,.5);  color:#F0D8A8}
/* Envoltorio para celdas de tabla con más de una línea. Ver la nota del
   bloque móvil: sin esto, en el teléfono las líneas salen en fila. */
.tabla-env tbody td .cel{display:block;min-width:0}
.tabla-env tfoot td{border-top:1px solid var(--borde);padding-top:9px;color:var(--gris-cl)}
.tabla-env tfoot tr:last-child td{border-top:2px solid var(--borde)}
code{background:rgba(255,255,255,.07);padding:1px 6px;border-radius:4px;font-size:.92em;font-family:ui-monospace,Menlo,Consolas,monospace}
.alerta code{background:rgba(255,255,255,.09);padding:1px 6px;border-radius:4px;font-size:.92em}
.nota{font-size:.8rem;color:var(--gris);line-height:1.55}

/* Bloques de órdenes para pegar en el terminal, y salidas de bitácora.
   Se desplazan solos: una línea larga no puede empujar la página a lo ancho. */
.pre{background:var(--humo);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px 16px;margin:2px 0 4px;overflow-x:auto;white-space:pre;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.7;
  color:var(--gris-cl)}
.pre i{color:var(--alerta);font-style:normal}
/* El fondo del <code> es un blanco translúcido: sobre una tarjeta blanca no se
   ve nada. En claro va el negativo. */
[data-tema="claro"] code{background:rgba(17,17,22,.06)}

/* ── Ventana modal ─────────────────────────────────────────
   Sobre <dialog> nativo: el navegador se hace cargo del foco, del Escape y de
   dejar el resto de la página inerte. Reimplementar eso con un div siempre
   sale peor, sobre todo con teclado. */
/* El margin:auto va explícito: al fijarle un ancho al <dialog>, el margen que
   el navegador trae por defecto deja de centrarlo y la ventana se va a la
   esquina de arriba a la izquierda. */
.modal{border:1px solid var(--borde);border-radius:10px;background:var(--panel);
  color:var(--gris-cl);padding:22px;width:min(560px,calc(100vw - 32px));max-height:82vh;
  margin:auto;overflow:auto;box-shadow:0 24px 60px var(--sombra)}
.modal::backdrop{background:rgba(0,0,0,.55)}
[data-tema="claro"] .modal::backdrop{background:rgba(20,20,28,.32)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.modal-x{background:none;border:0;color:var(--gris);cursor:pointer;padding:4px;border-radius:var(--r);
  display:flex;transition:var(--t)}
.modal-x:hover{background:var(--humo);color:var(--texto-fuerte)}

/* Agenda dentro del modal. La franja de color a la izquierda dice el estado sin
   necesidad de leer: es lo que se ve antes que el texto. */
.ag-dia{border-left:3px solid var(--borde2);padding:2px 0 2px 12px;margin-bottom:14px}
.ag-dia.hoy{border-left-color:var(--info)}
.ag-dia.vencido{border-left-color:var(--rojo-cl)}
.ag-fecha{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px}
.ag-fecha b{color:var(--texto-fuerte);font-size:.86rem;text-transform:capitalize}
.ag-fecha span{color:var(--gris);font-size:.76rem}
.ag-dia.vencido .ag-fecha span{color:var(--rojo-cl)}
.ag-item{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.85rem;
  border-bottom:1px solid var(--borde)}
.ag-item:last-child{border-bottom:0}
.ag-item b{color:var(--texto-fuerte);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Casillas en forma de ficha. Un <select multiple> obliga a saber que hay que
   apretar Ctrl para marcar dos; una fila de fichas se entiende sola y en el
   celular se toca con el dedo. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-op{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--borde);border-radius:999px;padding:7px 14px 7px 11px;
  font-size:.84rem;color:var(--gris-cl);transition:var(--t);user-select:none}
.chip-op:hover{border-color:var(--borde2);background:var(--humo)}
.chip-op input{width:auto;margin:0;accent-color:var(--rojo)}
.chip-op:has(input:checked){border-color:var(--rojo);background:rgba(190,24,24,.1);
  color:var(--texto-fuerte)}
.chip-op:has(input:focus-visible){outline:2px solid var(--rojo);outline-offset:2px}
/* Cuando el chip es un enlace y no una casilla, no hay input que consultar: el
   estado activo lo marca la propia página con .activo. Va después de la regla
   de :has para que gane, porque las dos pesan lo mismo. */
.chip-op.activo{border-color:var(--rojo);background:rgba(190,24,24,.1);
  color:var(--texto-fuerte);font-weight:600}

.pasos{margin:20px 0;padding-left:0}
.pasos li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--borde);font-size:.88rem}
.pasos li::before{content:"○";position:absolute;left:6px;color:var(--gris)}
.pasos li.listo::before{content:"●";color:var(--ok)}
.pasos li.malo::before{content:"●";color:var(--rojo)}

/* ── Cotizador ────────────────────────────────────────────── */
.cot{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
@media (max-width:1150px){.cot{grid-template-columns:1fr}}

.buscador{position:relative;margin-bottom:14px}
.buscador input{
  width:100%;background:var(--negro);border:1px solid var(--borde);border-radius:var(--r);
  padding:11px 13px 11px 40px;color:#fff;font-family:var(--texto);font-size:.92rem;
  transition:var(--t);-webkit-appearance:none;appearance:none;
}
.buscador input:focus{outline:0;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(190,24,24,.16)}
.buscador input::placeholder{color:#5C5C66}
.buscador input::-webkit-search-cancel-button{filter:invert(1) opacity(.45);cursor:pointer}
.buscador svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gris);pointer-events:none;
}

.lista-prod{max-height:560px;overflow-y:auto;border:1px solid var(--borde);border-radius:var(--r)}
.prod{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--borde);transition:var(--t)}
.prod:last-child{border-bottom:0}
.prod:hover{background:rgba(255,255,255,.03)}
.prod-info{flex:1;min-width:0}
.prod-info b{display:block;color:#fff;font-weight:600;font-size:.9rem;line-height:1.3}
.prod-info span{font-size:.75rem;color:var(--gris)}
.prod-precio{font-family:var(--display);font-size:1rem;color:#fff;white-space:nowrap}
.prod .btn{flex:none}

.carrito{position:sticky;top:96px}
.carrito-items{max-height:400px;overflow-y:auto;margin-bottom:16px}
.ci{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--borde)}
.ci:last-child{border-bottom:0}
.ci b{color:#fff;font-size:.87rem;font-weight:600;display:block;line-height:1.3}
.ci small{color:var(--gris);font-size:.73rem}
.ci-ctl{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
/* Con el campo de cajas son tres números en una columna angosta: se aprieta
   todo un poco para que no se parta en dos filas. */
.ci-ctl.con-cajas{gap:4px}
.ci-ctl.con-cajas input{width:44px;padding:5px 3px}
.ci-ctl.con-cajas .lbl{font-size:.62rem;letter-spacing:.05em}
.ci-ctl.con-cajas .ci-x{margin-left:auto}
.ci-quitar.ci-x{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:.95rem;line-height:1;letter-spacing:0}
.ci-quitar.ci-x:hover{background:rgba(190,24,24,.14)}
.ci-ctl input{width:58px;padding:5px 7px;font-size:.82rem;text-align:center;
  background:var(--negro);border:1px solid var(--borde);border-radius:4px;color:#fff}
.ci-ctl .lbl{font-size:.66rem;color:var(--gris);text-transform:uppercase;letter-spacing:.08em}
.ci-quitar{color:var(--rojo-cl);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.ci-sub{font-family:var(--display);color:#fff;font-size:.98rem;white-space:nowrap;text-align:right}

.totales{border-top:1px solid var(--borde);padding-top:14px}
.tot-fila{display:flex;justify-content:space-between;padding:6px 0;font-size:.88rem}
.tot-fila.grande{border-top:1px solid var(--borde);margin-top:8px;padding-top:14px;
  font-family:var(--display);font-size:1.35rem;color:#fff}
.tot-fila .v{font-variant-numeric:tabular-nums}

/* ── Documento imprimible ─────────────────────────────────── */
.doc{background:#fff;color:#111;max-width:820px;margin:24px auto;padding:44px;border-radius:6px;font-size:13px}
.doc *{color:inherit}
.doc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;
  border-bottom:3px solid var(--rojo);padding-bottom:20px;margin-bottom:24px}
.doc-top img{height:52px;width:auto}
.doc-folio{text-align:right}
.doc-folio .t{font-family:var(--display);font-size:1.35rem;color:var(--rojo);text-transform:uppercase}
.doc-folio .f{font-size:1.05rem;font-weight:700;letter-spacing:.04em}
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:24px}
.doc h4{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:7px;font-family:var(--texto);font-weight:700}
.doc table{font-size:12px}
.doc thead th{background:#f2f2f4;color:#555;border-bottom:1px solid #ddd}
.doc tbody td{border-bottom:1px solid #eee}
.doc .doc-tot{margin-left:auto;width:290px;margin-top:18px}
.doc .doc-tot .tot-fila{border:0;color:#333}
.doc .doc-tot .grande{border-top:2px solid #111;color:#111}
.doc-pie{margin-top:34px;padding-top:18px;border-top:1px solid #ddd;font-size:11px;color:#666}

@media print{
  body{background:#fff}
  .no-print,.lat,.top{display:none!important}
  .cuerpo{padding:0}
  .doc{margin:0;padding:0;max-width:none;box-shadow:none}
  .shell{display:block}
}

/* ── Tablas responsivas: bajo 760px cada fila es una tarjeta ── */
@media (max-width:760px){
  .tabla-env{border:0;overflow:visible}
  .tabla-env table,
  .tabla-env tbody,
  .tabla-env tfoot,
  .tabla-env tr,
  .tabla-env td{display:block;width:100%}
  .tabla-env thead{display:none}
  /* En modo tarjeta las celdas vacías de relleno sobran */
  .tabla-env tfoot td:empty{display:none}
  .tabla-env tfoot td[colspan]{text-align:left;opacity:.7}
  .tabla-env tbody tr{
    background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
    padding:14px 16px;margin-bottom:12px;
  }
  .tabla-env tbody tr:hover{background:var(--panel)}
  .tabla-env tbody td{
    border:0;padding:5px 0;display:flex;gap:14px;align-items:baseline;
    justify-content:space-between;text-align:right;
  }
  .tabla-env tbody td::before{
    content:attr(data-l);flex:none;text-align:left;
    font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gris);font-weight:600;padding-top:2px;
  }
  .tabla-env tbody td[data-l=""]::before{display:none}
  .tabla-env tbody td:first-child{
    text-align:left;display:block;padding-bottom:10px;margin-bottom:6px;
    border-bottom:1px solid var(--borde);
  }
  .tabla-env tbody td:first-child::before{display:block;margin-bottom:4px}
  .tabla-env tbody td.acciones{justify-content:flex-start;gap:8px;flex-wrap:wrap;padding-top:12px}
  .tabla-env tbody td.acciones .btn{flex:1 1 auto}
  .tabla-env tbody td .sub{display:inline}
  /* Una celda con varias líneas dentro de la tarjeta móvil.
     Acá el `td` es un flex —etiqueta a la izquierda, valor a la derecha— y en
     un contenedor flex un <br> no produce ningún salto: cada trozo de texto se
     vuelve un item suelto y salen todos en fila, cortándose por la derecha.
     Envolviendo el valor en UN solo elemento, el flex ve un item y el <br>
     vuelve a funcionar dentro de él. */
  .tabla-env tbody td .cel{text-align:right}
  .tabla-env tbody td .cel form{justify-content:flex-end}

  .caja{padding:16px}
  .caja-h{flex-direction:column;align-items:stretch;gap:10px}
  .kpi .n{font-size:1.5rem}
  .paginacion .btn{padding:8px 11px}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px){
  .lat{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .25s ease}
  .lat.on{transform:translateX(0)}
  .top .movil-tog{display:inline-flex}
  .cuerpo{padding:18px}
  .top{padding:14px 18px}
  .carrito{position:static}
}

/* Atajos de período */
.atajos{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--borde)}
.chip-f{display:inline-block;padding:5px 12px;border-radius:99px;font-size:.79rem;
  border:1px solid var(--borde);color:var(--gris-cl);text-decoration:none;
  background:var(--negro);transition:var(--t);white-space:nowrap}
.chip-f:hover{border-color:var(--rojo-cl);color:#fff}
.chip-f.on{background:var(--rojo);border-color:var(--rojo);color:#fff;font-weight:600}

/* Buscador con lista desplegable (clientes en el cotizador) */
.autolista{
  position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:4px;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  max-height:290px;overflow-y:auto;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.autolista-item{
  padding:9px 13px;cursor:pointer;display:flex;justify-content:space-between;
  gap:12px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.04);
}
.autolista-item:last-child{border-bottom:0}
.autolista-item b{color:#fff;font-weight:600;font-size:.88rem}
.autolista-item span{color:var(--gris);font-size:.76rem;white-space:nowrap}
.autolista-item:hover,.autolista-item.on{background:rgba(190,24,24,.22)}
.autolista-vacio{padding:12px 13px;color:var(--gris);font-size:.83rem}
.autolista-vacio a{color:var(--rojo-cl)}

/* ── Selector de fecha propio ─────────────────────────────────── */
.fecha-env{position:relative;display:block}
.fecha-env input[type=text]{padding-right:38px}
.fecha-env.fecha-mala input[type=text]{border-color:var(--rojo-cl)}
.fecha-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;border-radius:5px;color:var(--gris);transition:var(--t);padding:0;
}
.fecha-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.fecha-panel{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:262px;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:0 16px 40px rgba(0,0,0,.6);padding:12px;
}
.fecha-panel.arriba{top:auto;bottom:calc(100% + 6px)}
.fecha-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fecha-titulo{font-family:var(--display);font-weight:500;font-size:.92rem;color:#fff;
  text-transform:capitalize;letter-spacing:.01em}
.fecha-nav{
  width:26px;height:26px;border-radius:5px;border:1px solid var(--borde);
  background:var(--negro);color:var(--gris-cl);cursor:pointer;font-size:1.05rem;
  line-height:1;display:grid;place-items:center;transition:var(--t);padding:0;
}
.fecha-nav:hover{border-color:var(--rojo-cl);color:#fff}
.fecha-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.fecha-dia{
  text-align:center;font-size:.68rem;color:var(--gris);padding:4px 0 6px;
  text-transform:uppercase;letter-spacing:.06em;
}
.fecha-celda{
  aspect-ratio:1;border:0;background:transparent;color:var(--gris-cl);
  border-radius:5px;cursor:pointer;font-size:.8rem;transition:var(--t);
  display:grid;place-items:center;padding:0;font-family:var(--texto);
}
.fecha-celda:hover{background:rgba(255,255,255,.09);color:#fff}
.fecha-celda.fuera{opacity:.3}
.fecha-celda.hoy{box-shadow:inset 0 0 0 1px var(--rojo-cl);color:#fff}
.fecha-celda.on{background:var(--rojo);color:#fff;font-weight:700}
.fecha-pie{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--borde);
}
.fecha-atajo{
  border:1px solid var(--borde);background:var(--negro);color:var(--gris-cl);
  border-radius:99px;padding:4px 10px;font-size:.73rem;cursor:pointer;transition:var(--t);
  font-family:var(--texto);
}
.fecha-atajo:hover{border-color:var(--rojo-cl);color:#fff}
.fecha-limpiar{margin-left:auto}

/* ── Menú lateral agrupado ────────────────────────────────────── */
.lat nav a{font-size:.87rem}
/* Todo el menú en la misma caja alta. Con los títulos de grupo en mayúscula y
   los ítems de adentro en minúscula, la columna se lee como dos listas
   distintas pegadas. En mayúscula pareja se lee como una sola. */
.lat nav a{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
/* El espaciado va MÁS APRETADO que el de los títulos de grupo, a propósito:
   con .14em, «Nueva cotización» y «Estado de cobranza» no cabían en el ancho
   del menú y se partían en dos líneas. La caja alta se conserva; el aire, no. */
.lat nav a svg{width:15px;height:15px}
.lat nav a.suelto{margin-bottom:2px}
/* Panel y Mensajes van sin grupo, así que se dibujaban con el estilo de un
   ítem de adentro: más grandes y en minúscula que los títulos de grupo que
   tienen al lado. En una columna angosta esa diferencia se lee como un error
   de alineación. Acá se igualan al título de grupo —mismo tamaño, mismo peso,
   misma caja alta— y el menú queda parejo de arriba abajo. */
.lat nav a.suelto{padding:10px 14px;gap:11px;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8A8A95}
.lat nav a.suelto svg{width:15px;height:15px;opacity:.75}
.lat nav a.suelto:hover{color:#fff}
/* El activo mantiene su fondo rojo y su letra blanca: sigue siendo el que
   dice dónde estás parado. */
.lat nav a.suelto.on{color:#fff}
.lat nav a.suelto.on svg{opacity:1}

.grupo-nav{margin:2px 0}
.grupo-nav summary{
  display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;
  border-radius:var(--r);color:#8A8A95;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;transition:var(--t);
  list-style:none;user-select:none;
}
.grupo-nav summary::-webkit-details-marker{display:none}
.grupo-nav summary::marker{content:''}
.grupo-nav summary:hover{color:#fff;background:var(--humo)}
.grupo-nav summary svg{width:15px;height:15px;flex:none;opacity:.75}
.grupo-nav summary span{flex:1}
.grupo-nav summary .chev{width:13px;height:13px;opacity:.6;transition:transform .18s ease}
.grupo-nav[open] summary{color:#fff}
.grupo-nav[open] summary .chev{transform:rotate(180deg)}
/* Si la página activa está dentro, el grupo se marca aunque esté cerrado */
.grupo-nav:not([open]):has(a.on) summary{color:var(--rojo-cl)}
.grupo-nav:not([open]):has(a.on) summary::after{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--rojo-cl);flex:none;
}

.grupo-items{padding:2px 0 6px 12px;margin-left:12px;border-left:1px solid var(--borde)}
.grupo-items a{padding:9px 12px;font-size:.85rem}
.grupo-items a svg{width:15px;height:15px;opacity:.8}
.grupo-items a.on svg{opacity:1}

/* Se despliega con una animación corta, sin saltos */
@media (prefers-reduced-motion:no-preference){
  .grupo-nav[open] .grupo-items{animation:abrirGrupo .16s ease-out}
  @keyframes abrirGrupo{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ── Cajón lateral en el celular ──────────────────────────────── */
.lat-fondo{
  position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.62);
  backdrop-filter:blur(2px);animation:aparecerFondo .18s ease-out;
}
@keyframes aparecerFondo{from{opacity:0}to{opacity:1}}
.lat-cerrar{
  display:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--borde);
  background:var(--negro);color:var(--gris-cl);cursor:pointer;place-items:center;padding:0;
}
.lat-cerrar:hover{color:#fff;border-color:var(--rojo-cl)}
.lat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Respeta el notch y la barra inferior del iPhone */
@supports(padding:max(0px)){
  .lat{padding-top:env(safe-area-inset-top)}
  .lat-pie{padding-bottom:max(16px, env(safe-area-inset-bottom))}
  .top{padding-top:max(14px, env(safe-area-inset-top))}
}

@media (max-width:980px){
  .lat{
    position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(290px, 84vw);
    transform:translateX(-102%);transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.7);
  }
  .lat.on{transform:none}
  .lat-cerrar{display:grid}
  /* En el celular los objetivos táctiles tienen que ser cómodos */
  .lat nav a{padding:13px 14px;font-size:.92rem}
  .grupo-nav summary{padding:13px 14px}
  .grupo-items a{padding:12px 12px}
  .movil-tog svg{margin-right:2px}
}

/* En pantalla grande el fondo oscuro nunca aparece */
@media (min-width:981px){ .lat-fondo{display:none} }

/* ── Ajustes propios del tema claro ───────────────────────────── */
[data-tema="claro"] body{background:var(--negro);color:var(--gris-cl)}

/* La barra lateral en claro necesita separarse del fondo */
[data-tema="claro"] .lat{box-shadow:1px 0 0 var(--borde)}
[data-tema="claro"] .lat nav a{color:var(--gris)}
[data-tema="claro"] .lat nav a:hover{color:var(--texto-fuerte)}
[data-tema="claro"] .lat nav a.on{color:#fff}
[data-tema="claro"] .grupo-nav summary{color:#7A7A86}
[data-tema="claro"] .grupo-nav[open] summary{color:var(--texto-fuerte)}
/* Cada tema usa su propio archivo de logo; el otro se oculta. */
.logo-cla{display:none}
[data-tema="claro"] .logo-osc{display:none}
[data-tema="claro"] .logo-cla{display:block}
[data-tema="claro"] img.auth-logo.logo-cla{display:block;margin:0 auto 26px}

/* Los KPI y las tarjetas: sombra suave en vez de borde marcado */
[data-tema="claro"] .caja,[data-tema="claro"] .kpi{box-shadow:0 1px 3px var(--sombra)}
[data-tema="claro"] .kpi .n{color:var(--texto-fuerte)}

/* Campos de formulario */
[data-tema="claro"] input,[data-tema="claro"] select,[data-tema="claro"] textarea{
  background:#fff;color:var(--texto-fuerte);border-color:var(--borde)}
[data-tema="claro"] input::placeholder,[data-tema="claro"] textarea::placeholder{color:#9A9AA6}
[data-tema="claro"] .buscador input{background:#fff}

/* Los estilos en línea del código usan var(--negro) como fondo de inputs:
   en claro eso sería gris. Se fuerza blanco. */
[data-tema="claro"] table input,[data-tema="claro"] table select,
[data-tema="claro"] .fecha-panel input{background:#fff}
[data-tema="claro"] .inp{background:#fff;color:var(--texto-fuerte)}
[data-tema="claro"] .check b{color:var(--texto-fuerte)}

/* Chips de estado: los tonos claros están hechos para fondo oscuro. En claro
   hay que bajarlos, si no «Enviada» queda celeste sobre blanco y no se lee. */
[data-tema="claro"] .c-enviada   {color:#1B4E92; border-color:#8FB6E6; background:#EAF1FB}
[data-tema="claro"] .c-aceptada,
[data-tema="claro"] .c-despachada{color:#14663A; border-color:#8CCBA8; background:#E9F6EF}
[data-tema="claro"] .c-rechazada {color:#8A1717; border-color:#DE9C9C; background:#FBEBEB}
[data-tema="claro"] .c-en_bodega {color:#7A5510; border-color:#DDBE80; background:#FCF4E3}
[data-tema="claro"] .c-solicitada{color:#173F73; border-color:#8FB6E6; background:#E4EEFB}
[data-tema="claro"] .c-borrador,
[data-tema="claro"] .c-anulada   {color:var(--gris); border-color:var(--borde2)}

/* El filtro activo se pinta rojo con texto blanco. La regla de más arriba que
   deja los chips en blanco tiene la misma especificidad y va después, así que
   se lo comía: hay que reponerlo explícitamente. */
[data-tema="claro"] .chip-f.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
[data-tema="claro"] .chip-f.on:hover{background:var(--rojo-cl);color:#fff}

/* Verdes de «todo bien» escritos a mano en las vistas: el tono es para fondo
   oscuro y sobre blanco desaparece. */
[data-tema="claro"] [style*="#4ade80"]{color:#14663A !important}

[data-tema="claro"] .chip{filter:none}
[data-tema="claro"] .tabla-env tbody tr:hover{background:var(--humo)}

/* El calendario y las listas desplegables */
[data-tema="claro"] .fecha-panel,[data-tema="claro"] .autolista{box-shadow:0 10px 30px var(--sombra)}
[data-tema="claro"] .fecha-celda{color:var(--gris-cl)}
[data-tema="claro"] .fecha-celda:hover{background:var(--humo);color:var(--texto-fuerte)}
[data-tema="claro"] .fecha-atajo,[data-tema="claro"] .chip-f,[data-tema="claro"] .fecha-nav{background:#fff}

/* ── Tema claro: todo lo que en oscuro usa texto blanco ──────
   Cada regla de abajo corresponde a un `color:#fff` de la hoja principal.
   Sin esto el texto queda blanco sobre blanco y el elemento desaparece:
   los botones de línea se veían como recuadros vacíos. */
[data-tema="claro"] .btn-linea{color:var(--texto-fuerte);border-color:var(--borde2)}
[data-tema="claro"] .btn-linea:hover{color:var(--texto-fuerte);border-color:var(--texto-fuerte);background:var(--humo)}
[data-tema="claro"] .lat nav a:hover{background:var(--humo);color:var(--texto-fuerte)}
[data-tema="claro"] .lat-pie b,
[data-tema="claro"] .lat-pie a:hover,
[data-tema="claro"] .grupo-nav summary:hover,
[data-tema="claro"] .prod-info b,
[data-tema="claro"] .prod-precio,
[data-tema="claro"] .ci b,
[data-tema="claro"] .ci input,
[data-tema="claro"] .ci-sub,
[data-tema="claro"] .ci-total,
[data-tema="claro"] .autolista-item b,
[data-tema="claro"] .fecha-titulo,
[data-tema="claro"] .tot-fila.grande,
[data-tema="claro"] .fecha-celda.hoy{color:var(--texto-fuerte)}
/* El total del documento impreso siempre va sobre papel blanco */
[data-tema="claro"] .doc .doc-tot .tot-fila.grande{color:#111}
[data-tema="claro"] .grupo-nav summary:hover{background:var(--humo)}
[data-tema="claro"] .chip-f:hover,
[data-tema="claro"] .fecha-btn:hover,
[data-tema="claro"] .fecha-nav:hover,
[data-tema="claro"] .fecha-atajo:hover,
[data-tema="claro"] .fecha-celda:hover{color:var(--texto-fuerte);background:var(--humo)}

/* Las alertas usan pasteles claros, pensados para fondo oscuro. Sobre blanco
   casi no se leen: acá se invierten a fondo suave con texto saturado. */
[data-tema="claro"] .alerta.ok  {background:#E9F6EF;border-color:#8ACFAB;color:#125B34}
[data-tema="claro"] .alerta.err {background:#FBEBEB;border-color:#DE9C9C;color:#8A1717}
[data-tema="claro"] .alerta.info{background:#EBF1FB;border-color:#A0BFE7;color:#164178}
[data-tema="claro"] .alerta.av  {background:#FCF4E3;border-color:#DDBE80;color:#75510C}
[data-tema="claro"] .alerta code{background:rgba(0,0,0,.07)}
/* Sólo los ENLACES de texto de una alerta van subrayados. Antes esta regla
   decía `.alerta a` a secas y también agarraba los botones: un `[data-tema]`
   más una clase le gana en especificidad a `.alerta .btn{text-decoration:none}`
   de más abajo, así que el botón «Ver cuáles son» salía subrayado y con el
   color del texto de la alerta —rojo sobre rojo, ilegible—. Se corrige
   apuntando mejor, no subiendo la especificidad del otro lado. */
[data-tema="claro"] .alerta a:not(.btn),
[data-tema="claro"] .aviso  a:not(.btn){color:inherit;text-decoration:underline}

/* Texto blanco puesto a mano en atributos style de las vistas */
[data-tema="claro"] [style*="color:#fff"]{color:var(--texto-fuerte) !important}
[data-tema="claro"] .btn-rojo[style*="color:#fff"],
[data-tema="claro"] .chip[style*="color:#fff"]{color:#fff !important}
[data-tema="claro"] .lat nav a.on[style*="color:#fff"]{color:#fff !important}

/* El documento de la cotización siempre es blanco: no se toca */
[data-tema="claro"] .doc{box-shadow:0 1px 4px var(--sombra)}

/* Botón para cambiar de tema */
.tema-btn{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;border-radius:var(--r);
  color:var(--gris);font-size:.82rem;transition:var(--t);background:none;border:0;text-align:left;
}
.tema-btn:hover{background:var(--humo);color:var(--texto-fuerte)}
.tema-btn svg{width:16px;height:16px;flex:none}
.tema-btn .sol{display:none}
[data-tema="claro"] .tema-btn .luna{display:none}
[data-tema="claro"] .tema-btn .sol{display:block}

/* La estrella va en el rojo de la marca.
   El ámbar se veía bien sobre el fondo oscuro y casi desaparecía sobre el
   blanco (1,9:1), así que el tema claro obligaba a un mostaza tostado que
   quedaba sucio. El rojo de Los Toro se lee en los dos fondos sin cambiar de
   idea, y de paso amarra el destacado a la identidad. */
:root{ --estrella:var(--rojo-cl) }
[data-tema="claro"]{ --estrella:var(--rojo) }

/* ── Estrella de «más vendido» ──────────────────────────────────
   Es un botón dentro de una tabla llena de botones, así que no puede
   parecer uno más: sin borde ni fondo, solo el símbolo. Apagada es gris y
   discreta; encendida es roja y se ve desde el otro lado de la pantalla. */
.estrella{
  background:none; border:0; padding:2px 4px; cursor:pointer; line-height:1;
  font-size:1.35rem; color:var(--gris); transition:color .12s, transform .12s;
}
.estrella:hover{ color:var(--estrella); transform:scale(1.15) }
.estrella.on{ color:var(--estrella) }
.estrella:focus-visible{ outline:2px solid var(--texto-fuerte); outline-offset:2px; border-radius:6px }

/* ── Botones de solo icono ──────────────────────────────────────
   El .btn normal reserva ancho para texto; sin texto queda un rectángulo
   flotando con el dibujo al medio. Acá se cuadra y se centra. El area
   táctil se mantiene en 34px: en el celular un icono de 16px es imposible
   de apretar con el dedo. */
.btn-ico{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-ico svg{ width:17px; height:17px }
/* Un producto apagado se ve apagado: el icono queda tenue hasta el hover. */
.btn-ico.apagado{ color:var(--gris) }

/* La estrella dentro de una etiqueta —no es botón, es solo el símbolo— */
span.estrella{ padding:0; cursor:inherit }

/* ── Miniatura en el buscador del vendedor ──────────────────────
   Cuadrada y fija para que las filas no bailen según el alto de cada
   botella. El hueco punteado ocupa el mismo lugar cuando no hay foto:
   así la columna del nombre arranca siempre a la misma altura. */
.prod-foto{
  width:44px; height:44px; flex:0 0 auto;
  object-fit:contain; background:#fff;
  border:1px solid var(--borde); border-radius:8px;
}
.prod-foto.vacia{ background:none; border-style:dashed }

/* ── QR de una lista de precios ──────────────────────────────── */
/* El QR va al lado del enlace, no debajo: son la misma cosa dicha de dos
   maneras —una para copiar, otra para apuntar el celular— y separarlas
   hace que uno de los dos parezca un extra. */
.lp-nuevo{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.lp-nuevo>div:first-child{flex:1 1 260px;min-width:0}
.lp-qr{margin:0;text-align:center}
.lp-qr img{display:block;background:#fff;padding:6px;border-radius:8px;
  border:1px solid var(--borde)}
.lp-qr figcaption{margin-top:6px;font-size:.72rem;color:var(--gris)}
.lp-qr a{color:var(--rojo);text-decoration:none}
.lp-qr a:hover{text-decoration:underline}

/* ── Adjuntos de un mensaje ──────────────────────────────────── */
/* La clase se llama .msj-doc y no .doc porque .doc YA EXISTE más arriba, con
   margin:24px auto, y le centraba el recuadro en medio del mensaje. Un nombre
   genérico en una hoja compartida es una colisión esperando pasar. */
.msj-adj{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.msj-adj img{display:block;max-width:150px;max-height:150px;width:auto;height:auto;
  border-radius:8px;border:1px solid var(--borde);object-fit:cover}
.msj-adj .msj-doc{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--borde);border-radius:8px;padding:9px 13px;color:var(--texto);
  font-size:.84rem;line-height:1.35;background:var(--humo)}
.msj-adj .msj-doc:hover{border-color:var(--rojo);color:var(--texto-fuerte)}
.msj-adj .msj-doc svg{flex:none;color:var(--rojo)}
.msj-adj .sub{font-size:.74rem}

/* ── Segmento: dos o tres opciones como botones ──────────────── */
/* Un <select> con dos opciones son tres gestos —abrir, buscar, elegir— para
   algo que se resuelve con uno. Cuando las opciones son pocas y se usan todo
   el día, los botones ganan. Sobre tres opciones vuelve a convenir el select:
   una fila de seis botones no se lee. */
.segmento{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--borde);
  border-radius:var(--r);overflow:hidden;background:var(--panel)}
.segmento .seg-op{appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--texto);padding:10px 18px;line-height:1.2;
  border-right:1px solid var(--borde);transition:background .12s,color .12s;white-space:nowrap}
.segmento .seg-op:last-child{border-right:0}
.segmento .seg-op:hover{background:var(--humo);color:var(--texto-fuerte)}
.segmento .seg-op.activo{background:var(--rojo);color:#fff;font-weight:600}
.segmento .seg-op.activo:hover{background:var(--rojo)}
/* El foco tiene que verse: esto se recorre con Tab. */
.segmento .seg-op:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px}

/* ── Los pasos de una venta ──────────────────────────────────── */
/* Se llama .venta-pasos y no .pasos porque .pasos YA EXISTE más arriba, con un
   ::before que dibuja un «○» absoluto a la izquierda. Con el nombre genérico
   aparecía un círculo gris fantasma detrás de cada número. Segunda colisión de
   nombres del día en esta hoja: conviene prefijar. */
/* El proceso vive en la cabeza de quien lo inventó hasta que se dibuja. Esto
   lo dibuja: de dónde viene la venta, dónde está, y qué falta.

   Dos cosas que se hicieron mal en el primer intento y por qué: los pasos
   iban con min-width:0 y flex:1 1 128px, así que con seis en una fila la
   caja se encogía por debajo de su contenido y el círculo del número quedaba
   cortado por la mitad; y el texto chico del paso activo heredaba el gris
   general, que sobre el fondo rojo no se lee. Acá el ancho mínimo lo pone el
   contenido y los colores del paso activo se declaran los dos. */
.venta-pasos{border:1px solid var(--borde);border-radius:var(--r);background:var(--panel);
  padding:12px;margin-bottom:16px}
.venta-pasos ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.venta-pasos li{display:flex;align-items:center;gap:9px;
  flex:1 1 auto;min-width:150px;              /* el contenido manda: nunca se corta */
  padding:9px 12px;border-radius:var(--r);
  border:1px solid var(--borde);background:var(--humo)}
.venta-pasos .p-n{flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;line-height:1;
  background:var(--panel);color:var(--gris);border:1px solid var(--borde)}
.venta-pasos .p-t{font-size:.84rem;line-height:1.25;color:var(--gris)}
.venta-pasos .p-d{display:block;font-size:.7rem;color:var(--gris)}

.venta-pasos .p-hecho{border-color:var(--borde)}
.venta-pasos .p-hecho .p-n{background:var(--ok,#2E7D5B);color:#fff;border-color:transparent}
.venta-pasos .p-hecho .p-t{color:var(--texto)}

/* El paso actual: rojo lleno. Los DOS textos se declaran acá — el chico
   heredaba el gris y quedaba invisible sobre el rojo. */
.venta-pasos .p-ahora{background:var(--rojo);border-color:var(--rojo)}
.venta-pasos .p-ahora .p-n{background:#fff;color:var(--rojo);border-color:transparent}
.venta-pasos .p-ahora .p-t{color:#fff;font-weight:600}
.venta-pasos .p-ahora .p-d{color:rgba(255,255,255,.82);font-weight:400}

.venta-pasos .p-pendiente{opacity:.75}
.venta-pasos .p-muerto{opacity:.4}

.venta-pasos-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--borde)}
@media (max-width:640px){ .venta-pasos li{flex:1 1 100%;min-width:0} }

/* ── Cabecera de un mensaje, con avatar ──────────────────────── */
.msj-cab{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.msj-cab .avatar{width:28px;height:28px;font-size:.68rem}
/* El texto se alinea bajo el nombre y no bajo el avatar: así la columna de
   avatares queda limpia y el mensaje se lee como una conversación. */
.msj-cuerpo{padding-left:38px}
@media (max-width:560px){ .msj-cuerpo{padding-left:0} }

/* ── Afinar qué productos entran en una lista ────────────────── */
.lp-afinar{border:1px solid var(--borde);border-radius:var(--r);padding:14px 16px;margin-top:14px}
.lp-cat{border:1px solid var(--borde);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.lp-cat > summary{cursor:pointer;padding:10px 14px;display:flex;justify-content:space-between;
  gap:12px;align-items:center;font-size:.9rem;color:var(--texto-fuerte);background:var(--humo)}
.lp-cat > summary::-webkit-details-marker{display:none}
.lp-cat-acc{display:flex;gap:8px;padding:10px 14px 0;flex-wrap:wrap}
.lp-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2px 14px;padding:10px 14px 14px}
.lp-prod{display:flex;align-items:flex-start;gap:9px;padding:5px 6px;border-radius:6px;
  font-size:.85rem;line-height:1.3;cursor:pointer}
.lp-prod:hover{background:var(--humo)}
.lp-prod input[type=checkbox]{width:auto;margin-top:2px;flex:none}
.lp-prod .sub{font-size:.74rem}
/* Lo desmarcado se ve desmarcado: tachado y apagado. Una casilla vacía sola no
   se distingue de un vistazo cuando hay cuarenta en pantalla. */
.lp-prod.fuera{opacity:.45;text-decoration:line-through}

/* ── Segmento grande: tarjetas con el ícono arriba ───────────── */
/* La versión chica sirve donde el campo es uno más de la fila. Ésta es para
   cuando la elección importa —qué precios se están cotizando— y conviene que
   se vea desde el otro lado del escritorio y se toque sin apuntar. */
.segmento.grande{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;border:0;background:transparent;overflow:visible;width:100%}
.segmento.grande .seg-op{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:16px 12px;border:1px solid var(--borde);
  border-radius:var(--r);background:var(--panel);font-size:.9rem;font-weight:500;
  line-height:1.2;text-align:center}
.segmento.grande .seg-op svg{width:24px;height:24px;color:var(--gris);transition:color .12s}
.segmento.grande .seg-op:hover{background:var(--humo);border-color:var(--gris)}
.segmento.grande .seg-op:hover svg{color:var(--texto-fuerte)}
.segmento.grande .seg-op.activo{background:var(--rojo);border-color:var(--rojo);color:#fff;font-weight:600}
.segmento.grande .seg-op.activo svg{color:#fff}

/* ── Campana y usuario, arriba a la derecha ──────────────────── */
.top-yo{display:flex;align-items:center;gap:10px;margin-left:6px}
.campana-caja{position:relative}
.campana{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--borde);
  background:var(--panel);color:var(--gris);cursor:pointer;transition:var(--t)}
.campana:hover{color:var(--texto-fuerte);border-color:var(--gris)}
.campana.con{color:var(--texto-fuerte)}
.campana-n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--rojo);color:#fff;font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid var(--carbon)}
/* Titila solo cuando hay algo urgente, y solo el punto — no el ícono entero.
   Un elemento grande parpadeando en cada pantalla cansa a la media hora. */
@keyframes campana-late{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.72}}
.campana.urge .campana-n{animation:campana-late 1.1s ease-in-out infinite}
/* Quien pidió menos movimiento no recibe un punto latiendo en la cara. */
@media (prefers-reduced-motion:reduce){ .campana.urge .campana-n{animation:none} }

.campana-panel{position:absolute;top:46px;right:0;z-index:60;width:min(330px,86vw);
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:0 18px 44px var(--sombra);overflow:hidden}
.campana-tit{padding:11px 14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--borde);background:var(--humo)}
.campana-vacio{padding:18px 14px;font-size:.86rem;color:var(--gris)}
.campana-it{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  font-size:.86rem;line-height:1.35;color:var(--texto);text-decoration:none;
  border-bottom:1px solid var(--borde)}
.campana-it:last-child{border-bottom:0}
.campana-it:hover{background:var(--humo);color:var(--texto-fuerte)}
.campana-it .pt{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--gris)}
.campana-it.n-alerta .pt{background:var(--rojo)}
.campana-it.n-aviso  .pt{background:var(--alerta)}
.campana-it.n-info   .pt{background:var(--info)}

.top-usuario{display:flex;align-items:center;gap:9px;text-decoration:none;
  padding:4px 10px 4px 4px;border-radius:999px;border:1px solid transparent;transition:var(--t)}
.top-usuario:hover{background:var(--humo);border-color:var(--borde)}
.top-usuario-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.top-usuario-txt b{font-size:.84rem;color:var(--texto-fuerte);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.top-usuario-txt span{font-size:.72rem;color:var(--gris)}
.top-salir{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;color:var(--gris);text-decoration:none;transition:var(--t)}
.top-salir:hover{color:var(--rojo);background:var(--humo)}
/* En el celular el nombre sobra: el avatar ya identifica y el ancho es oro. */
@media (max-width:820px){ .top-usuario-txt{display:none} }

/* ── Soporte, en el pie del menú ─────────────────────────────── */
/* Una línea, igual que el botón del tema que tiene arriba. La primera versión
   era una tarjeta con título y subtítulo: tres renglones del pie del menú para
   decir algo que se dice en una palabra.

   El selector va como «.lat-pie a.soporte» y no como «.soporte» a secas
   porque más arriba existe «.lat-pie a{font-size:.76rem}», que le gana por
   especificidad —clase + elemento contra clase sola— y dejaba el bloque con
   otro tamaño que todo lo demás del menú. Es la tercera vez hoy que una regla
   vieja y ancha se come una nueva en esta hoja. */
.tema-btn{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.lat-pie a.soporte{display:flex;align-items:center;gap:11px;text-decoration:none;
  padding:10px 14px;border-radius:var(--r);color:#8A8A95;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:var(--t)}
.lat-pie a.soporte:hover{color:#fff;background:var(--humo)}
.lat-pie a.soporte svg{width:15px;height:15px;flex:none;opacity:.75}

/* ── Bloques del panel ─────────────────────────────────────────────
   Listas cortas que enlazan a la pantalla donde la cosa se resuelve. El
   prefijo «pan-» es a propósito: en una hoja de este tamaño, un nombre
   genérico como .lista o .n choca con algo tarde o temprano. */
/* Dos columnas, no tres. Con «minmax(280px)» en una pantalla de escritorio
   entraban tres tarjetas y la cuarta quedaba sola abajo, desbalanceada; y el
   bloque de impuestos, que es una tabla, no cabe cómodo en 280px. */
.pan-rejilla{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
@media (max-width:820px){ .pan-rejilla{grid-template-columns:1fr} }

/* Precio en oferta dentro del buscador del cotizador. */
.of-antes{display:block;font-size:.74rem;font-weight:400;color:var(--gris);text-decoration:line-through}
.of-ahora{display:block;color:var(--rojo)}

.pan-lista{list-style:none;margin:0;padding:0}
.pan-lista li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:9px 0 9px 12px;border-bottom:1px solid var(--borde);position:relative}
.pan-lista li:last-child{border-bottom:0;padding-bottom:0}
.pan-lista li::before{content:"";position:absolute;left:0;top:14px;
  width:5px;height:5px;border-radius:50%;background:var(--borde2)}
.pan-lista li.niv-alerta::before{background:var(--rojo)}
.pan-lista li.niv-av::before{background:var(--alerta)}
.pan-lista a{color:var(--texto-fuerte);text-decoration:none;font-size:.88rem;line-height:1.4}
.pan-lista a:hover{text-decoration:underline}
.pan-n{flex:none;font-size:.78rem;font-weight:600;color:var(--gris-cl);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pan-n.urge{color:var(--rojo)}

.pan-imp{width:100%;font-size:.86rem}
.pan-imp td{padding:6px 0;border:0}
.pan-imp td.num{text-align:right;font-variant-numeric:tabular-nums}
.pan-imp tr.pan-sub td{border-top:1px solid var(--borde);color:var(--texto-fuerte)}
.pan-imp tr.pan-tot td{border-top:2px solid var(--borde2);padding-top:10px;
  color:var(--texto-fuerte);font-size:.95rem}

/* La foto de perfil ocupa el mismo lugar que las iniciales: mismo tamaño,
   mismo redondeo. Así cambiar de una a otra no mueve nada de la página. */
.avatar-foto{object-fit:cover;border-radius:50%;display:inline-block;flex:none;
  border:1px solid var(--borde);background:var(--humo)}

/* Las categorías que se ven en la tienda: una rejilla de casillas, no una
   columna de cincuenta líneas. */
.cats-ver{display:grid;gap:6px 20px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.cats-ver .check{margin:0}


/* ── Barra de trabajo de Tienda online ───────────────────────────
   El buscador y el selector de categoría estaban arriba del todo, y con 1.300
   filas quedaban tres pantallazos por encima de lo que uno está mirando. Acá
   viajan con la tabla: la barra se pega arriba al hacer scroll, así que buscar
   y guardar están siempre a mano. */
/* top va pegado DEBAJO del encabezado, no en cero. La barra de arriba ya es
   sticky con top:0, así que una segunda barra en cero se queda escondida atrás
   y parece que el sticky no funciona. El z-index también va por debajo del 20
   del encabezado, por lo mismo. Los 12px del padding se restan para que las
   dos barras queden pegadas sin una franja de página asomando entre medio. */
.barra-tienda{position:sticky;top:calc(var(--cab) - 12px);z-index:5;
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:12px 0;margin-bottom:6px;background:var(--panel);
  box-shadow:0 8px 12px -12px rgba(0,0,0,.5)}
.barra-tienda > .btn{margin-left:auto}
.barra-tienda-filtros{display:flex;align-items:center;gap:8px;flex:1 1 26rem;min-width:0}
.barra-tienda-filtros select{max-width:15rem;flex:0 0 auto;padding-right:32px;
  -webkit-appearance:none;appearance:none;
  /* La flecha va dibujada: la del navegador es gris claro del sistema y sobre
     fondo oscuro casi no se ve. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A9B3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.barra-tienda-filtros .btn{flex:0 0 auto;padding-block:11px}
.busca-tienda{position:relative;flex:1 1 14rem;min-width:0}
.busca-tienda input{width:100%;padding-right:30px}
.busca-x{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:1rem;line-height:1;text-decoration:none;color:var(--texto-2);
  background:var(--borde2)}
.busca-x:hover{background:var(--rojo);color:#fff}
.busca-aviso{margin:0 0 10px}
/* Se probó dejar pegada también la cabecera de la tabla y no funciona: el
   contenedor .tabla-env tiene overflow para el scroll horizontal, y eso hace
   que un «sticky» de adentro se ancle a ESE contenedor —que no hace scroll
   vertical— en vez de a la ventana. Se anota para no volver a intentarlo. */
/* !important porque la fila de una tabla trae su propio display y una clase
   suelta no siempre le gana. Esconder no es despublicar: los campos de la fila
   escondida se siguen mandando al guardar. */
.fila-fuera{display:none !important}
@media (max-width:760px){
  .barra-tienda{position:static}
  .barra-tienda-filtros{flex:1 1 100%}
  .barra-tienda > .btn{margin-left:0}
}

/* La estrella de «Destacado» dentro de la tabla de Tienda online.
   Es una casilla de verdad —se envía con el formulario y funciona con el
   teclado—; lo único que cambia es que se dibuja como estrella. La casilla se
   esconde con clip y no con display:none, porque un control con display:none
   deja de ser enfocable y se pierde para quien navega con Tab. */
.estrella-check{display:inline-grid;place-items:center;cursor:pointer;
  font-size:1.45rem;line-height:1;color:var(--borde2);transition:color .12s,transform .12s}
.estrella-check input{position:absolute;width:1px;height:1px;opacity:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}
.estrella-check:hover{color:var(--estrella);transform:scale(1.12)}
.estrella-check:has(input:checked){color:var(--estrella)}
.estrella-check:has(input:focus-visible){outline:2px solid var(--texto-fuerte);
  outline-offset:2px;border-radius:6px}
/* Respaldo para navegadores sin :has() — la clase la pone PHP al dibujar. */
.estrella-check.on{color:var(--estrella)}

/* ── Fotos adicionales del producto ──────────────────────────────
   Tira horizontal con scroll propio: seis miniaturas en una fila caben en el
   escritorio y en el teléfono se arrastran, sin empujar el formulario a lo
   ancho. */
.pf-tira{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; margin-bottom:10px}
.pf-item{margin:0; flex:0 0 auto; width:96px}
.pf-item img{width:96px; height:96px; object-fit:contain; background:#fff;
  border:1px solid var(--borde); border-radius:10px; display:block}
.pf-item figcaption{display:flex; align-items:center; gap:4px; margin-top:5px; justify-content:center}
.pf-b{background:var(--negro); border:1px solid var(--borde); color:var(--texto-2);
  border-radius:6px; padding:2px 7px; font-size:.82rem; line-height:1.3; cursor:pointer}
.pf-b:hover:not(:disabled){border-color:var(--rojo); color:#fff}
.pf-b:disabled{opacity:.32; cursor:default}
/* La ✕ es una casilla disfrazada: se marca ahora y se borra al guardar, así
   nada se pierde por un clic suelto y todo el cambio viaja en un solo envío. */
.pf-x{position:relative; cursor:pointer; display:grid; place-items:center;
  width:24px; height:24px; border-radius:6px; border:1px solid var(--borde);
  color:var(--texto-2); font-size:.78rem; line-height:1}
.pf-x input{position:absolute; opacity:0; width:1px; height:1px; clip-path:inset(50%)}
.pf-x:hover{border-color:var(--rojo); color:var(--rojo)}
.pf-x:has(input:checked){background:var(--rojo); border-color:var(--rojo); color:#fff}
.pf-x:has(input:focus-visible){outline:2px solid var(--texto-fuerte); outline-offset:2px}

/* Un botón dentro de un aviso: la regla de enlaces del aviso le pone subrayado
   y color de enlace, y el resultado no se lee como botón. */
.alerta .btn, .aviso .btn{text-decoration:none}
.alerta .btn-rojo, .aviso .btn-rojo{color:#fff}

/* ── Títulos de sección del panel ────────────────────────────────
   Encima de cada fila de números, para que se sepa de qué venta habla cada
   una. El enlace se va al extremo derecho con margin-left:auto y no con
   justify-content, así el título y su bajada quedan juntos aunque el enlace
   no esté (los vendedores no ven el bloque de la tienda). */
.pan-tit{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.pan-tit .sub{font-size:.85rem}
.pan-tit .btn{margin-left:auto;align-self:center}
@media (max-width:520px){
  /* En el teléfono la bajada se va abajo entera: partida en dos líneas entre
     el título y el botón, no se entiende de quién es. */
  .pan-tit{gap:6px}
  .pan-tit .sub{order:3;flex:1 0 100%}
  .pan-tit .btn{margin-left:auto}
}