/* ponytail: CSS plano, sin framework. Botones grandes desde ya para que el
   salto a una app Android (WebView) no requiera rediseñar nada. */
/* Manrope: tipografía de marca (ver BRANDING.md del brand kit, julio 2026).
   Servida desde el repo, NO desde Google Fonts. El @import remoto que había
   acá bloqueaba el render y, sin internet, dejaba la app sin la tipografía de
   marca: el portable corre en la PC del local y no tiene red garantizada.
   Son los mismos 4 pesos que pedía el @import, ni uno más: font-weight:600
   (que usan .nav-btn y la landing) lo sigue sintetizando el navegador desde
   el 700, igual que antes. Agregar el 600 real sería un cambio visual.
   Los .woff2 son el subset latin de @fontsource/manrope 5.3.0, SIL OFL
   (ver LICENSE-Manrope.txt al lado). Cada superficie tiene su copia a
   propósito -- mismo criterio que favicon.ico, que ya está duplicado en las
   tres -- para que ninguna dependa del docroot de otra.
   Un solo bloque acá en vez de <link> en cada .php -- son ~25 páginas y
   todas ya cargan este mismo style.css. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fuentes/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fuentes/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fuentes/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fuentes/manrope-latin-800-normal.woff2') format('woff2');
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Variables de color: body.oscuro las pisa para el modo oscuro (Opciones → Negocio). */
:root {
    --color-fondo: #f2f2f2;
    --color-superficie: #ffffff;
    --color-texto: #111827;
    --color-texto-secundario: #666666;
    --color-borde: #cccccc;
    --color-borde-suave: #eeeeee;
    --color-hover: #e5e7eb;
    --color-boton-suave: #e5e7eb;
    --color-barra-fondo: #e5e7eb;
    --color-error-bg: #fee2e2;
    --color-error-texto: #991b1b;
    --color-ok-bg: #dcfce7;
    --color-ok-texto: #166534;
    --color-aviso-bg: #fef3c7;
    --color-aviso-texto: #92400e;
    --color-vencido-bg: #fee2e2;
    --color-link: var(--sp-navy-700);
    --color-nav-fondo: #e5e7eb;
    --color-nav-boton: #ffffff;
    --color-nav-texto: #111827;

    /* ---- Marca Speed POS (BRANDING.md v1.2, julio 2026) ---- */
    --sp-navy-900: #0C1526;
    --sp-navy-700: #16233D;
    --sp-navy-500: #2F3F5F;
    --sp-navy-200: #9FA9BC;
    --sp-navy-50: #EDF0F5;
    --sp-amber-800: #9A5304;
    --sp-amber-600: #C46B06;
    --sp-amber-500: #E8830C;
    --sp-amber-300: #FFC24B;
    --sp-amber-50: #FEF3E2;
    --sp-sand: #F5F4F0;
    --sp-teal-800: #0B6E66;
    --sp-teal-600: #0E9488;
    --sp-teal-300: #4FD1C2;
    --sp-success: #0F6E56;
    --sp-danger: #B3261E;
    /* Acento de TEXTO/borde de Speed POS Restaurantes: Teal 800 sobre
       superficie clara, Teal 300 sobre superficie oscura (si no, el
       contraste se rompe en modo oscuro -- ver BRANDING.md §3). Los rellenos
       (botones/chips) siempre usan Teal 800 fijo, con texto blanco. */
    --sp-acento-texto: var(--sp-teal-800);
}
body.oscuro {
    --color-fondo: #0f172a;
    --color-superficie: #1e293b;
    --color-texto: #e5e7eb;
    --color-texto-secundario: #9ca3af;
    --color-borde: #334155;
    --color-borde-suave: #334155;
    --color-hover: #334155;
    --color-boton-suave: #334155;
    --color-barra-fondo: #334155;
    --color-error-bg: #451a1a;
    --color-error-texto: #fca5a5;
    --color-ok-bg: #14532d;
    --color-ok-texto: #86efac;
    --color-aviso-bg: #451a03;
    --color-aviso-texto: #fbbf24;
    --color-vencido-bg: #451a1a;
    --color-link: var(--sp-amber-300);
    --color-nav-fondo: #1f2937;
    --color-nav-boton: #374151;
    --color-nav-texto: #ffffff;
    --sp-acento-texto: var(--sp-teal-300);
}

body {
    font-family: 'Manrope', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 18px;
    /* Números tabulares en todos lados (precios, cantidades, totales) para que
       las columnas no salten al cambiar un dígito -- ver BRANDING.md §4. Sin
       efecto sobre letras, así que es seguro aplicarlo global en vez de una
       clase .sp-num a mano en cada plantilla. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.nav-bar { display: none; }
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-nav-fondo);
    padding: 10px;
}
.nav-btn {
    flex: 1;
    text-align: center;
    /* 6px de padding lateral y no 10: con el icono adelante, "Herramientas"
       necesitaba 6px mas de los que le quedaban y se cortaba. El padding
       VERTICAL queda en 16 -- el alto del boton es el area tactil y no se
       toca. */
    padding: 16px 6px;
    background: var(--color-nav-boton);
    color: var(--color-nav-texto);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 120px;
}
.nav-btn.activo { background: var(--sp-teal-800); color: #fff; }

/* ---- Iconos de interfaz (ver partials/iconos.php) ----
   1.15em y no un tamano fijo en px: asi el icono sigue al texto del boton en
   cada pantalla en vez de quedar chico o gigante segun donde se use.
   fill:currentColor es lo que hace que funcione en claro y en oscuro.
   flex:0 0 auto para que no se estire cuando el contenedor es flex. */
.ico { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor;
       /* vertical-align para cuando el icono va INLINE al lado de texto
          ("[printer] Imprimir ticket"): un svg se apoya en la linea base y
          sin esto queda bajo respecto del texto. En un contenedor flex
          (.nav-btn, .admin-subnav-btn) el navegador lo ignora, asi que la
          misma clase sirve para los dos usos. */
       vertical-align: -0.125em; }
/* El gap reemplaza al espacio que antes venia pegado al emoji dentro del
   string de la etiqueta. Se centra por flex y no por text-align, que no podia
   alinear verticalmente el glifo contra el texto. */
/* gap .2em: con .3 el nav entraba justo salvo "Herramientas", que se pasaba
   por 2px. Es el ultimo ajuste que quedaba sin tocar el alto del boton ni
   ninguna etiqueta. Medido a 1280 / 1024 / 820 px. */
.nav-btn { display: flex; align-items: center; justify-content: center; gap: .2em; }
/* min-width:0 y NADA mas. Sin esto, el span (item flex) no puede encogerse
   por debajo de su contenido y "Administración" quedaba cortada. Con esto
   vuelve a desbordar sobre el padding, que es exactamente lo que hacia antes
   de los iconos, cuando el boton era un bloque con text-align:center.
   Se probo overflow-wrap:anywhere y quedaba peor: partia "Administra/ción" y
   "Herramient/as" al medio. Que el quiebre de palabra siga siendo el normal:
   parte en el espacio ("Pedidos / Online") y no dentro de una palabra.
   ("Mostrador/Takeout" se corta, pero ya se cortaba antes de esta etapa: el
   nav esta pasado de items y eso se arregla con su jerarquia, no aca.) */
/* 2026-09-26 (docs/plan-nav-pos.md): ya no. Con los secundarios angostos
   (abajo) los principales tienen lugar, así que la etiqueta vuelve a medir lo
   que mide su texto y en UNA línea: "Pedidos / Online" partido agrandaba el nav
   24px en todas las pantallas. Si en algún ancho no entra, el nav pasa a otra
   fila (flex-wrap), que se ve bien; lo que no pasa más es que se corte. */
.nav-btn span { white-space: nowrap; }
/* Y el botón principal nunca más angosto que su etiqueta: el min-width de
   120px de .nav-btn le ganaba al texto y "Pedidos Online" se cortaba abajo de
   1100px. Con esto, cuando no entra, el botón baja de fila en vez de cortarse.
   (Los cortos igual quedan anchos: flex:1 les reparte el lugar que sobra.) */
.nav > .nav-btn:not(.nav-btn-sec) { min-width: max-content; }
/* Área táctil mínima. En modo compacto, cuando el nav va en dos filas, ningún
   botón queda estirado por el círculo de Ayuda de al lado (que baja con los
   secundarios) y quedaban de 37px. En una fila no cambia nada: la fila ya
   mide 56. */
.nav .nav-btn { min-height: 44px; }

/* ---- Secundarios del nav (Inventario, Admin, Herramientas, Bloquear) ----
   Angostos, con el icono arriba y la etiqueta abajo, en letra más chica: se
   usan pocas veces por turno y no necesitan el mismo ancho que las pantallas
   de venta. Mismo alto de fila que los principales (el flex los estira), así
   que el área táctil no baja. */
.nav-btn.nav-btn-sec {
    flex: 0 0 auto;
    min-width: 76px;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    font-size: .85rem;
}
.nav-btn.nav-btn-sec .ico { width: 1.45em; height: 1.45em; }
/* La línea entre los dos grupos. */
.nav-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 4px; background: var(--color-borde); }
/* Secundarios + Ayuda son UN ítem de la fila: si no entran, bajan juntos a la
   segunda fila, a la derecha (margin-left:auto; en la primera fila no hace
   nada, porque los principales con flex:1 ya se llevaron todo el lugar). */
