/* GymPlug POS — Responsive overrides
   No tocamos las clases base (gp-header, gp-btn, etc.) del plugin núcleo,
   solo añadimos comportamiento responsive encima.

   BUG 2 FIX — Mobile cart layout:
   El DS define .gp-card { height: 100% } para que las cards ocupen el alto
   de su celda de grid en los dashboards. En el carrito del POS (mobile,
   columna única apilada) eso hace que cada card se expanda al 100% del
   contenedor padre, generando espacio en blanco enorme cuando el carrito
   está vacío o hay pocos items. Solución: resetear height:100% en las
   cards del aside#gpp-cart en mobile y darle scroll interno propio
   SOLO a la lista de items, no a la card completa.
*/

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL: catálogo + carrito
   Mobile: una columna apilada (catálogo arriba, carrito abajo).
   Desktop (≥881px): grid de dos columnas fijas. Catálogo y carrito
   scrollean de forma independiente; el carrito queda sticky.
   ═══════════════════════════════════════════════════════════════════════ */
#gp-pos .gp-tab-panel.gpp-pos-layout.is-active {
    display: flex;
    flex-direction: column;
    gap: var(--gp-space-4, 16px);
}

#gp-pos #gpp-catalog { min-width: 0; }
#gp-pos #gpp-cart    { min-width: 0; }

@media (min-width: 881px) {
    #gp-pos .gp-tab-panel.gpp-pos-layout.is-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
        gap: var(--gp-space-6, 24px);
        height: 100%;
    }

    /* Catálogo: scroll interno, no empuja la página */
    #gp-pos #gpp-catalog {
        max-height: calc(100dvh - var(--gp-header-h, 64px) - var(--gp-space-8, 32px));
        /* fallback navegadores sin dvh */
        max-height: calc(100vh  - var(--gp-header-h, 64px) - var(--gp-space-8, 32px));
        max-height: calc(100dvh - var(--gp-header-h, 64px) - var(--gp-space-8, 32px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: var(--gp-space-2, 8px);
    }

    /* Carrito: sticky, scroll interno, altura acotada */
    #gp-pos #gpp-cart {
        position: sticky;
        top: 0;
        max-height: calc(100vh  - var(--gp-header-h, 64px) - var(--gp-space-8, 32px));
        max-height: calc(100dvh - var(--gp-header-h, 64px) - var(--gp-space-8, 32px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* En desktop los cards del carrito pueden estirarse libremente */
    #gp-pos #gpp-cart .gp-card {
        height: auto;   /* anula el height:100% del DS en desktop también;
                           las cards se dimensionan por su contenido */
    }

    #gp-pos #gpp-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ASIDE #gpp-cart — Mobile
   Objetivo: carrito compacto que no infla la página con espacio vacío.
   Referencia de estructura (no de estética): carrito tipo Glozin —
   secciones bien delimitadas, la lista de items tiene scroll propio,
   cliente y pago son compactos hasta que tienen contenido.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {

    /* El aside completo: no estira, no scrollea él mismo */
    #gp-pos #gpp-cart {
        display: flex;
        flex-direction: column;
        gap: var(--gp-space-3, 12px);
    }

    /* TODAS las cards del carrito: anular height:100% del DS.
       En mobile apilado ese valor estira la card al 100% del
       contenedor (que en una columna flex es indeterminado = auto,
       pero en la práctica termina heredando de ancestros y genera
       el espacio en blanco excesivo reportado). */
    #gp-pos #gpp-cart .gp-card {
        height: auto;
        min-height: 0;
    }

    /* El gp-card__body tampoco debe crecer libremente (flex:1 del DS
       lo expande al espacio disponible de la card, que ya es auto). */
    #gp-pos #gpp-cart .gp-card .gp-card__body {
        flex: 0 0 auto;
        overflow-y: visible;   /* el scroll está en #gpp-cart-items, no aquí */
    }

    /* ── SECCIÓN CLIENTE: compacta por defecto ── */
    /* La card de cliente es la menos prioritaria visualmente.
       Cuando no hay cliente seleccionado queda como un input simple. */
    #gp-pos #gpp-cart > .gp-card:first-child {
        /* primer .gp-card = Cliente */
        padding: var(--gp-space-4, 16px);
    }
    #gp-pos #gpp-cart > .gp-card:first-child .gp-card__header {
        margin-bottom: var(--gp-space-2, 8px);
    }

    /* ── SECCIÓN CARRITO (items): protagonista ── */
    /* La segunda card = carrito de items. Tiene altura máxima con
       scroll propio para no desbordarse en la página. */
    #gp-pos #gpp-cart > .gp-card:nth-child(2) {
        /* Carrito */
        flex: 1 1 auto;
    }

    /* Lista de items: scroll interno acotado.
       Máximo ~40% del viewport para que siempre quede espacio para
       el botón Cobrar, el resumen de total y los métodos de pago.
       min() garantiza que en pantallas muy cortas no desborde. */
    #gp-pos #gpp-cart-items {
        max-height: min(40vh, 280px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Separador visual entre items y total */
        padding-bottom: var(--gp-space-2, 8px);
    }
    /* Scrollbar sutil para no robar ancho */
    #gp-pos #gpp-cart-items::-webkit-scrollbar {
        width: 3px;
    }
    #gp-pos #gpp-cart-items::-webkit-scrollbar-track {
        background: transparent;
    }
    #gp-pos #gpp-cart-items::-webkit-scrollbar-thumb {
        background: var(--gp-border-color, #2a2a2a);
        border-radius: 2px;
    }

    /* Cuando el carrito está vacío: estado compacto, sin alto extra */
    #gp-pos #gpp-cart-empty {
        padding: var(--gp-space-4, 16px) 0;
        min-height: 0;
    }
    /* El DS define .gp-empty con padding vertical generoso pensado para
       secciones grandes. En la card de carrito vacía en mobile queda
       demasiado alto — reducimos. */
    #gp-pos #gpp-cart .gp-empty {
        padding-top: var(--gp-space-3, 12px);
        padding-bottom: var(--gp-space-3, 12px);
    }

    /* ── SECCIÓN PAGO: compacta hasta que se activa ── */
    /* La card de pago aparece solo cuando hay items (#gpp-payment-section).
       Padding reducido en mobile para dejar espacio al botón Cobrar. */
    #gp-pos #gpp-payment-section {
        padding: var(--gp-space-4, 16px);
    }
    #gp-pos #gpp-payment-section .gp-card__header {
        margin-bottom: var(--gp-space-2, 8px);
    }

    /* ── BOTÓN COBRAR: siempre visible, anclado al final ── */
    /* El botón Cobrar está dentro de la sección de pago. Para garantizar
       que siempre sea visible sin scroll de página, lo sacamos del flujo
       normal de la card y lo anclamos al bottom del viewport con un
       wrapper sticky. La alternativa (position:fixed) interfiere con el
       teclado virtual de iOS — sticky es la solución correcta aquí. */
    #gpp-checkout-btn {
        position: sticky;
        bottom: env(safe-area-inset-bottom, 0px);
        z-index: 10;
        /* Sombra hacia arriba para separarlo del contenido que queda encima */
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
        margin-top: var(--gp-space-3, 12px);
        /* Asegurar altura táctil cómoda */
        min-height: 52px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLBAR DEL CATÁLOGO: buscador + filtros de categoría
   ═══════════════════════════════════════════════════════════════════════ */
