/* Estilo simple y responsivo para las pantallas de personal (no-admin).
   No usa ningún framework externo, para no depender de internet en cada
   carga de página: todo el CSS vive en este único archivo. */

:root {
    --color-primario: #1d4ed8;
    --color-primario-oscuro: #1e3a8a;
    --color-fondo: #f3f4f6;
    --color-tarjeta: #ffffff;
    --color-texto: #111827;
    --color-texto-ayuda: #6b7280;
    --color-borde: #d1d5db;
    --color-error: #b91c1c;
    --color-exito: #15803d;
    /* Altura fija de .barra-superior, para que cualquier elemento que
       necesite "pegarse" justo debajo de ella (ej. .pv-ticket) sepa
       exactamente cuánto restarle al viewport, en vez de adivinar. */
    --altura-barra-superior: 64px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* --- Estructura general: rail de iconos a la izquierda (inspirado en la
   referencia de Siigo que mandó Gabriel el 16 de julio de 2026) + barra
   superior clara + contenido. --- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-shell__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Deja el espacio que antes ocupaba el sidebar dentro del flujo
       normal — ahora que .sidebar es "fixed" (ver abajo) y ya no empuja
       a sus hermanos, hay que dejarle el mismo margen a mano para que el
       contenido no quede debajo de él. */
    margin-left: 76px;
}

