/* =============================================
   ASUX — LIQUID GLASS DESIGN SYSTEM
   Adapted from reference HTML + liquid-glass-rules.md
   Brand Colors: Cyan #73D2FF / Purple #A081FF
   ============================================= */

:root {
    /* Brand Colors (Constant) */
    --brand-cyan: #73D2FF;
    --brand-purple: #A081FF;

    /* ── LIGHT THEME ── */
    /* Fondo ghost-white — casi blanco puro, tinte periwinkle mínimo */
    --bg-color-1: #f8f8ff;
    --bg-color-2: #f2f4ff;
    --bg-color-3: #ffffff;

    /* Glass Core — Light: borde tintado + sombra más visible = efecto vidrio marcado */
    --glass-bg: rgba(255, 255, 255, 0.48);
    --glass-bg-heavy: rgba(255, 255, 255, 0.65);
    --glass-bg-light: rgba(255, 255, 255, 0.30);
    --glass-border: rgba(140, 120, 220, 0.18);
    --glass-border-strong: rgba(140, 120, 220, 0.32);
    --glass-shadow: 0 8px 32px rgba(99, 102, 241, 0.14), 0 2px 8px rgba(99, 102, 241, 0.06), inset 0 1px 0 rgba(255,255,255,0.95);
    --glass-shadow-sm: 0 4px 16px rgba(99, 102, 241, 0.11), 0 1px 4px rgba(99, 102, 241, 0.05), inset 0 1px 0 rgba(255,255,255,0.85);
    --glass-blur: blur(28px) saturate(200%);
    --glass-blur-heavy: blur(44px) saturate(220%);

    /* Sidebar Light */
    --glass-sidebar: rgba(255, 255, 255, 0.36);
    --glass-sidebar-blur: blur(28px) saturate(200%);
    --glass-bubble: rgba(255, 255, 255, 0.48);

    /* Text — Light: carbón-índigo on-brand, no negro puro (WCAG AAA >14:1) */
    --text-primary: rgba(30, 28, 46, 0.92);
    --text-secondary: rgba(30, 28, 46, 0.62);
    --text-muted: rgba(30, 28, 46, 0.45);
    --text-placeholder: rgba(30, 28, 46, 0.40);

    /* Title */
    --title-gradient: linear-gradient(135deg, #3b2a75, #5a44a8);
    --invert-filter: invert(0);

    /* Radius Tokens */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-full: 9999px;

    /* Font */
    --font: 'DM Sans', -apple-system, 'Inter', sans-serif;

    /* Easing System (consistent motion language) */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* CTAs, hover */
    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);   /* layout transitions */
    --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);       /* sidebar, modales */
}

/* ── DARK THEME ── */
[data-theme="dark"] {
    --bg-color-1: #0a0e1a;
    --bg-color-2: #0f172a;
    --bg-color-3: #1e1b4b;

    /* Glass Core — Dark (exact reference values) */
    --glass-bg: rgba(255, 255, 255, 0.10);
    --glass-bg-heavy: rgba(255, 255, 255, 0.18);
    --glass-bg-light: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-strong: rgba(255, 255, 255, 0.40);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255,0.25);
    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255,255,255,0.20);
    --glass-blur: blur(24px) saturate(180%);
    --glass-blur-heavy: blur(40px) saturate(200%);

    /* Sidebar Dark */
    --glass-sidebar: rgba(255, 255, 255, 0.06);
    --glass-sidebar-blur: blur(24px) saturate(180%);
    --glass-bubble: rgba(255, 255, 255, 0.10);

    /* Text — Dark (exact reference values) */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.60);
    --text-muted: rgba(255, 255, 255, 0.35);
    --text-placeholder: rgba(255, 255, 255, 0.35);

    /* Title */
    --title-gradient: linear-gradient(135deg, #ffffff, #cbd5e1);
    --invert-filter: invert(1) hue-rotate(180deg);
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* El atributo hidden debe ganar a cualquier display de las clases */
[hidden] {
    display: none !important;
}

/* Visually Hidden for accessibility & SEO */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


body {
    font-family: var(--font);
    background: var(--bg-color-1);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* iOS Safari: evita el recorte por la barra dinámica */
    width: 100vw;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* =============================================
   ANIMATED BACKGROUND
   Exact reference structure: ::before for gradient aurora,
   ::after for SVG noise texture overlay
   ============================================= */
.background-animation {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.background-animation::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(160, 129, 255, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 85%, rgba(115, 210, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 45% 35% at 65% 30%, rgba(160, 129, 255, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse 60% 45% at 5% 75%, rgba(115, 210, 255, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, var(--bg-color-1) 0%, var(--bg-color-2) 40%, var(--bg-color-3) 100%);
    animation: bgPulse 12s ease-in-out infinite alternate;
}

.background-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

@keyframes bgPulse {
    0%   { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0.85; transform: scale(1.04) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .background-animation::before {
        animation: none;
    }
}

/* =============================================
   LAYOUT CONTAINER
   ============================================= */
.app-layout {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100vh;
    height: 100dvh;  /* móvil: 100vh incluye la barra dinámica del navegador */
    width: 100vw;
}

/* =============================================
   THEME TOGGLE & MOBILE MENU — LIQUID GLASS BUTTONS
   ============================================= */
.mobile-menu-btn {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--glass-shadow-sm);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.mobile-menu-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.mobile-menu-btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(160, 129, 255, 0.18);
    border-color: rgba(160, 129, 255, 0.32);
    box-shadow: 0 8px 24px rgba(160, 129, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.25);
}
.mobile-menu-btn:active {
    transform: translateY(0) scale(0.98);
    background: rgba(160, 129, 255, 0.12);
}

.viewer-drag-handle {
    display: none;
    width: 100%;
    height: 24px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.viewer-drag-pill {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(160, 129, 255, 0.3);
}
[data-theme="dark"] .viewer-drag-pill { background: rgba(160, 129, 255, 0.5); }

.theme-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--glass-shadow-sm);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.theme-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(160, 129, 255, 0.18);
    border-color: rgba(160, 129, 255, 0.32);
    box-shadow: 0 8px 24px rgba(160, 129, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.25);
}

.theme-toggle:active {
    transform: translateY(0) scale(0.98);
    background: rgba(160, 129, 255, 0.12);
}

/* =============================================
   SIDEBAR — LIQUID GLASS
   ============================================= */
.glass-sidebar {
    width: 76px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: var(--glass-sidebar);
    backdrop-filter: var(--glass-sidebar-blur);
    -webkit-backdrop-filter: var(--glass-sidebar-blur);
    border-right: 1px solid var(--glass-border);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.08), 4px 0 24px rgba(0,0,0,0.15);
    z-index: 10;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-x: hidden;
    overflow-y: auto;
}

.glass-sidebar.expanded {
    width: 240px;
    align-items: flex-start;
    padding: 28px 16px;
}

/* Sidebar Items */
.sidebar-item {
    width: 48px;
    min-height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    /* Reset para <button>/<a>: mismo render que el <div> original */
    background: transparent;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.2s var(--ease-snappy),
                border-color 0.2s var(--ease-snappy),
                color 0.2s var(--ease-snappy),
                box-shadow 0.2s var(--ease-snappy);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.sidebar-item svg {
    flex-shrink: 0;
}

.sidebar-text {
    opacity: 0;
    margin-left: 1rem;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease 0.1s;
}

.glass-sidebar.expanded .sidebar-item {
    width: 100%;
}

.glass-sidebar.expanded .sidebar-text {
    opacity: 1;
}

/* Sidebar hover — exactly matching reference */
.sidebar-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--glass-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Active item — brand purple tinted glass */
.sidebar-item.active {
    color: var(--text-primary);
    background: rgba(160, 129, 255, 0.15);
    border-color: rgba(160, 129, 255, 0.30);
    box-shadow: 0 4px 16px rgba(160, 129, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sidebar-item.active svg {
    color: var(--brand-purple);
}

.spacer {
    flex-grow: 1;
}

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
    /* Crítico en móvil: con 100vh este contenedor queda más alto que el área
       visible (la barra del navegador no cuenta) y, como recorta con
       overflow:hidden, el input del chat —último de la columna— quedaba
       tapado y sin forma de llegar a él. */
    height: 100dvh;
    padding: 2rem;
    overflow: hidden;
}

/* =============================================
   CHAT HISTORY
   ============================================= */
.chat-history-container {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    gap: 1.5rem;
    padding-top: 5rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1.5rem;
    scroll-behavior: smooth;
    animation: fadeIn 0.4s ease-out;
}

/* Custom scrollbar — matching reference */
.chat-history-container::-webkit-scrollbar { width: 6px; }
.chat-history-container::-webkit-scrollbar-track { background: transparent; }
.chat-history-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.chat-history-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* =============================================
   MESSAGE BUBBLES
   ============================================= */
.message-bubble {
    max-width: 85%;
    padding: 1rem 1.5rem;
    font-size: 15px;
    line-height: 1.75;
    animation: fadeIn 0.3s ease-out forwards;
    flex-shrink: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* User bubble — glass-card style from reference */
.user-message {
    align-self: flex-end;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
    margin-left: auto;
    position: relative;
    overflow: hidden;
}

/* Inner highlight line (from reference glass-card::before) */
.user-message::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}

/* AI text — plain, no bubble */
.ai-message {
    align-self: flex-start;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    color: var(--text-primary);
    box-shadow: none;
    padding: 1rem 0;
    border-radius: 0;
    max-width: 90%;
}

/* =============================================
   MESSAGE TEXT — TRUNCATION & EXPAND
   ============================================= */
.message-text {
    display: block;
    white-space: pre-wrap;
}

.message-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.expand-toggle {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-purple);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.expand-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}

/* =============================================
   WELCOME CONTAINER
   ============================================= */
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1.5rem;
    animation: fadeIn 1s ease-out;
    transition: opacity 0.5s ease, height 0.5s ease;
}

.main-content:not(.chat-active) .welcome-container {
    margin-top: auto;
}

.main-content:not(.chat-active) .interaction-area {
    margin-bottom: 15vh;
}

.welcome-container.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.logo-wrapper {
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 10px 20px rgba(160, 129, 255, 0.15));
}

.welcome-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================
   SUGGESTION CHIPS — btn pill style from reference
   ============================================= */
.suggestion-chips-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 1rem;
    animation: fadeIn 1s ease-out 0.2s both;
    transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.5s ease;
    max-height: 200px;
    overflow: visible;
}

.main-content.chat-active .suggestion-chips-container {
    /* Una vez iniciada la conversación: chips DEBAJO de la respuesta de la IA
       y ENCIMA del input (order:-1 dentro de .interaction-area). */
    order: -1;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    max-height: none;
}

/* Chip */
.suggestion-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px; /* WCAG 2.2 §2.5.8 touch target */
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
    box-shadow: var(--glass-shadow-sm);
    transition: background 0.2s var(--ease-spring),
                border-color 0.2s var(--ease-spring),
                box-shadow 0.2s var(--ease-spring),
                transform 0.2s var(--ease-spring);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0; /* que NO se encojan: si no, los chips largos recortan el texto y "pierden" el padding */
    max-width: 100%;
}

/* Chip de acción (ej. "Abrir el proyecto"): acento para diferenciarlo de la navegación */
.suggestion-chip--action {
    border-color: var(--brand-purple);
    color: var(--brand-purple);
    box-shadow: 0 2px 10px rgba(160, 129, 255, 0.20);
}

/* Nota de privacidad dentro del flujo de feedback */
.as-fb-note { opacity: 0.55; font-size: 0.85em; }

