/* 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). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- Header propio de Pedidos Online ----
   .nav-bar (de más abajo, heredado de la copia de style.css) está pensado
   para el patrón "barra + hamburguesa" del panel interno: por diseño queda
   oculto (display:none) salvo en mobile (ver @media max-width:700px), porque
   en desktop el panel usa .nav como barra de botones siempre visible en su
   lugar. Esta app no tiene ese menú de varias páginas, así que necesita su
   propio header, siempre visible en cualquier ancho — no reusar .nav-bar acá. */
.encabezado-online {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-nav-fondo);
    padding: 12px 16px;
}
.encabezado-online-titulo { color: var(--color-nav-texto); font-weight: 800; font-size: 1.2rem; }
.encabezado-online-logo { height: 32px; width: auto; vertical-align: middle; border-radius: 4px; margin-right: 6px; }
.encabezado-online a { color: var(--color-nav-texto); }
/* Este span mezcla texto plano ("Hola, Lucas ·") con links -- alinear el
   ícono de casa contra ESE texto a mano (vertical-align) dependía de la
   métrica propia del emoji y salía mal en un sentido o en el otro (probado:
   quedaba alto, después bajo). En vez de seguir ajustando a ciegas, se hace
   el span mismo un flex row: el navegador centra cada hijo (ícono, texto,
   links) por cálculo real, no por una métrica de fuente adivinada. */
.encabezado-online-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
/* Caja cuadrada para el emoji -- más grande que el texto a propósito (pedido
   de Lucas), centrada por flex adentro (el glifo del emoji, no por
   line-height/baseline). Cómo queda alineada CONTRA el resto del texto ya no
   depende de esto: lo resuelve .encabezado-online-nav de arriba. */
.link-volver-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.15rem;
    text-decoration: none;
}

/* ponytail: .form-card input, .form-card select {...} (más abajo, heredado
   de la copia de style.css) nunca incluyó textarea — hueco preexistente del
   original, no algo que rompió esta app. Se completa acá porque checkout.php
   ya usa un <textarea> para las notas del pedido. */
.form-card textarea {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-family: inherit;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    margin-top: 4px;
    resize: vertical;
}

/* Variables de color: body.oscuro las pisa para el modo oscuro (config. en configuracion.php). */
: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;
    --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;
    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;
    padding: 16px 10px;
    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; }

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

/* ---- 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; }
}

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; }

/* ---- 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. */
.venta-layout { display: grid; grid-template-columns: 2fr 1.4fr; gap: 16px; }
@media (max-width: 900px) { .venta-layout { grid-template-columns: 1fr; } }

.categorias { 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; }

/* ---- Sidebar de categorías del menú público (solo pedidos-online, no
   comparte este layout con mesas/mostrador/delivery): lista de categorías
   fija a la izquierda, estilo menú de restaurante, en vez de los botones en
   fila de arriba. El filtro sigue siendo el mismo <button class="cat-btn">
   de siempre — solo cambia cómo se acomodan. ---- */
