/* ========================================
   Punto de venta — identidad "Calido" (29 de agosto de 2026)

   Sale del manual de marca de Edgar (Riesgo Calculado): navy de estructura,
   mostaza para lo que se toca, teal para lo secundario. La version que Edgar
   eligio de tres: misma paleta que la formal, pero papel crema, esquinas de
   14px, sombras suaves en vez de bordes duros y etiquetas en texto normal --
   sin MAYUSCULAS espaciadas, que era lo que hacia sentir el sistema como una
   hoja de calculo.

   Space Grotesk (titulos, peso 500) + Inter (interfaz).

   Los nombres de las variables se conservan (--miel, --marco, --crema...)
   porque los usan 30 pantallas; lo que cambio son sus VALORES. --miel ya no
   es el amarillo miel sino la mostaza del manual, y --marco ya no es el
   petroleo sino el navy. No renombrarlas evita tocar cada archivo.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* === MARCA ===
       Reskin del 27 de septiembre de 2026 (a petición de Edgar, inspirado en
       un sistema de diseño de referencia estilo Notion/Linear/Vercel que le
       gustó -- ver design-system/DESIGN_SYSTEM.md, no forma parte del
       sistema, es solo la referencia). Mismo criterio de siempre: los
       NOMBRES de variable no cambian (los usan ~55 archivos), solo los
       VALORES -- así nadie tuvo que tocar una sola pantalla.
       --miel deja de ser la mostaza del manual y pasa a ser el azul de la
       referencia -- ahora lleva SIEMPRE texto BLANCO (--on-miel), al revés
       de como era con la mostaza (que llevaba texto oscuro, --miel-texto).
       --miel-texto se queda pero angosta su uso: ya solo es para texto/ícono
       DENTRO de un fondo --miel-tinte (chips, avisos), nunca sobre --miel
       sólido -- ver --on-miel más abajo para ese caso.
       --hoja = teal, la segunda familia (enlaces, confirmaciones). Sin
       cambios -- ya leía bien como "positivo/confirmado" y no chocaba con
       el azul nuevo. */
    --miel: #3B82F6;
    --miel-oscura: #2563EB;
    --miel-tinte: #E8F0FE;
    --on-miel: #FFFFFF;
    --hoja: #1E5E58;
    --hoja-oscura: #154640;
    --hoja-texto: #154640;
    --hoja-tinte: #E7EDEB;
    --tinta: #1A1A1A;

    /* === MARCO OSCURO (sidebar y paneles oscuros) ===
       Navy del manual de marca. Sin cambios en el reskin -- ya se ve
       compatible con el azul nuevo, y es identidad de marca, no algo que
       viniera de la referencia. --marco-texto es nueva (27 de septiembre de
       2026): muchas pantallas pintan "background: var(--marco); color:
       var(--crema);" para un panel oscuro con texto blanco -- funcionaba
       porque --crema SIEMPRE había sido blanco, pero en modo oscuro --crema
       pasa a ser oscuro (es la tarjeta, no un color fijo), así que ese texto
       se volvía invisible. --marco-texto guarda ese "siempre blanco" aparte,
       sin tocar --crema. NUNCA se redeclara en el bloque oscuro de abajo --
       a propósito, un panel --marco es oscuro en los dos modos por igual. */
    --marco: #1B2438;
    --marco-oscuro: #131A2A;
    --marco-texto: #FFFFFF;

    /* --papel es el fondo de la ventana; --crema es el de las tarjetas.
       Reskin del 27 de septiembre de 2026: pasan de un crema/arena cálidos
       a un gris con un toque azul, más cercano al "aire" de la referencia
       (fondo #F6F8FB, tarjetas blancas) -- es lo que más cambia la sensación
       general de calido a "limpio tipo Notion", más que el azul solo. */
    --papel: #F5F7FB;
    --crema: #FFFFFF;
    --arena: #EAEFF7;

    /* Texto/ícono sobre un fondo --miel-tinte (chips, avisos) -- ahora un
       azul oscuro en vez de negro, mismo patrón que los badges de la
       referencia (texto de color sobre su propio fondo suave, no negro a
       secas). */
    --miel-texto: #1D4ED8;
    --etiqueta: #4B5563;
    --borde: rgba(20, 20, 20, .10);
    --divisor: rgba(20, 20, 20, .07);
    --sombra-tarjeta: 0 4px 14px rgba(20, 20, 20, .05);
    --sombra-suave: 0 1px 3px rgba(20, 20, 20, .04);

    /* === UTILIDAD (el sistema los sigue necesitando; no vienen del handoff) === */
    --superficie: #FFFFFF;
    --texto: var(--tinta);
    --texto-secundario: rgba(17, 24, 39, .64);
    --texto-suave: rgba(17, 24, 39, .45);
    --error: #A63B3B;
    --error-claro: #F5E5E3;

    /* === RADIOS ===
       Sin cambios en el reskin -- ya estaban cerca de la referencia (9-12px)
       desde el pase "más sobrio" del 11 de septiembre de 2026. */
    --radio-pildora: 999px;
    --radio-tarjeta: 12px;
    --radio-pantalla: 14px;
    --radio: 10px;
    --radio-peq: 8px;
    --radio-boton: 9px;

    color-scheme: light;
}

/* ========== MODO OSCURO (27 de septiembre de 2026) ===========
   Se activa poniendo data-theme="dark" en <html> -- lo hace un script chico
   en pwa_meta.php, guardado en localStorage (por dispositivo, nunca por
   cuenta). Mismo criterio de siempre: SOLO se sobreescriben los VALORES de
   las variables que ya existen, nunca se inventan clases nuevas -- así
   ninguna de las ~137 pantallas necesitó tocarse para heredar el modo
   oscuro, exactamente igual que cualquier otro cambio de paleta de este
   archivo. Los colores oscuros salen del mismo sistema de referencia
   (design-system/DESIGN_SYSTEM.md, sección 3.1/3.3). */
:root[data-theme="dark"] {
    --papel: #0B1120;
    --crema: #111A2E;
    --arena: #17223A;
    --tinta: #F1F5F9;
    --texto-secundario: rgba(203, 213, 225, .82);
    --texto-suave: rgba(148, 163, 184, .75);
    --etiqueta: #94A3B8;
    --borde: rgba(148, 163, 184, .22);
    --divisor: rgba(148, 163, 184, .14);
    --sombra-tarjeta: 0 4px 14px rgba(0, 0, 0, .4);
    --sombra-suave: 0 1px 3px rgba(0, 0, 0, .35);
    --superficie: #111A2E;

    --miel: #5B93F8;
    --miel-oscura: #3B76E0;
    --miel-tinte: rgba(59, 130, 246, .16);
    --miel-texto: #93C0FD;
    --on-miel: #0B1120;

    --hoja: #3D8F86;
    --hoja-oscura: #2F726B;
    --hoja-texto: #7FC9C0;
    --hoja-tinte: rgba(61, 143, 134, .18);

    --error: #F87171;
    --error-claro: rgba(248, 113, 113, .16);

    /* El sidebar (--marco) y el logo del negocio se quedan igual en
       oscuro -- ya es la superficie más oscura del sistema, no necesita su
       propio ajuste. */
    color-scheme: dark;
}

/* ========== RESET Y BASE ========== */
* {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--papel);
    color: var(--texto);
    margin: 0;
    padding: 22px;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
}

/* ========== TIPOGRAFÍA ========== */
h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 0.25rem;
    color: var(--texto);
}

h2 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--etiqueta);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* ========== FORMULARIOS ========== */
/* Tamaño/peso subidos el 5 de septiembre de 2026 (a petición de Edgar) --
   a 11.5px/600 se leía casi igual que el texto de ayuda de abajo
   (.pista-campo), sin resaltar qué es cada campo (Nombre, Apellido...).
   Ahora es más grande, en negrita real, y con el color de texto principal
   en vez del secundario -- aplica a TODOS los formularios del sistema
   (es el selector base de <label>), no solo a uno en particular. */
label {
    display: block;
    margin-top: 1.25rem;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--texto);
    text-transform: none;
    letter-spacing: 0;
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 18px;
    margin-top: 6px;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-peq);
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    color: var(--texto);
    background: var(--crema);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

