/* ============================================================
   DISTRIBARF — Estilos del panel
   ------------------------------------------------------------
   Paleta de marca.md. Tres reglas que gobiernan todo el archivo:

   1. LA FIRMA VISUAL ES "VERDE CON CONTORNO CLARO": relleno verde oliva,
      borde crema de 2 px y una línea fina oscura por fuera. Se usa SOLO en
      botones, chips de estado y tarjetas de resumen. Si se repitiera en cada
      celda dejaría de ser firma y sería ruido.
   2. UN SOLO RADIO (--radio), UNA SOLA ESCALA DE ESPACIADO (4/8) Y UNA SOLA
      SOMBRA (--sombra).
   3. NINGÚN ESTADO DEPENDE SOLO DEL COLOR: cada chip lleva su texto.

   Mobile-first de verdad: se diseña a 375 px, los botones miden 48 px de alto
   y lo que se toca queda abajo, al alcance del pulgar.
   ============================================================ */

:root {
    --bosque:  #1E3D22;
    --oliva:   #6E8F3C;
    --manzana: #8CAF4E;
    --crema:   #F7F3E7;
    --tierra:  #6B4423;
    --blanco:  #FFFFFF;

    --linea:  #E1DAC5;
    --suave:  #56684F;

    /* Colores de estado. No vienen de la marca; marca.md pide añadirlos. */
    --rojo:   #A32020;
    --ambar:  #8A5A00;
    --exito:  #2E6B33;

    --radio: 10px;
    --sombra: 0 1px 2px rgba(30, 61, 34, .10), 0 4px 12px rgba(30, 61, 34, .06);
    --contorno: 0 0 0 1px rgba(30, 61, 34, .28);

    --e1: 4px;  --e2: 8px;  --e3: 12px;
    --e4: 16px; --e5: 24px; --e6: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--crema);
    color: var(--bosque);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p  { margin: 0; }

[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--manzana);
    outline-offset: 2px;
}

.sr-solo {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Velo de arranque ----------
   Evita el parpadeo de ver el login medio segundo cuando ya hay sesión. */
.velo {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: var(--crema); color: var(--suave);
}

/* ---------- Marca ---------- */
.wordmark {
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: uppercase;
    line-height: 1;
}
.wordmark-bajo {
    display: block;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    opacity: .8;
    margin-top: var(--e1);
}

/* ---------- Barra superior ---------- */
.barra {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--bosque);
    color: var(--crema);
}
.barra .wordmark { font-size: 1.05rem; }
.barra-nav { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.barra-enlace {
    display: inline-flex; align-items: center; gap: var(--e2);
    min-height: 40px; padding: 0 var(--e3);
    border-radius: var(--radio);
    color: var(--crema); text-decoration: none;
    font-weight: 600; font-size: .9rem;
    border: 1px solid rgba(247, 243, 231, .35);
}
.barra-enlace:hover { background: rgba(247, 243, 231, .12); }
.barra-usuario { font-size: .85rem; opacity: .85; display: none; }

/* ---------- Contenido ---------- */
.contenido {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--e4) var(--e4) 96px;
}
.encabezado {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
    margin-bottom: var(--e4);
}
.encabezado h1 { margin-right: auto; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    min-height: 48px; padding: 0 var(--e4);
    border: 2px solid transparent;
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--bosque);
    font: inherit; font-weight: 700; font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: .6; cursor: progress; }

/* La firma visual: verde oliva + contorno crema + línea fina por fuera. */
.btn-primario {
    background: var(--oliva);
    color: var(--blanco);
    border-color: var(--crema);
    box-shadow: var(--contorno);
}
.btn-primario:hover:not(:disabled) { background: var(--manzana); }

.btn-segundo { background: var(--blanco); border-color: var(--linea); }
.btn-segundo:hover:not(:disabled) { border-color: var(--oliva); }

.btn-peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo); }
.btn-peligro:hover:not(:disabled) { background: var(--rojo); color: var(--blanco); }

.btn-texto {
    min-height: 40px; padding: 0 var(--e2);
    background: none; border-color: transparent;
    color: var(--tierra); text-decoration: underline;
    font-weight: 600;
}
.btn-bloque { width: 100%; }
.btn-chico { min-height: 40px; padding: 0 var(--e3); font-size: .88rem; }
.btn-claro {
    background: transparent; color: var(--crema);
    border-color: rgba(247, 243, 231, .35);
    min-height: 40px; padding: 0 var(--e3); font-size: .88rem;
}
.btn-claro:hover { background: rgba(247, 243, 231, .12); }

