/* ==========================================================================
   VARIABLES DE COLOR Y DISEÑO
   ========================================================================== */
.paradox-booking-widget {
    --purple: #7927CD;
    --cyan: #02C2FF;
    --orange-start: #FF7700;
    --orange-end: #F6A965;
    --white: #ffffff;
    --border-light: rgba(255, 255, 255, 0.3);
    --error: #c03f3f;
}

/* Contenedor Principal (Fondo transparente) */
.booking-container {
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-family: "Museum", "Inter", sans-serif;
    width: 100%;
}

.booking-badge, .price-legend {
    display: none !important;
}

/* Fila superior: título + selector de sede */
.booking-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

/* Título Principal */
.booking-header {
    font-size: 32px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.booking-header-step { color: var(--cyan); }
.booking-header-rest { color: var(--white); }

/* Selector de sede — fila debajo del header, alineada a la DERECHA.
   MISMO formato exacto que el widget bar (.pbb-campo.pbb-order-sede). */
.booking-sede-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 22px;
}
.booking-sede-switch {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
}
.booking-sede-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0;
}

/* Selector (306 x 48, gris claro, radio 6) — idéntico a .pbb-selector-sede */
.booking-sede-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 306px;
    height: 48px;
    padding: 0 16px;
    box-sizing: border-box;
    border: none;
    border-radius: 6px;
    background: #BDBBBB;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.booking-sede-selector:hover { background: #CDCCCC; }
.booking-sede-selector--static { cursor: default; }
.booking-sede-selector--static:hover { background: #BDBBBB; }
.booking-sede-pin { flex: 0 0 auto; color: #E53935; }
.booking-sede-chevron { flex: 0 0 auto; color: #333333; }
.booking-sede-valor {
    flex: 1 1 auto;
    min-width: 0;
    color: #333333;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.booking-sede-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 306px;
    max-height: 240px;
    overflow-y: auto;
    background: #2B2B2B;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 20;
    display: none;
}
.booking-sede-dropdown.abierto { display: block; }
.booking-sede-opcion {
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.booking-sede-opcion:hover { background: rgba(255,255,255,0.08); }
.booking-sede-opcion.seleccionada { background: rgba(255, 119, 0, 0.18); }

.booking-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.booking-step-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.booking-step-label .step-letter { color: var(--cyan); }

/* ==========================================================================
   1. FECHAS
   ========================================================================== */
.date-picker-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 5px 14px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
}
.date-picker-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.date-picker-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.date-pill {
    flex: 0 0 auto;
    width: 100%;
    max-width: 98px;
    height: 122px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    padding-bottom: 25px;
}

.date-pill:hover:not(.sold-out):not(.selected):not(.past) {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.6);
}
.date-pill:hover:not(.sold-out):not(.selected):not(.past) .day-number,
.date-pill:hover:not(.sold-out):not(.selected):not(.past) .day-name,
.date-pill:hover:not(.sold-out):not(.selected):not(.past) .month-name {
    color: var(--purple);
}

.date-pill.selected {
    background: var(--white);
    border-color: var(--white);
}

.date-pill .day-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
}

.date-pill .day-name, .date-pill .month-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

.date-pill.selected .day-number,
.date-pill.selected .day-name,
.date-pill.selected .month-name {
    color: var(--purple);
}

.date-pill .price-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 0;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.date-pill .price-badge.preventa {
    background: var(--purple);
    color: var(--white);
}

.date-pill .price-badge.regular {
    background: var(--cyan);
    color: var(--white);
}

.date-pill .price-badge.agotado {
    background: var(--error);
    color: var(--white);
}

.date-pill.sold-out {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0,0,0,0.5);
}

/* Fechas pasadas (ayer / la hora ya se cumplió) -> rojo opaco, badge AGOTADO,
   sin morado en hover, igual que las fechas sin stock. */
.date-pill.past {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(192, 63, 63, 0.22);
    border-color: rgba(192, 63, 63, 0.55);
}
.date-pill.past .day-number,
.date-pill.past .day-name,
.date-pill.past .month-name {
    color: rgba(255, 200, 200, 0.85);
}
.date-pill.past:hover:not(.selected) {
    background: rgba(192, 63, 63, 0.30);
    border-color: rgba(192, 63, 63, 0.75);
}
.date-pill.past:hover:not(.selected) .day-number,
.date-pill.past:hover:not(.selected) .day-name,
.date-pill.past:hover:not(.selected) .month-name {
    color: #ffb3b3;
}