.sidebar {
    /* Antes el sidebar era un simple hijo del flex de .app-shell, así
       que se desplazaba hacia arriba junto con el resto de la página al
       hacer scroll (Gabriel, 17 de julio de 2026: "estos encabezados se
       mueven y se tapan cuando muevo el scroll"). "fixed" lo saca del
       flujo normal y lo deja pegado al viewport, siempre visible sin
       importar cuánto se baje la página — igual que la barra superior
       (.barra-superior, con "sticky" un poco más abajo). */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    flex-shrink: 0;
    width: 76px;
    background: var(--color-primario-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    overflow-y: auto;
}

.sidebar__marca {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    margin-bottom: 0.6rem;
}

.sidebar__enlace {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border-radius: 10px;
    color: #bfdbfe;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__enlace svg {
    flex-shrink: 0;
}

.sidebar__enlace:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar__enlace--activo {
    background: #fff;
    color: var(--color-primario-oscuro);
}

.sidebar__enlace--activo:hover {
    background: #fff;
    color: var(--color-primario-oscuro);
}

/* Divisores con etiqueta entre grupos de enlaces del menú lateral (ej.
   "Ventas", "Inventario", "Análisis"...) — agregado el 18 de julio de
   2026 porque el menú había crecido a más de 15 enlaces en una sola
   columna vertical sin ninguna separación, y Gabriel lo notó: "el menú
   lateral se ve como muy saturado". No cambia ningún comportamiento,
   solo agrupa visualmente los enlaces que ya existían (más el nuevo de
   "Gastos") en bloques más chicos y fáciles de escanear. */
.sidebar__grupo-titulo {
    width: 100%;
    text-align: center;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Grupo "Sistema" colapsable — agregado el 18 de julio de 2026 a pedido de
   Gabriel ("no es posible que esos 'grupos' que creaste fueran agrupados y
   se desplegaran a voluntad con un clic"). El botón reutiliza el mismo
   look de .sidebar__grupo-titulo (solo le quitamos los estilos por
   defecto de <button>) y le agregamos una flechita que gira al
   colapsar/expandir (ver core/sidebar.js). */
.sidebar__grupo-titulo--colapsable {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sidebar__grupo-titulo--colapsable:hover {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar__grupo-flecha {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.sidebar__grupo-titulo--colapsado .sidebar__grupo-flecha {
    transform: rotate(-90deg);
}

/* El <div id="sidebar-grupo-sistema"> envuelve los enlaces de "Sistema"
   solo para que el JS tenga un contenedor a quien ocultar — no debe
   comportarse como una caja aparte dentro del layout de columna del
   sidebar, por eso "display: contents" (los enlaces de adentro siguen
   siendo hijos directos, en flex, del <nav>). Cuando el JS lo colapsa
   (atributo "hidden"), ahí sí se oculta de verdad. */
.sidebar__grupo-contenido {
    display: contents;
}

.sidebar__grupo-contenido[hidden] {
    display: none;
}

.barra-superior {
    /* "sticky" en vez del flujo normal, por la misma razón que .sidebar
       de arriba: se queda pegada arriba del área de contenido mientras
       se hace scroll, en vez de desaparecer hacia arriba con el resto de
       la página. */
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--altura-barra-superior);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: var(--color-tarjeta);
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-texto);
    box-sizing: border-box;
}

.barra-superior__marca {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-texto);
}

.barra-superior__sede {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.barra-superior__sede-menu a {
    color: var(--color-primario);
    margin-right: 0.75rem;
    text-decoration: none;
}

.barra-superior__sede-menu a.activo,
.barra-superior__sede-menu a:hover {
    text-decoration: underline;
    color: var(--color-primario-oscuro);
}

.barra-superior__usuario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-texto-ayuda);
}

.form-en-linea {
    display: inline;
}

.enlace-boton {
    background: none;
    border: none;
    color: var(--color-primario);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.enlace-boton:hover {
    color: var(--color-primario-oscuro);
}

.enlace-boton--oscuro {
    color: var(--color-primario);
}

.enlace-boton--oscuro:hover {
    color: var(--color-primario-oscuro);
}

.contenido {
    /* Antes 960px: en monitores anchos dejaba franjas grises grandes a
       los lados incluso en pantallas de trabajo densas como el punto de
       venta (Gabriel, 17 de julio de 2026: "a los lados se ve un
       espacio generoso que está quedando subutilizado"). 1280px sigue
       centrando el contenido y dejando aire en los formularios angostos
       (que ya tienen su propio max-width más chico, como
       .tarjeta--formulario), pero le da mucho más espacio real a las
       pantallas de dos columnas como el punto de venta. */
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    width: 100%;
}

@media (max-width: 720px) {
    .sidebar {
        width: 60px;
    }

    .app-shell__main {
        margin-left: 60px;
    }

    .sidebar__enlace {
        font-size: 0;
    }

    .sidebar__enlace svg {
        width: 20px;
        height: 20px;
    }
}

.caja-centrada {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.tarjeta {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.detalles-plegable {
    margin-top: 1rem;
    border-top: 1px solid var(--color-borde);
    padding-top: 1rem;
}

.detalles-plegable summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primario-oscuro);
}

.detalles-plegable summary:hover {
    color: var(--color-primario);
}

.detalles-plegable .tabla {
    margin-top: 0.75rem;
}

.detalles-plegable pre {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 420px;
}

.tarjeta--login {
    width: 100%;
    max-width: 380px;
}

.tarjeta--aviso {
    border-left: 4px solid var(--color-primario);
}

h1 {
    margin-top: 0;
}

.texto-ayuda {
    color: var(--color-texto-ayuda);
    font-size: 0.9rem;
}

.acciones-secundarias {
    color: var(--color-texto-ayuda);
    font-size: 0.9rem;
    margin-top: -0.5rem;
}

.lista-errores-importacion {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.lista-errores-importacion li {
    margin-bottom: 0.35rem;
}

.campo {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campo label {
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.boton:active {
    transform: translateY(1px);
}

.boton:disabled,
.boton[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.boton--primario {
    background: var(--color-primario);
    color: #fff;
    width: 100%;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 10px rgba(29, 78, 216, 0.25);
}

.boton--primario:hover {
    background: var(--color-primario-oscuro);
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.08), 0 6px 16px rgba(29, 78, 216, 0.3);
}

.boton--secundario {
    background: #fff;
    color: var(--color-texto);
    border-color: var(--color-borde);
}

.boton--secundario:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.boton--peligro {
    /* Solo para el reinicio de datos (core/servicios_mantenimiento.py,
       18 de julio de 2026): la única acción de todo el sistema que borra
       información de verdad, sin poder deshacerla — se marca en rojo a
       propósito, distinto de boton--primario, para que nunca se confunda
       con un botón de guardar normal. */
    background: var(--color-error);
    color: #fff;
}

.boton--peligro:hover {
    background: #991b1b;
}

.boton--fantasma {
    background: transparent;
    color: var(--color-primario);
    border-color: transparent;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.boton--fantasma:hover {
    background: #eff6ff;
}

.lista-sedes {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
}

.tabla th,
.tabla td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-borde);
}

.mensajes {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.mensaje {
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.mensaje--error {
    background: #fee2e2;
    color: var(--color-error);
}

.mensaje--success {
    background: #dcfce7;
    color: var(--color-exito);
}

.mensaje--warning {
    /* Primer uso: aviso NO bloqueante de que una promoción quedó con
       precio por debajo del costo (promociones/views.py::crear_promocion,
       17 de julio de 2026) — ni error (rojo) ni éxito (verde), un tono
       ámbar intermedio para "revisa esto, pero se guardó igual". */
    background: #fef3c7;
    color: #92400e;
}

.mensaje--vista-previa {
    /* Primer uso: vista previa "antes -> después" al ajustar inventario
       (inventario/templates/inventario/ajuste.html, 19 de julio de 2026,
       a pedido de Gabriel) — mismo tono neutro/informativo que
       .mensaje--nota-interna, solo con nombre propio porque el propósito
       es distinto (mostrar un cálculo en vivo, no un dato guardado). */
    background: #f0f9ff;
    color: #0369a1;
    border-left: 4px solid #38bdf8;
}

.mensaje--alerta-cambio {
    /* 20 de julio de 2026, a pedido de Gabriel ("los mensajes deben ser
       llamativos cuando son alertas, por ejemplo cuanto devolver"): el
       aviso de "debes devolver $X de cambio" en el modal de confirmación
       de venta (punto_venta.js::abrirModal) reusaba el tono neutro/celeste
       de .mensaje--vista-previa, que se perdía entre el resto de texto
       informativo. Este es un tono ámbar fuerte y en negrita, a propósito
       más llamativo que .mensaje--warning normal, porque es dinero físico
       que el vendedor no se puede olvidar de entregar. */
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
    font-weight: 700;
    font-size: 1rem;
}

.mensaje--nota-interna {
    /* Primer uso: el comentario interno de una venta (ventas/models.py,
       Venta.nota_interna, 19 de julio de 2026) — un tono neutro (ni error
       ni éxito ni advertencia), pensado solo para recordar visualmente que
       esto es de uso interno y nunca sale en la factura impresa. */
    background: #f1f5f9;
    color: #334155;
    border-left: 4px solid #94a3b8;
    white-space: pre-line;
}

@media (max-width: 600px) {
    .barra-superior {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Fase 4: catálogo de productos --- */

.encabezado-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.boton--auto {
    width: auto;
}

.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.barra-filtros input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 1rem;
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-texto-ayuda);
}

.campo-filtro {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-texto-ayuda);
}

.campo-filtro select,
.campo-filtro input[type="date"] {
    width: auto;
    min-width: 150px;
}

.texto-alerta {
    color: var(--color-error);
    font-weight: 600;
}

.texto-exito {
    color: var(--color-exito);
    font-weight: 600;
}

.texto-tachado {
    color: var(--color-texto-ayuda);
    text-decoration: line-through;
}

.etiqueta-alerta {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #fee2e2;
    color: var(--color-error);
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-exito {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #dcfce7;
    color: var(--color-exito);
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-info {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--color-primario-oscuro);
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-advertencia {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-neutra {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--color-texto-ayuda);
    font-size: 0.75rem;
    font-weight: 600;
}

.tabla--datos th {
    width: 220px;
    color: var(--color-texto-ayuda);
    font-weight: 600;
}

.tarjeta--formulario {
    max-width: 520px;
}

.fila-campos {
    display: flex;
    gap: 1rem;
}

.fila-campos .campo {
    flex: 1;
}

.campo--checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

.campo--checkbox input[type="checkbox"] {
    width: auto;
}

.texto-error-campo {
    color: var(--color-error);
    font-size: 0.85rem;
    margin: 0;
}

/* 20 de julio de 2026, reporte de arqueos: resalta en rojo la diferencia
   de un turno que no cuadró (sobró o faltó), en la tabla de detalle —
   distinta de .texto-error-campo (esa es para mensajes de validación de
   formularios, con su propio tamaño de letra que no encaja bien dentro
   de una celda de tabla). */
.valor-descuadre {
    color: var(--color-error);
    font-weight: 700;
}

.acciones-formulario {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.paginacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.paginacion__info {
    color: var(--color-texto-ayuda);
    font-size: 0.9rem;
}

/* --- Rediseño inspirado en Siigo: home con accesos directos --- */

.tarjeta--bienvenida {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
    border: none;
    color: #fff;
}

.tarjeta--bienvenida p {
    margin: 0;
    font-size: 1.05rem;
}

.tarjeta--bienvenida strong {
    color: #fff;
}

.accesos-directos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.acceso-directo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 1.25rem 0.75rem;
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 600;
    font-size: 0.9rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.acceso-directo:hover {
    border-color: var(--color-primario);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.12);
}

.acceso-directo:active {
    transform: scale(0.98);
}

.acceso-directo__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--color-primario);
}

.acceso-directo__texto {
    line-height: 1.3;
}

input[type="number"],
input[type="date"],
select,
textarea {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    background: #fff;
    font-family: inherit;
}

/* --- Fase 5: ajustes de inventario y traslados --- */

.campo ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
}

.campo ul li label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

.campo ul input[type="radio"] {
    width: auto;
}

.tabla--formset select,
.tabla--formset input {
    margin: 0;
}

.tabla--formset td {
    vertical-align: top;
}

/* --- Buscador de producto por texto (BuscadorProductoWidget, Fase 10):
   reemplaza el <select> plano de producto en traslados, compras y
   recetas — mismo patrón visual que .pv-buscador/.pv-resultados del
   punto de venta, pero de tamaño compacto para caber en una celda de
   tabla de formset. --- */

.buscador-producto {
    position: relative;
    min-width: 220px;
}

.buscador-producto__texto {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--color-fondo);
}

.buscador-producto__texto:focus {
    outline: none;
    border-color: var(--color-primario);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.buscador-producto__resultados {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
}

.buscador-producto__resultados--visible {
    display: block;
}

.buscador-producto__item {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-fondo);
}

.buscador-producto__item:last-child {
    border-bottom: none;
}

.buscador-producto__item:hover,
.buscador-producto__item:focus {
    background: #eff6ff;
    outline: none;
}

/* =========================================================================
   Fase 7 (segundo rediseño): punto de venta estilo "app de caja" — catálogo
   de productos a la izquierda (buscador + categorías + tarjetas) y ticket
   de venta fijo a la derecha, siguiendo el mismo patrón de Square/Shopify
   POS/Loyverse: la lista de la venta actual siempre visible mientras se
   sigue agregando productos.
   ========================================================================= */

.pv {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pv__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.pv__titulo {
    margin: 0;
    font-size: 1.4rem;
}

.pv__subtitulo {
    margin: 0.2rem 0 0;
    color: var(--color-texto-ayuda);
    font-size: 0.88rem;
}

.pv__topbar-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pv__cuerpo {
    display: grid;
    /* La columna del carrito ("Venta actual") pasó de 380px a 460px el
       17 de julio de 2026 — Gabriel marcó con flechas que justo esa
       columna es la que queda apretada (la tabla del carrito), mientras
       sobraba espacio a los costados de toda la pantalla. Ese espacio
       extra ahora se lo lleva principalmente esta columna.

       20 de julio de 2026: subió otra vez, de 460px a 560px, a pedido de
       Gabriel ("de ser posible darle mas espacio al modulo de ventas") —
       ahora que el catálogo pasó de tarjetas grandes a una lista compacta
       paginada (ver .pv-lista-compacta más abajo), ya no necesita tanto
       ancho, así que ese espacio libre se lo lleva "Venta actual". */
    grid-template-columns: 1fr 560px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .pv__cuerpo {
        grid-template-columns: 1fr;
    }

    .pv-ticket {
        position: static;
        max-height: none;
    }
}

/* --- Catálogo (izquierda) --- */

.pv-catalogo {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.pv-buscador {
    position: relative;
    display: flex;
    align-items: center;
}

.pv-buscador__icono {
    position: absolute;
    left: 0.85rem;
    color: var(--color-texto-ayuda);
    pointer-events: none;
    display: flex;
}

.pv-buscador input[type="text"] {
    padding: 0.75rem 0.9rem 0.75rem 2.5rem;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    font-size: 1.05rem;
    width: 100%;
    background: var(--color-fondo);
}

.pv-buscador input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primario);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.pv-resultados {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
}

.pv-resultados--visible {
    display: block;
}

.pv-resultado-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-fondo);
}

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

.pv-resultado-item:hover,
.pv-resultado-item:focus {
    background: #eff6ff;
    outline: none;
}

.pv-resultado-item__izquierda {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.pv-resultado-item__nombre {
    font-weight: 600;
}

.pv-resultado-item__detalle {
    color: var(--color-texto-ayuda);
    font-size: 0.85rem;
    white-space: nowrap;
}

.pv-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.pv-categoria-chip {
    border: 1px solid var(--color-borde);
    background: #fff;
    color: var(--color-texto-ayuda);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pv-categoria-chip:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.pv-categoria-chip.pv-activo {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}

/* 20 de julio de 2026, a pedido de Gabriel ("el listado de productos le
   quita mucho espacio a la vista de ventas... mejor que sean hojas para
   ir mirando"): reemplaza la cuadrícula de tarjetas grandes (que crecía
   sin límite hacia abajo) por una lista de filas angostas, paginada de a
   PAGINA_TAMANO en vez de scroll infinito — ver ventas/static/ventas/
   punto_venta.js::renderGrid. Sin límite de alto propio: como la
   cantidad de filas ya está acotada por la paginación, no hace falta un
   max-height/overflow aparte aquí. */
.pv-lista-compacta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-borde);
    border-radius: 10px 10px 0 0;
    background: var(--color-tarjeta);
    border-bottom: none;
}

.pv-fila-producto {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: none;
    border-bottom: 1px solid var(--color-borde);
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

.pv-lista-compacta .pv-fila-producto:last-child {
    border-bottom: none;
}

.pv-fila-producto:hover {
    background: var(--color-fondo);
}

.pv-fila-producto:active {
    background: #e5e7eb;
}

.pv-fila-producto__cat {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.pv-fila-producto__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.pv-fila-producto__nombre {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-fila-producto__codigo {
    font-size: 0.76rem;
    color: var(--color-texto-ayuda);
}

.pv-fila-producto__genero {
    display: inline-block;
    width: fit-content;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pv-fila-producto__genero--hombre {
    background: #dbeafe;
    color: #1d4ed8;
}

.pv-fila-producto__genero--mujer {
    background: #fce7f3;
    color: #be185d;
}

.pv-fila-producto__genero--unisex {
    background: #ede9fe;
    color: #5b21b6;
}

.pv-fila-producto__badge {
    flex-shrink: 0;
}

.pv-fila-producto__precio-caja {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    min-width: 70px;
}

.pv-fila-producto__precio {
    font-weight: 700;
    color: var(--color-primario-oscuro);
    font-size: 0.92rem;
    white-space: nowrap;
}

.pv-fila-producto__precio-original {
    font-size: 0.72rem;
    color: var(--color-texto-ayuda);
    text-decoration: line-through;
    white-space: nowrap;
}

.pv-fila-producto__precio--promo {
    color: var(--color-exito);
}

/* --- Paginador ("hojas") del catálogo --- */

.pv-paginador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-borde);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: var(--color-fondo);
}

.pv-paginador__boton {
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.pv-paginador__boton:hover:not(:disabled) {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.pv-paginador__boton:disabled {
    opacity: 0.4;
    cursor: default;
}

.pv-paginador__estado {
    font-size: 0.85rem;
    color: var(--color-texto-ayuda);
    font-weight: 600;
}

.pv-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pv-badge--ok {
    background: #dcfce7;
    color: var(--color-exito);
}

.pv-badge--bajo {
    background: #fef3c7;
    color: #92400e;
}

.pv-badge--agotado {
    background: #fee2e2;
    color: var(--color-error);
}

.pv-badge--kit {
    background: #ede9fe;
    color: #5b21b6;
}

.pv-grid-vacio {
    text-align: center;
    color: var(--color-texto-ayuda);
    padding: 2.5rem 1rem;
}

/* --- Ticket de venta (derecha, fijo) --- */

.pv-ticket {
    /* "top" y "max-height" restan --altura-barra-superior porque la
       barra superior ahora es "sticky" y se queda ocupando ese espacio
       arriba del viewport (ver .barra-superior) — sin este ajuste, el
       ticket quedaría escondido debajo de la barra al hacer scroll. */
    position: sticky;
    top: calc(var(--altura-barra-superior) + 1rem);
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--altura-barra-superior) - 2rem);
    /* 20 de julio de 2026, a pedido de Gabriel ("toca desplazarme con el
       scroll para poder cobrar o confirmar la venta"): el scroll ya NO
       vive aquí — vive en .pv-ticket__scroll, adentro. Así el total y el
       botón Cobrar (en .pv-ticket__pie) quedan siempre visibles, fuera
       de la zona que se desplaza, sin importar cuánto crezca el carrito
       o la forma de pago. */
    overflow: hidden;
}

.pv-ticket__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.pv-ticket__scroll {
    /* Zona que se desplaza: todo lo de arriba del total (cliente,
       carrito, forma de pago, descuento, nota, puntos). flex:1 +
       min-height:0 es lo que le permite encogerse dentro del alto
       máximo de .pv-ticket y ceder el espacio fijo que necesita
       .pv-ticket__pie (ver más abajo). */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Mismo criterio que antes tenía .pv-ticket__lista con su
       min-height de 240px (17 de julio de 2026: "la altura no permite
       ver nada casi") — ahora ese mínimo lo respeta el propio contenido
       de la tabla del carrito, sin cambios ahí. */
}

.pv-ticket__pie {
    /* Total + botón Cobrar: siempre visibles, nunca se desplazan con el
       resto (Gabriel, 20 de julio de 2026). flex-shrink:0 evita que el
       flex del padre intente encogerlo cuando el contenido de arriba no
       cabe — el que cede espacio siempre es .pv-ticket__scroll. */
    flex-shrink: 0;
}

.pv-ticket h2 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.pv-ticket__seccion {
    margin-bottom: 0.9rem;
}

.pv-ticket__seccion label,
.pv-ticket__etiqueta {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.pv-enlace-discreto {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

.pv-ticket__lista {
    /* Antes tenía max-height: 320px fijo, así que en pantallas normales
       solo se alcanzaban a ver 3-4 productos del carrito a la vez y el
       resto quedaba escondido hasta hacer scroll (Gabriel, 17 de julio de
       2026: "no veo que productos estoy agregando a la factura"). Se
       cambió a flex:1 para que creciera con el espacio libre del panel,
       pero eso tenía un problema: como era el ÚNICO hermano flexible,
       cuando el resto de la sección (forma de pago, con Addi y
       Sistecrédito sumados) creció, el carrito era el que cedía todo el
       espacio y se quedaba en su min-height de 60px — casi sin verse
       (Gabriel, 17 de julio de 2026: "la altura no permite ver nada
       casi"). Ahora min-height es 240px (unas 5-6 líneas siempre
       visibles, pase lo que pase con el resto del panel); si en una
       pantalla baja eso no alcanza a caber junto con todo lo demás, el
       panel completo hace scroll (ver overflow-y en .pv-ticket) en vez
       de aplastar el carrito.
     */
    flex: 1;
    min-height: 240px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.pv-ticket__vacio {
    text-align: center;
    color: var(--color-texto-ayuda);
    padding: 1.75rem 0.5rem;
    font-size: 0.9rem;
    border: 1px dashed var(--color-borde);
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

/* Venta cruzada ("También suelen llevar...") — a pedido de Gabriel el
   22 de julio de 2026. Aparece justo debajo del carrito apenas se
   agrega un producto con sugerencias disponibles. */
.pv-sugerencias {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: #f8fafc;
}

.pv-sugerencias__titulo {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-texto-ayuda);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.pv-sugerencias__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pv-sugerencias__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-primario);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primario-oscuro);
    font-size: 0.8rem;
    cursor: pointer;
}

.pv-sugerencias__item:hover {
    background: var(--color-primario);
    color: #fff;
}

.pv-sugerencias__nombre {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-sugerencias__precio {
    font-weight: 700;
    white-space: nowrap;
}

/* El carrito es una tabla (Producto / Cant. / Subtotal / quitar), no
   tarjetas apiladas — a pedido de Gabriel el 17 de julio de 2026, que
   mandó de ejemplo un listado tipo tabla como el de otros sistemas de
   punto de venta que conoce. El intento anterior (nombre arriba,
   controles abajo en una fila propia) todavía forzaba de más el ancho
   de esa fila y terminaba generando scroll horizontal dentro de cada
   producto; una tabla de verdad reparte las columnas sola, sin ese
   problema. */
.pv-carrito-tabla {
    font-size: 0.85rem;
}

.pv-carrito-tabla th,
.pv-carrito-tabla td {
    padding: 0.4rem 0.4rem;
}

.pv-carrito-tabla thead th {
    position: sticky;
    top: 0;
    background: var(--color-tarjeta);
    font-size: 0.78rem;
    color: var(--color-texto-ayuda);
    font-weight: 600;
    z-index: 1;
}

.pv-item--sin-stock {
    background: #fef2f2;
}

.pv-item__nombre {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.pv-item__aviso {
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.pv-item__promo {
    font-size: 0.75rem;
    margin-top: 0.1rem;
    color: var(--color-exito);
    font-weight: 600;
}

.pv-item__cantidad {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pv-stepper-boton {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.95rem;
    color: var(--color-primario-oscuro);
}

.pv-stepper-boton:hover {
    background: #eff6ff;
    border-color: var(--color-primario);
}

.pv-stepper-input {
    width: 48px;
    text-align: center;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.25rem 0.15rem;
    font-size: 0.85rem;
}

.pv-item__subtotal {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* 20 de julio de 2026, descuentos con tope por Rol: input de descuento
   manual por producto, columna "Descuento" del carrito (ver
   ventas/static/ventas/punto_venta.js::renderCarrito). Se ve apagado
   cuando está deshabilitado (producto con promoción vigente — las dos
   cosas no se pueden combinar). */
.pv-item__descuento {
    width: 64px;
    text-align: right;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.25rem 0.3rem;
    font-size: 0.85rem;
}

.pv-item__descuento:disabled {
    background: #f3f4f6;
    color: var(--color-texto-ayuda);
    cursor: not-allowed;
}

.pv-item__quitar {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
    line-height: 1;
}

.pv-item__quitar:hover {
    background: #fee2e2;
}

/* --- Pagos (posiblemente combinados: efectivo + tarjeta, etc.) --- */

.pv-pagos__encabezado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.pv-pagos-estado {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.pv-pagos-estado--ok {
    background: #dcfce7;
    color: var(--color-exito);
}

.pv-pagos-estado--falta {
    background: #fef3c7;
    color: #92400e;
}

.pv-pagos-estado--sobra {
    background: #fee2e2;
    color: var(--color-error);
}

.pv-pagos-estado--cambio {
    /* 20 de julio de 2026, a pedido de Gabriel ("los mensajes deben ser
       llamativos cuando son alertas, por ejemplo cuanto devolver"): antes
       "Vas a devolver $X de cambio" usaba el mismo verde de
       --ok ("Pagos completos"), y se podía confundir con un simple visto
       bueno. Mismo tono ámbar que .mensaje--alerta-cambio (ver ese
       comentario), con borde para que resalte más que la píldora normal. */
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.pv-pagos-lineas {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pv-pago-linea {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pv-pago-linea select {
    flex: 1.1;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

.pv-pago-linea input[type="number"] {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

.pv-pago-linea__quitar {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    line-height: 1;
}

.pv-pago-linea__quitar:hover {
    background: #fee2e2;
}

.pv-pagos-agregar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pv-pagos-agregar__boton {
    border: 1px dashed var(--color-borde);
    background: #fff;
    color: var(--color-primario);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pv-pagos-agregar__boton:hover {
    background: #eff6ff;
    border-style: solid;
}

.pv-pagos-agregar__boton:disabled {
    /* No se puede agregar dos veces la misma forma de pago (19 de julio
       de 2026, a pedido de Gabriel) — se ve apagado en vez de activo. */
    color: var(--color-texto-ayuda);
    border-style: solid;
    border-color: var(--color-borde);
    background: #f8fafc;
    cursor: not-allowed;
}

.pv-campo-descuento {
    max-width: 220px;
}

/* Buscador de cliente (19 de julio de 2026, a pedido de Gabriel: "y
   deberia tener una forma de buscar un cliente con el id para ser mas
   rapido?") — reutiliza .pv-buscador/.pv-resultados del buscador de
   productos, pero sin el ícono de lupa (no hace falta el padding extra
   a la izquierda). */
.pv-buscador--cliente input[type="text"] {
    padding-left: 0.9rem;
}

.pv-oculto {
    display: none;
}

.pv-cliente-seleccionado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: 0.85rem;
}

.pv-resultado-item__etiqueta {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
}

.pv-campo-descuento--apagado {
    opacity: 0.55;
    pointer-events: none;
}

.pv-fidelizacion-info {
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: var(--color-texto);
    font-size: 0.8rem;
    line-height: 1.35;
}

.pv-ticket__totales {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pv-ticket__linea {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.pv-ticket__linea--total {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
}

.pv-boton-cobrar {
    margin-top: 0.9rem;
    padding: 0.9rem;
    font-size: 1.1rem;
}

/* --- Modal de confirmación (reemplaza el confirm() del navegador) --- */

.pv-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pv-modal[hidden] {
    display: none;
}

.pv-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
}

.pv-modal__caja {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.pv-modal__caja h2 {
    margin-top: 0;
}

.pv-modal__lineas {
    list-style: none;
    padding: 0;
    margin: 0.9rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
}

.pv-modal__lineas li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.88rem;
}

.pv-modal__subtitulo {
    margin: 0.75rem 0 0.15rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-texto-ayuda);
}

.pv-modal__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.25rem;
    font-weight: 700;
    padding-top: 0.6rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-borde);
    color: var(--color-primario-oscuro);
}

/* --- Notificaciones tipo "toast" (errores del carrito en el navegador) --- */

.pv-toasts {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 320px;
}

.pv-toast {
    background: #111827;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    animation: pv-toast-in 0.18s ease;
}

.pv-toast--error {
    background: #7f1d1d;
}

@keyframes pv-toast-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    /* 20 de julio de 2026: la regla que vivía aquí para .pv-grid (cuadrícula
       de tarjetas) quedó sin uso — el catálogo ahora es .pv-lista-compacta,
       una lista de filas de un solo ancho que ya se ve bien en celular sin
       ajustes aparte (ver más arriba). */

    .pv__topbar-acciones {
        width: 100%;
    }

    .pv__topbar-acciones .boton {
        flex: 1;
    }
}

/* --- Fase 9: reportes de ventas e inventario --- */

.tarjeta--ancha {
    max-width: none;
    /* Dentro de .reporte-secciones (una grilla), ocupa las columnas
       completas en vez de una sola celda — para la tabla de "productos
       que más vendieron"/"mayor valor en inventario", que necesita más
       ancho que las tarjetas de al lado. grid-column no hace nada fuera
       de un contenedor grid, así que no afecta a los demás usos de esta
       clase (ej. recetas/formulario.html). */
    grid-column: 1 / -1;
}

.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.tarjeta-resumen {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tarjeta-resumen__etiqueta {
    font-size: 0.82rem;
    color: var(--color-texto-ayuda);
    font-weight: 600;
}

.tarjeta-resumen__valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
}

.reporte-secciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* --- Fase 9: gráficas simples de los reportes (sin librerías externas,
   igual que el resto del sistema — ver la nota al inicio de este
   archivo) --- */

.grafica-tendencia {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    padding: 0.5rem 0.25rem 0;
    overflow-x: auto;
}

.grafica-tendencia__columna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 auto;
    min-width: 10px;
    height: 100%;
}

.grafica-tendencia__barra {
    width: 100%;
    max-width: 28px;
    background: var(--color-primario);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.grafica-tendencia__barra:hover {
    background: var(--color-primario-oscuro);
}

.grafica-tendencia__etiqueta {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--color-texto-ayuda);
    white-space: nowrap;
    height: 1rem;
}

.mini-barra {
    background: var(--color-fondo);
    border-radius: 999px;
    height: 8px;
    min-width: 60px;
    overflow: hidden;
}

.mini-barra__relleno {
    height: 100%;
    background: var(--color-primario);
    border-radius: 999px;
}