/* * ==================================================
 * SISTEMA VISUAL COMPARTIDO PARA PANELES EMERGENTES
 * Base: panel de juegos relacionados
 * ================================================== */

/* * ==================================================
 * SHELL BASE
 *
 * ! Se selecciona por CLASE, no por lista de IDs: cualquier
 * ! offcanvas nuevo adopta el sistema añadiendo .panel-emergente.
 * ! Las variantes (ancho, acento, geometría) se resuelven con
 * ! variables desde el ID del panel, sin duplicar el shell.
 * ================================================== */

.panel-emergente {
    --panel-ancho: 480px;
    --panel-acento: var(--wod-cyan);
    --panel-acento-rgb: var(--wod-cyan-rgb);
    --panel-radio-tarjeta: 17px;
    --panel-lista-gap: 0.9rem;
    /* ! Foco accesible ÚNICO del sistema: siempre WOD cian, nunca
     * ! el acento semántico de cada panel (Xbox verde, favorito
     * ! rojo o notificaciones azul serían focos inconsistentes). */
    --panel-focus: var(--wod-cyan);
    width: min(var(--panel-ancho), 100vw) !important;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
    color: #f8f9fa;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--panel-acento-rgb), 0.16), transparent 34%),
        linear-gradient(155deg, #151922 0%, #0c0f15 100%) !important;
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45) !important;
}

/* * ! P2C: el carrito pasa de verde "compra/Xbox" a identidad WOD.
 * ! Ya no depende de body.theme-*: se ve igual en Home, Xbox, PC
 * ! o Suscripciones. La plataforma del producto se expresa en su
 * ! badge (.badge-plataforma), nunca en el acento del panel. */
#offcanvasCarrito.panel-emergente {
    --panel-acento: var(--wod-cyan);
    --panel-acento-rgb: var(--wod-cyan-rgb);
}

/* El acento general de Favoritos (cian/neón) se define en favoritos.css:
   ese componente ya no toma prestada la identidad verde de Xbox. */

/* * ! P2C: Productos Relacionados deja de heredar el color de
 * ! body.theme-* (Xbox verde, PC cian, Suscripciones ámbar). El
 * ! panel es una FUNCIÓN del sistema (relacionar productos), no
 * ! una extensión visual de la plataforma activa: su identidad es
 * ! WOD cian, igual que el resto del sistema. El contexto Xbox
 * ! dentro del panel sigue siendo verde a través de su propio
 * ! badge/icono (ver productos-relacionados.css). */
#offcanvasProductosRelacionados.panel-emergente {
    --panel-acento: var(--wod-cyan);
    --panel-acento-rgb: var(--wod-cyan-rgb);
}

/* * ==================================================
 * CABECERA COMPARTIDA
 * ================================================== */

