@charset "UTF-8";
/* ============================================================================
   VISOR-MODAL.CSS - Layout estructural compartido del modal Resumen de Compra
   ============================================================================
   Este archivo contiene la layout estructural del modal del carrito que es
   IDENTICA entre temas (light, neon y futuros). Solo widths, padding,
   flexbox, sizing - NUNCA colores, gradients ni shadows.

   Cargar despues de visor-base.css (variables) y antes del archivo del tema:
     bundle = visor-base.css + visor-modal.css + miTheme.css

   Reglas que aporta este archivo:
     - Layout fixed de la tabla del carrito (#my-cart-table)
     - Widths y padding de las 5 columnas (imagen / nombre+desc / qty / total / trash)
     - Wrappers flex .my-cart-cell-content y .my-cart-qty-controls
     - Sizing del input qty (responsive a --cart-modal-pm-*)
     - Reglas estructurales de .my-cart-product-name y .my-cart-product-desc
       (line-clamp 2, ellipsis, etc.) - colores se ponen en el tema

   IMPORTANTE: la cascada se complementa con reglas en el cshtml o en el
   archivo theme para los colores/backgrounds (.my-cart-product-desc { color },
   #my-cart-modal input[type="text"] { background, color }, etc.).
   ========================================================================= */

/* === TABLA DEL MODAL: layout fixed para que widths fijos y % se respeten === */
/* Sin esto el browser usa auto-sizing y los % son ignorados cuando el
   contenido pide mas espacio. Esto provocaba que la celda nombre+desc se
   comiera el espacio del qty haciendo que - 1 + queden apilados. */
#my-cart-modal .table {
    table-layout: fixed;
    width: 100%;
}

/* === COLUMNAS DE LA TABLA DEL CARRITO ====================================
   5 columnas con widths fijos calculados a partir de variables responsivas.
   La distribucion es: imagen (calc px) | nombre+desc (35%) | qty (calc px) |
   total (22%) | trash (calc px). Los porcentajes y calc() se ajustan
   automaticamente al tamano del modal en cada breakpoint.
   ======================================================================= */

/* Columna 1: imagen del producto */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(1) {
    width: calc(var(--cart-modal-img-size) + 24px);
}

/* Columna 2: nombre + descripcion. 35% es el balance: en pantallas grandes
   (modal 880px) da ~308px que se aprovecha bien para nombres largos; en
   pantallas estrechas (modal 540px) da ~189px que sigue siendo suficiente
   porque el padding del modal-body se reduce al minimo en breakpoints
   chicos. El truncado del nombre (ellipsis 1 linea) y line-clamp 2 de la
   descripcion se aplican mas abajo en este archivo. */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(2) {
    vertical-align: middle !important;
    text-align: start !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 35%;
}

/* Columna 3: qty (- 1 +). El wrapper interno .my-cart-qty-controls usa
   display: flex para centrar perfectamente los 3 elementos horizontal y
   verticalmente en la celda, sin depender de paddings ni text-align (que
   pueden dar resultados imperfectos cuando hay inline-blocks con margins
   distintos). Width = 3*pm-w + 32px (margins entre botones + padding). */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(3) {
    width: calc(var(--cart-modal-pm-w) * 3 + 32px);
    padding: 0 !important;
    white-space: nowrap;
}

/* Columna 4: total ($ X.XXX). 22% es suficiente para precios grandes. */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(4) {
    width: 22%;
    white-space: nowrap;
    text-align: center;
}

/* Columna 5: trash. Width igualado al font-size del icono y padding 0. */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(5) {
    width: var(--cart-modal-trash-fs);
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}

/* === WRAPPERS FLEX PARA CENTRADO PERFECTO =================================
   Cada celda envuelve su contenido en un div con .my-cart-cell-content (o
   .my-cart-qty-controls para la columna qty). Esto centra perfectamente el
   contenido horizontal y verticalmente sin depender de text-align /
   vertical-align (que dan resultados imperfectos con inline-blocks que
   tienen margins distintos).
   ======================================================================= */

