/* ============================================================
   CATALOGO — categorias, filtros y tarjetas de producto
   El hover mueve la tarjeta 2px y escala solo la imagen: por
   encima de eso deja de leerse como respuesta y se nota como
   animacion, que es justo lo que abarata la sensacion.
   ============================================================ */

/* ---------- CATEGORIAS ---------- */
.categorias {
    position: relative;
    margin-top: -56px;
    z-index: var(--z-base);
}
.categorias-caja {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-alta);
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
}
/* Cada categoria es su propia tarjeta con borde, no un icono suelto: asi la
   fila se lee como una hilera de accesos y no como una barra de simbolos. */
.cat-chip {
    flex: 1 0 116px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-input);
    scroll-snap-align: start;
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: var(--texto-card);
    text-align: center;
    letter-spacing: var(--track-normal);
    transition: transform var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                color var(--t-rapido) var(--curva);
}
/* Los nombres van en una linea: partidos en dos descuadraban la altura de
   toda la fila. */
.cat-chip span { white-space: nowrap; }

/* Siluetas rellenas, no trazos finos: a este tamano se reconocen de un
   vistazo y aguantan el fondo claro. */
.cat-chip svg {
    width: 30px; height: 30px;
    color: var(--texto);
    transition: color var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.cat-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(22, 119, 255, .35);
    box-shadow: var(--sombra);
    color: var(--texto);
}
.cat-chip:hover svg { color: var(--azul); }

.cat-chip[aria-pressed="true"] {
    border-color: var(--azul);
    background: rgba(22, 119, 255, .05);
    color: var(--azul);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .10);
}
.cat-chip[aria-pressed="true"] svg { color: var(--azul); }

/* ---------- FILTROS ----------
   La etiqueta va dentro de la caja, encima del valor: cada control se lee
   como una pieza solida en lugar de un texto suelto flotando sobre un
   recuadro, y la barra deja de parecer un formulario administrativo.
   ------------------------------------------------------------------ */
.filtros {
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-sutil);
    margin-bottom: var(--e-6);
}
.filtros-fila {
    display: grid;
    grid-template-columns: 1.8fr repeat(3, 1fr) auto;
    gap: var(--e-2);
    align-items: stretch;
}

.campo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    height: 68px;
    padding: 0 var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-input);
    transition: border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                background var(--t-rapido) var(--curva);
}
.campo:hover { border-color: var(--borde-fuerte); }

/* El anillo de foco se pinta en el contenedor, no en el control: el input
   y el select no tienen borde propio y el foco debe verse en la pieza. */
.campo:focus-within {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .13);
}

.campo label {
    font-size: 11px;
    font-weight: var(--peso-semi);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    pointer-events: none;
}

.campo input,
.campo select {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    color: var(--texto);
    text-overflow: ellipsis;
}
.campo input:focus,
.campo select:focus { outline: none; }
.campo input::placeholder { color: var(--texto-tenue); font-weight: var(--peso-normal); }

/* Flecha propia: la nativa cambia de forma en cada navegador y rompe la
   coherencia de la fila. */
.campo select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--e-5);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
        linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.campo-busca { padding-left: 46px; }
.campo-ico {
    position: absolute;
    left: var(--e-4);
    top: 50%;
    translate: 0 -50%;
    color: var(--texto-tenue);
    pointer-events: none;
    transition: color var(--t-rapido) var(--curva);
}
.campo-busca:focus-within .campo-ico { color: var(--azul); }

/* ---------- Boton de mas filtros ---------- */
.btn-mas {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    height: 68px;
    padding: 0 var(--e-6);
    background: var(--navbar);
    border: 1px solid var(--navbar);
    border-radius: var(--r-input);
    color: #fff;
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    letter-spacing: var(--track-normal);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.btn-mas:hover { background: #0D2038; transform: translateY(-1px); }
.btn-mas[aria-expanded="true"] { background: var(--azul); border-color: var(--azul); }

.btn-mas-cuenta {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    background: var(--naranja);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: var(--peso-bold);
    font-variant-numeric: tabular-nums;
}

/* ---------- Panel de mas filtros ---------- */
.filtros-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-5);
    margin-top: var(--e-4);
    padding-top: var(--e-5);
    border-top: 1px solid var(--borde);
}

.rango { border: 0; margin: 0; padding: 0; min-width: 0; }
.rango legend {
    padding: 0;
    margin-bottom: var(--e-3);
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: var(--texto-card);
}
.rango-campos { display: flex; align-items: center; gap: var(--e-3); }

.rango-caja {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    height: 60px;
    padding: 0 var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-input);
    transition: border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
.rango-caja:focus-within {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .13);
}
.rango-caja label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: var(--peso-semi);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.rango-moneda {
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    color: var(--texto-suave);
}
.rango-caja input {
    width: 90px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}
.rango-caja input:focus { outline: none; }
/* Las flechas del number restan espacio a un campo que ya es estrecho. */
.rango-caja input::-webkit-outer-spin-button,
.rango-caja input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rango-caja input { -moz-appearance: textfield; }

.rango-guion { width: 12px; height: 1px; background: var(--borde-fuerte); }