#gp-pos .gpp-catalog-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--gp-space-3, 12px);
    margin-bottom: var(--gp-space-4, 16px);
    position: sticky;
    top: 0;
    background: var(--gp-bg-primary);
    padding-top: var(--gp-space-1, 4px);
    padding-bottom: var(--gp-space-2, 8px);
    z-index: 2;
}

#gp-pos #gpp-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-space-2, 8px);
}

#gp-pos .gp-filter-chip { flex-shrink: 0; }

#gp-pos .gp-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-space-2, 8px);
}

/* ── Header mobile ── */
#gpp-header-menu-toggle {
    display: none;
}

#gp-pos .gp-header {
    gap: var(--gp-space-3, 12px);
}

#gp-pos .gp-header__left {
    display: flex;
    align-items: center;
    gap: var(--gp-space-3, 12px);
    min-width: 0;
}

#gp-pos .gpp-header-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

@media (max-width: 880px) {
    #gp-pos .gp-header {
        align-items: center;
    }

    #gp-pos .gp-header__left {
        flex: 1 1 auto;
        min-width: 0;
    }

    #gp-pos .gpp-header-title h1#gpp-venue-name {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45vw;
        margin: 0;
        line-height: 1.2;
    }

    #gp-pos .gpp-header-title .gp-connection-indicator {
        line-height: 1.2;
    }

    #gpp-header-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        flex-shrink: 0;
    }

    /* Panel flotante del menú — NO cambiar position del header (ver nota original) */
    #gp-pos .gp-header__actions {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: calc(var(--gp-header-h, 64px) + env(safe-area-inset-top) + var(--gp-space-2, 8px));
        left: 0;
        right: 0;
        width: auto;
        z-index: 1000;
        background-color: var(--gp-surface-color, var(--gp-bg-elevated, #1c1c1c));
        border: 1px solid var(--gp-border-color, #2a2a2a);
        border-radius: var(--gp-radius-md, 8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        padding: var(--gp-space-3, 12px);
        gap: var(--gp-space-2, 8px);
        margin: 0 var(--gp-space-3, 12px);
    }

    #gp-pos .gp-header__actions.gpp-actions--open {
        display: flex;
    }

    #gp-pos .gp-header__actions > * {
        width: 100%;
    }

    #gp-pos .gp-header__actions .gp-btn {
        width: 100%;
        justify-content: center;
    }

    #gpp-clock {
        order: -1;
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MÉTODOS DE PAGO — botones táctiles
   Reglas base (sin media query): aplican a todos los tamaños de pantalla.
   El JS inyecta #gpp-payment-mode-buttons con style="display:none;gap:…"
   pero sin display:flex — cuando se muestra, display pasa a 'flex' desde
   JS (el CSS solo lo oculta por defecto; cuando JS pone display:block o
   '' sería un bloque, no flex). Para garantizar flex en cualquier caso
   lo forzamos aquí con el selector de estado de visibilidad. Además los
   botones deben tener min-width:0 para que flex-wrap funcione sin
   desbordar al contenedor.
   ═══════════════════════════════════════════════════════════════════════ */