.panel-emergente .panel-emergente-header {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: var(--panel-header-alto, 92px);
    padding: var(--panel-header-padding, 1.15rem 1.25rem);
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: var(--panel-header-gap, 1rem);
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(8, 11, 16, 0.78) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.panel-emergente .panel-emergente-identidad,
.panel-emergente .panel-emergente-titulo-bloque {
    min-width: 0;
}

.panel-emergente .panel-emergente-identidad {
    flex: 1 1 auto;
}

.panel-emergente .panel-emergente-titulo-bloque {
    flex: 1 1 auto;
}

.panel-emergente .panel-emergente-icono {
    display: grid;
    width: var(--panel-icono-tam, 48px);
    height: var(--panel-icono-tam, 48px);
    min-width: var(--panel-icono-tam, 48px);
    place-items: center;
    flex: 0 0 var(--panel-icono-tam, 48px);
    color: var(--panel-acento);
    border: 1px solid rgba(var(--panel-acento-rgb), 0.42);
    border-radius: var(--panel-icono-radio, 15px);
    background: rgba(var(--panel-acento-rgb), 0.12);
    box-shadow: 0 0 22px rgba(var(--panel-acento-rgb), 0.13);
    font-size: 1rem;
}

.panel-emergente .panel-emergente-titulo-fila {
    min-width: 0;
    flex-wrap: nowrap;
}

.panel-emergente .panel-emergente-titulo {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-emergente .panel-emergente-contador {
    display: inline-grid;
    min-width: 28px;
    height: 24px;
    padding: 0 0.45rem;
    place-items: center;
    flex: 0 0 auto;
    color: #08100a;
    border: 0;
    border-radius: 999px;
    background: var(--panel-acento);
    box-shadow: none;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
}

/* ! Flag funcional de "carrito con productos" (JS la alterna,
   ! no se toca). El color ya no es un verde fijo: usa el acento
   ! del panel (cian WOD). !important es necesario: las utilidades
   ! .bg-primary/.bg-secondary de Bootstrap se generan con
   ! !important, así que sin él seguía ganando el azul genérico. */
#offcanvasCarrito.panel-emergente .panel-emergente-contador.bg-primary {
    background: var(--panel-acento) !important;
    color: var(--wod-tinta);
    box-shadow: 0 0 14px rgba(var(--panel-acento-rgb), 0.28);
}

.panel-emergente .panel-emergente-subtitulo {
    display: block;
    max-width: var(--panel-subtitulo-ancho, 310px);
    margin: 0.28rem 0 0 !important;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-emergente .panel-emergente-subtitulo strong {
    color: var(--panel-acento);
    font-weight: 700;
}

/* La identidad roja/magenta del icono y el contador de Favoritos
   (corazón) vive en favoritos.css: es la firma propia del componente. */

.panel-emergente .panel-emergente-cerrar {
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
    opacity: 0.72;
    border-radius: 11px;
    background-size: 0.72rem;
    transition: opacity 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.panel-emergente .panel-emergente-cerrar:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
    transform: rotate(90deg);
}

/* * ==================================================
 * BARRA SECUNDARIA
 * ================================================== */

.panel-emergente .panel-emergente-contexto {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 48px;
    padding: 0.72rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.68);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.75rem;
}

.panel-emergente .panel-emergente-contexto>span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    font-weight: 700;
}

.panel-emergente .panel-emergente-contexto>span i,
.panel-emergente .panel-emergente-contexto>i {
    color: var(--panel-acento);
}

.panel-emergente .panel-emergente-contexto small {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.67rem;
    text-align: right;
}

/* La barra de acciones de Favoritos (agregar todos / eliminar todos)
   se dimensiona en favoritos.css, que es quien la usa realmente. */

/* * ==================================================
 * CUERPO Y SCROLL
 * ================================================== */

.panel-emergente .panel-emergente-body {
    position: relative;
    z-index: 2;
    min-height: 0;
    padding: 1rem !important;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.panel-emergente .panel-emergente-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* * Lista vertical de cualquier panel. Sirve igual para <div> y para
 * <ul> (de ahí margin/list-style): el gap se ajusta por variante. */
.panel-emergente .panel-emergente-lista {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: var(--panel-lista-gap, 0.9rem);
    list-style: none;
}

/* * ==================================================
 * SUPERFICIE COMPARTIDA DE TARJETAS
 *
 * ! Primitiva: solo superficie (borde, radio, fondo, sombra,
 * ! transición y hover base). La rejilla interna, la imagen,
 * ! el precio y las acciones son responsabilidad de cada panel.
 * ================================================== */

.panel-emergente .panel-emergente-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--panel-radio-tarjeta, 17px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.23) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.panel-emergente .panel-emergente-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--panel-acento-rgb), 0.38) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.32) !important;
}

/* Decoración compartida de precios y promociones; disponible desde Home. */
.game-list-old-price,
.carrito-precio-anterior,
.favorito-producto-precio-anterior {
    color: #9ca3af;
    font-size: 0.78rem;
    line-height: 1.1;
    text-decoration: line-through;
}

#offcanvasFavoritos .favorito-producto-promociones,
.carrito-promociones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 4px;
}

.favorito-promo-badge,
.carrito-promo-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.04em;
}

.favorito-promo-porcentaje,
.carrito-promo-porcentaje {
    background: #dc3545;
}

.favorito-promo-3x2,
.carrito-promo-3x2 {
    background: #f47521;
    color: #111;
}

#offcanvasFavoritos .favorito-producto-precio-anterior {
    display: block;
    margin-bottom: 1px;
}

.carrito-precio-anterior {
    margin-bottom: 1px;
}

.carrito-precio-gratis {
    margin-right: 7px;
    color: var(--wod-success);
    font-weight: 900;
}

.carrito-precio-referencia {
    color: #9ca3af;
    font-size: 0.76rem;
    text-decoration: line-through;
}