/* Inner highlight line (from reference .btn::before) */
.suggestion-chip::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

/* Hover — más opaco para no mostrar el fondo azul */
.suggestion-chip:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

.suggestion-chip:active {
    transform: translateY(0) scale(0.98);
    background: rgba(255, 255, 255, 0.65);
}

.suggestion-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(160, 129, 255, 0.5), var(--glass-shadow-sm);
}

/* Foco visible para el resto de controles glass (mismo anillo que los chips) */
.sidebar-item:focus-visible,
.theme-toggle:focus-visible,
.project-card:focus-visible,
.viewer-close-btn:focus-visible,
.projects-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(160, 129, 255, 0.5);
}

/* Foco visible dentro del mockup ML (azul de la marca ML) */
.ml-toggle:focus-visible,
.ml-favorite-btn:focus-visible {
    outline: 2px solid #3483FA;
    outline-offset: 2px;
}

/* =============================================
   TYPING INDICATOR (respuesta del AI en curso)
   ============================================= */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 1rem 0;
    animation: fadeIn 0.3s ease-out forwards;
}

.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingPulse 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingPulse {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* =============================================
   INTERACTION AREA
   ============================================= */
.interaction-area {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hidden {
    display: none !important;
}

/* =============================================
   INPUT — LIQUID GLASS (reference .glass-input style)
   ============================================= */
.input-container-wrapper {
    width: 100%;
    /* El input nunca cede espacio: en pantallas bajas (o con el teclado
       abierto) los chips pueden ocupar 150px+ y, sin esto, el flex lo
       encogía a él antes que a nada. Que se achique el historial. */
    flex-shrink: 0;
}

.glass-input-container {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    padding: 0.4rem;
    box-shadow: var(--glass-shadow-sm);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Inner highlight line */
.glass-input-container::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    pointer-events: none;
}

/* Focus state — accent glow (sin cambio de fondo para mantener el glass color) */
.glass-input-container:focus-within {
    border-color: rgba(160, 129, 255, 0.50);
    box-shadow: 0 0 0 3px rgba(160, 129, 255, 0.12), var(--glass-shadow-sm);
}

.glass-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 18px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 400;
}

.glass-input::placeholder {
    color: var(--text-placeholder);
}

.glass-input:focus-visible {
    outline: none;
}

/* WCAG 2.2 Focus Ring */
.glass-input-container:has(.glass-input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(160, 129, 255, 0.5), 0 12px 40px rgba(160, 129, 255, 0.15);
}

/* =============================================
   SEND BUTTON — LIQUID GLASS ICON BUTTON
   (matching reference .btn-icon + .btn-purple)
   ============================================= */
.send-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-family: var(--font);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
    box-shadow: var(--glass-shadow-sm);
    transition: background 0.2s var(--ease-spring),
                border-color 0.2s var(--ease-spring),
                box-shadow 0.2s var(--ease-spring),
                transform 0.2s var(--ease-spring);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    outline: none;
}

.send-button::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

/* Hover — Purple accent tinted glass */
.send-button:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(160, 129, 255, 0.18);
    border-color: rgba(160, 129, 255, 0.32);
    box-shadow: 0 8px 24px rgba(160, 129, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.25);
}

.send-button:active {
    transform: translateY(0) scale(0.98);
    background: rgba(160, 129, 255, 0.12);
}

/* WCAG 2.2 Focus Ring — keyboard nav */
.send-button:focus-visible {
    outline: 2px solid var(--brand-purple);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(160, 129, 255, 0.25);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }

    .suggestion-chips-container {
        flex-wrap: wrap;
    }
}

/* ============================================================
   SIDEBAR DRAWER — pantallas más chicas que notebook (≤1024px)
   Off-canvas Sidebar & Bottom Sheet Pattern (Optimized for Mobile AI Chats).
   ============================================================ */
@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: flex;
    }

    /* Sidebar: Off-canvas por defecto. */
    .glass-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: 280px !important;
        min-height: 0;
        padding: 24px 16px;
        z-index: 99999 !important;
        gap: 1.5rem;
        transform: translateX(-100%);
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.28);
        /* UX Pro Max: 300ms con ease-out suave, sin overshoot */
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        /* Fondo OPACO en mobile para que el backdrop no se filtre */
        background: #f0ecf9 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    [data-theme="dark"] .glass-sidebar {
        background: #0f1225 !important;
    }
    
    /* En móviles, siempre se ven los textos (ya que está 100% abierto) */
    .sidebar-text {
        opacity: 1 !important;
        max-width: 200px !important;
        display: block !important;
    }
    .glass-sidebar > * {
        display: flex !important;
    }
    #sidebar-toggle {
        display: none !important; /* Escondemos el botón toggle interno en móvil */
    }

    .glass-sidebar.expanded {
        transform: translateX(0);
    }
    
    /* El contenido ocupa el 100% */
    .app-layout {
        padding-left: 0;
    }
}

/* Backdrop del drawer. Funciona por clase para evitar bugs de selectores CSS.
   Es EXCLUSIVO del drawer (≤1024px): en notebook/desktop la sidebar se expande
   en su propia columna, sin tapar el contenido, así que oscurecer el fondo ahí
   sería incorrecto. Por eso `display: block` vive dentro del media query. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998; /* Justo debajo de la sidebar (99999) */
    background: rgba(10, 10, 28, 0.55);
    animation: fadeIn 0.2s var(--ease-smooth);
}

@media (max-width: 1024px) {
    .sidebar-backdrop.visible {
        display: block;
    }
}

/* =============================================
   GLASS PROJECT CARD (Chat UI)
   ============================================= */
.glass-project-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 1rem;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    max-width: 340px;
    box-shadow: var(--glass-shadow-sm);
    -webkit-tap-highlight-color: transparent;
}
.glass-project-card:hover {
    border-color: rgba(160, 129, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(160, 129, 255, 0.18);
}
.glass-project-card:active {
    transform: scale(0.98);
    box-shadow: var(--glass-shadow-sm);
}
.gpc-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(160, 129, 255, 0.2), rgba(120, 90, 220, 0.15));
}
/* Logo del proyecto en la tarjeta de reabrir. Mismo encaje que en la card del
   panel: los modificadores --logo/--ml aportan el padding, así los logos de
   distinta proporción se ven parejos entre sí. */
.gpc-brand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gpc-icon-wrapper.viewer-project-badge--logo { padding: 6px; }
.gpc-icon-wrapper.viewer-project-badge--ml   { padding: 7px; }

.gpc-icon-wrapper svg {
    width: 20px;
    height: 20px;
    stroke: var(--brand-purple, #7c5cfc);
    fill: none;
}
.gpc-content {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Permite text-overflow */
}
.gpc-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gpc-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* Firefox scrollbar compatibility */
html, .chat-history-container, .viewer-final {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* =============================================
   ACCESSIBILITY — REDUCED MOTION (WCAG 2.3.3)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .background-animation::before {
        animation: none;
    }
    .welcome-container,
    .chat-history-container,
    .message-bubble,
    .suggestion-chips-container,
    .typing-indicator,
    .typing-dot {
        animation: none;
    }
    * {
        transition-duration: 0.01ms !important;
    }
}

/* =============================================
   FALLBACK — No backdrop-filter support
   ============================================= */
@supports not (backdrop-filter: blur(1px)) {
    .glass-input-container,
    .suggestion-chip,
    .theme-toggle,
    .send-button {
        background: rgba(255, 255, 255, 0.88);
    }
    .glass-sidebar {
        background: rgba(255, 255, 255, 0.92);
    }
    [data-theme="dark"] .glass-input-container,
    [data-theme="dark"] .suggestion-chip,
    [data-theme="dark"] .theme-toggle,
    [data-theme="dark"] .send-button {
        background: rgba(10, 14, 26, 0.92);
    }
    [data-theme="dark"] .glass-sidebar {
        background: rgba(10, 14, 26, 0.95);
    }
}

/* =============================================
   WORKSPACE — SPLIT LAYOUT
   ============================================= */
.workspace {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    transition: all 0.45s var(--ease-snappy);
}

/* Chat panel */
#chat-panel {
    /* Default REAL de la variable (no como fallback de var(): el fallback se cae
       a la base cuando --chat-w no está declarada). JS la sobreescribe inline. */
    --chat-w: 360px;
    flex: 1;
    /* No transicionamos flex/flex-basis: la animación de ese cambio quedaba trabada
       en el valor inicial (el panel se renderizaba al ancho de flex:1, no a 360).
       El visor del proyecto ya tiene su propia entrada (fadeInRight). */
    transition: min-width 0.45s var(--ease-snappy);
    min-width: 0;
}

/* Split mode: chat shrinks, viewer appears.
   Longhands a propósito: var() con fallback en el shorthand `flex` se descarta
   cuando --chat-w no está definida; en longhand (flex-basis) sí resuelve bien. */
.workspace.split #chat-panel {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--chat-w);
    min-width: 300px;
    border-right: 1px solid var(--glass-border);
}

/* Sin transición mientras se arrastra la manija (que siga el cursor 1:1) */
.workspace.resizing #chat-panel { transition: none; }
.workspace.resizing { user-select: none; cursor: col-resize; }

/* Manija de redimensión: overlay de ancho 0 sobre el borde chat↔proyecto.
   No ocupa espacio en el layout → el visor queda pegado al chat (sin gap). */
.workspace-resizer {
    display: none;
    flex: 0 0 0px;
    align-self: stretch;
    position: relative;
    z-index: 5;
    touch-action: none;
}
.workspace.split .workspace-resizer { display: block; }

/* Zona de agarre cómoda centrada en el borde, sin afectar el layout */
.workspace-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 11px;
    cursor: col-resize;
}

.workspace-resizer-grip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 38px;
    border-radius: 3px;
    background: var(--glass-border, rgba(0,0,0,0.15));
    transition: background 0.18s ease, height 0.18s ease;
    pointer-events: none;
}
.workspace-resizer:hover .workspace-resizer-grip,
.workspace.resizing .workspace-resizer-grip {
    background: var(--brand-purple, #A081FF);
    height: 56px;
}

/* =============================================
   PROJECTS PANEL OVERLAY (list)
   ============================================= */
.projects-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 30, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.22s var(--ease-smooth);
}

[data-theme="dark"] .projects-overlay {
    background: rgba(0, 0, 10, 0.55);
}

.projects-panel {
    width: min(580px, 94vw);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow);
    padding: 2rem;
    position: relative;
    animation: slideUp 0.3s var(--ease-spring);
}

[data-theme="dark"] .projects-panel {
    background: rgba(15, 18, 38, 0.80);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}

.projects-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    pointer-events: none;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.projects-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.projects-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.projects-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-spring);
    flex-shrink: 0;
}

.projects-close-btn:hover {
    background: rgba(160, 129, 255, 0.15);
    border-color: rgba(160, 129, 255, 0.32);
    color: var(--text-primary);
    transform: scale(1.08);
}

/* Grid */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;   /* una card debajo de otra */
    gap: 1rem;
}

/* Project Card */
.project-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    cursor: pointer;
    transition: transform 0.25s var(--ease-spring),
                box-shadow 0.25s var(--ease-spring),
                border-color 0.25s var(--ease-spring),
                background 0.25s var(--ease-spring);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .project-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(160, 129, 255, 0.38);
    box-shadow: 0 12px 32px rgba(160, 129, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.2);
    background: var(--glass-bg-heavy);
}

[data-theme="dark"] .project-card:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(160, 129, 255, 0.45);
    box-shadow: 0 12px 40px rgba(100, 70, 255, 0.30), inset 0 1px 0 rgba(255,255,255,0.12);
}