/* Wrapper para los 3 elementos del qty (- input +). Centrado perfecto.
   Gap de 8px entre los 3 elementos para que el input de cantidad no
   quede pegado a los botones +/-. */
#my-cart-modal #my-cart-table .my-cart-qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

/* Wrapper generico para imagen, total, trash. Mismo patron que qty. */
#my-cart-modal #my-cart-table .my-cart-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Variante column: nombre+desc se apilan verticalmente. align-items: stretch
   hace que cada span ocupe el ANCHO COMPLETO del wrapper (= ancho de la
   celda), de modo que mas caracteres caben antes de que el ellipsis del
   nombre o el line-clamp 2 de la descripcion se activen. text-align: start
   mantiene el texto alineado a la izquierda. */
#my-cart-modal #my-cart-table .my-cart-cell-content-column {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: start;
}

/* width: 100% explicito en los spans hijos para FORZAR que ocupen el ancho
   completo del wrapper. Sin esto, align-items: stretch del padre no era
   suficiente porque "display: block" y "display: -webkit-box" calculaban
   su ancho intrinseco basandose en el contenido (con white-space: nowrap o
   line-clamp), dejando vacio el espacio sobrante de la celda y truncando
   el texto antes de tiempo. Con width: 100% el span SIEMPRE es del ancho
   del wrapper y el ellipsis solo se activa cuando el texto realmente excede
   el ancho real disponible. */
#my-cart-modal #my-cart-table .my-cart-cell-content-column > .my-cart-product-name,
#my-cart-modal #my-cart-table .my-cart-cell-content-column > .my-cart-product-desc {
    width: 100%;
    box-sizing: border-box;
}

/* Font-size del precio (total) aplicado al wrapper interno con !important
   para ganar cualquier regla competidora (clase .my-product-total que viene
   del JS, o cualquier estilo heredado). Usa --cart-modal-name-fs para que
   el precio escale en cada breakpoint de la misma forma que el nombre del
   producto (em-based sobre la table-fs reducida). */
#my-cart-modal #my-cart-table > tbody > tr > td:nth-child(4) > .my-cart-cell-content {
    font-size: var(--cart-modal-name-fs) !important;
}

/* === NOMBRE Y DESCRIPCION DEL PRODUCTO (estructural, sin colores) =========
   Misma regla que .element-item .product-name / .product-description en los
   cards del catalogo: nombre 1 linea con ellipsis, descripcion 2 lineas con
   line-clamp. Los COLORES se definen en el archivo del tema (light.css o
   neon.css) o en el cshtml inline.
   ======================================================================= */

#my-cart-modal #my-cart-table .my-cart-product-name {
    display: block;
    font-weight: normal;
    font-size: var(--cart-modal-name-fs);
    line-height: 1.15;
    margin: 0;
    padding: 0;
    text-align: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#my-cart-modal #my-cart-table .my-cart-product-desc {
    /* line-height 1.2 fijo + max-height 2.4em (= 2 lineas) + line-clamp 2.
       El gap de 2px hacia el nombre de arriba se hace con margin-top (NO
       con padding-top), porque box-sizing: border-box hace que el padding
       se sume al max-height y deje solo ~1.92 lineas efectivas, cortando
       la 2da linea. */
    font-size: var(--cart-modal-desc-fs);
    line-height: 1.2;
    font-weight: normal;
    margin: 2px 0 0 0 !important;
    padding: 0;
    text-align: inherit;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* === INPUT DEL QTY (cantidad numerica) ====================================
   Sizing responsivo igualado a los botones +/- (.btnm/.btnp) para que el
   grupo [- 1 +] escale como un solo bloque visual. !important en sizing
   para anular el "width: 50px" inline que visor-mycart.js inyecta en el
   input. Background y color se definen en el archivo del tema.
   ======================================================================= */