/* Flechitas nativas de incremento de <input type="number"> -- ocultas en
   TODO el sistema (10 de septiembre de 2026, bug real reportado por
   Edgar: escribió "3" en un campo con step decimal fino, le dio clic a
   la flecha para subirlo, y el campo se reinició en vez de sumar el
   step). Ya existía esta misma regla, pero solo local a
   costeo_parametros.php (`.campo-con-unidad`) -- se centraliza aquí para
   que cubra cualquier <input type="number"> del sistema, no una sola
   pantalla. Quien necesite ajustar el valor lo escribe directo; para
   campos con step muy fino (cantidades, precios) la flechita nunca fue
   una forma práctica de ajustarlo de cualquier modo. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

textarea {
    border-radius: var(--radio);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--miel-oscura);
    box-shadow: 0 0 0 4px rgba(233, 185, 73, 0.24);
}

input:disabled {
    background: var(--arena);
    cursor: not-allowed;
}


/* Casillas (checkbox) -- la regla general de arriba les pone
   `appearance: none`, lo que borra el dibujo nativo del navegador: sin
   estas reglas se ven como una pildora blanca vacia y no hay forma de
   saber si estan marcadas o no. Aqui se les vuelve a dar forma de
   casilla, con palomita propia cuando estan marcadas. */
input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    padding: 0;
    margin-top: 0;
    border-radius: 8px;
    border: 2px solid var(--borde);
    background: var(--crema);
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background: var(--miel);
    border-color: var(--miel-oscura);
}

/* La palomita: dos lados de un borde girados 45 grados. Color --on-miel
   (27 de septiembre de 2026, reskin) -- con la mostaza clara de antes un
   trazo oscuro se veía bien; con el azul de ahora necesita ser el mismo
   blanco que usan los botones sobre --miel, si no se pierde el contraste. */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--on-miel);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Los <select> tambien pierden su flecha nativa con `appearance: none`,
   y sin ella se ven identicos a un campo de texto (nadie adivina que se
   pueden desplegar). Se les dibuja una flecha con un SVG de fondo. */
select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5E1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
    padding-right: 44px;
    cursor: pointer;
}

/* Texto de ayuda debajo de un campo -- explica para que sirve el campo
   sin tener que abrir documentacion. */
.pista-campo {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--texto-secundario);
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 0;
}

/* Misma ayuda, pero para una casilla: se alinea con la etiqueta, no con
   el borde de la tarjeta. */
.campo-check + .pista-campo {
    margin-top: 4px;
    margin-left: 34px;
}

/* ========== TARJETAS DE CAPACIDAD (nueva_caja.php / editar_caja.php) ==========
   Reemplaza una lista de checkboxes sueltos -- cada uno con su propio
   párrafo de ayuda aparte -- por una parrilla de tarjetas seleccionables,
   agregada el 30 de agosto de 2026 a petición de Edgar. Sigue siendo el
   mismo <input type="checkbox"> de siempre por dentro (mismo name, mismo
   guardar_*.php sin tocar) -- solo cambia cómo se ve y se toca. A
   propósito son tarjetas de SELECCIÓN MÚLTIPLE, no un selector de "un
   solo tipo": una cuenta real puede combinar varias a la vez (ej. una
   cuenta de banco que también tiene tarjeta de débito pegada), y forzar
   un tipo único obligaría a duplicar esa cuenta en dos registros
   separados con saldos que habría que conciliar a mano -- justo lo que
   se evaluó y se decidió NO hacer (ver memoria de proyecto). */
.grid-capacidades {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 8px;
}
@media (min-width: 560px) {
    .grid-capacidades { grid-template-columns: 1fr 1fr; }
}
.tile-capacidad {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 13px 42px 13px 16px;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    background: var(--crema);
    transition: border-color 0.15s ease, background 0.15s ease;
    /* Es un <label>, así que sin esto hereda el margin-top:1.25rem
       genérico de la regla `label` de arriba -- dentro de una grilla de
       2 columnas eso descuadra el punto de partida de cada tarjeta (el
       espaciado ya lo da el `gap` de `.grid-capacidades`), y las tarjetas
       de una misma fila terminan viéndose de distinta altura aunque su
       contenido mida lo mismo. */
    margin-top: 0;
}
.tile-capacidad:hover { border-color: var(--hoja-tinte); }
.tile-capacidad input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile-capacidad .tile-titulo { display: block; font-size: 14px; font-weight: 700; color: var(--texto); }
.tile-capacidad .tile-desc { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--texto-secundario); line-height: 1.4; }
.tile-capacidad::after {
    content: '';
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 13px; right: 13px;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--borde); background: var(--crema);
    color: var(--crema); font-size: 12px; font-weight: 800;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tile-capacidad:has(input:checked) {
    border-color: var(--hoja-oscura);
    background: var(--hoja-tinte);
}
.tile-capacidad:has(input:checked)::after {
    content: '✓';
    border-color: var(--hoja-oscura);
    background: var(--hoja-oscura);
    /* Antes heredaba color: var(--crema) de la base (::after arriba) -- en
       modo claro daba lo mismo (--crema siempre fue blanco), pero en modo
       oscuro (27 de septiembre de 2026) --crema deja de ser blanco y la
       palomita se volvía invisible sobre el círculo teal. Blanco fijo aquí
       a propósito: este círculo siempre es oscuro (--hoja-oscura), en los
       dos temas por igual. */
    color: #FFFFFF;
}

/* Enlace/botón chico secundario junto a Costeo -- usado en editar_producto.php
   ("Editar en Costeo"/"Realizar costeo") y costeo_producto.php ("Dejar de
   compartir esta receta"). Nunca había tenido estilo propio (se veía como
   enlace azul de navegador sin marcar); ahora es una píldora chica
   consistente con el resto de botones secundarios de la app. */
.btn-costeo-chico {
    display: inline-block; margin-top: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700;
    border-radius: var(--radio-boton); background: var(--superficie); border: 1.5px solid var(--borde);
    color: var(--texto); text-decoration: none; box-shadow: none; cursor: pointer;
}
.btn-costeo-chico:hover { background: var(--arena); }

/* Registro desactivado dentro de un directorio (proveedores, sucursales,
   productos). Sigue listado —- es donde se vuelve a activar—- pero se ve
   apagado y con su etiqueta. */

/* Fila de acciones al pie de la tarjeta de un directorio (Editar, Ver en
   mapa, Llamar...). Vivía suelta en proveedores.php; se comparte desde
   que sucursales.php y productos.php también tienen "Editar". */
.tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.tarjeta-acciones a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--texto);
    background: var(--arena);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 7px 11px;
}

.tarjeta.inactivo {
    opacity: 0.62;
    border-style: dashed;
}

.chip-inactivo {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: var(--radio-pildora);
    background: var(--arena);
    color: var(--texto-secundario);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
}
/* ========== BOTONES ========== */
button {
    font-family: inherit;
    border: none;
    border-radius: var(--radio-boton);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 13px 20px;
    font-size: 15px;
}

button:active {
    transform: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Botón primario (miel) */
.btn-primario,
button[type="submit"] {
    background: var(--miel);
    color: var(--on-miel);
    box-shadow: var(--sombra-suave);
}

.btn-primario:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--miel-oscura);
    color: #FFFFFF;
    filter: none;
}

/* Foco de teclado visible en todo lo accionable */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--miel-oscura);
    outline-offset: 2px;
}

/* ========== TARJETAS ========== */
.caja {
    background: var(--crema);
    padding: 2rem 1.5rem;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid var(--borde);
}

/* ========== VOLVER ========== */
a.volver {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
    color: var(--texto);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 16px 9px 13px;
    border-radius: var(--radio-boton);
    background: var(--arena);
    transition: background 0.15s ease;
}

a.volver:hover {
    background: var(--borde);
}

/* ========== SESIÓN ========== */
/* Barra superior con "Volver" a la izquierda y quién está registrando a la
   derecha — mismo patrón en toda la app (antes cada página con carrito lo
   redeclaraba a mano; agosto 2026: se centralizó aquí para que también lo
   puedan usar los formularios simples de una sola columna). */
.barra-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
    /* Dejar aire a la derecha (27 de septiembre de 2026, reskin) -- el botón
       flotante de modo oscuro (.boton-tema, inyectado por pwa_meta.php) vive
       fijo arriba a la derecha de CUALQUIER pantalla; sin este espacio se
       montaba encima de "usuario-corto" en celular (en escritorio no aplica,
       ahí .usuario-corto ya se oculta más abajo). */
    padding-right: 50px;
}
.barra-superior a.volver {
    margin-bottom: 0;
}
.usuario-corto,
.contexto-usuario {
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-secundario);
    white-space: nowrap;
}

.saludo {
    color: var(--texto-secundario);
    font-size: 13px;
    font-weight: 700;
    margin: -0.25rem 0 1rem;
    text-align: center;
}

/* ========== ERROR Y CONFIRMACIÓN ========== */
.error {
    color: var(--error);
    background: var(--error-claro);
    padding: 10px 14px;
    border-radius: var(--radio-peq);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 600;
}

