/* ==========================================================
   evento-responsive.css
   Media queries para hacer responsiva la pagina de evento.
   No modifica el CSS original — solo sobreescribe dentro
   de media queries.
   ========================================================== */

/* ----------------------------------------------------------
   DESKTOP — crece el #contenedor hasta 1440px (igual que el
   resto del sitio).
   ---------------------------------------------------------- */
#contenedor {
    width: 100% !important;
    max-width: 1440px !important;
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   DESKTOP — header crece hasta 1440px con menú proporcional
   (solo aplica >= 981px; en mobile se mantiene el menú actual)
   ---------------------------------------------------------- */
@media screen and (min-width: 981px) {

    header {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: flex-start;
        flex-wrap: nowrap;
        height: auto !important;
    }

    header .header-top {
        flex: 0 0 320px;
        width: 320px;
        min-height: 100px;
    }

    header>nav {
        flex: 1 1 auto !important;
        width: auto !important;
        margin-left: 10px !important;
        min-width: 0;
        height: 100px;
        box-sizing: border-box;
        float: none !important;
    }

    /* Banner slider promocional dentro del nav */
    header>nav>section.banner {
        width: 100% !important;
        height: 49px !important;
        margin: 0 !important;
        display: block;
        position: relative;
    }

    header>nav>section.banner>#sliderIzq {
        width: 100% !important;
        height: 49px !important;
    }

    header>nav>section.banner>#controllerIzq {
        margin-left: 0 !important;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 5;
    }

    /* Buscador conserva su ancho fijo */
    header>nav>form {
        float: left;
        width: 179px;
        margin: 1px 0 0 0;
    }

    /* Primer UL crece para llenar la fila */
    header>nav>ul:nth-of-type(1) {
        width: calc(100% - 180px) !important;
        height: 25px;
        margin-top: 1px;
        margin-left: 1px !important;
        padding: 0;
        float: left;
        display: flex;
        box-sizing: border-box;
    }

    header>nav>ul:nth-of-type(1)>li {
        flex: 1 1 0;
        width: auto !important;
        height: 20px;
        padding-top: 5px;
        margin-left: 1px;
    }

    header>nav>ul:nth-of-type(1)>li:first-child {
        margin-left: 0;
    }

    /* Segundo UL crece a 100% del nav */
    header>nav>ul:nth-of-type(2) {
        width: 100% !important;
        height: 25px;
        display: flex;
        float: left;
        clear: both;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header>nav>ul:nth-of-type(2)>li {
        width: auto !important;
        height: 20px;
        padding-top: 5px;
        margin: 0;
    }

    header>nav>ul:nth-of-type(2)>li+li {
        margin-left: 1px;
    }

    /* Proporciones originales del menú principal */
    header>nav .auditorio {
        flex: 87 0 0;
    }

    header>nav .programacion {
        flex: 106 0 0;
    }

    header>nav .localidades {
        flex: 94 0 0;
    }

    header>nav .patrocinadores {
        flex: 111 0 0;
    }

    header>nav .como {
        flex: 96 0 0;
    }

    header>nav .enlaces {
        flex: 70 0 0;
    }

    header>nav .contacto {
        flex: 80 0 0;
    }

    /* Stacking context para que los dropdowns floten sobre el contenido */
    header>nav .auditorio,
    header>nav .localidades,
    header>nav .como,
    header>nav .patrocinadores {
        position: relative;
        z-index: 50;
    }

    /* Dropdowns: ancho del padre + altura libre por contenido */
    header>nav li .primero,
    header>nav li .segundo,
    header>nav li .tercero,
    header>nav li .cuarto {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box;
        padding: 4px 0 !important;
    }

    header>nav li .primero li,
    header>nav li .segundo li,
    header>nav li .tercero li,
    header>nav li .cuarto li {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        padding: 8px !important;
        white-space: normal;
        line-height: 1.3;
        box-sizing: border-box;
    }

    /* ============================================================
	   DESKTOP — article y secciones internas crecen al 100% (1440px)
	   Layout grid 3 columnas (33.33% cada una), 3 filas:
	   Row 1: .fotoGde (img, span 2 cols) | .info (detalles, 1 col)
	   Row 2: .infoBot (mapa, span 2 cols) | .infoCostos (precios, 1 col)
	   Row 3: titRec (horario) | moduloImg (redes) | aside
	   ============================================================ */
    article {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-areas:
            "fotoGde fotoGde info"
            "infoBot infoBot infoCostos"
            "horario redes aside" !important;
        gap: 10px !important;
        align-items: stretch !important;
        background-size: cover;
        background-position: center top;
    }

    /* Asignar grid-areas a las secciones */
    article>.fotoGde {
        grid-area: fotoGde !important;
    }

    article>.info {
        grid-area: info !important;
    }

    article>.infoBot {
        grid-area: infoBot !important;
    }

    article>.infoCostos {
        grid-area: infoCostos !important;
    }

    article>aside {
        grid-area: aside !important;
    }

    /* La sección .txtRecomendaciones se aplana para que sus 2 hijos
	   (.titRecomendaciones con HORARIO + .moduloImg con Redes) se
	   vuelvan grid items independientes y ocupen una columna cada uno */
    article>.txtRecomendaciones {
        display: contents !important;
    }

    article>.txtRecomendaciones>.titRecomendaciones {
        grid-area: horario !important;
    }

    article>.txtRecomendaciones>.moduloImg {
        grid-area: redes !important;
    }

    /* Estilos comunes a todas las secciones */
    article>.fotoGde,
    article>.infoBot,
    article>.infoCostos,
    article>.info,
    article>aside,
    article>.txtRecomendaciones>.titRecomendaciones,
    article>.txtRecomendaciones>.moduloImg {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* Imagen del evento en .fotoGde llena su contenedor */
    article>.fotoGde {
        overflow: hidden;
        background-color: transparent;
    }

    article>.fotoGde img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

    /* Mapa de zonas en .infoBot: imagen llena el contenedor blanco.
	   Centrada con flex y crece a casi todo el ancho disponible. */
    article>.infoBot {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 20px !important;
        min-height: 400px;
    }

    article>.infoBot>img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100%;
        object-fit: contain;
        margin: 0 auto !important;
        display: block;
    }

    /* .moduloPrecios crece al alto de su contenedor .infoCostos
       (que ya está alineado con .infoBot por align-items: stretch) */
    article>.infoCostos>.moduloPrecios {
        width: 100% !important;
        height: 100% !important;
        min-height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    /* La lista de precios scrolleable crece para llenar el espacio
       disponible después del título "Precios" */
    article>.infoCostos>.moduloPrecios>.precios {
        flex: 1 1 auto;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    article>.infoCostos>.moduloPrecios>.precios>ul {
        height: auto !important;
        min-height: 0;
    }
}

/* ----------------------------------------------------------
   TABLET + MOBILE  (max-width: 980px)
   ---------------------------------------------------------- */
@media screen and (max-width: 980px) {

    /* --- IMAGENES RESPONSIVAS GLOBAL --- */
    img {
        max-width: 100%;
        height: auto;
    }

    /* --- CONTENEDOR PRINCIPAL --- */
    #contenedor {
        width: 100% !important;
        max-width: 980px;
        height: auto !important;
        overflow-x: hidden;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* --- ARTICLE: Flexbox para reordenar secciones --- */
    article {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
    }

    /* === ORDEN MOVIL ===
       1. Imagen grande del evento
       2. Info del evento (titulo, descripcion, fechas)
       3. Mapa de zonas
       4. Lista de precios
       5. Info de boletos/taquillas + redes
       6. Aside (si tiene contenido)
       X. Video oculto
    */
    .fotoGde {
        order: 1;
    }

    .info {
        order: 2;
    }

    .infoBot {
        order: 3;
    }

    .infoCostos {
        order: 4;
    }

    .txtRecomendaciones {
        order: 5;
    }

    aside {
        order: 6;
    }

    /* Div de clearfix no debe interferir con flex */
    article>div[style*="clear"] {
        order: 99;
    }

    /* --- IMAGEN GRANDE DEL EVENTO (orden 1) --- */
    .fotoGde {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    .fotoGde img {
        width: 100%;
        height: auto !important;
    }

    /* --- INFO DEL EVENTO (orden 2) --- */
    .info {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    .infoTop {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        line-height: normal !important;
        overflow: visible !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Titulo y subtitulos - quitar float y ancho fijo */
    .pleca {
        float: left;
    }

    .titInfo {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
    }

    .subTitInfo {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin-right: 0 !important;
    }

    .txtInfo {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin-right: 0 !important;
    }

    /* Sinopsis */
    .baja2 {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        overflow: visible !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    /* Mapa de zonas/costos */
    .infoBot {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        position: relative;
        margin-top: 10px !important;
    }

    .infoBot img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Like/share del evento - resetear margen enorme */
    .likeInfo {
        width: 100% !important;
        height: auto !important;
        margin-top: 10px !important;
        margin-left: 0 !important;
        position: relative !important;
    }

    /* --- SECCION DE PRECIOS (orden 3) --- */
    .infoCostos {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    .moduloPrecios {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding-bottom: 15px;
    }

    .moduloPlecas {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .titPrecios {
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding: 6px 15px !important;
    }

    .infoComprar {
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: 6px 15px !important;
    }

    .precios {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

    .precios ul {
        width: 100% !important;
        height: auto !important;
    }

    .precios li {
        margin-top: 10px !important;
    }

    /* OCULTAR VIDEO en movil (marcado con X por el cliente) */
    .infoCostos>.moduloImg {
        display: none !important;
    }

    /* --- INFO BOLETOS + REDES (orden 4) --- */
    .txtRecomendaciones {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }

    .titRecomendaciones {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    .bannerIzqTxt {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* Formulario suscripcion */
    .cajaDatos {
        width: 100% !important;
        max-width: 300px;
        margin-left: 0 !important;
        box-sizing: border-box;
        padding: 8px !important;
    }

    .enviar {
        margin-left: 0 !important;
        margin-top: 5px !important;
        float: left !important;
    }

    /* Redes sociales */
    .txtRecomendaciones>.moduloImg {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        padding: 15px 0 !important;
        box-sizing: border-box;
    }

    .plecaRed {
        float: none !important;
        display: inline-block;
        margin-bottom: 10px;
    }

    .iconosRedesTop {
        width: 100% !important;
        height: auto !important;
        margin-top: 15px !important;
        margin-left: 0 !important;
        text-align: center;
    }

    .iconosRedesBot {
        width: 100% !important;
        height: auto !important;
        margin-top: 15px !important;
        margin-left: 0 !important;
        text-align: center;
    }

    .iconosRedesTop img,
    .iconosRedesBot img {
        float: none !important;
        display: inline-block !important;
        margin: 0 10px !important;
    }

    .imgRedes {
        float: none !important;
        display: inline-block !important;
        margin: 0 10px !important;
    }

    /* --- ASIDE (orden 5) --- */
    aside {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-top: 0 !important;
    }

    /* Si aside esta vacio, colapsarlo */
    aside:empty,
    aside .titRecomendaciones:empty {
        display: none;
    }

    /* --- OTROS --- */
    .redesDer {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .blog {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .baja {
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
        float: none !important;
    }

    .mensajeBlog {
        width: 100% !important;
    }

    /* Comentarios */
    .comment-user {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    .comment-user input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    .msj-user {
        width: 100% !important;
        box-sizing: border-box;
    }

    .comment-user textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .cerrar {
        margin-left: auto !important;
        position: relative !important;
        float: right !important;
    }
}

/* ----------------------------------------------------------
   MOBILE SMALL  (max-width: 480px)
   ---------------------------------------------------------- */
@media screen and (max-width: 480px) {

    .titInfo {
        font-size: 18px !important;
    }

    .subTitInfo {
        font-size: 13px !important;
    }

    .txtInfo {
        font-size: 13px !important;
    }

    .precios li {
        font-size: 13px !important;
    }

    .bannerIzqTxt {
        font-size: 13px !important;
    }

    /* Botones mas grandes para touch */
    .responder,
    .send-user,
    .cerrar {
        min-height: 44px;
        min-width: 44px;
        font-size: 14px;
        padding: 10px 15px;
    }
}

.at-item-info {
    display: none;
}