#my-cart-modal #my-cart-table input[type="text"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px;
    width: var(--cart-modal-pm-w) !important;
    height: var(--cart-modal-pm-h) !important;
    font-size: var(--cart-modal-pm-fs) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* ============================================================================
   MODALES GLASS PARA CURVY — copia de las reglas de modales de prisma.css con
   scope body.totem-curvy (Prisma sigue usando prisma.css). El shim
   visor-glass-modals.js reemplaza SweetAlert por estos modales en Prisma+Curvy.
   ============================================================================ */
/* === MODAL CARRITO ========================================================
   En Prisma el modal es GLASS (fondo blanco translucido + blur del catalogo
   detras, igual que las cards). El header va en el morado translucido del tema;
   body y footer transparentes para dejar ver el vidrio del .modal-content. */
body.totem-curvy #my-cart-modal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    /* GLASS con la MISMA transparencia que el footer (.bill): mismo gradiente blanco y blur. */
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.7) !important;   /* Curvy: borde fino, SIN el marco de 7px */
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px hsla(0, 0%, 100%, 0.65) !important;
}
/* Body y footer transparentes: dejan ver el glass del .modal-content. */
body.totem-curvy #my-cart-modal .modal-body,
body.totem-curvy #my-cart-modal .modal-footer,
body.totem-curvy #my-cart-modal .modal-footer.cart-footer {
    background: transparent !important;
}
/* Menos padding lateral en el footer del modal: el boton PAGAR se extiende hasta los bordes. */
body.totem-curvy #my-cart-modal .modal-footer.cart-footer {
    padding: 14px 16px !important;
}
/* Header en el morado translucido del tema (coherente con footer/badge/categorias). */
body.totem-curvy #my-cart-modal .modal-header {
    background: linear-gradient(130deg, rgba(105, 33, 124, 0.78), rgba(85, 25, 100, 0.78)) !important;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.25) !important;
}
/* Mensaje "Tu carrito esta vacio" en NEGRO (el token del tema lo ponia azul). */
body.totem-curvy #my-cart-modal .cart-empty-msg {
    color: #551964 !important;   /* "Tu carrito esta vacio" en MORADO */
}

/* === BOTON PAGAR del modal: replica el footer general (dos sectores) ========
   El boton pasa a ser el CONTENEDOR de vidrio (como el .bill). El label "PAGAR"
   es el sector IZQUIERDO en morado translucido con la curva (clip-path curvyPay);
   el monto va en el sector DERECHO sobre el vidrio, en negro. Mismo lenguaje del
   footer flotante. Los hijos son absolute => el boton necesita un alto fijo.
   No tocamos .cart-checkout-hidden (oculta el boton con el carrito vacio). */

/* ELIMINADO en Curvy: el boton "Pagar + monto" del modal del carrito. Su accion se
   transfirio al footer principal (que queda visible con el resumen abierto). Doble clase
   (.my-cart-checkout.my-cart-checkout-paylike) para ganar por especificidad al display:
   block !important de la regla de estilo de abajo. */
body.totem-curvy #my-cart-modal .my-cart-checkout.my-cart-checkout-paylike {
    display: none !important;
}
/* Sin el boton, el footer del modal (.modal-footer.cart-footer) NO debe dejar su espacio:
   le quitamos el padding para que COLAPSE con productos (boton y mensaje ocultos => alto 0).
   El mensaje "carrito vacio" (solo visible SIN productos) lleva ese padding para verse. */
body.totem-curvy #my-cart-modal .modal-footer.cart-footer {
    padding: 0 !important;
}
body.totem-curvy #my-cart-modal .cart-empty-msg {
    padding: 18px 28px !important;
    margin-top: 0 !important;   /* elimina el margin-top:21px de visor-base (sobra con el padding propio y el footer en padding:0) */
}