.confirmacion {
    background: var(--hoja-tinte);
    color: var(--hoja-texto);
    padding: 10px 14px;
    border-radius: var(--radio-peq);
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin: 1rem 0;
}

/* ========== BUSCADOR ========== */
.buscador-wrap {
    position: relative;
}

.resultados-producto {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--crema);
    border: 2px solid var(--borde);
    border-radius: 16px;
    box-shadow: var(--sombra-tarjeta);
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;
}

.resultado-item {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    border-bottom: 1px solid var(--divisor);
    cursor: pointer;
    transition: background 0.1s ease;
}

.resultado-item:last-child {
    border-bottom: none;
}

.resultado-item:hover {
    background: var(--hoja-tinte);
}

.resultado-item:active {
    background: var(--arena);
}

.resultado-vacio {
    padding: 14px;
    font-size: 14px;
    color: var(--texto-suave);
    text-align: center;
}

.producto-elegido {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--hoja-texto);
    font-weight: 700;
    display: none;
    background: var(--hoja-tinte);
    padding: 5px 12px;
    border-radius: var(--radio-pildora);
}

/* ========== AVISO COSTEO ========== */
.aviso-costeo {
    background: var(--error);
    color: white;
    border-radius: var(--radio-tarjeta);
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 1rem auto 0;
    max-width: 360px;
    text-align: center;
    box-shadow: var(--sombra-tarjeta);
}

/* ========== FORM-NUEVO (mini-formularios inline, si se usan) ========== */
.form-nuevo {
    background: var(--miel-tinte);
    border: 1.5px solid var(--miel);
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    margin-top: 10px;
}

.form-nuevo label {
    margin-top: 0.75rem;
}
.form-nuevo label:first-child {
    margin-top: 0;
}

.form-nuevo-error {
    color: var(--error);
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    min-height: 16px;
}

.form-nuevo-botones {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.form-nuevo-botones button {
    flex: 1;
    padding: 12px;
    font-size: 14.5px;
}

.btn-guardar-nuevo {
    background: var(--miel);
    color: var(--on-miel);
}

.btn-cancelar-nuevo {
    background: var(--crema);
    border: 2px solid var(--borde);
    color: var(--texto);
    box-shadow: none;
}

/* ========== CHIPS GENÉRICOS ========== */
.chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radio-pildora);
    padding: 3px 9px;
}

.chip-hoja {
    background: var(--hoja-tinte);
    color: var(--hoja-texto);
}

.chip-sku {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    background: var(--hoja-tinte);
    color: var(--hoja-texto);
    border-radius: 8px;
    padding: 2px 7px;
}

/* ========== TARJETA DE FORMULARIO ==========
   Envoltura estándar para los campos de un formulario sencillo (altas de
   catálogo, movimientos, gastos) — mismo lenguaje visual que las tarjetas
   de "Registrar venta" (fondo arena, radio de tarjeta), para que todos los
   formularios del sistema se vean consistentes entre sí. */
.tarjeta-formulario {
    background: var(--arena);
    border-radius: var(--radio-tarjeta);
    padding: 16px 18px;
    margin-top: 18px;
}
.tarjeta-formulario label:first-child { margin-top: 0; }

/* ========== PAR DE CAMPOS RESPONSIVO ==========
   Un formulario de una sola columna se ve bien en celular, pero un solo
   campo por renglón en una pantalla ancha de escritorio se ve "estirado"
   y desperdicia espacio. .par-campos empareja 2 campos relacionados
   (Estado/Municipio, Costo/Precio, etc.) en el mismo renglón SOLO a
   partir de escritorio (≥700px) — en celular sigue apilado, un campo por
   renglón, exactamente como antes. Cada campo va envuelto en su propio
   <div> (mismo patrón que .fila-2/.presentacion), para que la pareja
   quede alineada en vez de que las etiquetas y los inputs se entrevereen. */
.par-campos { display: block; }
.par-campos > div + div { margin-top: 0; }
@media (min-width: 700px) {
    .par-campos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
        align-items: start;
    }
}

/* ========== MODAL DE CONFIRMACIÓN (resumen antes de guardar) ==========
   Compartido entre formularios sencillos (nuevo_movimiento.php, gasto.php,
   ...) que piden confirmar con un resumen legible antes de enviar. No usa
   los nombres .modal-overlay/.modal-panel/.modal-cabecera a propósito —
   esos ya los usa venta.php para su propio modal de cobro, con otro
   contenido (grid de forma de pago) — nombres distintos evitan cualquier
   confusión entre los dos. */
.resumen-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.55);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.resumen-modal-panel {
    background: var(--crema);
    border-radius: var(--radio-tarjeta);
    padding: 24px 22px;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--sombra-tarjeta);
}
.resumen-modal-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.resumen-modal-cabecera span { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 20px; }
.resumen-modal-cabecera button {
    background: var(--arena); border: none; box-shadow: none; padding: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: var(--tinta); cursor: pointer;
}
.resumen-modal-cabecera button:hover { background: var(--divisor); }

.resumen-modal-acciones { display: flex; gap: 10px; margin-top: 20px; }
.resumen-modal-acciones .btn-resumen-confirmar { margin-top: 0; flex: 1; }
.btn-resumen-cancelar {
    flex: 1;
    padding: 14px;
    background: var(--crema);
    border: 2px solid var(--borde);
    color: var(--texto);
    box-shadow: none;
    font-size: 16px;
}
.resumen-monto { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 36px; text-align: center; margin-bottom: 4px; color: var(--miel-oscura); }
.resumen-monto.entrada { color: var(--hoja-oscura); }
.resumen-monto.salida { color: var(--error); }
.resumen-tipo-chip {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texto-suave);
    margin-bottom: 18px;
}
.resumen-detalle { background: var(--arena); border-radius: var(--radio-peq); padding: 0 16px; margin-top: 10px; }
.resumen-detalle:first-of-type { margin-top: 0; }
.resumen-linea { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--divisor); font-size: 14px; }
.resumen-linea:last-child { border-bottom: none; }
.resumen-linea .etiqueta { color: var(--texto-secundario); font-weight: 600; flex-shrink: 0; }
.resumen-linea .valor { font-weight: 700; text-align: right; }
.btn-resumen-confirmar { width: 100%; margin-top: 20px; padding: 14px; background: var(--miel); color: var(--on-miel); font-size: 16px; box-shadow: var(--sombra-tarjeta); }

/* ========== SIDEBAR DE ESCRITORIO ==========
   Navegación persistente a la izquierda a partir de 1024px, agregada el 26
   de agosto de 2026 a partir de una maqueta de Edgar
   ("Bee Principal - escritorio (standalone).html"). En celular no existe
   -- la navegación sigue siendo el menú de index.php, tal cual estaba, a
   petición explícita de Edgar ("en celular me encanta como está"). Cada
   página real incluye `nav_lateral.php` justo después de
   `<body class="con-sidebar">` y envuelve el resto de su contenido en un
   `<div class="contenido-principal">` (con las clases de ancho de más
   abajo encima, si aplica) -- `body.con-sidebar` es lo único que activa el
   layout de flex a partir de 1024px; en celular es un body normal, sin
   cambios de comportamiento. login.php/setup.php NO usan esto, todavía no
   hay sesión con la que armar el sidebar. */