.icono { width: 18px; height: 18px; flex: none; }

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e4);
}
.tarjeta + .tarjeta { margin-top: var(--e3); }

/* Tarjeta de resumen: lleva la firma verde, por eso las tablas no la llevan. */
.tarjeta-verde {
    background: var(--oliva);
    color: var(--blanco);
    border: 2px solid var(--crema);
    border-radius: var(--radio);
    box-shadow: var(--contorno);
    padding: var(--e4);
}
.tarjeta-verde .cifra { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.tarjeta-verde .etiqueta { font-size: .85rem; opacity: .9; }

/* ---------- Chips de estado ----------
   Todos llevan texto: el color nunca es la única señal. */
.chip {
    display: inline-flex; align-items: center; gap: var(--e1);
    padding: var(--e1) var(--e2);
    border: 1.5px solid var(--crema);
    border-radius: var(--radio);
    box-shadow: 0 0 0 1px rgba(30, 61, 34, .18);
    font-size: .78rem; font-weight: 700;
    background: var(--crema); color: var(--bosque);
    white-space: nowrap;
}
.chip .icono { width: 14px; height: 14px; }
.chip-ok        { background: var(--exito);  color: var(--blanco); }
.chip-debe      { background: var(--ambar);  color: var(--blanco); }
.chip-malo      { background: var(--rojo);   color: var(--blanco); }
.chip-entregado { background: var(--bosque); color: var(--blanco); }
.chip-neutro    { background: var(--crema);  color: var(--bosque); border-color: var(--blanco); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: var(--e3); }
.campo > label, .etiqueta-campo {
    display: block;
    font-size: .85rem; font-weight: 700;
    margin-bottom: var(--e1);
}
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="email"],
select, textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--bosque);
    font: inherit;
    font-size: 16px;               /* 16 px evita el zoom automático en iOS */
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--oliva); }
.ayuda { font-size: .8rem; color: var(--suave); margin-top: var(--e1); }

.fila-campos { display: grid; gap: var(--e3); }
.casilla {
    display: flex; align-items: flex-start; gap: var(--e2);
    padding: var(--e2) 0;
}
.casilla input[type="checkbox"] {
    width: 22px; height: 22px; min-height: 0; margin: 0; flex: none;
    accent-color: var(--oliva);
}

/* ---------- Avisos ---------- */
.alerta {
    display: none;
    align-items: flex-start; gap: var(--e2);
    padding: var(--e3);
    margin-bottom: var(--e3);
    border: 1px solid var(--rojo);
    border-left-width: 4px;
    border-radius: var(--radio);
    background: #FBEDEC;
    color: var(--rojo);
    font-size: .9rem; font-weight: 600;
}
.alerta.visible { display: flex; }

.nota {
    padding: var(--e3);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--tierra);
    border-radius: var(--radio);
    background: var(--crema);
    font-size: .85rem;
    color: var(--suave);
}

/* ---------- Estados vacíos ----------
   Se diseñaron primero: el sistema arranca con cero de todo y esta es la
   pantalla de la primera semana. */
.vacio {
    text-align: center;
    padding: var(--e6) var(--e4);
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
}
.vacio h3 { margin-bottom: var(--e1); }
.vacio p { color: var(--suave); font-size: .9rem; margin-bottom: var(--e4); }

/* ---------- Estado de carga ----------
   Sin esto se hace doble clic en "Guardar" y salen pedidos duplicados. */
.cargando { color: var(--suave); font-size: .9rem; padding: var(--e4) 0; }
.esqueleto {
    height: 76px;
    border-radius: var(--radio);
    background: linear-gradient(90deg, #EFEADB 25%, #F7F3E7 50%, #EFEADB 75%);
    background-size: 400% 100%;
    animation: brillo 1.4s linear infinite;
    margin-bottom: var(--e2);
}
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .esqueleto { animation: none; }
}

/* ---------- Lista de pedidos ---------- */
.pedido { display: grid; gap: var(--e2); }
.pedido-cabeza { display: flex; align-items: flex-start; gap: var(--e2); flex-wrap: wrap; }
.pedido-cliente { font-weight: 700; margin-right: auto; }

/* Toda la tarjeta abre el pedido. El cursor y el realce al pasar por encima
   son lo único que lo anuncia, así que no son adorno: sin ellos nadie
   descubre que se puede tocar. */
