/*
 * app.css — Añadidos del proyecto nuevo.
 * NO modifica style.css (copia fiel del legacy); solo añade lo imprescindible.
 */

/* --- Carrusel de la home ---
 * El legacy apilaba las imágenes con el plugin jQuery "Cycle" (posicionamiento por JS).
 * Aquí lo hacemos con CSS (apilado absoluto + fundido) y un JS mínimo (js/home.js).
 *
 * DIAGNOSTICO-HOME.md §1 (2026-07-10): 6_humidors_P.jpg mide 542x394px real
 * (las otras 5 imágenes del carrusel miden 542x356). El HTML fuerza
 * width/height=542/356 por igual en las 6, pero img{max-width:100%;
 * height:auto} (más abajo) ignora ese atributo y calcula la altura real
 * según la proporción del fichero de origen — sin altura fija en
 * .slideshowItem ni overflow:hidden en .slideshow2, el sobrante de
 * humidors se salía por debajo del carrusel (en escritorio y en móvil). */
.slideshow2 {
    position: relative;
    overflow: hidden;
}
.slideshow2 .slideshowItem {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.slideshow2 .slideshowItem.is-active {
    opacity: 1;
}
.slideshow-items li.click {
    cursor: pointer;
}

/* --- H1 accesible pero invisible ---
 * Mejor que el display:none del legacy: Google y los lectores de pantalla lo leen,
 * pero no altera el diseño. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* --- Galería de producto (Bloque 4) ---
 * .savoir-faire tiene una altura fija (354px) en el legacy, pensada para UNA
 * imagen. Con varias imágenes activas para el mismo producto (ver
 * templates/pages/catalog.php) se deja crecer el alto en vez de recortar. */
.savoir-faire.multi {
    height: auto;
}
.product-gallery-image + .product-gallery-image {
    margin-top: 10px;
}

/* --- Base responsive mínima ---
 * Evita que las imágenes desborden en pantallas pequeñas. El rediseño responsive
 * completo (que el layout de ancho fijo del legacy no tiene) se aborda en una fase
 * posterior; aquí solo se añade la etiqueta viewport y esta red de seguridad. */
img {
    max-width: 100%;
    height: auto;
}

/* --- Área privada (D030/D037) ---
 * .link-button: el logout es un POST con CSRF (evita el "logout CSRF" de un
 * <a href> simple), pero debe verse como el resto de enlaces del bloque
 * donde aparece, no como un botón nativo del navegador. */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.link-button:hover {
    text-decoration: underline;
}
.inline-form {
    display: inline;
}
.account-bar {
    font-size: .9em;
    margin-bottom: 1em;
}

/* --- Formulario de contacto (D033/D038) ---
 * textarea.register: style.css ya da a `textarea` el mismo ancho/alto que el
 * resto del formulario (input.text,textarea{width:333px} / textarea{height:184px}),
 * pero el borde de input.register (selector solo de <input>) no le aplica. */
textarea.register {
    border: 1px solid #83847A;
    padding: 5px;
}

/* ==========================================================================
   Responsive — Sub-bloque 1 (D043, docs/RESPONSIVE-DIAGNOSTICO.md):
   contenedor global + header + menú hamburguesa + footer.

   Un único breakpoint, 960px — justo por encima del ancho fijo real del
   sitio (#content/#header/#menu-ppal/#footer = 92-93em = 920-930px, porque
   body{font-size:62.5%} hace 1em=10px, ver style.css línea 102). En
   escritorio (>=960px) NINGUNA regla de aquí se aplica: la vista actual
   queda intacta por construcción, no por cuidado al escribir el CSS.

   Todos los selectores que sobrescriben una propiedad ya existente en
   style.css repiten el selector EXACTO del original (misma especificidad),
   para ganar solo por orden de carga (style.css se enlaza antes que
   app.css en head.php) — nunca por especificidad más alta ni !important.
   ========================================================================== */

/* Botón del menú hamburguesa: oculto también en escritorio por defecto (más
   simple y a prueba de fallos que depender de una media query "min-width"
   aparte). Solo se muestra dentro del @media de abajo. */
#menu-toggle {
    display: none;
}

