/* ============================================================
   GRUPO IMPORTIX - MAYORISTAS
   Hoja de estilos separada de mayoristas.php para mantener el
   PHP corto y legible. Misma paleta de marca usada en el resto
   del sitio (index.html, contacto.html, quienes-somos.html).
   ============================================================ */

:root {
    --ambientacion: #046974;
    --azul-nav: #00828A;
    --oscuro: #0a192f;
    --footer-bg: #052e32;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; }

.icon { flex-shrink: 0; vertical-align: middle; }

html { overflow-x: hidden; }
body {
    background-color: #f4f6f9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 190px;
    overflow-x: hidden;
}
/* body es flex-column (para el footer pegado abajo) — por eso CADA sección
   directa (el carrusel, "Los Más Vendidos", etc.) es un flex-item. Probado
   en vivo: ni min-width:0 solo ni "stretch" (el comportamiento por
   defecto) alcanzaban para que la sección respetara el ancho real de la
   pantalla — hacía falta un width:100% explícito. Esta era la causa real
   de fondo de que varias secciones se vieran cortadas/estiradas en
   celular; no era el carrusel en sí, era esto. */
body > * { width: 100%; min-width: 0; box-sizing: border-box; }

/* ---------- TOAST DE MENSAJES (login/registro) ---------- */
.flash-message {
    position: fixed;
    top: 195px;
    right: 20px;
    z-index: 300000;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: flashIn 0.35s ease;
}
.flash-error { background: #b91c1c; }
.flash-success { background: #047857; }
.flash-message button { background: none; border: none; color: white; font-size: 18px; cursor: pointer; line-height: 1; opacity: 0.8; }
.flash-message button:hover { opacity: 1; }
.flash-message-text { display: flex; align-items: center; gap: 10px; }
@keyframes flashIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- HEADER FIJO ---------- */
.fixed-header-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: white;
}

.top-marquee {
    background: var(--ambientacion);
    color: white; overflow: hidden;
    white-space: nowrap; padding: 8px 0;
    font-size: 13px; font-weight: 600;
    position: relative; z-index: 10;
}
/* Mismo criterio que el ticker de index.html / contacto.html / quienes-somos.html:
   padding-left:100% arranca el texto totalmente fuera de pantalla a la derecha,
   y translate3d(-100%) lo recorre por completo hasta salir por la izquierda,
   para luego reaparecer de nuevo por la derecha en cada vuelta. */
.marquee-track { display: inline-block; white-space: nowrap; padding-left: 100%; animation: scrollMarquee 25s linear infinite; }
.top-marquee[data-editable="true"] { cursor: pointer; }
@keyframes scrollMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

.main-header {
    padding: 6px 50px; background: var(--azul-nav);
    display: flex; flex-direction: column; gap: 6px;
    position: relative; z-index: 20;
}

.top-utility-nav { display: flex; justify-content: center; gap: 25px; font-size: 14px; width: 100%; }
.top-utility-nav a { text-decoration: none; color: rgba(255,255,255,0.85); font-weight: 600; cursor: pointer; }
.top-utility-nav a:hover { color: white; }

.header-search-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; position: relative; }

.logo-area {
    display: inline-flex; align-items: center;
    text-decoration: none !important;
    cursor: pointer !important; user-select: none; white-space: nowrap;
    overflow: visible;
}
.logo-img { height: 125px; width: auto; display: block; margin-top: -40px; margin-bottom: 0; position: relative; z-index: 30; }

.search-container { flex-grow: 1; max-width: 520px; position: relative; display: flex; }

/* En desktop se arma como grilla de 3 columnas (logo / buscador / usuario)
   en vez de centrar el buscador con "left:50%" del ancho total del header.
   Con esa cuenta vieja, el punto central caía encima del logo en pantallas
   más chicas o con otro zoom (el logo pesa distinto según el ancho real
   disponible) — con columnas de grilla el buscador nunca puede invadir el
   espacio del logo, sin importar el tamaño de pantalla. */
@media (min-width: 769px) {
    .header-search-row {
        display: grid;
        grid-template-columns: minmax(160px, auto) minmax(460px, 1fr) minmax(160px, auto);
        align-items: center;
    }
    .logo-area { justify-self: start; }
    /* Ancho fijo (no fluido): así el buscador siempre se ve del mismo
       tamaño y en el mismo lugar, sea cual sea el ancho de la ventana —
       no se achica ni se mueve al redimensionar, igual que el logo y el
       menú de usuario, que tampoco cambian de tamaño. */
    .search-container { position: static; justify-self: center; flex-grow: 0; width: 460px; max-width: 460px; }
    .user-actions { justify-self: end; margin-left: 0; }
}
.search-container input {
    width: 100%; padding: 8px 40px 8px 16px;
    border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13.5px; outline: none;
}
.search-container .search-icon {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    color: var(--azul-nav); pointer-events: none; display: flex;
}

.user-actions { display: flex; align-items: center; gap: 20px; font-size: 14px; position: relative; white-space: nowrap; }
.user-actions a, .user-actions button {
    text-decoration: none; color: rgba(255,255,255,0.9); font-weight: 500; background: none; border: none; cursor: pointer; font-size: 14px;
}
.user-actions a:hover, .user-actions button:hover { color: white; }

.user-dropdown { position: relative; display: inline-block; }
.user-dropdown-btn {
    cursor: pointer; font-weight: 600; color: white; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 4px; user-select: none;
}
.user-dropdown-btn:hover { background: #f1f5f9; color: var(--ambientacion); }
.user-dropdown-arrow { font-size: 10px; transition: transform 0.2s ease; }
.user-dropdown.active .user-dropdown-arrow { transform: rotate(180deg); }
.user-dropdown-menu {
    position: absolute; top: 100%; right: 0; background: white; min-width: 200px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-radius: 6px; border: 1px solid #e2e8f0;
    padding: 8px 0; display: none; z-index: 999999;
}
.user-dropdown.active .user-dropdown-menu { display: block !important; }
.user-dropdown-menu a {
    display: flex; align-items: center; gap: 8px; padding: 10px 15px;
    color: #334155 !important; text-decoration: none; font-size: 13px !important;
}
.user-dropdown-menu a:hover { background-color: #f8fafc; color: var(--ambientacion) !important; }

.cart-link { font-weight: 600 !important; position: relative; display: inline-flex !important; align-items: center; gap: 6px; }
.cart-badge { background-color: var(--ambientacion); color: white; border-radius: 50%; padding: 2px 7px; font-size: 11px; }

.btn-icon-label { display: inline-flex; align-items: center; gap: 6px; }
.admin-header h2 { display: flex; align-items: center; gap: 10px; }

/* ---------- BARRA AZUL DE NAVEGACIÓN ---------- */
.nav-bar { background: var(--azul-nav); position: relative; z-index: 10; }
.nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; max-width: 1200px; margin: 0 auto; }
.nav-item { position: relative; }
/* El <a> ahora vive adentro de .nav-item-row (junto al botón ▾ de celular),
   ya no es hijo directo de .nav-item — en PC .nav-item-row es invisible
   (mismo aspecto de siempre), el botón se esconde por CSS. */
.nav-mobile-toggle { display: none; }
.nav-item-row { display: flex; align-items: center; }
.nav-item-row > a { display: block; padding: 18px 20px; color: white; text-decoration: none; font-size: 14px; font-weight: bold; }
.nav-item:hover .nav-item-row > a { background: rgba(0, 0, 0, 0.1); }
.nav-item-expand-btn { display: none; }
/* Mega-menú: hasta 10 subcategorías por columna (grid-auto-flow: column),
   y si una categoría tiene más de 10, se agrega sola otra columna al lado
   — nunca hay que scrollear adentro. Cada columna se estira a lo ancho de
   su nombre más largo (grid-auto-columns: max-content) en vez de repartir
   el ancho fijo entre 10 columnas parejas, así los nombres van en una sola
   línea sin amontonarse. */
.dropdown-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--footer-bg);
    box-shadow: 0 10px 24px rgba(0,0,0,0.3); list-style: none; display: none; border-radius: 0 0 10px 10px; z-index: 100;
    padding: 18px 24px;
    width: max-content; max-width: 92vw;
    grid-template-rows: repeat(10, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 30px; row-gap: 5px;
}
.dropdown-menu li { min-width: 0; }
.dropdown-menu li a { display: block; padding: 7px 14px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 13px; white-space: nowrap; line-height: 1.3; border-radius: 5px; }
.dropdown-menu li a:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item:hover .dropdown-menu { display: grid; }

/* ---------- CARRUSEL DE BANNERS ---------- */
.carousel-outer {
    width: 100%; background-color: #ffffff; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 750px; border-bottom: 2px solid #e2e8f0; z-index: 1;
}
/* Tope de ancho: en pantallas gigantes (o media pantalla de una gigante),
   sin este tope el contenedor se estira muchísimo pero el alto sigue fijo
   en 750px, así que la imagen de fondo (background-size: cover) se ve
   obligada a agrandarse mucho más para "cubrir" ese ancho — por eso se
   veía con zoom / recortada. Con el tope, de ahí para arriba el carrusel
   se centra y dejar de estirarse, en vez de seguir creciendo sin límite. */
.carousel-track-container { width: 100%; max-width: 1920px; height: 100%; overflow: hidden; position: relative; }
.carousel-track { display: flex; width: 500%; height: 100%; transition: transform 0.6s ease; }
.carousel-slide-main { width: 20%; height: 100%; position: relative; overflow: hidden; }

/* Las imágenes del carrusel ahora están hechas a medida para ocupar todo
   el ancho y alto de la caja, de lado a lado, sin bordes ni fondo. */
.carousel-slide-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.main-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px;
    background-color: var(--ambientacion); color: white; border-radius: 50%; display: flex; justify-content: center;
    align-items: center; cursor: pointer; z-index: 5; font-size: 18px; font-weight: bold; border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: background-color 0.2s;
}
.main-carousel-arrow:hover { background-color: var(--azul-nav); }
.main-arrow-left { left: 20px; }
.main-arrow-right { right: 20px; }

.carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }
.dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; }
.dot.active { background-color: #ffffff; transform: scale(1.3); }

/* ---------- PRODUCTOS EN PORTADA ---------- */
.products-section { max-width: 1380px; margin: 30px auto; padding: 0 15px; position: relative; z-index: 1; }
.section-title { font-size: 20px; color: #0056b3; margin-bottom: 15px; text-transform: uppercase; font-weight: bold; }
.carousel-container { display: flex; align-items: center; position: relative; }

.products-grid-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    padding: 5px 2px;
}
.products-grid-scroll::-webkit-scrollbar { display: none; }

/* ---------- VISTA DE CATEGORÍA (al clickear una categoría/subcategoría) ---------- */
.category-view-section { max-width: 1380px; margin: 30px auto; padding: 0 15px; position: relative; z-index: 1; }
.category-breadcrumb { font-size: 12.5px; color: #64748b; margin-bottom: 18px; }
.category-breadcrumb a { color: var(--azul-nav); text-decoration: none; font-weight: 600; }
.category-breadcrumb a:hover { text-decoration: underline; }
.category-breadcrumb strong { color: var(--oscuro); }

.category-layout { display: grid; grid-template-columns: 215px 1fr; gap: 26px; align-items: start; }

.category-sidebar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; }
/* Botones de "Ver subcategorías" / "Filtros": solo existen para celular
   (ver el @media más abajo) — en PC quedan ocultos y todo se ve siempre
   desplegado como antes. */
.mobile-accordion-toggle { display: none; }
.category-sidebar-title { font-size: 17px; font-weight: 800; color: var(--oscuro); text-transform: uppercase; margin-bottom: 12px; }
.category-subcat-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.category-subcat-list a { display: block; padding: 6px 8px; border-radius: 5px; color: #475569; text-decoration: none; font-size: 13.5px; }
.category-subcat-list a:hover { background: rgba(4, 105, 116, 0.08); color: var(--ambientacion); }

.filter-group { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--oscuro); margin-bottom: 12px; font-weight: 800; }

.filter-color-list { display: flex; flex-direction: column; gap: 8px; }
.filter-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.filter-checkbox-row input { accent-color: var(--ambientacion); width: 15px; height: 15px; cursor: pointer; }

.filter-price-range { display: flex; align-items: center; gap: 8px; }
.filter-price-range input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12.5px; }