.pedido-abre { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pedido-abre:hover { border-color: var(--oliva); }

/* El nombre del cliente ES el botón: le da al teclado y al lector de pantalla
   un destino real, que un <article> clicable no tiene. Se pinta como texto
   porque ya se veía así, y el foco sí se marca. */
.pedido-nombre {
    padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left;
    cursor: pointer;
}
.pedido-nombre:hover { text-decoration: underline; }
.pedido-nombre:focus-visible {
    outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 3px;
}
.pedido-dato { font-size: .85rem; color: var(--suave); }
.pedido-total { font-size: 1.25rem; font-weight: 800; }
.pedido-items { font-size: .88rem; color: var(--suave); }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e1); }

/* Entregado y cancelado se distinguen de un vistazo por el filo de la
   tarjeta. Es refuerzo, no la única señal: el chip con su texto sigue ahí. */
.pedido-entregado { border-left: 4px solid var(--bosque); }
.pedido-cancelado { border-left: 4px solid var(--rojo); }
.dia-cuenta { font-size: .85rem; color: var(--suave); margin-bottom: var(--e3); }

/* ---------- Detalle de un pedido ---------- */
.detalle-cliente { font-size: 1.15rem; font-weight: 800; margin-right: auto; }
.detalle-titulo { margin: var(--e5) 0 var(--e2); }
.tarjeta-verde .verde-lineas {
    margin-top: var(--e3);
    padding-top: var(--e2);
    border-top: 1px solid rgba(255, 255, 255, .4);
    font-size: .95rem;
}
.tarjeta-verde .verde-lineas > div {
    display: flex; justify-content: space-between; gap: var(--e3);
}
.tarjeta-verde .verde-lineas b { font-weight: 800; }
.pago-anulado .fila-titulo, .pago-anulado .fila-precio { text-decoration: line-through; }

/* ---------- Filas simples (catálogo, clientes) ----------
   Sin contorno claro a propósito: la firma se reserva para lo que se toca. */
.filas { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.fila {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--linea);
}
.fila:last-child { border-bottom: 0; }
.fila-cuerpo { min-width: 0; flex: 1; }
.fila-titulo { font-weight: 700; }
.fila-sub { font-size: .85rem; color: var(--suave); }
.fila-precio { font-weight: 800; white-space: nowrap; }

/* Fila de dos renglones a cada lado (línea de un pedido): el texto arriba,
   no centrado, o el nombre largo baila respecto al precio. */
.fila-arriba { align-items: flex-start; }
.fila-lado { flex: none; text-align: right; }
.fila-lado .btn { margin-top: var(--e1); }
.fila-lado .contador { margin-top: var(--e1); justify-content: flex-end; }
.fila-cuenta { font-weight: 800; }

/* ---------- Contador de cantidad ---------- */
.contador { display: flex; align-items: center; gap: var(--e2); }
.contador button {
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--blanco); color: var(--bosque);
    font-size: 1.3rem; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.contador button:hover { border-color: var(--oliva); }
.contador .cuenta { min-width: 28px; text-align: center; font-weight: 800; }

/* ---------- Barra inferior fija (pulgar) ---------- */
.barra-abajo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
    background: var(--blanco);
    border-top: 1px solid var(--linea);
}
/* min-width:0 para que la etiqueta pueda recortarse con puntos suspensivos en
   vez de empujar el botón de guardar fuera de la pantalla a 375 px. */
.barra-abajo .resumen {
    display: flex; align-items: center; gap: var(--e2);
    margin-right: auto; min-width: 0;
    padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: left;
}
.barra-abajo button.resumen { cursor: pointer; }
.barra-abajo .resumen-txt { min-width: 0; }
.barra-abajo .resumen .etiqueta {
    font-size: .78rem; color: var(--suave);
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-abajo .resumen .cifra { display: block; font-size: 1.25rem; font-weight: 800; }
.chevron { flex: none; display: inline-flex; color: var(--suave); }
/* Sin transición: es un indicador de estado, no una animación. */
.resumen[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Resumen del pedido que se está armando ----------
   Va encima de la barra, no en el flujo: sin esto la persona tiene que
   recorrer toda la lista de productos buscando cuáles tienen cantidad. Se
   abre y se cierra, y lleva su propio scroll, para que a 375 px nunca tape
   la lista que se está usando. La altura de la barra se mide en JS: si la
   etiqueta creciera a dos renglones, el resumen la seguiría. */
.hoja-resumen {
    position: fixed; left: 0; right: 0; z-index: 29;
    background: var(--blanco);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -6px 20px rgba(30, 61, 34, .12);
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.hoja-cabeza {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: var(--e2);
    padding: var(--e3) var(--e4);
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
}
.hoja-cabeza h3 { margin-right: auto; }
.hoja-vacia { padding: var(--e4); color: var(--suave); font-size: .9rem; }

/* ---------- Pestañas del panel de administración ---------- */
.pestanas {
    display: flex; gap: var(--e2);
    overflow-x: auto;
    padding-bottom: var(--e2);
    margin-bottom: var(--e4);
    -webkit-overflow-scrolling: touch;
}
.pestana {
    min-height: 44px; padding: 0 var(--e4);
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--blanco); color: var(--bosque);
    font: inherit; font-weight: 700; font-size: .9rem;
    white-space: nowrap; cursor: pointer;
}
.pestana[aria-selected="true"] {
    background: var(--oliva); color: var(--blanco);
    border: 2px solid var(--crema);
    box-shadow: var(--contorno);
}

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--e4);
}
.login-card { width: 100%; max-width: 380px; }
.login-marca { text-align: center; margin-bottom: var(--e5); }
.login-marca .wordmark { font-size: 1.8rem; }
.login-marca .subtitulo { color: var(--suave); font-size: .9rem; margin-top: var(--e3); }

