/* ========================================
   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 ===
       --miel = mostaza del manual: el color de lo que se toca. Lleva
       SIEMPRE texto oscuro (--miel-texto), nunca blanco.
       --hoja = teal, la segunda familia, para enlaces y confirmaciones.
       Refinamiento del 11 de septiembre de 2026 (a petición de Edgar, "15-20%
       más sobrio/profesional"): mismos tonos, un punto menos saturados/menos
       claros -- ni los nombres de variable ni la dirección de marca
       cambiaron, solo los valores hex. */
    --miel: #D6A43A;
    --miel-oscura: #B0861F;
    --miel-tinte: #FBF3E0;
    --hoja: #1E5E58;
    --hoja-oscura: #154640;
    --hoja-texto: #154640;
    --hoja-tinte: #E7EDEB;
    --tinta: #1A1A1A;

    /* === MARCO OSCURO (sidebar y paneles oscuros) ===
       Navy del manual de marca, ligeramente más oscuro desde el refinamiento
       del 11 de septiembre de 2026. */
    --marco: #1B2438;
    --marco-oscuro: #131A2A;

    /* --papel es el fondo de la ventana; --crema es el de las tarjetas. Antes
       los dos eran el mismo crema y las tarjetas no se despegaban del fondo. */
    --papel: #F7F5F1;
    --crema: #FFFFFF;
    --arena: #EFEBE2;

    --miel-texto: #1A1A1A;
    --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 ===
       "Calido": redondo pero no de juguete. --radio-pildora se queda en 999px
       porque lo usan los chips y el segmentado, no los botones. Todos los
       demás bajaron un poco el 11 de septiembre de 2026 (esquinas menos
       redondas = más sobrio), y los botones que antes se pintaban en pill
       por overrides sueltos pasaron a usar --radio-boton (ver más abajo). */
    --radio-pildora: 999px;
    --radio-tarjeta: 12px;
    --radio-pantalla: 14px;
    --radio: 10px;
    --radio-peq: 8px;
    --radio-boton: 9px;
}

/* ========== 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: #FFFFFF;
    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. */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--tinta);
    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);
}

/* 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(--tinta);
    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;
}
.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(--tinta);
}

.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(--tinta); 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(--crema);
        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: block; 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(--miel-texto); 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: var(--miel-texto); 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(--crema); }
.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: block; 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(--crema); }
.sidebar-item.activo { background: rgba(255,255,255,.10); color: var(--miel); box-shadow: inset 2px 0 0 var(--miel); }

.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(--crema); }
.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(--crema); }

/* 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 { flex-shrink: 0; }
.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; }

/* ========== 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(--crema); }

/* ========== 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(--tinta);
    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(--crema); }
.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(--marco-oscuro);
    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: #E9E3D6; }
.tarjeta-produccion-oscura {
    display: flex; align-items: center; gap: 16px; background: var(--marco); color: var(--crema);
    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: #FBF7EF; }
.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: #FBF7EF; }
.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(--tinta); 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: #F6F0E4;
        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(--miel-texto); }
.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(--miel-texto); 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; }
}