.nav-secundarios { flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; }
/* Entre 701 y 1023px el caso completo (4 principales + 4 secundarios) necesita
   983px: con 2px menos de separación y de padding lateral entra en una fila
   hasta ~950px. Medido con Claude outputs/medir-nav.js. */
@media (min-width: 701px) and (max-width: 1023px) {
    .nav, .nav-secundarios { gap: 6px; }
    .nav-btn.nav-btn-sec { padding-left: 8px; padding-right: 8px; }
}
.admin-subnav-btn { display: inline-flex; align-items: center; gap: .45em; }
/* Las solapas de Opciones llevan icono desde la tanda 2 (el valor de $tabs
   en opciones.php). Mismo criterio que el sub-nav. */
.opciones-tab { display: inline-flex; align-items: center; gap: .4em; }

/* Punto de estado de "Tomando pedidos" (pedidos_entrantes.php). Reemplaza
   al par de emoji verde/rojo, que no se podian tenir y se veian distinto en
   cada sistema. El color sale de los tokens de marca, asi que sigue al tema.
   Es estado REAL del local, no decoracion: por eso sigue siendo un punto y
   no se reemplaza por un icono. */
.punto-estado { display: inline-block; width: .7em; height: .7em; border-radius: 50%; }
.punto-estado.si { background: var(--sp-success); }
.punto-estado.no { background: var(--sp-danger); }

/* El boton de WhatsApp lleva el icono adentro desde la tanda 3 (lo agrega
   botonWhatsapp(), no el llamador: esa funcion escapa su $texto). */
.btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }

/* ---- Botón de ayuda del nav (ver partials/nav.php) ----
   Último ítem, a la derecha: círculo con un "?" en desktop, y en mobile la
   fila normal del menú hamburguesa con la etiqueta "Ayuda" al lado. No usa
   flex:1 como los demás .nav-btn a propósito -- es un ícono, no una sección,
   así que no tiene que estirarse para ocupar la fila. */
.nav-ayuda { position: relative; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; }
.nav-btn-ayuda {
    flex: 0 0 auto;
    min-width: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--sp-teal-800);
    border-radius: 50%;
    background: var(--color-nav-boton);
    color: var(--sp-acento-texto);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-btn-ayuda:hover { background: var(--color-hover); }
.nav-ayuda-texto { display: none; }
.nav-ayuda-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 250px;
    padding: 6px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-ayuda-item {
    display: block;
    padding: 14px 16px;
    border-radius: 8px;
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
}
.nav-ayuda-item:hover { background: var(--color-hover); }

/* Reloj de tiempo real, justo debajo de la fila de botones del nav (ver
   partials/nav.php) -- mismo fondo que el nav para leerse como parte de esa
   barra y no como un aviso o contenido de la página. */
.reloj-nav {
    text-align: center;
    padding: 6px 10px;
    background: var(--color-nav-fondo);
    color: var(--color-texto-secundario);
    font-weight: 700;
    font-size: .95rem;
}

.contenido { padding: 14px; max-width: 1300px; margin: 0 auto; }

/* ---- Sub-nav de Administración (Reportes/Productos/Clientes/Compras/Ajustar stock) ---- */
.admin-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.admin-subnav-btn {
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-decoration: none;
    cursor: pointer;
}
.admin-subnav-btn.activo { background: var(--sp-teal-800); color: #fff; border-color: var(--sp-teal-800); }
.admin-subnav-salir { border-color: var(--sp-danger); color: var(--sp-danger); margin-left: auto; }
.admin-subnav-salir:hover { background: var(--color-error-bg); }

/* ---- Pestañas de subsección dentro de una pantalla (opciones.php) ---- */
/* Subrayado y no pastillas a propósito: .admin-subnav (acá arriba) ya ocupa
   una fila de botones, y dos filas de pastillas idénticas se leerían como dos
   barras de navegación en vez de "secciones DE esta pantalla". */
/* gap horizontal en 0 para que los subrayados de las pestañas inactivas
   formen una sola línea continua en vez de segmentos cortados. */
.opciones-tabs { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 8px 0 16px; }
.opciones-tab {
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    text-decoration: none;
    border-bottom: 3px solid var(--color-borde-suave);
    white-space: nowrap;
}
.opciones-tab:hover { color: var(--color-texto); }
.opciones-tab.activo { color: var(--sp-acento-texto); border-bottom-color: var(--sp-acento-texto); }
body.compacto .opciones-tab { padding: 8px 12px; font-size: .9rem; }

/* ---- Favoritos de Opciones (opciones.php): el corazón a la derecha de cada
   opción. La fila es flex para que el corazón quede al costado del bloque
   entero (label + campo + explicación) y no se meta entre el label y su
   campo. margin-top igual al del primer label de la fila, así queda a la
   altura del nombre de la opción. 44x44: área de toque mínima. */
.opcion-fila { display: flex; align-items: flex-start; gap: 8px; }
.opcion-cuerpo { flex: 1 1 auto; min-width: 0; }
.opcion-fav {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-top: 2px; padding: 0;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--color-texto-secundario); font-size: 1.4rem; cursor: pointer;
}
.opcion-fav:hover { background: var(--color-hover); }
.opcion-fav:focus-visible { outline: 2px solid var(--sp-acento-texto); outline-offset: 2px; }
.opcion-fav:disabled { opacity: .5; cursor: wait; }
.opcion-fav .ico-fav-si { display: none; }
.opcion-fav.es-favorita { color: var(--sp-danger); }
.opcion-fav.es-favorita .ico-fav-si { display: block; }
.opcion-fav.es-favorita .ico-fav-no { display: none; }
/* Tarjeta independiente (tramos, contraseñas, copia): el corazón en el título. */
.form-card .opcion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.form-card .opcion-titulo .opcion-fav { margin-top: 0; }
/* En Favoritos, cada grupo lleva el nombre de la pestaña de la que viene. */
.form-card .favoritos-grupo {
    display: flex; align-items: center; gap: .4em;
    margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--color-borde-suave);
    color: var(--color-texto-secundario);
}
/* Desmarcada estando en Favoritos: queda atenuada hasta la próxima vez. */
.opcion-desmarcada > :not(.opcion-fav):not(.opcion-titulo) { opacity: .45; }

