/* ===========================================
   Liorat Shoppable Lookbook Styles (v1.2 - Modernizado)
   =========================================== */

/* Importar fuentes (Igual que en los otros plugins) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- Variables de Estilo Liorat (Unificadas) --- */
:root {
    --lr-font-heading: 'Playfair Display', serif;
    --lr-font-body: 'Inter', sans-serif;
    --lr-bg-crystal: rgba(255, 255, 255, 0.95); /* Más opaco y limpio */
    --lr-border: rgba(17, 17, 17, 0.06);
    --lr-radius-lg: 12px; /* Redondeo más sutil y elegante */
    --lr-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --lr-text: #1a1a1a;
    --lr-accent: #C5A059; /* Dorado elegante */
}

/* --------------------------------------------------------------------------------------------- */
/* 1. HEADER MODERNIZADO (Estilo Unificado) */
/* --------------------------------------------------------------------------------------------- */
.section-button {
    text-align: center;
    margin-bottom: 60px; /* Más aire */
    animation: fadeInDown 0.8s ease;
    padding: 0 20px;
}

.section-button-title {
    font-family: var(--lr-font-heading);
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--lr-text);
    margin-bottom: 15px;
    margin-top: 70px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Estilo itálico elegante */
.section-button-title .title-emphasis {
    font-family: var(--lr-font-heading);
    font-style: italic;
    color: var(--lr-accent);
    font-weight: 400;
    font-size: inherit; /* Hereda tamaño fluido */
}

/* Subtítulo en mayúsculas y espaciado */
.section-button-subtitle {
    font-family: var(--lr-font-body);
    font-size: 0.95rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.15em; /* Tracking amplio */
    margin-top: 10px;
    font-weight: 400;
}


/* --- Wrapper Principal --- */
.lr-lookbook-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    margin-top: 50px; /* Agregar margen superior */
}

/* --- [NUEVO] Título para grupos de filtros --- */
.lr-filter-group-title {
    font-family: var(--lr-font-body);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--lr-text, #111);
    margin: 16px 16px 8px 16px; /* Arriba, Lados, Abajo */
    padding: 0;
    line-height: 1.2;
}

/* Ajuste de margen para el primer título */
.lr-filter-group-title:first-of-type {
    margin-top: 0;
}
/* --- Estilos de Filtros (Sin cambios) --- */
/* --- [CAMBIO] Estilos de Filtros (Diseño "App-Like") --- */
/* --- [CORREGIDO] Estilos de Filtros (Diseño "App-Like" v2.1) --- */

.lr-lookbook-filters {
    margin-bottom: 16px;
    padding: 0;
}

/* 1. El layout de Grid */
.lr-filter-group {
    display: grid;
    grid-template-columns: auto 1fr; /* [Botón All] [Fila deslizable] */
    align-items: center;
    gap: 10px; /* Espacio entre "All" y los pills */
    margin-bottom: 4px; /* Espacio entre las dos filas */
    padding: 0 16px; /* Padding lateral general */
    
}

