/* ============================================================
   Cartelera (Views/Cartelera/CarteleraV2.cshtml) — rediseño Figma
   Multiplex-WEB, node-id=815-36393 (desktop) / 815-38131 (mobile).

   CarteleraV2.cshtml/_StylesV2.cshtml son la vista base con theming
   dinámico (@bgColor, @pColor, etc.) compartida también por
   IndexV2.cshtml y CarteleraPorCategoriaV2.cshtml (mismo .v2-wrap).
   Por eso todo acá va scopeado a ".cartelera-v2" (clase agregada
   solo en esas dos vistas — no en IndexV2.cshtml) para no filtrar
   estilos a esa otra vista. No se toca _StylesV2.cshtml.

   CarteleraPorCategoriaV2.cshtml (rediseño Figma node-id=815-39220
   desktop / 815-41907 mobile) reutiliza esta misma clase ".cartelera-v2"
   a propósito — mismo encabezado, selector de complejo/día y grilla de
   películas que esta página. Lo específico de esa vista (variante de
   tarjeta "venta anticipada", etc.) vive en su propio
   carteleraporcategoria.css.
   ============================================================ */

.tema-multiplex .containerPpal > div .cartelera-v2 {
    padding-top: 40px;
}

.tema-multiplex .cartelera-v2 .v2-section {
    padding-left: 0;
    padding-right: 0;
}

/* Header original (título "Cartelera" + contador + botón "Ordenar
   por categoría"): no está en el Figma. Se oculta vía CSS — el
   markup/la lógica Razor quedan intactos. */
.tema-multiplex .cartelera-v2 .v2-section-header {
    display: none;
}

/* --- Encabezado nuevo: barra + "En Cartelera" + subtítulo --- */
.tema-multiplex .cartelera-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}

.tema-multiplex .cartelera-heading__bar {
    flex-shrink: 0;
    width: 8px;
    height: 32px;
    border-radius: 3px;
    background-color: #fbbe00;
    margin-top: 6px;
    display:none;
}

.tema-multiplex .cartelera-heading__title {
    /* Neutraliza el h1 genérico del sitio (.tema-multiplex h1 en body.css):
       trae su propia barra roja (::before) + padding-left — acá la barra
       ya la pone .cartelera-heading__bar (ámbar, según Figma). */
    padding-left: 0;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size: 38px;
    line-height: 44px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
}

    .tema-multiplex .cartelera-heading__title::before {
        /*content: none;*/
        background-color: #fbbe00 !important;
    }

    .tema-multiplex .cartelera-heading__title strong {
        font-weight: 700;
        color: #ffffff !important;
    }

/* Subtítulo debajo del título — usado por CarteleraPorCategoriaV2.cshtml (Cartelera/CarteleraV2
   no lo usa, pero la regla no molesta ahí: solo aplica si el <p> existe en el markup). */
.tema-multiplex .cartelera-heading__subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 28.8px;
    color: #ffffff !important;
    margin: 6px 0 0;
}

/* --- Label + icono ("Seleccioná tu complejo" / "Seleccioná el día de tu función") --- */
.tema-multiplex .cartelera-date-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin-bottom: 16px;
}

    .tema-multiplex .cartelera-date-label i {
        color: #fbbe00 !important;
        font-size: 16px;
    }

/* --- Tira de días: recolor a la paleta ámbar del Figma --- */
.tema-multiplex .cartelera-v2 .v2-dstrip-wrap {
    margin-bottom: 45px;
}

.tema-multiplex .cartelera-v2 .v2-dchip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 121px;
}
    .tema-multiplex .cartelera-v2 .v2-dchip .v2-dc-d {
        font-size: 18px;
        margin: 0;
        line-height: 22.5px;
    }

    .tema-multiplex .cartelera-v2 .v2-dchip .v2-dc-sub {
        line-height: 22.5px;
    }

.tema-multiplex .cartelera-v2 .v2-dchip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(251, 190, 0, 0.5);
}

.tema-multiplex .cartelera-v2 .v2-dc-d,
.tema-multiplex .cartelera-v2 .v2-dc-n,
.tema-multiplex .cartelera-v2 .v2-dc-sub {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400;
}

.tema-multiplex .cartelera-v2 .v2-dc-n,
.tema-multiplex .cartelera-v2 .v2-dc-sub {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7) !important;
}

.tema-multiplex .cartelera-v2 .v2-dchip:hover .v2-dc-d,
.tema-multiplex .cartelera-v2 .v2-dchip:hover .v2-dc-sub {
    color: rgba(255, 255, 255, 0.9) !important;
}

.tema-multiplex .cartelera-v2 .v2-dchip.today:not(.on) .v2-dc-d {
    color: #fbbe00 !important;
}