.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.filtro-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 6px var(--e-3);
    background: rgba(22, 119, 255, .07);
    border: 1px solid rgba(22, 119, 255, .22);
    border-radius: var(--r-full);
    font-size: var(--txt-label);
    font-weight: var(--peso-medio);
    color: var(--azul);
}
.filtro-tag button { color: inherit; display: grid; place-items: center; }

/* ---------- CARRUSEL ---------- */
.carrusel { position: relative; }

/* Las flechas se salen del contenedor para no comerse ancho de tarjeta.
   El contenedor de la pagina reserva 60px de lateral, asi que caben. */
.carrusel-flecha {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: var(--z-base);
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 50%;
    color: var(--azul);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
    cursor: pointer;
    transition: transform var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                opacity var(--t-rapido) var(--curva);
}
.carrusel-flecha.izq { left: -23px; }
.carrusel-flecha.der { right: -23px; }
.carrusel-flecha:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .20);
}
/* Atenuada pero legible: a .35 sobre una tarjeta blanca desaparecia y
   parecia que la flecha no existia, en vez de estar al tope. */
.carrusel-flecha:disabled {
    opacity: .45;
    color: var(--texto-tenue);
    cursor: default;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

/* ---------- GRILLA ---------- */
/* Fila que se desplaza en horizontal con anclaje: cada tarjeta se detiene
   alineada al borde en lugar de quedarse a medias. */
/* Sin scroll-behavior: smooth aqui. Puesto en el CSS afecta a todo scroll
   programatico del contenedor, incluido el reinicio a cero al cambiar de
   pagina, que debe ser instantaneo. Lo suave se pide desde el JS, solo en
   el desplazamiento de las flechas. */
.grilla {
    display: flex;
    gap: var(--e-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: var(--e-2);
    /* La barra se oculta: se navega con las flechas y con el gesto. */
    scrollbar-width: none;
}
.grilla::-webkit-scrollbar { display: none; }
/* Cuatro tarjetas justas por pantalla, como en el diseno: el ancho sale del
   contenedor y no de una medida fija, asi que la fila cuadra a cualquier
   resolucion en lugar de dejar una tarjeta cortada por la mitad. */
.grilla > * {
    flex: 0 0 calc((100% - 3 * var(--e-6)) / 4);
    scroll-snap-align: start;
}

/* El estado vacio y el de error no son tarjetas: ocupan la fila entera. */
.grilla > .estado { flex: 1 1 100%; scroll-snap-align: none; }

/* ---------- TARJETA ---------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    overflow: hidden;
    transition: transform var(--t-rapido) var(--curva),
                box-shadow var(--t-medio) var(--curva),
                border-color var(--t-medio) var(--curva);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta);
    border-color: var(--borde-fuerte);
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    padding: var(--e-5);
    /* Blanco puro: las fotos del proveedor vienen sobre fondo blanco y con
       un gris de fondo se recortaba su cuadrado dentro de la tarjeta. */
    background: #fff;
    overflow: hidden;
}
/* La foto entera es un enlace a la ficha: pulsarla es lo primero que
   intenta cualquiera, y antes no hacia nada. Va fuera del orden de
   tabulacion porque el titulo y el boton ya llevan al mismo sitio. */
.card-foto {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
}

/* La caja la fija el CSS y la foto se ajusta dentro con object-fit. Antes
   mandaban los atributos width/height del <img>, que declaraban 4:3 cuando
   las miniaturas son cuadradas: la proporcion falsa recortaba el producto
   por abajo. */
.card-media img {
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
    object-fit: contain;
    transition: transform var(--t-lento) var(--curva-out);
}
/* La escala vive en la imagen, no en la tarjeta: la tarjeta solo se eleva. */
.card:hover .card-media img { transform: scale(1.03); }

.card-etiquetas {
    position: absolute;
    top: var(--e-4); left: var(--e-4);
    display: flex; flex-direction: column;
    gap: 6px; align-items: flex-start;
    z-index: 2;
}

.card-favorito {
    position: absolute;
    top: var(--e-4); right: var(--e-4);
    z-index: 2;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    color: var(--texto-suave);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: color var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.card-favorito:hover { color: var(--naranja); transform: scale(1.08); }
.card-favorito[aria-pressed="true"] { color: var(--naranja); }

.card-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--e-2) var(--e-4) var(--e-3);
    flex: 1;
}

.card h3 {
    font-size: 15px;
    font-weight: var(--peso-bold);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--texto);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
/* El titulo tambien lleva a la ficha: es lo primero que se intenta pulsar. */
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--azul); }

/* Ficha tecnica en dos lineas. Es lo que da densidad a la tarjeta: sin
   ella el cliente ve un nombre y un precio, y no puede comparar nada. */
/* Alto reservado para dos lineas aunque solo haya una: si no, el precio
   queda a distinta altura en cada tarjeta de la fila. */