.menu-layout { display: flex; align-items: flex-start; gap: 20px; }
.categorias-sidebar {
    display: flex;
    flex-direction: column;
    /* .categorias (la clase de base, compartida con mesas/mostrador/delivery)
       define flex-wrap: wrap -- acá se pisa a propósito: en columna, "wrap"
       arma columnas nuevas apenas se queda sin alto (se nota sobre todo en el
       desplegable mobile, con max-height), en vez de una sola lista vertical
       con scroll. */
    flex-wrap: nowrap;
    /* ancho automático (no un valor fijo): la columna crece hasta lo que pida
       la categoría con el nombre más largo, y el resto de los botones
       (align-items: stretch, el default) se estira parejo hasta ese mismo
       ancho -- así ningún botón necesita partir el texto en dos líneas. */
    flex: 0 0 auto;
    width: max-content;
    min-width: 160px;
    max-width: 280px;
    gap: 8px;
    margin-bottom: 0;
    position: sticky;
    top: 12px;
}
.categorias-sidebar .cat-btn {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display:flex + centrado explícito: un <button> de una sola línea ya se
       centra solo verticalmente por su padding simétrico, pero acá conviene
       no depender de eso -- en el overlay mobile los botones quedan con
       flex-shrink:0 en una columna larga y el centrado explícito es más
       robusto que confiar en line-height/padding. */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lista-productos-wrap { flex: 1; min-width: 0; }

/* Botón "☰ Categorías": oculto en desktop (ahí ya se ve el sidebar entero),
   solo aparece en mobile (ver media query abajo). */
.categorias-toggle {
    display: none;
    padding: 10px 16px;
    font-size: 1rem;
    border-radius: 10px;
    border: 2px solid var(--sp-acento-texto);
    background: var(--color-superficie);
    color: var(--sp-acento-texto);
    font-weight: 700;
    cursor: pointer;
}
.categorias-sidebar-header { display: none; }

@media (max-width: 700px) {
    .menu-layout { flex-direction: column; }
    .categorias-mobile-bar { display: flex; justify-content: flex-start; margin-bottom: 8px; }
    .categorias-toggle { display: inline-block; }
    /* En mobile el sidebar pasa a ser una pantalla completa (antes un
       desplegable chico, pero con 14 categorías no entraban todas sin scroll
       -- ver feedback de Lucas: que cubra toda la pantalla en vez de un cuadro
       anclado arriba a la izquierda). Cerrado por default, se abre con el
       botón de arriba. */
    .categorias-sidebar {
        display: none;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        z-index: 1000;
        flex-direction: column;
        overflow-y: auto;
        background: var(--color-superficie);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 16px;
    }
    .categorias-sidebar.abierta { display: flex; }
    .categorias-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        flex-shrink: 0;
    }
    .categorias-sidebar-titulo { font-size: 1.3rem; font-weight: 800; }
    .categorias-cerrar {
        border: none;
        background: none;
        font-size: 1.6rem;
        line-height: 1;
        color: var(--color-texto);
        cursor: pointer;
        padding: 4px 8px;
    }
}

.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); }
/* "+ 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; }

/* Lista de productos de Pedidos Online: una fila por producto, mismo alto
   siempre (border-box + centrado vertical), sin importar si ese producto en
   particular tiene imagen y/o descripción cargada — antes, con .grid-productos
   (tarjetas), esa mezcla hacía que unas tarjetas quedaran mucho más altas que
   otras y la grilla se viera desordenada (ver feedback de Lucas). */
.lista-productos {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-borde);
}
.prod-form { margin: 0; display: flex; flex-direction: column; }
.prod-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    cursor: pointer;
    line-height: 1.3;
}
.prod-item:active { background: var(--color-hover); }
.prod-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.prod-item-nombre { font-weight: 700; }
.prod-item-precio { display: block; font-weight: 500; color: var(--sp-acento-texto); font-size: .95rem; margin-top: 2px; }
.prod-desc { display: block; font-weight: 400; color: var(--color-texto-secundario); font-size: .85rem; line-height: 1.25; margin-top: 2px; }

/* 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;
}
/* Miniatura de .prod-item: mismo tamaño tenga o no imagen el producto, así el
   texto de todas las filas arranca siempre en la misma columna (con imagen
   real o con el espacio vacío de .prod-item-img-vacia). */
.prod-item-img { width: 60px; height: 60px; flex-shrink: 0; object-fit: cover; border-radius: 8px; }
.prod-item-img-vacia { background: var(--color-fondo); }
.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;
}
.qty-input.qty-input-error { border-color: var(--color-error-texto); }
.input-invalido { border-color: var(--color-error-texto); }

/* Botón flotante de WhatsApp (partials/header.php) — mismo verde de marca que
   el botón "Comunicarse con el local" de checkout.php (#25D366). Se sube en
   mobile (media query de abajo) para no quedar tapado por la barra fija del
   carrito de index.php (.carrito-barra-movil, 64px de alto). */
