/* ============================================================================
   TG-MASTER PATCH-32 - FOUNDATION V2
   Capa de tokens responsive + WCAG AA + grid adaptativo
   
   FILOSOFIA:
   - NO reemplaza los tokens existentes (--mn-*) de site.css
   - SUMA tokens responsive (--mn-fs-*, --mn-rs-*) para uso opcional
   - Refactor del POS scoped a .pos-shell (no afecta otras paginas)
   - Compatibilidad 100% con paginas existentes
   ============================================================================ */

:root {
    /* === TIPOGRAFIA RESPONSIVE (clamp para escalar con viewport) === */
    /* Cada token tiene: minimo, ideal (vw), maximo */
    --mn-fs-xs:   clamp(0.65rem,  0.55vw + 0.5rem,   0.75rem);   /* ~10-12px */
    --mn-fs-sm:   clamp(0.75rem,  0.6vw + 0.6rem,    0.875rem);  /* ~12-14px */
    --mn-fs-base: clamp(0.875rem, 0.7vw + 0.7rem,    1rem);      /* ~14-16px */
    --mn-fs-md:   clamp(1rem,     0.8vw + 0.85rem,   1.125rem);  /* ~16-18px */
    --mn-fs-lg:   clamp(1.125rem, 1vw + 0.9rem,      1.375rem);  /* ~18-22px */
    --mn-fs-xl:   clamp(1.375rem, 1.3vw + 1rem,      1.75rem);   /* ~22-28px */
    --mn-fs-xxl:  clamp(1.625rem, 1.6vw + 1.2rem,    2.25rem);   /* ~26-36px */

    /* === SPACING RESPONSIVE === */
    --mn-rs-1: clamp(0.25rem,  0.3vw + 0.15rem, 0.4rem);   /* ~4-6px */
    --mn-rs-2: clamp(0.4rem,   0.4vw + 0.3rem,  0.6rem);   /* ~6-10px */
    --mn-rs-3: clamp(0.6rem,   0.5vw + 0.5rem,  0.875rem); /* ~10-14px */
    --mn-rs-4: clamp(0.875rem, 0.7vw + 0.7rem,  1.25rem);  /* ~14-20px */
    --mn-rs-5: clamp(1.25rem,  1vw + 1rem,      1.75rem);  /* ~20-28px */
    --mn-rs-6: clamp(1.5rem,   1.2vw + 1.2rem,  2.25rem);  /* ~24-36px */

    /* === PALETA WCAG AA accesible (contraste >= 4.5:1 sobre --mn-bg-1) === */
    /* Tests con WebAIM Contrast Checker - todos pasan AA mínimo */
    --mn-aa-text-strong: #f4f6fa;   /* 15.7:1 sobre #14171d - AAA */
    --mn-aa-text-base:   #d8dce4;   /* 11.2:1 sobre #14171d - AAA */
    --mn-aa-text-muted:  #a8aebc;   /* 6.4:1 sobre #14171d - AA  */ /* antes #889 era 3.5:1 (FAIL) */
    --mn-aa-text-faint:  #7d8392;   /* 4.7:1 sobre #14171d - AA  */ /* mínimo aceptable */

    --mn-aa-success: #4ade80;       /* 8.3:1 sobre #14171d */
    --mn-aa-warning: #fbbf24;       /* 9.5:1 sobre #14171d */
    --mn-aa-danger:  #f87171;       /* 5.9:1 sobre #14171d */
    --mn-aa-info:    #60a5fa;       /* 6.5:1 sobre #14171d */

    /* === BREAKPOINTS como custom properties (referencia) === */
    --mn-bp-mobile: 30rem;     /* ~480px */
    --mn-bp-tablet: 48rem;     /* ~768px */
    --mn-bp-desk:   68.75rem;  /* ~1100px */
    --mn-bp-wide:   87.5rem;   /* ~1400px */
}

/* ============================================================================
   POS REFACTOR - Bloque .pos-shell scoped (no afecta otras paginas)
   Reemplaza el bloque PATCH-29 a PATCH-31 con un layout limpio basado en
   grid adaptativo + container queries + unidades responsive
   ============================================================================ */

/* === Shell del POS: flex column con altura del viewport === */
.pos-shell.pos-cuadrado.pp29 {
    display: flex;
    flex-direction: column;
    height: 100dvh;                   /* dvh respeta el chrome del navegador */
    max-height: 100dvh;
    padding:
        var(--mn-rs-2) var(--mn-rs-2)
        calc(var(--mn-rs-5) + 3.75rem)  /* 3.75rem = altura del footer global */
        var(--mn-rs-2);
    box-sizing: border-box;
    overflow: hidden;
    gap: var(--mn-rs-2);
    background-image:
        radial-gradient(at 20% 0%, rgba(62, 207, 142, 0.04), transparent 40%),
        radial-gradient(at 80% 100%, rgba(245, 166, 35, 0.04), transparent 40%);
}

/* === Header VENTA #N + Total combinados === */
.pp29 .pos-head-min,
.pp29 .pos-head-slim {
    flex: 0 0 auto;
    background: linear-gradient(90deg, var(--mn-bg-glass), rgba(28, 32, 44, 0.92));
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--mn-r-md);
    padding: var(--mn-rs-2) var(--mn-rs-3);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--mn-rs-3);
    min-height: clamp(2rem, 2vh + 1.5rem, 2.75rem);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    box-shadow: var(--mn-elev-1);
    margin: 0;
}

.pp29 .pos-head-vid-big {
    font-size: var(--mn-fs-sm);
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #f5c76e;
    text-shadow: 0 0 0.75rem rgba(245, 166, 35, 0.3);
}
.pp29 .pos-head-turno {
    font-size: var(--mn-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mn-aa-text-muted);
}

/* === Total fijo verde (cuando hay items) === */
.pp29 .pos-total-fijo {
    flex: 0 0 auto;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    margin: 0;
    background: linear-gradient(135deg, rgba(62, 207, 142, 0.20) 0%, rgba(15, 80, 45, 0.30) 100%);
    border: 1px solid rgba(62, 207, 142, 0.25);
    border-radius: var(--mn-r-md);
    box-shadow: var(--mn-elev-2);
    overflow: hidden;
    position: relative;
}
.pp29 .pos-total-fijo::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -100%;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: pos-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pos-shimmer {
    0%, 60%, 100% { left: -100%; }
    30% { left: 200%; }
}
.pp29 .pos-total-fijo .ptf-monto {
    font-size: var(--mn-fs-xl);
    font-weight: 900;
    color: #c8f9da;
    text-shadow: 0 0 0.875rem rgba(62, 207, 142, 0.5);
}
.pp29 .pos-total-fijo .ptf-cant {
    font-size: var(--mn-fs-md);
    font-weight: 800;
    color: #6ef0a0;
}
.pp29 .pos-total-fijo .ptf-cant-lbl,
.pp29 .pos-total-fijo .ptf-lbl {
    font-size: var(--mn-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mn-aa-text-muted);
    text-transform: uppercase;
}

/* === GRID PRINCIPAL ADAPTATIVO ===
   auto-fit + minmax + clamp:
   - En pantallas grandes (>=1100px): 3 columnas
   - En medianas (768-1100): 2 columnas (extras se reapila)
   - En chicas (<768): 1 columna apilada
   La GRACIA: NO se necesitan media queries para esto */