/* Selector de hora (horario automático de Pedidos Online, opciones.php): a lo
   ancho de la tarjeta queda un campo enorme con "08:15" perdido en el medio. */
.form-card input[type=time] { max-width: 180px; }

/* Horario automático en dos turnos (opciones.php → Pedidos Online): un recuadro
   por turno y, adentro, la apertura y el cierre uno al lado del otro. Sin el
   recuadro, cuatro tildes seguidas se leen como una lista suelta y no se ve de
   un vistazo qué hora es de qué turno. */
.form-card .turno-bloque {
    border: 2px solid var(--color-borde-suave);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
}
.form-card .turno-bloque > strong { display: block; }
.form-card .turno-campos { display: flex; flex-wrap: wrap; gap: 4px 28px; }
/* flex: 1 1 220px = las dos columnas se reparten el ancho de la tarjeta y se
   apilan solas cuando no entran (celular). */
.form-card .turno-campo { flex: 1 1 220px; }

/* ---- Opciones -> Pedidos Online: apariencia del menú ----
   La vista previa es una maqueta del menú PÚBLICO, así que va siempre en
   claro, con los grises de pedidos-online/style.css, aunque el POS esté en
   modo oscuro. Los tres --pv-* los escribe el JS de opciones.php con la misma
   cuenta que usa el menú de verdad (derivarColoresAcento() en config.php). */
