/* ==============================================================================
   estilos.css - Paleta y base visual compartida (neutro + verde)
   ==============================================================================
   Todas las páginas del frontend cargan este archivo antes de su propio
   <style>, así los colores quedan iguales en toda la app sin repetir los
   valores en cada HTML. Los colores de la paleta van solo en variables.
   Colores planos: casi negro para lo principal y verde como único acento.
*/

:root {
    --color-bg: #f7f7f5;
    --color-bg-soft: #efefec;
    --color-primary: #1c1c1c;
    --color-primary-rgb: 28, 28, 28; /* el mismo color, para sombras con rgba() */
    --color-primary-dark: #000000;
    --color-primary-light: #ececea;
    --color-primary-borde: #c9c9c4;
    --color-accent: #059669;
    --color-accent-dark: #047857; /* enlaces y textos destacados */
    --color-sobre-accent: #ffffff; /* texto encima de --color-accent */
    --color-text: #1c1c1c;
    --color-text-suave: #5c5c58;
    --color-card: #ffffff;
    --color-border: #e0e0dc;
    --color-exito: #16a34a;
    --color-exito-oscuro: #15803d;
    --color-peligro: #dc2626;
    --color-peligro-oscuro: #b91c1c;
    --color-advertencia-bg: #fff3cd;
    --color-advertencia-texto: #856404;

    /* Botones y pestañas destacadas, y fondo de la página */
    --gradiente-primario: var(--color-primary);
    --sombra-primaria: 0 2px 6px rgba(var(--color-primary-rgb), 0.25);
    --fondo-pagina: var(--color-bg);
}

* { box-sizing: border-box; }

html, body {
    background: var(--fondo-pagina);
    color: var(--color-text);
}

/* Que los inputs no se vean gigantes/con zoom raro en celular (iOS hace zoom
   automático si el font-size de un input es menor a 16px) */
input, select, textarea, button {
    font-size: 16px;
    font-family: inherit;
}

/* ==============================================================================
   MODAL DE AVISO / CONFIRMACIÓN (reemplaza alert() y confirm() del navegador)
   ==============================================================================
   Ver mostrarAlerta() y mostrarConfirmacion() en app.js. */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 22, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: modal-fondo-aparece 0.15s ease-out;
}

@keyframes modal-fondo-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-aviso {
    background: var(--color-card);
    border-radius: 16px;
    padding: 28px 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(22, 22, 22, 0.25);
    animation: modal-aviso-aparece 0.18s ease-out;
}