.project-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(160, 129, 255, 0.12);
    border: 1px solid rgba(160, 129, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-purple);
    flex-shrink: 0;
}

[data-theme="dark"] .project-card-icon {
    background: rgba(160, 129, 255, 0.18);
    border-color: rgba(160, 129, 255, 0.35);
}

/* Ícono de ML: isotipo (manitos) recoloreado a violeta, sin fondo amarillo
   → usa el mismo tinte violeta del resto de los íconos de la UI. */
.project-card-icon--ml,
.viewer-project-badge--ml {
    padding: 5px;
}
.ml-brand-icon,
.project-brand-icon {      /* alias genérico para íconos de otros proyectos */
    width: 100%;
    height: 100%;
    object-fit: contain;   /* el SVG ya es solo el isotipo */
}

/* Logos de proyecto a sangre (isotipo circular que llena su viewBox): mismo
   aire que el de ML para que las cards se lean parejas. */
.project-card-icon--logo,
.viewer-project-badge--logo {
    padding: 5px;
}


.project-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.project-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.project-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.project-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Fila inferior: chips a la izquierda, flecha a la derecha (misma altura, sin aire) */
.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0.35rem;
}

.project-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    /* Violeta del chat, con contraste fuerte en light (texto oscuro) */
    background: rgba(160, 129, 255, 0.13);
    border: 1px solid rgba(160, 129, 255, 0.30);
    color: #5b46a8;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .project-tag {
    /* En dark: texto violeta claro sobre fondo translúcido más marcado */
    background: rgba(160, 129, 255, 0.20);
    border-color: rgba(160, 129, 255, 0.42);
    color: #cbbcff;
}

.project-card-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s var(--ease-spring);
}

.project-card:hover .project-card-arrow {
    color: var(--brand-purple);
    transform: translateX(4px);
}

/* =============================================
   PROJECT VIEWER PANEL
   ============================================= */
.project-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    /* Contenedor de container-queries: el clon de ML responde a SU ancho (no al
       viewport), así se adapta al achicar/agrandar con la manija del workspace. */
    container-type: inline-size;
    container-name: pv;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    animation: fadeInRight 0.4s var(--ease-spring);
    position: relative;
}

/* El visor (chrome: header del proyecto + skeleton) sigue el dark mode del portfolio.
   El clon de ML NO se ve afectado porque vive dentro de .viewer-final, que tiene su
   propio fondo claro (#f5f5f5) — el dark mode solo pinta lo que está fuera de ahí. */
[data-theme="dark"] .project-viewer {
    background: rgba(255,255,255,0.03);
    border-left: 1px solid rgba(255,255,255,0.08);
}

@keyframes fadeInRight {
    /* Solo fade: el translateX quedaba "trabado" al ser el visor un container-query
       container, dejando un offset de 30px. Sin transform → el visor queda pegado. */
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Viewer Header */
.viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    flex-shrink: 0;
}

[data-theme="dark"] .viewer-header {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.08);
}

/* Nota suave del demo (no bloqueante): solo en pantallas chicas */
.viewer-mobile-note { display: none; }
@media (max-width: 768px) {
    .viewer-mobile-note {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.3;
        color: #5b46a8;
        background: rgba(160, 129, 255, 0.13);
        border-bottom: 1px solid rgba(160, 129, 255, 0.22);
        flex-shrink: 0;
    }
    .viewer-mobile-note svg { flex-shrink: 0; opacity: 0.85; }
}
[data-theme="dark"] .viewer-mobile-note {
    color: #cbbcff;
    background: rgba(160, 129, 255, 0.16);
    border-bottom-color: rgba(160, 129, 255, 0.28);
}

.viewer-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.viewer-project-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(160, 129, 255, 0.14);
    border: 1px solid rgba(160, 129, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-purple);
    flex-shrink: 0;
}

[data-theme="dark"] .viewer-project-badge {
    background: rgba(160, 129, 255, 0.22);
    border-color: rgba(160, 129, 255, 0.40);
}

.viewer-project-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Pulsing status dot */
.viewer-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-cyan);
    box-shadow: 0 0 6px rgba(115, 210, 255, 0.7);
    animation: pulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(115,210,255,0.7); }
    50%       { opacity: 0.5; box-shadow: 0 0 12px rgba(115,210,255,0.3); }
}

.viewer-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-spring);
    flex-shrink: 0;
}

.viewer-close-btn:hover {
    background: rgba(255, 80, 80, 0.12);
    border-color: rgba(255, 80, 80, 0.30);
    color: #ff6060;
    transform: scale(1.08);
}

/* Viewer Body */
.viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}

/* =============================================
   LIQUID GLASS SKELETON
   ============================================= */

/* Base skeleton block */
.skel-block {
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    animation: skelGlassIn 0.7s var(--ease-smooth) both;
    /* liquid shimmer sweep */
}

/* Entry: from pure glass → semi-solid */
@keyframes skelGlassIn {
    0%   {
        opacity: 0;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(20px);
        box-shadow: none;
        transform: scaleX(0.92);
    }
    40%  {
        opacity: 1;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.30);
        backdrop-filter: blur(28px) saturate(200%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 12px rgba(160,129,255,0.10);
        transform: scaleX(1);
    }
    100% {
        opacity: 1;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.22);
        backdrop-filter: blur(24px) saturate(180%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(160,129,255,0.08);
        transform: scaleX(1);
    }
}

[data-theme="dark"] .skel-block {
    animation-name: skelGlassInDark;
}

@keyframes skelGlassInDark {
    0%   {
        opacity: 0;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.05);
        box-shadow: none;
        transform: scaleX(0.92);
    }
    40%  {
        opacity: 1;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 16px rgba(100,80,255,0.20);
        transform: scaleX(1);
    }
    100% {
        opacity: 1;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.13);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(100,80,255,0.12);
        transform: scaleX(1);
    }
}

/* Shimmer sweep after entry */
.skel-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.28) 50%,
        transparent 80%
    );
    background-size: 200% 100%;
    animation: skelShimmer 2.2s ease-in-out 0.7s infinite;
}

[data-theme="dark"] .skel-block::after {
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.12) 50%,
        transparent 80%
    );
    animation: skelShimmer 2.2s ease-in-out 0.7s infinite;
}

@keyframes skelShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Dissolve out */
/* El skeleton tiene que ocupar el MISMO rectángulo que el contenido que
   anuncia. .viewer-final es `position:absolute; inset:0`, así que ignora el
   padding de .viewer-body y va a sangre completa; el skeleton, al ser un hijo
   en flujo normal, quedaba 2rem más angosto por lado (311px de 375 en mobile)
   y dejaba ver el fondo claro del visor como dos franjas laterales. Contra un
   proyecto de UI oscura como Nashe se leían como espacios en blanco. */
.skeleton-stage {
    position: absolute;
    inset: 0;
    padding: 2rem;
    overflow: hidden;
}

/* En angosto el contenido real casi no respira contra los bordes: el
   skeleton acompaña para no prometer márgenes que después no están. */
@container pv (max-width: 700px) {
    .skeleton-stage { padding: 1rem; }
}

.skeleton-stage.skel-dissolve {
    animation: skelDissolve 0.6s var(--ease-smooth) forwards;
}

@keyframes skelDissolve {
    from { opacity: 1; filter: blur(0px); transform: scale(1); }
    to   { opacity: 0; filter: blur(4px); transform: scale(1.01); }
}

/* ── Skeleton: replica la estructura del clon de ML ── */
.skel-line {
    height: 14px;
    border-radius: var(--radius-full);
}
.skel-line--title { height: 20px; width: 60%; border-radius: var(--radius-sm); }
.skel-line--lg    { width: 90%; }
.skel-line--md    { width: 60%; }

/* Header: logo + buscador + nav */
.skel-ml-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.skel-ml-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.skel-ml-search {
    flex: 1;
    max-width: 520px;
    height: 38px;
    border-radius: 6px;
}
.skel-ml-nav {
    display: flex;
    gap: 0.6rem;
    margin-left: auto;
}
.skel-ml-navitem {
    width: 62px;
    height: 18px;
    border-radius: var(--radius-full);
}

/* Hero banner */
.skel-ml-hero {
    width: 100%;
    height: 140px;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

/* Contenido: filtros + grilla */
.skel-ml-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.skel-ml-sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.skel-ml-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.skel-ml-filter .skel-line { flex: 1; }
.skel-ml-toggle {
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
}
.skel-ml-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 0.25rem;
}
.skel-ml-logobox {
    height: 46px;
    border-radius: 6px;
}

