/* DDV_TABLET_SAFE_V4 sobre DDV_IPAD_RESPONSIVE_V1
   Objetivo: permitir navegación prolija en iPad/tablet sin rediseñar celular.
   Regla: celulares angostos siguen bloqueados por los estilos existentes; iPad/tablet se habilita. */

@media (min-width: 701px) and (max-width: 1180px), (min-width: 701px) and (hover: none) and (pointer: coarse) {
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-text-size-adjust: 100%;
    }

    .bloqueo-mobile {
        display: none !important;
    }

    .sala,
    .vip-pelicula,
    .wip {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
}

/* SALA VIP — iPad / tablet */
@media (min-width: 701px) and (max-width: 1180px) {
    .sala {
        padding: 10px 18px 34px !important;
    }

    .sala-header {
        padding: 0 12px !important;
        margin-bottom: 8px !important;
    }

    .marca-logo {
        width: min(320px, 56vw) !important;
        height: 76px !important;
    }

    .titulo-con-manos {
        gap: 12px !important;
    }

    .mano-titulo {
        width: 44px !important;
        height: 72px !important;
    }

    .sala-header h1 {
        font-size: clamp(31px, 5.2vw, 48px) !important;
    }

    .sala-nav {
        gap: 18px !important;
        row-gap: 8px !important;
        margin: 8px auto 10px !important;
    }

    .sala-nav a {
        font-size: 15px !important;
    }

    .linea-roja {
        width: 90vw !important;
        margin-bottom: 20px !important;
    }

    .seccion {
        max-width: 980px !important;
        margin-bottom: 44px !important;
    }

    .grilla {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 14px !important;
    }

    .card,
    .card img {
        min-height: 235px !important;
    }

    .card:hover,
    .short-card:hover,
    .placeholder:hover {
        transform: none !important;
    }

    .card:hover img,
    .short-card:hover img {
        transform: none !important;
    }

    .overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.96), rgba(0,0,0,0.48), rgba(0,0,0,0.02)) !important;
    }

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

    .overlay p {
        font-size: 12px !important;
    }

    .ver-boton {
        min-height: 34px !important;
        font-size: 13px !important;
    }

    .grilla-proyectos {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .grilla-proyectos .proyecto-card,
    .boveda-card {
        width: 100% !important;
        min-height: 145px !important;
        padding: 22px !important;
        justify-self: stretch !important;
    }

    .proyecto-card h3,
    .boveda-card h3 {
        white-space: normal !important;
    }
}

/* PELÍCULA — player y ficha en iPad/tablet */
@media (min-width: 701px) and (max-width: 1024px) {
    .vip-pelicula {
        padding: 8px 18px 30px !important;
    }

    .topbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: center !important;
        max-width: 900px !important;
    }

    .volver,
    .logout-link,
    .admin-link {
        justify-self: center !important;
    }

    .logo-centro {
        min-height: 58px !important;
    }

    .hero {
        grid-template-columns: 1fr !important;
        max-width: 900px !important;
        gap: 18px !important;
    }

    .player-wrap {
        max-width: 100% !important;
    }

    .poster {
        width: min(360px, 70vw) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
    }

    .poster img {
        height: auto !important;
        max-height: 520px !important;
    }

    .titulo {
        font-size: clamp(34px, 6vw, 54px) !important;
        text-align: center !important;
    }

    .meta,
    .acciones,
    .materiales-descargas {
        justify-content: center !important;
    }

    .boton {
        min-height: 38px !important;
    }

    .galeria-film,
    .vip-pelicula.proyectos-mode .galeria-film {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .galeria-film img,
    .galeria-film.galeria-film-contain img {
        max-height: 430px !important;
    }

    .fila-relacionadas {
        grid-template-columns: repeat(4, minmax(90px, 1fr)) !important;
    }

    .mini-card:hover {
        transform: none !important;
    }
}