.pp29 .pos-grid-cuadrado {
    display: grid;
    grid-template-columns:
        clamp(15rem, 18vw, 20rem)
        minmax(0, 1fr)
        clamp(15rem, 18vw, 20rem);
    gap: var(--mn-rs-2);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

@media (max-width: 68.75rem) {
    .pp29 .pos-grid-cuadrado {
        grid-template-columns: 1fr;
    }
    .pp29 .zona-busqueda { order: 1; }
    .pp29 .centro-col    { order: 2; }
    .pp29 .zona-extras   { order: 3; }
    .pos-shell.pos-cuadrado.pp29 {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

/* === COLUMNA CENTRAL: carrito + cobro === */
.pp29 .centro-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(6rem, 0.35fr) minmax(0, 1.65fr);  /* PATCH-32.2 - carrito mas chico, cobro mas grande */
    gap: var(--mn-rs-2);
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
@media (max-width: 68.75rem) {
    .pp29 .centro-col { display: contents; }
}

/* === ZONAS (todas con flex column + container query support) === */
.pp29 .zona-busqueda,
.pp29 .zona-carrito,
.pp29 .zona-cobro,
.pp29 .zona-extras {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-height: 100%;
    padding: 0;
    border-radius: var(--mn-r-lg);
    border: 1px solid var(--mn-line);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: zona;
}

/* Backgrounds por zona */
.pp29 .zona-busqueda {
    background: linear-gradient(160deg, rgba(28, 32, 44, 0.65), rgba(20, 23, 31, 0.75));
    border-left: 0.1875rem solid rgba(96, 165, 250, 0.55);
}
.pp29 .zona-carrito {
    background: linear-gradient(135deg, rgba(26, 31, 44, 0.7) 0%, rgba(20, 23, 31, 0.8) 100%);
    border-left: 0.1875rem solid #3ecf8e;
    box-shadow: var(--mn-elev-2);
}
.pp29 .zona-cobro {
    background: linear-gradient(135deg, rgba(28, 32, 42, 0.7) 0%, rgba(19, 23, 32, 0.8) 100%);
    border-left: 0.1875rem solid #f5a623;
    box-shadow: var(--mn-elev-2);
}
.pp29 .zona-extras {
    background: linear-gradient(160deg, rgba(28, 32, 44, 0.65), rgba(20, 23, 31, 0.75));
    border-left: 0.1875rem solid rgba(168, 85, 247, 0.55);
}

/* Headers de zona */
.pp29 .zona-busqueda > h3,
.pp29 .zona-carrito > h3,
.pp29 .zona-cobro > h3,
.pp29 .zona-extras > h3 {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.55), rgba(20, 23, 31, 0.3));
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mn-aa-text-base);
    display: flex;
    align-items: center;
    gap: var(--mn-rs-1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

/* Underline gradient por zona (sutil, no contaminante) */
.pp29 .zona-busqueda > h3::after,
.pp29 .zona-carrito > h3::after,
.pp29 .zona-cobro > h3::after,
.pp29 .zona-extras > h3::after {
    content: "";
    position: absolute;
    inset: auto var(--mn-rs-3) 0 var(--mn-rs-3);
    height: 0.125rem;
    border-radius: 0.125rem;
}
.pp29 .zona-busqueda > h3::after { background: linear-gradient(90deg, rgba(96, 165, 250, 0.55), transparent); }
.pp29 .zona-carrito > h3::after  { background: linear-gradient(90deg, rgba(62, 207, 142, 0.6), transparent); }
.pp29 .zona-cobro > h3::after    { background: linear-gradient(90deg, rgba(245, 166, 35, 0.6), transparent); }
.pp29 .zona-extras > h3::after   { background: linear-gradient(90deg, rgba(168, 85, 247, 0.55), transparent); }

/* === CONTENIDO scrolleable de zonas simples === */
.pp29 .zona-busqueda > *:not(h3),
.pp29 .zona-carrito > *:not(h3),
.pp29 .zona-extras > *:not(h3) {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    min-height: 0;
}

/* === ZONA-COBRO: layout especial con orden visual === */
.pp29 .zona-cobro > h3 { order: 1; flex: 0 0 auto; }
.pp29 .zona-cobro > .canal-wrap {
    order: 2;
    flex: 0 0 auto;
    padding: var(--mn-rs-2) var(--mn-rs-3) 0;
    margin: 0;
}
.pp29 .zona-cobro > .pp29-cobro-scroll {
    order: 3;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* PATCH-32.6 - padding-top agregado para que cards medio pago no se corten arriba */
    padding: var(--mn-rs-2) var(--mn-rs-2) var(--mn-rs-2);
    margin: 0;
    min-height: clamp(8rem, 12vh, 10rem);
    flex-shrink: 0;
}
.pp29 .zona-cobro > .sub-block {
    order: 4;
    flex: 0 1 auto;
    max-height: 35%;
    overflow-y: auto;
    padding: 0 var(--mn-rs-3) var(--mn-rs-1);
    margin: 0;
}
.pp29 .zona-cobro > .pp29-cobro-footer {
    order: 99;
    flex: 0 0 auto;
    margin: 0;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    background: linear-gradient(180deg, rgba(15, 18, 24, 0.85) 0%, rgba(15, 18, 24, 0.99) 100%);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border-top: 1px solid rgba(245, 158, 11, 0.18);
    box-shadow: 0 -0.25rem 0.875rem rgba(0, 0, 0, 0.4);
    z-index: 3;
    position: relative;
    max-height: 50%;
    overflow-y: auto;
}

/* TOTAL FINAL grande */
.pp29 .zona-cobro .tot-final-h {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(245, 166, 35, 0.10));
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: var(--mn-r-md);
    padding: var(--mn-rs-2) var(--mn-rs-3);
    margin: var(--mn-rs-1) 0 0;
    font-weight: 900;
    font-size: var(--mn-fs-md);
    color: #fde68a;
    text-shadow: 0 0 0.625rem rgba(245, 166, 35, 0.35);
    box-shadow: var(--mn-elev-2);
}
.pp29 .zona-cobro .tot-final-h > span:last-child {
    font-size: var(--mn-fs-lg);
    color: #fffbeb;
}

/* Scrollbars uniformes */
.pp29 *::-webkit-scrollbar { width: 0.3125rem; height: 0.3125rem; }
.pp29 *::-webkit-scrollbar-track { background: transparent; }
.pp29 *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0.3125rem;
    transition: background var(--mn-dur-base) ease;
}
.pp29 *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* === Carrito vacio === */
.pp29 .zona-carrito .pos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* PATCH-32.6 - no pide 100%, solo el espacio que necesita */
    min-height: 3rem;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    color: var(--mn-aa-text-faint);
    font-size: var(--mn-fs-sm);
    font-weight: 500;
    text-align: center;
    opacity: 0.65;
}
.pp29 .zona-carrito .pos-empty::before {
    content: "🛒";
    display: block;
    font-size: var(--mn-fs-xxl);
    opacity: 0.3;
    margin-bottom: var(--mn-rs-2);
}

/* === ANTIPANICO: posicionamiento accesible === */
.ap-btn-flotante {
    bottom: clamp(5rem, 6vh, 6.5rem) !important;
    right: clamp(0.625rem, 1vw, 1.25rem) !important;
    top: auto !important;
    left: auto !important;
    z-index: 9999 !important;
    transform: none !important;
}