/* D052: la etiqueta "Menu" junto al icono ☰ (antes solo para lectores de
   pantalla, D043) pasa a ser visible — petición de Angel, independiente
   del comparador de catálogo, en todo el sitio móvil. */
#menu-toggle-label {
    margin-right: .4em;
}

/* ==========================================================================
   Catálogo — familias/producto (D048, reabre D019;
   docs/PLAN-FAMILIAS-PRODUCTO.md). Los carruseles reutilizan las clases del
   legacy ya presentes en style.css (.slideshow-content(2), .slideshow2-items,
   .arrow-*, .savoir-faire, .text2); aquí solo lo que el legacy no cubría:
   el fundido de la sección, el reset de las flechas como <button> y el
   lightbox de "+detail". El movimiento lo aplica public/js/catalog.js.
   ========================================================================== */

/* Fundido de la página de sección (Nivel 1): mismas imágenes M de subfamilia
   que el legacy fundía con jQuery Cycle; aquí apilado absoluto + opacidad. */
.catalog-fade {
    position: relative;
    overflow: hidden;
    width: 542px;
    height: 356px;
}
.catalog-fade .slideshowItem {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.catalog-fade .slideshowItem.is-active {
    opacity: 1;
}

/* Flechas de carrusel como <button> real (accesibles por teclado, mismo
   criterio que el menú hamburguesa D043). El sprite, tamaño y posición los
   pone style.css (.arrow-left/-right(2)); aquí solo se quita el "chrome" del
   botón para que se vea igual que el <div> del legacy. */
.arrow-left,
.arrow-right,
.arrow-left2,
.arrow-right2 {
    border: 0;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* Lightbox de "+detail" (sustituye fancybox). Overlay a pantalla completa. */
.detail-links a.extend {
    display: inline-block;
    margin-top: 10px;
    color: #3E554E;
}
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .8);
    cursor: zoom-out;
}
.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
}

/* --- Footer: corrección del word-spacing heredado del legacy (escritorio) ---
 * style.css trae #footer p{word-spacing:-.2em}, heredado tal cual del legacy.
 * A 9.8px de fuente (body{font-size:62.5%} + .98em) el espacio natural del
 * carácter " " en Open Sans mide ~2.55px; -.2em son -1.96px, así que solo
 * queda ~0.59px visible (~23% del natural): el texto se ve pegado, sin
 * separación real entre palabras. Medido con Chromium real (Playwright) el
 * 2026-08-12: el efecto es IDÉNTICO en el legacy (misma CSS, mismo tamaño,
 * misma fuente) — no es una regresión de la migración, es un residuo que
 * nunca se recalibró. Además hay margen de sobra: la línea completa del
 * footer ocupa 631-709px de los 920px disponibles (68-77%), así que
 * "normal" no arriesga partir la línea en dos.
 * No se toca style.css (es copia fiel del legacy); se sobrescribe aquí, con
 * el mismo selector exacto (misma especificidad, gana por orden de carga).
 * El @media de abajo ya hace este mismo ajuste en móvil, por otra razón
 * (evitar apelotonamiento al partirse en varias líneas) — no se toca. */
#footer p {
    word-spacing: normal;
}