/* WIP — prioridad iPad/tablet */
@media (min-width: 701px) and (max-width: 1180px) {
    .wip {
        padding: 8px 18px 32px !important;
    }

    .wip .topbar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: center !important;
        max-width: 920px !important;
    }

    .wip .layout {
        grid-template-columns: 1fr !important;
        max-width: 920px !important;
        gap: 16px !important;
    }

    .lista-proyectos {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .proyecto-card {
        min-height: 62px !important;
    }

    .proyecto-card:hover {
        transform: none !important;
    }

    .detalle,
    .detalle.detalle-varados,
    .detalle.detalle-afiche-lateral {
        padding: 18px 18px 24px !important;
    }

    .detalle-superior,
    .detalle .detalle-superior,
    .detalle.detalle-varados .detalle-superior,
    .detalle.detalle-afiche-lateral .detalle-superior {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .video-col,
    .info-col {
        min-height: 0 !important;
        padding: 14px !important;
    }

    .player {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
    }

    .detalle h2,
    .detalle h2.titulo-una-linea {
        white-space: normal !important;
        font-size: clamp(28px, 5vw, 44px) !important;
        text-align: center !important;
    }

    .acciones {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .galeria-wip,
    .galeria-global-wip .galeria-wip,
    .galeria-en-linea-wip .galeria-wip,
    .galeria-strip-wip .galeria-wip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        max-width: 100% !important;
    }

    .galeria-wip a,
    .galeria-wip button.galeria-protegida,
    .galeria-en-linea-wip[data-proyecto-id="loculus"] .galeria-wip a {
        width: 100% !important;
        max-width: none !important;
        flex: 0 1 auto !important;
    }

    .galeria-wip a:hover img,
    .galeria-wip button.galeria-protegida:hover .galeria-bg-protegida {
        transform: none !important;
    }
}

@media (min-width: 701px) and (max-width: 820px) {
    .grilla {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .lista-proyectos {
        grid-template-columns: 1fr !important;
    }

    .galeria-film,
    .vip-pelicula.proyectos-mode .galeria-film,
    .galeria-wip,
    .galeria-global-wip .galeria-wip,
    .galeria-en-linea-wip .galeria-wip,
    .galeria-strip-wip .galeria-wip {
        grid-template-columns: 1fr !important;
    }

    .fila-relacionadas {
        grid-template-columns: repeat(3, minmax(80px, 1fr)) !important;
    }
}


/* DDV_IPAD_WIP_LANDSCAPE_V2
   Prioridad: iPad acostado / 16:9 para reunión.
   Proyectos WIP a la izquierda; detalle del proyecto a la derecha.
   No cambia desktop. No prioriza celular chico. */
@media (min-width: 840px) and (max-width: 1180px) and (orientation: landscape) {
    .wip {
        padding: 6px 12px 20px !important;
    }

    .wip .topbar {
        display: grid !important;
        grid-template-columns: 150px minmax(0, 1fr) 250px !important;
        gap: 10px !important;
        max-width: 1160px !important;
        margin: 0 auto 2px !important;
        text-align: left !important;
        align-items: center !important;
    }

    .wip .volver {
        justify-self: start !important;
        font-size: 12px !important;
        letter-spacing: 0.9px !important;
    }

    .wip .logo-centro {
        min-height: 44px !important;
    }

    .wip .logo-img {
        width: min(250px, 28vw) !important;
        height: 44px !important;
    }

    .wip .top-actions {
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .wip .idioma {
        padding: 5px 8px !important;
    }

    .wip .idioma button,
    .wip .logout-link,
    .wip .admin-link {
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
    }

    .wip .titulo-pagina {
        margin-bottom: 3px !important;
    }

    .wip .titulo-pagina h1 {
        font-size: 17px !important;
        letter-spacing: 1.7px !important;
    }

    .wip .linea-roja {
        margin-bottom: 8px !important;
        width: min(820px, 78vw) !important;
    }

    .wip .layout {
        display: grid !important;
        grid-template-columns: 235px minmax(0, 1fr) !important;
        gap: 14px !important;
        max-width: 1160px !important;
        align-items: start !important;
    }

    .wip .lista-proyectos {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        max-height: calc(100svh - 125px) !important;
        overflow-y: auto !important;
        padding-right: 3px !important;
        position: sticky !important;
        top: 8px !important;
    }

    .wip .proyecto-card {
        min-height: 46px !important;
        padding: 8px 9px !important;
    }

    .wip .proyecto-card:hover,
    .wip .proyecto-card.activo {
        transform: none !important;
    }

    .wip .proyecto-card h3 {
        font-size: 12px !important;
        letter-spacing: 0.8px !important;
        line-height: 1.05 !important;
    }

    .wip .proyecto-card p {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .wip .detalle,
    .wip .detalle.detalle-varados,
    .wip .detalle.detalle-afiche-lateral {
        padding: 12px 14px 16px !important;
        min-width: 0 !important;
    }

    .wip .detalle-superior,
    .wip .detalle .detalle-superior,
    .wip .detalle.detalle-varados .detalle-superior,
    .wip .detalle.detalle-afiche-lateral .detalle-superior {
        display: grid !important;
        grid-template-columns: minmax(300px, 0.95fr) minmax(280px, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .wip .video-col,
    .wip .info-col {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    .wip .player {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    .wip .detalle h2,
    .wip .detalle h2.titulo-una-linea {
        font-size: clamp(24px, 3.2vw, 34px) !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
    }

    .wip .titulo-video-proyecto {
        text-align: center !important;
        font-size: 20px !important;
        letter-spacing: 1px !important;
    }

    .wip .meta {
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .wip .logline,
    .wip .descripcion {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }

    .wip .acciones,
    .wip .acciones-video {
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .wip .acciones-video {
        justify-content: center !important;
    }

    .wip .boton,
    .wip .boton-secundario,
    .wip .boton-material,
    .wip .btn {
        min-height: 32px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
    }

    .wip .afiche-proyecto-lateral {
        max-width: 150px !important;
        margin: 0 0 10px !important;
    }

    .wip .galeria-global-wip {
        margin-top: 14px !important;
    }

    .wip .galeria-wip,
    .wip .galeria-global-wip .galeria-wip,
    .wip .galeria-en-linea-wip .galeria-wip,
    .wip .galeria-strip-wip .galeria-wip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .wip .footer {
        margin-top: 16px !important;
        font-size: 10px !important;
    }
}

/* iPad landscape muy angosto: mantenemos izquierda/derecha, pero achicamos la columna de proyectos. */
@media (min-width: 840px) and (max-width: 980px) and (orientation: landscape) {
    .wip .layout {
        grid-template-columns: 210px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .wip .detalle-superior,
    .wip .detalle .detalle-superior,
    .wip .detalle.detalle-varados .detalle-superior,
    .wip .detalle.detalle-afiche-lateral .detalle-superior {
        grid-template-columns: minmax(260px, 0.9fr) minmax(250px, 1fr) !important;
        gap: 12px !important;
    }

    .wip .player {
        max-width: 315px !important;
    }
}


/* DDV_TABLET_SAFE_V4 — seguro anti-celular VIP.
   Permite tablets iPad/Android por tamaño real de viewport; no habilita celulares horizontales. */
@media (max-height: 559px), (max-width: 699px) {
    .bloqueo-mobile {
        display: flex !important;
    }
}

@media (min-width: 700px) and (min-height: 560px) and (max-width: 1366px) {
    .bloqueo-mobile {
        display: none !important;
    }
}