/* === FOOTER GLOBAL === */
.pp29-footer-actions {
    position: fixed;
    inset: auto 0 0 0;
    height: clamp(3.25rem, 4.5vh, 3.75rem);
    display: grid;
    grid-template-columns: clamp(8rem, 14vw, 14rem) 1fr;
    background: linear-gradient(180deg, rgba(13, 16, 22, 0.85), rgba(10, 12, 18, 0.99));
    backdrop-filter: blur(0.875rem);
    -webkit-backdrop-filter: blur(0.875rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 100;
    box-shadow: 0 -0.5rem 1.75rem rgba(0, 0, 0, 0.5);
    margin: 0;
}
.pp29-footer-actions::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.pp29-footer-actions > button {
    border: none;
    border-radius: 0;
    margin: 0;
    font-size: var(--mn-fs-base);
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter var(--mn-dur-base) ease, transform var(--mn-dur-base) ease;
    position: relative;
    overflow: hidden;
}
.pp29-footer-actions > button:hover:not(:disabled) { filter: brightness(1.15); }
.pp29-footer-actions > button:active:not(:disabled) { transform: scale(0.99); }
.pp29-footer-actions > button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7) brightness(0.55);
}
.pp29-footer-cancelar {
    background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
    color: #fee2e2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.pp29-footer-cancelar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}
.pp29-footer-confirmar {
    background: linear-gradient(180deg, #16a34a 0%, #14532d 100%);
    color: #ecfdf5;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(62, 207, 142, 0.2),
        0 -4px 24px rgba(62, 207, 142, 0.18);
}
.pp29-footer-confirmar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
    pointer-events: none;
}

/* === MEDIO PAGO: grid adaptativo (auto-fit) === */
.pp29 .zona-cobro .mps-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));  /* PATCH-32.2 - 6 cols fijos como base */
    gap: var(--mn-rs-1);
    margin: var(--mn-rs-2) 0;
    width: 100%;
}
.pp29 .zona-cobro .mps-card {
    min-height: clamp(3.5rem, 5vh, 4.5rem);  /* PATCH-32.2 - mas compactas */
    padding: var(--mn-rs-1) var(--mn-rs-1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.125rem;
    width: 100%;
    min-width: 0;
}
.pp29 .zona-cobro .mps-card .mps-emoji { font-size: var(--mn-fs-md); line-height: 1; }
.pp29 .zona-cobro .mps-card .mps-label {
    font-size: 0.625rem;  /* PATCH-32.2 - mas chico, fija en 10px */
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.pp29 .zona-cobro .mps-card .mps-pct {
    font-size: 0.55rem;  /* PATCH-32.2 - aun mas chico */
    padding: 0 0.25rem;
    margin-top: 0.1rem;
}

/* === Cliente sidebar === */
.pp29 .zona-extras .cliente-card,
.pp29 .zona-extras .reco-card,
.pp29 .zona-extras .combo-sug,
.pp29 .zona-extras .pm-info-no,
.pp29 .zona-extras .pm-info-yes,
.pp29 .zona-extras .pm-status {
    padding: var(--mn-rs-2);
    margin-bottom: var(--mn-rs-1);
    border-radius: var(--mn-r-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: border-color var(--mn-dur-base) ease, background var(--mn-dur-base) ease;
}

/* Plan Manolito "NO se sumo" compacto */
.pp29 .zona-extras .pm-status-no,
.pp29 .zona-extras .pm-no-sumo,
.pp29 .pm-info-no {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(127, 29, 29, 0.08));
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-left: 0.1875rem solid #ef4444;
    color: var(--mn-aa-danger);
    font-size: var(--mn-fs-xs);
    line-height: 1.4;
    padding: var(--mn-rs-2);
    border-radius: var(--mn-r-md);
}

.pp29 .zona-extras h4,
.pp29 .zona-extras .section-title {
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mn-aa-text-muted);
    margin: var(--mn-rs-2) 0 var(--mn-rs-1);
    padding-bottom: var(--mn-rs-1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* === Progress bar (PATCH-30 QW#2) refactorizado === */
.venta-progress {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-gap: var(--mn-rs-1) var(--mn-rs-3);
    padding: var(--mn-rs-2) var(--mn-rs-3);
    margin: 0;
    background: linear-gradient(135deg, rgba(28, 32, 44, 0.7), rgba(20, 23, 31, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--mn-r-md);
    box-shadow: var(--mn-elev-1);
    align-items: center;
    transition: border-color var(--mn-dur-base) ease, box-shadow var(--mn-dur-base) ease;
}
.venta-progress.vp-empty { border-color: rgba(120, 120, 130, 0.2); }
.venta-progress.vp-low   { border-color: rgba(245, 158, 11, 0.3); }
.venta-progress.vp-mid   { border-color: rgba(245, 166, 35, 0.4); }
.venta-progress.vp-high  { border-color: rgba(96, 165, 250, 0.45); }
.venta-progress.vp-full {
    border-color: rgba(62, 207, 142, 0.6);
    box-shadow: var(--mn-elev-1), 0 0 1.125rem rgba(62, 207, 142, 0.2);
}
.vp-bar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
}
.vp-fill {
    height: 100%;
    background: linear-gradient(90deg, #6b7280, #f59e0b 40%, #3b82f6 70%, #16a34a 100%);
    border-radius: 0.25rem;
    transition: width var(--mn-dur-slow) var(--mn-ease-bounce);
}
.venta-progress.vp-full .vp-fill {
    background: linear-gradient(90deg, #16a34a, #3ecf8e 50%, #16a34a);
}
.vp-steps {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* PATCH-32.2 - 4 steps fijos */
    gap: var(--mn-rs-1);
}
.vp-step {
    display: flex;
    align-items: center;
    gap: var(--mn-rs-1);
    font-size: var(--mn-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mn-aa-text-faint);
    transition: color var(--mn-dur-base) ease;
}
.vp-step .vp-icon {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    flex-shrink: 0;
    transition: all var(--mn-dur-base) var(--mn-ease-bounce);
}
.vp-step.vp-done { color: #6ef0a0; }
.vp-step.vp-done .vp-icon {
    background: linear-gradient(135deg, #3ecf8e, #16a34a);
    border-color: rgba(62, 207, 142, 0.5);
    color: #fff;
}
.vp-step .vp-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-pct {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    font-size: var(--mn-fs-lg);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--mn-aa-text-base);
    min-width: 3.5rem;
    text-align: right;
    transition: color var(--mn-dur-base) ease;
}
.venta-progress.vp-low  .vp-pct { color: var(--mn-aa-warning); }
.venta-progress.vp-mid  .vp-pct { color: #f59e0b; }
.venta-progress.vp-high .vp-pct { color: var(--mn-aa-info); }
.venta-progress.vp-full .vp-pct { color: var(--mn-aa-success); }

@container zona (max-width: 28rem) {
    .vp-step .vp-lbl { display: none; }
}

/* === Checklist embebido === */
.pp29-cl-embed {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 0.1875rem solid #f59e0b;
    border-radius: var(--mn-r-md);
    padding: var(--mn-rs-2) var(--mn-rs-3);
    margin-top: var(--mn-rs-2);
}
.pp29-cl-header {
    display: flex;
    align-items: center;
    gap: var(--mn-rs-1);
    margin-bottom: var(--mn-rs-1);
    padding-bottom: var(--mn-rs-1);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}
.pp29-cl-icon { font-size: var(--mn-fs-sm); }
.pp29-cl-title {
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mn-aa-warning);
}
.pp29-cl-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mn-rs-1);
}
.pp29-cl-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--mn-rs-2);
    padding: var(--mn-rs-1) var(--mn-rs-2);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.01));
    border-radius: var(--mn-r-sm);
}
.pp29-cl-dot {
    font-size: var(--mn-fs-xs);
    color: var(--mn-aa-danger);
    line-height: 1;
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.pp29-cl-text {
    font-size: var(--mn-fs-xs);
    line-height: 1.45;
    color: #fde68a;
    flex: 1;
}
.pp29-cl-text b { color: var(--mn-aa-warning); font-weight: 800; }
.pp29-cl-action {
    display: inline-block;
    margin-left: var(--mn-rs-1);
    padding: 0.2rem var(--mn-rs-2);
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #dbeafe;
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: var(--mn-r-sm);
    font-size: var(--mn-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--mn-dur-fast) var(--mn-ease-bounce);
}
.pp29-cl-action:hover { transform: translateY(-1px); }


/* ============================================================================
   TG-MASTER PATCH-32.1 - MEDIA QUERIES COMPREHENSIVAS
   Cubre todos los breakpoints estandar + accesibilidad + print + touch
   ============================================================================ */

/* === BREAKPOINT: WIDE DESKTOP (>= 87.5rem / 1400px+) === */
/* Pantallas grandes: aprovechar el ancho extra */
@media (min-width: 87.5rem) {
    .pos-shell.pos-cuadrado.pp29 {
        padding: var(--mn-rs-3) var(--mn-rs-3) calc(var(--mn-rs-5) + 3.75rem);
        gap: var(--mn-rs-3);
    }
    .pp29 .pos-grid-cuadrado {
        grid-template-columns:
            clamp(17rem, 18vw, 22rem)
            minmax(0, 1fr)
            clamp(17rem, 18vw, 22rem);
        gap: var(--mn-rs-3);
    }
    .pp29 .zona-cobro .mps-grid {
        grid-template-columns: repeat(6, 1fr);  /* 6 cards en una fila */
    }
    .pp29 .zona-cobro .mps-card {
        flex-direction: row;
        text-align: left;
        min-height: clamp(3.25rem, 5vh, 4rem);
    }
}

/* === BREAKPOINT: DESKTOP STANDARD (68.75 - 87.5rem / 1100-1400px) === */
/* Default del sistema, no hace falta override extra (ya esta cubierto) */

/* === BREAKPOINT: TABLET LANDSCAPE (56.25 - 68.75rem / 900-1100px) === */
@media (max-width: 68.75rem) and (min-width: 56.25rem) {
    .pp29 .pos-grid-cuadrado {
        grid-template-columns:
            clamp(13rem, 22vw, 16rem)
            minmax(0, 1fr)
            clamp(13rem, 22vw, 16rem);
        gap: var(--mn-rs-2);
    }
    .pp29 .zona-cobro .mps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === BREAKPOINT: TABLET (48 - 68.75rem / 768-1100px) === */
/* Reapilado: 1 columna, scroll vertical, cards medio pago 3x2 */
@media (max-width: 68.75rem) {
    .pos-shell.pos-cuadrado.pp29 {
        height: auto;
        max-height: none;
        min-height: 100dvh;
        overflow: visible;
        padding-bottom: calc(var(--mn-rs-5) + 4rem);
    }
    .pp29 .pos-grid-cuadrado {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .pp29 .centro-col {
        display: contents;
    }
    .pp29 .zona-busqueda { order: 1; min-height: 12rem; max-height: 24rem; }
    .pp29 .zona-carrito  { order: 2; min-height: 10rem; max-height: 20rem; }
    .pp29 .zona-cobro    { order: 3; min-height: 25rem; }
    .pp29 .zona-extras   { order: 4; min-height: 15rem; max-height: 30rem; }

    .pp29 .zona-cobro > .pp29-cobro-footer {
        max-height: 60%;  /* mas espacio en mobile */
    }

    /* Total fijo verde mas chico */
    .pp29 .pos-total-fijo .ptf-monto { font-size: var(--mn-fs-lg); }

    /* Header VENTA en columna en lugar de fila */
    .pp29 .pos-head-min,
    .pp29 .pos-head-slim {
        flex-wrap: wrap;
        gap: var(--mn-rs-1);
    }

    /* Footer global mas chico */
    .pp29-footer-actions {
        height: clamp(3rem, 5vh, 3.5rem);
        grid-template-columns: clamp(7rem, 30vw, 10rem) 1fr;
    }
    .pp29-footer-actions > button {
        font-size: var(--mn-fs-sm);
        letter-spacing: 0.1em;
    }
}

/* === BREAKPOINT: MOBILE LANDSCAPE / TABLET PEQUEÑO (30 - 48rem / 480-768px) === */
@media (max-width: 48rem) {
    .pos-shell.pos-cuadrado.pp29 {
        padding: var(--mn-rs-1) var(--mn-rs-1) calc(var(--mn-rs-5) + 4rem);
        gap: var(--mn-rs-1);
    }

    /* Sticky header VENTA en mobile */
    .pp29 .pos-head-min,
    .pp29 .pos-head-slim {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: var(--mn-rs-1) var(--mn-rs-2);
        min-height: 2rem;
    }

    /* Cards medio pago: 3 cols (PATCH-32.2 - sin min() buggy) */
    .pp29 .zona-cobro .mps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mn-rs-1);
    }

    /* Carrito + cobro + cliente: cada uno con scroll interno */
    .pp29 .zona-busqueda,
    .pp29 .zona-carrito,
    .pp29 .zona-cobro,
    .pp29 .zona-extras {
        border-radius: var(--mn-r-md);
    }

    /* Headers de zona mas compactos */
    .pp29 .zona-busqueda > h3,
    .pp29 .zona-carrito > h3,
    .pp29 .zona-cobro > h3,
    .pp29 .zona-extras > h3 {
        padding: var(--mn-rs-1) var(--mn-rs-2);
        font-size: var(--mn-fs-xs);
        letter-spacing: 0.12em;
    }

    /* Progress bar steps en mobile: ocultar labels, solo iconos */
    .vp-step .vp-lbl { display: none; }
    .vp-pct {
        font-size: var(--mn-fs-md);
        min-width: 2.75rem;
    }

    /* Antipánico mas chico en mobile */
    .ap-btn-flotante {
        width: 3rem !important;
        height: 3rem !important;
        bottom: clamp(4rem, 6vh, 5rem) !important;
    }
}

/* === BREAKPOINT: MOBILE PORTRAIT (< 30rem / 480px) === */
@media (max-width: 30rem) {
    .pos-shell.pos-cuadrado.pp29 {
        padding: 0.25rem 0.25rem calc(var(--mn-rs-5) + 3.5rem);
    }

    /* Header VENTA en una sola linea muy compacta */
    .pp29 .pos-head-min,
    .pp29 .pos-head-slim {
        padding: 0.4rem 0.6rem;
        min-height: 1.75rem;
    }
    .pp29 .pos-head-vid-big {
        font-size: var(--mn-fs-xs);
        letter-spacing: 0.1em;
    }
    .pp29 .pos-head-turno {
        font-size: 0.6rem;
    }

    /* Total fijo: monto mas chico pero legible */
    .pp29 .pos-total-fijo {
        padding: var(--mn-rs-1) var(--mn-rs-2);
    }
    .pp29 .pos-total-fijo .ptf-monto { font-size: var(--mn-fs-md); }
    .pp29 .pos-total-fijo .ptf-cant  { font-size: var(--mn-fs-sm); }

    /* Cards medio pago: 2 fixed columns, mas alto para tap */
    .pp29 .zona-cobro .mps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mn-rs-1);
    }
    .pp29 .zona-cobro .mps-card {
        min-height: 4.5rem;  /* mas tap-friendly */
        padding: var(--mn-rs-2);
    }

    /* Footer global aún mas chico */
    .pp29-footer-actions {
        height: 3.25rem;
        grid-template-columns: 6.5rem 1fr;
    }
    .pp29-footer-actions > button {
        font-size: var(--mn-fs-xs);
        letter-spacing: 0.08em;
    }

    /* Modal pérdida (P31) mas tablero en mobile */
    .p31-modal {
        max-width: 100% !important;
        max-height: 95dvh !important;
        margin: 0;
        border-radius: var(--mn-r-md) var(--mn-r-md) 0 0 !important;
    }
    .p31-tipo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === ORIENTACIÓN LANDSCAPE en mobile (telefono apaisado) === */
@media (max-height: 30rem) and (orientation: landscape) {
    .pos-shell.pos-cuadrado.pp29 {
        height: 100dvh;
        max-height: 100dvh;
        padding: 0.25rem 0.5rem calc(var(--mn-rs-3) + 3rem);
    }
    /* Cuando es apaisado en mobile, volver a 3 columnas si entra */
    .pp29 .pos-grid-cuadrado {
        grid-template-columns:
            clamp(11rem, 22vw, 14rem)
            minmax(0, 1fr)
            clamp(11rem, 22vw, 14rem);
    }
    .pp29 .centro-col {
        display: grid !important;
        grid-template-rows: minmax(5rem, 0.4fr) minmax(0, 1.6fr);
    }
    .pp29 .zona-busqueda,
    .pp29 .zona-carrito,
    .pp29 .zona-cobro,
    .pp29 .zona-extras {
        max-height: 100% !important;
        min-height: 0 !important;
    }
}

/* ============================================================================
   ACCESIBILIDAD: prefer-reduced-motion (usuarios sensibles a animaciones)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .pp29 .pos-total-fijo::after,
    .pp29-footer-confirmar::after,
    .vp-fill,
    .pp29-cl-action,
    .p31-tipo-card,
    .p31-cat-card,
    .ap-btn-flotante {
        animation: none !important;
        transition: none !important;
    }

    /* Mantener feedback visual mínimo (sin animar) */
    .pp29-cl-action:hover { transform: none; }
    .p31-tipo-card:hover { transform: none; }
    .p31-tipo-card.p31-active { transform: none; }
}