.tema-multiplex .cartelera-v2 .v2-dchip.on {
    background: #fbbe00;
    border-color: #fbbe00;
    box-shadow: 0 10px 15px -3px rgba(251, 190, 0, 0.2), 0 4px 6px -4px rgba(251, 190, 0, 0.3);
}

    .tema-multiplex .cartelera-v2 .v2-dchip.on .v2-dc-d,
    .tema-multiplex .cartelera-v2 .v2-dchip.on .v2-dc-n,
    .tema-multiplex .cartelera-v2 .v2-dchip.on .v2-dc-sub,
    .tema-multiplex .cartelera-v2 .v2-dchip.on .v2-dc-tag {
        color: #1e0a21 !important;
        font-weight: 400;
    }
.tema-multiplex .v2-dchip.v2-dchip-all {
    display: none;
}

.tema-multiplex .cartelera-v2 .v2-dc-tag {
    background: #1e0a21;
}

.tema-multiplex .cartelera-v2 .v2-dstrip-arr {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

    .tema-multiplex .cartelera-v2 .v2-dstrip-arr:hover {
        background: #fbbe00;
        border-color: #fbbe00;
        color: #1e0a21;
    }

/* Degradado del borde derecho: solo debe verse cuando efectivamente hay
   más contenido oculto para ese lado (mismo momento en que initHScroll
   muestra la flecha derecha, sacándole la clase "hidden"). Si no, quedaba
   un degradado fantasma incluso cuando ya entraban todos los chips. */
.tema-multiplex .cartelera-v2 .v2-dstrip-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 64px;
    background: linear-gradient(to left, #490404, rgba(73, 4, 4, 0));
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s;
}

.tema-multiplex .cartelera-v2 .v2-dstrip-wrap:has(.v2-dstrip-arr.right:not(.hidden))::after {
    opacity: 1;
}

/* --- Selector de complejo: mismas tabs .v2-ctab de siempre (data-cod +
   v2PickTab), con el mismo tratamiento visual en desktop y mobile — pills
   ámbar en una fila que scrollea horizontalmente si no entran todas. --- */
.tema-multiplex .cartelera-v2 .v2-ctabs {
    /*display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;*/
    border-bottom: none;
    padding: 0;
    gap: 10px;
}

    .tema-multiplex .cartelera-v2 .v2-ctabs::-webkit-scrollbar {
        display: none;
    }

.tema-multiplex .cartelera-v2 .v2-ctab {
    flex-shrink: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 13px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.tema-multiplex .cartelera-v2 .v2-ctab.on {
    background: #fbbe00;
    border-color: #fbbe00;
    color: #1e0a21;
    box-shadow: 0 10px 15px -3px rgba(251, 190, 0, 0.2), 0 4px 6px -4px rgba(251, 190, 0, 0.3);
}

.tema-multiplex .cartelera-v2 .v2-ctab-n {
    display: none;
}

/* --- Grilla de películas --- */
.tema-multiplex .cartelera-v2 .v2-movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.tema-multiplex .cartelera-v2 .v2-mcard {
    background-color: #830202;
    border-color: #c00;
    border-radius: 12px;
}

/* Sombreado permanente en el pie del póster (legibilidad de los
   badges de formato, siempre visibles — no solo al hacer hover). */
.tema-multiplex .cartelera-v2 .v2-mposter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badges de formato (2D / 3D / Platinum / Xtremo, etc.): antes un
   único texto combinado, ahora una badge por formato — se acomodan
   solas en filas de abajo hacia arriba según el ancho disponible. */
.tema-multiplex .cartelera-v2 .v2-mfmt {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: none;
    border: none;
    padding: 0;
    backdrop-filter: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    z-index: 2;
}

.tema-multiplex .cartelera-v2 .v2-mfmt-badge {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 13px;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.tema-multiplex .cartelera-v2 .v2-mcard-info {
    padding: 14px 16px 18px;
}

.tema-multiplex .cartelera-v2 .v2-mc-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.5px;
    line-height: 1.25;
    margin-bottom: 12px;
    color: #ffffff !important;
}

/* Meta: antes "Género · Tecnologías", ahora "Duración · Género" con
   ícono (las tecnologías pasaron a los badges del póster). */
.tema-multiplex .cartelera-v2 .v2-mc-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 16px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8) !important;
}

.tema-multiplex .cartelera-v2 .v2-metadot {
    display: none;
}

.tema-multiplex .cartelera-v2 .cartelera-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .tema-multiplex .cartelera-v2 .cartelera-meta-item i {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 13px;
    }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .tema-multiplex .cartelera-heading {
        margin-bottom: 20px;
    }

    .tema-multiplex .cartelera-heading__title {
        font-size: 28px;
        line-height: 34px;
    }

    .tema-multiplex .cartelera-heading__subtitle {
        font-size: 16px;
        line-height: 23px;
    }

    .tema-multiplex .cartelera-v2 .v2-dstrip-wrap {
        margin-bottom: 24px;
    }

    .tema-multiplex .cartelera-v2 .v2-movie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    .tema-multiplex .cartelera-v2 .v2-mc-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .tema-multiplex .cartelera-v2 .v2-mcard-info {
        padding: 12px 14px 14px;
    }

    .tema-multiplex .cartelera-v2 .v2-mc-meta {
        gap: 12px;
        font-size: 13px;
    }
}