.skel-ml-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    min-width: 0;
}
.skel-ml-product {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skel-ml-prodimg {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    border-radius: var(--radius-sm);
}
.skel-ml-prodprice {
    width: 55%;
    height: 18px;
    border-radius: var(--radius-sm);
    margin-top: 2px;
}

/* ── Skeleton: Nashe Digitales (tienda de juegos) ──
   Sin sidebar de filtros y con portadas verticales: es la diferencia de
   silueta respecto de ML, que sí tiene columna de filtros. */
.skel-nd-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.skel-nd-logo {
    width: 130px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.skel-nd-nav {
    display: flex;
    gap: 1rem;
}
.skel-nd-navitem {
    width: 74px;
    height: 15px;
    border-radius: var(--radius-full);
}
.skel-nd-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}
.skel-nd-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
.skel-nd-hero {
    width: 100%;
    height: 210px;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.skel-nd-sectitle {
    width: 190px;
    margin-bottom: 1rem;
}
.skel-nd-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.skel-nd-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skel-nd-cover {
    width: 100%;
    aspect-ratio: 3 / 4;   /* portada de juego, más alta que ancha */
    border-radius: var(--radius-sm);
}
.skel-nd-price {
    width: 60%;
    height: 16px;
    border-radius: var(--radius-sm);
}

/* ── Skeleton: Base360 (landing, no tienda) ──
   Titular grande centrado y dos CTA. Sin grillas de producto. */
.skel-b3-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.skel-b3-logo {
    width: 110px;
    height: 24px;
    border-radius: var(--radius-sm);
}
.skel-b3-links {
    display: flex;
    gap: 1.1rem;
}
.skel-b3-link {
    width: 68px;
    height: 14px;
    border-radius: var(--radius-full);
}
.skel-b3-cta {
    width: 112px;
    height: 34px;
    margin-left: auto;
    border-radius: var(--radius-full);
}
.skel-b3-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    margin-bottom: 2.25rem;
}
.skel-b3-pill {
    width: 300px;
    height: 26px;
    border-radius: var(--radius-full);
    margin-bottom: 10px;
}
.skel-b3-title {
    width: min(560px, 82%);
    height: 40px;
    border-radius: var(--radius-sm);
}
.skel-b3-title--2 { width: min(600px, 88%); }
.skel-b3-title--3 { width: min(470px, 70%); }
.skel-b3-sub {
    width: min(540px, 78%);
    height: 14px;
    border-radius: var(--radius-full);
    margin-top: 6px;
}
.skel-b3-sub--2 { width: min(430px, 62%); margin-top: 0; }
.skel-b3-buttons {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}
.skel-b3-btn {
    width: 150px;
    height: 44px;
    border-radius: var(--radius-full);
}
.skel-b3-visual {
    width: 100%;
    height: 190px;
    border-radius: var(--radius-md);
}

/* ── Responsive de los skeletons ──
   Responden al ancho del VISOR (container pv), no del viewport: el visor
   es redimensionable con la manija, igual que el contenido real. */
@container pv (max-width: 900px) {
    .skel-nd-grid { grid-template-columns: repeat(4, 1fr); }
}

@container pv (max-width: 700px) {
    /* ML en angosto pierde la columna de filtros, como el clon real */
    .skel-ml-sidebar { display: none; }
    .skel-ml-grid { grid-template-columns: repeat(2, 1fr); }
    .skel-ml-search { max-width: none; }
    .skel-ml-nav { display: none; }
    .skel-ml-hero { height: 110px; }

    .skel-nd-nav { display: none; }
    .skel-nd-grid { grid-template-columns: repeat(2, 1fr); }
    .skel-nd-hero { height: 150px; }
    .skel-nd-logo { width: 104px; }

    .skel-b3-links { display: none; }
    .skel-b3-nav { margin-bottom: 2rem; }
    .skel-b3-pill { width: 82%; }
    .skel-b3-title { height: 30px; }
    .skel-b3-buttons { flex-direction: column; align-items: center; width: 100%; }
    .skel-b3-btn { width: min(260px, 80%); }
    .skel-b3-visual { height: 150px; }
}

/* =============================================
   VIEWER FINAL STATE — "Proyecto en proceso"
   ============================================= */
.viewer-final {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
    background: #f5f5f5;
    overflow-y: auto;
    overflow-x: hidden;
    animation: fadeIn 0.5s var(--ease-smooth);
}

/* Cada proyecto del visor ocupa al menos todo el alto disponible: lo necesitan
   los paneles que embeben un iframe a altura completa. */
.viewer-project {
    min-height: 100%;
}

/* Paneles que embeben un iframe: necesitan alto DEFINIDO, no min-height.
   Un porcentaje solo resuelve contra una altura concreta del padre; con
   min-height el iframe cae a su default de 150px. .viewer-final sí tiene
   height:100%, así que la cadena cierra acá. */
.viewer-project--embed {
    height: 100%;
}

/* Proyectos embebidos por iframe (viven en su propio repo y deploy).
   El scroll queda ADENTRO del iframe a propósito: si estirásemos el iframe a
   su alto real, el IntersectionObserver de la página embebida vería todo en
   viewport de una y dispararía las animaciones de scroll todas juntas. */
/* El documento embebido no siempre cubre el ancho exacto del <iframe>: puede
   reservar su propio gutter de scroll, y ahí asomaba el blanco del iframe como
   una franja fina en el borde derecho. Se nota sobre todo con sitios de UI
   oscura. Se pinta el panel con el color de fondo del sitio embebido —lo
   declara cada panel en --embed-bg— y el iframe queda transparente: si igual
   queda un sliver, es del mismo color y no se ve. */
.viewer-project--embed {
    background: var(--embed-bg, #fff);
}

.viewer-project-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.viewer-final-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    max-width: 360px;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .viewer-final-inner {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}

.viewer-final-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    pointer-events: none;
}

.viewer-wip-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(160, 129, 255, 0.12);
    border: 1px solid rgba(160, 129, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-purple);
    animation: wipIconPulse 3s ease-in-out infinite;
}

[data-theme="dark"] .viewer-wip-icon {
    background: rgba(160, 129, 255, 0.20);
    border-color: rgba(160, 129, 255, 0.40);
}

@keyframes wipIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(160, 129, 255, 0.25); }
    50%       { box-shadow: 0 0 0 10px rgba(160, 129, 255, 0); }
}

.viewer-wip-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.viewer-wip-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.viewer-wip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 0.25rem;
}

/* =============================================
   ML PAGE — MERCADOLIBRE SEARCH RESULTS
   ============================================= */


/* ── Top Bar ──────────────────────────────────── */
.ml-logo-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ml-logo-img {
    height: 34px;
    width: auto;
    display: block;
}

/* Address link below logo */
.ml-topbar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
}

.nav-menu-cp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.25;
}

.nav-menu-cp-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-menu-cp svg {
    flex-shrink: 0;
    color: #555;
}

.nav-menu-cp-send {
    font-size: 11px;
    font-weight: 400;
    color: #555;
    white-space: nowrap;
}

.nav-menu-link-cp {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.nav-menu-cp:hover .nav-menu-cp-send,
.nav-menu-cp:hover .nav-menu-link-cp {
    text-decoration: underline;
}

.ml-logo-text {
    font-size: 11px;
    font-weight: 400;
    color: #333;
    line-height: 1.2;
}

.ml-logo-text strong {
    font-weight: 800;
    font-size: 13px;
}

.ml-search-wrap {
    width: 100%;
    min-width: 0;
}

.ml-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
    padding: 0;
    height: 40px;
    font-size: 15px;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    max-width: 588px;
}

.ml-search-input {
    flex: 1;
    min-width: 0; /* permite que el input se achique en vez de empujar el header */
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    font-family: inherit;
    padding: 0 1rem;
    min-width: 0;
}

.ml-search-category {
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background: #f5f5f5;
    font-size: 12px;
    color: #555;
    padding: 0 0.5rem;
    cursor: pointer;
    outline: none;
    max-width: 140px;
}

.ml-search-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    position: relative;
    padding: 0 12px;
    cursor: pointer;
    background: transparent;
    transition: background 0.2s ease;
}

.ml-search-scope:hover {
    background: #f5f5f5;
}

.ml-search-scope::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: #e6e6e6;
}

.ml-scope-text {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    font-weight: 300;
}

.ml-scope-chevron {
    color: #666;
}

.ml-search-btn {
    background: transparent;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    height: 100%;
    position: relative;
}

.ml-search-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: #e6e6e6;
}

.ml-search-btn:hover { background: #f5f5f5; }

.ml-nav-link.ml-nav-promo {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Secondary Nav ────────────────────────────── */
.ml-secondary-nav {
    display: none; /* Replaced by grid */
}

.ml-secondary-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 0.5rem;
}



.ml-secondary-links {
    display: flex;
    align-items: flex-end;
    gap: 0.1rem;
    flex: 1;
    overflow: hidden;
    align-self: flex-end;
    padding-bottom: 2px;
}

.ml-sec-link {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    padding: 0 0.6rem;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.15s ease;
}



.ml-sec-link:hover { color: #2968C8; text-decoration: underline; }

.ml-sec-link--badge {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ml-gratis-badge {
    background: #00A650;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}

.ml-secondary-user {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
    align-self: flex-end;
    padding-bottom: 2px;
}

.ml-secondary-user .ml-sec-link {
    padding: 0;
}

.ml-user-menu-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    cursor: pointer;
}

.ml-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2968C8, #4ea5e0);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: translateY(5px);
}

.ml-notif-icon {
    position: relative;
    display: flex;
    align-items: center;
    color: #555;
    cursor: pointer;
}



.ml-notif-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    background: #E31C1C;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 9px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* ── Hero Fashion Banner ──────────────────────── */
.ml-hero-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ml-hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* ── Content Area: Sidebar + Grid ──────────────── */
.ml-content-area {
    display: flex;
    align-items: flex-start;
    background: #f5f5f5;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    /* Sin padding izquierdo: la barra de filtros queda pegada al borde del visor */
    padding: 0 1.25rem 0 0;
}



/* ── Sidebar Filters ───────────────────────────── */
.ml-sidebar {
    width: 265px;
    flex-shrink: 0;
    background: #fff;
    padding: 0;
    min-height: 400px;
}



.ml-sidebar-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}



.ml-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.2rem;
}



.ml-sidebar-count {
    font-size: 12px;
    color: #00A650;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.ml-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ml-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #e8f0fc;
    border: 1px solid #b3c9f5;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #2968C8;
}



.ml-chip-x {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    opacity: 0.7;
    margin-left: 2px;
}

.ml-chip-x:hover { opacity: 1; }

.ml-full-badge {
    background: #00A650;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

.ml-filter-toggle-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}



.ml-filter-toggle-sub {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}



.ml-filter-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ml-toggle {
    width: 36px;
    height: 20px;
    border-radius: 20px;
    background: #ccc;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
    margin-top: 2px;
}

.ml-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}

.ml-toggle[aria-checked="true"] {
    background: #2968C8;
}

.ml-toggle[aria-checked="true"]::after {
    transform: translateX(16px);
}

.ml-filter-link {
    font-size: 13px;
    color: #2968C8;
    font-weight: 500;
    cursor: pointer;
}



/* ── Grid Area ─────────────────────────────────── */
.ml-grid-area {
    flex: 1;
    min-width: 0;
}

/* ── Sort Bar ──────────────────────────────────── */
.ml-sort-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.65rem 1rem;
    background: #f5f5f5;
    border-bottom: none;
    gap: 0.5rem;
}



.ml-sort-label {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}



/* Proxima Nova — Mercado Libre's brand font, served from their Andes CDN.
   Used to mirror ML typography in the "Democratizando la moda" mockup.
   Falls back to Source Sans 3 (loaded via Google Fonts) if the CDN changes. */
@font-face {
    font-family: "Proxima Nova";
    src: url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-light.woff2") format("woff2"),
         url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.woff2") format("woff2"),
         url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-medium.woff2") format("woff2"),
         url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.woff2") format("woff2"),
         url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-bold.woff2") format("woff2"),
         url("https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.ml-page {
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
    background: #f5f5f5;
    min-height: 100%;
    width: 100%;
    color: #333;
}



/* Top Navigation Bar */
.ml-header {
    background: #FFE600;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 rgba(0,0,0,0.10);
    padding: 8px 0;
    /* Color base oscuro fijo: los íconos del header (carrito, campana) usan
       currentColor; sin esto heredan el texto claro del dark mode del portfolio. */
    color: #333;
}



.ml-header-grid {
    display: grid;
    /* minmax(0,1fr) en la columna del buscador: sin esto el track no baja de su
       min-content y el header desborda al angostar el visor. */
    grid-template-columns: 140px minmax(0, 1fr) auto;
    grid-template-areas: 
        "logo search promo"
        "cp nav user";
    gap: 0.6rem 20px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem;
    width: 100%;
}

.ml-logo {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.5px;
}


.ml-search-input::placeholder {
    color: rgba(0, 0, 0, 0.55);
}







.ml-search-bar svg { color: #888; flex-shrink: 0; }

.ml-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-left: auto;
}

.ml-nav-link {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.ml-nav-link:hover { opacity: 0.7; }
.ml-nav-cart { display: flex; align-items: center; }

/* Category Tabs */
.ml-category-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 0;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}



.ml-tab {
    padding: 0.5rem 1rem;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #555;
    cursor: pointer;
    border-radius: 0;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}



.ml-tab:hover { color: #333; }


.ml-tab--active {
    color: #2968C8 !important;
    border-bottom-color: #2968C8;
    font-weight: 600;
}

/* Deal Banner */
.ml-deal-banner {
    background: linear-gradient(135deg, #2968C8 0%, #4a86e8 100%);
    padding: 1.25rem 1.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ml-deal-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.ml-deal-banner-content { position: relative; z-index: 1; }

.ml-deal-badge {
    display: inline-block;
    background: #FFE600;
    color: #333;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.ml-deal-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}

.ml-deal-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    font-weight: 400;
}

/* Filter Bar */
.ml-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    flex-wrap: wrap;
}



.ml-results-count {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    white-space: nowrap;
    margin-right: 0.5rem;
    flex-shrink: 0;
}



.ml-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.ml-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.9rem;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: 1px solid #c0c0c0;
    color: #555;
    transition: all 0.15s ease;
    white-space: nowrap;
}



.ml-filter-chip:hover {
    border-color: #2968C8;
    color: #2968C8;
    background: rgba(41, 104, 200, 0.06);
}

.ml-filter-chip--active {
    background: rgba(41, 104, 200, 0.10);
    border-color: #2968C8;
    color: #2968C8;
    font-weight: 600;
}

.ml-sort-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #2968C8;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}



/* Product Grid — conteo de columnas por ancho del VISOR (container queries):
   3 en pantallas grandes, 2 en el rango típico de esta notebook (~640–1020),
   1 en mobile real. Las reglas de conteo están más abajo con los @container. */
.ml-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0;
    background: #f5f5f5;
}



/* Product Card */
.ml-product-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}