body.totem-curvy #my-cart-modal .my-cart-checkout-paylike,
body.totem-curvy #my-cart-modal .my-cart-checkout-paylike:hover,
body.totem-curvy #my-cart-modal .my-cart-checkout-paylike:focus,
body.totem-curvy #my-cart-modal .my-cart-checkout-paylike:active {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--pay-slot-h) * 1.9) !important;   /* mismo alto que el footer general (.bill) */
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid hsla(0, 0%, 100%, 0.5) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;   /* Curvy: parte blanca OPACA = footer (.bill #fff), por coherencia */
    box-shadow: 0 14px 34px -12px rgba(50, 50, 93, 0.42), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
    transform: none !important;
    text-shadow: none !important;
}
/* Sector IZQUIERDO: "PAGAR" en el MORADO translucido del footer general, texto blanco. */
body.totem-curvy #my-cart-modal .my-cart-checkout-paylike .cart-checkout-label {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 54% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(to top, rgb(85, 25, 100) 0%, rgb(105, 33, 124) 100%) !important;   /* Curvy: morado OPACO = footer (.payTextBig), por coherencia */
    color: #fff !important;   /* "Pagar" en BLANCO */
    font-family: 'Viga', sans-serif !important;
    font-size: calc(var(--btn-pay-fs) * 1.5) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    border-radius: 16px 0 0 16px !important;
    clip-path: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><clipPath id='curvyPay' clipPathUnits='objectBoundingBox'><path d='M 0 0 H 1 V .5 C .9728 .7195 .9185 .9024 .8315 1 H 0 Z'/></clipPath></svg>#curvyPay") !important;
}
/* Sector DERECHO: el monto en negro, sobre el vidrio. */
body.totem-curvy #my-cart-modal .my-cart-checkout-paylike .payAmountWrap {
    position: absolute !important;
    left: 56% !important;
    right: 14px !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: #000 !important;
    font-family: 'Viga', sans-serif !important;
    font-size: calc(var(--btn-pay-fs) * 1.4) !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

/* Botones +/- de la tabla del carrito: MORADO translucido del tema (en vez del azul
   base), simbolo blanco. 2 ids en el selector para ganar a la regla tokenizada base. */
body.totem-curvy #my-cart-modal #my-cart-table input.btnm,
body.totem-curvy #my-cart-modal #my-cart-table input.btnp,
body.totem-curvy #my-cart-modal #my-cart-table .btnm,
body.totem-curvy #my-cart-modal #my-cart-table .btnp,
body.totem-curvy #my-cart-modal .btnm,
body.totem-curvy #my-cart-modal .btnp {
    background: rgba(105, 33, 124, 0.7) !important;
    background-color: rgba(105, 33, 124, 0.7) !important;
    border-color: rgba(195, 145, 215, 0.6) !important;
    color: #fff !important;
}
body.totem-curvy #my-cart-modal #my-cart-table input.btnm:hover,
body.totem-curvy #my-cart-modal #my-cart-table input.btnp:hover,
body.totem-curvy #my-cart-modal #my-cart-table input.btnm:active,
body.totem-curvy #my-cart-modal #my-cart-table input.btnp:active,
body.totem-curvy #my-cart-modal .btnm:hover,
body.totem-curvy #my-cart-modal .btnp:hover,
body.totem-curvy #my-cart-modal .btnm:active,
body.totem-curvy #my-cart-modal .btnp:active {
    background-color: rgba(105, 33, 124, 0.8) !important;
}

/* === Carrito Prisma + Curvy: +/- cuadrados, "+" subido y trash morado ======== */
/* +/- CUADRADOS: el ancho iguala al alto (antes --cart-modal-pm-w, mas angosto =>
   rectangular). El border-radius se mantiene (no se toca). */