/* ============================================================================
   ACCESIBILIDAD: prefer-contrast (alto contraste)
   ============================================================================ */
@media (prefers-contrast: more) {
    /* Forzar contrastes maximos */
    :root {
        --mn-aa-text-muted: var(--mn-aa-text-base);  /* sube de 6.4 a 11.2 */
        --mn-aa-text-faint: var(--mn-aa-text-muted); /* sube de 4.7 a 6.4 */
    }

    .pp29 .zona-busqueda,
    .pp29 .zona-carrito,
    .pp29 .zona-cobro,
    .pp29 .zona-extras {
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.18);  /* mas visible */
    }

    .vp-step .vp-icon {
        border-width: 2px;
    }
}

/* ============================================================================
   TOUCH DEVICES: sin hover effects (que se quedan "stuck" en mobile)
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
    .pp29-cl-action:hover,
    .p31-tipo-card:hover,
    .p31-cat-card:hover,
    .pp29 .zona-cobro .mps-card:hover,
    .pp29-footer-actions > button:hover {
        transform: none !important;
        filter: none !important;
    }

    /* En vez, agrandar tap targets a min 44x44px (Apple HIG / Material) */
    .pp29 .zona-cobro .mps-card {
        min-height: 2.75rem !important;  /* 44px */
    }
    .pp29-cl-action {
        padding: 0.4rem var(--mn-rs-2) !important;
        min-height: 2rem;
    }
    .vp-step .vp-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* ============================================================================
   PRINT (imprimir comprobantes / reportes)
   ============================================================================ */
@media print {
    .pos-shell.pos-cuadrado.pp29 {
        height: auto;
        background: white;
        color: black;
    }
    /* Ocultar elementos no imprimibles */
    .pp29-footer-actions,
    .ap-btn-flotante,
    .pp29 .zona-busqueda,
    .pp29 .zona-extras,
    .venta-progress,
    .pp29 .zona-cobro > .canal-wrap,
    .p31-btn-perdida {
        display: none !important;
    }
    /* Carrito + cobro a 100% ancho */
    .pp29 .pos-grid-cuadrado {
        grid-template-columns: 1fr;
    }
    .pp29 .centro-col { display: block; }
    .pp29 .zona-carrito,
    .pp29 .zona-cobro {
        background: white !important;
        color: black !important;
        border: 1px solid #000;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    /* Total final negro grande */
    .pp29 .zona-cobro .tot-final-h {
        background: white !important;
        border: 2px solid #000 !important;
        color: black !important;
        text-shadow: none !important;
    }
}

/* ============================================================================
   PANTALLAS DE ALTA DENSIDAD (Retina / 2x / 4K)
   ============================================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Bordes mas finos para que no se vean gruesos en retina */
    .pp29 .zona-busqueda,
    .pp29 .zona-carrito,
    .pp29 .zona-cobro,
    .pp29 .zona-extras {
        border-width: 0.5px;
    }
    /* Underlines mas finos */
    .pp29 .zona-busqueda > h3::after,
    .pp29 .zona-carrito > h3::after,
    .pp29 .zona-cobro > h3::after,
    .pp29 .zona-extras > h3::after {
        height: 0.0625rem;  /* 1px en 2x */
    }
}