.ml-product-card:hover {
    box-shadow: 0 7px 16px rgba(0,0,0,0.15);
    z-index: 2;
    position: relative;
}

/* Hover Elements */
.ml-favorite-btn,
.ml-carousel-arrow {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 4;
}
.ml-product-card:hover .ml-favorite-btn,
.ml-product-card:hover .ml-carousel-arrow {
    opacity: 1;
}

.ml-favorite-btn {
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    color: #3483FA;
}
.ml-favorite-btn svg {
    width: 100%;
    height: 100%;
}

.ml-carousel-arrow {
    top: 50%;
    right: -24px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    color: #3483FA;
}
.ml-carousel-arrow svg {
    width: 24px;
    height: 24px;
}

/* Product Image */
.ml-product-img-wrap {
    width: 100%;
    padding-top: 100%; /* 1:1 square */
    position: relative;
    background: #f8f8f8;
    overflow: hidden;
    flex-shrink: 0;
}



.ml-product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #fff;
    transition: transform 0.3s ease;
}

.ml-product-card:hover .ml-product-img {
    transform: scale(1.04);
}

/* Product Image Content */
.ml-badge-oferta {
    position: absolute;
    top: 0;
    left: 0;
    background: #2968C8;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    margin: 8px;
}
.ml-badge-oferta svg {
    width: 14px;
    height: 14px;
}
.ml-badge-masvendido {
    position: absolute;
    top: 0;
    left: 0;
    background: #FF7733;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    z-index: 3;
    margin: 8px;
}
.ml-product-img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ebebeb;
    transition: transform 0.3s ease;
}
.ml-product-card:hover .ml-product-img-placeholder {
    transform: scale(1.04);
}
.ml-color-swatches {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 6px;
    border-radius: 12px;
}
.ml-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.ml-color-dot-multicolor {
    background: conic-gradient(from 90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff00ff, #ff0000);
}
.ml-color-count {
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}

/* Product Info */
.ml-product-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ml-product-title {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-brand {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ml-brand-name {
    color: #333;
    font-weight: 700;
}
.ml-brand-store {
    color: #999;
}
.ml-verified-badge {
    width: 12px;
    height: 12px;
    fill: #2968C8;
}

.ml-rating {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    display: flex;
    align-items: center;
}
.ml-star-icon {
    margin-right: 2px;
}
.ml-rating-score {
    color: #333;
    margin-right: 2px;
}
.ml-rating-reviews {
    color: #999;
}

/* Pricing */
.ml-product-price-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
}
.ml-price-before {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    height: 15px;
    display: block;
}
.ml-price-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ml-price-main {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    line-height: 1;
}
.ml-discount-badge {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #00A650;
    padding: 3px 6px;
    border-radius: 3px;
    line-height: 1;
}

/* Installments */
.ml-installments {
    margin-top: 4px;
    line-height: 1.2;
}
.ml-installments-green {
    font-size: 14px;
    color: #00A650;
    font-weight: 400;
}
.ml-installments-sub {
    font-size: 14px;
    color: #333;
    font-weight: 400;
}

/* Promo Box */
.ml-promo-box {
    margin-top: 8px;
    line-height: 1.4;
}
.ml-promo-text {
    background: #E6F0FF;
    color: #3483FA;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Shipping */
.ml-shipping {
    font-size: 14px;
    color: #00A650;
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ml-card-full-img {
    height: 15px;
}

.ml-sold {
    color: #888;
    font-weight: 400;
}



/* Pagination */
.ml-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border-top: 1px solid #ebebeb;
    flex-wrap: wrap;
}



.ml-page-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: #333;
    transition: all 0.15s ease;
}



.ml-page-btn:hover {
    border-color: #2968C8;
    color: #2968C8;
}

.ml-page-btn--active {
    background: #2968C8 !important;
    color: #fff !important;
    border-color: #2968C8 !important;
    font-weight: 700;
}

.ml-page-ellipsis {
    color: #888;
    font-size: 14px;
    padding: 0 0.25rem;
}

.ml-page-next {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid #2968C8;
    color: #2968C8;
    transition: all 0.15s ease;
    margin-left: 0.5rem;
}



.ml-page-next:hover {
    background: #2968C8;
    color: #fff;
}

/* Footer Disclaimer */
.ml-disclaimer {
    font-size: 11px;
    color: #aaa;
    padding: 1rem 1.25rem 1.5rem;
    line-height: 1.5;
    background: #f5f5f5;
    text-align: center;
}

/* ==========================================================================
   Refactored MercadoLibre Styles (Migrated from HTML Inline Styles - Issue 15)
   ========================================================================== */

.ml-logo-wrap {
    grid-area: logo;
}

.ml-search-wrap {
    grid-area: search;
}

.ml-topbar-right-promo {
    grid-area: promo;
}

.ml-nav-promo-icon {
    margin-right: 5px;
}

.nav-menu-cp-container {
    grid-area: cp;
}

.ml-secondary-links-container {
    grid-area: nav;
}

.ml-secondary-user-container {
    grid-area: user;
}

.ml-secondary-links-item-flex,
.ml-secondary-user-item-flex {
    display: inline-flex;
    align-items: center;
}

.ml-secondary-links-icon,
.ml-secondary-user-icon {
    margin-left: 4px;
}

.ml-sidebar-main-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.ml-sidebar-count-results {
    color: #666;
    font-weight: 400;
    margin-bottom: 12px;
    font-size: 13px;
}

.ml-active-chip--plain {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #666;
    font-weight: 400;
    border-radius: 4px;
}

.ml-chip-close-btn {
    color: #999;
}

.ml-filter-toggle-label--bold {
    font-weight: 600;
}

.ml-filter-toggle-full-label {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ml-filter-toggle-full-img-container {
    display: flex;
    align-items: center;
}

.ml-filter-toggle-full-img {
    height: 15px;
}

.ml-sidebar-section--no-border {
    border-bottom: none;
    margin-top: 8px;
}

.ml-sidebar-title--sub {
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
}

.ml-official-stores-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ml-official-store-card {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ml-official-store-card:hover {
    border-color: #2968C8;
}

.ml-official-store-logo {
    max-height: 20px;
    max-width: 80%;
}

.ml-official-store-logo--large {
    max-height: 24px;
    max-width: 80%;
}

.ml-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ml-filter-list-link {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.ml-filter-list-link:hover {
    color: #2968C8;
}

.ml-filter-list-link-full {
    height: 16px;
    vertical-align: text-bottom;
}

.ml-filter-link {
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ml-filter-link--blue {
    color: #3483fa;
    font-size: 14px;
}

.ml-filter-link--blue:hover {
    color: #2968C8;
}

.ml-product-img--cover {
    object-fit: cover;
}

.ml-highlight-tag--sustentable {
    background: #00A650 !important;
}

.ml-highlight-tag--inclusivo {
    background: #2968C8 !important;
}

.ml-highlight-tag--dia {
    background: #E31C1C !important;
}


/* ==========================================================================
   Responsive Adaptation System (Issue 16)
   ========================================================================== */

@media (max-width: 992px) {
    /* 1. Main Workspace Split Transition */
    .workspace.split {
        flex-direction: column;
    }

    /* La manija de redimensión solo aplica en desktop (lado a lado); apilado no */
    .workspace.split .workspace-resizer { display: none; }
    .workspace.split #chat-panel { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }

    .main-content.split-chat {
        width: 100% !important;
        height: 50vh !important;
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    }
    
    .project-viewer {
        width: 100% !important;
        height: 50vh !important;
    }
}

@media (max-width: 768px) {
    /* Bottom Sheet Mode for Project Viewer on Mobile */
    .workspace.split {
        display: block;
        position: relative;
    }

    .main-content.split-chat {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100% !important;
    }

    .project-viewer {
        position: fixed;
        top: 5dvh;
        left: 0;
        width: 100% !important;
        height: 95dvh !important;
        z-index: 300;
        background: #f5f5f5;
        border-left: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
        transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .project-viewer.hidden {
        display: flex !important;
        top: 100vh !important;
        top: 100dvh !important;
        pointer-events: none;
    }
    .viewer-drag-handle {
        display: flex;
    }
    .viewer-header {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    /* 2. MercadoLibre Responsive Layout */
    .ml-topbar-right-promo,
    .ml-secondary-links-container {
        display: none !important;
    }
    
    /* El conteo de columnas lo deciden las container queries (según ancho del visor) */
    .ml-product-grid {
        gap: 8px;
    }
    
    .ml-product-card {
        padding: 8px !important;
    }
    
    .ml-product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        height: auto !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    

    
    .ml-installments {
        font-size: 11px !important;
    }
    
    .ml-stars {
        font-size: 10px !important;
    }

    /* ── ML Mobile Header: Simplified like the real app ── */
    .ml-header {
        background: #ffe600 !important;
    }
    .ml-header-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas: 
            "search"
            "cp" !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    /* Hide desktop-only header items */
    .ml-logo-wrap,
    .ml-topbar-right,
    .ml-secondary-links,
    .ml-secondary-user {
        display: none !important;
    }
    .nav-menu-cp {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        color: #333 !important;
        grid-area: cp !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .nav-menu-cp-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .nav-menu-cp-send, .nav-menu-link-cp {
        font-size: 12px !important;
        color: #333 !important;
    }
    .ml-search-wrap {
        grid-area: search !important;
    }
    .ml-search-bar {
        border-radius: 20px !important;
        height: 38px !important;
        background: #fff !important;
    }
    .ml-search-input {
        font-size: 14px !important;
        padding-left: 12px !important;
    }
    .ml-search-scope {
        display: none !important;
    }

    /* ── Hide desktop sidebar (replaced by mobile filter bar) ── */
    .ml-sidebar {
        display: none !important;
    }
    .ml-content-area {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .ml-grid-area {
        width: 100% !important;
    }
    
    /* ── Show mobile filter bar ── */
    .ml-mobile-filter-bar {
        display: block !important;
    }

    /* ── Hide hero banner on mobile (too tall for bottom-sheet) ── */
    .ml-hero-banner {
        display: none !important;
    }

    /* ── Hide sort bar (redundant with filter dropdowns) ── */
    .ml-sort-bar {
        display: none !important;
    }

    /* ── Product grid: force 2 columns ── */
    .ml-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1px !important;
        background: #e8e8e8;
    }
    .ml-product-card {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        padding: 10px !important;
    }
    .ml-price-before {
        font-size: 12px !important;
        color: #999 !important;
        text-decoration: line-through !important;
        display: block !important;
        margin-bottom: 2px !important;
    }
    .ml-price-main-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .ml-price-main {
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #333 !important;
        line-height: 1.1 !important;
    }
    .ml-discount-badge {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        background-color: #00A650 !important;
        padding: 2px 5px !important;
        border-radius: 3px !important;
        line-height: 1 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* ── Hide official stores grid on mobile ── */
    .ml-sidebar-section--no-border:has(.ml-official-stores-grid) {
        display: none !important;
    }
    .ml-official-stores-grid {
        display: none !important;
    }

    /* ── Pagination: more compact ── */
    .ml-pagination {
        padding: 16px 12px !important;
    }

    /* ── Brand suggestion section: show on mobile ── */
    .ml-brand-suggestion {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .ml-official-stores-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================
   ML MOBILE FILTER BAR
   Hidden by default, shown only on mobile ≤768px
   ============================================= */
.ml-mobile-filter-bar {
    display: none; /* Hidden on desktop */
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
}
.ml-mobile-filter-dropdowns {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ml-mobile-filter-dropdowns::-webkit-scrollbar { display: none; }

.ml-dropdown-divider {
    color: #ddd;
    font-size: 14px;
    user-select: none;
    flex-shrink: 0;
}

.ml-mobile-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #3483fa;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    flex-shrink: 0;
}
.ml-mobile-dropdown svg {
    stroke: #3483fa;
}

.ml-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #3483fa;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    flex-shrink: 0;
}
.ml-mobile-filter-btn svg {
    stroke: #3483fa;
}

.ml-mobile-filter-chips {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ml-mobile-filter-chips::-webkit-scrollbar { display: none; }

.ml-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    min-height: 36px;
    flex-shrink: 0; /* Permite que la fila desborde y haga scroll horizontal fluido */
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
}
.ml-mobile-chip:active {
    background: #f0f0f0;
}

/* =============================================
   ML BRAND SUGGESTION SECTION
   Hidden by default, shown only on mobile ≤768px
   ============================================= */
.ml-brand-suggestion {
    display: none; /* Hidden on desktop */
    background: #f5f5f5;
    padding: 24px 16px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}
.ml-brand-suggestion-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
}
.ml-brand-suggestion-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.ml-brand-suggestion-scroll::-webkit-scrollbar { display: none; }

.ml-brand-suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 72px;
    cursor: pointer;
}
.ml-brand-suggestion-item span {
    font-size: 12px;
    color: #333;
    text-align: center;
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
}
.ml-brand-suggestion-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* =============================================
   ML CLONE — RESPONDE AL ANCHO DEL VISOR (CONTAINER QUERIES)
   Se adapta al achicar/agrandar con la manija del workspace, y de paso
   cubre el mobile real (ahí el visor ocupa todo el ancho de pantalla).
   ============================================= */

/* ── Header: se comprime un poco al angostar, sin romperse ──
   El badge promo "Ofertas por tiempo limitado" se mantiene siempre. */
/* "Vender" y "Ayuda" no entran: se ocultan, quedan Categorías→Supermercado */
@container pv (max-width: 1010px) {
    .ml-secondary-links .ml-sec-link:nth-child(n+5) { display: none !important; }
}
/* Para no apretar el buscador al angostar: primero se quita el chip accionable
   "en Nueva colección"… */
@container pv (max-width: 920px) {
    .ml-search-scope { display: none !important; }
}
/* …y después se ocultan Mis compras y Favoritos (en lugar de seguir achicando
   el buscador). Quedan avatar + nombre + notificaciones + carrito. */
@container pv (max-width: 860px) {
    .ml-secondary-user > .ml-sec-link { display: none !important; }
}

/* ── Grilla: 3 columnas en pantallas grandes, 2 en el rango de la manija
   (la manija está topada para que el visor no baje de donde se ven bien los
   filtros + 2 cards normales), 1 en mobile real. Filtros pegados a la izquierda. */
@container pv (max-width: 1000px) {
    .ml-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@container pv (max-width: 520px) {
    .ml-product-grid { grid-template-columns: 1fr; }
}



/* =============================================
   ML PRODUCT DETAIL PAGE (PDP)
   ============================================= */
.ml-pdp {
    width: 100%;
    background: #ebebeb;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
    /* Misma fuente que el listado/ML (el PDP vive fuera de .ml-page) */
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
    /* El PDP vive dentro del panel dividido: se reorganiza según SU ancho, no el del viewport */
    container-type: inline-size;
    container-name: pdp;
}

/* ── Official Store Banner ── */
.ml-pdp-official-store {
    background: #fff;
    width: 100%;
    margin-bottom: 0; /* sin franja gris: el banner pasa directo a la card */
    border-bottom: 1px solid #ebebeb;
    text-align: center; /* Center the text to match the image the user uploaded before */
}
.ml-pdp-official-store-inner {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto;
    padding: 24px 16px;
}
.ml-pdp-official-store-inner h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}
.ml-pdp-official-store-logo {
    display: inline-block;
    height: 40px;
    max-width: 220px;
    object-fit: contain;
    vertical-align: middle;
}

/* ── Breadcrumb Container (Exact Replica) ── */
.ml-pdp-container-top {
    /* Cabecera dentro de la card: sangra a los bordes cancelando el padding de .ml-pdp-card */
    margin: -16px -16px 16px;
    background: #ededed;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.ml-pdp-group-header-breadcrumb {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.ml-pdp-container__col.col-2 {
    display: flex;
    align-items: center;
}

.ml-pdp-container__col.col-6.ml-pdp-container--share {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

/* Breadcrumb Navigation */
.andes-breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.andes-breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.andes-breadcrumb__link {
    color: #3483FA;
    text-decoration: none;
    transition: color 0.15s ease;
}

.andes-breadcrumb__link:hover {
    color: #1a4da3;
}

/* The current page in the breadcrumb is usually a muted gray */
.andes-breadcrumb__item[data-andes-state="current"] .andes-breadcrumb__link {
    color: rgba(0, 0, 0, 0.55);
    cursor: default;
}

.andes-breadcrumb__chevron {
    color: rgba(0, 0, 0, 0.25);
    margin: 0 8px;
    display: flex;
    align-items: center;
}

/* Share Links */
.ml-pdp-syi__link, .andes-button__content {
    color: #3483FA;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.ml-pdp-syi__link:hover, .andes-button__content:hover {
    color: #1a4da3;
}
.andes-button--mute {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── Card Container ── */
.ml-pdp-card {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.12);
    padding: 16px;
    margin-top: 0; /* el banner blanco fluye directo a la card, sin franja gris */
}

/* ── Bloques inferiores del PDP (marca + características) ── */
.ml-pdp-block {
    margin-top: 12px;
    padding: 24px 32px;
}
.ml-pdp-block-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* Sección "Productos de la marca" — debajo de la imagen, en la columna izquierda */
.ml-pdp-brand-section {
    grid-area: brand;
    min-width: 0;
    border-top: 1px solid #ededed;
    padding-top: 24px;
}
.ml-pdp-brand-section .ml-pdp-block-title {
    font-size: 20px;
    margin-bottom: 16px;
}
.ml-pdp-brand-seemore {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: #3483FA;
    text-decoration: none;
}
.ml-pdp-brand-seemore:hover {
    text-decoration: underline;
}

/* Carrusel "Productos de la marca" */
/* Wrapper relativo: ancla las flechas de deslizar sobre el carrusel */
.ml-pdp-brand-carousel-wrap {
    position: relative;
}
.ml-pdp-brand-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    /* Sin `scroll-behavior: smooth` en CSS: rompía el scroll programático de las
       flechas. La animación suave la da el behavior:'smooth' del scrollTo en JS. */
    scrollbar-width: thin;
}
/* Botón de deslizar (‹ ›) estilo ML: círculo blanco con sombra, centrado vertical */
.ml-pdp-brand-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #3483FA;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
.ml-pdp-brand-arrow:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ml-pdp-brand-arrow svg {
    width: 22px;
    height: 22px;
}
.ml-pdp-brand-arrow--prev { left: -8px; }
.ml-pdp-brand-arrow--next { right: -8px; }
.ml-pdp-brand-arrow[hidden] { display: none; }
/* Card horizontal (igual que ML): imagen izquierda + info derecha.
   flex-basis calc(50% - 8px) sin max-width → SIEMPRE 2 visibles; el ancho
   de cada card depende del tamaño de la pantalla. */
.ml-pdp-brand-card {
    /* Ancho FIJO: la card mantiene su tamaño al angostar; el carrusel (overflow-x)
       recorta la card que no entra completa (en vez de achicarla). */
    flex: 0 0 293px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: row;
    align-items: stretch;   /* la imagen se estira al alto del contenido (dentro del padding) */
    gap: 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid #ededed;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    transition: box-shadow 0.18s ease;
}
.ml-pdp-brand-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.ml-pdp-brand-card:focus-visible {
    outline: 2px solid #3483FA;
    outline-offset: 2px;
}
.ml-pdp-brand-card-img {
    position: relative; /* contiene al .ml-product-img (absolute inset:0) */
    flex: 0 0 96px;          /* ancho FIJO: no compite con la info (antes la aplastaba) */
    width: 96px;
    align-self: stretch;     /* alto = alto del contenido de la card */
    min-height: 96px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
}
.ml-pdp-brand-card-img .ml-product-img-placeholder {
    width: 100%;
    height: 100%;
}
.ml-pdp-brand-card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ml-pdp-brand-card-title {
    font-size: 13px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ml-pdp-brand-card-price-before {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    line-height: 1.2;
    margin-bottom: 1px;
}
.ml-pdp-brand-card-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ml-pdp-brand-card-price {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.2;
}
.ml-pdp-brand-card-discount {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #00a650;
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.5;
    white-space: nowrap;
}
.ml-pdp-brand-card-installments {
    font-size: 12px;
    color: #00a650;
    margin-top: 3px;
    line-height: 1.3;
}
.ml-pdp-brand-card-shipping {
    font-size: 13px;
    font-weight: 600;
    color: #00a650;
    margin-top: 8px;
}
.ml-pdp-brand-card-shipping-sub {
    color: #999;
    font-weight: 400;
}

/* Tabla "Características del producto" */
.ml-pdp-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 680px;
}
.ml-pdp-specs li {
    display: flex;
    font-size: 14px;
    line-height: 1.4;
}
.ml-pdp-specs li:nth-child(odd) {
    background: #f5f5f5;
}
.ml-pdp-spec-key {
    flex: 0 0 40%;
    padding: 12px 16px;
    font-weight: 600;
    color: #333;
}
.ml-pdp-spec-val {
    flex: 1;
    padding: 12px 16px;
    color: #666;
}

@container pdp (max-width: 768px) {
    .ml-pdp-block { padding: 20px 16px; }
    .ml-pdp-spec-key { flex-basis: 45%; }
}

/* ── Layout del PDP: dos columnas independientes (flex) ──
   Izquierda = galería + "Productos de la marca" (fluyen juntos, sin gap entre medio).
   Derecha = info + compra, ancho FIJO 337px. Al angostar el visor solo se achica
   la izquierda (la imagen grande). El sobrante de altura queda abajo, no en el medio. */
.ml-pdp-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.ml-pdp-col-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Gallery (Left) ── */
.ml-pdp-container__col.col-2.ml-pdp--relative {
    grid-area: gallery;
    display: block; /* anula el display:flex de .col-2 para que el wrapper sticky ocupe todo el ancho */
}
.ml-pdp-gallery {
    position: relative;
    width: 100%;
}
.ml-pdp-gallery__column {
    display: block;
    width: 100%;
}
/* Miniaturas ocultas: el DOM las intercala con las imágenes grandes y rompen el flujo.
   Se muestra una sola imagen principal en flujo normal (reserva su altura, sin solapes). */
.ml-pdp-gallery__label {
    display: none;
}
/* The spacer that pushes the container height to match the absolute figure */
.ml-pdp-gallery__column__variation-picture {
    display: block; /* Unhide the spacer */
    width: calc(100% - 60px);
    margin-left: 60px;
    aspect-ratio: 410 / 500; /* Fashion portrait aspect ratio */
    pointer-events: none;
    visibility: hidden;
}

.ml-pdp-gallery__input {
    display: none;
}
.ml-pdp-gallery__wrapper {
    display: block; 
}

/* Thumbnails */
.ml-pdp-gallery__thumbnail {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out;
}
.ml-pdp-thumbnail__picture {
    border: none;
    padding: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.ml-pdp-thumbnail__picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover & Active States */
.ml-pdp-gallery__label:hover .ml-pdp-gallery__thumbnail {
    border-color: #3483FA;
}
.ml-pdp-gallery__input:checked + .ml-pdp-gallery__wrapper .ml-pdp-gallery__thumbnail {
    border-color: #3483FA;
}

/* Big Image (en flujo normal: reserva su propia altura) */
.ml-pdp-gallery__figure {
    display: none;
    position: relative;
    left: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 410 / 500;
}
.ml-pdp-gallery__input:checked + .ml-pdp-gallery__wrapper .ml-pdp-gallery__figure {
    display: block;
}

/* Placeholders (Gray Skeletons) */
.ml-pdp-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    border-radius: 4px;
}
.ml-pdp-image-placeholder-large {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}
.ml-pdp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── Product Info Wrapper (Middle + Right Columns) ── */
/* Se "desenvuelve" para que main-info y buy-box sean celdas de la grilla
   (display:contents): así el divider de la marca y el del buy box arrancan
   en la misma fila y quedan alineados. */
.ml-pdp-info-wrapper {
    flex: 0 0 337px;        /* columna derecha de ancho fijo (info + compra) */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Middle Column (Title, Price, Attributes) ── */
.ml-pdp-main-info {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Condition & Heart Row */
.ml-pdp-condition-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.ml-pdp-condition {
    font-size: 14px;
    color: #999;
}
.ml-pdp-condition-type { color: #999; }
.ml-pdp-condition-sep { margin: 0 4px; color: #ebebeb; }
.ml-pdp-favorite-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: -4px;
}

/* Title */
.ml-pdp-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    line-height: 1.25;
    margin-bottom: 8px;
    margin-top: 0;
}

/* Rating */
.ml-pdp-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.ml-pdp-rating-score {
    font-size: 14px;
    color: #999;
}
.ml-pdp-stars {
    display: flex;
    gap: 2px;
}
.ml-pdp-rating-count {
    font-size: 14px;
    color: #999;
}

/* ── Price Section ── */
.ml-pdp-price-section {
    margin-bottom: 24px;
}
/* Tag de oferta / más vendido sobre el precio (según lo que tenga el producto) */
.ml-pdp-deal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding: 3px 7px;
    border-radius: 3px;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.ml-pdp-deal-tag svg { width: 13px; height: 14px; }
.ml-pdp-deal-tag--oferta { background: #2968C8; }
.ml-pdp-deal-tag--masvendido { background: #FF7733; }
/* Ocultar lo que el producto no tenga → el bloque de precio mantiene una
   distancia coherente con las estrellas según su contenido real */
.ml-pdp-deal-tag[hidden],
.ml-pdp-price-before[hidden],
.ml-pdp-discount[hidden] { display: none; }

.ml-pdp-price-before {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    display: block;
    font-weight: 400;
}
.ml-pdp-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.ml-pdp-price {
    font-size: 36px;
    font-weight: 400;
    color: #333;
    letter-spacing: normal;
    line-height: 1;
}
.ml-pdp-discount {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #00a650;
    padding: 2px 4px;
    border-radius: 3px;
    letter-spacing: 0.2px;
}
.ml-pdp-installments {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}
.ml-pdp-installments-green {
    color: #00a650;
}
.ml-pdp-price-taxes {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.ml-pdp-payment-link {
    font-size: 14px;
    color: #3483FA;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
}
.ml-pdp-payment-link:hover {
    color: #1a4da3;
}

/* ── Selectors (Color & Size) ── */
.ml-pdp-section {
    margin-bottom: 24px;
}
.ml-pdp-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    margin-top: 0;
}
.ml-pdp-label strong {
    font-weight: 600;
}
.ml-pdp-color-thumbs {
    display: flex;
    gap: 10px;
}
.ml-pdp-color-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    cursor: pointer;
    background: #fff;
    padding: 2px;
    transition: border-color 0.15s ease;
}
.ml-pdp-color-thumb--active {
    border: 2px solid #3483FA;
    padding: 1px;
}

/* Sizes */
.ml-pdp-size-header {
    margin-bottom: 12px;
}
.ml-pdp-sizes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ml-pdp-size-btn {
    min-width: 48px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ml-pdp-size-btn:hover {
    border-color: #3483fa;
}
.ml-pdp-size-btn--active {
    border-color: #3483fa;
    /* simula el borde 2px de ML sin reflow */
    box-shadow: inset 0 0 0 1px #3483fa;
    background: #ebf2fe;
    color: #3483fa;
    font-weight: 600;
}
.ml-pdp-size-guide-row {
    margin-bottom: 8px;
}
.ml-pdp-size-guide-link {
    font-size: 14px;
    color: #3483FA;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ml-pdp-fit-link {
    font-size: 13px;
    color: #3483FA;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── RIGHT COLUMN: Buy Box ── */
.ml-pdp-buy-box {
    grid-area: buy;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* El divider arranca en la misma fila que el de "Productos de la marca" */
    border-top: 1px solid #ededed;
    margin-top: 0;
    padding-top: 24px;
}

.ml-pdp-green-text {
    color: #00a650;
    font-weight: 600;
}

/* Shipping / Returns */
.ml-pdp-shipping-info, .ml-pdp-returns-info {
    margin-bottom: 20px;
}
.ml-pdp-shipping-title, .ml-pdp-returns-text {
    font-size: 14px;
    color: #333;
    line-height: 1.3;
    margin: 0 0 4px 0;
}
.ml-pdp-shipping-link {
    font-size: 13px;
    color: #3483FA;
    text-decoration: none;
}

/* Stock */
.ml-pdp-stock-info {
    margin-bottom: 24px;
}
.ml-pdp-stock-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}
.ml-pdp-quantity-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
}
.ml-pdp-qty-available {
    color: #999;
    font-size: 13px;
    margin-left: 4px;
}

/* Actions (Buttons) */
.ml-pdp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}
.ml-pdp-btn-primary {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 6px;
    background: #3483FA;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ml-pdp-btn-primary:hover {
    background: #2968c8;
}
.ml-pdp-btn-secondary {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 6px;
    background: rgba(65, 137, 230, 0.15);
    color: #3483FA;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ml-pdp-btn-secondary:hover {
    background: rgba(65, 137, 230, 0.2);
}

/* Store Info */
.ml-pdp-store-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.ml-pdp-store-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-pdp-store-initials {
    font-size: 11px;
    font-weight: 600;
    color: #333;
}
.ml-pdp-store-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.ml-pdp-store-details p {
    margin: 0;
    font-size: 14px;
    color: #333;
}
.ml-pdp-store-name a {
    color: #3483FA;
    text-decoration: none;
}
.ml-pdp-store-sales {
    font-weight: 600;
    margin-top: 4px !important;
}

/* Protection */
.ml-pdp-protection {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #999;
}
.ml-pdp-protection-text {
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
}
.ml-pdp-protection-text a {
    color: #3483FA;
    text-decoration: none;
}

/* ── PDP Responsive (basado en el ancho del propio PDP, no del viewport) ── */
/* Panel medio: el buy-box baja debajo de la columna central (gallery | info apilada) */
@container pdp (max-width: 1100px) {
    .ml-pdp-info-wrapper {
        flex-direction: column;
    }
    .ml-pdp-buy-box {
        flex: none;
        width: 100%;
    }
}

/* Panel angosto: todo apilado, en orden de lectura (imagen → info → productos de marca) */
@container pdp (max-width: 768px) {
    .ml-pdp-group-header-breadcrumb {
        padding: 8px 12px !important;
    }
    .ml-pdp-container--share {
        display: none !important; /* Hide secondary share buttons on mobile PDP header */
    }
    .andes-breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .andes-breadcrumb::-webkit-scrollbar { display: none; }
    .andes-breadcrumb__item {
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .ml-pdp-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* anula el align-items:start del grid: los hijos ocupan el ancho, el carrusel scrollea */
    }
    /* Las columnas se disuelven: gallery, info, buy y brand quedan como hijos
       directos y se apilan en orden de lectura (imagen → info → compra → marca). */
    .ml-pdp-col-left,
    .ml-pdp-info-wrapper { display: contents; }
    .ml-pdp-container__col.col-2.ml-pdp--relative {
        flex: none;
        width: 100%;
        order: 1;
    }
    .ml-pdp-main-info { order: 2; }
    .ml-pdp-buy-box { order: 3; }
    .ml-pdp-brand-section { order: 4; }
    .ml-pdp-gallery {
        flex: none;
        width: 100%;
        position: static;
        min-height: auto;
    }
    /* Galería PDP Mobile: foto principal + miniaturas scrolleables horizontalmente */
    .ml-pdp-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-bottom: 4px !important;
    }
    .ml-pdp-thumbs::-webkit-scrollbar { display: none; }
    .ml-pdp-thumb {
        flex-shrink: 0 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 6px !important;
    }
    .ml-pdp-info-wrapper {
        flex: none;
        width: 100%;
    }
    .ml-pdp-price {
        font-size: 28px;
    }
}

/* ============================================================
   Fit Finder — probador de talles
   ============================================================ */
/* Botón disparador en la sección de talles */
.ff-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 16px;
    border: 1px solid #3483FA;
    border-radius: 8px;
    background: #fff;
    color: #3483FA;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ff-trigger:hover { background: #eaf1fe; }
.ff-trigger svg { flex-shrink: 0; }

/* Overlay + diálogo */
.ff-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
}
.ff-overlay[hidden] { display: none; }
.ff-dialog {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    animation: ff-pop 0.18s ease;
}
@keyframes ff-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.ff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #ededed;
}
.ff-title { font-size: 18px; font-weight: 600; color: #333; margin: 0; }
.ff-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
}
.ff-close:hover { color: #333; }
.ff-body { padding: 20px; }

/* Campos */
.ff-intro, .ff-info { font-size: 14px; color: #555; margin: 0 0 16px; line-height: 1.4; }
.ff-row { display: flex; gap: 12px; }
.ff-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; flex: 1; }
.ff-field > span { font-size: 13px; font-weight: 600; color: #333; }
.ff-field input {
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    color: #333;
}
.ff-field input:focus { outline: none; border-color: #3483FA; box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.15); }

/* Segmentos (contextura / calce) */
.ff-segment { display: flex; gap: 8px; }
.ff-seg {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ff-seg:hover { border-color: #3483FA; }
.ff-seg.is-active { border-color: #3483FA; background: #eaf1fe; color: #3483FA; font-weight: 600; }

/* Selector de contextura con siluetas (estilo Ridestore) */
.ff-segment--sil { gap: 10px; }
.ff-sil {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 10px;
    color: #9aa0a6;
    font-weight: 500;
}
.ff-sil svg { transition: stroke 0.15s ease; }
.ff-sil span { font-size: 12px; color: inherit; }

.ff-badge-oversize {
    display: inline-block;
    background: #fff4e5;
    color: #b25e00;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 0 0 16px;
}

.ff-calc {
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: #3483FA;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ff-calc:hover { background: #2968c8; }
.ff-error { color: #e74c3c; font-size: 13px; margin: 10px 0 0; }

/* Resultado */
.ff-result { text-align: center; }
.ff-result-label { font-size: 14px; color: #777; margin: 0 0 8px; }
.ff-result-size {
    font-size: 56px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}
.ff-conf {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.ff-conf--alta { background: #e6f4ea; color: #00853e; }
.ff-conf--media { background: #fff4e5; color: #b25e00; }
.ff-result-note {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 16px 0 20px;
    text-align: left;
}
.ff-result-actions { display: flex; flex-direction: column; gap: 10px; }
.ff-apply {
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: #3483FA;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ff-apply:hover { background: #2968c8; }
.ff-back {
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #3483FA;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ff-back:hover { text-decoration: underline; }

/* Perfiles guardados */
.ff-profiles {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ededed;
}
.ff-profiles-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}
.ff-profiles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
/* Chip de perfil estilo ML: tag celeste con texto azul (como filtros aplicados) */
.ff-prof-chip {
    display: inline-flex;
    align-items: center;
    background: #e8f0fc;
    border: 1px solid #c3d6f5;
    border-radius: 6px;
    overflow: hidden;
}
.ff-prof-apply {
    border: none;
    background: transparent;
    color: #2968C8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 4px 6px 12px;
    cursor: pointer;
}
.ff-prof-apply:hover { color: #185fa5; }
.ff-prof-del {
    border: none;
    background: transparent;
    color: #5a82c2;
    font-size: 16px;
    line-height: 1;
    padding: 0 9px 0 4px;
    cursor: pointer;
}
.ff-prof-del:hover { color: #2968C8; }
/* "Guardar actual": link azul de ML */
.ff-prof-add {
    border: none;
    background: transparent;
    color: #3483FA;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 6px;
    cursor: pointer;
}
.ff-prof-add:hover { color: #2968C8; text-decoration: underline; }
.ff-prof-save {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.ff-prof-save input {
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    width: 140px;
}
.ff-prof-save input:focus { outline: none; border-color: #3483FA; box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.15); }
.ff-prof-confirm {
    border: none;
    border-radius: 6px;
    background: #3483FA;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}
.ff-prof-confirm:hover { background: #2968c8; }

/* Stepper: indicador de progreso */
.ff-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.ff-progress-label { font-size: 12px; color: #999; font-weight: 500; }
.ff-dots { display: flex; gap: 6px; }
.ff-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0e0e0; transition: background 0.15s ease; }
.ff-dot.is-active { background: #3483FA; }
.ff-dot.is-done { background: #9ec5fb; }
.ff-step { min-height: 64px; }
.ff-step-help { font-size: 14px; color: #555; margin: 0 0 14px; line-height: 1.4; }

/* Footer de navegación */
.ff-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}
.ff-back-btn {
    background: none; border: none; color: #3483FA;
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; padding: 8px 4px;
}
.ff-back-btn:hover { text-decoration: underline; }
.ff-next-btn {
    margin-left: auto; min-width: 150px; padding: 12px 22px;
    border: none; border-radius: 8px; background: #3483FA; color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease;
}
.ff-next-btn:hover { background: #2968c8; }

/* Guardar perfil en la pantalla de resultado */
.ff-save-row { margin-top: 16px; text-align: center; }
.ff-saved { font-size: 13px; color: #00a650; font-weight: 600; }

/* Medidas exactas (modo avanzado, colapsable) */
.ff-toggle-exact {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #3483FA;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0 6px;
}
.ff-toggle-exact:hover { color: #2968C8; text-decoration: underline; }
.ff-exact {
    background: #f7f9fc;
    border: 1px solid #e3ebf7;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.ff-exact[hidden] { display: none; }
.ff-exact .ff-field { margin-bottom: 6px; }
.ff-exact-hint { font-size: 12px; color: #888; margin: 0; line-height: 1.35; }

/* Toast de confirmación al aplicar el talle */
.ff-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    z-index: 300;
    background: #333;
    color: #fff;
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ff-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* Responsive: en pantallas chicas, una columna e inputs sin zoom de iOS */
@media (max-width: 480px) {
    .ff-overlay { padding: 0; align-items: flex-end; }
    .ff-dialog { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .ff-row { flex-direction: column; gap: 0; }
    .ff-field input { font-size: 16px; }
}

/* ============================================================
   Asistente ASUX — chat flotante
   ============================================================ */
.as-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 150;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: radial-gradient(circle at 38% 30%, #FFF27A 0%, #FFE600 46%, #FFC400 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(255, 200, 0, 0.45), inset 0 2px 5px rgba(255, 255, 255, 0.65), inset 0 -3px 6px rgba(200, 150, 0, 0.25);
    transition: transform 0.15s ease;
}
/* Halo fino que late suavemente, pegado al botón */
.as-fab::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(120, 140, 255, 0.35);
    animation: as-pulse 2.6s ease-in-out infinite;
}
@keyframes as-pulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.12); opacity: 0.12; }
}
.as-fab:hover { transform: translateY(-2px); }
.as-fab.is-open { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .as-fab::after { animation: none; } }

.as-panel {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 151;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Proxima Nova", "Source Sans 3", -apple-system, Roboto, Arial, sans-serif;
}
.as-panel[hidden] { display: none; }

.as-header {
    position: relative;
    background: #fff;
    color: #2d2d52;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f3;
}
.as-title { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: #2d2d52; }
.as-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9aa0a6;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.as-close:hover { color: #555; }

.as-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
}
.as-msg {
    max-width: 84%;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
}
.as-msg b { font-weight: 700; }
/* Bot: sin globo, texto índigo (estilo Mercado Pago) */
.as-msg--bot { align-self: flex-start; color: #41416e; }
/* Usuario: globo gris claro a la derecha */
.as-msg--user {
    align-self: flex-end;
    background: #f1f1f6;
    color: #33333a;
    padding: 11px 15px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.as-conf { color: #00a650; font-weight: 600; }
.as-note { color: #8a8aa0; font-size: 13px; }

/* Mini-cards de recomendación de productos dentro del chat */
.as-recs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.as-rec {
    display: flex;
    gap: 10px;
    align-items: stretch;      /* la imagen se estira al alto de la card */
    background: #fff;
    border: 1px solid #ececf3;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.as-rec:hover, .as-rec:focus-visible {
    border-color: #c7c7f0;
    box-shadow: 0 4px 14px rgba(60, 60, 130, .12);
    outline: none;
}
.as-rec-thumb {
    flex: 0 0 60px;
    width: 60px;
    align-self: stretch;       /* alto = alto del contenido (imagen vertical, no cuadrada) */
    min-height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f8;
}
.as-rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-rec-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.as-rec-title {
    font-size: 13px;
    font-weight: 600;
    color: #33333a;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.as-rec-brand { font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: .03em; }
.as-rec-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.as-rec-before { font-size: 11px; color: #aaa; text-decoration: line-through; }
.as-rec-now { font-size: 14px; font-weight: 600; color: #33333a; }
.as-rec-disc { font-size: 10px; font-weight: 600; color: #fff; background: #00a650; border-radius: 3px; padding: 1px 5px; }
.as-rec-cta { font-size: 12px; color: #5b5bd6; font-weight: 600; margin-top: 2px; }

.as-typing { display: flex; gap: 4px; align-items: center; }
.as-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #bbb;
    animation: as-blink 1.2s infinite ease-in-out;
}
.as-typing span:nth-child(2) { animation-delay: 0.2s; }
.as-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes as-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.as-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 4px;
    background: #fff;
}
.as-chips:empty { padding: 0; }
.as-chip {
    background: #f3f3fb;
    border: 1px solid #e3e3f2;
    color: #5b5bd6;
    border-radius: 18px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.as-chip:hover { background: #e9e9fb; }

.as-input {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px 14px;
    background: #fff;
}
.as-input input {
    flex: 1;
    border: 1px solid #e3e3ec;
    border-radius: 24px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    background: #fff;
}
.as-input input:focus { border-color: #5b5bd6; box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.15); }
.as-send {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border: none; border-radius: 50%;
    background: #5b5bd6; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.as-send:hover { background: #4a4ac4; }

@media (max-width: 480px) {
    .as-panel {
        right: 0; bottom: 0; left: 0;
        width: 100%; max-width: 100%;
        height: 80vh; max-height: 80vh;
        border-radius: 16px 16px 0 0;
    }
    .as-fab { right: 16px; bottom: 16px; }
}

/* ============================================================
   Galería PDP reconstruida: foto grande + miniaturas abajo
   ============================================================ */
.ml-pdp-main-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 8px;
    overflow: hidden;
}
.ml-pdp-main-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: #fff;
}
.ml-pdp-main-img .ml-pdp-image-placeholder-large {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
}
.ml-pdp-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.ml-pdp-thumb {
    width: 60px;
    height: 60px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.ml-pdp-thumb:hover { border-color: #3483FA; }
.ml-pdp-thumb.is-active { border: 2px solid #3483FA; }
.ml-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }

/* ── Hotspots "Combiná el look": punto interactivo + mini-card sobre la foto ── */
.ml-pdp-hotspot {
    position: absolute;
    width: 24px;
    height: 24px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-pdp-hotspot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3483FA;
    transition: background .15s ease;
}
.ml-pdp-hotspot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(52, 131, 250, 0.55);
    animation: mlHotspotPulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes mlHotspotPulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    100% { transform: scale(1.6); opacity: 0; }
}
.ml-pdp-hotspot:hover,
.ml-pdp-hotspot.is-open { background: #3483FA; }
.ml-pdp-hotspot:hover::before,
.ml-pdp-hotspot.is-open::before { background: #fff; }
.ml-pdp-hotspot.is-open::after { animation: none; opacity: 0; }

.ml-pdp-hotspot-pop {
    position: absolute;
    z-index: 4;
    width: 198px;
}
.ml-pdp-hotspot-pop-inner {
    display: flex;
    gap: 10px;
    align-items: stretch;      /* la imagen se estira al alto de la card */
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20);
    padding: 8px;
    cursor: pointer;
    transition: box-shadow .15s ease;
}
.ml-pdp-hotspot-pop-inner:hover { box-shadow: 0 9px 28px rgba(0, 0, 0, 0.26); }
.ml-pdp-hotspot-pop-thumb {
    position: relative;
    width: 54px;
    flex: 0 0 54px;
    align-self: stretch;       /* alto = alto del contenido (imagen vertical, no cuadrada) */
    min-height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}
/* position/inset/z-index resetean la regla global .ml-pdp-main-img img que se filtra acá */
.ml-pdp-hotspot-pop-thumb img {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ml-pdp-hotspot-pop-body { display: flex; flex-direction: column; min-width: 0; }
.ml-pdp-hotspot-pop-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3483FA;
}
.ml-pdp-hotspot-pop-title {
    font-size: 12px;
    color: #333;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ml-pdp-hotspot-pop-price {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-top: 2px;
}
.ml-pdp-hotspot-pop-cta {
    font-size: 11px;
    color: #3483FA;
    margin-top: 2px;
}

/* Descripción del producto en el PDP */
.ml-pdp-description {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
#ml-pdp-desc-block[hidden] { display: none; }

/* ============================================================
   Carrusel de card: reusa .ml-carousel-arrow (flecha prev + next)
   ============================================================ */
.ml-carousel-arrow { border: none; cursor: pointer; padding: 0; }
.ml-carousel-arrow svg { width: 22px; height: 22px; }
/* La flecha "siguiente" usa la posición base (right:-24px, chevron a la izquierda).
   La "anterior" se espeja al borde izquierdo. */
.ml-carousel-arrow--prev {
    right: auto;
    left: -24px;
    justify-content: flex-end;
}