/* ==========================================================================
   TIENDA LOLITA · Capa de identidad
   ==========================================================================
   Se carga DESPUÉS de tienda.css y sólo redefine lo que cambia. No es una
   hoja nueva: es una capa encima de la plantilla de Zervio5.

   POR QUÉ ESTE ARCHIVO EXISTE Y NO SE EDITÓ tienda.css
   -------------------------------------------------------------------------
   includes/tema.php ya convierte UN color de la configuración en toda la
   familia de marca, así que cambiar el rojo de Coca Liquor por el magenta
   de Lolita no necesita CSS: es un hexadecimal en el panel.

   Lo que tema.php NO hace —y dice expresamente que no hace— es recalcular
   las superficies: el negro del fondo, el carbón de los paneles, las
   líneas. Son decisión de la plantilla, no del cliente. Coca Liquor es una
   tienda oscura; Lolita es blanca. Ese salto no lo cubre un token de marca.

   Editar tienda.css para invertirlo dejaría a Coca Liquor y a los demás
   clientes atados a los cambios de Lolita: la misma hoja, tres tiendas, y
   cualquier ajuste tocando las tres. Con la capa aparte, la plantilla base
   queda intacta y cada cliente añade la suya.

   ORDEN DE CARGA (public/_head.php)
     1. tienda.css        superficies oscuras + estructura
     2. lolita.css        ESTE — superficies claras + moda
     3. <style> de tema   familia de marca desde la base de datos
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Superficies claras
   --------------------------------------------------------------------------
   Se invierten los tokens de superficie, no los de marca. Todo componente
   que ya usa var(--t-panel) o var(--t-tinta) —que es todo— se vuelve claro
   sin tocar una sola regla suya.

   El fondo no es blanco puro: #FFFFFF junto a tarjetas blancas borra el
   límite entre la tarjeta y la página, y el catálogo se lee como una
   mancha. Un gris de un punto deja que la tarjeta blanca flote encima.
   -------------------------------------------------------------------------- */
:root {
    --t-fondo:        #FAF7F8;   /* lienzo, con una gota de rosa */
    --t-panel:        #FFFFFF;   /* tarjetas, hojas, cabecera */
    --t-panel-alto:   #FFFFFF;   /* elementos elevados sobre panel */
    --t-tope:         #FFFFFF;   /* barra superior */

    --t-tinta:        #1A1418;   /* texto principal — casi negro, tibio */
    --t-tinta-suave:  #6B6069;   /* secundario: precios tachados, metadatos */
    --t-apagado:      #9B9199;
    --t-apagado-tinta:#F1EDEF;

    --t-linea:        #E8E1E5;
    --t-linea-tenue:  #F2EDEF;

    /* Sombras de tema claro. Las de la plantilla oscura son negro sólido a
       opacidad alta: sobre blanco se ven como suciedad. Aquí van teñidas
       del ciruela de la marca y muy abiertas, que es lo que da el aire de
       tienda de ropa en vez de panel de administración. */
    --t-sombra:       0 1px 2px rgba(26,20,24,.05), 0 4px 16px rgba(26,20,24,.05);
    --t-sombra-alta:  0 8px 32px rgba(26,20,24,.10), 0 2px 8px rgba(26,20,24,.06);

    /* Marca por defecto. La configuración del panel gana sobre esto: estos
       valores son sólo el arranque, para que la tienda nunca se vea sin
       identidad si la base todavía no tiene color guardado. */
    --t-marca:        #B4004E;
    --t-marca-solida: #A50047;
    --t-marca-oscura: #8A013C;
    --t-marca-viva:   #D4166A;
    --t-marca-texto:  #A50047;   /* sobre blanco, no sobre negro */
    --t-marca-tenue:  #FDF0F5;   /* fondo tenue = rosa pálido, NO magenta ahogado en negro */
    --t-marca-borde:  rgba(180,0,78,.22);
    --t-halo:         0 6px 22px rgba(180,0,78,.26);

    /* Ritmo y radios: la ropa pide formas más suaves que una licorería. */
    --t-r-sm: 10px;
    --t-r-md: 14px;
    --t-r-lg: 20px;
    --t-r-xl: 28px;
}

/* --------------------------------------------------------------------------
   2. Corrección de tokens derivados en tema claro
   --------------------------------------------------------------------------
   tema_paleta() calcula `marca_tenue` mezclando la marca con NEGRO al 86%,
   y `marca_texto` fijando la luminosidad al 70% para que se lea sobre
   fondo oscuro. Las dos decisiones son correctas en Coca Liquor y las dos
   están al revés aquí: sobre blanco, el tenue queda casi negro y el texto
   de marca queda lavado.

   Se corrigen en CSS y no en PHP porque tema.php lo comparten todos los
   clientes: cambiar ahí la fórmula arreglaría a Lolita y rompería a Coca
   Liquor. El bloque <style> de tema.php se imprime después de las hojas,
   así que para ganarle hace falta el selector más específico.

   PENDIENTE (deuda anotada, no olvidada): lo limpio es que tema.php acepte
   un modo claro/oscuro en la configuración y calcule estos dos tokens en
   consecuencia. Cuando haya un tercer cliente de tema claro, esta capa se
   sustituye por eso.
   -------------------------------------------------------------------------- */