@media (max-width: 959px) {
    /* --- Contenedor global: deja de imponer 920-930px fijos --- */
    #header,
    #menu-ppal,
    #content,
    #footer {
        width: 100%;
    }

    /* --- Header: el logo (266px) y el menú secundario (#nav-top: fairs/
       catalogue/contact/webmap) no caben lado a lado en un móvil — pasa a
       su propia línea debajo del logo. Alto fijo (110px) a automático para
       que no se recorte al pasar a dos líneas. */
    #header {
        height: auto;
        padding-bottom: 1em;
    }
    #nav-top {
        float: none;
        clear: both;
    }
    ul#nav-top li {
        float: none;
        display: inline-block;
    }

    /* --- Menú hamburguesa ---
       #menu-ppal-list empieza oculto (display:none) y solo se muestra con
       la clase "is-open" que añade public/js/menu.js al pulsar el botón.
       Mayor especificidad de ".is-open" (no el orden) es lo que gana sobre
       el "display:none" de abajo, así que el orden de estas dos reglas no
       importa. */
    #menu-ppal {
        height: auto;
    }
    #menu-toggle {
        display: block;
        width: 100%;
        padding: .6em;
        font-size: 1.8em;
        line-height: 1;
        text-align: left;
        background: #fff;
        border: 1px solid #83847A;
        color: #3E554E;
        cursor: pointer;
    }
    #menu-ppal ul {
        display: none;
    }
    #menu-ppal ul.is-open {
        display: block;
    }
    #menu-ppal ul li {
        float: none;
    }
    #menu-ppal ul li a {
        display: block;
        padding: .5em 0;
        border-bottom: 1px solid #ddd;
    }

    /* --- Footer: mismo criterio que el header (alto fijo -> automático) --- */
    #footer {
        height: auto;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    #footer ul {
        height: auto;
    }
    #footer ul li {
        display: inline-block;
        margin-bottom: .3em;
    }

    /* ----------------------------------------------------------------------
       Sub-bloque 2 (D043 continuación, docs/RESPONSIVE-DIAGNOSTICO-2.md):
       home (carrusel + rejilla de miniaturas) y footer (línea de copyright).
       Mismo criterio que el sub-bloque 1: selectores de especificidad
       idéntica a style.css, sin !important, dentro del mismo breakpoint.
       ---------------------------------------------------------------------- */

    /* --- Carrusel de la home (§1): .slideshow2 y sus imágenes eran fijos
       (542x356px) pese a que #content ya es fluido desde el sub-bloque 1 —
       desbordaban en pantallas estrechas. aspect-ratio mantiene la
       proporción sin recalcular nada en home.js (que solo alterna
       is-active; el tamaño lo sigue dando el CSS). */
    .slideshow2 {
        width: 100%;
        max-width: 542px;
        height: auto;
        aspect-ratio: 542 / 356;
    }
    .slideshow2 .slideshowItem {
        width: 100%;
        height: 100%;
    }

    /* --- Rejilla de miniaturas de la home (§2): sin esto, 6 elementos
       flotados de 150px fijos (.slideshow-item) se repartían al azar según
       cupieran por fila. Reparto explícito a 2 columnas. */
    ul.slideshow-items li {
        float: left;
        width: 50%;
        margin-right: 0;
        box-sizing: border-box;
        padding-right: 5px;
    }
    .slideshow-item {
        width: 100%;
        height: auto;
        aspect-ratio: 150 / 100;
    }
    /* DIAGNOSTICO-HOME.md §2 (2026-07-10): .slideshow-item ya es fluido
       (arriba), pero la <img> de dentro solo tenía max-width:100% (regla
       global) — que nunca AGRANDA una imagen más pequeña que su caja, solo
       la encoge si sobra. Con la caja ya más ancha que 150px reales en
       móvil, la imagen se quedaba en su tamaño natural y dejaba ver el
       fondo #ccc de .slideshow-item alrededor. object-fit:cover rellena la
       caja recortando lo mínimo, sin deformar. */
    .slideshow-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- Footer: línea de copyright (§3): word-spacing negativo estaba
       pensado para caber en una sola línea de escritorio; al partirse en
       varias en móvil, quedaba apelotonado. */
    #footer p {
        word-spacing: normal;
        line-height: 1.6;
        margin-bottom: .8em;
    }

    /* ----------------------------------------------------------------------
       Sub-bloque 3 (docs/RESPONSIVE-DIAGNOSTICO-3.md): carruseles de
       catálogo, cuenta, contacto, catálogo de descargas y legales.
       ---------------------------------------------------------------------- */

    /* --- §1 Carruseles de catálogo (D048) — opción B de Angel: en móvil NO
       hay carrusel, hay lista vertical apilada; la imagen grande de producto
       se adapta al ancho. catalog.js deja de inicializar los carruseles bajo
       este mismo breakpoint (960px) y revierte sus estilos en línea (ancho/
       float/transform), que si no ganarían siempre a estas reglas — con eso
       ya desactivado, aquí solo queda que el HTML (que vuelve a su flujo
       natural) se vea bien. En escritorio, catalog.js sigue inicializando el
       carrusel exactamente igual que antes; nada de este bloque se aplica. */

    /* Contenedores exteriores: eran de ancho fijo en em (86-87.2em ≈
       860-872px, ver style.css). La altura fija de .slideshow-content-out2
       (352px, pensada para 1 imagen de producto) se libera para no recortar
       la lista apilada. */
    .slideshow-content-out,
    .slideshow-content-out2 {
        width: 100%;
        height: auto;
    }
    .slideshow-content,
    .slideshow-content2 {
        width: 100%;
    }

    /* Flechas: sin carrusel, no hay nada que mover. */
    .arrow-left,
    .arrow-right,
    .arrow-left2,
    .arrow-right2 {
        display: none;
    }

    /* .left (imagen/ficha flotada junto a su texto en escritorio): se apila.
       Compartida por el fundido de sección, la ficha de producto (aquí) y el
       catálogo de descargas (§4, misma regla, no se repite allí). */
    .left {
        float: none;
    }

    /* Fundido de sección (Nivel 1, .catalog-fade): mismo patrón que el
       carrusel de la home (D046) — width:100% + aspect-ratio en vez de
       ancho/alto fijos, sin tocar initFade() (solo alterna opacidad). */
    .catalog-fade {
        width: 100%;
        max-width: 542px;
        height: auto;
        aspect-ratio: 542 / 356;
    }
    .catalog-fade .slideshowItem {
        width: 100%;
        height: 100%;
    }

    /* Subfamilias/modelos: de carrusel horizontal a lista vertical — cada
       modelo en su fila (imagen 150×100 + nombre al lado, scroll vertical
       normal). ul.slideshow2-items li .slideshow-item (más específico que el
       .slideshow-item a secas del sub-bloque 2, que es para la rejilla de
       la home) fija el tamaño del thumbnail solo en este contexto. */
    ul.slideshow2-items li {
        float: none;
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 15px;
        text-align: left;
        overflow: hidden; /* contiene el float de .slideshow-item de abajo */
    }
    ul.slideshow2-items li .slideshow-item {
        float: left;
        width: 150px;
        height: 100px;
        margin-right: 15px;
    }
    ul.slideshow2-items li a {
        margin-top: 0;
    }

    /* Productos: de carrusel horizontal (1 visible) a lista vertical; la
       imagen grande se adapta al ancho del móvil (pedido explícito). */
    .savoir-faire {
        width: 100%;
        height: auto;
    }
    .text2 {
        width: 100%;
        margin-left: 0;
    }
    /* Fleco de D049: .text2 ya era fluido (arriba), pero h2.section/
       h3.collection/h4/dl seguían con text-align:right (pensado para pegar
       el texto al borde de la columna estrecha de escritorio) y a.extend
       ("+detail") seguía con float:right — con el contenedor ya a todo el
       ancho, ambas cosas quedaban ancladas al borde derecho de la pantalla,
       dando sensación de desborde/corte. */
    h2.section,
    h3.collection,
    h4,
    dl {
        text-align: left;
    }
    a.extend {
        float: none;
        display: block;
    }

    /* --- §2/§3 Cuenta (9 plantillas: login/registro/perfil/cambiar y
       recuperar contraseña/reenvío de activación/activar/locked) y contacto
       — comparten el contenedor #main.users (890px fijo) + columnas
       #register-left/#register-right/#user (fijas, lado a lado). Se apilan
       y los campos pasan a ocupar el ancho disponible. */
    #main.users {
        width: auto;
        padding: 10px;
    }
    #register-left,
    #register-right,
    #user {
        float: none;
        width: auto;
        margin-left: 0;
    }
    input.register {
        width: 100%;
        box-sizing: border-box;
    }
    /* La caja de mensaje de /contact es un <textarea class="register">:
       .register (input.register en style.css) no le aplica por ser selector
       de <input>; el ancho fijo (333px) le llega por el otro selector,
       "input.text,textarea" — se iguala aquí solo la parte "textarea". */
    textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- §4 Catálogo de descargas (/catalogue) y §5 páginas legales
       (aviso legal, privacidad, cookies) — sin scroll horizontal (.text3 ya
       era relativo, 80%), solo pulido: usar el ancho completo y recuperar
       los 35px de margen que #main reserva sin necesidad en móvil. Beneficia
       también a catalog.php/404.php, que comparten el mismo #main. */
    #main {
        margin-left: 0;
    }
    .text {
        width: auto;
    }
    .text3 {
        width: auto;
    }

    /* Márgenes laterales del catálogo (D052): #content llegaba con
       padding:0 (style.css) y #main con margin-left:0 (arriba), así que el
       contenido de catálogo quedaba pegado al borde de la pantalla. Scoped
       SOLO a catálogo (data-catalog-page, ver templates/layout.php) — home,
       contacto, legales, descargas y cuenta no llevan este atributo y
       siguen exactamente igual que antes (D043/D049). */
    [data-catalog-page] #content {
        padding: 0 1.2em;
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------
       Catálogo — comportamiento responsive definitivo (D054), tras la
       elección del cliente entre las 3 opciones comparadas en D050-D052
       (docs/RESPONSIVE-OPCIONES-CATALOGO.md, ya retiradas):
         Nivel 1 (sección)   — sin restilo aquí: se queda en la lista
                                vertical base de arriba (D049), elección
                                del cliente para esta página (D048 no se
                                reabre: sigue sin listar productos).
         Nivel 2 (colección) — el carrusel de subfamilias hermanas pasa de
                                lista vertical a fila horizontal de texto
                                con scroll-snap, arriba del todo; el cuerpo
                                de producto es la lista vertical base, sin
                                cambios.
         Nivel 3 (producto)  — igual que Nivel 2 (misma lista completa,
                                D048) + resaltado del producto de la URL
                                (el scroll lo ancla catalog.js).
       ------------------------------------------------------------------ */

    /* Sube la fila de subfamilias arriba del todo con flexbox + order, sin
       tocar el HTML/PHP. Los <div class="clear"> (clearfix, innecesario en
       flex) se ocultan solo aquí. Nivel 1 (sección) queda fuera a
       propósito — el cliente eligió mantenerlo igual que el @media base. */
    #main[data-catalog-view="subfamily"],
    #main[data-catalog-view="product"] {
        display: flex;
        flex-direction: column;
    }
    #main[data-catalog-view="subfamily"] > .clear,
    #main[data-catalog-view="product"] > .clear {
        display: none;
    }
    #main[data-catalog-view="subfamily"] .slideshow-content-out,
    #main[data-catalog-view="product"] .slideshow-content-out {
        order: -1;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-bottom: 1em;
    }
    #main[data-catalog-view="subfamily"] .slideshow-content,
    #main[data-catalog-view="product"] .slideshow-content {
        width: max-content;
    }
    #main[data-catalog-view="subfamily"] ul.slideshow2-items,
    #main[data-catalog-view="product"] ul.slideshow2-items {
        display: flex;
        flex-wrap: nowrap;
    }
    #main[data-catalog-view="subfamily"] ul.slideshow2-items li,
    #main[data-catalog-view="product"] ul.slideshow2-items li {
        float: none;
        width: auto;
        height: auto;
        margin-right: 1.2em;
        margin-bottom: 0;
        text-align: left;
        scroll-snap-align: start;
        overflow: visible;
    }
    /* Sin miniatura — solo la pastilla de texto (D052). */
    #main[data-catalog-view="subfamily"] ul.slideshow2-items li .slideshow-item,
    #main[data-catalog-view="product"] ul.slideshow2-items li .slideshow-item {
        display: none;
    }
    #main[data-catalog-view="subfamily"] ul.slideshow2-items li a,
    #main[data-catalog-view="product"] ul.slideshow2-items li a {
        display: inline-block;
        padding: .6em 0;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }
    #main[data-catalog-view="subfamily"] ul.slideshow2-items li a.active,
    #main[data-catalog-view="product"] ul.slideshow2-items li a.active {
        border-bottom-color: #3E554E;
    }

    /* Nivel 3 (D054): resalta el producto de la URL dentro de la lista
       vertical completa (idéntica a Nivel 2, D048) — marca de orientación
       sutil, mismo verde que ya usa .active en el resto del sitio; el
       scroll lo ancla catalog.js (anchorPrimaryProduct). Sin esto, Nivel 2
       y Nivel 3 se verían idénticos en móvil. */
    #main[data-catalog-view="product"] li.product-slide:not(.not-primary) {
        border-left: 3px solid #3E554E;
        padding-left: .8em;
    }
}