body.con-sidebar { }
@media (min-width: 1024px) {
    body.con-sidebar {
        display: flex;
        align-items: flex-start;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .sidebar-escritorio {
        display: flex;
        flex-direction: column;
        width: 280px;
        flex-shrink: 0;
        /* height exacto de la ventana + overflow interno, no min-height: con
           min-height el panel crecia hasta la altura de la pagina, y entonces
           el margin-top:auto del bloque de usuario lo empujaba al final del
           DOCUMENTO en vez del final del panel visible -- en una laptop nunca
           se veian juntos el logo de arriba y la firma de abajo. Con height
           fijo el panel es la ventana y, si el menu no cabe, hace scroll
           dentro de su propia franja oscura. */
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        position: sticky;
        top: 0;
        background: var(--marco);
        color: var(--marco-texto);
        padding: 28px 20px;
    }
    .contenido-principal {
        flex: 1;
        min-width: 0;
        padding: 34px clamp(24px, 3vw, 44px) 64px;
    }

    /* El contenido se centra dentro del espacio blanco que le queda al lado
       del sidebar (30 de agosto de 2026, a petición de Edgar) -- la barra
       azul se queda pegada a la izquierda, pero lo demás ya no vive pegado
       a su borde. El max-width de cada página (aquí abajo o en su propio
       <style>) sigue mandando: la línea de texto o la tabla no se estira
       de más, solo se centra en el sobrante. */
    body.con-sidebar .contenido-principal,
    body.con-sidebar .contenido-principal.pagina-simple {
        margin-left: auto;
        margin-right: auto;
    }

    /* Encabezado de pagina: titulo mas grande y con aire debajo, como en la
       maqueta de escritorio. */
    body.con-sidebar h1 {
        font-size: 32px;
        margin-bottom: 0.35rem;
    }

    /* La barra superior duplicaba lo que ya dice el sidebar (quien esta
       registrando) y metia un boton "Volver" pesado arriba del titulo. En
       escritorio se queda solo el volver, en version discreta y sin pastilla,
       para poder subir un nivel dentro de una seccion. */
    body.con-sidebar .barra-superior {
        margin-bottom: 6px;
    }
    body.con-sidebar .usuario-corto {
        display: none;
    }
    /* "Volver" al menu principal tampoco tiene sentido en escritorio: el menu
       es el sidebar, y desde el 26 de agosto de 2026 index.php redirige a
       venta.php en pantallas grandes. Los "volver" que suben un nivel dentro
       de una seccion (a productos.php, a cajas.php, etc.) si se quedan. */
    body.con-sidebar .barra-superior a.volver[href="index.php"] {
        display: none;
    }
    body.con-sidebar .barra-superior a.volver {
        background: transparent;
        padding: 0;
        font-size: 12.5px;
        color: var(--texto-secundario);
    }
    body.con-sidebar .barra-superior a.volver:hover {
        color: var(--texto);
        filter: none;
    }

    /* Separacion entre el encabezado (titulo + bajada) y el contenido. */
    body.con-sidebar .bajada {
        margin-bottom: 22px;
    }
}
@media (max-width: 1023.98px) {
    .sidebar-escritorio { display: none; }
}

/* El logo del cliente, en grande. Va sobre placa blanca y no al aire porque
   un logo con texto oscuro desaparece sobre el navy, y el logo lo sube cada
   cliente desde Configuracion > Negocio: no se puede saber de que color es.
   max-height en vez de height: un logo cuadrado y uno alargado caben igual. */
.sidebar-marca {
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; border-radius: var(--radio); padding: 12px 14px;
    min-height: 72px; margin-bottom: 24px; text-decoration: none;
}
.sidebar-marca img { display: block; max-height: 48px; max-width: 100%; width: auto; }

.sidebar-link { display: flex; align-items: center; gap: 12px; text-decoration: none; border-radius: var(--radio); padding: 15px 16px; margin-bottom: 10px; transition: filter .15s ease, background .15s ease; }
.sidebar-principal { background: var(--miel); color: var(--on-miel); box-shadow: none; }
.sidebar-principal .titulo { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 17px; }
.sidebar-principal .subtitulo { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .82); margin-top: 3px; }
.sidebar-principal:hover { background: var(--miel-oscura); color: #FFFFFF; filter: none; }
.sidebar-principal:hover .subtitulo { color: #FFFFFF; }
.sidebar-secundario { border: 1.5px solid rgba(255,255,255,.25); color: var(--marco-texto); }
.sidebar-secundario .titulo { font-weight: 700; font-size: 15px; }
.sidebar-secundario:hover, .sidebar-secundario.activo { background: rgba(255,255,255,.08); }

.sidebar-seccion { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.4); margin: 22px 16px 10px; }

.sidebar-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: rgba(255,255,255,.75); font-size: 14.5px; font-weight: 600; padding: 11px 16px; border-radius: 10px; margin-bottom: 3px; }
.sidebar-item:hover { background: rgba(255,255,255,.06); color: var(--marco-texto); }
.sidebar-item.activo { background: rgba(255,255,255,.10); color: var(--miel); box-shadow: inset 2px 0 0 var(--miel); }
/* Iconos de línea del menú (iconos.php): toman el color del texto, así que
   siguen solos el estado activo / hover / modo oscuro. */
.sidebar-link .ico, .sidebar-item .ico { flex-shrink: 0; opacity: .9; }
.sidebar-link .txt { display: block; min-width: 0; }
.sidebar-item.activo .ico { opacity: 1; }