/* ============================================================================
   ULTRA WIDE (>= 100rem / 1600px+) - monitores ultrawide
   ============================================================================ */
@media (min-width: 100rem) {
    .pos-shell.pos-cuadrado.pp29 {
        max-width: 110rem;  /* No se estira mas alla de esto */
        margin: 0 auto;
    }
    .pp29 .pos-grid-cuadrado {
        grid-template-columns:
            clamp(18rem, 16vw, 24rem)
            minmax(0, 1fr)
            clamp(18rem, 16vw, 24rem);
    }
}

/* ============================================================================
   ALTURAS PEQUEÑAS (laptops 720p / netbooks)
   ============================================================================ */
@media (max-height: 45rem) {
    /* Reducir alturas verticales para que entre todo */
    .pos-shell.pos-cuadrado.pp29 {
        padding-top: var(--mn-rs-1);
    }
    .pp29 .pos-head-min,
    .pp29 .pos-head-slim { min-height: 1.75rem; padding: 0.4rem var(--mn-rs-2); }
    .pp29 .pos-total-fijo { padding: 0.4rem var(--mn-rs-2); }

    /* Carrito mas chico para dar espacio al cobro */
    .pp29 .centro-col {
        grid-template-rows: minmax(5rem, 0.3fr) minmax(0, 1.7fr);
    }

    /* Cards medio pago mas planas */
    .pp29 .zona-cobro .mps-card { min-height: 3.5rem; }
}

/* === FIN PATCH-32.1 MEDIA QUERIES === */

/* ============================================================================
   TG-MASTER PATCH-32.3 - FIX INTEGRAL ESPACIOS + Z-INDEX
   Bugs identificados de las screenshots:
   1. Espacio gigante arriba en CARRITO cuando esta vacio
   2. "Cliente NO se sumo al Plan Manolito" cortado en sidebar
   3. Footer del POS encima del backdrop del modal Perdida
   4. Antipanico flotante encima del modal
   5. Sidebar derecho con scrollbar interno raro
   6. "Marcar como perdida" + "Comentarios" apilados cortados
   ============================================================================ */

/* === FIX 1: CARRITO vacio NO ocupa fila gigante ===
   Cuando carrito esta vacio (no tiene items.cart-cards), su altura colapsa
   al minimo necesario y deja todo el espacio para zona-cobro. */
.pp29 .centro-col {
    grid-template-rows: auto minmax(0, 1fr) !important;  /* PATCH-32.3 - row de carrito = auto (al contenido), cobro toma el resto */
}
.pp29 .centro-col > .zona-carrito {
    /* PATCH-32.6 - vacio: chico (header + placeholder min) */
    min-height: 0;
    max-height: 8rem;       /* compacto cuando vacio */
}
.pp29 .centro-col > .zona-carrito:has(.cart-cards) {
    /* Cuando tiene items, expande para mostrar las cards */
    min-height: 8rem;
    max-height: 40vh;
}

/* === FIX 2: Z-INDEX MODAL/BACKDROP coordinados (PATCH-32.5 fix completo) ===
   IMPORTANTE: el .modal global tiene z-index 101 en site.css.
   Si subimos solo .modal-back a 240, los modales quedan TAPADOS por su backdrop.
   La regla es: modal SIEMPRE > backdrop > footer > antipanico-cuando-modal.
   Ordenamiento final:
     .modal           z-index: 250  (arriba de TODO incluido footer 100)
     .modal-back      z-index: 240  (arriba del footer 100, debajo del modal)
     .pp29-footer     z-index: 90   (mas bajo que cualquier modal-back)
     antipanico       z-index: 50   (cuando body:has(.modal-back), o 9999 normal)
*/

/* Modal global: subir TODOS los modales */
.modal {
    z-index: 250 !important;
}

/* Modal P31 especifico: mismo z-index pero por consistencia explicita */
.p31-modal {
    z-index: 250 !important;
}

/* Backdrop: arriba del footer pero debajo de cualquier modal */
.modal-back {
    z-index: 240 !important;
    /* PATCH-32.6 - backdrop mas opaco para tapar bien el POS detras */
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Footer global no debe estar encima del backdrop */
.pp29-footer-actions {
    z-index: 90 !important;      /* mas bajo que cualquier modal-back (240) */
}

/* === FIX 3: ANTIPANICO debajo del modal cuando hay backdrop activo === */
/* CSS truco: cuando body tiene un .modal-back visible, bajar el antipanico */
body:has(.modal-back) .ap-btn-flotante {
    z-index: 50 !important;      /* mucho mas bajo que el modal (250) */
    opacity: 0.3;                /* ademas atenuar visualmente */
    pointer-events: none;        /* y deshabilitar interaccion */
}

/* === FIX 4: PLAN MANOLITO card en sidebar - texto wrappeado bien === */
.pp29 .zona-extras .pm-info-no,
.pp29 .pm-info-no {
    padding: var(--mn-rs-2) !important;
    line-height: 1.4 !important;
    font-size: 0.75rem !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.pp29 .zona-extras .pm-info-no > div,
.pp29 .pm-info-no > div {
    width: 100%;
    overflow: visible !important;
}
/* Texto interno con max-width para que no se corte */
.pp29 .zona-extras .pm-status-no,
.pp29 .pm-status-no {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* === FIX 5: SIDEBAR sin scrollbar feo ===
   El zona-extras es flex-column y SU CONTENIDO scrollea, no la zona en si.
   Si hay scrollbar visible es porque el contenido supera la altura.
   Solucion: padding correcto + scroll-track invisible */
.pp29 .zona-extras > *:not(h3) {
    padding: var(--mn-rs-2) !important;
    scrollbar-width: thin;
}
.pp29 .zona-extras > *:not(h3)::-webkit-scrollbar {
    width: 4px;
}
.pp29 .zona-extras > *:not(h3)::-webkit-scrollbar-track {
    background: transparent;
    margin: var(--mn-rs-1) 0;
}
.pp29 .zona-extras > *:not(h3)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);  /* casi invisible */
    border-radius: 4px;
}
.pp29 .zona-extras > *:not(h3):hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* === FIX 6: "Marcar como perdida" + "Comentarios" en una fila bien === */
.pp29 .zona-cobro > .sub-block .extras-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: var(--mn-rs-2);
    align-items: center;
}
.pp29 .zona-cobro > .sub-block .extras-row .p31-btn-perdida {
    flex-shrink: 0;
}
.pp29 .zona-cobro > .sub-block .extras-row .inp-flex {
    width: 100%;
    min-width: 0;
}

/* === FIX 7: Banner SUGERENCIAS / COMBOS - texto producto truncado bien === */
.pp29 .zona-extras .reco-card,
.pp29 .zona-extras .combo-sug {
    overflow: hidden;
}
.pp29 .zona-extras .reco-card > *,
.pp29 .zona-extras .combo-sug > * {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === FIX 8: Header VENTA #N + sidebar headers separacion visual === */
.pp29 .pos-head-min,
.pp29 .pos-head-slim {
    margin-top: var(--mn-rs-1);   /* separacion del header global */
}

/* === FIX 9: cobro-footer-area cuando carrito vacio queda chico === */
/* Cuando no hay items, la columna cobro tiene mas espacio para mostrar todo */
.pp29 .centro-col:not(:has(.cart-cards)) > .zona-cobro {
    /* Mas alto cuando no hay items: aprovecha el espacio del carrito vacio */
}

/* === FIX 10: Garantizar que todos los items del cobro encajen sin scroll vertical innecesario === */
.pp29 .zona-cobro > .pp29-cobro-scroll {
    min-height: 0 !important;     /* permite shrink natural */
}

/* === FIN PATCH-32.3 === */

/* ============================================================================
   TG-MASTER PATCH-32.7 - PULIDO FINAL + PROGRESS BAR 3 STEPS
   1. Progress bar de 3 steps fijos (no 4)
   2. PERDIDA aparece como step warn solo si esta marcada incompleta
   3. Carrito vacio compactado (no ocupa altura fantasma)
   4. Plan Manolito card en sidebar con padding correcto
   5. Sidebar sin scrollbar interno feo
   6. Modal pérdida con mejor visualizacion (header mas claro, cards mas legibles)
   ============================================================================ */

/* === FIX 1: Progress bar 3 steps en lugar de 4 === */
.vp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Cuando aparece el step warn de PERDIDA, pasa a 4 cols dinamico */
.venta-progress.vp-perdida-warn .vp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
}