@media (max-width: 575.98px) {

    .favorito-promo-badge,
    .carrito-promo-badge {
        font-size: 0.56rem;
    }
}

/* * ==================================================
 * TARJETAS DEL CARRITO
 * ================================================== */

#offcanvasCarrito.panel-emergente .carrito-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    flex-shrink: 0;
    min-height: 100px;
    padding: 0.75rem;
    gap: 0.65rem;
}

#offcanvasCarrito.panel-emergente .carrito-item>img {
    width: var(--carrito-imagen);
    height: var(--carrito-imagen);
    min-height: 0;
    border: 0;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 260ms ease;
}

#offcanvasCarrito.panel-emergente .carrito-item:hover>img {
    transform: scale(1.04);
}

#offcanvasCarrito.panel-emergente .carrito-info {
    display: flex;
    min-width: 0;
    padding: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
}

#offcanvasCarrito.panel-emergente .carrito-titulo {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: var(--text-light, #f4f4f5);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#offcanvasCarrito.panel-emergente .carrito-precio {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
    color: var(--panel-acento);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

#offcanvasCarrito.panel-emergente .btnEliminar {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border-radius: 10px;
}

/* Las tarjetas de Favoritos (grupo, plataforma, imagen, info, nombre,
   precio, acciones) se controlan íntegramente desde favoritos.css. */

/* * ==================================================
 * BOTONES DE AÑADIR Y ELIMINAR
 * La referencia es el botón de borrado del carrito.
 * ================================================== */

/* ! Color, hover y active los aporta el rol compartido
   ! .panel-emergente-accion--destructivo. */
#offcanvasCarrito.panel-emergente .btnEliminar {
    display: inline-grid;
    padding: 0;
    place-items: center;
}

/* El botón "agregar" de Favoritos usa el lenguaje cian/neón propio de
   WorldOfDigital; se define en favoritos.css. El de Relacionados usa
   el rol compartido .panel-emergente-accion--add (tokens WOD). */

/* * ==================================================
 * ESTADOS VACÍOS
 * ================================================== */

/* * ! Primitiva de estado vacío: layout, centrado, altura, padding
 * ! y tipografía. Cada panel conserva la IDENTIDAD de su icono
 * ! (corazón de Favoritos, campana de Notificaciones…): se comparte
 * ! la estructura, no el color. */
.panel-emergente .panel-emergente-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--panel-vacio-alto, 54vh);
    padding: var(--panel-vacio-padding, 2rem);
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.panel-emergente .panel-emergente-vacio-icono {
    margin-bottom: 1rem;
    color: var(--panel-acento);
    opacity: 0.78;
    font-size: 2.8rem;
}

.panel-emergente .panel-emergente-vacio-titulo {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.panel-emergente .panel-emergente-vacio-texto {
    max-width: 280px;
    margin: 0;
    font-size: 0.82rem;
}

/* El icono del estado vacío de Favoritos (corazón) usa su propia
   identidad roja/magenta; se define en favoritos.css. */

/* Geometría exclusiva del carrito; los otros paneles conservan sus
   proporciones. Es una VARIANTE por variables: el shell, la cabecera
   y el icono siguen viniendo de las primitivas compartidas. */
#offcanvasCarrito.panel-emergente {
    --panel-ancho: 560px;
    --panel-radio-tarjeta: 16px;
    --panel-lista-gap: 0.75rem;
    --panel-header-alto: 72px;
    --panel-header-padding: 0.75rem 1rem;
    --panel-header-gap: 0.5rem;
    --panel-icono-tam: 40px;
    --panel-icono-radio: 12px;
    --carrito-imagen: 78px;
    height: 100vh;
    height: 100dvh;
}

#offcanvasCarrito.panel-emergente .carrito-acciones {
    display: flex;
    align-items: center;
    justify-content: center;
}

#offcanvasCarrito.panel-emergente .carrito-plataforma {
    font-size: 0.7rem;
    white-space: normal;
    text-align: left;
}

#offcanvasCarrito.panel-emergente .carrito-meta {
    margin: 0;
    align-items: center;
    gap: 6px;
}

#offcanvasCarrito.panel-emergente .carrito-precio-gratis {
    margin: 0;
}