/* ---------- Modal ---------- */
.modal {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(30, 61, 34, .45);
    padding: var(--e4);
}
.modal-caja {
    width: 100%; max-width: 420px;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e4);
    max-height: 88dvh; overflow-y: auto;
}
.modal-cabeza { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.modal-cabeza h2 { margin-right: auto; }
.modal-acciones { display: flex; gap: var(--e2); margin-top: var(--e4); }
.modal-acciones .btn { flex: 1; }

/* ---------- Avisos flotantes ---------- */
.toast-zona {
    position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4); z-index: 60;
    display: flex; flex-direction: column; gap: var(--e2);
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--e2);
    padding: var(--e3);
    border-radius: var(--radio);
    background: var(--bosque); color: var(--crema);
    box-shadow: var(--sombra);
    font-size: .9rem;
    pointer-events: auto;
}
.toast-error { background: var(--rojo); color: var(--blanco); }
.toast-aviso { background: var(--tierra); color: var(--blanco); }
.toast .t-cuerpo { flex: 1; }
.toast .t-titulo { font-weight: 700; }
.toast .t-cerrar {
    background: none; border: 0; color: inherit; cursor: pointer;
    padding: 0 var(--e1); font: inherit;
}

/* ============================================================
   Tablero e inventario
   ------------------------------------------------------------
   Nada de esto lleva la firma verde con contorno: se la queda la tarjeta
   del número principal (.tarjeta-verde), y si la llevaran también las
   tarjetas chicas, las tablas y los paneles, dejaría de señalar nada.
   ============================================================ */

/* ---------- Barra de periodo ---------- */
.tb-barra {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2);
    margin-bottom: var(--e2);
}
/* Crece hasta 260 px y para. Un desplegable de cuatro opciones estirado a
   todo lo ancho de un monitor parece un campo de texto y no se lee como lo
   que es. */
.tb-barra .campo { flex: 1 1 150px; max-width: 260px; }
.tb-barra .btn { flex: none; }

/* ---------- Tarjetas de cifra ----------
   El título va en gris y chico, la cifra en oscuro y grande: la jerarquía
   la hacen el color y el peso, no solo el tamaño. */
