/* ==========================================================================
   CDM / COMEDIMA - responsive.css
   Mobile First - breakpoints optimizados para:
   320px | 375px | 425px | 768px | 1024px | 1366px | 1600px | 1920px
   ========================================================================== */

/* ============================ BASE MOBILE (<= 425px) ============================ */
@media (max-width: 425px) {
    .container {
        padding-inline: var(--space-4);
    }

    .section {
        padding-block: var(--space-7);
    }

    /* Hero: una sola columna, tarjeta login debajo del texto */
    .hero {
        padding-top: calc(var(--nav-h) + var(--space-5));
        min-height: auto;
    }
    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-top: var(--space-6);
        padding-bottom: var(--space-7);
    }
    .hero__card {
        margin: 0 auto;
        max-width: 100%;
    }
    .hero__buttons {
        flex-direction: column;
    }
    .hero__buttons .btn {
        width: 100%;
    }
    .hero__scroll {
        display: none;
    }

    /* Menu movil: panel desplegable */
    .nav__toggle {
        display: flex;
    }
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(80vw, 320px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-5);
        padding: calc(var(--nav-h) + var(--space-5)) var(--space-5) var(--space-5);
        background: var(--bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--t) var(--ease-out);
        overflow-y: auto;
        z-index: 1001;
    }
    .nav__menu.is-open {
        transform: translateX(0);
    }
    /* En movil, links en color de texto (no blanco sobre fondo claro) */
    .header.is-solid .nav__menu .nav__link,
    .nav__menu .nav__link {
        color: var(--gray-700);
        font-size: 1rem;
    }
    .nav__menu .nav__link:hover {
        color: var(--yellow-dark);
    }
    .nav__menu .lang-toggle,
    .nav__menu .theme-toggle {
        background: var(--gray-100);
        color: var(--gray-700);
    }
    .nav__lang {
        width: 100%;
    }
    .lang-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gray-100);
        margin-top: 8px;
    }
    .lang-menu:not(.is-open) {
        display: none;
    }

    /* Grids a 1 columna */
    .what-grid {
        grid-template-columns: 1fr;
    }
    .about__cols {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .about__cards {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact__wrap {
        padding: var(--space-5);
    }

    .cta__title {
        font-size: 1.6rem;
    }
    .back-top {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ============================ 375px y menores ============================ */
@media (max-width: 375px) {
    .hero__title {
        font-size: 2rem;
    }
    .section__title {
        font-size: 1.6rem;
    }
    .stat__num {
        font-size: 1.8rem;
    }
    .stats__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================ TABLET (426px - 768px) ============================ */
@media (min-width: 426px) and (max-width: 768px) {
    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
    .hero__card {
        margin: 0 auto;
        max-width: 460px;
    }
    .hero__scroll {
        display: none;
    }

    /* Menu movil sigue activo hasta 768px */
    .nav__toggle {
        display: flex;
    }
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(70vw, 340px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
        padding: calc(var(--nav-h) + var(--space-5)) var(--space-5) var(--space-5);
        background: var(--bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--t) var(--ease-out);
        overflow-y: auto;
        z-index: 1001;
    }
    .nav__menu.is-open {
        transform: translateX(0);
    }
    .nav__menu .nav__link {
        color: var(--gray-700);
    }
    .nav__menu .lang-toggle,
    .nav__menu .theme-toggle {
        background: var(--gray-100);
        color: var(--gray-700);
    }
    .nav__lang {
        width: 100%;
    }
    .lang-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gray-100);
        margin-top: 8px;
    }
    .lang-menu:not(.is-open) {
        display: none;
    }

    .what-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
    .footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* ============================ DESKTOP PEQUENO (769px - 1024px) ============================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero__content {
        grid-template-columns: 1fr .85fr;
        gap: var(--space-6);
    }
    .what-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats__grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .footer__col:nth-child(4) {
        grid-column: 1 / -1;
    }
}

/* ============================ DESKTOP MEDIO (1025px - 1366px) ============================ */
@media (min-width: 1025px) and (max-width: 1366px) {
    :root {
        --container: 1140px;
    }
    .what-grid {
        gap: var(--space-4);
    }
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================ DESKTOP GRANDE (1367px - 1600px) ============================ */
@media (min-width: 1367px) and (max-width: 1600px) {
    :root {
        --container: 1340px;
    }
}

/* ============================ FULL HD / 4K (1601px+) ============================ */
@media (min-width: 1601px) {
    :root {
        --container: 1480px;
        --container-wide: 1760px;
        --nav-h: 84px;
    }
    body {
        font-size: 17px;
    }
    .section {
        padding-block: var(--space-9);
    }
    .hero__title {
        font-size: 5rem;
    }
}

@media (min-width: 1921px) {
    :root {
        --container: 1600px;
        --container-wide: 1920px;
    }
    body {
        font-size: 18px;
    }
    .hero__title {
        font-size: 5.6rem;
    }
}

/* ============================ ORIENTACION PAISAJE EN MOVIL ============================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
    }
    .hero__content {
        padding-top: var(--space-6);
    }
}

/* ==========================================================================
   BUSCADOR (buscador.html) - Responsive especifico
   ========================================================================== */

/* --- Mobile (<= 768px): header del buscador --- */
@media (max-width: 768px) {
    /* El menu centrado pasa a panel lateral como en la landing */
    .nav__brand-sub {
        display: none;
    }
    .nav__actions {
        gap: var(--space-2);
    }
    /* Carrito y tema siempre visibles; idioma se mantiene */
    .nav__menu {
        margin-inline: 0;
    }

    /* Hero del buscador */
    .hero-search {
        padding-top: calc(var(--nav-h) + var(--space-5));
        padding-bottom: var(--space-7);
    }

    /* Caja de busqueda apilada */
    .search-box {
        flex-direction: column;
        border-radius: var(--radius-xl);
        padding: var(--space-3);
    }
    .search-box__btn {
        width: 100%;
        border-radius: var(--radius);
    }

    /* Card del producto: una columna */
    .product-card {
        grid-template-columns: 1fr;
    }
    .product-card__image {
        min-height: 220px;
    }
    .product-card__body {
        padding: var(--space-5);
    }
    .product-card__name {
        font-size: 1.4rem;
    }
    .meta-row {
        grid-template-columns: 130px 1fr;
        gap: var(--space-2);
    }

    /* Header de la tabla */
    .results-table-wrap__head {
        padding: var(--space-4);
    }

    /* Tabla: scroll horizontal (ya tiene .table-scroll) */
    .results-table {
        min-width: 760px;
    }

    /* OffCanvas a ancho completo en movil */
    .cart-panel {
        width: 100vw;
    }

    /* Plantilla de cotizacion */
    .quote-head {
        flex-direction: column;
        gap: var(--space-3);
    }
    .quote-head__data {
        text-align: left;
    }
    .quote-foot {
        flex-direction: column;
    }
    .quote-foot .btn {
        width: 100%;
    }
}

/* --- 320px --- */
@media (max-width: 375px) {
    .hero-search__title {
        font-size: 1.7rem;
    }
    .search-chips__label {
        width: 100%;
        margin-bottom: 4px;
    }
    .product-card__name {
        font-size: 1.2rem;
    }
    .meta-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .meta-row dt {
        font-size: .75rem;
    }
    .cart-panel__actions {
        grid-template-columns: 1fr;
    }
}

/* --- Portal >= 769px: el menu en linea no parte "Mis pedidos" en dos lineas --- */
@media (min-width: 769px) {
    .header--glass .nav__menu .nav__link {
        white-space: nowrap;
    }
}

/* --- Portal 769px - 940px: menu en linea + isotipo (app_head.php) -> sin subtitulo --- */
@media (min-width: 769px) and (max-width: 940px) {
    .nav__brand-sub {
        display: none;
    }
}

/* --- Tablet (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-card {
        grid-template-columns: 280px 1fr;
    }
    .nav__brand-sub {
        font-size: .68rem;
    }
}

/* --- Desktop medio (1025px - 1366px) --- */
@media (min-width: 1025px) and (max-width: 1366px) {
    .product-card {
        grid-template-columns: 320px 1fr;
    }
}


/* ============================ FIX MENÚ MÓVIL — legibilidad (2026-10-09) ============================ */
/* Corrige 3 problemas de contraste del menú lateral (landing + portal), solo apariencia.
   Se aplica únicamente en el ancho del menú móvil (<=768px). */
@media (max-width: 768px) {
    /* (1) Modo OSCURO: los enlaces del drawer se veían grises y se perdían.
           Se ponen en blanco (cubre también el estado .is-solid del header). */
    [data-theme="dark"] .nav__menu .nav__link,
    [data-theme="dark"] .header.is-solid .nav__menu .nav__link {
        color: var(--white);
    }
    [data-theme="dark"] .nav__menu .nav__link:hover,
    [data-theme="dark"] .nav__menu .nav__link.is-active {
        color: var(--yellow);
    }

    /* (2) Botón cerrar (X = barras del toggle) al abrir el menú:
           modo CLARO -> negro (antes blanco sobre panel blanco, no se veía);
           modo OSCURO -> blanco (panel oscuro). */
    .nav__toggle.is-open span {
        background: var(--black);
    }
    [data-theme="dark"] .nav__toggle.is-open span {
        background: var(--white);
    }

    /* (3) PORTAL, con el menú abierto: las acciones (idioma/tema/carrito/hamburguesa)
           viven en .nav__actions, que es hermano POSTERIOR de #navMenu. Al abrir, quedan
           sobre el panel del drawer; en modo claro, al ser blancas, no se veían.
           IMPORTANTE: el JS del portal (app_foot.php) solo marca #navMenu.is-open (NO
           #navToggle.is-open), por eso se usa el combinador de hermanos "~" y NO
           .nav__toggle.is-open (que sí existe en la landing). Así funciona en ambos.
           (En modo oscuro el panel es oscuro y los iconos blancos ya se ven.) */
    [data-theme="light"] .nav__menu.is-open ~ .nav__actions .lang-toggle,
    [data-theme="light"] .nav__menu.is-open ~ .nav__actions .theme-toggle,
    [data-theme="light"] .nav__menu.is-open ~ .nav__actions .cart-btn {
        background: var(--gray-100);
        color: var(--gray-700);
    }
    /* Barras del botón de menú (hamburguesa) del portal visibles con el menú abierto:
       claro -> negras; oscuro -> blancas. (La landing usa .nav__toggle.is-open, arriba.) */
    [data-theme="light"] .nav__menu.is-open ~ .nav__actions .nav__toggle span {
        background: var(--black);
    }
    [data-theme="dark"] .nav__menu.is-open ~ .nav__actions .nav__toggle span {
        background: var(--white);
    }
}