.whatsapp-flotante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    z-index: 970;
    transition: transform .15s ease;
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.whatsapp-flotante img { width: 30px; height: 30px; display: block; }
@media (max-width: 900px) {
    .whatsapp-flotante { bottom: 78px; }
}

.carrito { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 14px; }
.carrito-panel-header { display: none; }
.carrito-barra-movil { display: none; }

/* ---- Carrito en mobile: barra fija abajo (total + vaciar + confirmar) en vez
   de tener que bajar deslizando toda la lista de productos para llegar al
   carrito -- sobre todo notorio con la categoría "Todas" seleccionada. Un
   botón (chevron) despliega el detalle del pedido como una hoja que sube
   desde abajo; ahí adentro se ven los ítems, cantidad y subtotal de siempre.
   Ver feedback de Lucas. ---- */
@media (max-width: 900px) {
    body { padding-bottom: 64px; }
    .carrito {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px;
        max-height: 65vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 18px rgba(0,0,0,.25);
        z-index: 900;
        transform: translateY(110%);
        transition: transform .25s ease;
    }
    .carrito.expandido { transform: translateY(0); }
    .carrito-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .carrito-panel-header h2 { margin: 0; }
    .carrito-titulo-desktop { display: none; }
    .carrito-cerrar { border: none; background: none; font-size: 1.6rem; line-height: 1; color: var(--color-texto); cursor: pointer; padding: 4px 8px; }
    /* El botón "Vaciar" y "Continuar"/login de siempre quedan ocultos en
       mobile: los reemplazan los íconos de la barra fija de abajo. */
    .carrito-acciones-clasicas { display: none; }

    .carrito-barra-movil {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64px;
        padding: 0 14px;
        background: var(--color-superficie);
        border-top: 2px solid var(--color-borde);
        z-index: 950;
    }
    .carrito-barra-chevron { border: none; background: none; font-size: 1.3rem; color: var(--sp-acento-texto); cursor: pointer; padding: 8px; flex-shrink: 0; }
    .carrito-barra-total { flex: 1; font-weight: 800; font-size: 1.05rem; }
    .carrito-barra-icono { border: none; background: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: var(--color-texto); flex-shrink: 0; }
    .carrito-barra-confirmar { color: var(--sp-success); }
}
.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 {
    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 { background: var(--color-hover); }
.carrito .desc-btn-activo { background: var(--sp-teal-800); color: #fff; }
.desc-tag { color: var(--sp-danger); font-weight: 700; }
.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); }

/* 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-whatsapp { background: #25D366; color: #fff; text-decoration: none; display: block; text-align: center; box-sizing: border-box; }
.btn-secundario { background: #6b7280; color: #fff; }
.btn-peligro { background: var(--sp-danger); color: #fff; }

/* ---- 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; }
/* Cuando el form-card es un <details> (secciones colapsables, ej. Configuración) */
.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; }
/* .formas-pago label (más arriba) y esta regla tienen la MISMA especificidad
   (una clase + un elemento cada una) — sin este empate resuelto a mano, esta
   regla (por venir después en el archivo) le gana el "display" a la de
   .formas-pago y los botones de radio (Retiro/Delivery, Efectivo/Transferencia/
   Tarjeta) pasan de flex a block, perdiendo el centrado vertical del texto
   (notorio en mobile: "Retiro en el local" ocupa 2 líneas y estira la fila,
   "Delivery" de 1 línea queda pegado arriba en vez de centrado). Se sube la
   especificidad calificando con .form-card para ganarle a la regla de arriba
   sin depender del orden en el archivo. */