.filter-bulk-list { display: flex; flex-direction: column; gap: 6px; }
.filter-bulk-btn {
    text-align: left; background: white; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 7px 10px; font-size: 12.5px; color: #475569; cursor: pointer; transition: all 0.15s;
}
.filter-bulk-btn:hover { border-color: var(--azul-nav); color: var(--azul-nav); }
.filter-bulk-btn.active { background: var(--ambientacion); border-color: var(--ambientacion); color: white; font-weight: 700; }

.category-main { min-width: 0; }
.category-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.category-toolbar select { padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #334155; background: white; cursor: pointer; }

.products-grid-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.products-grid-wrap .product-card { min-width: 0; max-width: none; width: 100%; }

@media (max-width: 1150px) {
    .products-grid-wrap { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .products-grid-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    /* 2 por fila en celular, no 1 sola columna — se pidió así a propósito. */
    .products-grid-wrap { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 900px) {
    .category-layout { grid-template-columns: 1fr; }
    /* Filtros/subcategorías van ANTES que los productos en celular — se
       pidió así a propósito, para elegir el filtro antes de ver resultados. */
    .category-sidebar { order: 1; }
    .category-main { order: 2; }
}

.product-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 242px;
    max-width: 242px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: auto !important;
    min-height: 390px;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,0.1); }

.product-card-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; margin-bottom: 6px; position: relative; z-index: 10; height: 20px;
}

.product-code {
    font-size: 11px; color: #475569; font-weight: 700;
    background: #f1f5f9; padding: 2px 6px; border-radius: 4px; border: 1px solid #e2e8f0;
}

