/* ================================================
   RESPONSIVE - Solo movil (max-width: 767px)
   El layout de escritorio no se modifica.
   ================================================ */

/* Botón flotante: siempre visible */
#btn-publicar-movil {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #E75900;
    color: #fff;
    padding: 12px 18px;
    border-radius: 24px;
    font-weight: bold;
    font-size: 14px;
    z-index: 9000;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    white-space: nowrap;
}

@media (max-width: 767px) {

    /* 1. Evitar scroll horizontal y eliminar anchura mínima */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
        min-width: 0;
    }

    /* Espacio para que el botón no tape contenido del pie */
    body {
        padding-bottom: 70px;
    }

    /* ---- Menú de días/categorías: línea horizontal scrollable ---- */

    .dias .page_container {
        padding: 0 !important;
    }

    #dias-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 4px 10px 2px 10px;
        /* Ocultar barra de scroll pero permitir scroll táctil */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #dias-nav::-webkit-scrollbar {
        display: none;
    }

    /* Degradado derecho que indica que hay más contenido */
    .dias .page_container {
        position: relative;
    }
    .dias .page_container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 28px;
        height: 100%;
        background: linear-gradient(to right, transparent, #f2f2f2);
        pointer-events: none;
    }

    #dias-nav > a {
        flex: 0 0 auto !important;
        width: auto !important;
        font-size: 0.8rem !important;
        padding: 0.35rem 0.65rem !important;
        margin: 0.25rem 0.2rem !important;
        white-space: nowrap;
        text-align: center;
    }

    /* 2. Contenedor principal fluido */
    .page_container {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 10px;
    }

    /* 3. Cabecera: el nav de dias pasa a flujo normal (deja de ser absoluto) */
    .caja_nav {
        position: static;
        width: 100%;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 6px 0 4px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .caja_nav::-webkit-scrollbar {
        display: none;
    }

    #navlist {
        display: inline-block;
        white-space: nowrap;
        min-width: 100%;
    }

    #navlist li {
        float: none;
        display: inline-block;
        padding: 2px 3px 2px 0;
    }

    #navlist li a {
        font-size: 12px;
    }

    /* Login / menu usuario: mantener en top-right */
    #container-loginmenu {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .loginacceso {
        position: absolute;
        top: 14px;
        right: 10px;
    }

    /* 4. Columnas principales: apilar */
    .cuerpoAb_A {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .cuerpoAb_b {
        width: 100% !important;
        float: none !important;
        clear: both;
        margin-top: 10px;
    }

    /* 5. Megabanner */
    .megabanner,
    .megabanner .rellenomegabanner {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .megabanner.banner {
        background: none !important;
    }

    /* 6. Ficha de detalle: dos columnas (40% foto / 60% info) */
    .tit_ficha { font-size: 18px; }


    .ficha_left {
        width: 30%;
        float: left;
        margin-right: 0;
        min-height: 0;
        text-align: left;
    }

    .ficha_right {
        width: 68%;
        float: left;
        min-height: 0;
        padding-left: 8px;
        box-sizing: border-box;
    }

    .fichafav {
        width: auto;
        float: none;
        height: auto;
        text-align: left;
    }

    /* 7. Listas de eventos: quitar anchos fijos */
    .list .item .item_info,
    .list .item .item_info_nofoto {
        width: auto;
        border-right: none;
        padding-right: 5px;
    }

    .list .item_x .item_info_x {
        width: auto;
        border-right: none;
    }

    .list .item_x .nofoto_x,
    .list .item_x .notiempo_x,
    .list .item_x .nofototiempo,
    .list .item_x .tiemponofoto {
        width: auto;
    }

    /* 8. Grid: 2 columnas con flexbox (evita el encallamiento de floats) */
    .grid {
        display: flex;
        flex-wrap: wrap;
        height: auto !important;
        overflow: visible !important;
    }

    .grid .item,
    .grid .item_car,
    .grid .item_especial,
    .grid .item_proximamente,
    .grid .item_cine,
    .grid .item_museos,
    .grid .item_ofertas,
    .grid .item_platos {
        float: none;
        width: 47%;
        height: auto;
        min-height: 0;
        margin: 0 1% 10px 1%;
        box-sizing: border-box;
    }

    /* 9. Columnas multiples: apilar */
    .col_abcd_a {
        width: 100%;
        margin-right: 0;
    }

    .info_abc_a, .info_abc_b, .info_abc_c {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .hoja_colabc_a, .hoja_colabc_b, .hoja_colabc_c {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .f_aviso, .f_info {
        width: 100%;
        float: none;
    }

    /* 10. Superbanner: altura automatica */
    .superbanner {
        height: auto;
    }

    /* 11. Imagenes: nunca desbordar */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Listado de eventos ---- */

    /* Ocultar estrella de favoritos en el listado */
    .list .item_social_x {
        display: none;
    }

    /* item_social: quitar posición absoluta para que fluya debajo del texto */
    .list .item .item_social {
        position: static;
        width: auto;
        height: auto;
        padding: 4px 0 4px 0;
    }

    /* Ocultar favorito en móvil */
    .list .item .listadofav {
        display: none;
    }

    /* Miniatura en el listado: visible en móvil */
    .list .item_pic_x {
        flex: 0 0 auto;
        float: none;
        margin-right: 4px;
    }

    /* Layout de cada fila: flexbox hora + info en una línea */
    .list .item_x {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 8px 0;
        min-height: 0;
    }

    .list .item_hora_x {
        flex: 0 0 38px;
        width: 38px;
        height: auto;
        float: none;
        margin-right: 4px;
    }

    .list .item_hora_x strong {
        display: block;
        font-size: 12px;
        background: #eee;
        padding: 2px;
        text-align: center;
    }

    /* El bloque de info (título + categoría + lugar) ocupa el resto */
    .list .item_x .item_info_x,
    .list .item_x .nofoto_x,
    .list .item_x .notiempo_x,
    .list .item_x .nofototiempo,
    .list .item_x .tiemponofoto {
        flex: 1;
        width: auto !important;
        min-width: 0;
        height: auto;
        float: none;
        border-right: none;
        overflow: hidden;
    }

    /* ---- Iframes responsivos (YouTube, etc.) en descripción ---- */
    .ficha_desc iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    /* ---- Ficha de evento / cliente / artista: foto a ancho completo y sin favorito ---- */

    .ficha_left .social_image {
        width: 100%;
        height: auto;
    }

    .ficha_left .social_image img {
        width: 100%;
        height: auto;
        max-width: 100%; /* sobreescribe max-width:150px de Site.css */
        margin-bottom: 6px;
    }

    /* Ocultar botón de favorito en ficha de detalle */
    .fichafav {
        display: none;
    }

    /* ---- Ficha de Lugar (no cliente): ocultar imagen, mostrar iconos sociales en línea ---- */

    .ficha_left_lugar .social_image img {
        display: none;
    }

    .ficha_left_lugar .social_image {
        width: auto;
        height: auto;
        position: static;
    }

    .ficha_left_lugar .social_image a.social_f,
    .ficha_left_lugar .social_image a.social_t,
    .ficha_left_lugar .social_image a.social_ig,
    .ficha_left_lugar .social_image a.social_w {
        position: static;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 6px;
        top: auto;
        bottom: auto;
    }

    .ficha_left_lugar {
        width: auto;
        float: none;
        min-height: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    /* ---- Formulario publicar/editar evento ---- */

    #eventofrm input[type="text"],
    #eventofrm input[type="email"],
    #eventofrm input[type="date"],
    #eventofrm textarea,
    #eventofrm select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Tablas de layout (fecha+hora, tipos de evento): apilar celdas */
    #eventofrm table,
    #eventofrm tbody,
    #eventofrm tr,
    #eventofrm td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 0 !important;
    }

    /* ---- Modal de login: ajustar a pantalla móvil ---- */

    .ui-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
        left: 3vw !important;
        box-sizing: border-box;
    }

    .ui-dialog .emaillogin {
        width: 100% !important;
        box-sizing: border-box;
    }

    .ui-dialog-content {
        overflow-x: hidden;
    }

    /* ---- Panel Cerca de... (#clientes_cerca): 2 items por fila ---- */

    #clientes_cerca .tabla {
        width: 100%;
    }

    #clientes_cerca .tabla .celda {
        width: 48%;
        height: auto;
        margin-right: 2%;
        box-sizing: border-box;
    }

    #clientes_cerca .tabla .celda:nth-child(2n) {
        margin-right: 0;
    }

    #clientes_cerca .tabla .celda img {
        width: 100%;
        height: auto;
    }

    /* ---- Recomendaciones: imagen a ancho completo ---- */

    .premium_banner img {
        width: 100%;
        height: auto;
    }

    /* ---- Related premium: items en fila horizontal ---- */

    .related_premium {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .related_premium br {
        display: none;
    }

    .related_premium a {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* ---- Bloque "Agenda" con calendario: ocultar en móvil ---- */

    .bloque-agenda-calendario {
        display: none;
    }

    /* ---- Panel Cerca de...: foto a ancho completo y texto en línea siguiente ---- */

    .list .item_lista a {
        display: block;
    }

    .list .item_lista img {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 4px;
    }

}