/* Step de PERDIDA en modo warn (excepcional) */
.vp-step.vp-step-warn {
    color: var(--mn-aa-warning);
    animation: vp-step-pulse 2s ease-in-out infinite;
}
.vp-step.vp-step-warn .vp-icon {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fff;
    box-shadow: 0 0 0.625rem rgba(245, 158, 11, 0.4);
}
@@keyframes vp-step-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* === FIX 2: CARRITO vacio - placeholder pequeño centrado === */
/* Cuando carrito está vacío, ocupa solo lo justo */
.pp29 .centro-col > .zona-carrito:not(:has(.cart-cards)) {
    max-height: 5rem !important;
    min-height: 0 !important;
}
.pp29 .centro-col > .zona-carrito:not(:has(.cart-cards)) > h3 {
    flex: 0 0 auto;
}
/* El placeholder dentro: solo el icono chico y el texto */
.pp29 .zona-carrito .pos-empty {
    display: flex !important;
    flex-direction: row !important;       /* horizontal: icono + texto al lado */
    align-items: center !important;
    justify-content: center !important;
    gap: var(--mn-rs-2);
    height: auto !important;
    min-height: 2rem !important;
    padding: var(--mn-rs-1) var(--mn-rs-3) !important;
    color: var(--mn-aa-text-faint);
    font-size: var(--mn-fs-xs);
    font-weight: 500;
    text-align: center;
    opacity: 0.55;
}
.pp29 .zona-carrito .pos-empty::before {
    content: "🛒";
    font-size: var(--mn-fs-md);  /* mas chico */
    opacity: 0.6;
    margin: 0;
    display: inline;
}

/* === FIX 3: Plan Manolito card en sidebar === */
.pp29 .zona-extras .pm-info-no,
.pp29 .pm-info-no {
    padding: var(--mn-rs-2) !important;
    border-radius: var(--mn-r-md) !important;
    line-height: 1.5 !important;
    font-size: var(--mn-fs-xs) !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;  /* permite cortar palabras largas */
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
}

.pp29 .zona-extras .pm-info-no > *,
.pp29 .pm-info-no > * {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* === FIX 4: Sidebar derecho sin scrollbar interno feo === */
/* La idea: el sidebar derecho NO debe tener scroll interno por section,
   sino que TODO el sidebar scrollea como uno solo si hay overflow */
.pp29 .zona-extras {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.pp29 .zona-extras::-webkit-scrollbar { width: 4px; }
.pp29 .zona-extras::-webkit-scrollbar-track { background: transparent; }
.pp29 .zona-extras::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}
.pp29 .zona-extras:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* Anular el scrollbar interno de cada section dentro del sidebar */
.pp29 .zona-extras > *:not(h3) {
    overflow: visible !important;     /* el padre scrollea, no estos */
    flex: 0 0 auto;
}

/* === FIX 5: Modal pérdida - mejor visualización === */
.p31-mh {
    padding: var(--mn-rs-3) var(--mn-rs-4) !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04)) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.30) !important;
}
.p31-mh-text h3 {
    font-size: var(--mn-fs-lg) !important;   /* mas grande */
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    color: #fef3c7 !important;
    text-shadow: 0 0 0.875rem rgba(245, 158, 11, 0.5) !important;
}
.p31-mh-sub {
    font-size: var(--mn-fs-xs) !important;
    color: #cbd5e1 !important;     /* mejor contraste */
    margin-top: 0.25rem;
}
.p31-mh-ico {
    font-size: var(--mn-fs-xxl) !important;  /* mas grande */
    filter: drop-shadow(0 0.25rem 0.625rem rgba(245, 158, 11, 0.5));
}

/* Cards de tipo de pérdida - mas legibles */
.p31-tipo-card {
    padding: var(--mn-rs-3) var(--mn-rs-2) !important;
    min-height: 6rem !important;   /* todas iguales */
    gap: var(--mn-rs-1) !important;
    background: linear-gradient(160deg, rgba(35, 40, 52, 0.85), rgba(20, 23, 31, 0.95)) !important;
}
.p31-tipo-card .p31-tc-ico {
    font-size: var(--mn-fs-xl) !important;   /* iconos mas claros */
    line-height: 1 !important;
}
.p31-tipo-card .p31-tc-name {
    font-size: var(--mn-fs-xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--mn-aa-text-base) !important;  /* WCAG AA */
}
.p31-tipo-card .p31-tc-hint {
    font-size: 0.625rem !important;
    color: var(--mn-aa-text-muted) !important;  /* WCAG AA en vez de #889 */
    line-height: 1.3 !important;
    text-align: center;
    margin-top: 0.15rem;
}
.p31-tipo-card.p31-active .p31-tc-name { color: #fef3c7 !important; }
.p31-tipo-card.p31-active .p31-tc-hint { color: rgba(254, 243, 199, 0.9) !important; }
.p31-tipo-card.p31-tc-warn.p31-active .p31-tc-name { color: #fecaca !important; }
.p31-tipo-card.p31-tc-warn.p31-active .p31-tc-hint { color: rgba(254, 202, 202, 0.9) !important; }

/* Sub-cards de categoria CONSUMO */
.p31-cat-card {
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    min-height: 2.75rem !important;
    font-size: var(--mn-fs-xs) !important;
    font-weight: 700 !important;
    color: var(--mn-aa-text-base) !important;
    line-height: 1.3 !important;
}
.p31-cat-card.p31-active {
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.30), rgba(30, 64, 175, 0.40)) !important;
    color: #dbeafe !important;
}

/* Hint box context-aware */
.p31-hint-box {
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    font-size: var(--mn-fs-xs) !important;
    line-height: 1.5 !important;
    color: #dbeafe !important;
}
.p31-hint-box b { color: #fff !important; }

/* Section titles mas claros */
.p31-section-title {
    font-size: var(--mn-fs-xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    color: var(--mn-aa-text-base) !important;  /* WCAG AA strong */
    margin-bottom: var(--mn-rs-2) !important;
}
.p31-section { padding: var(--mn-rs-3) var(--mn-rs-4) !important; }

/* Motivo textarea */
.p31-motivo {
    font-size: var(--mn-fs-sm) !important;
    line-height: 1.5 !important;
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    color: var(--mn-aa-text-base) !important;
}
.p31-motivo::placeholder {
    color: var(--mn-aa-text-faint) !important;
    font-style: italic;
}

/* Footer botones del modal */
.p31-foot-actions {
    padding: var(--mn-rs-3) var(--mn-rs-4) !important;
    gap: var(--mn-rs-2) !important;
}
.p31-btn-cancel,
.p31-btn-confirm {
    padding: var(--mn-rs-3) var(--mn-rs-4) !important;
    font-size: var(--mn-fs-sm) !important;
    border-radius: var(--mn-r-md) !important;
}

/* === FIX 6: Tipografia del cartel "Para confirmar la venta, falta..." === */
.pp29-cl-title {
    font-size: var(--mn-fs-xs) !important;
    color: var(--mn-aa-warning) !important;
}
.pp29-cl-text {
    font-size: var(--mn-fs-xs) !important;
    color: #fde68a !important;
    line-height: 1.5 !important;
}

/* === FIN PATCH-32.7 === */

/* ============================================================================
   TG-MASTER PATCH-32.8 - REDISEÑO POS:
   1. Carrito MAS GRANDE (protagonismo)
   2. Cards medio pago compactas (1 fila chica)
   3. Subtotal + Total FIJOS (footer pegado, nunca se cortan)
   4. PERDIDA como mini-link (no ocupa espacio)
   5. Bandita compacta de info por medio de pago
   6. 3 popovers: Calculadora vuelto / QR cobro / Verif Transfer
   7. Aprovechamiento maximo del viewport (100dvh)
   ============================================================================ */

/* === FIX 1: CARRITO con MAS PROTAGONISMO === */
/* Cambiar la proporcion del centro-col: carrito mas grande */
.pp29 .centro-col {
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr) !important;
}
/* Cuando esta vacio, sigue siendo chico (max-height ya definido en 32.6) */
.pp29 .centro-col > .zona-carrito {
    /* Vacio: 5rem max (placeholder compacto). Lleno: expande mucho */
    max-height: 5rem !important;
    min-height: 0 !important;
}
.pp29 .centro-col > .zona-carrito:has(.cart-cards) {
    max-height: 100% !important;     /* lleno: TODO el espacio que le da el grid */
    min-height: 14rem !important;    /* asegura visibilidad de varios items */
}
/* Cards del carrito mas grandes/legibles */
.pp29 .zona-carrito .cart-card {
    min-height: 3.5rem !important;
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    font-size: var(--mn-fs-sm) !important;
}
.pp29 .zona-carrito .cart-card .cc-name {
    font-size: var(--mn-fs-base) !important;
    font-weight: 700 !important;
}
.pp29 .zona-carrito .cart-card .cc-price {
    font-size: var(--mn-fs-base) !important;
    font-weight: 800 !important;
}

/* === FIX 2: CARDS MEDIO PAGO COMPACTAS (1 fila chica horizontal) === */
.pp29 .zona-cobro .mps-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    margin: 0.5rem 0 !important;
}
.pp29 .zona-cobro .mps-card {
    min-height: 2.75rem !important;     /* compactas pero tap-friendly */
    max-height: 3.25rem !important;
    padding: 0.4rem 0.3rem !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.3rem !important;
    width: 100% !important;
    min-width: 0 !important;
}
.pp29 .zona-cobro .mps-card .mps-emoji {
    font-size: var(--mn-fs-md) !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
.pp29 .zona-cobro .mps-card .mps-label {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}
.pp29 .zona-cobro .mps-card .mps-pct {
    font-size: 0.55rem !important;
    padding: 0.05rem 0.25rem !important;
    margin-top: 0;
    line-height: 1 !important;
}

/* === FIX 3: SUBTOTAL + TOTAL FINAL FIJOS al fondo del cobro (NUNCA se cortan) === */
.pp29 .zona-cobro {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;     /* el scroll esta adentro */
}
.pp29 .zona-cobro > h3 { order: 1; flex: 0 0 auto; }
.pp29 .zona-cobro > .canal-wrap { order: 2; flex: 0 0 auto; }
.pp29 .zona-cobro > .pp29-cobro-scroll {
    order: 3;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--mn-rs-2) var(--mn-rs-1);
    margin: 0;
    min-height: 0 !important;        /* libre para shrinkar */
}
.pp29 .zona-cobro > .sub-block {
    order: 4;
    flex: 0 0 auto !important;       /* PERDIDA mini link no se aplasta */
    padding: 0 var(--mn-rs-2);
    background: rgba(20, 23, 31, 0.5);
}
/* Footer del cobro (subtotal + total final): SIEMPRE FIJO al fondo */
.pp29 .zona-cobro > .pp29-cobro-footer {
    order: 99;
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    margin: 0;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    background: linear-gradient(180deg, rgba(15, 18, 24, 0.95) 0%, rgba(15, 18, 24, 1) 100%);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border-top: 2px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 -0.375rem 1.125rem rgba(0, 0, 0, 0.5);
    z-index: 5;
    max-height: none !important;
    overflow: visible !important;
}