#offcanvasCarrito.panel-emergente .checkout-promos-filas {
    display: grid;
    gap: 0.75rem;
}

#offcanvasCarrito.panel-emergente .carrito-seccion-titulo {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--text-light, #f4f4f5);
    font-size: 0.9rem;
    font-weight: 700;
}

#offcanvasCarrito.panel-emergente #inputCodigoPromo {
    min-width: 0;
    text-transform: uppercase;
}

#offcanvasCarrito.panel-emergente #inputCodigoPromo::placeholder {
    color: var(--text-muted, #94a3b8);
    opacity: 1;
    text-transform: none;
}

#offcanvasCarrito.panel-emergente #btnAplicarCupon {
    flex-shrink: 0;
}

#offcanvasCarrito.panel-emergente .cupon-container label {
    font-size: 0.84rem;
    font-weight: 600;
}

#offcanvasCarrito.panel-emergente .estado-afiliado-carrito {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-left: 2px solid var(--panel-acento);
    color: var(--panel-acento);
    font-size: 0.78rem;
    line-height: 1.35;
}

#offcanvasCarrito.panel-emergente .estado-afiliado-carrito>div {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

#offcanvasCarrito.panel-emergente .estado-afiliado-carrito strong {
    color: var(--text-light, #f4f4f5);
}

#offcanvasCarrito.panel-emergente .carrito-afiliado-codigo {
    display: block;
    font-size: 0.75rem;
}

#offcanvasCarrito.panel-emergente .estado-carrito-3x2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.84rem;
    line-height: 1.3;
}

#offcanvasCarrito.panel-emergente .estado-carrito-3x2>i {
    margin-top: 2px;
    color: var(--wod-warning);
}

#offcanvasCarrito.panel-emergente .estado-carrito-3x2.aplicada {
    color: #b7f7cc;
}

#offcanvasCarrito.panel-emergente .estado-carrito-3x2.aplicada>i {
    color: var(--wod-success);
}

/* * El aviso vive fuera del collapse de promociones para que
   * el progreso se vea siempre, también en móvil. */
#offcanvasCarrito.panel-emergente .checkout-promos>.estado-carrito-3x2.checkout-promos-aviso {
    margin: 0 0 0.6rem;
}

#offcanvasCarrito.panel-emergente .carrito-puntos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    color: var(--wod-points);
    font-size: 0.84rem;
    line-height: 1.3;
}

#offcanvasCarrito.panel-emergente .carrito-puntos>span {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1;
    gap: 0.35rem;
    font-weight: 600;
}

#offcanvasCarrito.panel-emergente .checkout-puntos {
    margin-top: 0.65rem;
}

#offcanvasCarrito.panel-emergente #carritoPuntos {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
}

#offcanvasCarrito.panel-emergente .carrito-resumen-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.88rem;
    line-height: 1.3;
}

#offcanvasCarrito.panel-emergente .carrito-resumen-fila>span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#offcanvasCarrito.panel-emergente .carrito-resumen-fila> :last-child {
    text-align: right;
}

/* ! P2C.1: Descuento es un estado comercial POSITIVO (ahorro),
   ! no la identidad WOD general del panel: usa --wod-success,
   ! el mismo token que "gratis" y "3x2 aplicada". No reutiliza
   ! --color-xbox (eso es identidad de plataforma, otra capa). */
#offcanvasCarrito.panel-emergente .carrito-resumen-descuento {
    color: var(--wod-success);
}

#offcanvasCarrito.panel-emergente .carrito-resumen-total {
    margin: 0.65rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light, #f4f4f5);
    font-size: 1.04rem;
    font-weight: 700;
}

#offcanvasCarrito.panel-emergente #carritoTotal {
    min-width: 0;
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

/* ! Variante del carrito: crece dentro de la lista en vez de fijar
   ! una altura mínima. El resto lo aporta .panel-emergente-vacio. */
#offcanvasCarrito.panel-emergente .carrito-vacio {
    --panel-vacio-alto: 0;
    --panel-vacio-padding: 1.5rem 1rem;
    flex: 1;
}



/* * ==================================================
 * CONTENIDO Y PIE DEL CARRITO
 * ================================================== */

#offcanvasCarrito.panel-emergente .panel-emergente-footer {
    position: relative;
    z-index: 4;
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    flex: 0 0 auto;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 11, 16, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#offcanvasCarrito.panel-emergente .cupon-container .input-group {
    min-height: 38px;
    flex-wrap: nowrap;
}