body.totem-prisma #my-cart-modal .my-cart-qty-controls .btnm,
body.totem-prisma #my-cart-modal .my-cart-qty-controls .btnp,
body.totem-curvy #my-cart-modal .my-cart-qty-controls .btnm,
body.totem-curvy #my-cart-modal .my-cart-qty-controls .btnp {
    width: var(--cart-modal-pm-h) !important;
}
/* Sube SOLO el caracter "+" ~1px (no su fondo): padding-bottom corre el texto centrado
   hacia arriba sin mover el boton (alto fijo) ni el background. */
body.totem-prisma #my-cart-modal .my-cart-qty-controls .btnp,
body.totem-curvy #my-cart-modal .my-cart-qty-controls .btnp {
    padding-bottom: 2px !important;
}
/* Trash (eliminar producto) MORADO del tema y 5px mas grande (antes rojo): color, tamano
   (var(--cart-modal-trash-fs) + 5px) y sombra morada en vez de roja. */
body.totem-prisma #my-cart-modal .my-cart-remove-btn .fa,
body.totem-curvy #my-cart-modal .my-cart-remove-btn .fa {
    color: #69217C !important;
    font-size: calc(var(--cart-modal-trash-fs) + 5px) !important;
    filter: drop-shadow(0 0 3px rgba(105, 33, 124, 0.3)) !important;
}
/* Cantidad (input numerico) y total (por producto + total general) en MORADO OSCURO
   (antes negro), el mismo que el monto de las cards/footer (#551964). */
body.totem-prisma #my-cart-modal #my-cart-table input[type="text"],
body.totem-prisma #my-cart-modal .my-product-total,
body.totem-prisma #my-cart-modal .my-cart-grand-total,
body.totem-curvy #my-cart-modal #my-cart-table input[type="text"],
body.totem-curvy #my-cart-modal .my-product-total,
body.totem-curvy #my-cart-modal .my-cart-grand-total {
    color: #551964 !important;
}

/* === MODAL MEDIOS DE PAGO (#paymentModal): mismo estandar GLASS que el modal del carrito
   y los modales de info (Prisma + Curvy). Antes usaba el .modal-content opaco base. ===== */
/* Modal-content vidrio: Prisma con marco de 7px (como sus cards/swal), Curvy con borde fino. */
body.totem-prisma #paymentModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 7px solid hsla(0, 0%, 100%, 0.4) !important;
    background-clip: padding-box !important;
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px hsla(0, 0%, 100%, 0.65) !important;
}
body.totem-curvy #paymentModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.7) !important;
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px hsla(0, 0%, 100%, 0.65) !important;
}
/* Header en el morado translucido del tema, titulo y X en blanco. */
body.totem-prisma #paymentModal .modal-header,
body.totem-curvy #paymentModal .modal-header {
    background: linear-gradient(130deg, rgba(105, 33, 124, 0.78), rgba(85, 25, 100, 0.78)) !important;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.25) !important;
}
body.totem-prisma #paymentModal .modal-title,
body.totem-prisma #paymentModal .modal-header .close,
body.totem-curvy #paymentModal .modal-title,
body.totem-curvy #paymentModal .modal-header .close {
    color: #fff !important;
}
/* Body y footer transparentes: dejan ver el vidrio del modal-content. */
body.totem-prisma #paymentModal .modal-body,
body.totem-prisma #paymentModal .modal-footer,
body.totem-curvy #paymentModal .modal-body,
body.totem-curvy #paymentModal .modal-footer {
    background: transparent !important;
}
/* Items de medios de pago: tarjetas de vidrio sutiles con texto morado oscuro legible. */
body.totem-prisma #paymentModal .payment-method-item,
body.totem-curvy #paymentModal .payment-method-item {
    background: hsla(0, 0%, 100%, 0.55) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.6) !important;
    color: #551964 !important;
}

/* === MODAL INFO DEL TOTEM (#totemInfoModal): mismo estandar GLASS que el carrito y medios de
   pago (Prisma + Curvy). Antes usaba el .modal-content opaco base + boton "Refrescar" azul
   (btn-primary) y "Descargar" verde (btn-success) de Bootstrap, que desentonaban con el tema. */