/* SUBTOTAL items destacado */
.pp29 .zona-cobro > .pp29-cobro-footer > div:has(b),
.pp29 .zona-cobro .subtotal-row {
    font-size: var(--mn-fs-sm);
    color: var(--mn-aa-text-base);
    margin-bottom: var(--mn-rs-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TOTAL FINAL: el protagonista naranja */
.pp29 .zona-cobro .tot-final-h {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.30) 0%, rgba(245, 166, 35, 0.15) 100%) !important;
    border: 2px solid rgba(245, 166, 35, 0.50) !important;
    border-radius: var(--mn-r-md) !important;
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    margin: 0 !important;
    font-weight: 900 !important;
    font-size: var(--mn-fs-base) !important;
    color: #fde68a !important;
    text-shadow: 0 0 0.875rem rgba(245, 166, 35, 0.5) !important;
    box-shadow:
        0 0.25rem 1.25rem rgba(245, 166, 35, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    letter-spacing: 0.08em !important;
}
.pp29 .zona-cobro .tot-final-h > span:last-child {
    font-size: var(--mn-fs-xl) !important;
    color: #fffbeb !important;
    text-shadow:
        0 0 0.875rem rgba(245, 166, 35, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* === FIX 4: PERDIDA mini-link (no ocupa espacio) === */
.p32-extras-block {
    padding: var(--mn-rs-1) var(--mn-rs-2) !important;
    margin: 0 !important;
    background: transparent !important;
}
.p32-extras-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--mn-rs-2) !important;
    align-items: center !important;
}
.p32-inp-coment {
    width: 100% !important;
    padding: 0.5rem var(--mn-rs-2) !important;
    font-size: var(--mn-fs-xs) !important;
    background: rgba(15, 18, 24, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--mn-r-sm) !important;
    color: var(--mn-aa-text-base) !important;
}
.p32-inp-coment::placeholder {
    color: var(--mn-aa-text-faint) !important;
    font-size: var(--mn-fs-xs) !important;
}

/* MINI-LINK "+ Agregar pérdida" - sutil, casi invisible */
.p32-link-perdida {
    background: transparent !important;
    color: var(--mn-aa-text-faint) !important;
    border: 1px dashed rgba(245, 158, 11, 0.25) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: var(--mn-fs-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: var(--mn-r-sm) !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    white-space: nowrap !important;
}
.p32-link-perdida:hover {
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

/* CHIP compacto cuando perdida MARCADA */
.p32-perdida-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0.6rem !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: var(--mn-r-sm) !important;
    font-size: var(--mn-fs-xs) !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    color: #fde68a !important;
    white-space: nowrap !important;
}
.p32-chip-ico { font-size: var(--mn-fs-sm); line-height: 1; }
.p32-chip-text { letter-spacing: 0.05em; }
.p32-chip-warn { color: #fbbf24; }
.p32-chip-ok { color: #6ef0a0; }
.p32-chip-x {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    border: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}
.p32-chip-x:hover { background: rgba(239, 68, 68, 0.3); color: white; }

/* === FIX 5: BANDITA COMPACTA POR MEDIO DE PAGO === */
.p32-mp-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--mn-rs-2) !important;
    padding: 0.5rem var(--mn-rs-2) !important;
    margin: var(--mn-rs-1) 0 !important;
    background: linear-gradient(135deg, rgba(28, 32, 44, 0.6), rgba(20, 23, 31, 0.85)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--mn-r-sm) !important;
    font-size: var(--mn-fs-xs) !important;
    color: var(--mn-aa-text-base) !important;
}
.p32-mp-bar-ico {
    font-size: var(--mn-fs-md);
    flex-shrink: 0;
    line-height: 1;
}
.p32-mp-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.p32-mp-bar-text b { color: var(--mn-aa-text-strong); }
.p32-mp-bar-btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: var(--mn-r-sm);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(37, 99, 235, 0.35));
    color: #dbeafe;
    transition: all 200ms ease;
}
.p32-mp-bar-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* Variantes por medio */
.p32-mp-bar.p32-mp-efe {
    border-left: 3px solid rgba(34, 197, 94, 0.5);
}
.p32-mp-bar.p32-mp-mp {
    border-left: 3px solid rgba(29, 185, 84, 0.5);
}
.p32-mp-bar.p32-mp-trans {
    border-left: 3px solid rgba(245, 166, 35, 0.6);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.10), rgba(245, 166, 35, 0.04)) !important;
}
.p32-mp-bar-btn-warn {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: white !important;
}
.p32-mp-bar-btn-mp {
    background: linear-gradient(135deg, #1DB954, #169c47) !important;
    color: white !important;
}

/* === FIX 6: POPOVERS de medio de pago === */
.p32-pop {
    background: linear-gradient(160deg, rgba(28, 32, 44, 0.98), rgba(18, 21, 28, 0.99)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--mn-r-lg) !important;
    padding: 0 !important;
    overflow-y: auto;
    max-height: 92dvh;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.65);
}
.p32-pop-head {
    display: flex;
    align-items: center;
    gap: var(--mn-rs-2);
    padding: var(--mn-rs-3) var(--mn-rs-4);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.p32-pop-ico {
    font-size: var(--mn-fs-xl);
    filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.4));
}
.p32-pop-head h3 {
    margin: 0 !important;
    flex: 1;
    font-size: var(--mn-fs-md) !important;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--mn-aa-text-strong);
}
.p32-pop-x {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
}
.p32-pop-x:hover { background: rgba(239, 68, 68, 0.25); color: white; }
.p32-pop-body {
    padding: var(--mn-rs-3) var(--mn-rs-4);
    display: flex;
    flex-direction: column;
    gap: var(--mn-rs-2);
}
.p32-pop-text {
    margin: 0;
    font-size: var(--mn-fs-sm);
    line-height: 1.5;
    color: var(--mn-aa-text-base);
}
.p32-pop-text b { color: var(--mn-aa-text-strong); }
.p32-pop-tip {
    margin: 0;
    font-size: var(--mn-fs-xs);
    color: var(--mn-aa-text-muted);
    font-style: italic;
}
.p32-pop-decile {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.10), rgba(96, 165, 250, 0.04));
    border-left: 3px solid #60a5fa;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    border-radius: var(--mn-r-sm);
    font-size: var(--mn-fs-xs);
    color: #dbeafe;
    line-height: 1.4;
}
.p32-pop-foot {
    padding: var(--mn-rs-2) var(--mn-rs-4);
    background: rgba(15, 18, 24, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: var(--mn-rs-2);
    justify-content: flex-end;
}
.p32-pop-confirm {
    background: linear-gradient(180deg, #16a34a, #14532d) !important;
    color: white !important;
    padding: var(--mn-rs-2) var(--mn-rs-4) !important;
    font-weight: 800 !important;
    border-radius: var(--mn-r-md) !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.875rem rgba(22, 163, 74, 0.35);
}
.p32-pop-skip {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--mn-aa-text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    border-radius: var(--mn-r-md) !important;
    font-weight: 700 !important;
}
.p32-pop-cta-mp {
    background: linear-gradient(135deg, #1DB954, #169c47) !important;
    color: white !important;
    padding: var(--mn-rs-3) var(--mn-rs-4) !important;
    font-size: var(--mn-fs-base) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    border-radius: var(--mn-r-md) !important;
    text-decoration: none !important;
    display: block;
    box-shadow: 0 0.375rem 1.25rem rgba(29, 185, 84, 0.3);
}
.p32-pop-cta-trans {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: white !important;
    padding: var(--mn-rs-3) var(--mn-rs-4) !important;
    font-size: var(--mn-fs-base) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    border-radius: var(--mn-r-md) !important;
    border: none;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 0.375rem 1.25rem rgba(245, 158, 11, 0.3);
}

/* Calculadora de vuelto (popover) */
.p32-vc-paga-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.p32-vc-paga-row label {
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mn-aa-text-muted);
}
.p32-vc-input {
    font-size: var(--mn-fs-xl) !important;
    font-weight: 800 !important;
    text-align: right !important;
    padding: var(--mn-rs-2) var(--mn-rs-3) !important;
    background: rgba(15, 18, 24, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--mn-r-md) !important;
    color: var(--mn-aa-text-strong) !important;
}
.p32-vc-input:focus {
    border-color: rgba(34, 197, 94, 0.5) !important;
    outline: none !important;
}
.p32-vc-billetes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.p32-vc-billete {
    background: linear-gradient(160deg, rgba(35, 40, 52, 0.8), rgba(22, 26, 36, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c4c8d0;
    padding: var(--mn-rs-2);
    font-size: var(--mn-fs-base);
    font-weight: 800;
    border-radius: var(--mn-r-md);
    cursor: pointer;
    transition: all 150ms ease;
}
.p32-vc-billete:hover {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.20), rgba(22, 101, 52, 0.30));
    border-color: rgba(34, 197, 94, 0.5);
    color: white;
    transform: translateY(-1px);
}
.p32-vc-billete.p32-vc-clear {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.15), rgba(127, 29, 29, 0.25));
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.p32-vc-vuelto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mn-rs-2) var(--mn-rs-3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(22, 101, 52, 0.30));
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--mn-r-md);
}
.p32-vc-lbl {
    font-size: var(--mn-fs-xs);
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--mn-aa-text-muted);
}
.p32-vc-monto {
    font-size: var(--mn-fs-xl);
    font-weight: 900;
    color: #6ef0a0;
    text-shadow: 0 0 0.625rem rgba(110, 240, 160, 0.4);
}
.p32-vc-vuelto.p32-vc-err {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.20), rgba(127, 29, 29, 0.30));
    border-color: rgba(239, 68, 68, 0.5);
}
.p32-vc-vuelto.p32-vc-err .p32-vc-monto { color: #fca5a5; }
.p32-vc-desglose {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: var(--mn-rs-2);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--mn-r-sm);
}
.p32-vc-desg-lbl {
    font-size: var(--mn-fs-xs);
    color: var(--mn-aa-text-muted);
    font-weight: 700;
}
.p32-vc-desg-item {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--mn-r-sm);
    font-size: var(--mn-fs-xs);
    color: #6ef0a0;
    font-weight: 700;
}
.p32-vc-falta {
    text-align: center;
    color: #fca5a5;
    font-weight: 800;
    padding: var(--mn-rs-1);
}