#offcanvasCarrito.panel-emergente .cupon-container .form-control,
#offcanvasCarrito.panel-emergente .cupon-container .btn {
    color: var(--text-light, #f4f4f5);
    font-size: 0.84rem;
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.045);
}

/* ! Foco propio del carrito: independiente de la página/plataforma
   ! desde donde se abra (antes dependía de reglas genéricas de
   ! .form-control que variaban entre Home, catálogo y otras vistas). */
#offcanvasCarrito.panel-emergente .cupon-container .form-control:focus {
    border-color: var(--panel-acento);
    background-color: rgba(255, 255, 255, 0.045);
    color: var(--text-light, #f4f4f5);
    box-shadow: 0 0 0 3px rgba(var(--panel-acento-rgb), 0.25);
}

/* * ==================================================
 * CTA — ACCIÓN PRINCIPAL DEL CARRITO
 *
 * ! El aspecto de #btnFinalizarCompra es el rol compartido
 * ! .btn-compra-continuar (CSS/compra-interacciones.css).
 * ================================================== */

/* Una única región desplazable; el dock nunca contiene scroll propio. */
#offcanvasCarrito.panel-emergente .carrito-body {
    display: flex;
    flex-direction: column;
}

#offcanvasCarrito #listaCarrito {
    flex: 1 0 auto;
}

#offcanvasCarrito.panel-emergente .carrito-precios {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.55rem;
    overflow-wrap: anywhere;
}

#offcanvasCarrito.panel-emergente .carrito-promo-badge {
    min-height: 20px;
    font-size: 0.7rem;
    letter-spacing: 0.015em;
}

#offcanvasCarrito.panel-emergente .carrito-precio-anterior,
#offcanvasCarrito.panel-emergente .carrito-precio-referencia {
    font-size: 0.78rem;
    font-weight: 400;
}

#offcanvasCarrito.panel-emergente .checkout-dock-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.95fr);
    align-items: start;
    gap: 1.25rem;
}

#offcanvasCarrito.panel-emergente .checkout-promos,
#offcanvasCarrito.panel-emergente .checkout-summary {
    min-width: 0;
}

#offcanvasCarrito.panel-emergente .checkout-summary {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

#offcanvasCarrito.panel-emergente .checkout-summary-titulo,
#offcanvasCarrito.panel-emergente .checkout-promos-titulo {
    margin-bottom: 0.75rem;
}

#offcanvasCarrito.panel-emergente .checkout-summary-titulo {
    font-size: 0.94rem;
    font-weight: 700;
}

#offcanvasCarrito.panel-emergente .checkout-promos-titulo {
    font-size: 0.94rem;
    font-weight: 700;
}

#offcanvasCarrito.panel-emergente .checkout-cta {
    margin-top: 1rem;
}

#offcanvasCarrito.panel-emergente .checkout-promos-toggle {
    display: none;
    width: 100%;
    padding: 0.65rem 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-light, #f4f4f5);
    border: 0;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
}

#offcanvasCarrito.panel-emergente .checkout-promos-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* La vista vacía se reconoce por su DOM; no cambia el cálculo de puntos. */
#offcanvasCarrito:has(#listaCarrito > .carrito-vacio) .checkout-puntos {
    display: none;
}

@media (min-width: 481px) {

    /* Bootstrap sólo colapsa promociones en móvil. */
    #offcanvasCarrito .checkout-promos-contenido.collapse:not(.show) {
        display: block;
    }
}

@media (min-width: 481px) and (max-width: 991.98px) {
    #offcanvasCarrito.panel-emergente {
        --panel-ancho: 520px;
    }
}