.form-card .formas-pago label { display: flex; align-items: center; margin-top: 0; }
.form-card small { display: block; color: var(--color-texto-secundario); margin-top: 4px; }
.form-card input[type=checkbox] {
    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 {
    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;
}

/* ---- Mini popup: pedir peso al agregar un producto por peso ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}
.modal-card {
    background: var(--color-superficie);
    color: var(--color-texto);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
}
/* 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; 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;
}

/* ---- Modal de producto: se abre al tocar cualquier producto del menú
   (imagen grande, descripción, nota especial y cantidad/peso antes de
   agregar al carrito) ---- */
.modal-producto-card { position: relative; padding-top: 52px; }
.modal-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--sp-danger);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.modal-cerrar:hover, .modal-cerrar:focus-visible { filter: brightness(0.85); }
.modal-producto-cuerpo { display: flex; gap: 16px; flex-wrap: wrap; }
.modal-producto-img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.modal-producto-info { flex: 1; min-width: 200px; }
.modal-producto-info h3 { margin: 0 0 8px; }
.modal-producto-descripcion { color: var(--color-texto-secundario); margin-bottom: 10px !important; }
.modal-producto-label { display: block; font-weight: 600; margin: 4px 0; }
.modal-producto-info textarea {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-family: inherit;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    margin-top: 4px;
    resize: vertical;
}
.modal-producto-cantidad { margin: 10px 0; }
#modal-producto-agregar { width: 100%; }
.item-nota { color: var(--color-texto-secundario); font-style: italic; }

/* ---- Popup de promo (Administración → Promos): una sola imagen, se
   muestra sola al entrar al menú. Sin padding/cuerpo de texto como el resto
   de los .modal-card -- acá la imagen ES el contenido, el botón ✕ queda
   flotando encima. Tocar la imagen abre el modal de producto de arriba. ----
   Reportado 2026-08-09: con una imagen grande, en el navegador Vivaldi de
   Android la imagen se veía enorme y recortada (mucho más ancha que la
   pantalla), mientras que en Chrome se veía bien -- confirmado comparando
   capturas de los dos. La versión anterior de acá dependía de que el
   navegador combine bien "width:100% + max-height + object-fit:contain" SIN
   una altura explícita, y Vivaldi la resuelve mal. Se cambió al patrón
   clásico "imagen responsive" (max-width/max-height + width/height:auto),
   que fuerza al navegador a calcular el tamaño final directo a partir del
   aspecto de la imagen -- sin pasar por object-fit -- así el ancho NUNCA
   puede superar el de la tarjeta (que a su vez nunca supera el de la
   pantalla, ver .modal-overlay/.modal-card-ancho). object-fit:contain queda
   igual, de más, por si algún navegador lo necesita como ayuda extra. */
.modal-promo-card { position: relative; padding: 0; overflow: hidden; min-width: 0; }
.modal-promo-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80vh; object-fit: contain; cursor: pointer; }

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

.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-barras { display: flex; align-items: flex-end; height: 100%; 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" (config. en configuracion.php): 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; }
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 .prod-item { padding: 6px; font-size: .9rem; gap: 8px; }
body.compacto .prod-item-img { width: 40px; height: 40px; }
body.compacto .prod-item-precio { font-size: .82rem; }
body.compacto .prod-desc { display: none; } /* filas chicas: sin lugar para la descripción */
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; }

/* ---- 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 ---- */
.ticket { max-width: 340px; margin: 0 auto; background: var(--color-superficie); color: var(--color-texto); padding: 16px; font-family: monospace; }
.ticket table { width: 100%; font-size: .85rem; }
.ticket hr { border: none; border-top: 1px dashed var(--color-texto); }
@media print {
    .nav, .nav-bar, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .ticket { background: #fff; color: #000; }
    .ticket hr { border-top: 1px dashed #000; }
}

/* ---- Autocompletado de direcciones (autocompletar.js) ---- */
.autocompletar-lista {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
}
.autocompletar-item {
    padding: 12px 14px;
    cursor: pointer;
    border-top: 1px solid var(--color-borde);
}
.autocompletar-item:hover {
    background: var(--color-fondo);
}
.autocompletar-escape {
    font-style: italic;
    color: #666;
}