.scroll-hint {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
    margin-top: 4px;
}

/* Nota de preventa — aparece arriba de cada tipo de entrada cuando el
   evento está en preventa. Se oculta desde JS cuando is_preventa = false. */
.ticket-preventa-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 7px 14px;
    background: rgba(192, 63, 63, 0.22);
    border: 1.5px solid rgba(192, 63, 63, 0.7);
    border-radius: 10px;
    color: #ffb3b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
}
.ticket-preventa-note.hidden { display: none; }
.ticket-preventa-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error);
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.9);
    flex-shrink: 0;
    animation: ppPreventaPulse 1.4s ease-in-out infinite;
}
@keyframes ppPreventaPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* ==========================================================================
   2. TURNOS
   ========================================================================== */
.shift-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.product-turno-btn {
    flex: 1 1 calc(50% - 15px);
    max-width: 100%;
    height: 92px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-turno-btn:hover:not(.selected) {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.6);
}
.product-turno-btn:hover:not(.selected) span:first-child,
.product-turno-btn:hover:not(.selected) .text-muted {
    color: var(--purple);
}

.product-turno-btn.selected {
    background: var(--white);
    border-color: var(--white);
}

.product-turno-btn span:first-child {
    font-size: 26px;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
}

.product-turno-btn .text-muted {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

.product-turno-btn.selected span:first-child,
.product-turno-btn.selected .text-muted {
    color: var(--purple);
}

/* ==========================================================================
   3. ENTRADAS
   ========================================================================== */
.ticket-row {
    width: 100%;
    max-width: 100%;
    min-height: 116px;
    border: 2px solid var(--border-light);
    border-radius: 18px;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.ticket-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.6);
}
.ticket-row:hover .ticket-nombre {
    color: var(--purple);
}

.ticket-row.has-qty {
    border-color: var(--purple);
    background: rgba(121, 39, 205, 0.10);
}

.ticket-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ticket-nombre {
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ticket-subtitulo {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
}

.ticket-price-row .ticket-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}

.ticket-row > div:last-child {
    display: flex;
    align-items: center;
    gap: 20px;
}

.qty-display {
    font-size: 32px;
    font-weight: 800;
    color: var(--white);
    width: 30px;
    text-align: center;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--purple);
    background: transparent;
    color: var(--purple);
    font-size: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qty-btn:hover {
    background: var(--purple);
    color: var(--white);
}

/* Estado deshabilitado para los steppers +/−. Se activa cuando el cap del
   tipo de entrada (ej. grupal -> max_qty=1) ya fue alcanzado. Apply tanto
   para widget grande (.pqty-plus/.pqty-minus) como bar (.pbb-ticket-qty-btn). */
.qty-btn[disabled],
.pqty-plus[disabled],
.pqty-minus[disabled],
.paradox-booking-bar .pbb-ticket-qty-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    color: var(--purple);
}

/* ==========================================================================
   BOTÓN DE COMPRA
   ========================================================================== */
.btn-cta-solid {
    width: 100%;
    min-height: 71px;
    height: auto;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--orange-start), var(--orange-end));
    color: #000000;
    font-size: 26px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.3s ease;
    margin-top: 20px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Estado apagado: cuando faltan selecciones, sin animación, opaco. */
.btn-cta-solid:not(.active) {
    animation: none !important;
    box-shadow: none !important;
    opacity: 0.5;
    pointer-events: none;
}

/* Estado activo: el botón cobra vida con el pulso aurora naranja. */
.btn-cta-solid.active {
    opacity: 1;
    pointer-events: auto;
    -webkit-animation: pulsoAuroraNaranja 2s ease-out infinite !important;
    animation: pulsoAuroraNaranja 2s ease-out infinite !important;
}
.btn-cta-solid.active:hover {
    filter: brightness(1.15) !important;
}

@-webkit-keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}

@keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}

/* ==========================================================================
   Spinner del boton COMPRAR mientras se procesa el AJAX.
   Replica del .btn-loader de paradox-checkout.css (que solo se carga en
   la pagina de checkout) — aqui lo definimos para que funcione en la
   pagina del evento donde vive el booking bar.
   ========================================================================== */