@keyframes modal-aviso-aparece {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-icono {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.modal-mensaje {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
    margin: 0 0 22px;
}

.modal-botones {
    display: flex;
    gap: 10px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.modal-btn-principal {
    background: var(--gradiente-primario);
    color: white;
    box-shadow: var(--sombra-primaria);
}
.modal-btn-principal:hover { filter: brightness(1.08); }

.modal-btn-secundario {
    background: var(--color-bg-soft);
    color: var(--color-text-suave);
    border: 1px solid var(--color-border);
}
.modal-btn-secundario:hover { background: var(--color-primary-light); }

/* Variantes de color según el tipo de aviso */
.modal-exito .modal-icono { background: #dcfce7; }
.modal-exito .modal-btn-principal { background: var(--color-exito); box-shadow: 0 6px 16px rgba(22,163,74,0.35); }

.modal-error .modal-icono { background: #fee2e2; }
.modal-error .modal-btn-principal { background: var(--color-peligro); box-shadow: 0 6px 16px rgba(220,38,38,0.35); }

.modal-advertencia .modal-icono { background: var(--color-advertencia-bg); }
.modal-advertencia .modal-btn-principal { background: var(--color-peligro); box-shadow: 0 6px 16px rgba(220,38,38,0.35); }

.modal-info .modal-icono { background: var(--color-primary-light); }


/* ==============================================================================
   Apertura y cierre de caja (turno_caja.js): ventanas, conteo de billetes y resumen
   ============================================================================== */
.modal-caja {
    background: var(--color-card); border-radius: 16px; padding: 22px 20px; width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto; text-align: left; box-shadow: 0 12px 32px rgba(22, 22, 22, 0.25);
    animation: modal-aviso-aparece 0.18s ease-out;
}
.modal-caja h3 { margin: 0 0 10px; color: var(--color-text); }
.modal-caja h4 { margin: 16px 0 6px; font-size: 15px; color: var(--color-text); }
.modal-caja label { display: block; margin-top: 10px; font-weight: bold; font-size: 14px; color: var(--color-text-suave); }
.modal-caja input, .modal-caja select { width: 100%; box-sizing: border-box; padding: 10px; margin-top: 4px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 16px; }
.modal-caja .modal-botones { margin-top: 18px; }
.modal-caja-error { color: var(--color-peligro); font-weight: bold; font-size: 14px; margin: 10px 0 0; }
.ayuda-caja { color: var(--color-text-suave); font-size: 13px; margin: 4px 0; }
.check-ficha { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; cursor: pointer; }
.check-ficha input { width: auto; margin: 0; min-width: 20px; min-height: 20px; }
/* Ventas del turno en la caja: buscar una venta de otro día para pedir su anulación */
.buscar-venta-numero { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.buscar-venta-numero input { flex: 1; min-width: 0; margin: 0; }
.buscar-venta-numero .boton-secundario-caja { width: auto; margin: 0; padding: 10px 16px; }
/* Descuentos (descuentos.js): en cada línea del carrito y a toda la venta */
.linea-carrito .btn-descuento-linea { flex-basis: 100%; text-align: left; font-size: 13px; font-weight: 600; min-height: 32px;
    padding: 2px 0; color: var(--color-accent-dark); }
.linea-carrito .btn-descuento-linea.con-descuento { color: var(--color-exito); }
/* Promoción de la línea: casilla cuadrada (solo ella se toca) + el texto; marcada = aplicada */
.linea-carrito .promo-linea { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 4px 10px 4px 4px;
    border-radius: 8px; background: var(--color-advertencia-bg); font-size: 13px; font-weight: 600; text-align: left; }
.linea-carrito .promo-linea.aplicada { background: rgba(22, 163, 74, .1); color: var(--color-exito-oscuro); }
.linea-carrito .casilla-promo { flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; margin: 0; padding: 0; cursor: pointer;
    border: 2px solid var(--color-text-suave); border-radius: 6px; background: var(--color-card); color: white;
    font-size: 18px; font-weight: bold; line-height: 1; box-shadow: none; }
.linea-carrito .casilla-promo[aria-checked="true"] { background: var(--color-exito); border-color: var(--color-exito); }
.linea-carrito .casilla-promo:hover { filter: brightness(.97); }
.fila-descuento-venta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.fila-descuento-venta span { font-size: 14px; font-weight: bold; color: var(--color-exito); min-width: 0; }
.fila-descuento-venta .btn-salir { margin-left: auto; min-height: 40px; }
.selector-descuento { display: flex; margin: 8px 0; }
.selector-descuento button { flex: 1; }

/* Promociones (promociones_panel.js) */
.promocion-card.inactiva { opacity: .65; }
.promo-campos[hidden] { display: none; }
.fila-promo { display: flex; gap: 10px; }
.fila-promo label { flex: 1; min-width: 0; }
.dias-promo { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 8px; }
.dias-promo label { display: flex; align-items: center; gap: 4px; font-weight: normal; margin: 0; }
.dias-promo input { width: auto; margin: 0; min-width: 18px; min-height: 18px; }
#promo-productos button { padding: 6px 10px; }

/* Devolver algunos productos: una fila por producto con cuántos se devuelven */
.fila-devolucion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--color-border); }
.fila-devolucion span { min-width: 0; }
.fila-devolucion small { display: block; color: var(--color-text-suave); font-size: 12px; }
.fila-devolucion input { flex: 0 0 72px; width: 72px; margin: 0; text-align: center; min-height: 40px; }
.resultado-venta-numero:not(:empty) { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.boton-secundario-caja { width: 100%; margin: 10px 0 0; padding: 10px; border-radius: 10px; cursor: pointer; box-shadow: none;
    background: transparent; color: var(--color-text-suave); border: 1px solid var(--color-border); font-weight: bold; }
.botones-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.botones-rapidos button { padding: 6px 10px; font-size: 13px; border-radius: 8px; cursor: pointer; margin: 0;
    background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; }
.bloque-esperado { background: var(--color-primary-light); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.bloque-esperado small { display: block; color: var(--color-text-suave); font-size: 12px; margin-top: 4px; }
.grilla-conteo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.celda-conteo { margin: 0 !important; font-weight: normal !important; font-size: 13px !important; }
.celda-conteo input { padding: 6px; font-size: 15px; text-align: center; }
.diferencia-cierre { margin-top: 8px; font-size: 18px; font-weight: bold; }
.diferencia-cierre.ok { color: var(--color-exito); }
.diferencia-cierre.sobra { color: var(--color-advertencia-texto); }
.diferencia-cierre.falta { color: var(--color-peligro); }
.detalle-tarjetas { margin-top: 14px; }
.detalle-tarjetas summary { cursor: pointer; font-weight: bold; color: var(--color-accent-dark); }
.fila-resumen { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.fila-resumen small { display: block; color: var(--color-text-suave); font-size: 12px; }
.fila-resumen.total { font-weight: bold; font-size: 16px; border-bottom: none; }
.fila-resumen.ok { color: var(--color-exito); }
.fila-resumen.sobra { color: var(--color-advertencia-texto); }
.fila-resumen.falta { color: var(--color-peligro); }
.fila-resumen > span:last-child { white-space: nowrap; }
.fila-resumen.anulado > span:last-child { text-decoration: line-through; color: var(--color-text-suave); }

/* Caja → Registros (panel): filtro por fechas y bitácora de aperturas, retiros, ingresos y cierres */
.filtro-registros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.filtro-registros label { display: flex; flex-direction: column; font-size: 13px; font-weight: bold; gap: 4px; margin: 0; }
.filtro-registros input[type="date"] { margin: 0; min-width: 150px; }
.filtro-registros > button { margin: 0; }
.resumen-registros { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 14px; }
tr.registro-anulado td { color: var(--color-text-suave); }
td.monto-registro { white-space: nowrap; }
tr.registro-anulado td.monto-registro { text-decoration: line-through; }
.etiqueta-registro { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.etiqueta-registro.RETIRO { background: #fee2e2; color: #991b1b; }
.etiqueta-registro.INGRESO { background: #dcfce7; color: #14532d; }
.etiqueta-registro.APERTURA, .etiqueta-registro.CIERRE { background: var(--color-advertencia-bg); color: var(--color-advertencia-texto); }
.btn-anular-registro { margin: 0; padding: 4px 8px; font-size: 12px; box-shadow: none; background: transparent;
    color: var(--color-peligro); border: 1px solid var(--color-peligro); border-radius: 8px; cursor: pointer; }
.meta-turno { color: var(--color-text-suave); font-size: 13px; margin: 4px 0; }
.aviso-turno { background: var(--color-advertencia-bg); color: var(--color-advertencia-texto); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Franja de estado de la caja (arriba en index.html y en la pestaña Caja del panel) */
.estado-turno { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 14px; text-align: left; }
.estado-turno.abierta { background: #dcfce7; color: #14532d; }
.estado-turno.cerrada { background: var(--color-advertencia-bg); color: var(--color-advertencia-texto); }
.estado-turno.cargando { background: var(--color-card); color: var(--color-text-suave); border: 1px dashed var(--color-border); }
.estado-turno .acciones-turno { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-turno button { margin: 0; padding: 6px 10px; font-size: 13px; border-radius: 8px; cursor: pointer; box-shadow: none;
    background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); font-weight: bold; }
.estado-turno button.principal { background: var(--gradiente-primario); color: white; border: none; }

/* Mis Sucursales: casilla "más de un cajón" (solo con 2+ sucursales) */
/* Caja con varias cajas abiertas: en cuál vende este aparato */
.estado-turno .selector-caja { margin: 0; padding: 6px 8px; font-size: 13px; border-radius: 8px; width: auto; }

/* Caja → Resumen del día (panel) */
details.resumen-dia > summary { cursor: pointer; list-style: none; }
details.resumen-dia > summary::-webkit-details-marker { display: none; }
details.resumen-dia > summary h2 { display: block; margin: 0; }
details.resumen-dia > summary h2::after { content: " ▾"; font-size: 0.8em; color: var(--color-text-suave); }
details.resumen-dia[open] > summary h2::after { content: " ▴"; }
details.resumen-dia > summary .pedido-meta { display: block; margin-top: 4px; }
.kpis-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.kpis-dia > div { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpis-dia span { font-size: 13px; color: var(--color-text-suave); }
.kpis-dia b { font-size: 20px; }
.kpis-dia small { font-size: 12px; color: var(--color-text-suave); }

/* Cierre de caja: con qué comparar la máquina de tarjetas (todo el día o solo el turno) */
.alcance-tarjetas { background: var(--color-advertencia-bg); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.alcance-tarjetas label { display: flex; gap: 6px; align-items: center; font-weight: normal; margin: 4px 0; }
.alcance-tarjetas input { width: auto; margin: 0; }
.texto-peligro { color: var(--color-peligro); }
.boton-excel { background: #1d6f42 !important; color: white !important; border: none !important; }
/* Mis Sucursales → Renombrar o desactivar cajas */
.fila-caja-admin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.fila-caja-admin input { flex: 1; min-width: 140px; margin: 0; }
.fila-caja-admin button { margin: 0; padding: 6px 10px; font-size: 13px; }
.fila-caja-admin small { width: 100%; color: var(--color-text-suave); }

/* Abrir caja: primer botón rápido con lo contado en el último cierre */
.botones-rapidos .boton-ultimo-cierre { flex-basis: 100%; text-align: left; padding: 8px 12px;
    background: var(--color-primary-light); border-color: var(--color-primary-borde); color: var(--color-primary-dark); font-weight: bold; }
.botones-rapidos .boton-ultimo-cierre small { display: block; font-weight: normal; color: var(--color-primary); }

/* Cierre de caja: varias máquinas de tarjetas (la suma de débito y crédito es automática) */
.boton-agregar-maquina { margin: 8px 0 4px; padding: 6px 12px; font-size: 13px; border-radius: 8px; cursor: pointer; box-shadow: none;
    background: transparent; color: var(--color-accent-dark); border: 1px dashed var(--color-border); font-weight: bold; }
.maquina-tarjetas { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.maquina-encabezado { display: flex; gap: 6px; align-items: center; }
.maquina-encabezado input { flex: 1; margin: 0; font-weight: bold; }
.maquina-encabezado button { margin: 0; padding: 4px 8px; background: transparent; border: none; box-shadow: none; cursor: pointer; }
.maquina-montos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.maquina-montos label { display: flex; flex-direction: column; font-size: 13px; margin: 0; }
.maquina-montos input { margin: 2px 0 0; }
input.campo-suma { background: #f1f5f9; font-weight: bold; }

/* Análisis → Rendimiento financiero: botones para ver una serie o todas */
:root { --serie-ventas: #94a3b8; --serie-ganancia: #16a34a; --serie-costo: #2563eb; --serie-gastos: #ea580c; }
.series-grafico { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.series-grafico button { margin: 0; padding: 6px 12px; font-size: 13px; border-radius: 999px; cursor: pointer; box-shadow: none;
    background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); font-weight: bold;
    display: inline-flex; align-items: center; gap: 6px; }
.series-grafico button i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.series-grafico button.activo { background: var(--color-text); color: var(--color-card); border-color: var(--color-text); }

/* Fichas: tocar una venta, un gasto o una notificación abre toda su información */
.tarjeta-con-ficha { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tarjeta-con-ficha:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.tarjeta-con-ficha:active { transform: scale(.995); }
.tarjeta-con-ficha:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.ver-detalle { display: block; text-align: right; font-size: 13px; font-weight: bold; color: var(--color-accent-dark); margin-top: 6px; }
.ficha h4 { margin: 16px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-suave); }
.ficha .fila-resumen > span:last-child { text-align: right; white-space: normal; }
.ficha .fila-resumen small { font-weight: normal; }
.ficha .estado-etiqueta { display: inline-block; margin-bottom: 6px; }
.tabla-ficha-contenedor { overflow-x: auto; }
/* min-width: 0 porque admin.html les da 560px a todas las tablas en escritorio y la ventana es más angosta */
.tabla-ficha { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.tabla-ficha th { text-align: left; color: var(--color-text-suave); background: none; font-weight: normal; font-size: 12px; text-transform: none; border-bottom: 1px solid var(--color-border); padding: 4px; }
.tabla-ficha td:first-child { min-width: 110px; }
.tabla-ficha td { padding: 6px 4px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tabla-ficha th:not(:first-child), .tabla-ficha td:not(:first-child) { text-align: right; white-space: nowrap; }
.tabla-ficha td small { display: block; color: var(--color-text-suave); font-size: 11px; }
.tabla-ficha td.positivo { color: var(--color-exito); }
.tabla-ficha td.negativo { color: var(--color-peligro); }
.boton-link-ficha { margin: 0 0 0 6px; padding: 2px 8px; font-size: 12px; border-radius: 6px; background: transparent; box-shadow: none;
    border: 1px solid var(--color-border); color: var(--color-accent-dark); cursor: pointer; }
.detalle-ficha { white-space: pre-line; background: var(--color-bg-soft); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 10px 0; }
.aviso-ficha { color: var(--color-peligro); font-weight: bold; margin: 0 0 6px; }
.titulo-venta-ficha { border-top: 1px solid var(--color-border); padding-top: 12px; }
@media (max-width: 480px) {
    .tabla-ficha { font-size: 12px; }
    .tabla-ficha td, .tabla-ficha th { padding: 5px 2px; }
    .tabla-ficha td:first-child { min-width: 70px; }
}

/* Ventas del turno, una por una (resumen del turno y botón "Ventas" de la caja) */
.boton-ver-ventas-turno { margin: 4px 0 8px; padding: 6px 12px; font-size: 13px; border-radius: 8px; cursor: pointer; box-shadow: none;
    background: transparent; color: var(--color-accent-dark); border: 1px solid var(--color-border); font-weight: bold; }
.ventas-turno { margin-bottom: 8px; }
.venta-turno { border-bottom: 1px solid var(--color-border); padding: 7px 2px; cursor: pointer; }
.venta-turno:hover, .venta-turno.abierta { background: var(--color-bg-soft); }
.venta-turno:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 1px; }
.venta-turno-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.venta-turno-fila small { display: block; color: var(--color-text-suave); font-size: 12px; }
.venta-turno-total { white-space: nowrap; font-weight: bold; }
.venta-turno.anulada .venta-turno-total { text-decoration: line-through; color: var(--color-text-suave); }
.etiqueta-anulada { font-size: 11px; color: var(--color-peligro); border: 1px solid var(--color-peligro); border-radius: 6px; padding: 0 4px; }
.venta-turno-detalle { padding: 4px 6px 2px; }

/* Lista de productos al escribir (caja e Ingresar Venta del panel) */
.lista-autocompletado {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px; text-align: left;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(22,22,22,0.18); max-height: 260px; overflow-y: auto;
}
.lista-autocompletado.abierta { display: block; }
.opcion-autocompletado { padding: 10px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.opcion-autocompletado:last-child { border-bottom: none; }
.opcion-autocompletado:hover { background: var(--color-primary-light); }
/* Stock: gris normal, amarillo al llegar al stock crítico, rojo sin stock */
.etiqueta-stock { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: bold;
    background: #f1f5f9; color: #475569; }
.etiqueta-stock.critico { background: #fef3c7; color: #92400e; }
.etiqueta-stock.sin { background: #fee2e2; color: #991b1b; }
.opcion-autocompletado.elegida { background: var(--color-primary-light); }
.contenedor-autocompletado { position: relative; flex: 1; min-width: 0; }
.contenedor-autocompletado input { width: 100%; box-sizing: border-box; }
/* Ingresar Venta / Ingresar Gasto en el celular: el buscador ocupa toda la fila (y su lista también) */
@media (max-width: 600px) {
    #form-pedido-container .input-grupo, #form-gasto-container .input-grupo { flex-wrap: wrap; }
    #form-pedido-container .contenedor-autocompletado, #form-gasto-container .contenedor-autocompletado { flex-basis: 100%; }
}

/* Ver Ventas / Ver Gastos: últimos, turno actual o por fechas */

/* Ver Ventas / Ver Gastos: filtros en una sola barra, con segmentadores (opciones pegadas) */
.barra-filtros { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 14px;
    margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.fila-filtro { display: flex; align-items: center; gap: 12px; min-width: 0; }
.etiqueta-filtro { flex: 0 0 64px; font-size: 12px; font-weight: bold; color: var(--color-text-suave); text-transform: uppercase; letter-spacing: .03em; }
.segmentado { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 10px; }
.segmentado::-webkit-scrollbar { display: none; }
.segmentado button { margin: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
    background: transparent; color: var(--color-text); border: none; border-radius: 8px; box-shadow: none; }
.segmentado button:hover { background: rgba(var(--color-primary-rgb), .08); filter: none; }
.segmentado button.activo, .segmentado button.activo:hover { background: var(--color-card); color: var(--color-accent-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.segmentado button.desplegado:not(.activo) { color: var(--color-accent-dark); }
.barra-filtros .filtro-fechas-lista { border-top: 1px solid var(--color-border); padding-top: 10px; }
.fila-filtro[hidden], .filtros-quien select[hidden] { display: none; }
/* "Descargar Excel" dentro de los filtros: descarga lo que se está mirando */
.fila-descarga-excel { display: flex; justify-content: flex-end; border-top: 1px solid var(--color-border); padding-top: 8px; }
.btn-descargar-excel { margin: 0; padding: 8px 14px; min-height: 40px; font-size: 14px; font-weight: 600; cursor: pointer;
    background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: none; }
@media (max-width: 600px) { .btn-descargar-excel { width: 100%; } }
.filtros-quien { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filtros-quien select { margin: 0; width: auto; max-width: 100%; min-height: 40px; font-size: 14px; }
.filtro-fechas-lista[hidden], .error-fechas[hidden] { display: none; }
.error-fechas { color: var(--color-peligro); font-size: 13px; font-weight: bold; margin: 6px 0 0; }
@media (max-width: 600px) {
    .fila-filtro { flex-direction: column; align-items: stretch; gap: 4px; }
    .etiqueta-filtro { flex-basis: auto; }
    .segmentado { display: flex; }
    .segmentado button { flex: 1 0 auto; }
    /* Formas de pago: 2 filas de 3 para que se lean todas sin deslizar */
    #filtros-pago-pedidos, #filtro-sucesos { display: grid; grid-template-columns: repeat(3, 1fr); }
    #filtros-pago-pedidos button, #filtro-sucesos button { padding: 6px 4px; }
}

/* ==============================================================================
   SUSCRIPCIÓN (suscripcion.js): aviso arriba del panel, planes y pago
   ============================================================================== */
.aviso-suscripcion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 0 auto 14px; max-width: 1100px; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 14px;
    background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.aviso-suscripcion.peligro { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.aviso-suscripcion button { margin: 0; padding: 6px 12px; font-size: 13px; }
.selector-intervalo { display: inline-flex; gap: 4px; padding: 4px; margin: 14px 0 10px; border-radius: 10px;
    background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.selector-intervalo button { margin: 0; padding: 8px 14px; background: transparent; color: var(--color-text);
    box-shadow: none; font-size: 14px; }
.selector-intervalo button.activo { background: var(--color-card); color: var(--color-accent-dark); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.selector-intervalo small { font-size: 11px; color: var(--color-exito); font-weight: bold; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan-tarjeta { position: relative; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px;
    display: flex; flex-direction: column; background: var(--color-card); }
.plan-tarjeta.recomendado { border: 2px solid var(--color-accent); }
.plan-tarjeta.actual { background: var(--color-bg-soft); }
.plan-tarjeta h3 { margin: 0 0 4px; }
.plan-etiqueta { position: absolute; top: -10px; right: 12px; background: var(--color-accent); color: var(--color-sobre-accent);
    font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 999px; }
.plan-descripcion { color: var(--color-text-suave); font-size: 13px; margin: 0 0 8px; }
.plan-precio { font-size: 24px; font-weight: 800; margin: 0; }
.plan-precio small { font-size: 13px; font-weight: normal; color: var(--color-text-suave); white-space: nowrap; }
.plan-total { font-size: 12px; color: var(--color-text-suave); margin: 2px 0 8px; }
.plan-tarjeta ul { padding-left: 18px; margin: 0 0 12px; font-size: 14px; flex: 1; }
.plan-tarjeta button { margin-top: auto; width: 100%; }
.plan-actual { position: relative; border: 2px solid var(--color-accent); border-radius: 12px; padding: 18px 16px 12px;
    margin: 14px 0 6px; background: var(--color-bg-soft); }
.plan-actual h3 { margin: 0 0 2px; }
.plan-actual h3 small { font-size: 13px; font-weight: normal; color: var(--color-text-suave); }
.plan-actual .fila-resumen small { display: block; font-size: 12px; color: var(--color-text-suave); text-align: right; }
.plan-actual ul { padding-left: 18px; margin: 10px 0 0; font-size: 14px; }
.plan-etiqueta-actual { position: absolute; top: -10px; left: 14px; background: var(--color-accent); color: var(--color-sobre-accent);
    font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 999px; }
.titulo-planes { margin: 18px 0 0; }
.caja-pago-pendiente { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: 12px; margin: 12px 0; }
.caja-pago-pendiente p { margin: 6px 0; }
.caja-pago-pendiente button { width: 100%; }
.opciones-pago { display: flex; gap: 10px; flex-wrap: wrap; }
.opciones-pago button { flex: 1; min-width: 140px; margin: 0; }
.historial-pagos { margin-top: 14px; }
.link-cancelar-suscripcion, .boton-secundario-suscripcion { background: none; box-shadow: none; color: var(--color-text-suave);
    text-decoration: underline; padding: 6px 0; margin-top: 12px; font-size: 13px; }
.boton-secundario-suscripcion { color: var(--color-accent-dark); font-weight: bold; }
/* Panel bloqueado por falta de pago: solo Mi Negocio → Mi Suscripción */
body.panel-bloqueado .nav-btn:not(#tab-cuenta) { opacity: .4; pointer-events: none; }
body.panel-bloqueado #panel-cuenta .tarjeta:not(#tarjeta-suscripcion) { display: none; }

/* Ingresar Gasto: fecha y N° del documento (lado a lado en pantallas anchas) */
.campos-documento { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .campos-documento { grid-template-columns: 1fr; } }
.aviso-mes-documento { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px;
    padding: 8px 10px; font-size: 13px; margin: 6px 0 0; }

/* Resumen del día: vista corta + "Ver detalle del día" */
.kpi-caja.ok b { color: var(--color-exito); }
.kpi-caja.falta b { color: var(--color-peligro); }
.kpi-caja.sobra b { color: #d97706; }
.medios-dia { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 14px; color: var(--color-text-suave); }
.medios-dia b { color: var(--color-text); }
.detalle-dia { margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 10px; }
.detalle-dia > summary { cursor: pointer; font-weight: bold; color: var(--color-accent-dark); padding: 6px 0; }


/* Botones que se tocan con el dedo: al menos 44 px (Ver Inventario, tabla de IVA) */
.boton-tocable { min-height: 44px; min-width: 44px; }
.acciones-producto { display: flex; align-items: center; justify-content: center; gap: 2px; }
.acciones-producto button { min-width: 44px; min-height: 44px; margin: 0; }
.boton-icono { background: none; border: none; box-shadow: none; font-size: 20px; padding: 4px; cursor: pointer; }
/* Ver Inventario: las tallas de un producto juntas bajo una fila resumen */
.fila-grupo td { background: var(--color-bg-soft); }
.boton-grupo { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    margin: 0; padding: 6px 4px; background: transparent; color: var(--color-text); border: none; box-shadow: none;
    text-align: left; font-size: 15px; cursor: pointer; }
.boton-grupo:hover { filter: none; background: transparent; }
.grupo-flecha { color: var(--color-accent-dark); font-weight: 600; font-size: 13px; white-space: nowrap; }
.grupo-tallas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
.talla-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--color-card); border: 1px solid var(--color-border); }
.talla-chip.bajo { color: var(--color-peligro); border-color: var(--color-peligro); }
.fila-inventario-talla td.celda-nombre { padding-left: 24px; }
@media (max-width: 600px) {
    #tabla-inventario tr.fila-grupo { padding: 4px 10px; background: var(--color-bg-soft); }
    #tabla-inventario td.celda-grupo { display: block; text-align: left; }
    #tabla-inventario tr.fila-inventario-talla { margin-left: 14px; }
    .fila-inventario-talla td.celda-nombre { padding-left: 0; }
}
@media (max-width: 600px) {
    /* Ver Inventario en el celular: cada producto es una tarjeta (la tabla no se achica
       y los botones quedan del tamaño del dedo) */
    #tabla-inventario, #tabla-inventario tbody { display: block; width: 100%; }
    #tabla-inventario thead { display: none; }
    #tabla-inventario tr { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 10px;
        padding: 8px 12px; margin-bottom: 10px; background: var(--color-card); }
    #tabla-inventario td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 3px 0; text-align: right; }
    #tabla-inventario td::before { content: attr(data-label); color: var(--color-text-suave); font-weight: normal; text-align: left; }
    #tabla-inventario td.celda-nombre { order: -1; font-weight: bold; font-size: 16px; text-align: left; padding-bottom: 6px; }
    #tabla-inventario td.celda-nombre::before, #tabla-inventario td.celda-acciones::before,
    #tabla-inventario td[colspan]::before { content: none; }
    #tabla-inventario td.celda-acciones { margin-top: 4px; border-top: 1px solid var(--color-border); padding-top: 6px; }
    .acciones-producto { justify-content: flex-end; width: 100%; gap: 8px; }
    .acciones-producto .boton-link-ficha { padding: 0 16px; font-size: 14px; }
}

/* Productos que no controlan stock (products.track_stock) */
.sin-control { color: var(--color-text-suave); font-style: italic; }
#bloque-tallas.sin-stock .t-stock { display: none; }

/* Ventanas solo para ver (fichas, lotes, resúmenes): una X arriba a la derecha en vez de "Cerrar" abajo */
/* sticky + float: queda a la vista aunque la ficha sea larga y tenga scroll */
.modal-x { position: sticky; top: 0; float: right; z-index: 1; width: 44px; height: 44px; margin: -12px -10px 0 8px; padding: 0; border: none; border-radius: 50%;
    background: var(--color-card); box-shadow: none; color: var(--color-text-suave); font-size: 22px; line-height: 44px; cursor: pointer; }
.modal-x:hover, .modal-x:focus-visible { background: var(--color-bg-soft, #f3f4f6); color: var(--color-text); }

/* Agregar producto: precio | costo y stock | stock crítico en una matriz de 2 x 2 */
.matriz-producto { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-card); }
.fila-matriz { display: grid; grid-template-columns: 1fr 1fr; }
.fila-matriz + .fila-matriz { border-top: 1px solid var(--color-border); }
.celda-matriz { padding: 8px 12px 10px; min-width: 0; }
.celda-matriz + .celda-matriz { border-left: 1px solid var(--color-border); }
.celda-matriz label { margin-top: 0; }
.matriz-producto .celda-matriz input { width: 100%; max-width: none; box-sizing: border-box; }
.ayuda-celda { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--color-text-suave); }
#formulario-producto label small { font-weight: normal; color: var(--color-text-suave); }
.checks-producto { display: grid; gap: 6px; margin-top: 12px; }
.checks-producto .check-tallas { margin-top: 0; padding: 8px 12px; font-size: 14px; font-weight: normal; }
.checks-producto .check-tallas small { color: var(--color-text-suave); }
.fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fila-dos > div { min-width: 0; }
.fila-dos input, .fila-dos select { width: 100%; max-width: none; box-sizing: border-box; }
.mas-datos-producto { margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.mas-datos-producto > summary { cursor: pointer; font-weight: bold; color: var(--color-accent-dark); padding: 8px 0; }

#bloque-stock-simple[style*="none"] + .celda-matriz { border-left: none; }   /* modo tallas: el stock va por talla */

/* Casillas dentro de la matriz de Agregar producto ("Lo compro con factura", "Exento de IVA") */
.check-celda { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; font-size: 13px; font-weight: normal !important;
    color: var(--color-text) !important; cursor: pointer; min-height: 32px; }
.check-celda input { width: 18px !important; height: 18px; margin: 0; flex: none; }
.check-celda small { color: var(--color-text-suave); }
.franja-matriz { border-top: 1px solid var(--color-border); padding: 4px 12px 6px; }
.franja-matriz .check-celda { margin-top: 0 !important; }

#bloque-gasto-con-iva { font-size: 14px; margin-top: 10px; }
#bloque-gasto-con-iva small { color: var(--color-text-suave); }

/* Pestaña de una función que el plan no trae (admin.html → aplicarPlanEnPanel) */
.nav-btn.bloqueada-plan { color: var(--color-text-suave); }
.nav-btn.bloqueada-plan::after { content: "Plan Negocio"; display: block; font-size: 11px; font-weight: normal; color: var(--color-text-suave); }
.nav-btn.bloqueada-plan.activo::after { color: inherit; }

/* Caja del vendedor: inventario para consultar y anotar un gasto (caja_vendedor.js) */
.lista-inventario-vendedor { max-height: 55vh; overflow-y: auto; margin-top: 6px; }
.lista-inventario-vendedor .fila-resumen small, .linea-gasto-vendedor small { display: block; font-size: 12px; color: var(--color-text-suave); }
.lista-inventario-vendedor .fila-resumen > span:last-child { text-align: right; white-space: nowrap; }
.lista-autocompletado-simple { display: flex; flex-direction: column; }
.lista-autocompletado-simple .opcion-autocompletado { text-align: left; background: var(--color-card); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 8px; margin: 4px 0 0; box-shadow: none; font-weight: normal; }
.linea-gasto-vendedor { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 8px; align-items: end;
    border-bottom: 1px solid var(--color-border); padding: 8px 0; }
.linea-gasto-vendedor > span { grid-column: 1 / -1; font-weight: bold; font-size: 14px; }
.linea-gasto-vendedor label { font-size: 12px; margin: 0; }
.linea-gasto-vendedor input { margin-top: 2px; }
.linea-gasto-vendedor .boton-quitar { width: 40px; min-height: 40px; margin: 0; padding: 0; background: var(--color-peligro); }
.casilla-linea { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-top: 10px; }
.casilla-linea input { width: auto; margin: 0; }

/* Pestaña IVA: lo que se paga y lo que se recupera (admin.html → cargarIva) */
.kpis-iva { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 12px; }
.kpis-iva > div { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.kpis-iva span { font-size: 13px; color: var(--color-text-suave); }
.kpis-iva b { font-size: 22px; }
.kpis-iva small { font-size: 12px; color: var(--color-text-suave); }
.kpis-iva .mayor { border: 2px solid var(--color-accent); }
.kpis-iva .mayor span::after { content: " · mayor"; font-weight: bold; color: var(--color-accent-dark); }
.etiqueta-revisado { display: inline-block; background: #dcfce7; color: #14532d; border-radius: 8px; padding: 4px 10px; font-size: 13px; margin: 0 0 6px; }
@media (max-width: 420px) { .kpis-iva { grid-template-columns: 1fr; } }

.resumen-iva h3 { margin: 4px 0 8px; }
.kpis-iva > div small { line-height: 1.35; }
.conclusion-iva { font-size: 17px; padding: 12px 14px; border-radius: 12px; margin: 4px 0 6px; }
.conclusion-iva.paga { background: #fff7ed; color: #7c2d12; }
.conclusion-iva.favor { background: #ecfdf5; color: #14532d; }
.bloque-iva { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 10px; }
.bloque-iva h4 { margin: 0 0 6px; }
.corregir-iva { margin-top: 22px; }

/* Cierre de caja: compartir e imprimir (turno_caja.js, _conectarAccionesCierre) */
.acciones-cierre { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.acciones-cierre button { flex: 1 1 140px; margin-top: 0; }
@media print {
    body.imprimiendo-cierre > *:not(.para-imprimir) { display: none !important; }
    body.imprimiendo-cierre { background: #fff; }
    body.imprimiendo-cierre .para-imprimir { position: static; background: none; display: block; padding: 0; }
    body.imprimiendo-cierre .para-imprimir .modal-caja { box-shadow: none; max-height: none; overflow: visible; width: 100%; max-width: none; }
    body.imprimiendo-cierre .para-imprimir button { display: none !important; }
}

/* Mi Negocio → Tus datos: buscar un cliente (admin.js, buscarClientesDatos) */
.buscador-clientes-datos { display: flex; gap: 8px; align-items: center; }
.buscador-clientes-datos input { flex: 1; min-width: 0; margin: 0; }
.buscador-clientes-datos button { margin: 0; flex: 0 0 auto; }

/* Caja → Resumen del día: ganancia − gastos = resultado (admin.js, cargarResumenDia) */
.resultado-dia { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 10px 0 0; padding: 10px 12px;
    border-radius: 10px; background: var(--color-bg-soft); border: 1px solid var(--color-border); font-size: 14px; }
.resultado-dia b { font-size: 16px; }
.resultado-dia small { flex-basis: 100%; color: var(--color-text-suave); }
.resultado-dia.falta b { color: var(--color-peligro); }

/* Ingresar Gasto → "Por pagar": fecha de vencimiento (admin.js, mostrarSiEfectivo) */
.bloque-vence { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.bloque-vence .botones-rapidos { margin-top: 6px; }

/* Rubro del negocio (registro.html y crear_negocio.html): una opción por fila, fácil de tocar */
.opciones-rubro { display: grid; gap: 8px; }
.opcion-rubro { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; background: var(--color-card); }
.opcion-rubro input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; }
.opcion-rubro b { display: block; font-size: 14px; color: var(--color-text); }
.opcion-rubro small { display: block; font-size: 12px; color: var(--color-text-suave); margin-top: 2px; line-height: 1.35; }
.opcion-rubro:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* Ingresar producto: código recién leído con la pistola (un destello verde) y aviso si ya existe */
@keyframes destello-codigo-leido { from { background: #dcfce7; border-color: var(--color-exito); } }
.codigo-leido { animation: destello-codigo-leido 1.2s ease-out; }
.aviso-codigo-existente { margin: -4px 0 10px; font-size: 13px; color: var(--color-advertencia-texto); }

/* Ver Ventas: buscar por cliente y total en verde bajo la lista (vendido, costo, utilidad) */
.filtro-cliente { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; }
.total-ventas-lista { margin: 6px 0 14px; padding: 14px; border-radius: 12px; background: #ecfdf3; border: 1px solid #a7e3bd; color: var(--color-exito-oscuro); }
.total-ventas-lista h4 { margin: 0 0 10px; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.total-ventas-lista h4 small { font-weight: normal; font-size: 13px; }
.totales-ventas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .totales-ventas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.totales-ventas div { background: #fff; border-radius: 8px; padding: 8px; min-width: 0; }
.totales-ventas span { display: block; font-size: 12px; color: var(--color-text-suave); }
.totales-ventas b { display: block; font-size: 16px; color: var(--color-exito-oscuro); overflow-wrap: anywhere; }
.totales-ventas .destacado { background: var(--color-exito); }
.totales-ventas .destacado span, .totales-ventas .destacado b { color: #fff; }
.total-ventas-lista p { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-exito-oscuro); }

/* Mi Negocio: comisión de las máquinas (débito y crédito en una fila; en celular se ordenan solos) */
.fila-comision { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fila-comision label { display: flex; flex-direction: column; gap: 4px; font-weight: normal; flex: 1 1 120px; max-width: 160px; }
.fila-comision input { width: 100%; box-sizing: border-box; }
.fila-comision button { flex: 0 0 auto; width: auto; }

/* ---------------------------------------------------------------- CATÁLOGO PÚBLICO (catalogo.html) */
.pagina-catalogo { margin: 0; font-family: Arial, sans-serif; background: var(--color-bg); color: var(--color-text); padding-bottom: 90px; }
.catalogo-encabezado { position: sticky; top: 0; z-index: 5; background: var(--color-card); padding: 14px 16px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.catalogo-encabezado h1 { margin: 0; font-size: 22px; }
.catalogo-encabezado p { margin: 2px 0 0; font-size: 13px; color: var(--color-text-suave); }
.catalogo-encabezado input { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; font-size: 15px; }
.catalogo-categorias { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.catalogo-categorias button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text); font-size: 13px; cursor: pointer; min-height: 36px; }
.catalogo-categorias button.activo { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.catalogo-lista { max-width: 1100px; margin: 0 auto; padding: 12px; }
/* En pantallas anchas el encabezado se alinea con la cuadrícula (centrado, mismo ancho) */
.catalogo-encabezado { padding-left: max(16px, calc((100% - 1076px) / 2)); padding-right: max(16px, calc((100% - 1076px) / 2)); }
.catalogo-categoria-tarjeta { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-suave); }
.catalogo-aviso { text-align: center; color: var(--color-text-suave); padding: 40px 8px; }
/* Tarjetas una al lado de la otra: 2 en el celular, más en pantallas anchas */
.catalogo-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .catalogo-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 960px) { .catalogo-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.catalogo-tarjeta { display: flex; flex-direction: column; background: var(--color-card); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .07); cursor: pointer; min-width: 0; }
.catalogo-tarjeta:focus-visible { outline: 3px solid var(--color-accent); }
.catalogo-foto { aspect-ratio: 1 / 1; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.catalogo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogo-sin-foto { font-size: 40px; font-weight: bold; color: var(--color-text-suave); }
.catalogo-datos { display: flex; flex-direction: column; flex: 1; padding: 8px 10px 10px; min-width: 0; }
.catalogo-datos h3 { margin: 0 0 2px; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.catalogo-marca { margin: 0 0 4px; font-size: 12px; color: var(--color-text-suave); }
.catalogo-ver-mas { align-self: flex-start; margin: 4px 0 0; font-size: 12px; color: var(--color-accent-dark); text-decoration: underline; }
.catalogo-pie-tarjeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.catalogo-precio { font-size: 16px; font-weight: bold; }
.catalogo-promo { align-self: flex-start; display: inline-block; margin: 4px 4px 0 0; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: bold; }
.catalogo-agregar { padding: 8px 12px; border-radius: 999px; border: none; background: var(--color-accent); color: #fff; font-weight: bold; cursor: pointer; min-height: 36px; font-size: 13px; }
.catalogo-cantidad { display: inline-flex; align-items: center; gap: 8px; }
.catalogo-cantidad button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card); font-size: 18px; cursor: pointer; }
.catalogo-agotado { font-size: 12px; color: var(--color-peligro); font-weight: bold; }
/* Ficha del producto: a pantalla completa en el celular, ventana en el computador */
.catalogo-ficha { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.catalogo-ficha[hidden] { display: none; }
.catalogo-ficha-caja { position: relative; background: var(--color-card); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding-bottom: 90px; }
@media (min-width: 640px) { .catalogo-ficha { align-items: center; } .catalogo-ficha-caja { border-radius: 18px; padding-bottom: 16px; } }
.catalogo-ficha-cerrar { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .92); font-size: 18px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.catalogo-ficha-foto { aspect-ratio: 1 / 1; max-height: 60vh; width: 100%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.catalogo-ficha-foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.catalogo-ficha-datos { padding: 14px 16px; }
.catalogo-ficha-datos h2 { margin: 0 0 4px; font-size: 20px; }
.catalogo-ficha-datos h4 { margin: 14px 0 4px; }
.catalogo-ficha-descripcion { white-space: pre-line; line-height: 1.5; font-size: 15px; margin: 10px 0; }
.catalogo-variante { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
body.ficha-abierta { overflow: hidden; }
.catalogo-pedido { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--color-card); box-shadow: 0 -2px 10px rgba(0, 0, 0, .1); }
.catalogo-pedido button { display: block; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px; border: none; border-radius: 12px; background: #25d366; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; }
.catalogo-pie { text-align: center; font-size: 12px; color: var(--color-text-suave); padding: 0 16px; }

/* ---------------------------------------------------------------- PESTAÑA CATÁLOGO (panel) */
.tarjeta-catalogo { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.casilla-catalogo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-weight: normal; }
.casilla-catalogo input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; }
.casilla-catalogo small { display: block; color: var(--color-text-suave); font-size: 12px; }
.link-catalogo input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; background: var(--color-bg-soft); }
.botones-link-catalogo { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.botones-link-catalogo button, .botones-link-catalogo a { flex: 1 1 110px; width: auto; text-align: center; padding: 10px; border-radius: 8px; font-size: 14px; }
.botones-link-catalogo a { border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; background: var(--color-card); }
.boton-texto { width: auto; background: none; border: none; box-shadow: none; padding: 4px 0; color: var(--color-accent-dark); text-decoration: underline; cursor: pointer; font-size: 13px; }
.boton-texto.peligro { color: var(--color-peligro); }
#catalogo-buscar-producto { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 10px; }
.fila-catalogo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.fila-catalogo.fuera { opacity: .55; }
.miniatura-catalogo { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px dashed var(--color-primary-borde); background: var(--color-bg-soft); font-size: 22px; cursor: pointer; box-shadow: none; }
.miniatura-catalogo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-catalogo.subiendo { opacity: .4; }
.datos-fila-catalogo { flex: 1; min-width: 0; }
.datos-fila-catalogo b, .datos-fila-catalogo small { display: block; overflow-wrap: anywhere; }
.datos-fila-catalogo small { color: var(--color-text-suave); font-size: 12px; }
.acciones-fila-catalogo { display: flex; gap: 12px; }
.interruptor-catalogo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: normal; flex-shrink: 0; }
.interruptor-catalogo input { width: 20px; height: 20px; margin: 0; }

/* Dashboard: resumen de la utilidad por día y ranking de clientes */
.resumen-utilidad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.resumen-utilidad div { background: #ecfdf3; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.resumen-utilidad span { display: block; font-size: 12px; color: var(--color-text-suave); }
.resumen-utilidad b { display: block; font-size: 15px; color: var(--color-exito-oscuro); overflow-wrap: anywhere; }
@media (max-width: 480px) { .resumen-utilidad { grid-template-columns: 1fr; } }
.ranking-clientes { list-style: none; margin: 10px 0 0; padding: 0; }
.ranking-clientes li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.ranking-clientes .puesto { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; }
.ranking-clientes li.primero .puesto { background: #fef3c7; color: #92400e; }
.ranking-clientes .quien { flex: 1; min-width: 0; }
.ranking-clientes .cuanto { text-align: right; flex-shrink: 0; }
.ranking-clientes b, .ranking-clientes small { display: block; overflow-wrap: anywhere; }
.ranking-clientes small { font-size: 12px; color: var(--color-text-suave); }

/* Ingresar producto: leer el código con la cámara */
.boton-camara-producto { width: auto; margin: -4px 0 12px; padding: 8px 12px; font-size: 14px; background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; }
/* Caja: el único botón de Excel y sus opciones (una hoja por casilla) */
.fila-excel-caja { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.fila-excel-caja .boton-excel { width: auto; }
.opciones-excel-caja { display: grid; gap: 4px; }
.lector-ultimo { margin: 10px 0 0; font-weight: bold; text-align: center; }
.lector-producto { width: 100%; max-width: 360px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; min-height: 200px; }

/* Resumen del turno / cierre: tres números arriba y lo demás plegado (htmlResumenTurno en turno_caja.js) */
.kpis-turno { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.kpis-turno div { background: var(--color-bg-soft); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.kpis-turno span { display: block; font-size: 12px; color: var(--color-text-suave); }
.kpis-turno b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.kpis-turno small { display: block; font-size: 11px; color: var(--color-text-suave); }
.kpis-turno .ok { background: #ecfdf3; } .kpis-turno .ok b { color: var(--color-exito-oscuro); }
.kpis-turno .falta { background: #fef2f2; } .kpis-turno .falta b { color: var(--color-peligro-oscuro); }
.kpis-turno .sobra { background: #fff7ed; } .kpis-turno .sobra b { color: #c2410c; }
.kpis-turno .destacado { background: var(--color-exito); } .kpis-turno .destacado span, .kpis-turno .destacado b, .kpis-turno .destacado small { color: #fff; }
.mas-detalle-turno { margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.mas-detalle-turno summary { cursor: pointer; font-weight: bold; color: var(--color-accent-dark); padding: 6px 0; }