.form-card .apariencia-titulo { margin: 24px 0 2px; padding-top: 16px; border-top: 1px solid var(--color-borde-suave); }
.form-card .apariencia-color { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.form-card .apariencia-color input[type=color] { width: 64px; height: 44px; padding: 2px; flex-shrink: 0; cursor: pointer; }
.apariencia-preview {
    --pv-acento: #0B6E66; --pv-acento-sobre: #FFFFFF; --pv-acento-texto: #0B6E66;
    margin-top: 12px; max-width: 420px; border: 1px solid #d1d5db; border-radius: 10px;
    overflow: hidden; background: #ffffff; color: #111827; font-family: Manrope, sans-serif;
}
.apariencia-preview-cabecera { background: #e5e7eb; color: #111827; padding: 10px 14px; font-weight: 800; font-size: 1.05rem; }
.apariencia-preview-cabecera img { height: 28px; width: auto; vertical-align: middle; border-radius: 4px; margin-right: 6px; }
.apariencia-preview.con-color .apariencia-preview-cabecera { background: var(--pv-acento); color: var(--pv-acento-sobre); }
.apariencia-preview.logo-solo .apariencia-preview-cabecera img { height: 42px; margin-right: 0; }
.apariencia-preview.logo-solo #po-prev-nombre { display: none; }
.apariencia-preview-eslogan { display: block; font-size: .8rem; font-weight: 500; opacity: .85; }
.apariencia-preview-eslogan:empty { display: none; }
.apariencia-preview-cuerpo { padding: 12px 14px 14px; }
.apariencia-preview-cat { display: inline-block; padding: 6px 12px; margin: 0 6px 10px 0; border-radius: 8px; border: 2px solid var(--pv-acento-texto); color: var(--pv-acento-texto); font-weight: 700; font-size: .9rem; }
.apariencia-preview-cat.activa { background: var(--pv-acento); color: var(--pv-acento-sobre); }
.apariencia-preview-producto { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #e5e7eb; font-weight: 700; }
.apariencia-preview-precio { color: var(--pv-acento-texto); font-weight: 500; }
.apariencia-preview-boton { margin-top: 10px; padding: 12px; border-radius: 10px; text-align: center; font-weight: 800; background: var(--pv-acento); color: var(--pv-acento-sobre); }
.form-card .apariencia-aviso { margin: 8px 0 0; color: var(--color-texto); font-size: .9rem; }

/* ---- Mobile: menú tipo hamburguesa ---- */
@media (max-width: 700px) {
    .nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--color-nav-fondo);
        padding: 12px 16px;
    }
    .nav-titulo { color: var(--color-nav-texto); font-weight: 800; font-size: 1.2rem; }
    .nav-toggle {
        background: none;
        border: none;
        color: var(--color-nav-texto);
        font-size: 1.8rem;
        line-height: 1;
        padding: 4px 8px;
        cursor: pointer;
    }
    .nav {
        display: none;
        flex-direction: column;
        padding: 0 10px 10px;
    }
    .nav.abierto { display: flex; }
    .nav-btn { min-width: 0; text-align: left; }
    /* En el menú hamburguesa los secundarios son filas como las demás; solo
       la línea separa los dos grupos. */
    .nav-btn.nav-btn-sec { flex-direction: row; gap: .2em; padding: 16px 6px; font-size: 1.1rem; }
    .nav-btn.nav-btn-sec .ico { width: 1em; height: 1em; }
    .nav-sep { flex: 0 0 1px; margin: 2px 0; }
    .nav-secundarios { flex-direction: column; margin-left: 0; }
    /* En el menú hamburguesa el círculo no tiene sentido: la ayuda pasa a ser
       una fila más, con el "?" chico adelante y la palabra al lado, y su menú
       se despliega en el flujo en vez de flotar. */
    .nav-ayuda { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; }
    .nav-btn-ayuda {
        width: 100%;
        height: auto;
        padding: 16px 10px;
        border-radius: 10px;
        border-width: 1px;
        justify-content: flex-start;
        gap: 10px;
        font-size: 1.1rem;
    }
    .nav-ayuda-icono {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border: 2px solid currentColor;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }
    .nav-ayuda-texto { display: inline; }
    .nav-ayuda-menu {
        position: static;
        min-width: 0;
        margin-top: 6px;
        box-shadow: none;
    }
}

h1, h2 { margin: 0 0 12px; }

.error { background: var(--color-error-bg); color: var(--color-error-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.ok { background: var(--color-ok-bg); color: var(--color-ok-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.aviso { background: var(--color-aviso-bg); color: var(--color-aviso-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }

/* Banner de suscripción vencida (módulo Pedidos Online) — fijo arriba de
   todo el panel, no se puede cerrar (ver partials/nav.php). A propósito NO
   usa .aviso/.error: tiene que quedar visualmente distinto de cualquier
   aviso descartable de una pantalla puntual. */
.banner-suscripcion { background: var(--color-error-bg); color: var(--color-error-texto); padding: 10px 16px; text-align: center; font-weight: 600; }
/* Variante amarilla del mismo banner fijo: se usa para el aviso de los
   últimos 3 días ANTES de que la suscripción esté realmente vencida (roja).
   Mismo forma/comportamiento, solo cambia el color -- reutiliza las
   variables de .aviso en vez de duplicar el amarillo a mano. */
.banner-suscripcion.aviso { background: var(--color-aviso-bg); color: var(--color-aviso-texto); }
/* El link del aviso de comprobantes rechazados (facturación): del color del
   banner, subrayado, para que se lea como link sin romper el contraste. */
.banner-suscripcion a { color: inherit; text-decoration: underline; }

/* ---- Descargar mis datos (mis_datos.php) ---- */
.mis-datos { max-width: 720px; }
.mis-datos .form-card a.btn-grande { display: block; text-align: center; text-decoration: none; }
.mis-datos-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mis-datos-botones .btn-grande { flex: 1 1 220px; margin-top: 0; }

/* ---- Venta ---- */
/* Carrito con más aire que un simple 1fr: desde que tiene botón de descuento
   además del de cantidad y el de quitar, una columna angosta apretaba los
   tres controles de la última celda. */
/* Cabecera de la pantalla de mostrador: el buscador de productos y el de
   cliente, uno al lado del otro (Lucas 2026-09-20). Producto a la izquierda y
   cliente a la derecha, que es tambien el orden del Tab -- van en ese orden en
   el HTML de takeout.php, no acomodados con `order`, justamente para que el
   Tab (que sigue el DOM) coincida con lo que ve el ojo.

   MISMA grilla que .venta-layout de aca abajo (2fr 1.4fr y el mismo gap), no
   mitad y mitad: asi la columna del cliente arranca exactamente donde arranca
   el Carrito y la del producto donde arranca la grilla de productos. Con 50/50
   quedaban dos quiebres verticales distintos a 10px uno del otro, que es de esas
   cosas que no se saben explicar pero se ven. min-width:0 porque un item de
   grid no baja de su contenido por default, y el input de 1.4rem no dejaria
   achicar su columna. Abajo de 900px se apilan, igual que .venta-layout. */
.venta-cabecera { display: grid; grid-template-columns: 2fr 1.4fr; gap: 16px; align-items: start; }
.venta-cabecera > * { min-width: 0; }
/* "Empezar la venta por el cliente" (Opciones -> Ventas): ahi el bloque de
   cliente se emite PRIMERO en el HTML, para que el Tab lo recorra primero y de
   ahi siga al de productos y al resto de la pantalla -- sin shift+Tab y sin
   trampas de foco (ver el comentario largo de takeout.php). En pantalla no
   cambia nada: las columnas se asignan a mano, producto a la izquierda y
   cliente a la derecha, igual que siempre.

   Es el unico lugar del sistema donde el orden visual no coincide con el del
   DOM, y es a proposito: el recorrido que se pidio para ese modo es
   cliente -> producto, que en pantalla va de derecha a izquierda. */
.venta-cabecera.cliente-primero > .buscar-wrap   { grid-column: 1; grid-row: 1; }
.venta-cabecera.cliente-primero > .cliente-widget { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) {
    .venta-cabecera { grid-template-columns: 1fr; }
    /* Apilado no hay columnas que asignar: si quedaran fijas, el bloque de
       cliente se iria a una columna 2 que ya no existe (el navegador la crea
       implicita y quedan los dos al lado, apretados, en vez de uno abajo del
       otro). Pasaba de verdad a 820px, lo agarro la prueba de anchos.

       Los dos selectores van escritos enteros y NO como "> *": necesitan la
       MISMA especificidad que las reglas de arriba para ganarles. Un media
       query no le gana a nada por si solo -- ordena, no pesa. */
    .venta-cabecera.cliente-primero > .buscar-wrap,
    .venta-cabecera.cliente-primero > .cliente-widget { grid-column: 1; grid-row: auto; }
}
/* El widget de cliente adentro de la cabecera: los dos buscadores tienen que
   quedar en la MISMA línea, si no la pantalla arranca con el campo de cliente
   un renglón más abajo que el de productos y se lee como dos cosas sueltas.
   Las pestañas Cliente/Invitado bajan abajo del campo (order) y se dibujan
   compactas: no son una acción principal, se tocan una vez cada tanto. En el
   resto de las pantallas el widget sigue exactamente igual -- todo esto está
   colgado de .venta-cabecera, que solo existe en el mostrador. */
.venta-cabecera .cliente-widget { margin: 0; display: flex; flex-direction: column; }
.venta-cabecera #bloque-cliente-registrado { order: 1; }
.venta-cabecera .cliente-widget > .formas-pago { order: 2; margin: 8px 0 0; }
.venta-cabecera #bloque-cliente-invitado { order: 3; }
.venta-cabecera .cliente-widget > .formas-pago label { padding: 9px 12px; font-weight: 600; }

.venta-layout { display: grid; grid-template-columns: 2fr 1.4fr; gap: 16px; }
@media (max-width: 900px) { .venta-layout { grid-template-columns: 1fr; } }

.categorias { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-btn {
    padding: 16px 20px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 2px solid var(--sp-acento-texto);
    background: var(--color-superficie);
    color: var(--sp-acento-texto);
    text-decoration: none;
    font-weight: 700;
}
.cat-btn.activo { background: var(--sp-teal-800); color: #fff; }

/* ---- Categorías colapsables (mesas/mostrador/delivery): en vez de mostrar
   siempre todos los botones de categoría (con muchas categorías ocupaba
   demasiado alto de pantalla), se ve solo "Todas" por defecto y tocarlo
   despliega el resto como un menú flotante que se superpone sobre la lista
   de productos (position:absolute -- no empuja el layout ni estira el botón
   "Todas" al alto del menú). El ancho de esos botones se pareja por JS al
   de la categoría con el nombre más largo de la lista (ver script al final
   de cada página). Ver feedback de Lucas. ---- */
.categorias-resto {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    z-index: 30;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.categorias-resto .cat-btn { white-space: nowrap; }
.categorias-resto.oculto { display: none; }

.buscar-form { display: flex; gap: 8px; margin-bottom: 12px; }
.buscar-form input[type=text] {
    flex: 1;
    min-width: 0;
    font-size: 1.4rem;
    padding: 16px;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
}
.buscar-form .btn-grande { flex-shrink: 0; }
@media (max-width: 500px) {
    .buscar-form { flex-wrap: wrap; }
    .buscar-form input[type=text] { flex-basis: 100%; }
    .buscar-form .btn-grande { flex: 1; }
}
.buscar-wrap { position: relative; }
.resultados-busqueda {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    margin-top: 4px;
    overflow: hidden;
}
.resultado-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--color-borde-suave);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 1.05rem;
    cursor: pointer;
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:active { background: var(--color-hover); }
/* Resultado resaltado con las flechas del teclado (ver buscador-teclado.js).
   Lleva fondo Y una barra lateral: en un mostrador con pantalla brillante o
   modo oscuro, el fondo solo no siempre se distingue de un hover accidental. */
.resultado-item.resaltado {
    background: var(--color-hover);
    box-shadow: inset 4px 0 0 var(--sp-teal-800);
    font-weight: 700;
}
/* "+ Agregar cliente ..." dentro de los resultados del buscador de cliente
   (ver partials/cliente_selector_js.php) — mismo color de acento que el resto
   de los botones primarios, para distinguirlo de un cliente ya existente. */
.resultado-item-crear { color: var(--sp-acento-texto); font-weight: 700; }

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.prod-form { margin: 0; display: flex; flex-direction: column; }
.prod-btn {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    cursor: pointer;
    line-height: 1.3;
    margin-top: auto;
}
.prod-btn:active { background: var(--color-hover); }
.prod-btn small { display: block; font-weight: 500; color: var(--sp-acento-texto); font-size: .95rem; margin-top: 4px; }

/* Mesas del salón (grilla libre/ocupada en index.php): el texto de abajo
   difiere en largo ("Libre" vs "Ocupada — Fulano", una o dos líneas), y una
   mesa es <a><span> (navegación) mientras que la otra es <form><button>
   (acción). Sin esto, la más alta de la fila queda de un tamaño distinto a
   sus vecinas y la fila se ve desalineada. height:100% hace que ambos tipos
   de tile llenen el mismo alto de fila que ya estira .grid-productos, y el
   centrado evita que el número/nombre de mesa quede pegado a la izquierda. */
.mesa-btn {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- Mapa del salón (ubicar mesas a mano, ver mesas_admin.php/index.php) ----
   Rectángulo único con las mesas en posición absoluta (% del ancho/alto, ver
   mesas.pos_x/pos_y) en vez de la grilla automática de siempre. Mismo
   rectángulo se usa editable (con drag, en mesas_admin.php) y de solo lectura
   (en index.php, ver .mesa-mapa-item ahí abajo). */
.salon-mapa {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 2px dashed var(--color-borde);
    border-radius: 12px;
    background: var(--color-fondo);
    overflow: hidden;
}
/* Contenedor posicionado de una mesa dentro del mapa (% del ancho/alto, ver
   mesas.pos_x/pos_y) -- mismo contenedor Y mismo .prod-btn.mesa-btn de
   adentro tanto en el editor (mesas_admin.php) como en la vista de solo
   lectura (index.php), a propósito: si el tamaño difiriera entre las dos
   pantallas, la misma posición guardada se vería corrida de un lugar a otro. */
.mesa-mapa-item {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 130px;
}
/* Variante arrastrable, solo en el editor de mesas_admin.php. touch-action:none
   evita que el navegador intente hacer scroll de la página mientras se
   arrastra con el dedo. */
.mesa-mapa-item.arrastrable { cursor: grab; touch-action: none; user-select: none; }
.mesa-mapa-item.arrastrable.arrastrando { cursor: grabbing; z-index: 5; }
.prod-img { display: block; width: 100%; height: 70px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.img-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.img-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; display: block; margin-top: 6px; }
.qty-input {
    width: 100%;
    font-size: 1.1rem;
    padding: 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-align: center;
}

.carrito { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 14px; }
.carrito table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.carrito td, .carrito th { padding: 8px 4px; border-bottom: 1px solid var(--color-borde-suave); text-align: left; }
.carrito .quitar-btn { background: var(--sp-danger); color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-size: 1rem; }
.carrito .desc-btn, .carrito .editar-precio-btn {
    background: var(--color-boton-suave);
    color: var(--color-texto);
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    margin-right: 6px;
}
.carrito .desc-btn:active, .carrito .editar-precio-btn:active { background: var(--color-hover); }
.carrito .desc-btn-activo { background: var(--sp-teal-800); color: #fff; }
.desc-tag { color: var(--sp-danger); font-weight: 700; }

/* Nota por linea del pedido ("sin cebolla"), cargada con el lapiz del carrito
   en mesas/mostrador/delivery. Se muestra debajo del nombre del producto. */
.nota-item { color: var(--sp-muted, #666); font-style: italic; }

/* "Ultimo pedido enviado a cocina a las HH:MM", arriba del carrito. Informativo
   y no una alerta: no tiene que competir visualmente con los avisos de error. */
.comanda-aviso {
    margin: 0 0 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
}
.cant-control { display: flex; align-items: center; gap: 6px; }
.cant-control span { min-width: 2ch; text-align: center; font-weight: 700; }
.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: var(--color-boton-suave);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    color: var(--color-texto);
}
.qty-btn:active { background: var(--color-hover); }
.total-line { font-size: 1.6rem; font-weight: 800; text-align: right; margin: 10px 0; }

.formas-pago { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.formas-pago label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-weight: 700;
    cursor: pointer;
}
.formas-pago input { display: none; }
.formas-pago input:checked + span,
.formas-pago label:has(input:checked) { background: var(--sp-teal-800); color: #fff; border-color: var(--sp-teal-800); }

/* Pago dividido (Lucas 2026-08-16): un monto por método (Efectivo/Tarjeta/
   Transferencia) en vez de un solo radio -- ver takeout.php (y de ahí en más,
   index.php/delivery.php/editar_venta.php). Los montos reusan .qty-input
   (mismo look que el resto del form); acá solo el indicador chico de "falta
   cargar"/"sobra"/"total cargado", con colores de estado en vez del tamaño
   grande de .total-line (que es para el total real del carrito, no esto). */
.restante-line { font-weight: 700; text-align: right; margin: 8px 0; }
.restante-line.ok { color: var(--color-ok-texto); }
.restante-line.aviso { color: var(--color-aviso-texto); }

/* Widget de "cliente asociado a la venta" (mesas/mostrador/delivery) — ver
   partials/cliente_selector.php. El chip reusa el color de acento de las
   formas de pago seleccionadas para que se sienta parte del mismo sistema. */
.cliente-widget { margin: 10px 0; }
.cliente-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid var(--sp-teal-800);
    background: var(--sp-teal-800);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
/* Dirección del cliente elegido, para confirmar de un vistazo que es el
   correcto antes de cobrar (ver actualizarChipCliente() en cliente_selector_js.php). */
.cliente-direccion-info { margin-top: 6px; color: var(--color-texto-secundario); font-size: .95rem; }

.btn-grande {
    width: 100%;
    padding: 20px;
    font-size: 1.4rem;
    font-weight: 800;
    border-radius: 12px;
    border: none;
    /* Verde/teal (no amber -- feedback de Lucas: el naranja no le gusta para
       botones de aceptar/confirmar). Mismo verde que .nav-btn.activo, texto
       blanco. */
    background: var(--sp-teal-800);
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}
.btn-secundario { background: #6b7280; color: #fff; }
.btn-peligro { background: var(--sp-danger); color: #fff; }
.btn-whatsapp { background: #25D366; color: #fff; text-decoration: none; display: block; text-align: center; box-sizing: border-box; }

/* ---- Formularios genéricos (productos/compras/ajustes/reportes) ---- */
.form-card { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 16px; margin-bottom: 16px; border: 8px solid transparent; }
/* Pedidos entrantes: la hora de entrega está a <=5 min (o ya pasó) y todavía
   no se marcó como enviado/entregado -- ver pedidos_entrantes.php. */
.form-card.pedido-urgente { border-color: #e53935; animation: pedido-urgente-parpadeo 1s infinite; }
@keyframes pedido-urgente-parpadeo {
    0%, 100% { border-color: #e53935; }
    50% { border-color: transparent; }
}
/* Cuando el form-card es un <details> (secciones colapsables: Herramientas y las
   tablas de Reportes) */
.form-card summary { cursor: pointer; }
.form-card summary h2 { display: inline; }
.form-card[open] summary h2 { margin-bottom: 0; }
.form-card summary ~ * { margin-top: 12px; }
.form-card label { display: block; margin-top: 10px; font-weight: 600; }
.form-card small { display: block; color: var(--color-texto-secundario); margin-top: 4px; }
.form-card input[type=checkbox], .form-card input[type=radio] {
    /* input[type=radio] agregado (Lucas 2026-08-31, pagos.php: primer uso de
       un grupo de radios dentro de .form-card) -- sin esto hereda el
       "width:100%" genérico de ".form-card input" de más abajo, y el radio
       (que no tiene su ancho fijado por HTML como el checkbox) se estira a
       todo el ancho del label .check-label, empujando el texto al otro
       extremo -- exactamente el mismo problema que este bloque ya resolvía
       para checkbox, nunca se había notado porque hasta ahora ningún radio
       vivía dentro de un .form-card. */
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    accent-color: var(--sp-teal-800);
    flex-shrink: 0;
}
.form-card label.check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}
.form-card input, .form-card select, .form-card textarea {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    margin-top: 4px;
}
.form-card textarea { font-family: inherit; resize: vertical; }

/* ---- Selector de repartidor (multi delivery, Lucas 2026-08-23): botones en
   vez de <select> -- mucho más fácil de tocar bien a la primera en una
   tablet que abrir un desplegable y acertarle a una opción angosta. "Sin
   repartidor" arranca en verde porque es el default; el que se toca pasa a
   verde y el resto de los nombres queda en el color secundario. El click
   solo cambia el hidden repartidor_id de al lado (ver seleccionarRepartidor()
   en pedidos_entrantes.php) -- no manda nada al servidor por sí solo. ---- */
.repartidor-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.repartidor-btn {
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-boton-suave);
    color: var(--color-texto);
    cursor: pointer;
}
.repartidor-btn.activo {
    background: var(--color-ok-bg);
    color: var(--color-ok-texto);
    border-color: var(--color-ok-texto);
}

/* ---- Mini popup: pedir peso al agregar un producto por peso ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    z-index: 50;
    padding: 16px;
    /* SCROLL DEL OVERLAY: si la tarjeta igual no entra (pantalla muy baja,
       teclado abierto), que al menos se pueda llegar al boton scrolleando.
       Sin esto el sobrante quedaba fuera de la pantalla y era inalcanzable:
       el modal de novedades en un celular media 1252px de alto contra 667 de
       pantalla, y "Entendido" caia en y=897. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal-card {
    background: var(--color-superficie);
    color: var(--color-texto);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    /* margin:auto EN VEZ DE align-items:center en el overlay. Los dos centran
       igual cuando sobra lugar, pero align-items:center recorta el borde de
       arriba cuando el hijo es mas alto que el contenedor con scroll, y
       justamente ahi es cuando hace falta llegar al contenido. */
    margin: auto;
    /* dvh y no vh: en un celular, 100vh es la pantalla CON la barra del
       navegador retraida, asi que un modal de 100vh se pasa igual mientras la
       barra esta visible. dvh sigue al viewport real. El vh de arriba queda
       como respaldo para navegadores que no conocen dvh. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}
/* Variante ancha: formularios con muchos campos (ej. editor de productos,
   con imagen incluida) no entran comodos en los 320px del popup chico de
   confirmacion. max-height + scroll propio para que no se corte en pantallas
   bajas (tactil/kiosco). */
.modal-card-ancho { max-width: 480px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.modal-card h3 { margin: 0 0 12px; font-size: 1.15rem; }
.modal-card p { margin: 0; font-size: .95rem; }
.modal-card button:disabled { opacity: .5; cursor: not-allowed; }
/* Los botones de acá reusan .btn-grande/.btn-secundario/.btn-peligro por el
   color, pero el tamaño "grande" (pensado para un botón único de pantalla
   completa) queda enorme para un popup chico de confirmación. */
.modal-card .btn-grande {
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 0;
}

/* Boton de cerrar (x) de los modales: rojo y con buen tamano de toque
   (44x44, guias de accesibilidad tactil) para que sea consistente en toda
   la app -- mismo criterio que .modal-cerrar de pedidos-online/style.css.
   Los modales que ya cierran con un boton "Cancelar"/.btn-grande no
   necesitan esto: ese boton ya cumple el tamano tactil por su cuenta. */
.modal-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--sp-danger);
    color: #fff;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}
.modal-cerrar:hover, .modal-cerrar:focus-visible { filter: brightness(0.85); }

.lista-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag-categoria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-hover);
    color: var(--color-texto);
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    font-size: .95rem;
    font-weight: 600;
}
.tag-categoria-orden { font-weight: 400; opacity: .65; }
.tag-categoria-editar {
    border: none;
    background: none;
    color: var(--sp-acento-texto);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.tag-categoria-quitar {
    border: none;
    background: none;
    color: var(--sp-danger);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.oculto { display: none; }
.tabla-scroll { overflow-x: auto; border-radius: 12px; }
table.tabla-datos { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; overflow: hidden; }
table.tabla-datos th, table.tabla-datos td { padding: 10px 8px; border-bottom: 1px solid var(--color-borde-suave); text-align: left; }
table.tabla-datos th { background: var(--sp-navy-700); color: #fff; }
table.tabla-datos a { color: var(--color-link); }
table.tabla-datos a:visited { color: var(--color-link); }
/* Paginador de tablas largas (reportes.php). Las filas ya vienen todas en el
   HTML: el JS solo muestra/oculta el bloque de la página actual, así que
   cambiar de página no recarga nada ni pierde el filtro Desde/Hasta. */
/* Barra discreta: el rango a la izquierda, las flechas a la derecha. Los botones
   copian el look de .btn-icono-azul para que no desentonen con el resto. */
.paginador { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--color-texto-secundario); }
.paginador-info { margin-right: auto; }
.paginador-pagina { min-width: 96px; text-align: center; }
/* Se cualifica con "button." y .form-card para ganarle a ".form-card input, .form-card select..."
   y a los estilos genéricos de botón, sin recurrir a !important. */
.form-card .paginador button.paginador-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--sp-acento-texto);
    background: var(--color-superficie);
    color: var(--sp-acento-texto);
    cursor: pointer;
    line-height: 1;
}
.form-card .paginador button.paginador-btn:active { background: var(--color-hover); }
.form-card .paginador button.paginador-btn:disabled { opacity: .35; cursor: default; border-color: var(--color-borde); color: var(--color-texto-secundario); }
.tag-inactivo { color: var(--color-texto-secundario); font-style: italic; }
.tag-saldo { color: var(--sp-danger); font-weight: 700; }
.tag-vencido { background: var(--color-vencido-bg); }
.tag-vencido-badge { background: var(--sp-danger); color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.tag-stock-bajo { background: var(--color-aviso-bg); }
.tag-stock-bajo-badge { display: inline-block; vertical-align: middle; background: var(--sp-amber-600); color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 6px; margin-left: 4px; line-height: 1.4; }
/* Cada acción de la fila (renombrar, eliminar, reactivar, etc.) es un <form>
   separado -- por eso sin flex quedaban alineados por "baseline" (el <input>
   de texto de renombrar es más alto que los botones-ícono redondos, así que
   se veían despareja los unos de los otros). display:flex + align-items acá
   centra verticalmente todos los forms/botones de la celda entre sí, sin
   importar el display propio de cada form. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acciones a, .acciones button { margin-right: 6px; font-size: .95rem; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--color-borde); background: var(--color-superficie); text-decoration: none; color: var(--color-texto); cursor: pointer; }
.acciones button.btn-icono-peligro,
button.btn-icono-peligro { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--sp-danger); background: var(--sp-danger); color: #fff; cursor: pointer; line-height: 1; }
.acciones button.btn-icono-peligro:active,
button.btn-icono-peligro:active { background: #b91c1c; }
/* Nota: se cualifican con "a." / "button." (no solo la clase) a propósito.
   ".acciones a, .acciones button" (más arriba) tiene la misma especificidad
   que un selector de un solo tipo+clase, así que sin el prefijo de tipo acá
   esa regla de .acciones ganaba y pisaba el color/borde de estos botones. */
a.btn-icono-azul, button.btn-icono-azul {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--sp-acento-texto);
    background: var(--color-superficie);
    color: var(--sp-acento-texto);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-azul:active, button.btn-icono-azul:active { background: var(--color-hover); }
a.btn-icono-verde, button.btn-icono-verde {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--sp-success);
    background: var(--color-superficie);
    color: var(--sp-success);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-verde:active, button.btn-icono-verde:active { background: var(--color-hover); }
a.btn-icono-ambar, button.btn-icono-ambar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--sp-amber-600);
    background: var(--color-superficie);
    color: var(--sp-amber-600);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-ambar:active, button.btn-icono-ambar:active { background: var(--color-hover); }

/* ---- Dashboard de reportes ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.kpi-card { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 16px; text-align: center; }
.kpi-valor { font-size: 1.5rem; font-weight: 800; color: var(--sp-acento-texto); }
.kpi-label { font-size: .85rem; color: var(--color-texto-secundario); margin-top: 4px; }
/* Egresos (pagos a empleados y compras) en el resumen de reportes: en rojo para
   que no se lean como una venta más. Usa la variable de error, así el modo
   oscuro los aclara en vez de dejarlos ilegibles sobre fondo azul. */
.kpi-valor.kpi-egreso { color: var(--color-error-texto); }
.fila-egreso td { color: var(--color-error-texto); }
/* Aviso de doble conteo en "Pagos y compras del período" (reportes.php): amarillo
   de aviso, no rojo de error -- el número está bien calculado, lo que avisa es
   cómo hay que leerlo. */
.aviso-doble-conteo { background: var(--color-aviso-bg); color: var(--color-aviso-texto); padding: 10px 12px; border-radius: 8px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.barra-item { margin-bottom: 14px; }
.barra-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.barra-label span:last-child { color: var(--sp-acento-texto); font-weight: 700; white-space: nowrap; }
.barra-fondo { background: var(--color-barra-fondo); border-radius: 8px; height: 16px; overflow: hidden; }
.barra-relleno { background: var(--sp-teal-800); height: 100%; border-radius: 8px; }
.barra-relleno-alt { background: var(--sp-success); }
.barra-relleno-alt2 { background: var(--sp-amber-600); }

/* ---- Gráfico mensual de ventas/ganancia (reportes.php) ---- */
.leyenda-chart { display: flex; gap: 16px; font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.leyenda-chart .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot-costo { background: var(--sp-teal-800); }
.dot-ganancia { background: var(--sp-success); }
.chart-mensual {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    overflow-x: auto;
    padding-top: 10px;
}
.chart-mes { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 40px; height: 100%; }
.chart-mes-total { font-size: .7rem; font-weight: 600; color: var(--color-texto-secundario); margin-bottom: 4px; white-space: nowrap; }
.chart-barras { display: flex; align-items: flex-end; flex: 1; min-height: 0; width: 100%; justify-content: center; }
.chart-barra-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; width: 26px; }
.chart-barra { width: 100%; min-height: 0; }
.chart-barra-ganancia { background: var(--sp-success); border-radius: 4px 4px 0 0; }
.chart-barra-costo { background: var(--sp-teal-800); border-radius: 0 0 4px 4px; }
.chart-mes-label { font-size: .75rem; color: var(--color-texto-secundario); margin-top: 6px; }

/* ---- Modo "pantalla normal" (Opciones → Negocio): mismo layout que
   el modo táctil, pero con botones/controles más chicos, pensado para mouse y
   teclado en una PC de escritorio en vez de dedo en una tablet/celular. ---- */
body.compacto { font-size: 15px; }
body.compacto .nav-btn { padding: 8px 14px; font-size: .95rem; min-width: 90px; }
/* El círculo de Ayuda también es un .nav-btn, así que la regla de arriba le
   ponía min-width 90px y padding, y quedaba ovalado (90x56). En escritorio
   vuelve a ser el círculo de 56px del modo táctil. Solo en escritorio: en el
   menú hamburguesa la Ayuda es una fila más y ahí la regla de arriba está
   bien. */
@media (min-width: 701px) {
    body.compacto .nav-btn-ayuda { min-width: 0; padding: 0; font-size: 1.5rem; }
    /* Mismo motivo: sin esto los secundarios heredaban el min-width 90px y el
       padding de 14px de la regla de arriba. */
    body.compacto .nav-btn.nav-btn-sec { min-width: 68px; padding: 6px 8px; font-size: .8rem; }
}
body.compacto .admin-subnav-btn { padding: 8px 14px; font-size: .9rem; }
body.compacto .cat-btn { padding: 8px 14px; font-size: .95rem; }
body.compacto .buscar-form input[type=text] { font-size: 1rem; padding: 10px; }
body.compacto .btn-grande { padding: 10px; font-size: 1rem; }
body.compacto .grid-productos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
body.compacto .prod-btn { min-height: 60px; padding: 6px; font-size: .9rem; }
body.compacto .prod-btn small { font-size: .82rem; }
body.compacto .prod-img { height: 50px; }
body.compacto .qty-btn { width: 24px; height: 24px; font-size: 1rem; }
body.compacto .formas-pago label { padding: 8px; font-size: .9rem; }
body.compacto .form-card input, body.compacto .form-card select { padding: 8px; font-size: .95rem; }
body.compacto .form-card label { margin-top: 6px; }

/* ---- Logo de marca (pantallas de acceso/login): swap claro/oscuro según el tema ---- */
.logo-marca-oscuro { display: none; }
body.oscuro .logo-marca-claro { display: none; }
body.oscuro .logo-marca-oscuro { display: inline-block; }

/* ---- Footer ---- */
.footer-app {
    text-align: center;
    padding: 18px 14px 24px;
    font-size: .8rem;
    color: var(--color-texto-secundario);
}
.footer-app a { color: var(--color-texto-secundario); }

/* ---- Ticket ---- */
/* Márgenes/tipografía chicos a propósito: para que entre más en el mismo
   largo de papel de la impresora térmica (menos consumo de rollo). */
.ticket { max-width: 340px; margin: 0 auto; background: var(--color-superficie); color: var(--color-texto); padding: 6px; font-family: monospace; font-size: .72rem; font-weight: 700; line-height: 1.25; }
.ticket table { width: 100%; font-size: .68rem; }
.ticket td, .ticket th { padding: 1px 2px; }
.ticket hr { border: none; border-top: 1px dashed var(--color-texto); margin: 4px 0; }
.ticket p { margin: 3px 0; }
@media print {
    .nav, .nav-bar, .reloj-nav, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .ticket { background: #fff; color: #000; }
    .ticket hr { border-top: 1px dashed #000; }
}

/* ---- Comprobante fiscal (partials/comprobante_fiscal.php) ----
   La letra en un recuadro, como en toda factura argentina, y el QR a un
   tamaño que un celular lee sin problema aun en el rollo de 58 mm (~2,5 cm). */
.comprobante-fiscal .cf-cabecera { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
.comprobante-fiscal .cf-letra { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border: 2px solid currentColor; font-size: 1.6em; font-weight: 800; }
.comprobante-fiscal .cf-tipo { font-size: 1.1em; font-weight: 800; line-height: 1.2; }
.comprobante-fiscal .cf-qr { width: 110px; margin: 6px auto; }
.comprobante-fiscal .cf-qr svg { display: block; width: 100%; height: auto; }
.comprobante-fiscal .cf-prueba { border: 2px solid currentColor; padding: 3px; text-align: center; font-weight: 800; }
/* Una razón social larga, sin espacios ("CONSTRUCCIONESDELSUR"), no puede
   empujar el ancho del rollo de 58 mm. */
.comprobante-fiscal .cf-receptor { overflow-wrap: anywhere; }
/* V2: las leyendas de A y B (transparencia fiscal, Ley 27.618, las que pide
   ARCA): más chicas, y que un texto largo no ensanche el rollo. */
.comprobante-fiscal .cf-leyenda, .comprobante-fiscal .cf-transparencia { font-size: .85em; overflow-wrap: anywhere; }

/* Modal de Facturar (partials/modal_facturar.php): los campos de "A nombre
   de…", con el mismo aspecto que los de .form-card pero más compactos. */
.modal-facturar #facturar-a-nombre label { display: block; font-weight: 600; margin-top: 10px; }
.modal-facturar #facturar-a-nombre label.check-label { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.modal-facturar #facturar-a-nombre input[type=text], .modal-facturar #facturar-a-nombre select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    margin-top: 4px;
}
.modal-facturar #facturar-a-nombre input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--sp-teal-800); flex-shrink: 0; }
/* Como página (rehacer_factura.php) el modal vive dentro de un .form-card,
   y ".form-card small { display:block }" le gana a .oculto. */
.modal-facturar small.oculto { display: none; }
.modal-facturar .btn-grande { margin-top: 0; }
.modal-facturar a.btn-grande { display: flex; align-items: center; justify-content: center; }
.modal-facturar small:not(.oculto) { display: block; color: var(--color-texto-secundario); font-size: .85rem; margin-top: 2px; }

/* Administración → Facturación (facturacion.php): atajos de período, el
   rango a mano y los totales en tarjetas que se apilan solas en el celular. */
.facturacion-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
/* Atajos más chicos que un btn-grande: son cinco, y en el celular ocupaban
   media pantalla antes de llegar a los números. */
.facturacion-atajos .btn-grande { width: auto; margin: 0; padding: 8px 14px; font-size: .95rem; text-decoration: none; text-align: center; }
.facturacion-nro { white-space: nowrap; }
.facturacion-periodo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 12px; }
.facturacion-periodo > div { flex: 1 1 160px; }
.facturacion-periodo .btn-grande { width: auto; margin: 0; }
.facturacion-buscar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.facturacion-buscar input[type=search] { flex: 1 1 220px; margin: 0; }
.facturacion-buscar .btn-grande { width: auto; margin: 0; }
.facturacion-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.facturacion-total { border: 2px solid var(--color-borde-suave); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.facturacion-total > span { color: var(--color-texto-secundario); font-weight: 600; }
.facturacion-total > strong { font-size: 1.5rem; }
.facturacion-total.principal { border-color: var(--sp-acento-texto); }
.facturacion-nota { margin: 10px 0 0; }
.facturacion-problemas { border-color: var(--sp-danger); }

/* Opciones → Facturación → Certificado de ARCA: un bloque por ambiente. */
.form-card .cert-ambiente { border-top: 1px solid var(--color-borde-suave); margin-top: 16px; padding-top: 12px; }
.form-card .cert-ambiente h4 { margin: 0 0 4px; }
.form-card .cert-csr { font-family: monospace; font-size: .8rem; }
.form-card .cert-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.form-card .cert-acciones .btn-grande { width: auto; margin: 0; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.form-card .cert-pasos { margin: 12px 0; padding-left: 22px; }
.form-card .cert-pasos li { margin: 4px 0; }
.form-card .cert-subir { border: 2px dashed var(--color-borde-suave); border-radius: 10px; padding: 4px 14px 14px; margin-bottom: 10px; }

/* Botón Facturar y su estado, arriba del ticket (ticket.php): pantalla, no papel. */
.facturacion-ticket { margin: 10px 0; }
/* Factura automática que no salió (V1.2): las salidas, una al lado de la otra. */
.facturacion-auto-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.facturacion-auto-acciones .btn-grande { flex: 1 1 200px; margin: 0; text-align: center; text-decoration: none; }
/* Factura + ticket interno en el mismo papel (delivery con factura
   automática): cada uno en su "página", así la impresora corta entre los dos. */
.salto-pagina { break-after: page; page-break-after: always; height: 0; }
@media screen { .salto-pagina { border-top: 2px dashed var(--color-borde); margin: 16px 0; height: 0; } }
.facturacion-ticket .facturacion-estado { margin: 6px 0 0; font-size: .9rem; color: var(--color-texto-secundario); }

/* Campos numéricos (campoMonto()/campoCantidad() en config.php): el campo y su
   eco son una sola columna, así adentro de una fila flex cada eco queda abajo
   de SU campo y no suelto al final de la fila. */
.campo-num { display: flex; flex-direction: column; }
.form-card .campo-num { width: 100%; }

/* El eco dice "Se guarda como: $20.500" -- el número tal como va a quedar
   guardado, que es donde se cazan los errores de tipeo antes de apretar
   Guardar. El padding-left lo alinea con el texto de adentro del campo (que
   tiene padding:14px), y el min-height reserva el renglón para que la pantalla
   no salte cuando aparece. Nada de margen negativo acá: el campo no tiene
   margin-bottom, así que tirar el eco para arriba lo montaba sobre el borde. */
.campo-eco { min-height: 1.15em; margin-top: 5px; padding-left: 14px; font-size: .82em; line-height: 1.15; opacity: .65; }
.compra-fila .campo-eco { padding-left: 4px; }

/* Modal de novedades (partials/novedades.php): la lista de cambios de la
   version. Mas aire entre puntos que una lista normal -- se lee una sola vez y
   de corrido, no es una tabla de datos. */
.novedades-lista { margin: 10px 0 0; padding-left: 20px; }
.novedades-lista li { margin-bottom: 10px; line-height: 1.45; }
/* El modal generico es angosto porque casi siempre lleva una linea ("Eliminar
   el pago X?"). Este lleva un texto para leer, y a 300px de ancho cada punto
   cae en cinco renglones. */
#modal-novedades .modal-card { max-width: 560px; }
#modal-novedades .novedades-subtitulo { margin: 0; font-weight: 600; font-size: 1.02rem; }