.pbb-comprar .btn-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2.5px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.error-msg {
    color: var(--error);
    font-size: 12px;
    font-weight: 700;
    display: none;
}
.error-msg.visible {
    display: block;
}
.stock-indicator {
    font-size: 14px;
    color: var(--white);
    margin-top: 10px;
}
.stock-indicator span.text-gold {
    color: var(--cyan);
}

/* ==========================================================================
   MEDIA QUERIES - TABLET (Hasta 1024px)
   ========================================================================== */
@media (max-width: 767px) {
    .booking-container { gap: 1.2rem; }
    .booking-top-row { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Ajuste de títulos para que no ocupen tanta pantalla */
    .booking-header { font-size: 18px; margin-bottom: 0px; line-height: 1.2; }

    /* Selector de sede en móvil: ancho completo, debajo del header */
    .booking-sede-row { justify-content: stretch; }
    .booking-sede-switch { align-items: flex-start; width: 100%; }
    .booking-sede-selector { width: 100%; min-width: 0; }
    .booking-sede-dropdown { width: 100%; min-width: 0; }
    .booking-step-label { font-size: 11px; margin-bottom: 6px; }

    /* Fechas (Pills): Más compactas y estilizadas */
    .date-pill {
        max-width: 65px;
        height: 80px;
        padding-bottom: 18px;
        border-radius: 8px;
    }
    .date-pill .day-number { font-size: 20px; }
    .date-pill .day-name, .date-pill .month-name { font-size: 9px; }
    .date-pill .price-badge { font-size: 8px; bottom: 4px; left: 4px; right: 4px; padding: 3px 0; }

    /* Turnos: Ligeramente más delgados */
    .shift-grid { gap: 10px; }
    .product-turno-btn {
        flex: 1 1 45%;
        height: 55px;
        border-radius: 10px;
    }
    .product-turno-btn span:first-child { font-size: 14px; }
    .product-turno-btn .text-muted { font-size: 9px; }

    /* Tarjetas de entradas: vuelven al formato HORIZONTAL como en
       escritorio (no más cuadrados con emoji 🎟️). Letra pequeña para
       encajar con el resto del widget responsive, salvo los botones
       +/− que crecen para que los dedos no sufran. */
    #section-tickets {
        display: block;          /* anula el grid 2x2 cuadrado */
        gap: 0;
    }
    .ticket-row {
        display: flex;
        flex-direction: row;        /* horizontal, como escritorio */
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        min-height: 60px;
        aspect-ratio: auto;         /* SIN formato cuadrado */
        text-align: left;
        position: static;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    /* Icono/imagen decorativa arriba de cada tarjeta (emoji ticket) */
    .ticket-row::before {
        content: none;              /* sin emoji decorativo */
        display: none;
    }

    .ticket-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .ticket-nombre {
        font-size: 11px;
        line-height: 1.15;
        text-align: left;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .ticket-subtitulo {
        font-size: 9px;
        text-align: left;
        line-height: 1.2;
    }

    /* Contenedor de Precio y Botones (+/-): alineado a la DERECHA, sin
       estirarse a todo el ancho como en el formato cuadrado. */
    .ticket-row > div:last-child {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        flex: 0 0 auto;
        gap: 6px;
        margin-top: 0;
    }

    /* Precio alineado a la derecha, letra pequeña (era "precio de
       preventa" gigante). REDUCIDO aún más en móvil. */
    .ticket-price-row { margin-right: 0; }
    .ticket-price-row .ticket-price { font-size: 11px; font-weight: 800; }

    /* Controles de cantidad: REDUCIDOS para que no se vean enormes en
       móvil. Sigue siendo cómodo para el dedo (34px) pero ya no come
       espacio al texto. */
    .qty-display {
        font-size: 15px;
        width: 18px;
        font-weight: 800;
    }
    .qty-btn {
        width: 34px;
        height: 34px;
        font-size: 17px;
        border-radius: 7px;
    }

    /* Banner de preventa: la etiqueta roja de preventa era muy grande.
       Más pequeña, con menos padding para que no domine la pantalla. */
    .ticket-preventa-note {
        font-size: 9px;
        padding: 6px 10px;
        gap: 6px;
        letter-spacing: 0.03em;
    }

    /* Botón final de compra */
    .btn-cta-solid {
        font-size: 15px;
        min-height: 55px;
        border-radius: 12px;
        padding: 10px 15px;
        margin-top: 10px;
    }

    /* ================================================================
       Widget bar (paradox-booking-bar) — responsive mobile
       Cambios solicitados 29-ago-2026:
       - Titulo: <br> despues de 'COMPRA' (interrumpe la primera palabra)
       - Titulo: 20px / line-height 28px
       - Subtitulos (.pbb-label): 12px / line-height 38px / Inter weight 500
       - Solo afecta a responsive (max-width: 767px), desktop intacto
       ================================================================ */
    .paradox-booking-bar .pbb-titulo {
        font-size: 20px;
        line-height: 28px;
        margin: 0 0 18px;
    }
    .paradox-booking-bar .pbb-titulo br.pbb-titulo-break { display: inline; }
    .paradox-booking-bar .pbb-label {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 38px;
    }
    .paradox-booking-bar .pbb-titulo br.pbb-titulo-break { display: inline; }
}

/* ==========================================================================
   TABLET (≤1024px): tarjetas HORIZONTALES como en escritorio pero con
   letra pequeña (consistente con el resto del responsive). Botones
   +/- crecen más todavía para dedos en pantalla mediana.
   ========================================================================== */
@media (max-width: 1024px) {
    #section-tickets {
        display: block;            /* anula el grid 2x2 cuadrado */
        gap: 0;
    }
    /* Ticket: contenido aún más compacto en responsive. Tipografías reducidas
       ~15-18% para que las tarjetas no se vean enormes en mobile/tablet.
       Botones +/- ligeramente más pequeños para guardar dedos sin tapar
       información. */
    .ticket-row {
        display: flex;
        flex-direction: row;        /* horizontal */
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        min-height: 58px;
        aspect-ratio: auto;         /* SIN formato cuadrado */
        text-align: left;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    .ticket-row::before {
        content: none;              /* sin emoji decorativo */
        display: none;
    }
    .ticket-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .ticket-nombre {
        font-size: 11px;
        line-height: 1.15;
        text-align: left;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .ticket-subtitulo { font-size: 9px; text-align: left; line-height: 1.2; }
    .ticket-row > div:last-child {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 0;
    }
    .ticket-price-row { margin-right: 0; }
    .ticket-price-row .ticket-price { font-size: 13px; font-weight: 800; }
    .qty-display { font-size: 16px; width: 20px; font-weight: 800; }
    .qty-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 7px;
    }
}



.paradox-booking-bar {
    --pbb-gris: #807E7E;
    --pbb-gris-hover: #8D8B8B;
    --pbb-gris-claro: #BDBBBB;
    --pbb-gris-claro-hover: #CDCCCC;
    --pbb-naranja-ini: #FF7700;
    --pbb-naranja-fin: #F6A965;
    --pbb-texto-sede: #333333;
    --pbb-purple: #7927CD;
    --pbb-border-light: rgba(255, 255, 255, 0.3);
    font-family: "Museum", "Inter", sans-serif;
    width: 100%;
}
.paradox-booking-bar .pbb-titulo {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 24px;
}
/* Salto de línea responsive: oculto en desktop, visible en mobile (max-width: 767px) */
.paradox-booking-bar .pbb-titulo br.pbb-titulo-break { display: none; }

/* ===== Contenedor único de todo (permite reordenar con flex order) ===== */
.paradox-booking-bar .pbb-main-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
}
.paradox-booking-bar .pbb-order-fecha  { order: 1; }
.paradox-booking-bar .pbb-order-turno  { order: 2; }
.paradox-booking-bar .pbb-comprar.pbb-order-comprar { order: 3; }
.paradox-booking-bar .pbb-tickets-section.pbb-order-tickets { order: 4; flex: 0 0 auto; }
.paradox-booking-bar .pbb-order-sede   { order: 5; align-self: flex-start; max-width: 306px; }

.paradox-booking-bar .pbb-campo {
    position: relative;
    flex: 0 0 auto;
}
.paradox-booking-bar .pbb-label {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.paradox-booking-bar .pbb-label-invisible {
    visibility: hidden;
}

/* ===== Cajas con las medidas del diseño: 306 x 48, radio 6 ===== */
.paradox-booking-bar .pbb-selector {
    width: 306px;
    height: 48px;
    border-radius: 6px;
    background: var(--pbb-gris);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.paradox-booking-bar .pbb-selector:hover { background: var(--pbb-gris-hover); }
.paradox-booking-bar .pbb-selector .pbb-valor {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: left;
}
.paradox-booking-bar .pbb-icono { flex: 0 0 auto; color: #ffffff; }

/* Caja de sede (clara, texto oscuro) */
.paradox-booking-bar .pbb-selector-sede { background: var(--pbb-gris-claro); }
.paradox-booking-bar .pbb-selector-sede:hover { background: var(--pbb-gris-claro-hover); }
.paradox-booking-bar .pbb-selector-sede .pbb-valor { color: var(--pbb-texto-sede); font-weight: 600; }
.paradox-booking-bar .pbb-chevron-sede { color: var(--pbb-texto-sede); }

/* Botón COMPRAR */
.paradox-booking-bar .pbb-comprar {
    height: 48px;
    min-width: 200px;
    padding: 0 40px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--pbb-naranja-ini), var(--pbb-naranja-fin));
    color: #000000;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.paradox-booking-bar .pbb-comprar:hover { opacity: 0.92; }
.paradox-booking-bar .pbb-comprar:active { transform: scale(0.98); }
.paradox-booking-bar .pbb-comprar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    animation: none !important;
    box-shadow: none !important;
}
.paradox-booking-bar .pbb-comprar:not(:disabled) {
    -webkit-animation: pulsoAuroraNaranja 2s ease-out infinite !important;
    animation: pulsoAuroraNaranja 2s ease-out infinite !important;
}
.paradox-booking-bar .pbb-comprar:not(:disabled):hover {
    opacity: 1;
    filter: brightness(1.15) !important;
}

@-webkit-keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}
@keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}