:root:root {
    --t-marca-tenue: #FDF0F5;
    --t-marca-texto: #A50047;
}

/* --------------------------------------------------------------------------
   3. Rejilla de catálogo tipo marketplace
   --------------------------------------------------------------------------
   Dos columnas en móvil, no una. Es la diferencia entre hojear y desfilar:
   con una columna el cliente ve 2 productos por pantallazo y se cansa antes
   de llegar al que le gusta; con dos ve 4 y compara sin querer.

   auto-fill con minmax da las 4 columnas de escritorio sin media queries y
   sin que se rompa en las anchuras intermedias de tablet.
   -------------------------------------------------------------------------- */
.rejilla-moda {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-inline: 10px;
}

@media (min-width: 560px) {
    .rejilla-moda { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
}
@media (min-width: 1100px) {
    .rejilla-moda { gap: 18px; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   4. Tarjeta de producto
   --------------------------------------------------------------------------
   La foto manda: en ropa el cliente compra la imagen, no el nombre. Por eso
   la relación 3:4 (vertical, como la prenda) y el texto reducido a lo
   imprescindible.
   -------------------------------------------------------------------------- */
.tarjeta-moda {
    background: var(--t-panel);
    border-radius: var(--t-r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--t-sombra);
    /* El borde de un tono, en vez de sombra fuerte, es lo que distingue una
       tienda de ropa de un panel: contorno limpio y poco peso. */
    border: 1px solid var(--t-linea-tenue);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Sólo en dispositivos con puntero de verdad. En un teléfono el :hover se
   queda pegado después del toque y la tarjeta se ve levantada sin motivo. */
@media (hover: hover) and (pointer: fine) {
    .tarjeta-moda:hover {
        transform: translateY(-3px);
        box-shadow: var(--t-sombra-alta);
    }
}

.tarjeta-moda__foto {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--t-linea-tenue);
    overflow: hidden;
}

.tarjeta-moda__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* Sin esto, la imagen aparece de golpe al terminar de cargar y el
       catálogo entero parpadea mientras se baja. */
    opacity: 0;
    transition: opacity .3s ease;
}
.tarjeta-moda__foto img.cargada { opacity: 1; }

.tarjeta-moda__cuerpo {
    padding: 9px 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Empuja el precio abajo para que todas las tarjetas de una fila
       alineen precios aunque los nombres ocupen una o dos líneas. */
    flex: 1;
}

.tarjeta-moda__nombre {
    font-size: .82rem;
    line-height: 1.32;
    color: var(--t-tinta);
    /* Dos líneas y corta. Un nombre de cuatro líneas descuadra la fila
       entera y empuja el botón de agregar fuera de la vista. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarjeta-moda__precios {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}
.tarjeta-moda__precio {
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-marca-texto);
    letter-spacing: -.01em;
}
.tarjeta-moda__antes {
    font-size: .76rem;
    color: var(--t-apagado);
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   5. Señales sobre la foto
   -------------------------------------------------------------------------- */
.tarjeta-moda__senales {
    position: absolute;
    top: 8px; left: 8px;
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 4px;
    /* No captura toques: si no, el badge se come el tap que iba a la foto. */
    pointer-events: none;
    z-index: 2;
}

.senal {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    color: #fff;
    background: var(--t-marca);
    box-shadow: 0 1px 4px rgba(26,20,24,.16);
}
.senal--descuento { background: #D81E4A; }
.senal--nuevo     { background: #1A1418; }
.senal--top       { background: #C9A227; color: #1A1418; }
.senal--pocas     { background: #E2703A; }
.senal--agotado   { background: #9B9199; }

/* Favorito: arriba a la derecha, opuesto a las señales para que no compitan
   por el mismo rincón. */
.tarjeta-moda__fav {
    position: absolute;
    top: 6px; right: 6px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    color: var(--t-apagado);
    cursor: pointer;
    z-index: 3;
    transition: transform .15s ease, color .15s ease;
}
.tarjeta-moda__fav[aria-pressed="true"] { color: var(--t-marca); }
.tarjeta-moda__fav:active { transform: scale(.88); }

/* --------------------------------------------------------------------------
   6. Vista previa de tallas en la tarjeta
   --------------------------------------------------------------------------
   Enseñar las tallas ANTES de abrir el producto evita el recorrido muerto:
   entrar, descubrir que no está la talla, salir. Es informativo, no
   interactivo — la elección real ocurre en el selector, donde se conoce el
   cruce con el color.
   -------------------------------------------------------------------------- */
.tallas-previa {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tallas-previa__t {
    font-size: .66rem;
    font-weight: 600;
    color: var(--t-tinta-suave);
    border: 1px solid var(--t-linea);
    border-radius: 5px;
    padding: 2px 6px;
    line-height: 1.4;
}
.tallas-previa__t--agotada {
    color: var(--t-apagado);
    border-color: var(--t-linea-tenue);
    /* Tachada y no oculta: saber que la talla existe pero está agotada es
       información útil —vuelve a mirar mañana— y ocultarla haría creer que
       la tienda no la maneja. */
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   7. Selector de talla × color
   --------------------------------------------------------------------------
   La pieza central de la tienda de ropa. Reutiliza la hoja inferior que ya
   existe en la plantilla (.hoja), así que hereda el gesto de cierre, el
   bloqueo de scroll de fondo y el foco atrapado sin repetir nada.
   -------------------------------------------------------------------------- */
.selector-moda { display: flex; flex-direction: column; gap: 18px; }

.selector-moda__eje { display: flex; flex-direction: column; gap: 9px; }

.selector-moda__titulo {
    font-size: .78rem;
    font-weight: 600;
    color: var(--t-tinta-suave);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Lo elegido, junto al título: "Talla · M". Sin esto, al bajar a mirar los
   colores el cliente pierde de vista qué talla marcó. */
.selector-moda__elegido { color: var(--t-tinta); font-weight: 700; }

.selector-moda__opciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Tallas --- */
.chip-talla {
    min-width: 46px;
    min-height: 44px;          /* objetivo táctil: nunca por debajo de 44 px */
    padding: 0 12px;
    border: 1.5px solid var(--t-linea);
    border-radius: var(--t-r-sm);
    background: var(--t-panel);
    color: var(--t-tinta);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip-talla[aria-pressed="true"] {
    border-color: var(--t-marca);
    background: var(--t-marca-tenue);
    color: var(--t-marca-texto);
}

/*  Agotado por el CRUCE, no en absoluto.
    La talla M puede existir y estar disponible en negro, y no existir en
    rojo. Cuando el cliente elige rojo, M se apaga — pero sigue visible y
    pulsable: al tocarla, el selector cambia el color en vez de no hacer
    nada. Un botón que no responde se lee como una pantalla rota. */
.chip-talla[data-cruce="no"] {
    color: var(--t-apagado);
    border-color: var(--t-linea-tenue);
    background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 5px,
        var(--t-linea-tenue) 5px, var(--t-linea-tenue) 6px
    );
}

/* --- Colores --- */
.chip-color {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--t-linea);
    padding: 3px;
    background: var(--t-panel);
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.chip-color__disco {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    /* Aro interior: sin él, el swatch blanco sobre panel blanco desaparece
       y el cliente no ve que existe la opción "Blanco". */
    box-shadow: inset 0 0 0 1px rgba(26,20,24,.14);
}
.chip-color[aria-pressed="true"] {
    border-color: var(--t-marca);
    transform: scale(1.06);
}
.chip-color[data-cruce="no"] { opacity: .34; }
.chip-color[data-cruce="no"]::after {
    /* Barra diagonal: el color sigue reconocible debajo, que es lo que
       permite entender "este color existe pero no en la talla que elegí". */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px), var(--t-apagado) 50%,
        transparent calc(50% + 1px)
    );
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   8. Estado de la combinación elegida
   -------------------------------------------------------------------------- */
.combinacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    background: var(--t-marca-tenue);
    border: 1px solid var(--t-marca-borde);
    border-radius: var(--t-r-sm);
}
.combinacion__precio { font-size: 1.15rem; font-weight: 700; color: var(--t-marca-texto); }
.combinacion__antes  { font-size: .8rem; color: var(--t-apagado); text-decoration: line-through; margin-left: 6px; }
.combinacion__stock  { font-size: .75rem; font-weight: 600; color: #C0561F; }

/* Aviso de que falta elegir. Aparece sólo tras intentar agregar: mostrarlo
   desde el principio regaña al cliente antes de que haya hecho nada. */
.combinacion--falta {
    background: var(--t-apagado-tinta);
    border-color: var(--t-linea);
    color: var(--t-tinta-suave);
}

/* --------------------------------------------------------------------------
   9. Guía de tallas
   --------------------------------------------------------------------------
   El motivo número uno de devolución en ropa vendida por WhatsApp es que la
   talla no era la que el cliente creía. Va colapsada: quien la necesita la
   abre, y a quien no le hace falta no le ocupa media pantalla.
   -------------------------------------------------------------------------- */
.guia-tallas { border-top: 1px solid var(--t-linea-tenue); padding-top: 12px; }
.guia-tallas summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--t-marca-texto);
    list-style: none;
}
.guia-tallas summary::-webkit-details-marker { display: none; }
.guia-tallas summary::before { content: '📏 '; }
.guia-tallas__cuerpo {
    font-size: .78rem;
    line-height: 1.6;
    color: var(--t-tinta-suave);
    padding-top: 8px;
    white-space: pre-line;   /* el dueño escribe una medida por línea */
}

/* --------------------------------------------------------------------------
   10. Esqueleto de carga
   --------------------------------------------------------------------------
   Con la misma forma que la tarjeta real. Un esqueleto de otra proporción
   provoca un salto del contenido al llegar los datos, que es justo lo que
   el esqueleto venía a evitar.
   -------------------------------------------------------------------------- */
.esqueleto-moda {
    border-radius: var(--t-r-md);
    overflow: hidden;
    border: 1px solid var(--t-linea-tenue);
    background: var(--t-panel);
}
.esqueleto-moda__foto { aspect-ratio: 3 / 4; }
.esqueleto-moda__linea { height: 10px; margin: 9px 10px; border-radius: 4px; }
.esqueleto-moda__foto,
.esqueleto-moda__linea {
    background: linear-gradient(100deg,
        var(--t-linea-tenue) 30%, var(--t-apagado-tinta) 50%, var(--t-linea-tenue) 70%);
    background-size: 200% 100%;
    animation: brillo-moda 1.4s ease-in-out infinite;
}
@keyframes brillo-moda {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   11. Accesibilidad y respeto por el sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Quien lo pidió en el sistema operativo suele tenerlo activado por
       mareo o migraña, no por preferencia estética. Se anula el movimiento,
       no la funcionalidad. */
    .tarjeta-moda,
    .tarjeta-moda__foto img,
    .chip-talla, .chip-color { transition: none; }
    .esqueleto-moda__foto,
    .esqueleto-moda__linea { animation: none; }
}

/* El foco tiene que verse. La plantilla oscura usa un halo claro que sobre
   blanco no se distingue. */
.chip-talla:focus-visible,
.chip-color:focus-visible,
.tarjeta-moda__fav:focus-visible {
    outline: 2px solid var(--t-marca);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Barra de filtros
   --------------------------------------------------------------------------
   Scroll horizontal por fila, no envolver. Con 20 colores, envolver empuja
   el catálogo tres filas hacia abajo y el cliente tiene que desplazarse
   sólo para llegar a los productos.

   `overscroll-behavior-x: contain` evita que al llegar al final del carrusel
   el gesto siga hacia atrás en el historial de Safari — el bug de gestos que
   se vio en Colmado Leo.
   -------------------------------------------------------------------------- */
.filtros-moda {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--t-panel);
    border-block: 1px solid var(--t-linea-tenue);
    margin-bottom: 12px;
}

.filtros-moda__fila {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Aire lateral para que el último chip no quede pegado al borde. */
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.filtros-moda__fila::-webkit-scrollbar { display: none; }

.filtros-moda__etiqueta {
    font-size: .72rem;
    font-weight: 600;
    color: var(--t-apagado);
    text-transform: uppercase;
    letter-spacing: .05em;
    /* No se encoge ni se va con el scroll del resto de la fila. */
    flex: 0 0 auto;
    position: sticky;
    left: 0;
    background: var(--t-panel);
    padding-right: 4px;
    z-index: 1;
}

.chip-filtro {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1.5px solid var(--t-linea);
    border-radius: 999px;
    background: var(--t-panel);
    color: var(--t-tinta);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip-filtro[aria-pressed="true"] {
    border-color: var(--t-marca);
    background: var(--t-marca);
    color: #fff;
}

/* El swatch como filtro es más pequeño que en el selector: aquí es una
   lista larga que se recorre, no una decisión de compra. */
.chip-color--filtro { width: 34px; height: 34px; flex: 0 0 auto; padding: 2px; }

.filtros-moda__limpiar {
    align-self: flex-start;
    border: 0;
    background: none;
    color: var(--t-marca-texto);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}

.catalogo-vacio {
    text-align: center;
    padding: 36px 20px;
    color: var(--t-tinta-suave);
    font-size: .88rem;
}
.btn-texto {
    display: block;
    margin: 10px auto 0;
    border: 0; background: none;
    color: var(--t-marca-texto);
    font-size: .85rem; font-weight: 700;
    cursor: pointer; text-decoration: underline;
}