/* === FIX 7: aprovechamiento maximo del viewport === */
.pos-shell.pos-cuadrado.pp29 {
    max-width: none !important;     /* sin ancho maximo - usa todo el viewport */
    width: 100% !important;
}

/* Variantes de popover por medio de pago */
.p32-pop.p32-pop-efe { border-left: 3px solid rgba(34, 197, 94, 0.6) !important; }
.p32-pop.p32-pop-mp  { border-left: 3px solid rgba(29, 185, 84, 0.6) !important; }
.p32-pop.p32-pop-trans { border-left: 3px solid rgba(245, 166, 35, 0.6) !important; }

/* === FIN PATCH-32.8 === */

/* ============================================================================
   TG-MASTER PATCH-32.11 - FIX DEFINITIVO ContinuarCierre con maxima specificity
   El bug persistia en /cierre/continuar porque el style inline se pisaba con
   reglas globales. Aca lo aplicamos desde foundation-v2.css con !important
   y selector body > para garantizar prioridad maxima.
   ============================================================================ */

/* FORZAR el shell de continuar cierre con tema dark consistente */
body .continuar-cierre-shell,
.app-shell .continuar-cierre-shell,
.app-main .continuar-cierre-shell,
.continuar-cierre-shell {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(245, 166, 35, 0.06), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(62, 207, 142, 0.05), transparent 40%),
        var(--mn-bg-0, #0a0c10) !important;
}

body .continuar-cierre-shell .cc-card,
.continuar-cierre-shell .cc-card {
    background: linear-gradient(160deg, rgba(28, 32, 44, 0.96), rgba(20, 23, 31, 0.99)) !important;
    border: 1px solid rgba(245, 166, 35, 0.25) !important;
    border-radius: 1rem !important;
    padding: 2rem 1.75rem !important;
    max-width: 26rem !important;
    width: 100% !important;
    box-shadow:
        0 0.75rem 2.5rem rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
}

body .continuar-cierre-shell .cc-icon,
.continuar-cierre-shell .cc-icon {
    font-size: 3rem !important;
    margin-bottom: 0.75rem !important;
    filter: drop-shadow(0 0.25rem 0.75rem rgba(245, 166, 35, 0.45)) !important;
    opacity: 1 !important;
}

body .continuar-cierre-shell .cc-card h2,
.continuar-cierre-shell .cc-card h2 {
    margin: 0 0 0.625rem 0 !important;
    color: #fde68a !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 0 0.875rem rgba(245, 158, 11, 0.4) !important;
    text-transform: none !important;
}

body .continuar-cierre-shell .cc-help,
.continuar-cierre-shell .cc-help {
    color: #c4c8d0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    margin: 0 0 1.375rem 0 !important;
}

body .continuar-cierre-shell .cc-form,
.continuar-cierre-shell .cc-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
}

body .continuar-cierre-shell .cc-pin-input,
.continuar-cierre-shell .cc-pin-input {
    font-size: 2rem !important;
    letter-spacing: 0.875rem !important;
    text-align: center !important;
    padding: 1rem 0.75rem !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.75rem !important;
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    background: rgba(15, 18, 24, 0.85) !important;
    color: #fde68a !important;
    text-shadow: 0 0 0.5rem rgba(245, 158, 11, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

body .continuar-cierre-shell .cc-pin-input::placeholder,
.continuar-cierre-shell .cc-pin-input::placeholder {
    color: rgba(255, 255, 255, 0.18) !important;
    text-shadow: none !important;
}

body .continuar-cierre-shell .cc-pin-input:focus,
.continuar-cierre-shell .cc-pin-input:focus {
    outline: none !important;
    border-color: rgba(245, 166, 35, 0.55) !important;
    box-shadow:
        0 0 0 3px rgba(245, 166, 35, 0.12),
        inset 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

body .continuar-cierre-shell .cc-error,
.continuar-cierre-shell .cc-error {
    color: #fca5a5 !important;
    font-size: 0.8125rem !important;
    padding: 0.625rem !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
    border-radius: 0.5rem !important;
}

body .continuar-cierre-shell .cc-btn-go,
.continuar-cierre-shell .cc-btn-go {
    font-size: 0.9375rem !important;
    padding: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    background: linear-gradient(180deg, #f5a623 0%, #c47a17 100%) !important;
    color: #1a1305 !important;
    border: none !important;
    border-radius: 0.625rem !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 0.25rem 0.875rem rgba(245, 166, 35, 0.30) !important;
    transition: filter 200ms ease, transform 200ms ease !important;
}

body .continuar-cierre-shell .cc-btn-go:hover:not(:disabled),
.continuar-cierre-shell .cc-btn-go:hover:not(:disabled) {
    filter: brightness(1.10) !important;
    transform: translateY(-1px) !important;
}

body .continuar-cierre-shell .cc-btn-go:disabled,
.continuar-cierre-shell .cc-btn-go:disabled {
    cursor: not-allowed !important;
    filter: grayscale(0.6) brightness(0.55) !important;
    background: rgba(120, 120, 130, 0.3) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
}

body .continuar-cierre-shell .cc-back,
.continuar-cierre-shell .cc-back {
    color: #8b91a0 !important;
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    margin-top: 0.5rem !important;
    transition: color 200ms ease !important;
}

body .continuar-cierre-shell .cc-back:hover,
.continuar-cierre-shell .cc-back:hover {
    color: #f5a623 !important;
}

/* === FIN PATCH-32.11 === */
/* === FIN POS REFACTOR === */