@media (max-width: 480px) {
    #offcanvasCarrito.panel-emergente {
        --panel-ancho: 100vw;
        --carrito-imagen: 72px;
    }

    #offcanvasCarrito.panel-emergente .carrito-item {
        padding: 0.65rem;
        gap: 0.5rem;
    }

    #offcanvasCarrito.panel-emergente .checkout-dock-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    #offcanvasCarrito.panel-emergente .checkout-summary {
        order: 1;
        padding: 0.75rem 0.85rem;
    }

    #offcanvasCarrito.panel-emergente .checkout-promos {
        order: 2;
    }

    #offcanvasCarrito.panel-emergente .checkout-promos-titulo {
        display: none;
    }

    #offcanvasCarrito.panel-emergente .checkout-summary-titulo {
        display: block;
    }

    #offcanvasCarrito.panel-emergente .checkout-promos-toggle {
        display: flex;
    }

    #offcanvasCarrito.panel-emergente .checkout-promos-filas {
        padding: 0.2rem 0 0.65rem;
    }

    #offcanvasCarrito.panel-emergente .panel-emergente-footer {
        padding: 0.5rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    #offcanvasCarrito.panel-emergente .checkout-cta {
        margin-top: 0.65rem;
    }
}

#offcanvasCarrito.panel-emergente .carrito-resumen-fila> :last-child {
    flex-shrink: 0;
    white-space: nowrap;
}


/* * ==================================================
 * ACCESIBILIDAD Y MÓVIL
 * ================================================== */

/* ! Foco WOD unificado: no usa --panel-acento (variaría por panel).
   ! El foco es navegación/interacción, no identidad de plataforma. */
.panel-emergente button:focus-visible,
.panel-emergente a:focus-visible {
    outline: 2px solid var(--panel-focus, var(--wod-cyan));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {

    /* ! Cabecera e icono compactos por defecto. Se expresan con las
     * ! MISMAS variables del sistema, así que una variante con valores
     * ! propios en su ID (p. ej. el carrito) los conserva. */
    .panel-emergente {
        --panel-header-alto: 80px;
        --panel-header-padding: 0.9rem 1rem;
        --panel-icono-tam: 42px;
        --panel-icono-radio: 13px;
    }

    /* Ancho completo: decisión por panel (el carrito lo hace a 480px). */
    #offcanvasFavoritos.panel-emergente,
    #offcanvasProductosRelacionados.panel-emergente {
        --panel-ancho: 100vw;
    }

    .panel-emergente .panel-emergente-titulo {
        font-size: 0.96rem;
    }

    #offcanvasFavoritos.panel-emergente .panel-emergente-subtitulo,
    #offcanvasProductosRelacionados.panel-emergente .panel-emergente-subtitulo {
        max-width: 230px;
        font-size: 0.69rem;
    }

    .panel-emergente .panel-emergente-contexto {
        padding-inline: 1rem;
    }

    .panel-emergente .panel-emergente-contexto small {
        display: none;
    }

    .panel-emergente .panel-emergente-body {
        padding: 0.8rem !important;
    }

    /* El responsive de la tarjeta de Favoritos (575.98px) vive en favoritos.css. */

}

@media (max-width: 380px) {

    #offcanvasFavoritos.panel-emergente .panel-emergente-subtitulo,
    #offcanvasProductosRelacionados.panel-emergente .panel-emergente-subtitulo {
        max-width: 180px;
    }

    /* El responsive de la tarjeta de Favoritos (380px) vive en favoritos.css. */
}

@media (prefers-reduced-motion: reduce) {

    .panel-emergente .panel-emergente-cerrar,
    .panel-emergente .panel-emergente-card,
    .panel-emergente .panel-emergente-card img,
    .panel-emergente .favorito-producto-imagen,
    .panel-emergente .producto-relacionado-imagen {
        animation: none !important;
        transition: none !important;
    }
}

/* * ==================================================
 * ROLES DE ACCIÓN COMPARTIDOS
 *
 * ! Lo compartido es la RECETA (color semántico, borde, fondo,
 * ! hover, active, disabled y transición). El tamaño y el radio
 * ! siguen siendo de cada panel: el botón de borrar del carrito
 * ! es de 38px y el de Favoritos de 34px a propósito.
 *
 * ! DESTRUCTIVO usa el token de peligro; nunca un rojo suelto.
 * ! AÑADIR usa --wod-add: es una acción de WorldOfDigital, no
 * ! "el verde de Xbox" (ver tokens-globales.css). P2C definirá
 * ! su color definitivo sin tocar a las plataformas.
 * ================================================== */