.sidebar-usuario { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-usuario .avatar { width: 34px; height: 34px; border-radius: 50%; background: #0F766E; color: white; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-usuario .nombre { font-size: 13px; font-weight: 700; color: var(--marco-texto); }
.sidebar-usuario .rol { font-size: 11px; color: rgba(255,255,255,.45); }
.sidebar-salir { display: block; text-align: center; margin-top: 12px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); text-decoration: none; }
.sidebar-salir:hover { color: var(--marco-texto); }

/* Firma de autor al pie del menu (ver nav_lateral.php). 9.5px es el minimo que
   fija el manual de marca; mas chico ya no se lee. */
.sidebar-autor { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-autor svg, .sidebar-autor img { flex-shrink: 0; width: auto; }
.sidebar-autor span { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 1.5; }
.sidebar-autor .punto { color: #D97706; }

/* ========== BOTÓN DE MODO OSCURO (27 de septiembre de 2026) ==========
   Un solo botón flotante, inyectado por JS desde pwa_meta.php -- así llega
   a las 47 pantallas reales sin tener que tocar el HTML de cada una (ni el
   sidebar, que en celular no se ve, ni ningún topbar propio de cada
   pantalla). Redondo, fijo arriba a la derecha, por debajo de cualquier
   modal (z-index 100, ver .resumen-modal-overlay) para que nunca lo tape. */
.boton-tema {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--borde);
    background: var(--crema);
    color: var(--texto);
    box-shadow: var(--sombra-tarjeta);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease;
}
.boton-tema:hover { background: var(--arena); }
.boton-tema .icono-sol { display: none; }
:root[data-theme="dark"] .boton-tema .icono-luna { display: none; }
:root[data-theme="dark"] .boton-tema .icono-sol { display: block; }
@media (min-width: 1024px) {
    /* En escritorio, con el sidebar fijo de 280px a la izquierda, el botón
       se sube un poco para no competir visualmente con el borde superior
       del contenido de página. */
    .boton-tema { top: 18px; right: 22px; }
}

/* ========== BARRA DE CARGA (28 de septiembre de 2026) ==========
   Aviso visual de que la pantalla SÍ está cargando -- pedido por Edgar,
   pensando en el hosting compartido + datos móviles, donde a veces tarda
   y se siente "congelado". Inyectada por JS desde pwa_meta.php, mismo
   criterio que .boton-tema. Encima de todo lo demás (incluidos los
   modales, z-index 100) para que se note sin importar qué había en
   pantalla al momento de navegar. */
.barra-carga {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--miel);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: width .3s ease, opacity .15s ease;
}
.barra-carga.activa { opacity: 1; }

/* ========== MAESTRO-DETALLE DE CONFIGURACIÓN ==========
   Solo en escritorio (≥1024px, igual que el sidebar de arriba): la lista
   de las 5 secciones (`nav_configuracion.php`) queda fija a la izquierda
   del contenido de cada `configuracion_*.php`/`respaldos.php`, para saltar
   entre secciones sin volver al hub de tarjetas de `configuracion.php` (que
   sigue siendo el punto de entrada, en celular y escritorio). En celular
   `.config-maestro-detalle` es un bloque normal de una columna -- la lista
   ni se incluye ahí (los sub-nav solo se agregan dentro del bloque
   `@media(min-width:1024px)` de cada página). */
/* La documentación de arriba decía "en celular no se ve", pero nada lo
   ocultaba de verdad: .config-lista solo tenía reglas dentro del
   @media(min-width:1024px) de abajo, así que en celular el <nav> de
   nav_configuracion.php se pintaba con el estilo default del navegador
   (enlaces azules subrayados en línea) en vez de desaparecer -- además
   de empujar la página a scroll horizontal si el texto no cabía. Regla
   base explícita para que sí desaparezca hasta que el media query de
   abajo la vuelva a mostrar en escritorio. */
.config-lista { display: none; }

@media (min-width: 1024px) {
    .config-maestro-detalle {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 26px;
        align-items: start;
        margin-top: 18px;
    }
    .config-lista {
        display: flex;
        flex-direction: column;
        gap: 3px;
        background: var(--arena);
        border-radius: var(--radio-tarjeta);
        padding: 10px;
        position: sticky;
        top: 22px;
    }
    .config-lista-item {
        display: block;
        text-decoration: none;
        color: var(--texto);
        font-weight: 700;
        font-size: 13.5px;
        padding: 11px 14px;
        border-radius: 12px;
    }
    .config-lista-item:hover { background: rgba(17,24,39,.05); }
    .config-lista-item.activo { background: var(--marco); color: var(--miel); }
}

/* ========== ANCHO DE PÁGINA (formularios, listas, directorios, catálogos) ==========
   Antes cada página fijaba su propio `body { max-width: 460px }` a mano, y solo
   la mitad (las que además usan .par-campos) agregaba el salto a 640px en tablet
   — el resto (Negocio, Cajas, Formas de pago, Respaldos, Usuarios, Agregar
   información, directorios, catálogos) se quedaba fijo en 460px sin importar qué
   tan ancha fuera la pantalla. Edgar lo reportó el 26 de agosto de 2026: en
   escritorio esas pantallas se veían "chiquitas", perdidas en medio de todo el
   espacio disponible (a diferencia de venta/gasto/resumen/cajas, que sí tienen su
   propio layout ancho a partir de 1024px). Centralizado aquí con un tercer
   escalón para escritorio — dos anchos distintos según el tipo de contenido:
   `.pagina-ancha` para formularios/listas de una sola columna (Negocio,
   Respaldos — no necesitan más que respirar) y `.pagina-muy-ancha` para tablas y
   parrillas de tarjetas (Usuarios, Cajas, Formas de pago, categorías,
   directorios, catálogos, los hubs de tarjetas) para que quepan sin scroll
   horizontal o en varias columnas. Login/setup no usan esta clase a propósito:
   su tarjeta de acceso se queda angosta y centrada sin importar el ancho de
   pantalla. */
.pagina-simple {
    max-width: 460px;
    margin: 0 auto;
}
@media (min-width: 700px) {
    .pagina-simple {
        max-width: 640px;
    }
}
@media (min-width: 1024px) {
    .pagina-simple.pagina-ancha {
        max-width: 860px;
    }
    .pagina-simple.pagina-muy-ancha {
        max-width: 1400px;
    }
    /* Dentro de .contenido-principal (junto al sidebar) el ancho ya no se
       centra contra toda la pantalla, sino contra el espacio que le queda
       al lado del sidebar -- por eso aquí NO se repite `margin: 0 auto`
       fuera de esta regla: .contenido-principal ya hace de contenedor
       flex y el margin:auto de arriba sigue centrando dentro de él. */
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    body {
        padding: 18px;
    }

    h1 {
        font-size: 24px;
    }

    .caja {
        padding: 1.5rem 1rem;
    }
}


/* ============================================================
   PANTALLAS NUEVAS (27 de agosto de 2026)
   Mi negocio (antes "Agregar informacion"), Metricas, Usuarios y
   Configuracion. Todo mobile-first: una columna en celular, parrilla a
   partir de 1024px. No hay estilos nuevos dentro de los .php: viven aqui
   para que las cuatro pantallas envejezcan juntas.
   ============================================================ */

/* ---------- Encabezado con control de rango ---------- */
.metricas-encabezado { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.segmentado { display: flex; flex-wrap: wrap; gap: 4px; background: var(--arena); border-radius: var(--radio-boton); padding: 4px; align-self: flex-start; }
/* .segmentado envuelve tanto pestañas de navegación real (<a>, ej. Costeo
   Productos/Insumos/Parámetros) como pestañas que solo cambian con JS
   (<button>, ej. configuracion_categorias.php, resumen.php Ventas/Gastos) --
   antes solo el selector "a" tenía estilo, así que un <button> dentro de
   .segmentado se veía sin pintar y sin marcar cuál está activa. */
.segmentado a,
.segmentado button {
    padding: 9px 16px; border-radius: var(--radio-pildora); font-size: 13px; font-weight: 700;
    color: var(--texto-secundario); text-decoration: none; background: transparent; box-shadow: none;
}
.segmentado a:hover,
.segmentado button:hover:not(:disabled) { background: rgba(20, 20, 20, .08); color: var(--texto); }
.segmentado a.activo,
.segmentado button.activo { background: var(--marco); color: var(--marco-texto); }

/* ========== TABLAS DE CAPTURA EN CELULAR (30 de agosto de 2026) ==========
   Gastos fijos, maquinaria e ingredientes son filas de varios campos
   (grid, no <table>) que en celular se aplastaban: columnas de 70-100px con
   inputs ilegibles y el encabezado partido en dos renglones. En vez de
   volverlas tarjetas apiladas (eso reordena cada fila verticalmente y hace
   más lento capturar muchas), se deja la fila intacta con su ancho real y
   se vuelve horizontalmente deslizable -- con la primera columna (el
   nombre/concepto) fija, para saber qué fila es cuál sin desplazarse. Se
   activa envolviendo la tabla en `.tabla-movil-scroll` y agregando
   `.col-fija` a la primera celda de cada fila (encabezado incluido). */
@media (max-width: 700px) {
    .tabla-movil-scroll {
        overflow-x: auto;
        margin: 0 -18px;
        padding: 0 18px;
        -webkit-overflow-scrolling: touch;
    }
    .tabla-movil-scroll .cabecera-gastos,
    .tabla-movil-scroll .fila-gasto,
    .tabla-movil-scroll .fila-linea,
    .tabla-movil-scroll .fila-linea-encabezado {
        min-width: 560px;
    }
    .tabla-movil-scroll .col-fija {
        position: sticky;
        left: 0;
        background: var(--arena);
        box-shadow: 4px 0 6px -4px rgba(17, 24, 39, .15);
        z-index: 2;
    }
}

/* Input de archivo nativo (subir logo): sin esto se ve como el botón gris
   del navegador, fuera de lugar entre campos con el mismo tratamiento. */
input[type="file"] {
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--crema);
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--on-miel);
    background: var(--miel);
    border: none;
    border-radius: var(--radio-boton);
    padding: 8px 14px;
    margin-right: 12px;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
    background: var(--miel-oscura);
    color: #FFFFFF;
    filter: none;
}

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { background: var(--crema); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra-suave); }
.kpi-oscuro { background: var(--marco); color: var(--marco-texto); }
.kpi .etiqueta { font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--etiqueta); }
.kpi-oscuro .etiqueta { color: rgba(255, 251, 242, .6); }
.kpi .cifra { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 27px; line-height: 1; margin-top: 10px; }
.kpi-oscuro .cifra { color: var(--miel); }
.kpi .delta { font-size: 12px; font-weight: 700; margin-top: 7px; }
.kpi .delta.sube { color: var(--hoja); }
.kpi .delta.baja { color: var(--error); }
.kpi .delta.neutro { color: var(--texto-secundario); font-weight: 600; }
.kpi-oscuro .delta.sube { color: #8FD8C4; }
.kpi-oscuro .delta.baja { color: #F2A98F; }
.kpi-oscuro .delta.neutro { color: rgba(255, 251, 242, .6); }

/* ---------- Paneles ---------- */
.panel { background: var(--crema); border-radius: var(--radio-tarjeta); padding: 20px 22px; margin-top: 14px; box-shadow: var(--sombra-suave); }
.panel-cabecera { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel-titulo { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 19px; }
.panel-nota { font-size: 12.5px; color: var(--texto-secundario); }
.panel-enlace { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--hoja); text-decoration: none; }
.panel-enlace:hover { color: var(--hoja-oscura); }
.panel-pie { font-size: 12px; color: var(--texto-secundario); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divisor); line-height: 1.5; }
.panel .vacio { font-size: 13px; color: var(--texto-secundario); margin-top: 12px; }
.rojo { color: var(--error); }
.rejilla-paneles { display: block; }

/* ---------- Grafica de columnas ---------- */
.grafica { display: flex; align-items: flex-end; gap: 4px; height: 190px; margin-top: 18px; }
.grafica .columna { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
.grafica .parte-costo { width: 100%; background: var(--marco); border-radius: 5px 5px 0 0; }
.grafica .parte-utilidad { width: 100%; background: #7FB8AE; border-radius: 0 0 5px 5px; }
.grafica .etq { font-size: 9.5px; color: var(--texto-suave); }

/* ---------- Barras horizontales ---------- */
.lista-barras { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.barra-datos { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.barra-nombre { font-weight: 700; }
.barra-monto { margin-left: auto; font-weight: 700; }
.barra-pct { font-size: 12px; color: var(--texto-suave); width: 42px; text-align: right; }
.barra-pista { height: 7px; border-radius: var(--radio-pildora); background: var(--arena); margin-top: 6px; overflow: hidden; }
.barra-pista span { display: block; height: 100%; border-radius: var(--radio-pildora); background: var(--marco); }

/* ---------- Listas de filas ---------- */
.lista-filas { display: flex; flex-direction: column; margin-top: 10px; }
.fila-producto, .fila-simple { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--divisor); }
.fila-texto { flex: 1; min-width: 0; }
.fila-nombre { display: block; font-size: 13.5px; font-weight: 700; }
.fila-simple .fila-nombre { flex: 1; }
.fila-sub { display: block; font-size: 11.5px; color: var(--texto-secundario); margin-top: 1px; }
.fila-cifra { font-size: 14px; font-weight: 700; white-space: nowrap; }
.fila-producto .fila-cifra { color: var(--hoja); }
.fila-pct { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }

/* ---------- Aviso de metricas ---------- */
.aviso-metricas {
    display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
    background: var(--miel-tinte); border-radius: var(--radio-tarjeta); padding: 18px 22px; margin-top: 14px;
}
.aviso-titulo { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 18px; }
.aviso-texto { font-size: 12.5px; color: var(--texto-secundario); margin-top: 3px; line-height: 1.5; }
.aviso-boton {
    background: var(--tinta); color: var(--miel); border-radius: var(--radio-boton);
    padding: 11px 22px; font-size: 13.5px; font-weight: 700; text-decoration: none; flex-shrink: 0;
}
.aviso-boton:hover { background: #2B2B2B; color: var(--miel); filter: none; }

/* ---------- Mi negocio ---------- */
.tarjetas-negocio { display: block; }
.tarjeta-negocio {
    background: var(--crema); border-radius: var(--radio-tarjeta); padding: 18px 20px 16px;
    margin-top: 12px; box-shadow: var(--sombra-suave);
}
.tarjeta-negocio-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tarjeta-negocio .nombre { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.15; }
.tarjeta-negocio .sub { font-size: 12.5px; color: var(--texto-secundario); margin-top: 3px; }
.tarjeta-negocio .conteo { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 32px; line-height: 1; color: var(--marco); }
.tarjeta-negocio-acciones { display: flex; gap: 8px; margin-top: 18px; }
.btn-miel {
    flex: 1; text-align: center; background: var(--miel); color: var(--on-miel);
    border-radius: var(--radio-boton); padding: 11px; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.btn-miel:hover { background: var(--miel-oscura); color: #FFFFFF; filter: none; }
.btn-suave {
    background: var(--arena); color: var(--texto); border-radius: var(--radio-boton);
    padding: 11px 18px; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn-suave:hover { background: var(--arena); }
.tarjeta-produccion-oscura {
    display: flex; align-items: center; gap: 16px; background: var(--marco); color: var(--marco-texto);
    border-radius: var(--radio-tarjeta); padding: 18px 22px; margin-top: 14px; text-decoration: none;
}
.tarjeta-produccion-oscura:hover { background: var(--marco-oscuro); filter: none; }
.tarjeta-produccion-oscura .titulo { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.15; }
.tarjeta-produccion-oscura .subtitulo { display: block; font-size: 12.5px; color: rgba(255, 251, 242, .6); margin-top: 3px; }
.tarjeta-produccion-oscura .chevron { margin-left: auto; font-size: 20px; color: var(--miel); }

/* ---------- Usuarios ---------- */
.lista-usuarios { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.tarjeta-usuario {
    background: var(--crema); border-radius: var(--radio); padding: 14px 18px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    box-shadow: var(--sombra-suave);
}
.tarjeta-usuario .avatar-usuario {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
    background: #0F766E;
}
.tarjeta-usuario.es-admin .avatar-usuario { background: var(--marco); }
.tarjeta-usuario.sin-finanzas .avatar-usuario { background: #7FB8AE; }
.tarjeta-usuario .datos { flex: 1; min-width: 140px; }
.tarjeta-usuario .nombre-usuario { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.tarjeta-usuario .login-usuario { font-size: 12.5px; color: var(--texto-suave); margin-top: 1px; }
.tarjeta-usuario .permisos { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-permiso { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--radio-pildora); background: var(--hoja-tinte); color: var(--hoja-oscura); }
.chip-permiso.chip-sin-acceso { background: var(--error-claro); color: var(--error); }
.tarjeta-usuario .editar-usuario { font-size: 13px; font-weight: 700; color: var(--hoja); text-decoration: none; }
.tarjeta-usuario.inactivo { opacity: .6; }

/* ---------- Configuracion como lista ---------- */
.lista-ajustes { background: var(--crema); border-radius: var(--radio-tarjeta); overflow: hidden; margin-top: 18px; box-shadow: var(--sombra-suave); }
.ajuste { display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; color: var(--texto); border-top: 1px solid var(--divisor); }
.ajuste:first-child { border-top: none; }
.ajuste:hover { background: var(--arena); }
.ajuste .texto { flex: 1; min-width: 0; }
.ajuste .titulo { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.2; }
.ajuste .sub { display: block; font-size: 12.5px; color: var(--texto-secundario); margin-top: 2px; }
.ajuste .estado { font-size: 12.5px; color: var(--texto-secundario); text-align: right; }
.ajuste .chevron { font-size: 18px; color: var(--hoja); flex-shrink: 0; }

/* En escritorio (2 de septiembre de 2026): la lista de ajustes era una
   sola columna angosta -- 6 renglones apilados dentro de una tarjeta de
   860px, con toda la pantalla ancha alrededor sin usar (justo lo que se
   ve en la captura: la tarjeta ocupa una fracción chica del monitor).
   Cada .config-detalle YA aprovecha el ancho completo con su propio
   maestro-detalle (nav_configuracion.php a la izquierda); el hub de
   Configuración es la única pantalla de este grupo que se quedó como
   lista vertical. Ahora se convierte en una parrilla de tarjetas
   (auto-fit, así que 2 o 3 por renglón según el ancho disponible), mismo
   lenguaje que ya usan las tarjetas de Catálogos.
*/
@media (min-width: 720px) {
    .lista-ajustes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 14px;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .ajuste {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        border-top: none;
        border-radius: var(--radio-tarjeta);
        background: var(--crema);
        box-shadow: var(--sombra-suave);
        padding: 18px 42px 18px 20px;
    }
    .ajuste .estado { order: 3; margin-top: 8px; text-align: left; font-weight: 700; color: var(--hoja-texto); }
    .ajuste .chevron { position: absolute; top: 19px; right: 18px; }
}

@media (max-width: 560px) {
    .kpis { grid-template-columns: 1fr; }
    .grafica { height: 150px; gap: 2px; }
    .grafica .etq { display: none; }
    .ajuste .estado { display: none; }
}

@media (min-width: 1024px) {
    .metricas-encabezado { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .metricas-encabezado h1 { margin-bottom: 0; }
    .kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .rejilla-paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
    .rejilla-paneles .panel { margin-top: 0; }
    .aviso-metricas { flex-direction: row; align-items: center; justify-content: space-between; }
    /* auto-fit en vez de 3 columnas fijas (2 de septiembre de 2026) -- con
       4 tarjetas (Productos/Proveedores/Sucursales/Clientes) un grid de 3
       deja la 4a sola en su propio renglon, ocupando solo un tercio del
       ancho con todo el resto del renglon vacio. Con auto-fit las 4 caben
       en una sola fila pareja en pantallas anchas (o 2, o 3, segun el
       espacio), sin que ninguna quede huerfana. */
    .tarjetas-negocio { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
    .tarjetas-negocio .tarjeta-negocio { margin-top: 0; }
    .tarjeta-produccion-oscura { max-width: 560px; }
}


/* ============================================================
   DIRECTORIOS EN FILAS (29 de agosto de 2026)

   Productos, proveedores y sucursales eran tarjetas en parrilla. Con 82
   productos y 20 sucursales eso son 100+ cajas de alturas distintas, filas
   dentadas y muchisimo scroll para encontrar una cosa. Edgar pidio filas
   compactas: una linea por registro, columnas alineadas, y en celular cada
   fila se vuelve un bloque apilado.

   Las tres pantallas comparten estas clases para que envejezcan juntas.
   ============================================================ */

/* El buscador de cada catalogo (productos/proveedores/sucursales/clientes,
   tambien Costeo) se estiraba al ancho completo del contenedor -- hasta
   1400px en pantallas grandes, una caja de busqueda absurdamente larga
   para una sola palabra. Se limita a un ancho razonable sin tocar el
   comportamiento en celular (ahi de todos modos el contenedor es angosto). */
@media (min-width: 700px) {
    #input-buscar { max-width: 420px; }
}

.directorio {
    background: var(--crema);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    margin-top: 16px;
}
.fila-dir {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--divisor);
}
.fila-dir:last-child { border-bottom: none; }
.fila-dir:hover { background: var(--arena); }
.fila-dir.inactivo { opacity: .55; }

.dir-principal { min-width: 0; }
.dir-nombre { font-size: 15px; font-weight: 600; }
.dir-sub {
    display: block;
    font-size: 12.5px;
    color: var(--texto-secundario);
    margin-top: 3px;
    line-height: 1.45;
}
/* La direccion se deja completa a dos renglones, no cortada con puntos
   suspensivos: Edgar la usa para ver que datos le faltan capturar. */
.dir-sub.direccion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dir-mono { font-size: 12.5px; color: var(--texto-secundario); }

.dir-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radio-pildora);
    background: var(--arena);
    color: var(--texto-secundario);
    white-space: nowrap;
}
.dir-chip.verde { background: var(--hoja-tinte); color: var(--hoja-texto); }
.dir-chip.roja { background: var(--error-claro); color: var(--error); }
.dir-chip.miel { background: var(--miel-tinte); color: var(--miel-texto); }

.dir-marcas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dir-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dir-acciones a { font-size: 13px; font-weight: 600; white-space: nowrap; }

.encabezado-dir { display: none; }
.conteo-dir { font-size: 12.5px; color: var(--texto-secundario); }
/* Vivia dentro del <style> de cada directorio; se subio aqui al quitarlos. */
.sin-resultados { font-size: 14px; color: var(--texto-secundario); text-align: center; margin: 2rem 0; }

/* Chips de filtro (Todos/Activos/Inactivos, Sin validar/Validados...).
   Vivía duplicado dentro del <style> de costeo_productos.php/costeo_insumos.php;
   se centralizó aquí el 5 de septiembre de 2026 al extenderlo también a
   productos.php/proveedores.php/sucursales.php (filtro Activos/Inactivos/Todos,
   por default solo Activos, para no ensuciar la vista con catálogo dado de baja). */
.filtro-tipo { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip-filtro {
    padding: 9px 16px; border-radius: var(--radio-pildora); background: var(--superficie);
    border: 1px solid var(--borde); color: var(--texto-secundario); font-size: 13px; font-weight: 700;
    box-shadow: none; cursor: pointer;
}
.chip-filtro.activo { background: var(--miel); color: var(--on-miel); border-color: var(--miel); }

@media (min-width: 760px) {
    /* Tres columnas: datos elasticos, marcas (categoria, stock, inactivo) y
       acciones. Las dos ultimas al ancho de su contenido para que la columna
       del nombre se quede con todo el espacio que sobra. */
    .encabezado-dir,
    .fila-dir {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 18px;
        align-items: center;
    }
    .encabezado-dir {
        display: grid;
        padding: 10px 18px;
        background: var(--arena);
        border-bottom: 1px solid var(--divisor);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--etiqueta);
    }
    .encabezado-dir .der { text-align: right; }
    .dir-acciones { justify-content: flex-end; }
}

/* ============================================================
   DIRECTORIOS "PROD" (11 de septiembre de 2026, maquetas de Edgar)

   Segunda vuelta del patrón de arriba, para productos.php/
   proveedores.php/sucursales.php/clientes.php: conteo como chip junto
   al título, filtros y buscador en una sola fila, y botones de acción
   como pills en vez de links sueltos. Costeo → Insumos se queda con el
   patrón viejo de arriba (`.fila-dir`/`.dir-*`) a propósito, no entró en
   este rediseño -- por eso no se tocó nada de lo de arriba, esto es
   aparte.
   ============================================================ */

/* Encabezado con chip de conteo -- mismo comportamiento que
   `.metricas-encabezado` (columna en celular, fila en ≥1024px), nombre
   nuevo para que las pantallas de catálogo no tengan que saber que ese
   nombre "viene de Métricas". */
.metricas-encabezado, .catalogo-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
@media (min-width: 1024px) {
    .metricas-encabezado, .catalogo-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .metricas-encabezado h1, .catalogo-header h1 { margin-bottom: 0; }
}
.catalogo-meta { background: var(--arena); border-radius: var(--radio); padding: 8px 16px; text-align: right; line-height: 1; flex-shrink: 0; }
.catalogo-meta strong { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 21px; color: var(--texto); }
.catalogo-meta small { display: block; font-size: 11px; font-weight: 700; color: var(--texto-secundario); letter-spacing: .07em; text-transform: uppercase; margin-top: 3px; }

/* Filtros (Activos/Inactivos/Todos...) y buscador en una sola fila --
   `.chips-filtro` es alias de `.filtro-tipo` (mismo grupo de chips que ya
   usa Costeo), solo que aquí vive dentro de `.catalogo-filtros` junto al
   buscador en vez de en su propio renglón. */
.filtro-tipo, .chips-filtro { display: flex; gap: 8px; flex-wrap: wrap; }
.catalogo-filtros { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.catalogo-filtros .chips-filtro { margin-top: 0; }
.buscador-catalogo { flex: 1 1 220px; min-width: 220px; }
.buscador-catalogo input { margin-top: 0; }

/* Filas de 3 columnas por default (nombre+datos | chips | acciones) --
   productos.php necesita más columnas (precio/costo/stock aparte), gana
   el modificador `.con-precio` que reacomoda la rejilla sin tocar el
   resto de las páginas que se quedan con las 3 de siempre. */
.encabezado-prod, .fila-prod {
    display: grid;
    /* La columna de acciones a ancho FIJO (300px), no `auto` -- así
       siempre empieza en la misma X sin importar cuántos botones traiga
       esa fila en particular (antes una fila con 2 botones vs. una con 4
       arrancaba la columna en un punto distinto, y encima empujaba a la
       columna de categoría). 11 de septiembre de 2026, a petición de
       Edgar. */
    grid-template-columns: minmax(0, 2.2fr) 1fr 300px;
    gap: 14px;
    align-items: center;
    padding: 13px 18px;
}
.encabezado-prod { background: var(--arena); font-size: 10.5px; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--borde); }
.encabezado-prod .num { text-align: right; }
/* "Acciones" alineado a la izquierda de su celda, igual que los botones
   que tiene debajo (ver `.prod-acciones` más abajo) -- antes decía
   `.der` (derecha) de cuando esa columna era de ancho `auto` y los
   botones sí colgaban del borde derecho. */
.encabezado-prod .der { text-align: left; }

/* La última columna (Acciones) NO puede quedar en `auto` aquí --
   con columnas `fr` de por medio, un track `auto` se dimensiona según
   el contenido de CADA fila por separado (1 botón "Editar" vs. 2
   botones "Editar"+"Costeo"/"Costear", y el encabezado con solo la
   palabra "Acciones"), así que cada fila reparte el espacio sobrante
   entre las columnas `fr` de forma distinta y los encabezados
   Precio/Costo/Stock terminan sin alinear con sus datos (bug real
   reportado por Edgar el 11 de septiembre de 2026, con captura). Ancho
   fijo (180px, alcanza para los 2 botones a min-width:80px + gap) en
   vez de `auto` -- mismo criterio que ya se aplicó a la columna de
   Acciones de proveedores/sucursales/clientes ese mismo día. */
.encabezado-prod.con-precio, .fila-prod.con-precio { grid-template-columns: 2.2fr 1fr 0.9fr 0.9fr 0.7fr 180px; }

.fila-prod { border-bottom: 1px solid var(--divisor); transition: background .1s; }
.fila-prod:last-child { border-bottom: none; }
.fila-prod:hover { background: var(--miel-tinte); }
.fila-prod.inactivo { opacity: .55; }

.prod-id { min-width: 0; }
.prod-nombre { display: block; font-weight: 700; font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-sku, .prod-sub { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-sku { font-family: ui-monospace, Menlo, monospace; }
/* La dirección/contacto se deja completa a 2 renglones, no cortada con
   puntos suspensivos -- mismo criterio que ya tenía `.dir-sub.direccion`. */
.prod-sub.completo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Chips genéricos de la columna 2 -- categoría en productos.php, pero
   también género/edad/cumpleaños/cómo-te-conoció en clientes.php, o
   simplemente vacío en sucursales.php. Varios chips en la misma celda
   se envuelven con `.prod-chips`. */
.prod-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip-cat { display: inline-block; background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio-pildora); padding: 3px 10px; font-size: 11.5px; font-weight: 600; color: var(--texto-secundario); white-space: nowrap; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-precio { font-weight: 700; font-size: 14px; color: var(--texto); }
.prod-costo { font-size: 13.5px; color: var(--texto-secundario); }
.prod-costo.vacio { color: var(--texto-suave); font-style: italic; }
.prod-precio.vacio { color: var(--texto-suave); font-style: italic; font-weight: 500; font-size: 13px; }

.chip-stock { display: inline-block; padding: 3px 10px; border-radius: var(--radio-pildora); font-size: 11.5px; font-weight: 700; }
.chip-stock.ok { background: var(--hoja-tinte); color: var(--hoja-texto); }
.chip-stock.roja { background: var(--error-claro); color: var(--error); }

.prod-acciones { display: flex; gap: 6px; justify-content: flex-start; flex-wrap: wrap; }
.btn-mini { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; padding: 6px 13px; border-radius: var(--radio-boton); font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--borde); background: var(--crema); color: var(--texto); transition: background .12s, border-color .12s; white-space: nowrap; }
.btn-mini:hover { border-color: var(--texto); }
.btn-mini.mini-miel { background: var(--miel); border-color: var(--miel); color: var(--on-miel); }
.btn-mini.mini-miel:hover { background: var(--miel-oscura); color: #fff; border-color: var(--miel-oscura); }

/* Separador sutil entre "Editar" (primario, mini-miel) y los botones
   secundarios que le siguen en la misma fila -- con el ancho mínimo
   parejo de arriba, ayuda a distinguir de un vistazo la acción
   principal del resto cuando hay 3-4 botones seguidos. Solo aplica
   cuando mini-miel va PRIMERO (proveedores/sucursales/clientes) -- en
   productos.php "Editar" va sin relleno y "Costear"/"Costeo" es el
   mini-miel que le sigue, así que este selector no encuentra pareja ahí
   y no agrega separador de más. */
.btn-mini.mini-miel + .btn-mini { border-left: none; padding-left: 16px; position: relative; }
.btn-mini.mini-miel + .btn-mini::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    height: 16px; width: 1px;
    background: var(--borde);
    margin-left: -1px;
}

@media (max-width: 820px) {
    .encabezado-prod { display: none; }
    .fila-prod, .fila-prod.con-precio { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
    .prod-nombre, .prod-sku, .prod-sub { white-space: normal; }
    .fila-prod > .chip-cat, .fila-prod > .chip-stock, .fila-prod > .prod-chips { justify-self: start; }
    .prod-precio, .prod-costo { display: inline-block; text-align: left; font-size: 13px; }
    .prod-precio::before { content: "Precio "; font-weight: 500; color: var(--texto-secundario); font-size: 12px; margin-right: 2px; }
    .prod-costo::before { content: "· Costo "; font-weight: 500; color: var(--texto-secundario); font-size: 12px; margin-right: 2px; }
    .prod-precio.vacio::before, .prod-costo.vacio::before { color: var(--texto-suave); }
    .prod-acciones { justify-content: flex-start; padding-top: 6px; border-top: 1px solid var(--divisor); margin-top: 4px; }
    .prod-acciones .btn-mini { flex: 1; text-align: center; }
    /* El separador de punto/línea flotante no se lee bien en un botón a
       ancho completo -- se cambia por un borde real entre botones. */
    .btn-mini.mini-miel + .btn-mini { border-left: 1.5px solid var(--borde); padding-left: 12px; }
    .btn-mini.mini-miel + .btn-mini::before { display: none; }
}

/* ============================================================
   COSTEO -- Productos e Insumos al mismo lenguaje visual de los
   directorios de arriba (11 de septiembre de 2026, maqueta de Edgar).
   Reusa `.directorio`/`.encabezado-prod`/`.fila-prod`/`.chip-cat`/
   `.btn-mini` con dos variantes propias de grid (`.productos`/`.insumos`,
   cada una con más o distintas columnas que el resto de los catálogos).
   ============================================================ */
.aviso-pendientes {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px;
    background: var(--miel-tinte); border-radius: var(--radio-pildora); font-size: 12.5px; font-weight: 700; color: var(--miel-texto);
}
.aviso-pendientes::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--miel); flex-shrink: 0; }

.chip-cat.elaborado { background: var(--hoja-tinte); color: var(--hoja-texto); border-color: transparent; }
.chip-cat.validado { background: var(--hoja); color: #fff; border-color: transparent; }
.chip-cat.pendiente { background: var(--miel-tinte); color: var(--miel-texto); border-color: transparent; }
.chip-cat.roja { background: var(--error-claro); color: var(--error); border-color: transparent; }

.btn-mini.mini-hoja { background: var(--hoja); border-color: var(--hoja); color: #fff; }
.btn-mini.mini-hoja:hover { background: var(--hoja-oscura); border-color: var(--hoja-oscura); }
.btn-mini.confirmado { background: transparent; border-color: var(--borde); color: var(--texto-suave); cursor: default; }
.btn-mini.confirmado:hover { border-color: var(--borde); }

.btn-nuevo { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 12px 22px; border-radius: var(--radio-boton); background: var(--miel); color: var(--on-miel); font-weight: 700; font-size: 14px; text-decoration: none; border: none; cursor: pointer; }
.btn-nuevo:hover { background: var(--miel-oscura); color: #fff; }

/* --- Grid PRODUCTOS: # | Producto | SKU | Tipo | Estado | chevron --- */
.directorio.productos .encabezado-prod,
.directorio.productos .fila-prod {
    grid-template-columns: 56px 2.4fr 1.4fr 110px 130px 26px;
}
.directorio.productos .fila-prod { text-decoration: none; color: var(--texto); cursor: pointer; }
.directorio.productos .fila-filtros-costeo {
    display: none; grid-template-columns: 56px 2.4fr 1.4fr 110px 130px 26px; gap: 14px;
    padding: 8px 18px; background: var(--arena); border-bottom: 1px solid var(--borde);
}
.directorio.productos .fila-filtros-costeo input {
    margin-top: 0; padding: 6px 10px; font-size: 12.5px; font-weight: 600;
    border-radius: 6px; border: 1.5px solid var(--borde); background: var(--crema);
}
/* Mismo punto de quiebre que el resto de la fila (821px, ver el bloque
   @media(max-width:820px) más abajo) -- si no coincidieran exacto, entre
   700-820px la fila de filtros se vería como grid de 6 columnas encima
   de una lista ya apilada a una sola columna. */
@media (min-width: 821px) {
    .directorio.productos .fila-filtros-costeo { display: grid; }
}

.prod-num { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); }
.prod-pres { display: block; font-size: 11.5px; color: var(--texto-secundario); margin-top: 2px; }
.prod-sku-cell { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-chevron { font-size: 20px; color: var(--hoja); text-align: right; line-height: 1; font-weight: 300; }

/* --- Grid INSUMOS: Insumo | Costo vigente | Tipo | Estado | Acciones --- */
.directorio.insumos .encabezado-prod,
.directorio.insumos .fila-prod {
    /* Acciones a ancho fijo (130px, mismo criterio que Estado) en vez de
       `auto` -- mismo bug que se corrigió en productos.php el 11 de
       septiembre de 2026: con columnas `fr` de por medio, un track
       `auto` se dimensiona distinto según si la fila dice "Confirmar"
       (90px) o "✓ Confirmado" (113px), y el encabezado no coincide con
       ninguna de las dos -- 130px alcanza para el botón más ancho de
       los dos. */
    grid-template-columns: 2.4fr 1.2fr 110px 130px 130px;
}
.directorio.insumos .fila-prod.inactivo { opacity: .55; }
/* Toda la fila navega a editar_costeo_insumo.php (11 de septiembre de
   2026, a petición de Edgar -- mismo criterio que costeo_productos.php,
   ya no hay botón "Editar" aparte). El botón "Confirmar" adentro sigue
   siendo clicable por su cuenta (el JS intercepta el click con
   `e.target.closest('form')` antes de navegar). */
.directorio.insumos .fila-prod { cursor: pointer; }
/* "Sin precio" en rojo aquí a propósito (un insumo sin costo bloquea el
   costeo de cualquier receta que lo use) -- distinto del gris suave que
   ya usa `.prod-costo.vacio` en productos.php, donde un precio/costo
   faltante es solo informativo, no un bloqueo. */
.directorio.insumos .prod-costo.vacio { color: var(--error); }
.prod-costo .unidad { display: block; font-size: 11.5px; color: var(--texto-secundario); font-weight: 500; }

@media (max-width: 820px) {
    .directorio.productos .fila-prod,
    .directorio.insumos .fila-prod {
        grid-template-columns: 1fr;
    }
    .directorio.productos .fila-filtros-costeo { display: none; }
    .prod-sku-cell { white-space: normal; }
    .prod-chevron { display: none; }
    .directorio.insumos .prod-costo { text-align: left; }
    .directorio.insumos .prod-costo .unidad { display: inline; margin-left: 4px; }
}