.card-fichas { display: grid; gap: 2px; min-height: 3em; align-content: start; }
.card-ficha {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--texto-desc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-precio {
    margin-top: auto;
    padding-top: var(--e-2);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2);
}
.card-precio b {
    /* Apenas por encima del titulo, como en la muestra: a 26px aplastaba
       el nombre del producto y la ficha tecnica. */
    font-size: 20px;
    font-weight: var(--peso-bold);
    letter-spacing: -.03em;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* Precio anterior y porcentaje. Solo los pintan las tarjetas con una
   promocion vigente: el tachado es el precio de lista de hoy, no una copia
   congelada, asi que siempre corresponde a algo que estuvo publicado. */
.card-precio del {
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    color: var(--texto-tenue);
}
.card-precio.rebajado b { color: var(--naranja); }
.card-descuento {
    padding: 3px var(--e-2);
    background: var(--naranja);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: var(--peso-bold);
    color: #fff;
}

.card-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    min-height: 20px;
}
.card-envio {
    font-size: 12px;
    font-weight: var(--peso-semi);
    color: var(--naranja);
}
/* Cuando el envio se cobra no es un reclamo, es un dato: en gris. */
.card-envio.aparte { color: var(--texto-desc); font-weight: var(--peso-normal); }
.card-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    font-weight: var(--peso-medio);
    color: var(--exito);
}
.card-stock::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.card-stock.agotado { color: var(--texto-tenue); }

.card-pie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    /* Relleno mas corto que el del cuerpo: a cuatro tarjetas por fila los
       dos botones necesitan hasta el ultimo pixel para no salirse. */
    padding: 0 var(--e-4) var(--e-4);
}
/* A cuatro por fila la tarjeta se estrecha, asi que los botones bajan de
   cuerpo y de relleno para seguir cabiendo uno al lado del otro. */
.card-pie .btn {
    font-size: 12px;
    font-weight: var(--peso-semi);
    padding-inline: var(--e-2);
    border-radius: 11px;
    white-space: nowrap;
}
.card-pie .btn-whatsapp { gap: 5px; }
.card-pie .btn-whatsapp svg { flex-shrink: 0; }
.card-pie .btn-whatsapp { gap: 7px; }

/* ---------- BADGES ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px var(--e-3);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: var(--peso-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
}
.badge-urgente { background: var(--naranja); color: #fff; }
.badge-aviso   { background: var(--alerta); color: #fff; }
.badge-nuevo   { background: var(--azul); color: #fff; }
.badge-info    { background: rgba(17, 24, 39, .72); color: #fff; }
/* Va en rojo y no en naranja: el naranja ya lo gastan "ultimas unidades" y
   el chip del descuento junto al precio, y tres avisos del mismo color en
   la misma tarjeta dejan de avisar de nada. */
.badge-oferta  { background: var(--error); color: #fff; }
.badge-stock   { background: var(--exito-fondo); color: var(--exito); text-transform: none; letter-spacing: 0; }
.badge-bajo    { background: var(--alerta-fondo); color: var(--alerta); text-transform: none; letter-spacing: 0; }

/* ---------- ESQUELETO ---------- */
.skeleton {
    background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
    background-size: 200% 100%;
    animation: brillo 1.5s infinite;
    border-radius: var(--r-card);
}
@keyframes brillo { to { background-position: -200% 0; } }
.sk-card { min-height: 420px; }

/* ---------- ESTADOS ---------- */
.estado {
    grid-column: 1 / -1;
    padding: var(--e-24) var(--e-8);
    text-align: center;
    background: var(--superficie);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-card);
}
.estado h3 { font-size: var(--txt-h4); font-weight: var(--peso-semi); margin-bottom: var(--e-3); }
.estado p { color: var(--texto-desc); margin-bottom: var(--e-6); font-size: var(--txt-md); }

/* ---------- PAGINACION ---------- */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-5);
    margin-top: var(--e-8);
}
.paginacion .info {
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
    .grilla > * { flex: 0 0 calc((100% - 2 * var(--e-6)) / 3); }
}

@media (max-width: 900px) {
    .grilla > * { flex: 0 0 calc((100% - var(--e-6)) / 2); }
    .filtros-fila { grid-template-columns: 1fr 1fr; }
    /* La busqueda ocupa la fila entera: es el filtro que mas se usa y el
       unico donde el ancho cambia lo que se puede escribir. */
    .campo-busca { grid-column: 1 / -1; }
    .btn-mas { grid-column: 1 / -1; justify-content: center; }
    .categorias { margin-top: -32px; }
}
@media (max-width: 600px) {
    .filtros-fila { grid-template-columns: 1fr; }
    .filtros-extra { flex-direction: column; align-items: stretch; }
    .rango-campos { flex-wrap: wrap; }
    .rango-caja { flex: 1 1 130px; }
    .rango-caja input { width: 100%; }
    .rango-guion { display: none; }
    .filtros-extra .btn { width: 100%; }
    .card { min-height: auto; }

    /* En movil manda el gesto: las flechas ocupan sitio y estorban. */
    .carrusel-flecha { display: none; }
    .grilla { gap: var(--e-4); }
    .grilla > * { flex: 0 0 82%; }
    /* Los dos botones no caben uno al lado del otro a este ancho. */
    .card-pie { grid-template-columns: 1fr; }
}