/* Contenedor de métodos de pago: siempre flex con wrap */
#gpp-payment-methods-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-space-2, 8px);
    width: 100%;
    box-sizing: border-box;
}

#gpp-payment-methods-buttons .gp-btn {
    flex: 1 1 calc(50% - var(--gp-space-2, 8px));
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contenedor de Pago completo / Pago fraccionado.
   JS gestiona display:flex / display:none directamente con style inline,
   así que no declaramos display aquí para evitar conflicto. Solo
   definimos flex-wrap y box-sizing para que cuando JS lo muestre como
   flex, los botones no desborden. */
#gpp-payment-mode-buttons {
    flex-wrap: wrap;
    gap: var(--gp-space-2, 8px);
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--gp-space-2, 8px);
}

#gpp-payment-mode-buttons .gp-btn {
    flex: 1 1 calc(50% - var(--gp-space-2, 8px));
    min-width: 120px; /* evita que el texto se corte demasiado */
    min-height: 44px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En pantallas muy pequeñas: botones apilados uno bajo otro */
@media (max-width: 400px) {
    #gpp-payment-methods-buttons .gp-btn,
    #gpp-payment-mode-buttons .gp-btn {
        flex: 1 1 100%;
    }
}

/* ── Touch-action: evita delays de 300ms en navegadores móviles ── */
#gpp-payment-section,
#gpp-payment-methods-buttons,
#gpp-payments-applied {
    position: relative;
    z-index: 1;
}

#gpp-payment-methods-buttons .gp-btn,
#gpp-payment-mode-buttons .gp-btn,
#gpp-payments-applied .gp-input,
#gpp-payments-applied .gp-btn {
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
}

/* iOS Safari: font-size ≥ 16px evita el zoom automático al enfocar inputs */
#gpp-payments-applied .gp-form-row {
    flex-wrap: wrap;
}

#gpp-payments-applied .gp-input {
    font-size: 16px;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG FIX — Buscador de cliente: el dropdown de sugerencias
   (#gpp-member-suggestions) es position:absolute anclado a .gp-search-wrap,
   pero .gp-card__body (DS) tiene overflow-y:auto para permitir scroll
   interno en cards largas. Ese overflow recorta el dropdown aunque esté
   posicionado de forma absoluta, dejando su área clickeable desalineada
   con lo que se ve en pantalla — por eso "seleccionar" un cliente parece
   no hacer nada. La tarjeta "Cliente" no necesita scroll propio (poco
   contenido), así que anulamos el overflow solo en esta card específica.
   ═══════════════════════════════════════════════════════════════════════ */
#gpp-client-card-body {
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG FIX — Buscador de cliente en móvil: mismo patrón táctil aplicado a
   los botones de método de pago (touch-action + pointer-events explícitos
   para evitar el delay de 300ms / taps fantasma en Android e iOS).
   ═══════════════════════════════════════════════════════════════════════ */
#gpp-member-suggestions [data-member-suggestion] {
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ OFF-CANVAS: Caja / Estado de cuenta
   Reemplaza tanto el tabbar inferior de mobile como el problema de que
   "Estado de cuenta" desaparecía en desktop (el DS oculta .gp-tabbar con
   display:none en ≥768px, pensado para dashboards con sidebar). Aquí no
   reutilizamos .gp-tabbar en absoluto: es un panel propio del addon.

   Mismo comportamiento en TODOS los tamaños de pantalla: oculto por
   defecto, se abre a pantalla completa sobre el contenido (no como un
   panel que se "agolpa" desde un costado dejando la página visible al
   lado — eso es lo que se veía apretado y superpuesto en espacios chicos,
   tanto en teléfono como en computadora).
   ═══════════════════════════════════════════════════════════════════════ */
.gpp-nav-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-bg-card, #141414);
    border: 1px solid var(--gp-border-color, #2a2a2a);
    border-radius: var(--gp-radius-md, 12px);
    padding: 0;
    cursor: pointer;
    color: var(--gp-color-accent, #E8FF00);
}

.gpp-nav-toggle .gp-hamburger span {
    background: var(--gp-color-accent, #E8FF00);
}

.gpp-nav-overlay {
    display: none;
}

.gpp-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--gp-z-modal, 1000);
    background: var(--gp-bg-primary, #0a0a0a);
    display: flex;
    flex-direction: column;
    gap: var(--gp-space-1, 4px);
    padding: calc(env(safe-area-inset-top) + var(--gp-space-4, 16px)) var(--gp-space-4, 16px);
    transform: translateX(-100%);
    transition: transform var(--gp-transition-base, 250ms ease);
    overflow-y: auto;
}

.gpp-nav-drawer--open {
    transform: translateX(0);
}

.gpp-nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gp-space-4, 16px);
}