body.totem-prisma #totemInfoModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 7px solid hsla(0, 0%, 100%, 0.4) !important;   /* Prisma: marco de 7px como sus cards/swal */
    background-clip: padding-box !important;
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px hsla(0, 0%, 100%, 0.65) !important;
}
body.totem-curvy #totemInfoModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.7) !important;   /* Curvy: borde fino */
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px hsla(0, 0%, 100%, 0.65) !important;
}
/* Header morado translucido, titulo y X en blanco. */
body.totem-prisma #totemInfoModal .modal-header,
body.totem-curvy #totemInfoModal .modal-header {
    background: linear-gradient(130deg, rgba(105, 33, 124, 0.78), rgba(85, 25, 100, 0.78)) !important;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.25) !important;
}
body.totem-prisma #totemInfoModal .modal-title,
body.totem-prisma #totemInfoModal .modal-header .close,
body.totem-curvy #totemInfoModal .modal-title,
body.totem-curvy #totemInfoModal .modal-header .close {
    color: #fff !important;
}
/* Body transparente: deja ver el vidrio del modal-content (los textos Boleta/App/Agent quedan
   oscuros por default de Bootstrap, legibles sobre el vidrio claro). */
body.totem-prisma #totemInfoModal .modal-body,
body.totem-curvy #totemInfoModal .modal-body {
    background: transparent !important;
}
/* Botones (Refrescar / Descargar) con el MISMO morado GLASS que los del swal: translucido +
   blur (antes era rgba 0.82 SIN blur, por eso se veia casi solido). */
body.totem-prisma #totemInfoModal .btn,
body.totem-curvy #totemInfoModal .btn {
    background: rgba(105, 33, 124, 0.7) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.45) !important;
    border-radius: 10px !important;
    color: #fff !important;
}
body.totem-prisma #totemInfoModal .btn:hover,
body.totem-prisma #totemInfoModal .btn:focus,
body.totem-curvy #totemInfoModal .btn:hover,
body.totem-curvy #totemInfoModal .btn:focus {
    background: rgba(85, 25, 100, 0.8) !important;
    color: #fff !important;
}
/* El boton "Cancelar" del swal de inactividad quedaba morado SOLIDO: la regla global
   .totem-idle-swal .swal2-cancel pinta con el token (--theme-btn-action-bg) y !important, que
   pisa el morado glass del .swal2-styled. En Prisma/Curvy lo devolvemos a glass (translucido+blur)
   para que combine con el boton de confirmar y con el resto de swal. */
body.totem-prisma .swal2-popup.totem-idle-swal .swal2-cancel,
body.totem-curvy .swal2-popup.totem-idle-swal .swal2-cancel {
    background-color: rgba(105, 33, 124, 0.7) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}
/* Boton "Cancelar" del modal QR de MercadoPago: su <style> inline lo pinta con el token SOLIDO
   (--theme-btn-action-bg). En Prisma/Curvy lo pasamos al mismo morado glass que el resto. */
body.totem-prisma #mercadoPagoQrModal .mp-qr-cancel,
body.totem-curvy #mercadoPagoQrModal .mp-qr-cancel {
    background: rgba(105, 33, 124, 0.7) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border-color: hsla(0, 0%, 100%, 0.45) !important;
}

/* === SWEETALERTS (idle, errores, confirmaciones, "procesando") =============
   Mismo vidrio que el modal del carrito: fondo blanco translucido + blur. Los
   internos (titulo, texto, iconos, botones) son transparentes o heredan color,
   asi que funcionan sobre el vidrio. Prisma NO estaba en el :is(dark,neon) que
   redefine el fondo, por eso heredaban el #fff opaco de SweetAlert2. */