/* ===== Sección de tipos de entrada (desplegable "Escoger entradas") ===== */
.paradox-booking-bar .pbb-tickets-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.paradox-booking-bar .pbb-tickets-section > .pbb-label {
    margin-bottom: 8px;
}
.paradox-booking-bar .pbb-tickets-field {
    flex: 0 0 auto;
}
.paradox-booking-bar .pbb-selector-tickets {
    /* hereda los estilos de .pbb-selector (306x48, mismo gris) */
}

/* ===== Dropdown desplegado: negro con nebulosa morada desde la izquierda ===== */
.paradox-booking-bar .pbb-tickets-dropdown {
    background: transparent;
    border-radius: 6px;
    padding: 0;
    max-height: none;
    overflow: visible;
}
.paradox-booking-bar .pbb-tickets-dropdown.abierto {
    display: block;
    background-color: #000000 !important;
    background-image: radial-gradient(
        ellipse 55% 70% at 10% 50%,
        rgba(174, 109, 240, 0.65) 0%,
        rgba(121, 39, 205, 0.45) 45%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    padding: 14px;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ===== Filas estilo "CANTIDAD DE ENTRADAS" del evento_booking =====
   Tarjeta con borde, hover sutil, borde morado cuando tiene cantidad. */
.paradox-booking-bar .pbb-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.paradox-booking-bar .pbb-ticket-row-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 56px;
    border: 2px solid var(--pbb-border-light);
    border-radius: 12px;
    background: transparent;
    box-sizing: border-box;
    transition: all 0.25s ease;
}
.paradox-booking-bar .pbb-ticket-row-dropdown:hover {
    background: rgba(121, 39, 205, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}
.paradox-booking-bar .pbb-ticket-row-dropdown.has-qty {
    border-color: var(--pbb-purple);
    background: rgba(121, 39, 205, 0.15);
}

/* Bloque de info del tipo de entrada (titulo + subtitulo).
   El wrapper se vuelve el flex item; el nombre y el subtitulo
   se apilan verticalmente adentro, mismo patron visual que
   el widget grande (.ticket-info / .ticket-nombre / .ticket-subtitulo). */
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Nombre del tipo de entrada */
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subtitulo del tipo de entrada (descripcion del repeater pb_entradas).
   Mismo tamano y color tenue que .ticket-subtitulo del widget grande. */
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-subtitulo {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Controles +/− (mismo concepto que .qty-btn del evento_booking) */
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-qty-btn:hover {
    background: #ffffff;
    color: var(--pbb-purple);
}
.paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-qty-value {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    width: 22px;
    text-align: center;
}

/* ===== Barra desplegable ===== */
.paradox-booking-bar .pbb-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 306px;
    max-height: 240px;
    overflow-y: auto;
    background: #2B2B2B;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: none;
}
.paradox-booking-bar .pbb-dropdown.abierto { display: block; }
.paradox-booking-bar .pbb-opcion {
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background 0.15s ease;
}
.paradox-booking-bar .pbb-opcion:hover { background: rgba(255, 255, 255, 0.08); }
.paradox-booking-bar .pbb-opcion.seleccionada { background: rgba(255, 119, 0, 0.18); }
.paradox-booking-bar .pbb-opcion.deshabilitada { opacity: 0.35; cursor: not-allowed; }

/* Fechas pasadas (ayer / la hora ya pasó) en el dropdown: rojo opaco, sin morado */
.paradox-booking-bar .pbb-opcion.past {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(192, 63, 63, 0.18);
    color: rgba(255, 200, 200, 0.85);
}
.paradox-booking-bar .pbb-opcion.past:hover {
    background: rgba(192, 63, 63, 0.30);
    color: #ffb3b3;
}

.paradox-booking-bar .pbb-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.paradox-booking-bar .pbb-badge.preventa { background: #7927CD; color: #ffffff; }
.paradox-booking-bar .pbb-badge.regular  { background: #02C2FF; color: #ffffff; }
.paradox-booking-bar .pbb-badge.agotado  { background: #c03f3f; color: #ffffff; }

.paradox-booking-bar .pbb-dropdown::-webkit-scrollbar { width: 8px; }
.paradox-booking-bar .pbb-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

/* =========================================================
   RESPONSIVE — solo afecta a partir de 767px, igual que
   el diseño original. Todo lo de arriba (desktop/tablet
   ancho) queda intacto.
   ========================================================= */


@media (max-width: 1024px) {
    .paradox-booking-bar .pbb-titulo { font-size: 20px; margin-bottom: 18px; text-align: center; }

    .paradox-booking-bar .pbb-main-row {
        flex-direction: column;
        align-items: center;
    }

    /* Mismo ancho máximo para TODO en móvil */
    .paradox-booking-bar .pbb-campo,
    .paradox-booking-bar .pbb-tickets-section,
    .paradox-booking-bar .pbb-tickets-field,
    .paradox-booking-bar .pbb-selector,
    .paradox-booking-bar .pbb-dropdown,
    .paradox-booking-bar .pbb-comprar,
    .paradox-booking-bar .pbb-ticket-row-dropdown {
        width: 100%;
        max-width: 306px;
    }
    .paradox-booking-bar .pbb-comprar { min-width: 0; }

    .paradox-booking-bar .pbb-label { text-align: center; }
    .paradox-booking-bar .pbb-tickets-section { align-items: center; }
    .paradox-booking-bar .pbb-tickets-list { align-items: stretch; }

    /* Orden explícito para móvil: fecha, turno, tickets, sede, comprar-al-final.
       Se usan números (no 0) para que gane siempre, sin depender de cascada. */
    .paradox-booking-bar .pbb-order-fecha  { order: 1; align-self: center; }
    .paradox-booking-bar .pbb-order-turno  { order: 2; align-self: center; }
    .paradox-booking-bar .pbb-tickets-section.pbb-order-tickets { order: 3; align-self: center; }
    .paradox-booking-bar .pbb-order-sede   { order: 4; align-self: center; max-width: 306px; }
    .paradox-booking-bar .pbb-comprar.pbb-order-comprar { order: 5; align-self: center; }

    /* Filas del dropdown más compactas en móvil */
    .paradox-booking-bar .pbb-ticket-row-dropdown {
        padding: 8px 12px;
        min-height: 48px;
        gap: 8px;
    }
    .paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-name {
        font-size: 13px;
    }
    .paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-subtitulo {
        font-size: 10px;
    }
    .paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-qty-btn {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }
    .paradox-booking-bar .pbb-ticket-row-dropdown .pbb-ticket-qty-value {
        font-size: 18px;
        width: 18px;
    }
}