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

    /* ---- Etiquetas de categorías bajo la cabecera: 3 por fila, más pequeñas ---- */

    .dias .page_container > div > a {
        width: calc(33% - 0.6rem) !important;
        box-sizing: border-box !important;
        font-size: 0.72rem !important;
        padding: 0.3rem 0.4rem !important;
        margin: 0.25rem !important;
        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;
    }

    #navlist {
        display: block;
        white-space: nowrap;
        overflow: hidden;
    }

    #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;
    }

    /* 6. Ficha de detalle: apilar imagen y texto */
    .ficha_left {
        width: 100%;
        float: none;
        margin-right: 0;
        min-height: 0;
        text-align: center;
    }

    .ficha_right {
        width: 100%;
        float: none;
        min-height: 0;
    }

    .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;
    }

    /* Ocultar miniatura en el listado para ganar espacio */
    .list .item_pic_x {
        display: none;
    }

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

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

    /* Iconos de redes sociales sobre la imagen: reposicionar al pie */
    .social_image a.social_f,
    .social_image a.social_t,
    .social_image a.social_ig,
    .social_image a.social_w {
        top: auto;
        bottom: 5px;
    }

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

}