body.totem-curvy .swal2-popup {
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.55), hsla(0, 0%, 100%, 0.38)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.7) !important;   /* Curvy: borde fino, SIN el marco de 7px */
    box-shadow:
        0 34px 70px -24px rgba(50, 50, 93, 0.45),
        0 16px 34px -18px rgba(0, 0, 0, 0.25) !important;
}
/* Backdrop del swal: el velo NO va en el background del .swal2-container (ancestro
   directo del popup), porque eso hace que el backdrop-filter del popup difumine ese
   color plano en vez del catalogo, y se ve distinto al carrito. Se mueve a un PSEUDO
   (como el .modal-backdrop del modal, que es un elemento separado, no el ancestro),
   asi el blur del popup difumina el catalogo real y el vidrio queda IGUAL al carrito. */
body.totem-curvy .swal2-container.swal2-shown {
    background-color: transparent !important;
}
body.totem-curvy .swal2-container.swal2-shown::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
/* SOLO el fondo del swal es semitransparente: los TEXTOS quedan negros SOLIDOS y
   opacos (no deben transparentarse ni dejar ver el catalogo a traves). */
body.totem-curvy .swal2-popup .swal2-title,
body.totem-curvy .swal2-popup .swal2-html-container,
body.totem-curvy .swal2-popup #swal2-html-container,
body.totem-curvy .swal2-popup .swal2-content,
body.totem-curvy .swal2-popup #swal2-content,
body.totem-curvy .swal2-popup .swal2-label,
body.totem-curvy .swal2-popup .swal2-validation-message {
    color: #000 !important;
    opacity: 1 !important;
}
/* Backdrop mas sutil: deja que el blur del modal difumine el catalogo (claro) en vez
   de un velo oscuro, para que el vidrio se vea claro como las cards. */
body.totem-curvy .modal-backdrop.show {
    opacity: 0.2 !important;
}

/* === MODAL PROPIO (PrismaSwal) que reemplaza SweetAlert2 en Prisma ==============
   El popup reusa .swal2-popup (hereda el VIDRIO + textos negros de arriba). El velo va
   en .prisma-swal-backdrop (elemento SEPARADO, no ancestro con background), para que el
   blur del popup difumine el catalogo igual que el modal del carrito. */
body.totem-curvy .prisma-swal-host {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.totem-curvy .prisma-swal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 0;
}
body.totem-curvy .prisma-swal-popup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 30em;
    min-height: 20em;   /* algo mas alto que el rectangular original, sin llegar a cuadrado */
    max-width: 100%;
    padding: 1.6em 1.7em;
    border-radius: 18px !important;
    text-align: center;
    /* Entra con un "pop" (escala). El JS re-dispara la animacion en cada apertura. */
    animation: prismaSwalPopIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes prismaSwalPopIn {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}