.stock-badge { font-size: 10px; font-weight: bold; padding: 3px 8px; border-radius: 4px; line-height: 1; }
.badge-in-stock { background: #d1fae5; color: #047857; }
.badge-low-stock { background: #fef3c7; color: #b45309; }
.badge-out-stock { background: #fee2e2; color: #b91c1c; }

.product-img-box {
    height: 130px; width: 100%;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 8px; overflow: hidden; border-radius: 6px; position: relative;
    background: #f8fafc; border: 1px solid #f1f5f9;
}
.product-img-box .media-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.product-img-box img, .product-img-box video {
    max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;
}

.card-media-nav {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.product-card:hover .card-media-nav { opacity: 1; }
.card-media-btn {
    background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%;
    width: 22px; height: 22px; font-size: 11px; cursor: pointer; display: flex;
    justify-content: center; align-items: center; pointer-events: auto;
}
.card-media-btn:hover { background: rgba(0,0,0,0.8); }
.media-counter-badge {
    position: absolute; bottom: 4px; right: 6px; background: rgba(0,0,0,0.6);
    color: white; font-size: 9px; padding: 1px 5px; border-radius: 10px; font-weight: bold;
}

.product-name {
    font-size: 11.5px; text-align: center; color: #334155; font-weight: 700; line-height: 1.25;
    min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px;
}

.product-details-pills { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-bottom: 6px; min-height: 18px; }
.detail-pill { background: #f1f5f9; color: #475569; font-size: 8.5px; padding: 2px 5px; border-radius: 3px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }

.price-box-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; margin-bottom: 8px; text-align: center; }
.price-main { font-size: 14px; color: #0056b3; font-weight: bold; }
.price-unit { font-size: 9.5px; color: #64748b; margin-top: 1px; }
.discount-badge { display: inline-block; background: #b91c1c; color: white; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 10px; margin-bottom: 3px; }
.price-strike { font-size: 10.5px; color: #94a3b8; text-decoration: line-through; }
.price-main-discounted { color: #b91c1c !important; }

.product-actions-row { display: flex; gap: 5px; align-items: center; margin-top: auto; }
.quantity-control { display: flex; border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; overflow: hidden; }
.quantity-control button { border: none; background: none; padding: 6px 8px; cursor: pointer; font-weight: bold; color: #64748b; font-size: 12px; }
.quantity-control button:hover { background-color: #e2e8f0; }
.quantity-control input { width: 26px; text-align: center; border: none; font-size: 12px; outline: none; }
.btn-add-cart {
    flex-grow: 1; background: var(--azul-nav); color: white; border: none; padding: 7px; border-radius: 4px; font-size: 10.5px; font-weight: bold; cursor: pointer; text-transform: uppercase;
}
.btn-add-cart:hover { background: var(--ambientacion); }

.arrow-btn {
    background: white; border: 1px solid #cbd5e1; width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; z-index: 10; box-shadow: 0 4px 6px rgba(0,0,0,0.05); font-size: 15px; color: #64748b;
}
.arrow-prev { left: -16px; }
.arrow-next { right: -16px; }

/* ---------- MODALES GENÉRICOS (auth / admin / pedidos) ---------- */
.auth-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10, 25, 47, 0.7); backdrop-filter: blur(4px); z-index: 200000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all 0.3s ease;
}
.auth-overlay.active { opacity: 1; pointer-events: all; }
#variantsModal { z-index: 200001; }
#folderVideoModal { z-index: 200001; }
#rolesEditorModal { z-index: 200001; }
#customAttrModal { z-index: 200001; }
#exportPdfModal { z-index: 200001; }
#saveSuccessModal { z-index: 200001; }
.save-success-card { max-width: 480px; text-align: center; }
.save-success-banner { width: 100%; height: auto; display: block; }
/* Login/registro tiene que poder aparecer arriba de TODO lo demás (por
   ejemplo, si tocás "Añadir al carrito" sin sesión mientras el modal de
   producto está abierto) — antes quedaba tapado por #productModal. */
#authModal { z-index: 200002; }
.custom-attr-type-option {
    display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px;
    border: 1.5px solid #e2e8f0; border-radius: 8px; background: #f8fafc; cursor: pointer; transition: all 0.15s;
}
.custom-attr-type-option:hover { border-color: var(--azul-nav); background: #f0fdff; }
.custom-attr-type-option strong { font-size: 13.5px; color: var(--oscuro); }
.custom-attr-type-option span { font-size: 11.5px; color: #64748b; }
.roles-summary { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; }
.role-chip-mini { background: #e2e8f0; color: #334155; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 8px; }
.auth-card { background: #ffffff; width: 100%; max-width: 420px; border-radius: 12px; padding: 25px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); position: relative; transform: translateY(20px); transition: all 0.3s ease; }
.auth-overlay.active .auth-card { transform: translateY(0); }
.auth-close-btn { position: absolute; top: 15px; right: 20px; font-size: 24px; background: none; border: none; color: #94a3b8; cursor: pointer; }

.auth-tabs { display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; margin-top: 10px; }
.auth-tab-btn { flex: 1; padding: 10px 0; background: none; border: none; font-size: 15px; font-weight: 700; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; text-align: center; }
.auth-tab-btn.active { color: var(--azul-nav); border-bottom-color: var(--azul-nav); }

.auth-forgot-link { display: block; text-align: center; margin-top: 15px; font-size: 12.5px; color: #00828A; text-decoration: none; font-weight: 600; }
.auth-forgot-link:hover { text-decoration: underline; color: var(--ambientacion); }

.password-field-wrapper { position: relative; display: flex; }
.password-field-wrapper input { padding-right: 40px !important; }
.password-toggle-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #94a3b8;
    display: flex; align-items: center; justify-content: center; padding: 6px;
}
.password-toggle-btn:hover { color: var(--azul-nav); }


.admin-modal-card {
    width: 98vw !important; max-width: 98vw !important; height: 96vh !important; max-height: 96vh !important;
    display: flex; flex-direction: column; padding: 20px; overflow: hidden; border-radius: 8px;
}
.admin-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.admin-header h2 { font-size: 20px; color: var(--oscuro); }

.admin-body-layout { display: flex; gap: 15px; flex-grow: 1; overflow: hidden; }

.admin-sidebar-providers {
    width: 200px; flex-shrink: 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overflow-x: hidden;
}
.sidebar-title { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; margin-bottom: 5px; }
.provider-tab-btn {
    padding: 8px 10px; min-height: 38px; box-sizing: border-box; flex-shrink: 0; border: 1px solid #cbd5e1; background: white; border-radius: 6px; font-size: 12px; font-weight: 600; color: #334155; text-align: left; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
/* El nombre del proveedor tiene que poder achicarse y pasar a la línea de
   abajo si no entra — sin esto, un flex item de texto por defecto no se
   achica más allá de su ancho sin cortar (min-width:auto), y el botón
   terminaba desbordando para el costado con scroll horizontal en vez de
   mostrar el nombre completo. */
.provider-tab-btn span:first-child { min-width: 0; overflow-wrap: break-word; white-space: normal; }
.provider-tab-btn span:last-child { flex-shrink: 0; }
.provider-tab-btn:hover { background: #f1f5f9; color: var(--azul-nav); }
.provider-tab-btn.active { background: var(--azul-nav); color: white; border-color: var(--azul-nav); }

.admin-main-area { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.admin-nav-tabs { display: flex; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #cbd5e1; }
.admin-tab-btn { padding: 8px 16px; border: none; background: #e2e8f0; font-weight: 600; font-size: 13px; color: #475569; border-radius: 6px 6px 0 0; cursor: pointer; }
.admin-tab-btn.active { background: var(--azul-nav); color: white; }

.admin-panel-content { flex-grow: 1; overflow-y: auto; padding-right: 5px; }

.import-box { display: flex; flex-direction: column; gap: 12px; }
.import-box textarea { width: 100%; height: 160px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: monospace; font-size: 12px; }
.btn-process { background: var(--azul-nav); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 13px; }
.costos-modo-toggle { display: flex; border: 1px solid var(--azul-nav); border-radius: 6px; overflow: hidden; }
.costos-modo-btn { background: #fff; color: var(--azul-nav); border: none; padding: 7px 16px; font-weight: bold; cursor: pointer; font-size: 12px; }
.costos-modo-btn.active { background: var(--azul-nav); color: #fff; }
.btn-danger { background: #d93025; color: white; border: none; padding: 6px 10px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0; }
.admin-pagination-info { font-size: 12px; color: #64748b; font-weight: 600; }
.admin-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-table th { background: #f8fafc; padding: 8px 6px; text-align: left; border-bottom: 2px solid #e2e8f0; color: #475569; position: sticky; top: 0; z-index: 5; }
.admin-table td { padding: 8px 6px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.admin-table input[type="text"], .admin-table input[type="number"], .admin-table select { width: 100%; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11px; margin-bottom: 3px; }

/* ---------- TARJETAS DE PRODUCTO (Inventario, en vertical) ---------- */
.admin-cards-list { display: flex; flex-direction: column; gap: 6px; }
.admin-product-card { border: 1px solid #e2e8f0; border-radius: 8px; background: #ffffff; overflow: hidden; }
.admin-card-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
.admin-product-card.collapsed .admin-card-topbar { border-bottom: none; }
.admin-product-card.collapsed .admin-card-body { display: none; }
.admin-card-summary { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.admin-card-chevron { flex-shrink: 0; font-size: 10px; color: #94a3b8; width: 10px; }
.admin-card-summary-code { flex-shrink: 0; font-size: 11px; font-weight: 800; color: #334155; }
.admin-card-summary-name { font-size: 11.5px; font-weight: 700; color: #0a192f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-card-summary-provider { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #d97706; background: #fef3c7; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.admin-card-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-card-body { display: flex; flex-direction: column; gap: 0; }
.admin-card-section { padding: 7px 12px; border-bottom: 1px solid #f1f5f9; font-size: 11px; }
.admin-card-section:last-child { border-bottom: none; }
.admin-card-section h5 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #00828A; margin-bottom: 6px; }
.own-attr-field { position: relative; }
.own-attr-remove-btn { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: none; background: #b91c1c; color: white; font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.admin-product-card input[type="text"], .admin-product-card input[type="number"], .admin-product-card select, .admin-product-card textarea {
    width: 100%; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11.5px; margin-bottom: 2px; font-family: inherit;
}
.admin-card-field { margin-bottom: 4px; }
.admin-card-field label { display: block; font-size: 9px; color: #64748b; font-weight: bold; margin-bottom: 2px; }
.admin-card-field .char-count { font-weight: 400; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.admin-card-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 10px; }
.admin-card-price-grid .admin-card-field { margin-bottom: 0; }
.admin-card-price-grid input, .admin-card-price-grid select { width: 100%; height: 28px; padding: 4px 7px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; }
.admin-card-price-result input { background: #f1f5f9; color: #16a34a; font-weight: bold; }
.admin-card-price-result.final input { color: #0056b3; }

.price-flow-label { font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; padding-top: 4px; border-top: 1px dashed #cbd5e1; }
.price-flow-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.media-gallery-grid { display: flex; flex-wrap: wrap; gap: 4px; max-width: 180px; margin-bottom: 6px; }
.media-thumb-box { width: 42px; height: 42px; border: 1px solid #cbd5e1; border-radius: 4px; position: relative; overflow: hidden; background: #000; cursor: grab; }
.media-thumb-box:active { cursor: grabbing; }
.media-thumb-box.media-drag-over { border-color: var(--azul-nav); box-shadow: 0 0 0 2px var(--azul-nav) inset; }
.yt-thumb { width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.yt-play-icon { background: rgba(255,0,0,0.85); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
iframe.main-media-display { width: 100%; height: 100%; border: none; }
.media-thumb-box img, .media-thumb-box video { width: 100%; height: 100%; object-fit: cover; }
.remove-media-btn { position: absolute; top: 1px; right: 1px; background: rgba(217, 48, 37, 0.9); color: white; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-weight: bold; }

.tech-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 10px; min-width: 0; }
.tech-spec-grid label { font-size: 9px; color: #475569; font-weight: bold; display: flex; flex-direction: column; }
.tech-spec-grid input, .tech-spec-grid select { width: 100%; height: 26px; padding: 3px 6px; font-size: 10.5px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; margin-top: 2px; }

.role-group-label { font-weight: 700; font-size: 11.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.role-group-label.role-group-provider { color: #d97706; }
.role-group-label.role-group-category { color: #15803d; }
.role-group-label.role-group-subcategory { color: #475569; }
.role-group-label.role-group-highlight { color: #9d174d; }

/* Se agrandaron nombres y espacios: con muchas categorías/subcategorías
   cargadas quedaban chips minúsculos, apretados, difíciles de leer y de
   tocar — el contenedor ya crece solo hacia abajo (flex-wrap) a medida que
   se agregan más nombres, pero el tamaño de cada chip tenía que ser mayor. */
.roles-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip { background: #e2e8f0; padding: 6px 13px; border-radius: 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }

.roles-masivo-list { display: flex; flex-direction: column; gap: 6px; }
.roles-masivo-row { display: flex; gap: 16px; align-items: flex-start; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #ffffff; }
.roles-masivo-info { flex-shrink: 0; width: 220px; display: flex; flex-direction: column; gap: 2px; }
.roles-masivo-info strong { font-size: 12px; color: #0a192f; }
.roles-masivo-info span { font-size: 10.5px; color: #94a3b8; font-weight: 700; }
.roles-masivo-groups { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.roles-masivo-group { border-left: 3px solid #e2e8f0; padding-left: 10px; }
.roles-masivo-group.roles-masivo-group-provider { border-left-color: #fde68a; }
.roles-masivo-group.roles-masivo-group-category { border-left-color: #bbf7d0; }
.roles-masivo-group.roles-masivo-group-subcategory { border-left-color: #cbd5e1; }
.roles-masivo-group.roles-masivo-group-highlight { border-left-color: #fbcfe8; }
.role-chip.selected { background: var(--azul-nav); color: white; }
.role-chip.provider-chip { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.role-chip.provider-chip.selected { background: #d97706; color: white; border-color: #b45309; }
.role-chip.category-chip { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.role-chip.category-chip.selected { background: #16a34a; color: white; border-color: #15803d; }
.role-chip.subcategory-chip { background: #f1f5f9; color: #475569; border: 1px dashed #cbd5e1; }
.role-chip.subcategory-chip.selected { background: #334155; color: white; border-style: solid; border-color: #334155; }
.role-chip.highlight-chip { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }
.role-chip.highlight-chip.selected { background: var(--ambientacion); color: white; border-color: var(--ambientacion); }

.variant-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; margin-bottom: 14px; background: #f8fafc; }
.variant-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.variant-card-title { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.variant-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.variant-field-label { font-size: 10px; color: #64748b; font-weight: bold; display: block; margin-bottom: 4px; }
.variant-card input[type="text"], .variant-card input[type="number"] { width: 100%; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12.5px; box-sizing: border-box; }
.variant-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.variant-photo-preview, .variant-photo-empty { width: 44px; height: 44px; border-radius: 5px; flex-shrink: 0; }
.variant-photo-preview { border: 1px solid #cbd5e1; overflow: hidden; background: #000; }
.variant-photo-preview img, .variant-photo-preview video { width: 100%; height: 100%; object-fit: cover; }
.variant-photo-empty { border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #94a3b8; text-align: center; }
.variant-photo-row input[type="file"] { font-size: 11px; max-width: 220px; }

.variant-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-chip {
    padding: 8px 16px; border: 1.5px solid #cbd5e1; border-radius: 20px; font-size: 13px; font-weight: 600;
    color: #334155; cursor: pointer; transition: all 0.15s;
}
.variant-chip:hover { border-color: var(--ambientacion); }
.variant-chip.selected { background: var(--ambientacion); color: white; border-color: var(--ambientacion); }
.variant-chip.disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }

.status-toggle { padding: 4px 8px; border-radius: 4px; font-weight: bold; cursor: pointer; border: none; font-size: 10px; }
.status-visible { background: #d1fae5; color: #047857; }
.status-invisible { background: #fee2e2; color: #b91c1c; }

/* ---------- PESTAÑA "EDITAR PRECIOS" (actualización masiva) ---------- */
.bulk-price-hint { font-size: 11px; color: #475569; line-height: 1.5; margin-bottom: 12px; }
.bulk-price-hint code { background: #f1f5f9; padding: 2px 5px; border-radius: 3px; }
.price-not-found { color: #b91c1c; font-size: 11px; }

/* ---------- PESTAÑA "CATEGORÍAS Y PROVEEDORES" ---------- */
.roles-manage-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: start; }
.roles-manage-block h3 { font-size: 13px; color: var(--oscuro); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.add-role-row { display: flex; gap: 8px; margin-bottom: 14px; }
.add-role-row input { flex-grow: 1; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12.5px; }
.role-manage-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 6px; font-size: 12.5px;
}
/* "Renombrar" y "Quitar" van agrupados en su propio flex, así quedan
   siempre pegados entre sí — antes eran 2 items sueltos del flex de la fila,
   y "justify-content:space-between" los separaba a cada punta de la fila en
   vez de dejarlos juntos. */
.role-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.provider-manage-row { flex-wrap: wrap; min-height: 38px; box-sizing: border-box; }
/* El nombre se puede achicar y pasar a una segunda línea si no entra, en vez
   de cortarse con "..." — antes un nombre largo (ej: "Amercan Karman")
   quedaba truncado sin poder leerse entero. */
.provider-manage-row > span:first-child { flex: 1 1 140px; min-width: 100px; overflow-wrap: break-word; white-space: normal; }
.provider-discount-field { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; font-weight: 600; }
.provider-discount-field input { width: 55px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11.5px; text-align: right; }
.default-margin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 12.5px; color: #1e3a5f; font-weight: 600; }
.default-margin-row input { width: 60px; padding: 5px 7px; border: 1px solid #93c5fd; border-radius: 4px; font-size: 12.5px; text-align: right; }
.role-remove-btn {
    background: none; border: 1px solid #fecaca; color: #b91c1c; border-radius: 4px;
    padding: 3px 9px; font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.role-remove-btn:hover { background: #fee2e2; }
.role-empty-msg { font-size: 12px; color: #94a3b8; font-style: italic; }
.category-manage-block { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #fff; }
.subcategory-list { margin: 8px 0 0 16px; }
.subcategory-row { background: #fff; border-style: dashed; }
.add-subcategory-row { display: flex; gap: 6px; margin-top: 6px; }
.add-subcategory-row input { flex-grow: 1; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 11.5px; }
.roles-save-status { font-size: 11.5px; color: #047857; font-weight: 700; margin-left: 10px; opacity: 0; transition: opacity 0.3s ease; }
.roles-save-status.visible { opacity: 1; }

/* ---------- MODAL DE DETALLE DE PRODUCTO (estilo ficha ampliada) ---------- */
#productModal {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(11, 19, 30, 0.75); backdrop-filter: blur(6px); z-index: 200001;
    justify-content: center; align-items: center;
}

.amazon-modal-card {
    background: #ffffff; width: 96vw !important; max-width: 1350px !important;
    height: auto !important; max-height: calc(100vh - 80px) !important;
    border-radius: 14px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    display: flex; flex-direction: column; position: relative;
    animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalScaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.amazon-modal-header {
    padding: 16px 28px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center;
}
.amazon-modal-body { padding: 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 30px; }
.amazon-modal-grid { display: grid; grid-template-columns: 380px 1fr 320px; gap: 35px; align-items: flex-start; }

.media-viewer-container {
    position: relative; background: #f8fafc; border-radius: 10px; padding: 12px;
    border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 12px;
}
.main-media-display { width: 100%; height: 300px; object-fit: contain; border-radius: 8px; background: #fff; }
.media-nav-btn {
    position: absolute; top: 45%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6);
    color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10;
}
.media-nav-btn:hover { background: rgba(0, 0, 0, 0.85); }
.media-nav-prev { left: 18px; }
.media-nav-next { right: 18px; }

.thumbnails-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.thumbnail-item {
    width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 2px solid transparent;
    cursor: pointer; opacity: 0.6; transition: all 0.2s; background: #fff;
}
.thumbnail-item.active, .thumbnail-item:hover { border-color: #2563eb; opacity: 1; }

/* ---------- BANNER PROMOCIONAL (arriba del footer de beneficios) ---------- */
.promo-banner-section { width: 100%; line-height: 0; margin-top: 60px; }
.promo-banner-section img { width: 100%; height: auto; display: block; }

/* ---------- FOOTER DE BENEFICIOS (compartido con el resto del sitio) ---------- */
.info-footer-section { background-color: #ffffff; border-top: none; padding: 60px 40px; width: 100%; z-index: 1; }
.info-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.info-column { text-align: center; color: #334155; position: relative; }
@media (min-width: 1050px) {
    .info-column:not(:first-child)::before {
        content: ''; position: absolute; left: -20px; top: 6px; bottom: 6px; width: 1px;
        background: #e2e8f0;
    }
}
.info-column .info-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    background: rgba(4, 105, 116, 0.08); color: var(--ambientacion);
    display: flex; align-items: center; justify-content: center;
}
.info-column h4 { font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--ambientacion); margin-bottom: 10px; letter-spacing: 0.5px; }
.info-column p { font-size: 13.5px; line-height: 1.6; color: #475569; }
.info-column strong { color: var(--ambientacion); }

.footer-socials { margin-top: 30px; display: flex; justify-content: center; gap: 15px; }
.footer-social-btn {
    width: 38px; height: 38px; border-radius: 50%; background-color: var(--oscuro); color: white;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}
.footer-social-btn:hover { background-color: var(--azul-nav); transform: translateY(-2px); }

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
.whatsapp-floating {
    position: fixed; bottom: 25px; right: 25px; width: 58px; height: 58px;
    background-color: #25d366; color: white; border-radius: 50%; display: flex;
    justify-content: center; align-items: center; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 999; transition: transform 0.3s;
}
.whatsapp-floating:hover { transform: scale(1.1); }

/* ---------- FOOTER PRINCIPAL PROFESIONAL ---------- */
.main-footer-pro { background-color: var(--footer-bg); color: rgba(255,255,255,0.75); z-index: 1; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-pro-grid {
    max-width: 1250px; margin: 0 auto; padding: 55px 50px 35px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
.footer-brand .footer-logo { font-size: 21px; font-weight: 900; color: white; letter-spacing: 1px; margin-bottom: 14px; }
.footer-brand .footer-logo-img { height: 48px; width: auto; margin-bottom: 14px; display: block; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.55); max-width: 320px; }
.footer-brand .footer-socials { justify-content: flex-start; margin-top: 20px; }
.footer-brand .footer-social-btn { background-color: rgba(255,255,255,0.08); }
.footer-brand .footer-social-btn:hover { background-color: var(--ambientacion); }

.footer-social-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.footer-social-labeled { display: flex; align-items: center; gap: 10px; text-decoration: none; color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600; transition: color 0.2s; }
.footer-social-labeled:hover { color: white; }
.footer-social-labeled .footer-social-btn { width: 30px; height: 30px; pointer-events: none; }

.footer-col h5 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: white; margin-bottom: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col #footerCategoryLinks { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13.5px; transition: color 0.2s, padding-left 0.2s; cursor: pointer; }
.footer-col a:hover { color: white; padding-left: 3px; }
.footer-col p { color: rgba(255,255,255,0.6); font-size: 13.5px; line-height: 1.7; display: flex; align-items: center; gap: 9px; }
.footer-col p .icon { color: rgba(255,255,255,0.4); }
.footer-col p a { color: rgba(255,255,255,0.75); }
.footer-col p a:hover { color: white; }
.footer-col-dev-credit { display: block; color: rgba(255,255,255,0.4); font-size: 11px; line-height: 1.6; margin-top: 4px; }
.footer-col-dev-credit a { color: rgba(255,255,255,0.55); }

.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 50px; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-payments { letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 8px; }
.footer-data-fiscal { display: inline-flex; opacity: 0.9; transition: opacity 0.2s; }
.footer-data-fiscal:hover { opacity: 1; }
.footer-data-fiscal img { height: 46px; width: auto; display: block; }

/* ---------- CARRITO LATERAL ---------- */
.cart-sidebar-overlay {
    position: fixed; inset: 0; background: rgba(10, 25, 47, 0.55);
    z-index: 200010; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cart-sidebar-overlay.active { opacity: 1; pointer-events: all; }

.cart-sidebar {
    position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 400px;
    background: white; z-index: 200011; display: flex; flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-sidebar.active { transform: translateX(0); }

.cart-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid #e2e8f0;
}
.cart-sidebar-header h3 { font-size: 16px; color: var(--oscuro); display: flex; align-items: center; gap: 8px; }
.cart-sidebar-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #64748b; line-height: 1; }

.cart-sidebar-body { flex-grow: 1; overflow-y: auto; padding: 12px 20px; }

.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; gap: 12px; text-align: center; }
.cart-empty p { font-size: 13.5px; }

.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.cart-item-img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; border: 1px solid #f1f5f9; background: #f8fafc; flex-shrink: 0; }
.cart-item-info { flex-grow: 1; min-width: 0; }
.cart-item-name { font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cart-item-variant { color: #94a3b8; font-weight: 500; font-size: 11px; }
.cart-item-qty-row { display: flex; align-items: center; gap: 8px; }
.cart-item-remove { background: none; border: none; color: #cbd5e1; cursor: pointer; padding: 4px; display: flex; }
.cart-item-remove:hover { color: var(--ambientacion); }
.cart-item-price { font-size: 12.5px; font-weight: 700; color: var(--oscuro); white-space: nowrap; }

.cart-sidebar-footer { display: none; flex-direction: column; gap: 12px; padding: 18px 20px; border-top: 1px solid #e2e8f0; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: var(--oscuro); }
.cart-total-row span:last-child { color: var(--azul-nav); font-size: 18px; }
.btn-cart-pay {
    background: var(--ambientacion); color: white; border: none; padding: 13px; border-radius: 8px;
    font-weight: bold; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
}
.btn-cart-pay:hover { background: #023a40; }

@media (max-width: 480px) {
    .cart-sidebar { max-width: 100%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .amazon-modal-grid { grid-template-columns: 1fr; }
    .footer-pro-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .admin-body-layout { flex-direction: column; }
    .admin-sidebar-providers { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .roles-manage-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    body { padding-top: 235px; }
    .main-header { padding: 12px 20px; }
    .header-search-row { flex-wrap: wrap; }
    .logo-img { height: 65px; margin-top: -18px; margin-bottom: -10px; }
    .search-container { order: 3; max-width: 100%; }
    /* ---------- MENÚ "CATEGORÍAS" DE LA BARRA AZUL: en celular se
       reemplaza la fila horizontal (que se iba a ver rara al agregar más
       categorías) por un desplegable "Categorías" que abre una lista
       vertical prolija; tocar el nombre de la categoría lleva directo a
       esa categoría, y el ▾ de al lado despliega las subcategorías ahí
       mismo, bien escritas, en vez de un mega-menú flotante. ---------- */
    .nav-mobile-toggle {
        display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
        background: none; border: none; color: white; font-size: 13px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.4px; padding: 12px; cursor: pointer;
    }
    .nav-mobile-toggle .mobile-accordion-arrow { transition: transform 0.2s ease; }
    .nav-links {
        display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
        max-width: none; padding: 0 12px 12px;
    }
    .nav-links.mobile-nav-open { display: flex; }
    .nav-item-row > a { padding: 10px 12px; font-size: 12.5px; flex-grow: 1; }
    .nav-item-expand-btn {
        display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
        background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: white; cursor: pointer; flex-shrink: 0;
    }
    .nav-item.mobile-subcats-open .nav-item-expand-btn .mobile-accordion-arrow { transform: rotate(180deg); }
    /* El mega-menú pasa de "flotante encima de todo" a "lista angosta
       adentro del acordeón", solo cuando esa categoría está abierta. */
    .dropdown-menu { display: none !important; }
    .nav-item.mobile-subcats-open .dropdown-menu {
        display: block !important; position: static; transform: none; width: 100%; max-width: none;
        grid-template-columns: 1fr; max-height: none; overflow-y: visible; box-shadow: none;
        background: rgba(0,0,0,0.15); border-radius: 6px; margin: 2px 0 6px; padding: 6px 10px;
    }
    .dropdown-menu li a { padding: 8px 10px; font-size: 12.5px; }
    /* En celular la caja del carrusel es mucho más baja/angosta que en PC,
       así que "cover" (que recorta lo que sobra para "tapar" la caja)
       terminaba mostrando solo un pedazo de la imagen. Con "contain" se ve
       la imagen completa siempre, aunque quede algo de fondo blanco a los
       costados. */
    .carousel-outer { height: 220px; }
    .carousel-slide-main::after { background-size: contain; background-position: center center; }
    .products-section { padding: 0 8px; }
    .info-footer-section { padding: 40px 20px; }
    .info-footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-pro-grid { grid-template-columns: 1fr; padding: 40px 24px 20px; gap: 30px; }
    .footer-brand p { max-width: none; }
    .footer-bottom-bar { flex-direction: column; text-align: center; padding: 18px 24px; }
    .whatsapp-floating { width: 52px; height: 52px; font-size: 24px; bottom: 16px; right: 16px; }
    .flash-message { left: 12px; right: 12px; max-width: none; top: 240px; }

    /* ---------- TARJETA DE PRODUCTO: se achica a lo que ocupa el
       contenido en vez de forzar 390px de alto siempre — eso era lo que
       dejaba ese hueco en blanco grande antes del botón "Agregar" cuando
       la tarjeta se achicaba de ancho (2 por fila) pero no de alto. ---------- */
    .product-card { min-height: 0; padding: 8px; }
    .product-img-box { height: 100px; }
    .product-name { font-size: 10.5px; min-height: 26px; }
    .price-main { font-size: 12.5px; }

    /* ---------- CARRUSELES "LOS MÁS VENDIDOS" / "NOVEDADES": 2 tarjetas
       visibles por vez, se puede arrastrar con el dedo (ya lo permite
       overflow-x:auto de forma nativa) y "clickea" prolijo tarjeta por
       tarjeta con scroll-snap. Las flechas se traen para adentro para que
       no queden cortadas en el borde de la pantalla. ---------- */
    /* Ancho de tarjeta en % DEL CONTENEDOR (no del viewport completo): así
       siempre entran exactamente 2, sea cual sea el padding que tenga
       alrededor .carousel-container por las flechas — usar vw acá había
       quedado mal calculado y las tarjetas se salían por el costado. */
    /* .products-grid-scroll es a su vez un flex-item de .carousel-container
       (junto a las 2 flechas) — sin min-width:0 un flex-item no se achica
       más allá del ancho que "pide" su contenido, así que con varias
       tarjetas adentro terminaba siendo más ancho que la pantalla entera
       (832px en vez de ~330px), aunque cada tarjeta individual estuviera
       bien calculada al 50%. Este es el arreglo real. */
    .products-grid-scroll { scroll-snap-type: x mandatory; gap: 8px; min-width: 0; flex: 1 1 auto; }
    .products-grid-scroll .product-card,
    .products-grid-scroll > .product-card {
        min-width: calc(50% - 4px); max-width: calc(50% - 4px); flex: 0 0 calc(50% - 4px);
        scroll-snap-align: start; box-sizing: border-box;
    }
    .carousel-container { padding: 0 30px; }
    .arrow-prev { left: 0; }
    .arrow-next { right: 0; }
    .arrow-btn { width: 28px; height: 28px; font-size: 12px; }

    /* ---------- MODAL DE PRODUCTO: que entre bien en la pantalla, sin
       tener que mover/scrollear para ver la imagen entera. Ojo: varios de
       estos elementos traen su tamaño puesto "inline" (style="..." directo
       en el HTML) en vez de por clase — un inline SIEMPRE le gana a una
       regla de CSS común, así que acá hace falta !important para poder
       achicarlos en celular. */
    .amazon-modal-header { padding: 12px 16px; }
    .amazon-modal-body { padding: 12px !important; gap: 14px !important; }
    .amazon-modal-grid { gap: 14px !important; }
    .media-viewer-container { padding: 8px !important; gap: 8px !important; }
    .main-media-display { height: 170px; max-height: 170px; }
    .thumbnail-item { width: 46px !important; height: 46px !important; }
    #modalTitle { font-size: 17px !important; }
    .modal-info-column { gap: 10px !important; }
    .modal-info-box { padding: 10px !important; }
    .modal-price-column { padding: 14px !important; gap: 10px !important; }

    /* ---------- MENÚ DE "MI CUENTA" (al clickear el nombre de usuario):
       estaba anclado con "right:0" contra su propio botón, así que si el
       botón queda cerca del borde derecho, el menú (200px de ancho) se
       corta contra el borde de la pantalla. Con position:fixed y margen
       fijo a los dos lados queda siempre entero adentro de la pantalla,
       sin importar dónde esté el botón. ---------- */
    .user-dropdown-menu {
        position: fixed; top: 235px; left: 12px; right: 12px; width: auto; min-width: 0;
    }

    /* ---------- CARRITO LATERAL: ocupa toda la pantalla en vez de quedar
       angosto pegado a un costado, y letra un poco más grande para que se
       lea bien todo (nombre, cantidad, precio) ---------- */
    .cart-sidebar { width: 100%; max-width: 100%; }
    .cart-sidebar-header { padding: 16px; }
    .cart-sidebar-body { padding: 10px 16px; }
    .cart-item { gap: 10px; }
    .cart-item-name { font-size: 13px; }
    .cart-item-price { font-size: 13px; }
    .cart-sidebar-footer { padding: 16px; }

    /* ---------- CATEGORÍAS Y FILTROS: desplegable que se abre y cierra,
       en vez de mostrar subcategorías + los 3 filtros siempre abiertos uno
       debajo del otro (quedaba larguísimo). Arranca cerrado; se abre al
       tocar el botón. ---------- */
    .mobile-accordion-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 11px 14px;
        font-size: 13px; font-weight: 700; color: var(--oscuro); text-transform: uppercase;
        letter-spacing: 0.3px; cursor: pointer; margin-bottom: 8px;
    }
    .mobile-accordion-arrow { transition: transform 0.2s ease; color: #64748b; }
    .mobile-accordion-toggle.mobile-accordion-open .mobile-accordion-arrow { transform: rotate(180deg); }
    .category-subcat-list, #filtersAccordionBody { display: none; margin-top: 4px; }
    .category-subcat-list.mobile-accordion-open, #filtersAccordionBody.mobile-accordion-open { display: flex; flex-direction: column; }
    .category-breadcrumb { font-size: 11.5px; overflow-wrap: break-word; }
}