.gpp-nav-drawer__item {
    display: flex;
    align-items: center;
    gap: var(--gp-space-3, 12px);
    width: 100%;
    text-align: left;
    padding: var(--gp-space-4, 16px);
    border-radius: var(--gp-radius-md, 12px);
    background: transparent;
    border: 1px solid transparent;
    color: var(--gp-text-secondary, #8a8a8a);
    font-family: var(--gp-font-body, inherit);
    font-size: var(--gp-text-base, 1rem);
    font-weight: 600;
    cursor: pointer;
}

.gpp-nav-drawer__item:hover {
    background: var(--gp-bg-secondary, #1f1f1f);
}

.gpp-nav-drawer__item--active {
    background: rgba(var(--gp-accent-rgb, 232, 255, 0), 0.1);
    border-color: var(--gp-color-accent, #E8FF00);
    color: var(--gp-text-primary, #fff);
}

.gpp-nav-drawer__icon {
    font-size: var(--gp-text-xl, 1.25rem);
    line-height: 1;
}

/* Bloquea el scroll de fondo mientras el drawer está abierto */
body.gpp-nav-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER DEL POS — botones compactos con color propio por función
   Antes todos los botones del header usaban .gp-btn--secondary (borde +
   texto, sin fondo) al tamaño base de .gp-btn, pensado para un solo CTA
   grande. Con 8+ botones juntos eso se veía enorme y apretado. Ahora usan
   .gp-btn--xs (ver design-system) + una variante de color propia del
   addon (.gpp-hbtn--*) que NO hereda .gp-btn--secondary/primary/ghost,
   para poder tener fondo sólido de color distinto por botón sin tocar
   las reglas globales de esas variantes en el resto del sistema.
   ═══════════════════════════════════════════════════════════════════════ */
.gpp-hbtn {
    color: var(--gp-bg-primary, #0a0a0a);
    border: none;
}

.gpp-hbtn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.gpp-hbtn--toggle {
    background: var(--gp-bg-card, #141414);
    border: 1px solid var(--gp-border-color, #2a2a2a);
    color: var(--gp-text-primary, #fff);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--gp-radius-md, 12px);
}

.gpp-hbtn--blue      { background: #4C8DFF; }
.gpp-hbtn--purple    { background: #A66CFF; }
.gpp-hbtn--amber     { background: var(--gp-color-warning, #FFD60A); }
.gpp-hbtn--teal      { background: #2DD4BF; }
.gpp-hbtn--green     { background: var(--gp-color-success, #30D158); }
.gpp-hbtn--warning   { background: var(--gp-color-warning, #FFD60A); }
.gpp-hbtn--red       { background: var(--gp-color-error, #FF3B30); color: var(--gp-color-white, #fff); }
.gpp-hbtn--neutral   { background: var(--gp-bg-secondary, #1f1f1f); color: var(--gp-text-primary, #fff); }

/* Los badges de contador (Aprobaciones, Pedidos, Pendientes) ya usan
   colores del DS pensados para fondos oscuros/neutros — sobre fondo
   sólido de color propio necesitan buen contraste. */
.gpp-hbtn .gp-badge {
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS DE RESUMEN (total facturado, por método de pago)
   ═══════════════════════════════════════════════════════════════════════ */
.gpp-summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--gp-space-1, 4px);
}

.gpp-summary-card--accent {
    border: 1px solid var(--gp-color-accent, #E8FF00);
}