.tb-kpis {
    display: grid; gap: var(--e2);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: var(--e3);
}
.kpi {
    padding: var(--e3) var(--e4);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.kpi-titulo {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--suave);
}
.kpi-valor {
    margin-top: var(--e1);
    font-size: 1.45rem; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-sub { margin-top: var(--e1); font-size: .8rem; color: var(--suave); }

/* ---------- Paneles ----------
   Separados por espacio, no por más bordes: el aire ya agrupa. */
.tb-panel { margin-top: var(--e6); }
.tb-panel > h3 { margin-bottom: var(--e3); }
.tb-dato {
    font-size: 1.9rem; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Gráficos ----------
   position:relative y un alto porque Chart.js corre con
   maintainAspectRatio:false: sin un contenedor con alto, el canvas crece sin
   parar en cada redibujado.

   El alto REAL lo pone admin-tablero.js con un style en línea, porque depende
   de cuántas filas trae el dato: ocho productos no caben en el mismo alto que
   tres métodos de pago, y con alto fijo las etiquetas del eje se salen. Los
   240 px de aquí son el respaldo por si algún día se usa la clase sola. */
.tb-chart { position: relative; width: 100%; height: 240px; }

/* Las cifras día por día van plegadas debajo del gráfico de ventas. */
.tb-panel details > summary {
    cursor: pointer;
    margin-top: var(--e3);
    font-size: .85rem;
    color: var(--tierra);
}

/* ---------- El resumen como columna, en pantalla ancha ----------

   En un monitor sobra medio ancho de pantalla a cada lado del contenido, y el
   resumen del pedido vive escondido en una barra al pie que además TAPA la
   lista de productos justo mientras se elige. Desde 1280 px pasa a ser una
   columna a la izquierda, siempre abierta.

   POR QUÉ ESTO ES SOLO CSS Y NO TOCA EL JAVASCRIPT. La hoja se abre y se
   cierra poniendo el atributo `hidden` y un `bottom` en línea. Los dos se
   pueden anular desde aquí: una regla de `display` gana sobre `hidden`, y el
   `!important` gana sobre el estilo en línea. Así el comportamiento de celular
   —que es el correcto allá— se queda intacto y sin condicionales nuevos.

   EL TRADE-OFF: el contenido deja de estar centrado y se corre a la derecha,
   como cualquier aplicación con barra lateral. A cambio, el resumen se ve
   siempre sin tapar nada. */
@media (min-width: 1280px) {
    /* El contenido se corre solo cuando hay columna. Si no, la lista de
       pedidos quedaría con un hueco vacío a la izquierda sin razón. */
    #app:has(#barra-guardar:not([hidden])) .contenido {
        margin-left: 332px; margin-right: var(--e4);
    }

    /* Solo mientras se está armando un pedido. Anular `hidden` a secas dejaba
       la columna colgada también sobre la lista y sobre el detalle, porque
       apagarTodo() cierra el resumen con ese mismo atributo. El ancla es la
       barra de guardar, que es lo único que se enciende en esta pantalla. */
    #app:has(#barra-guardar:not([hidden])) .hoja-resumen {
        display: flex; flex-direction: column;
        /* 56px es el alto de la barra superior: var(--e3) arriba y abajo más
           la línea del texto. Si la barra crece, este número la sigue. */
        top: calc(56px + var(--e4));
        left: var(--e4);
        right: auto;
        /* Gana sobre el `bottom` en línea que pone abrirResumen(). */
        bottom: var(--e4) !important;
        width: 300px;
        max-height: none;
        border-top: 0;
        border: 1px solid var(--linea);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
    }

    /* Ya no hay nada que desplegar: se ve entero. */
    .hoja-resumen .hoja-cabeza #btn-cerrar-resumen,
    #btn-ver-resumen .chevron { display: none; }

    /* La barra de abajo se queda solo con Guardar, que sigue siendo el botón
       más importante de la pantalla y conviene tenerlo siempre a la vista. */
    .barra-abajo .resumen { pointer-events: none; }
}

/* ---------- Tablas ----------
   El scroll horizontal vive AQUÍ dentro. Si lo hiciera el body, a 375 px se
   movería la página entera al arrastrar una tabla ancha. */
.tabla-caja {
    margin-top: var(--e3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td {
    padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--linea);
    text-align: left;
    white-space: nowrap;
}
.tabla thead th {
    background: var(--crema);
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--suave);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
/* Los números se leen alineados a la derecha y con cifras de ancho fijo:
   así las columnas de plata se comparan de un vistazo. */
.tabla td:not(:first-child), .tabla th:not(:first-child) {
    text-align: right; font-variant-numeric: tabular-nums;
}

/* ---------- Aviso de existencias ----------
   Ámbar, no rojo: es "hay que producir", no "se rompió algo". Lleva icono
   y texto, nunca solo el color. */
.aviso-stock {
    display: flex; align-items: flex-start; gap: var(--e2);
    padding: var(--e3);
    margin-bottom: var(--e3);
    border: 1px solid #E8D5AE;
    border-left: 4px solid var(--ambar);
    border-radius: var(--radio);
    background: #FDF4E2;
    color: var(--ambar);
    font-size: .88rem;
}
.aviso-stock .icono { flex: none; margin-top: 2px; }

/* Cifra en rojo: se usa junto a un texto que dice qué pasa, nunca sola. */
.neg { color: var(--rojo); font-weight: 800; }

/* ============================================================
   Pantalla grande. La administradora trabaja en computador, pero es la
   MISMA pantalla, no otra versión: solo cabe más y el modal se centra.
   ============================================================ */
@media (min-width: 720px) {
    .barra-usuario { display: inline; }
    .contenido { padding: var(--e5) var(--e5) 110px; }
    .fila-campos { grid-template-columns: 1fr 1fr; }
    .modal { align-items: center; }
    .toast-zona { left: auto; width: 380px; }
    h1 { font-size: 1.6rem; }

    .kpi-valor { font-size: 1.6rem; }
}