/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER · plus/css/responsive.css
   ────────────────────────────────────────────────────────────────────
   Capa CSS-only que adapta el render unificado (siempre "ordenador")
   a cualquier ancho de viewport. Trabajamos con dos breakpoints:
     - tablet vertical / movil grande : <= 900px
     - movil                          : <= 600px
   ════════════════════════════════════════════════════════════════════ */

/* ────── Box-sizing global ────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    overflow-x: hidden;
}

/* ────── Scroll lock cuando hay modal abierto ────── */
html.kp-scroll-locked,
body.kp-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: none;
}
body.kp-scroll-locked {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

/* iOS: evita zoom en inputs */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px !important; }
}

/* ────── Utility clases visibility ────── */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
@media (max-width: 900px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
}

/* Duplicado de info del modal: invisible en desktop */
#TextoDescrip_m.kp-mobile-info { display: none; }

/* ════════════════════════════════════════════════════════════════
   MODAL #cuadroInfo (producto)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Modal a pantalla completa */
    .cuadroInfoOn {
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0 !important;
        border: 0 !important;
    }
    .cuadroInfoOn::before,
    .cuadroInfoOn::after { border-radius: 0 !important; }

    /* Backdrop a pantalla completa */
    .pantallaNegra { top: 0 !important; }

    /* Content scrollable verticalmente */
    #cuadroInfo #content {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px !important;
    }

    /* Foto del producto: ya no absoluto */
    #cuadroInfo #cuaroFoto {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto 14px auto;
    }

    /* Zona de opciones: ya no absoluta, fluye debajo del thumb */
    #cuadroInfo #opciones_ {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 420px;
        height: auto !important;
        margin: 0 auto 16px auto;
    }

    /* Panel derecho TextoDescrip: oculto en mobile (usamos el duplicado) */
    #cuadroInfo #TextoDescrip {
        display: none !important;
    }

    /* Duplicado de info en mobile: visible y posicionado entre los
       botones y las acciones-list. */
    #cuadroInfo #TextoDescrip_m.kp-mobile-info {
        display: block !important;
        width: 100% !important;
        padding: 14px 8px 4px 8px;
        margin: 8px 0 4px 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        text-align: left;
    }
    #cuadroInfo #TextoDescrip_m .kp-mi-nombre {
        margin-bottom: 6px;
    }
    #cuadroInfo #TextoDescrip_m #nombre_m {
        font-size: 22px !important;
        font-weight: 600;
        color: #f3d27a !important;
        text-shadow: 0 0 14px rgba(189,154,31,0.32);
        line-height: 1.2;
    }
    #cuadroInfo #TextoDescrip_m .kp-mi-autor {
        margin-bottom: 10px;
    }
    #cuadroInfo #TextoDescrip_m #autor_m {
        font-size: 15px !important;
        font-style: italic;
        color: #c9b58a !important;
    }
    #cuadroInfo #TextoDescrip_m .kp-mi-desc {
        margin-bottom: 8px;
    }
    #cuadroInfo #TextoDescrip_m #descripcion_m {
        font-size: 14px !important;
        line-height: 1.55;
        color: rgba(255,255,255,0.82) !important;
    }

    /* Las acciones (favoritos / coleccion / comprar) van AL FINAL,
       despues del titulo/autor/descripcion */
    #cuadroInfo .acciones-list {
        order: 10;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    /* Icono offline/device: en flujo, no absoluto */
    #cuadroInfo #offline {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 10px;
        text-align: right !important;
    }
    #cuadroInfo #problema {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 8px;
        text-align: left !important;
    }

    /* Tipografia mas grande en el titulo */
    #cuadroInfo #nombre,
    #cuadroInfo #nombre * { font-size: 24px !important; }
}

/* ════════════════════════════════════════════════════════════════
   HEADER / NAVEGACION
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Logo justo al lado del hamburger (a la izquierda) */
    #logoHeader {
        width: 85px !important;
        left: 64px !important;
        right: auto !important;
        transform: none !important;
        top: 18px !important;
    }

    /* Hamburger (SVG) a la izquierda */
    #opHeader {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        top: 18px !important;
        left: 14px !important;
        right: auto !important;
    }
    #opHeader:hover {
        background: rgba(189,154,31,0.18);
        color: #f3d27a;
    }
    #opHeader svg {
        width: 24px !important;
        height: 24px !important;
        stroke: currentColor;
    }

    /* Menu superior horizontal: ocultar */
    #opciones_tira_menu { display: none !important; }

    /* Lateral del header (idioma, login, etc) ajuste */
    #login, #caja_Sucripciones {
        right: 10px !important;
    }

    /* Avatar compacto en mobile (algo mas pequeno que en desktop
       porque va al lado del hamburger izquierdo y el espacio
       horizontal es escaso) */
    .avatar-wrap { width: 32px !important; top: 11px !important; }
}

/* ════════════════════════════════════════════════════════════════
   ROWS DE PRODUCTOS
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Padding lateral menor en filas horizontales */
    section.regular {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Tarjetas universales mas pequenas */
    section.regular > div { flex-basis: 200px !important; }
    section.regular.row-doc > div {
        flex-basis: 160px !important;
        height: 232px !important;
    }

    /* SOME AUTHORS + COLECCIONES: el grid responsive ya viene del
       propio rowAutores.php (CSS Grid). Aqui solo ajustamos padding
       y fuerza imgs a llenar la celda. */
    .rowAutores-wrap {
        padding: 0 8px !important;
    }
    .rowAutores-wrap .rowAutores img,
    .rowAutores-wrap .rowAutoresM img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* FAVOURITES: 2 columnas en mobile */
    .card-row[style*="18.4%"],
    .card-row[style*="inline-block"] {
        width: 47% !important;
    }
}

@media (max-width: 600px) {
    /* En movil muy pequeno reducimos mas las cards de filas regulares */
    section.regular > div { flex-basis: 170px !important; }
    section.regular.row-doc > div {
        flex-basis: 140px !important;
        height: 204px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   ESCAPARATE / PORTADA (rotador, banners)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   PORTADA / COVER
   Ya no usamos Jssor. El cover esta en cover_new.php con clases
   propias .kp-cover-* (sin conflictos). Solo aseguramos que el
   contenedor padre ocupe viewport completo.
   ════════════════════════════════════════════════════════════════ */
#marco_container,
#contenidopantalla {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════
   FORMULARIOS / BOTONES (touch-friendly)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Targets minimo 44px para tactil */
    .boton_efec,
    .boton_efec_expl,
    .boton_efec_ins { min-height: 44px !important; font-size: 17px !important; }

    /* El wrapper del PLAY tiene inline height:39px + overflow:hidden,
       lo que corta el boton ampliado a 44px. Lo liberamos. */
    #cuadroInfo #play_boton > div[style*="overflow: hidden"],
    #cuadroInfo #play_boton > div[style*="overflow:hidden"] {
        height: auto !important;
        min-height: 44px;
        overflow: visible !important;
    }

    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"] { min-height: 42px; padding: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER (oculto en movil, como antes con $dispo)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    #footer { display: none !important; }
}