body.totem-curvy .prisma-swal-popup .prisma-swal-title {
    margin: auto 0 0.35em;   /* margin-top auto: empuja titulo+mensaje al CENTRO */
    font-family: 'Viga', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #000 !important;
    line-height: 1.2;
}
body.totem-curvy .prisma-swal-popup .prisma-swal-content {
    font-size: 1.4rem;
    color: #000 !important;
    line-height: 1.4;
    width: 100%;
    margin-bottom: auto;   /* junto al titulo (margin-top auto) centra los textos verticalmente */
}
body.totem-curvy .prisma-swal-popup .prisma-swal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0;   /* al fondo (el content tiene margin-bottom auto) */
    width: 100%;
}
body.totem-curvy .prisma-swal-popup .swal2-styled {
    border: 1px solid hsla(0, 0%, 100%, 0.45);
    border-radius: 12px;
    padding: 0.68em 1.75em;   /* un poco mas grandes que antes (0.6em 1.5em) */
    font-family: 'Viga', sans-serif;
    font-size: 1.4rem;        /* antes 1.25rem */
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    /* Morado translucido por defecto; ShowCancelAction pisa el color inline (rojo/morado). */
    background-color: rgba(105, 33, 124, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Spinner del "procesando" (showLoading) y de los popups con timer. */
body.totem-curvy .prisma-swal-popup .prisma-swal-spinner {
    margin: 50px auto 6px;   /* 50px separado de los textos */
    width: 44px;
    height: 44px;
    border: 5px solid rgba(105, 33, 124, 0.25);
    border-top-color: rgba(105, 33, 124, 0.9);
    border-radius: 50%;
    animation: prismaSwalSpin 0.8s linear infinite, prismaSwalFadeIn 0.3s ease-out both;
}
@keyframes prismaSwalSpin { to { transform: rotate(360deg); } }
@keyframes prismaSwalFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Icono centrado arriba del modal (~80px, parecido a SweetAlert), color por caso. */
body.totem-curvy .prisma-swal-icon {
    margin: 0 auto 0.4em;   /* icono pegado ARRIBA */
    line-height: 1;
    text-align: center;
    transform-origin: center 60%;
    /* Entra escalando con un pequeno rebote que lo "acomoda" (estilo SweetAlert). */
    animation: prismaSwalIconPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes prismaSwalIconPop {
    0%   { opacity: 0; transform: scale(0.2) rotate(-14deg); }
    55%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
    75%  { transform: scale(0.93) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
body.totem-curvy .prisma-swal-icon i.fa {
    font-size: 80px;
    line-height: 1;
}
body.totem-curvy .prisma-swal-icon--success i { color: #16a34a; }          /* check verde */
body.totem-curvy .prisma-swal-icon--error i { color: #dc2626; }            /* X roja */
body.totem-curvy .prisma-swal-icon--warning i { color: #f59e0b; }          /* triangulo ambar */
body.totem-curvy .prisma-swal-icon--info i,
body.totem-curvy .prisma-swal-icon--idle i,
body.totem-curvy .prisma-swal-icon--pos i,
body.totem-curvy .prisma-swal-icon--question i { color: rgba(105, 33, 124, 0.92); }  /* morado del tema */

/* Curvy: al abrir un modal (Bootstrap pone .modal-open en el body) el footer flotante
   se DESLIZA hacia abajo, fuera de pantalla, y vuelve a subir al cerrarlo (igual que en
   Prisma). El .footer de Curvy no usa transform propio, asi que el translateY es seguro. */
body.totem-curvy .footer {
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: transform;
}
/* Con el RESUMEN del carrito abierto el footer NO se oculta: visible y CLICKEABLE por ENCIMA
   del backdrop para actuar como boton de pago. Va PRIMERO: las reglas de "esconder" de abajo
   lo pisan cuando hay un swal/modal de pago encima. */
body.totem-curvy.cart-modal-open .footer {
    transform: none !important;
    pointer-events: auto !important;
    z-index: 1060 !important;
}
/* El footer ya NO se desliza fuera de pantalla durante el flujo de pago: queda SIEMPRE VISIBLE
   (se usa como display de informacion: "SELECCIONA" / "USA EL POS" / "Procesando") pero NO-INTERACTIVO
   (pointer-events:none deja pasar los taps al modal/swal de abajo). Disparadores: modales Bootstrap !=
   carrito (.modal-open) y el flujo de pago activo (.payment-flow-open, PERSISTENTE desde proceedToPayment
   hasta el reset; cubre gaps async y swal de pago OK/impresora). El caso .cart-modal-open (regla de
   ARRIBA, va PRIMERO con el mismo peso) lo mantiene INTERACTIVO como boton "Pagar". info_modal sigue
   excluido. z-index:1060 (igual que cart-modal-open) para legibilidad sobre el backdrop, sin que el
   footer salte de posicion/tamano. */
body.totem-curvy.modal-open:not(.cart-modal-open):not(.info-modal-open) .footer,
body.totem-curvy.payment-flow-open .footer {
    transform: none !important;
    pointer-events: none !important;
    z-index: 1060 !important;
}