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

/* ----------------------------------------------------------
   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;
    }
}