/* 2. El contenedor de pills deslizable */
.lr-filter-group__chips {
    display: flex;
    flex-wrap: nowrap; 
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0; /* Pequeño padding vertical */
    
    /* Ocultar la barra de scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lr-filter-group__chips::-webkit-scrollbar { display: none; }
.lr-filter-group__chips::after { content: ''; display: block; width: 1px; }

/* 3. Estilos de los Pills (Todos) */
.lr-chip {
    appearance: none;
    border: 1px solid rgba(17, 17, 17, 0.12);
    background: #fff;
    color: var(--lr-text);
    font-family: var(--lr-font-body);
    
    /* Tamaño de pill reducido */
    padding: 6px 12px;
    font-size: 13px;
    
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0; 
    white-space: nowrap;
}
.lr-chip:hover {
    background: rgba(17, 17, 17, 0.04);
}
.lr-chip.is-active {
    background: var(--lr-text, #111111);
    color: #ffffff;
    border-color: var(--lr-text, #111111);
}

/* 4. El botón "All" (La regla única y correcta v2.2) */

/* Regla para el botón "All" cuando NO está activo */
.lr-filter-group .lr-chip[data-filter="all"] {
    position: sticky;
    left: 16px; 
    z-index: 2;  
    
    /* Fondo blanco por defecto (cuando NO está activo) */
    background: #fff; 
    color: var(--lr-text, #111);
    border-color: rgba(17, 17, 17, 0.12);
}

/* [¡LA REGLA QUE FALTABA!]
 * Esta regla es MÁS específica y anulará a la anterior
 * cuando el botón "All" SÍ tenga la clase .is-active
 */
.lr-filter-group .lr-chip[data-filter="all"].is-active {
    background: var(--lr-text, #111111);
    color: #ffffff;
    border-color: var(--lr-text, #111111);
}

/* * Cuando "All" está activo, la regla .is-active (de arriba)
 * se encargará de ponerlo negro. No necesitamos más reglas.
 */

/* --- Estilos del Carrusel - Versión más pequeña (Instagram-like) --- */
.lr-lookbook-carrousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 15px 12px; /* Menos padding */
    gap: 12px; /* Menos espacio entre tarjetas */
}

/* Cada Look en el Carrusel - Más pequeño */
.look-item {
    flex: 0 0 calc(75vw - 24px); /* 75% del ancho de la pantalla menos espacio */
    max-width: calc(75vw - 24px);
    scroll-snap-align: center;
    transition: opacity 0.3s ease;
    min-width: 280px; /* Ancho mínimo para no hacerse muy pequeño */
    border: 1px solid #B8860B; /* Borde fino de DarkGoldenrod */
    border-radius: 12px;
}

/* Imagen más compacta */
.look-item__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px; /* Igual que el borde */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra más suave */
}

.look-item__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Acciones más compactas */
.look-item__actions { 
    text-align: center; 
    padding: 15px 0; /* Menos espacio */
}

.lr-btn-full-look { 
    appearance: none; 
    background: var(--lr-text); 
    color: #fff; 
    border: none; 
    font-family: var(--lr-font-body); 
    font-weight: 700; 
    font-size: 14px; /* Letra más pequeña */
    padding: 10px 20px; /* Menos relleno */
    border-radius: 9999px; 
    cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.lr-btn-full-look:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); 
}

/* --- Estilos de PC (min-width: 768px) - Versión más compacta --- */
@media (min-width: 768px) {
    .lr-lookbook-carrousel {
        gap: 16px; /* Menos espacio en tablet */
    }
    
    .look-item {
        flex-basis: calc(45% - 16px); /* Más pequeño que antes */
        max-width: calc(45% - 16px);
        min-width: 250px;
        border: 1px solid #B8860B; /* Borde fino de DarkGoldenrod */
    }
}

@media (min-width: 1024px) {
    .look-item {
        flex-basis: calc(30% - 16px); /* Aún más pequeño */
        max-width: calc(30% - 16px);
        min-width: 280px;
        border: 1px solid #B8860B; /* Borde fino de DarkGoldenrod */
    }
}

/* --- Estilos para móviles pequeños (480px) --- */
@media (max-width: 480px) {
    .lr-lookbook-carrousel {
        padding: 0 8px 12px 8px;
        gap: 10px;
    }
    
    .look-item {
        flex-basis: calc(85vw - 20px);
        max-width: calc(85vw - 20px);
        min-width: 240px;
        border: 1px solid #B8860B; /* Borde fino de DarkGoldenrod */
    }
    
    .look-item__actions { 
        padding: 12px 0;
    }
    
    .lr-btn-full-look { 
        font-size: 13px;
        padding: 8px 16px;
    }
}




/* --- Hotspots (Sin cambios) --- */
.look-hotspot {
    position: absolute;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: var(--lr-text);
    border: none;
    padding: 0;
    line-height: 1;
    z-index: 10;
    animation: hotspotPulse 2s infinite ease-in-out;
}
.look-hotspot:hover {
    animation-play-state: paused;
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes hotspotPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --- [CAMBIO] Quick Card (Modal) --- */
.lr-quick-card-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.lr-quick-card-overlay.is-visible { opacity: 1; }

.lr-quick-card {
    /* Nuevo estilo horizontal */
    display: flex;
    width: 100%;
    max-width: 420px; /* Un poco más ancha */
    
    /* Estilo Crystal Liorat */
    background: var(--lr-bg-crystal, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid var(--lr-border, rgba(17, 17, 17, 0.06));
    border-radius: var(--lr-radius-lg, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
.lr-quick-card-overlay.is-visible .lr-quick-card {
    transform: scale(1);
}

.lr-card-image {
    flex: 0 0 140px; /* Ancho fijo para la imagen */
    height: auto; /* Altura automática */
    min-height: 160px;
    background-size: cover;
    background-position: center;
    border-right: 1px solid var(--lr-border);
}

.lr-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex: 1;
    position: relative; /* Para el botón de cerrar */
}

.lr-card-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    font-weight: 300;
    color: #999;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: color 0.18s ease;
}
.lr-card-close:hover { color: var(--lr-text); }

.lr-card-title {
    font-family: var(--lr-font-heading);
    font-size: 20px; /* Ligeramente más pequeño */
    font-weight: 600;
    color: var(--lr-text);
    margin: 0 0 15px 0; /* Más espacio */
    line-height: 1.3;
}

/* --- Estilos para los 2 botones de la Quick Card --- */
.lr-card-button {
    appearance: none;
    width: 100%;
    border: none;
    font-family: var(--lr-font-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
    text-align: center;
}

/* Botón Primario (Añadir a la Cesta) */
.lr-card-button--primary {
    background: var(--lr-text);
    color: #fff;
    border: 2px solid var(--lr-text); /* Borde sólido para mantener la altura */
}
.lr-card-button--primary:hover {
    transform: scale(1.03);
}
.lr-card-button--primary:disabled {
    background: #4ade80; /* Verde éxito */
    color: var(--lr-text);
    border-color: #4ade80;
    transform: scale(1);
    cursor: not-allowed;
}

/* [NUEVO] Botón Secundario (Chat Rápido) */
.lr-card-button--secondary {
    background: transparent;
    color: var(--lr-text);
    border: 2px solid var(--lr-border); /* Borde sutil */
    margin-top: 10px; /* Espacio entre botones */
}
.lr-card-button--secondary:hover {
    background: rgba(17, 17, 17, 0.04);
    border-color: rgba(17, 17, 17, 0.1);
}


/* --- [NUEVO] Icono de Cesta Flotante --- */
.lr-basket-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99990;
    
    width: 60px;
    height: 60px;
    background: var(--lr-text);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-decoration: none;
    
    /* Animación de entrada */
    transform: translateY(100px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.lr-basket-icon.is-visible {
    transform: translateY(0);
}

.lr-basket-icon__count {
    position: absolute;
    top: 0;
    right: 0;
    background: #f1c40f; /* Amarillo Liorat para el contador */
    color: var(--lr-text);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid var(--lr-text);
}

/* ===========================================
   [NUEVO] FASE 2: Estilos de la Cesta (Página)
   =========================================== */
.lr-shopping-list-wrapper {
    max-width: 900px;
    margin: 30px auto;
    padding: 16px;
    font-family: var(--lr-font-body);
}

.lr-list-title {
    font-family: var(--lr-font-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 600;
    color: var(--lr-text);
    text-align: center;
    margin: 0 0 30px 0;
}

/* --- Mensaje de Cesta Vacía --- */
.lr-list-empty-message {
    text-align: center;
    padding: 40px;
    background: #f9f9f9;
    border-radius: var(--lr-radius-lg);
    border: 1px solid var(--lr-border);
}
.lr-list-empty-message p {
    font-size: 1.1rem;
    color: #555;
    margin: 0 0 20px 0;
}
.lr-list-empty-message a {
    /* Reutiliza el estilo del botón */
    display: inline-block;
    background: var(--lr-text);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
}
.lr-list-empty-message a:hover {
    background: #333;
}

/* --- Contenedor de Items --- */
#llb-list-items {
    display: grid;
    gap: 16px;
    margin-bottom: 40px;
}

/* --- Cada Item en la Cesta --- */
.llb-list-item {
    display: grid;
    grid-template-columns: 100px 1fr auto; /* Imagen, Info, Botón */
    gap: 16px;
    align-items: center;
    
    /* Estilo Liorat Crystal */
    background: var(--lr-bg-crystal, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--lr-border, rgba(17, 17, 17, 0.06));
    border-radius: var(--lr-radius-lg, 16px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    
    padding: 16px;
    overflow: hidden;
}

.llb-list-item__image {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Bordes más pequeños para la imagen */
    border: 1px solid var(--lr-border);
}

.llb-list-item__info h5 {
    font-family: var(--lr-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--lr-text);
    margin: 0;
    line-height: 1.3;
}

/* --- [AÑADE ESTA REGLA] --- */
.llb-list-item__info p.llb-list-item__look {
    font-family: var(--lr-font-body);
    font-size: 13px;
    color: #555;
    margin: 4px 0 0 0;
    font-style: italic;
    line-height: 1.3;
}
/* --- [FIN DE LA NUEVA REGLA] --- */

.llb-list-item__remove {
    appearance: none;
    background: none;
    border: none;
    font-size: 24px;
    font-weight: 300;
    color: #aaa;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}
.llb-list-item__remove:hover {
    color: #d9534f; /* Rojo al pasar el ratón */
}

/* --- Resumen/Caja de Envío --- */
.llb-list-summary {
    background: #f9f9f9;
    border-radius: var(--lr-radius-lg);
    border: 1px solid var(--lr-border);
    padding: 30px;
    text-align: center;
}
.lr-list-summary-title {
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}
.llb-list-summary p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 25px auto;
}
#llb-send-to-ps {
    /* Reutiliza el estilo de botón .lr-btn-full-look */
    background: var(--lr-text);
    color: #fff;
    border: none;
    font-family: var(--lr-font-body);
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 9999px;
    cursor: pointer;
}

/* Responsive para la lista en móvil */
@media (max-width: 600px) {
    .llb-list-item {
        grid-template-columns: 80px 1fr auto; /* Imagen más pequeña */
        gap: 12px;
        padding: 12px;
    }
    .llb-list-item__image {
        width: 80px;
        height: 80px;
    }
    .llb-list-item__info h5 {
        font-size: 16px;
    }
    .llb-list-summary {
        padding: 20px;
    }
}
/* ... (tus estilos anteriores de la cesta) ... */

/* [NUEVO] Estilos para el bloque de Términos en el Resumen */
.llb-list-terms {
    font-size: 14px;
    color: #555; /* Un gris oscuro */
    line-height: 1.6;
    max-width: 550px;
    margin: 20px auto 25px auto; /* Espacio entre el párrafo y el botón */
    
    /* Estilo sutil de "aviso" */
    padding: 15px;
    background: rgba(17, 17, 17, 0.02); /* Un fondo gris/beige muy sutil */
    border-radius: 8px; /* Bordes redondeados más pequeños */
    border: 1px solid rgba(17, 17, 17, 0.04);
}
.llb-list-terms p {
    margin: 0;
    padding: 0;
}
/* No necesitamos que 'Please Note' esté en negrita, pero sí el 20% */
.llb-list-terms strong {
    color: var(--lr-text, #111);
}
/* --- [NUEVO] Estilos del Loader para la Quick Card --- */

/* 1. Prepara el contenedor de la imagen */
.lr-card-image {
    position: relative; /* Necesario para centrar el loader */
    background-color: #f0f0f0; /* Color de fondo mientras carga */
    transition: background-image 0.4s ease-in-out;
}

/* 2. El Spinner (loader) */
.lr-card-image-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px; /* Tamaño del spinner */
    height: 32px;
    margin: -16px 0 0 -16px; /* Centrado (mitad de width/height) */
    
    border: 4px solid rgba(17, 17, 17, 0.1); /* Color del círculo */
    border-top-color: var(--lr-text, #111); /* Color del spinner */
    border-radius: 50%;
    
    animation: lrb-spinner 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 3. Animación de rotación del spinner */
@keyframes lrb-spinner {
    to { transform: rotate(360deg); }
}

/* 4. Estados de Carga */
.lr-card-image.is-loading .lr-card-image-loader {
    opacity: 1; /* Muestra el spinner */
}
.lr-card-image.is-loading {
    background-image: none !important; /* Oculta la imagen vieja mientras carga la nueva */
}

/* --- [NUEVO] Estilos para "No Resultados" --- */
.lr-lookbook-no-results {
    display: none; /* Doble seguro para ocultarlo */
    padding: 40px 16px;
    text-align: center;
    background: #f9f9f9; /* Un fondo sutil */
    border-radius: var(--lr-radius-lg);
    border: 1px solid var(--lr-border);
    margin: 0 16px; /* Para que coincida con el padding del carrusel */
}
.lr-no-results-title {
    font-family: var(--lr-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--lr-text);
    margin: 0 0 10px 0;
}
.lr-lookbook-no-results p {
    font-family: var(--lr-font-body);
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* --- [NUEVO] FASE 3: Estilos del Modal de Captura de Lead --- */

.llb-lead-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 100000; /* Por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.llb-lead-modal-overlay.is-visible {
    opacity: 1;
}

.llb-lead-modal {
    /* Estilo Liorat Crystal */
    background: var(--lr-bg-crystal, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid var(--lr-border, rgba(17, 17, 17, 0.06));
    border-radius: var(--lr-radius-lg, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    
    width: 100%;
    max-width: 460px; /* Ancho del modal */
    position: relative;
    padding: 32px;
    
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
.llb-lead-modal-overlay.is-visible .llb-lead-modal {
    transform: scale(1);
}

.llb-lead-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    font-weight: 300;
    color: #999;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: color 0.18s ease;
}
.llb-lead-close:hover { color: var(--lr-text); }

.llb-lead-title {
    font-family: var(--lr-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--lr-text);
    margin: 0 0 10px 0;
}
.llb-lead-sub {
    font-family: var(--lr-font-body);
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Estilos del Formulario */
.llb-form-group {
    margin-bottom: 15px;
}
.llb-form-group label {
    font-family: var(--lr-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--lr-text);
    display: block;
    margin-bottom: 6px;
}
.llb-form-group input[type="text"],
.llb-form-group input[type="tel"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 16px;
    font-family: var(--lr-font-body);
    background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) inset;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.llb-form-group input:focus {
    border-color: var(--lr-text, #111);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
    outline: none;
}
#llb-submit-lead-btn {
    width: 100%;
    margin-top: 10px;
}
.llb-form-status {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
}
.llb-form-status.is-error {
    color: #c00;
}

/* ============================================
   PS Dashboard Styles
   ============================================ */

.ps-dashboard-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Header Simple */
.ps-header {
    
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 32px;
    color: white;
}

.ps-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #374151;
}

/* Filters */
.ps-filters {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ps-filter-group {
    margin-bottom: 16px;
}

.ps-filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.ps-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid #e5e7eb;
    background: white;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ps-chip:hover {
    border-color: #667eea;
    color: #667eea;
}

.ps-chip.is-active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.ps-filter-search {
    margin-top: 16px;
}

.ps-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.ps-search-input:focus {
    outline: none;
    border-color: #667eea;
}

/* Request Grid */
.ps-request-grid {
    display: grid;
    gap: 20px;
}

.ps-request-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
    overflow: hidden;
}

.ps-request-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Status indicator border */
.ps-request-card[data-status="new"] {
    border-left: 4px solid #10b981;
}

.ps-request-card[data-status="contacted"] {
    border-left: 4px solid #3b82f6;
}

.ps-request-card[data-status="in-progress"] {
    border-left: 4px solid #f59e0b;
}

.ps-request-card[data-status="sent"] {
    border-left: 4px solid #8b5cf6;
}

.ps-request-card[data-status="completed"] {
    border-left: 4px solid #6b7280;
}

.ps-request-card[data-status="cancelled"] {
    border-left: 4px solid #ef4444;
}

.ps-request-card[data-status="finished"] {
    border-left: 4px solid #a855f7;
}

/* Card Header */
.ps-card-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.ps-card-header:hover {
    background: #f9fafb;
}

.ps-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ps-card-name {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Status Badge */
.ps-status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.ps-status-badge[data-status="new"] {
    background: #d1fae5;
    color: #065f46;
}

.ps-status-badge[data-status="contacted"] {
    background: #dbeafe;
    color: #1e40af;
}

.ps-status-badge[data-status="in-progress"] {
    background: #fef3c7;
    color: #92400e;
}

.ps-status-badge[data-status="sent"] {
    background: #e0e7ff;
    color: #3730a3;
}

.ps-status-badge[data-status="completed"] {
    background: #f3f4f6;
    color: #374151;
}

.ps-status-badge[data-status="cancelled"] {
    background: #fee2e2;
    color: #991b1b;
}

.ps-status-badge[data-status="finished"] {
    background: #f3e8ff;
    color: #6b21a8;
}

/* WhatsApp Link (Verde) */
.ps-card-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #25d366;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f0fdf4;
}

.ps-card-phone:hover {
    color: #20ba5a;
    background: #dcfce7;
}

.ps-card-phone svg {
    width: 14px;
    height: 14px;
}

.ps-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
}

.ps-card-items {
    font-weight: 600;
    color: #374151;
}

.ps-card-time {
    font-weight: 500;
}

.ps-card-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-card-toggle:hover {
    background: #e5e7eb;
}

.ps-card-toggle.is-open {
    background: #667eea;
    color: white;
    transform: rotate(180deg);
}

/* Card Details */
.ps-card-details {
    border-top: 1px solid #f3f4f6;
    padding: 24px;
    background: #fafafa;
}

/* Items Section */
.ps-items-section {
    margin-bottom: 24px;
}

.ps-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ps-items-grid {
    display: grid;
    gap: 12px;
}

.ps-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.ps-item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.ps-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ps-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-item-id {
    font-size: 12px;
    color: #9ca3af;
}

/* Management Section */
.ps-management-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
}

.ps-form-group {
    margin-bottom: 20px;
}

.ps-form-group:last-of-type {
    margin-bottom: 0;
}

.ps-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.ps-select,
.ps-input,
.ps-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ps-select:focus,
.ps-input:focus,
.ps-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ps-textarea {
    resize: vertical;
    font-family: inherit;
}

/* Action Buttons */
.ps-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.ps-btn {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.ps-btn-primary {
    background: #667eea;
    color: white;
}

.ps-btn-primary:hover:not(:disabled) {
    background: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ps-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ps-btn-secondary {
    background: #25d366;
    color: white;
}

.ps-btn-secondary:hover {
    background: #20ba5a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

/* Empty State */
.ps-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.ps-empty-state svg {
    margin: 0 auto 24px;
    opacity: 0.5;
}

.ps-empty-state h3 {
    font-size: 20px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.ps-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ps-dashboard-wrapper {
        padding: 16px;
    }
    
    .ps-header {
        padding: 20px 24px;
    }
    
    .ps-title {
        font-size: 22px;
    }
    
    .ps-card-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .ps-card-meta {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }
    
    .ps-card-toggle {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    .ps-actions {
        flex-direction: column;
    }
    
    .ps-btn {
        width: 100%;
        justify-content: center;
    }
}

.ps-whatsapp-container {
    display: inline-block;
    margin-top: 4px;
}
.ps-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ps-btn-copy-images {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ps-btn-copy-images:hover:not(:disabled) {
    background: #128C7E;
    transform: translateY(-1px);
}

.ps-btn-copy-images:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ps-btn-copy-images svg {
    width: 16px;
    height: 16px;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Desktop - Mayor margen superior */
@media (min-width: 769px) {
    .lr-lookbook-wrapper {
        margin-top: 70px; /* Margen mayor para PC */
    }
}
/* ========================================
   BRANDS COLUMN - Columna de logos
   ======================================== */

.look-brands-column {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
    pointer-events: none; /* No interfiere con clicks en hotspots */
}

/* ========================================
   BRAND BADGE - Badge individual
   ======================================== */

.look-brand-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Border sutil */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Shadow para profundidad */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    
    /* Flexbox para centrar logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    
    /* Transición suave */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Restaurar pointer events para hover */
    pointer-events: auto;
}

/* ========================================
   BRAND BADGE - Hover State
   ======================================== */

.look-brand-badge:hover {
    /* Más opaco y brillante al hover */
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    
    /* Efecto de lift */
    transform: scale(1.1) translateY(-2px);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ========================================
   BRAND LOGO - Imagen dentro del badge
   ======================================== */

.look-brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.look-brand-badge:hover img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* ========================================
   RESPONSIVE - Mobile adjustments
   ======================================== */

@media (max-width: 768px) {
    .look-brands-column {
        left: 10px;
        gap: 12px;
    }
    
    .look-brand-badge {
        width: 45px;
        height: 45px;
        padding: 7px;
    }
}

@media (max-width: 480px) {
    .look-brands-column {
        left: 8px;
        gap: 10px;
    }
    
    .look-brand-badge {
        width: 40px;
        height: 40px;
        padding: 6px;
        
        /* Backdrop blur más ligero en móvil para performance */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ========================================
   DARK BACKGROUND VARIANT
   Para looks con fondos oscuros
   ======================================== */

.look-item--dark .look-brand-badge {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.look-item--dark .look-brand-badge:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   ANIMATION - Entrada suave
   ======================================== */

@keyframes brandFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.look-brand-badge {
    animation: brandFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Delay progresivo para múltiples badges */
.look-brand-badge:nth-child(1) { animation-delay: 0.1s; }
.look-brand-badge:nth-child(2) { animation-delay: 0.2s; }
.look-brand-badge:nth-child(3) { animation-delay: 0.3s; }
.look-brand-badge:nth-child(4) { animation-delay: 0.4s; }
.look-brand-badge:nth-child(5) { animation-delay: 0.5s; }

/* ========================================
   ACCESSIBILITY
   ======================================== */

.look-brand-badge:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Asegurar que tooltips funcionen */
.look-brand-badge[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 1000;
    
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .look-brands-column {
        position: static;
        transform: none;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .look-brand-badge {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
    }
}
/* === MODAL DE IMAGEN (MÓVIL) === */
.ps-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ps-image-modal.show {
    opacity: 1;
}

.ps-image-modal.closing {
    opacity: 0;
}

.ps-image-modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.ps-image-modal.show .ps-image-modal-content {
    transform: scale(1);
}

/* === BOTÓN DE CERRAR MODAL (VERSIÓN CORREGIDA) === */

.ps-image-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    
    /* Fondo y borde */
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    
    /* Tamaño exacto (círculo perfecto) */
    width: 36px;
    height: 36px;
    min-width: 36px;  /* ← Previene que se deforme */
    min-height: 36px; /* ← Previene que se deforme */
    
    /* Centrar el × */
    display: flex;           /* ← CRÍTICO para centrar */
    align-items: center;     /* ← Centra verticalmente */
    justify-content: center; /* ← Centra horizontalmente */
    padding: 0;              /* ← Elimina padding que deforma */
    
    /* Texto */
    font-size: 24px;
    line-height: 1;
    color: #666;
    
    /* Interacción */
    cursor: pointer;
    transition: all 0.2s ease;
}

.ps-image-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
    transform: scale(1.1); /* ← Efecto de hover */
}

.ps-image-modal-close:active {
    transform: scale(0.95); /* ← Efecto al hacer click */
}

/* Asegurar que funciona en móvil también */
@media (max-width: 768px) {
    .ps-image-modal-close {
        width: 40px;  /* ← Más grande en móvil para touch */
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 26px;
    }
}

.ps-image-modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #2c3e50;
}

.ps-image-preview {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.ps-image-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.ps-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ps-btn-primary {
    background: #667eea;
    color: white;
}

.ps-btn-primary:hover {
    background: #5568d3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ps-btn-secondary {
    background: #10b981;
    color: white;
}

.ps-btn-secondary:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ps-image-hint {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 480px) {
    .ps-image-modal-content {
        padding: 20px;
    }
    
    .ps-image-actions {
        flex-direction: column;
    }
    
    .ps-btn {
        width: 100%;
    }
}

.look-item.is-hidden {
    /* Oculta el elemento completamente y lo saca del layout */
    display: none;
}