.panel-emergente .panel-emergente-accion {
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.panel-emergente .panel-emergente-accion:active:not(:disabled) {
    transform: scale(0.94);
}

.panel-emergente .panel-emergente-accion:disabled {
    opacity: 0.36;
    filter: saturate(0.5);
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

.panel-emergente .panel-emergente-accion>i {
    color: inherit;
}

/* ! ROL DESTRUCTIVO — eliminar producto, favorito o "todos". */
.panel-emergente .panel-emergente-accion--destructivo {
    color: var(--wod-danger-claro) !important;
    border: 1px solid rgba(var(--wod-danger-rgb), 0.56) !important;
    background: rgba(var(--wod-danger-rgb), 0.075) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.panel-emergente .panel-emergente-accion--destructivo:hover:not(:disabled) {
    color: #fff !important;
    border-color: rgba(255, 107, 122, 0.88) !important;
    background: rgba(var(--wod-danger-rgb), 0.19) !important;
    box-shadow: 0 6px 16px rgba(var(--wod-danger-rgb), 0.17) !important;
    transform: translateY(-1px);
}

/* ! ROL AÑADIR — acción WOD, desacoplada de la plataforma. */
.panel-emergente .panel-emergente-accion--add {
    color: var(--wod-add) !important;
    border: 1px solid rgba(var(--wod-add-rgb), 0.56) !important;
    background: rgba(var(--wod-add-rgb), 0.075) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.panel-emergente .panel-emergente-accion--add:hover:not(:disabled) {
    color: #fff !important;
    border-color: rgba(74, 222, 128, 0.88) !important;
    background: rgba(var(--wod-add-rgb), 0.19) !important;
    box-shadow: 0 6px 16px rgba(var(--wod-add-rgb), 0.17) !important;
    transform: translateY(-1px);
}

/* * ==================================================
 * COMPONENTE COMPARTIDO — BADGE DE PLATAFORMA
 *
 * ! Identidad SEMÁNTICA del producto: el color depende de
 * ! data-plataforma (dato del producto), nunca de body.theme-*.
 * ! Un producto Xbox se ve Xbox en el Carrito, en Favoritos,
 * ! en Relacionados o en cualquier panel futuro.
 *
 * ! La clase base define forma y tipografía; el atributo define
 * ! color, borde, fondo e icono. El texto se mantiene blanco a
 * ! propósito: garantiza contraste con todas las plataformas
 * ! (incluido el azul oscuro de PlayStation) y la identidad la
 * ! aportan el icono, el borde y el fondo teñido.
 *
 * ! Lo consumen paneles y el modal de acciones de Favoritos;
 * ! por eso vive en el sistema compartido y no en un panel.
 * ================================================== */

.badge-plataforma {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 20px;
    padding: 0.2rem 0.5rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.badge-plataforma>i {
    font-size: 0.92em;
}

.badge-plataforma[data-plataforma="xbox"] {
    border-color: rgba(var(--color-xbox-rgb), 0.45);
    background: rgba(var(--color-xbox-rgb), 0.14);
}

.badge-plataforma[data-plataforma="xbox"]>i {
    color: var(--color-xbox);
}

.badge-plataforma[data-plataforma="pc"] {
    border-color: rgba(var(--color-pc-rgb), 0.45);
    background: rgba(var(--color-pc-rgb), 0.14);
}

.badge-plataforma[data-plataforma="pc"]>i {
    color: var(--color-pc);
}

.badge-plataforma[data-plataforma="playstation"] {
    border-color: rgba(var(--color-ps-rgb), 0.55);
    background: rgba(var(--color-ps-rgb), 0.22);
}

.badge-plataforma[data-plataforma="playstation"]>i {
    color: #5aa9ff;
}

.badge-plataforma[data-plataforma="suscripciones"] {
    border-color: rgba(var(--color-suscripciones-rgb), 0.45);
    background: rgba(var(--color-suscripciones-rgb), 0.14);
}

.badge-plataforma[data-plataforma="suscripciones"]>i {
    color: var(--color-suscripciones);
}

/* Código aplicado: sustituye visualmente al formulario sin retirarlo del DOM. */
#offcanvasCarrito .carrito-codigo-activo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
}

#offcanvasCarrito .carrito-codigo-activo-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

#offcanvasCarrito .carrito-codigo-activo-info i {
    color: var(--primary-color, #00bf63);
}

#offcanvasCarrito .carrito-codigo-quitar {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
}

#offcanvasCarrito .carrito-codigo-quitar:hover {
    background: rgba(255, 255, 255, 0.08);
}