/* /Components/Layout/Header.razor.rz.scp.css */
/* ========================================================
   HEADER.RAZOR.CSS - Figma Node 2936:32488
   ======================================================== */

/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */
#cabecera[b-hdsrnzv9ri] {
    width: 100%;
    min-height: clamp(90px, 8vw, 153px);
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Nunito Sans', sans-serif;
    padding: 0 !important;
    transition: min-height 0.4s ease, box-shadow 0.3s ease;
    overflow: visible;
}

/* Scrolled/compact state */
#cabecera.scrolled[b-hdsrnzv9ri] {
    height: auto;
    min-height: 0;
    box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, 0.12);
}

/* Desktop Container - Same padding as body (Home --padding-lateral) */
.header-desktop[b-hdsrnzv9ri] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


#cabecera.scrolled .header-desktop[b-hdsrnzv9ri] {
    height: auto;
    padding-top: clamp(18px, 1.075vw, 22px);
    box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.12);
}

/* ── ESTADO SCROLL ── */
/* En lugar de display: none, usamos opacity 0 y visibility hidden */
#cabecera.scrolled .header-row-top[b-hdsrnzv9ri] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

#cabecera.scrolled .header-promo-bar[b-hdsrnzv9ri] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    /* Fade-OUT al entrar en scrolled: desaparece rápido antes de que el header colapse */
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Hide grey line in scrolled state (Este sí puede ser instantáneo si no lo animas) */
#cabecera.scrolled .header-row-main[b-hdsrnzv9ri]::after {
    display: none;
}

/* ── Logo crossfade ──────────────────────────────────────────
   En lugar de display:none/block (instantáneo), usamos opacity
   para poder animar la transición suavemente.
   .logo-sticky se posiciona absolute encima de .logo-full.
   ─────────────────────────────────────────────────────────── */
.header-logo .logo-full[b-hdsrnzv9ri] {
    opacity: 1;
    transition: opacity 0.35s ease;
}

.header-logo .logo-sticky[b-hdsrnzv9ri] {
    display: block;            /* siempre en el DOM — nunca display:none */
    position: absolute;
    top: 0;
    left: 0;
    width: 153px;
    height: 62px;
    object-fit: contain;
    object-position: left center;
    opacity: 0;                /* oculto via opacity, no via display */
    transition: opacity 0.35s ease;
}

#cabecera.scrolled .header-logo .logo-full[b-hdsrnzv9ri]  { opacity: 0; }
#cabecera.scrolled .header-logo .logo-sticky[b-hdsrnzv9ri] { opacity: 1; }

#cabecera.scrolled .header-row-main[b-hdsrnzv9ri] {
    height: auto;
    align-items: center;
    padding-bottom: clamp(18px, 1.075vw, 22px);
}

#cabecera.scrolled .header-logo[b-hdsrnzv9ri] {
    height: 62px;          /* anima desde 86px → 62px junto con el crossfade */
    margin-bottom: 0;
}

#cabecera.scrolled .header-login-btn[b-hdsrnzv9ri] {
    margin-bottom: 0;
}

#cabecera.scrolled .header-cart-icon[b-hdsrnzv9ri] {
    padding-top: 0;
}

#cabecera.scrolled .header-right-icons[b-hdsrnzv9ri] {
    align-self: center;
    align-items: center;
}

.header-row-top[b-hdsrnzv9ri] {
    display: none;
}

.header-divider[b-hdsrnzv9ri] {
    display: none;
}

/* ============================================
   FILA PRINCIPAL: Todo en una fila con el texto promo posicionado
   ============================================ */
.header-row-main[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-bottom: clamp(10px, 2vw, 38px);
    position: relative;
    transition: padding-top 0.4s ease, padding-bottom 0.4s ease;
}

.header-promo-bar[b-hdsrnzv9ri] {
    position: absolute;
    top: clamp(6px, 1vw, 27px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 0.85vw, 16px);
    color: #3A4F39;
    white-space: nowrap;
    z-index: 10;
    /* Fade-IN al salir del estado scrolled: espera 0.3s a que el header se expanda */
    transition: opacity 0.4s ease 0.5s, visibility 0s linear 0.5s;
}

.header-row-main[b-hdsrnzv9ri]::after {
    content: '';
    position: absolute;
    top: clamp(24px, 2.5vw, 55px);
    left: calc(138px + clamp(20px, 4vw, 67px));
    right: 0;
    height: 1px;
    background-color: #E0E0E0;
}

/* ============================================
   LOGO
   ============================================ */
.header-logo[b-hdsrnzv9ri] {
    display: block;
    flex-shrink: 0;
    width: 153px;
    height: 86px;              /* altura explícita → permite animar height en scrolled */
    margin-right: clamp(20px, 4vw, 67px);
    margin-bottom: 3px;
    position: relative;        /* contexto para logo-sticky absolute */
    overflow: hidden;          /* evita desbordamiento durante la transición */
    transition: height 0.4s ease, margin-bottom 0.4s ease;
}

.header-logo img[b-hdsrnzv9ri] {
    display: block;
    width: 100%;
    max-width: 153px;
    max-height: 86px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* ============================================
   NAVEGACIÓN
   ============================================ */
.header-nav[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-right: 50px;
    flex-shrink: 0;
    padding-bottom: 5px;
}

.header-nav-link[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.9vw, 16px);
    line-height: 22px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.header-nav-link:hover[b-hdsrnzv9ri],
.header-nav-link.active[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* ============================================
   BARRA DE BÚSQUEDA
   ============================================ */
.header-search-container[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    gap: clamp(6px, 0.7vw, 16px);
    flex: 1;
    position: relative;
    padding-bottom: 0;
}

.header-search-icon[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search-icon svg[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
}

.header-search-input[b-hdsrnzv9ri] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.8vw, 14px);
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    padding: 8px 0 2px 0;
}

.header-search-input[b-hdsrnzv9ri]::placeholder {
    color: #9E9E9E;
}

.header-search-underline[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: calc(24px + clamp(6px, 0.7vw, 16px));
    right: 0;
    height: 1px;
    background-color: #9E9E9E;
}

/* ============================================
   ICONO CARRITO
   ============================================ */
.header-cart-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 20px;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

.header-cart-icon .icon-default[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.header-cart-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(16px, 1.3vw, 23.4px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-cart-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-cart-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

.header-cart-icon svg[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
}

.header-cart-count[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-indent: 0.5px;
    text-align: center;
    white-space: nowrap;
    border-radius: 12px;
    flex-shrink: 0;
    padding: 4px 8px;
    box-sizing: border-box;
}

/* ============================================
   ICONO FAVORITOS
   ============================================ */
.header-fav-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20px;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

    .header-fav-icon .icon-default[b-hdsrnzv9ri] {
        width: 24px;
        height: 24px;
    }

.header-fav-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(15.3px, 1.3vw, 24px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-fav-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-fav-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

/* ============================================
   BOTÓN LOGIN
   ============================================ */
.header-login-btn[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 165px;
    height: 46px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #3CAA36;
    border: 2px solid #3CAA36;
    border-radius: 8px;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-bottom: -10px;
    box-sizing: border-box;
}

    .header-login-btn:hover[b-hdsrnzv9ri] {
        background-color: #80C87C;
        color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* ============================================
   ICONO PERFIL (autenticado)
   ============================================ */
.header-profile-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

    .header-profile-icon .icon-default[b-hdsrnzv9ri] {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

.header-profile-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(16px, 1.333vw, 24px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-profile-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-profile-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

.header-login-btn:hover[b-hdsrnzv9ri] {
    background-color: #3CAA36;
    color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #00000040;
}

/* ============================================
   USUARIO AUTENTICADO
   ============================================ */
.header-user-menu[b-hdsrnzv9ri] {
    flex-shrink: 0;
}

.header-user-btn.authenticated[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: clamp(36px, 3vw, 46px);
    padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.5vw, 24px);
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 5px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.1vw, 16px);
    color: #3CAA36;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-user-btn.authenticated:hover[b-hdsrnzv9ri] {
    background-color: #3CAA36;
    color: #FFFFFF;
}

.header-user-btn.authenticated i[b-hdsrnzv9ri] {
    font-size: 12px;
}

/* ============================================
   MOBILE / TABLET HEADER (Figma node 1003-23719)
   Layout: 2 filas — fila 1 logo+acciones / fila 2 búsqueda
   ============================================ */
.header-tablet[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;          /* 2 filas apiladas */
    gap: 20px;                       /* Figma gap-[20px] entre fila 1 y barra búsqueda */
    width: 100%;
    padding: 15px clamp(16px, 6vw, 115px) 17px;  /* Figma: pt-15 pb-17 px-30 */
    background: #FFFFFF;
    box-sizing: border-box;
}

/* ── Fila 1: contenedor flex horizontal ── */
.tablet-top-row[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* ── Izquierda: hamburger + logo ── */
.tablet-left[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    gap: 20px;                       /* Figma gap-[20px] entre hamburger y logo */
}

/* Hamburger Button */
.tablet-hamburger[b-hdsrnzv9ri] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

.tablet-hamburger svg[b-hdsrnzv9ri] {
    width: 21px;
    height: 21px;
}

/* Small PMC Logo */
.tablet-logo[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.tablet-logo img[b-hdsrnzv9ri] {
    width: 62px;
    height: 25px;
    object-fit: contain;
}

/* Search Bar - fila 2, ancho completo */
.tablet-search-bar[b-hdsrnzv9ri] {
    width: 100%;                     /* ocupa toda la fila 2 */
    height: 37px;
    border: 1px solid #B1DDAF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 15px;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.tablet-search-bar:hover[b-hdsrnzv9ri] {
    border-color: #3CAA36;
}

.tablet-search-placeholder[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #9E9E9E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tablet-search-icon[b-hdsrnzv9ri] {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

/* Right Actions Group */
.tablet-actions[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* Phone Info */
.tablet-phone-info[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tablet-phone-icon[b-hdsrnzv9ri] {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.tablet-phone-text[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: #9E9E9E;
    white-space: nowrap;
}

/* Vertical Separator */
.tablet-separator[b-hdsrnzv9ri] {
    width: 1px;
    height: 7px;
    background-color: #9E9E9E;
    flex-shrink: 0;
}

/* Cart Icon */
.tablet-cart-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
}

.tablet-cart-icon .icon-default[b-hdsrnzv9ri] {
    width: 20px;
    height: auto;
    object-fit: contain;
}

.tablet-cart-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.tablet-cart-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.tablet-cart-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

/* Profile / Login Icon */
.tablet-profile-icon[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 22px;
    transition: transform 0.2s ease;
}

.tablet-profile-icon:hover[b-hdsrnzv9ri] {
    transform: scale(1.1);
}

.tablet-profile-icon svg[b-hdsrnzv9ri] {
    width: 16px;
    height: 21px;
}

/* Language Selector in tablet */
.tablet-lang-selector[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Selector de idioma en el header (tablet ≥768px) ──
   Visible en tablet, oculto en móvil (donde va en el sidebar) */
.tablet-lang-header[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tablet-lang-sep[b-hdsrnzv9ri] {
    /* visible por defecto junto con el selector */
}

/* En móvil (≤768px): ocultar del header, se muestra en el sidebar */
@media (max-width: 768px) {
    .tablet-lang-header[b-hdsrnzv9ri],
    .tablet-lang-sep[b-hdsrnzv9ri] {
        display: none;
    }
}

/* ============================================
   MEGA-MENU PRODUCTOS (Figma Node 13-410)
   ============================================ */

/* --- CONTENEDOR PRINCIPAL --- */
.megamenu[b-hdsrnzv9ri] {
    position: fixed;
    top: var(--header-height, clamp(90px, 8vw, 153px));
    /* Left edge aligns with Productos text - set dynamically via JS */
    left: auto;
    right: clamp(16px, 6vw, 115px);
    background: #F5F5F5;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
    /* Fixed height - same for all categories, scroll internally */
    height: 70vh;
    overflow: visible;
}

.megamenu.visible[b-hdsrnzv9ri] {
    display: flex;
}



/* --- SIDEBAR IZQUIERDO (224px) --- */
.megamenu-sidebar[b-hdsrnzv9ri] {
    width: 224px;
    flex-shrink: 0;
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 0 15px;
    overflow: hidden;
}

.megamenu-promo-btn[b-hdsrnzv9ri] {
    height: 40px;
    background: #3CAA36;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition: background 0.2s;
}

.megamenu-promo-btn:hover[b-hdsrnzv9ri] {
    background: #2d9030;
}

.megamenu-familias-title[b-hdsrnzv9ri] {
    height: 42px;
    background: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
}

.megamenu-familias-list[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.megamenu-familia-item[b-hdsrnzv9ri] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 29px;
    background: white;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    position: relative;
    transition: all 0.15s;
}

.megamenu-familia-item:hover[b-hdsrnzv9ri],
.megamenu-familia-item.selected[b-hdsrnzv9ri] {
    background: #F5F5F5;
    font-weight: 700;
}

.megamenu-familia-item.selected[b-hdsrnzv9ri]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3CAA36;
}

.megamenu-familia-icon-wrap[b-hdsrnzv9ri] {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.megamenu-familia-icon[b-hdsrnzv9ri] {
    display: block;        /* evita el flujo inline que los pondría lado a lado */
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.megamenu-familia-icon.icon-normal[b-hdsrnzv9ri] {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
}

.megamenu-familia-item:hover .icon-soft[b-hdsrnzv9ri],
.megamenu-familia-item.selected .icon-soft[b-hdsrnzv9ri] {
    opacity: 0;
}

.megamenu-familia-item:hover .icon-normal[b-hdsrnzv9ri],
.megamenu-familia-item.selected .icon-normal[b-hdsrnzv9ri] {
    opacity: 1;
}

/* --- ÁREA CENTRAL (Subcategorías) --- */
.megamenu-content[b-hdsrnzv9ri] {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.megamenu-category-panel[b-hdsrnzv9ri] {
    display: none;
    width: 100%;
    height: 100%;
}

.megamenu-category-panel.active[b-hdsrnzv9ri] {
    display: block;
}

.megamenu-subcats[b-hdsrnzv9ri] {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 30px 40px;
    align-items: flex-start;
    align-content: flex-start;
}

.megamenu-subcat-group[b-hdsrnzv9ri] {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Banner HP dentro del panel "Tinta y tóner" (último hijo flex de .megamenu-subcats). */
.megamenu-banner[b-hdsrnzv9ri] {
    display: block;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
    max-width: 280px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s, transform 0.15s;
}

.megamenu-banner:hover[b-hdsrnzv9ri] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.megamenu-banner img[b-hdsrnzv9ri] {
    display: block;
    width: 100%;
    height: auto;
}

.megamenu-subcat-header[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
}

.megamenu-subcat-header:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

.megamenu-subcat-items[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.megamenu-subcat-item[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
}

.megamenu-subcat-item:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* --- Level 4: Expandable subcategory items with chevron --- */
.megamenu-subcat-item-expandable[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.megamenu-subcat-item-expandable .megamenu-subcat-item-text[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    flex: 1;
}

.megamenu-subcat-item-expandable .megamenu-subcat-item-text:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

.megamenu-subcat-item-expandable .chevron[b-hdsrnzv9ri] {
    font-size: 14px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: #9E9E9E;
}

.megamenu-subcat-item-expandable .chevron:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
    background-color: rgba(60, 170, 54, 0.08);
}

.megamenu-subcat-item-expandable.expanded .chevron[b-hdsrnzv9ri] {
    transform: rotate(90deg);
}

/* Level 4 children - indented with dot prefix */
.megamenu-nivel4-items[b-hdsrnzv9ri] {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
    margin-top: 3px;
}

.megamenu-nivel4-items.visible[b-hdsrnzv9ri] {
    display: flex;
}

.megamenu-nivel4-item[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
    /* Hanging indent: second line aligns with text, not the dot */
    padding-left: 10px;
    text-indent: -10px;
}

.megamenu-nivel4-item[b-hdsrnzv9ri]::before {
    content: '· ';
    color: #9E9E9E;
}

.megamenu-nivel4-item:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* ============================================
   MENU SERVICIOS (Figma Node 84:550)
   Sidebar mirrors megamenu-sidebar styling
   ============================================ */
.servicios-menu-container[b-hdsrnzv9ri] {
    position: fixed;
    top: clamp(90px, 8vw, 153px);
    left: auto;
    right: clamp(16px, 6vw, 115px);
    background: white;
    border-radius: 0 0 15px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
    overflow: hidden;
}

.servicios-menu-container.visible[b-hdsrnzv9ri] {
    display: flex;
}

/* --- SIDEBAR (224px, mirrors megamenu-sidebar) --- */
.servicios-sidebar[b-hdsrnzv9ri] {
    width: 224px;
    flex-shrink: 0;
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 0 10px;
}

.servicios-title[b-hdsrnzv9ri] {
    height: 42px;
    background: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    border-top: 2px solid #F5F5F5;
}

.servicios-list[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
}

.servicios-item[b-hdsrnzv9ri] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 29px;
    background: white;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    position: relative;
    transition: all 0.15s;
}

.servicios-item:hover[b-hdsrnzv9ri],
.servicios-item.selected[b-hdsrnzv9ri] {
    background: #F5F5F5;
    font-weight: 700;
}

.servicios-item.selected[b-hdsrnzv9ri]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3CAA36;
}

.servicios-item-icon-wrap[b-hdsrnzv9ri] {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.servicios-item-icon[b-hdsrnzv9ri] {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.servicios-item-icon.icon-black[b-hdsrnzv9ri] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.servicios-item:hover .icon-soft[b-hdsrnzv9ri],
.servicios-item.selected .icon-soft[b-hdsrnzv9ri] {
    opacity: 0;
}

.servicios-item:hover .icon-black[b-hdsrnzv9ri],
.servicios-item.selected .icon-black[b-hdsrnzv9ri] {
    opacity: 1;
}

/* Bottom spacer to complete rounded corner */
.servicios-bottom-spacer[b-hdsrnzv9ri] {
    height: 40px;
    background: white;
    border-radius: 0 0 0 10px;
}

/* --- IMAGE AREA (fills remaining space) --- */
.servicios-image-area[b-hdsrnzv9ri] {
    flex: 1;
    overflow: hidden;
    border-radius: 0 0 15px 0;
    min-height: 0;
}

.servicios-image[b-hdsrnzv9ri] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   OVERLAY
   ============================================ */
.header-nuevo-overlay[b-hdsrnzv9ri] {
    position: fixed;
    top: var(--header-height, 153px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    display: none;
}

.header-nuevo-overlay.active[b-hdsrnzv9ri] {
    display: block;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* ---- Desktop intermedio (1200px) ---- */
@media (max-width: 1200px) {
    .header-nav[b-hdsrnzv9ri] {
        gap: clamp(20px, 2vw, 40px);
        margin-right: 30px;
    }

    .header-login-btn[b-hdsrnzv9ri] {
        width: 145px;
    }
}

/* ---- Desktop compacto (1080px) ---- */
@media (max-width: 1080px) {
    .header-nav[b-hdsrnzv9ri] {
        gap: 20px;
        margin-right: 20px;
    }

    .header-login-btn[b-hdsrnzv9ri] {
        width: 125px;
        font-size: 13px;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .header-right-icons[b-hdsrnzv9ri] {
        gap: 14px;
        margin-left: 16px;
    }
}

/* ---- Tablet (max 991.98px) ---- */
@media (max-width: 991.98px) {
    #cabecera[b-hdsrnzv9ri] {
        height: auto;
    }

    .header-desktop[b-hdsrnzv9ri] {
        display: none !important;
    }

    .header-tablet[b-hdsrnzv9ri] {
        padding-left: 30px;
        padding-right: 30px;
    }

    .megamenu[b-hdsrnzv9ri],
    .servicios-menu-container[b-hdsrnzv9ri] {
        top: 69px;
        max-height: calc(100vh - 69px);
    }

    .header-nuevo-overlay[b-hdsrnzv9ri] {
        top: 69px;
    }
}

/* ---- Tablet compacto (900px) ---- */
@media (max-width: 900px) {
    /* El teléfono se mantiene visible en móvil (diseño Figma 1003-23719) */
    /* .tablet-search-bar ya es width:100% — no hace falta flex:1 */
}

/* ---- Móvil (768px) ---- */
@media (max-width: 768px) {
    .header-tablet[b-hdsrnzv9ri] {
        padding-left: 16px;
        padding-right: 16px;
        gap: 14px;
    }

    .tablet-logo img[b-hdsrnzv9ri] {
        width: 50px;
        height: 20px;
    }

    /* Ocultar separadores en móvil excepto el único entre phone y cart */
    .tablet-separator[b-hdsrnzv9ri] {
        display: none;
    }

    .tablet-actions[b-hdsrnzv9ri] {
        gap: 12px;
    }
}

/* ---- Móvil pequeño (480px) ---- */
@media (max-width: 480px) {
    .header-tablet[b-hdsrnzv9ri] {
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .tablet-logo img[b-hdsrnzv9ri] {
        width: 44px;
        height: 18px;
    }

    .tablet-search-bar[b-hdsrnzv9ri] {
        padding: 6px 8px 6px 10px;
    }

    .tablet-search-placeholder[b-hdsrnzv9ri] {
        font-size: 12px;
    }

    .tablet-actions[b-hdsrnzv9ri] {
        gap: 9px;
    }
}

/* ============================================
   ACTION BADGES (Legacy support)
   ============================================ */
.action-badge[b-hdsrnzv9ri] {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #3CAA36;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-badge.cart[b-hdsrnzv9ri] {
    background-color: #3CAA36;
}

.action-badge.fav[b-hdsrnzv9ri] {
    background-color: #E53935;
}

/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.language-selector[b-c9i14g2vud] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    user-select: none;
}

.lang-option[b-c9i14g2vud] {
    color: #2D2E2E;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.lang-option:hover[b-c9i14g2vud] {
    background-color: rgba(60, 170, 54, 0.1);
    color: #3CAA36;
}

.lang-option.active[b-c9i14g2vud] {
    font-weight: 700;
    color: #3CAA36;
}

.lang-separator[b-c9i14g2vud] {
    color: #999;
    font-weight: 300;
    pointer-events: none;
    user-select: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Reset box-sizing globally to prevent padding-induced overflow */
*[b-qprs79yowd],
*[b-qprs79yowd]::before,
*[b-qprs79yowd]::after {
    box-sizing: border-box;
}

/* Estructura principal de la página */
html[b-qprs79yowd],
body[b-qprs79yowd] {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: clip;
}

.page[b-qprs79yowd] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    max-width: 100vw;
}

main[b-qprs79yowd] {
    flex: 1 0 auto;
    width: 100%;
    margin-top: -1.1rem;
    overflow-x: clip;
}

.main[b-qprs79yowd] {
    width: 100%;
}

/* Footer Legacy (Check usage) */
.footer[b-qprs79yowd] {
    width: 100%;
    position: relative;
    flex-shrink: 0;
    padding-top: 20px;
}

/* Sidebar Legacy */
.sidebar[b-qprs79yowd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qprs79yowd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-qprs79yowd]  a,
.top-row[b-qprs79yowd]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-qprs79yowd]  a:hover,
.top-row[b-qprs79yowd]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-qprs79yowd]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.boton-2[b-qprs79yowd] {
    display: inline-flex;
    height: 2.7rem;
    bottom: 0.2rem;
    margin-left: 24px;
    align-items: center;
    background-color: var(--blanco);
    border: 0.0625rem solid;
    border-color: var(--primario);
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    text-decoration: none;
}

.state-layer[b-qprs79yowd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.5rem;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.label-text-3[b-qprs79yowd] {
    color: var(--primario);
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-small-font-style);
}

@media (max-width: 640.98px) {
    .top-row[b-qprs79yowd] {
        justify-content: space-between;
    }

    .top-row[b-qprs79yowd]  a,
    .top-row[b-qprs79yowd]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .sidebar[b-qprs79yowd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qprs79yowd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qprs79yowd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qprs79yowd],
    article[b-qprs79yowd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-qprs79yowd] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-qprs79yowd] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================================
   FOOTER – PIXEL-PERFECT FIGMA MATCH
   Desktop ≥835px  |  Tablet ≤834px  |  Mobile ≤480px
   Uses clamp() to scale proportionally without layout breakage
   ============================================================================ */

/* === SUB-FOOTER (BARRA GRIS CON VENTAJAS) === */
[b-qprs79yowd] .sub-footer {
    background-color: #757575;
    padding: clamp(20px, 2.6vw, 50px) clamp(20px, 6vw, 115px);
    width: 100%;
    max-width: 100%;
}

[b-qprs79yowd] .sub-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.6vw, 50px);
}

[b-qprs79yowd] .ventaja-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(15px, 2.6vw, 50px);
    flex: 1;
    min-width: 0;
}

[b-qprs79yowd] .ventaja-icon {
    width: clamp(36px, 3.5vw, 55px);
    height: clamp(36px, 3.5vw, 55px);
    flex-shrink: 0;
}

[b-qprs79yowd] .ventaja-item:first-child .ventaja-icon {
    width: clamp(45px, 4.5vw, 65px);
    height: clamp(45px, 4.5vw, 65px);
}

[b-qprs79yowd] .ventaja-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

[b-qprs79yowd] .ventaja-texto {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.3vw, 4px);
    flex: 1;
    min-width: 0;
    max-width: clamp(130px, 14vw, 220px);
}

[b-qprs79yowd] .ventaja-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 1.05vw, 20px);
    line-height: 1.3;
    color: #FFFFFF;
    margin: 0;
}

[b-qprs79yowd] .ventaja-descripcion {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 0.9vw, 16px);
    line-height: 1.4;
    letter-spacing: 0.25px;
    color: #FFFFFF;
    margin: 0;
}

/* === FOOTER PRINCIPAL === */
[b-qprs79yowd] .footer-nuevo {
    background-color: #FFFFFF;
    padding: clamp(30px, 4.7vw, 71px) clamp(20px, 6vw, 115px);
    width: 100%;
    max-width: 100%;
}

[b-qprs79yowd] .footer-nuevo-content {
    width: 100%;
}

/* === LAYOUT PRINCIPAL: 2 COLUMNAS === */
[b-qprs79yowd] .footer-main-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(30px, 5vw, 80px);
    max-width: 100%;
}

/* --- Columna Izquierda --- */
[b-qprs79yowd] .footer-col-left {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    flex-shrink: 0;
    max-width: 484px;
}

/* Logo — constrained so SVG doesn't stretch */
[b-qprs79yowd] .footer-logo {
    display: block;
}

[b-qprs79yowd] .footer-logo img {
    height: clamp(36px, 3.5vw, 54px);
    width: auto;
    max-width: 165px;
}

/* Bloque logo+desc compacto */
[b-qprs79yowd] .footer-descripcion {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 0.95vw, 14px);
    line-height: 1.43;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    margin: 0;
    max-width: 484px;
}

/* ===== Logos del pie, por SECCIONES (FooterSeccionLogos.razor) =====================
   Antes cada logo tenía su tamaño fijo en una clase propia y nada podía encogerse: con
   4,5 px de margen, bastó cambiar un sello por otro más ancho (HP Amplify, 25/09/2026) para
   que las huellas se salieran de la columna y taparan «Recibir novedades».

   Ahora manda la SECCIÓN. Cada logo trae --f (cuántas «alturas» de ancho pide, según la
   proporción real de su imagen) y la sección:
     - con sitio, pone cada logo a su tamaño (el de siempre);
     - sin sitio, los encoge TODOS A LA VEZ, en proporción;
     - si tuvieran que bajar del 60 %, el que no cabe pasa a otra fila.
   Da igual cuántos logos haya o qué imagen se suba: no se salen.

   Las alturas son las de antes (certificados = 2 filas de huella + su hueco).       */
[b-qprs79yowd] .footer-col-left {
    --logo-h-cert: clamp(80px, 9.2vw, 132px);
    --logo-gap-cert: clamp(12px, 2vw, 31px);
    --logo-h-huella: clamp(34px, 3.8vw, 60px);
    --logo-gap-huella: clamp(6px, 0.8vw, 12px);
    --logo-h-marca: clamp(30px, 3.2vw, 50px); /* lado de un logo cuadrado (HP) */
    --logo-gap-marca: clamp(16px, 2vw, 31px);
    --logo-gap-fila: clamp(12px, 1.5vw, 24px);
    /* Alto de certificado / alto de huella: para que certificados y huella crezcan en la
       fila al mismo ritmo (flex-grow solo admite números, no longitudes). */
    --logo-relacion: 2.2;
}

/* Certificados y huella comparten fila, con la MISMA regla que los logos de dentro: las
   dos secciones parten de su 60 % y crecen a la vez (en proporción a lo que piden) hasta su
   tamaño. Si ni al 60 % caben juntas, la huella baja entera debajo de los certificados y
   cada una tiene todo el ancho. (Repartir por el tamaño natural dejaba a los certificados
   un hueco que no usaban y la huella apretada en muchas filas.) */
[b-qprs79yowd] .footer-logos-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--logo-gap-fila);
    min-width: 0;
}

[b-qprs79yowd] .footer-logos {
    min-width: 0;
}

[b-qprs79yowd] .footer-logo-item {
    display: block;
    min-width: 0;
}

[b-qprs79yowd] .footer-logo-img {
    display: block;
    width: 100%;
    height: auto;
}

[b-qprs79yowd] .footer-logo-enlace {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

[b-qprs79yowd] .footer-logo-enlace:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* Certificados y marcas. Cada logo mide su parte del ancho REAL de la sección (container
   query), en proporción a lo que pide:
       ancho = f / Σf · (sitio − huecos),  entre el 60 % (f·H·0,6) y su tamaño (f·H).
   Así todos van a la misma escala. Si ni al 60 % caben, se quedan en el 60 % y la línea se
   parte: la segunda fila sale al MISMO tamaño que la primera (con un reparto «flex» la
   última fila, con menos logos, crecía y salía más grande). El −1px es para que el
   redondeo no mande el último logo a otra línea cuando caben justos. */
[b-qprs79yowd] .footer-logos-certificados,
[b-qprs79yowd] .footer-logos-marcas {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    min-width: calc(var(--fmax) * var(--h) * 0.6);
}

[b-qprs79yowd] .footer-logos-certificados {
    --h: var(--logo-h-cert);
    --gap: var(--logo-gap-cert);
    align-items: flex-end;
    /* En la fila con la huella: parte del ancho de sus logos al 60 % (los huecos no
       encogen; +1px por el redondeo de abajo) y crece hasta su tamaño natural. */
    --natural: calc(var(--sumf) * var(--h) + (var(--n) - 1) * var(--gap) + 1px);
    flex: calc(var(--sumf) * var(--logo-relacion)) 1 calc(var(--sumf) * var(--h) * 0.6 + (var(--n) - 1) * var(--gap) + 1px);
    max-width: var(--natural);
}

[b-qprs79yowd] .footer-logos-marcas {
    --h: var(--logo-h-marca);
    --gap: var(--logo-gap-marca);
    align-items: center;
}

[b-qprs79yowd] .footer-logos-certificados .footer-logo-item,
[b-qprs79yowd] .footer-logos-marcas .footer-logo-item {
    flex: none;
    width: clamp(calc(var(--f) * var(--h) * 0.6), calc(var(--f) * (100cqi - (var(--n) - 1) * var(--gap) - 1px) / var(--sumf)), calc(var(--f) * var(--h)));
}

/* Huella: rejilla de DOS filas (3 + 2 con los cinco sellos de hoy). Las columnas son la
   mitad de los sellos (--cols, del servidor) y la celda se encoge con el sitio que haya
   (container query); al llegar al 60 %, auto-fill abre otra fila, con el mismo tamaño. */
[b-qprs79yowd] .footer-logos-huella {
    --h: var(--logo-h-huella);
    container-type: inline-size;
    /* Igual que los certificados: parte de su 60 % y crece en proporción a lo que pide. */
    flex: calc(var(--cols) * var(--fmax)) 1 calc(var(--cols) * var(--fmax) * var(--h) * 0.6 + (var(--cols) - 1) * var(--logo-gap-huella));
    min-width: calc(2 * var(--fmax) * var(--h) * 0.6 + var(--logo-gap-huella));
}

[b-qprs79yowd] .footer-logos-rejilla {
    --celda-max: calc(var(--fmax) * var(--h));
    --celda-min: calc(var(--fmax) * var(--h) * 0.6);
    --celda: clamp(var(--celda-min), (100cqi - (var(--cols) - 1) * var(--logo-gap-huella) - 1px) / var(--cols), var(--celda-max));
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--celda));
    gap: var(--logo-gap-huella);
    justify-content: start;
    max-width: calc(var(--cols) * var(--celda-max) + (var(--cols) - 1) * var(--logo-gap-huella));
}

[b-qprs79yowd] .footer-logos-rejilla .footer-logo-item {
    justify-self: center;
}

/* Todos los sellos a la MISMA altura, aunque alguno sea algo más estrecho. */
[b-qprs79yowd] .footer-logos-rejilla .footer-logo-img {
    width: auto;
    max-width: 100%;
    height: calc(var(--celda) / var(--fmax));
    object-fit: contain;
}

/* --- Columna Derecha --- */
[b-qprs79yowd] .footer-col-right {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.2vw, 50px);
    min-width: 0;
    flex: 1;
}

/* ===== DESKTOP: Links expandidos en 4 columnas ===== */
[b-qprs79yowd] .footer-links-desktop {
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 50px);
}

[b-qprs79yowd] .footer-links-column {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
}

/* Títulos de sección — font-weight NORMAL (400), color gris */
[b-qprs79yowd] .footer-links-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
}

[b-qprs79yowd] .footer-link {
    font-family: 'Inter', 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.375;
    color: #212121;
    text-decoration: none;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-link:hover {
    color: #3CAA36;
}

/* Social icons — 4 iconos incluido Blog */
[b-qprs79yowd] .footer-social {
    display: flex;
    align-items: center;
    gap: 5px;
}

[b-qprs79yowd] .footer-social-icon {
    width: clamp(18px, 1.5vw, 24px);
    height: clamp(18px, 1.5vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
}

[b-qprs79yowd] .footer-social-icon:hover {
    transform: scale(1.15);
}

[b-qprs79yowd] .footer-social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Blog icon con B verde */
[b-qprs79yowd] .footer-social-blog {
    overflow: hidden;
}

[b-qprs79yowd] .footer-blog-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #3CAA36;
}

/* Contacto */
[b-qprs79yowd] .footer-contacto-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    color: #757575;
    margin: 0;
}

[b-qprs79yowd] .footer-contacto-dato {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    color: #2D2E2E;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-contacto-dato:hover {
    color: #3CAA36;
}

/* ===== TABLET: Oculto en desktop ===== */
[b-qprs79yowd] .footer-tablet-header {
    display: none;
}

/* Contacto info (tablet) */
[b-qprs79yowd] .footer-contacto-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-qprs79yowd] .footer-contacto-info span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(9px, 1vw, 14px);
    line-height: 1.4;
    color: #2D2E2E;
}

/* Acordeones */
[b-qprs79yowd] .footer-accordion-item {
    border-bottom: none;
}

[b-qprs79yowd] .footer-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(8px, 1vw, 12px) 0;
    cursor: pointer;
    user-select: none;
}

[b-qprs79yowd] .footer-accordion-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-accordion-arrow {
    font-size: 18px;
    color: #757575;
    transition: transform 0.3s ease;
    padding-left: 20px;
}

[b-qprs79yowd] .footer-accordion-item.expanded .footer-accordion-arrow {
    transform: rotate(90deg);
}

[b-qprs79yowd] .footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0;
}

[b-qprs79yowd] .footer-accordion-item.expanded .footer-accordion-content {
    max-height: 200px;
    padding-bottom: 12px;
    transition: max-height 0.3s ease-in, padding 0.3s ease-in;
}

[b-qprs79yowd] .footer-links-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-qprs79yowd] .footer-links-lista li {
    margin: 0;
}

[b-qprs79yowd] .footer-links-lista a {
    font-family: 'Inter', 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.4;
    color: #212121;
    text-decoration: none;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-links-lista a:hover {
    color: #3CAA36;
}

/* === NEWSLETTER === */
[b-qprs79yowd] .footer-newsletter-section {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
    margin-top: auto;
}

[b-qprs79yowd] .footer-newsletter-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 1vw, 16px);
    line-height: 1;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
}

[b-qprs79yowd] .footer-newsletter-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 20px);
    flex-wrap: wrap;
}

[b-qprs79yowd] .footer-newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

[b-qprs79yowd] .footer-newsletter-input {
    width: clamp(200px, 26vw, 410px);
    max-width: 100%;
    background: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: clamp(10px, 0.9vw, 14px) 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 1.15vw, 18px);
    color: #2D2E2E;
    outline: none;
    transition: box-shadow 0.2s ease;
}

[b-qprs79yowd] .footer-newsletter-input::placeholder {
    color: #9E9E9E;
}

[b-qprs79yowd] .footer-newsletter-input:focus {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* Botón compacto: 53px Figma height, padding fino */
[b-qprs79yowd] .footer-newsletter-btn {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 0 clamp(16px, 1.5vw, 24px);
    height: clamp(38px, 3.4vw, 53px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #3CAA36;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    [b-qprs79yowd] .footer-newsletter-btn:hover {
        background: #3CAA36;
        color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px #00000040;
    }

[b-qprs79yowd] .footer-newsletter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-qprs79yowd] .footer-newsletter-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-qprs79yowd] .footer-newsletter-message {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 4px;
    animation: fadeIn-b-qprs79yowd 0.3s ease;
}

[b-qprs79yowd] .footer-newsletter-message.success {
    color: #2e7d32;
    background: rgba(60, 170, 54, 0.1);
    border: 1px solid rgba(60, 170, 54, 0.3);
}

[b-qprs79yowd] .footer-newsletter-message.error {
    color: #c62828;
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

@keyframes fadeIn-b-qprs79yowd {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === LEGAL BAR — todo en una sola línea === */
[b-qprs79yowd] .footer-legal-bar {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 10px);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-legal-links {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 10px);
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-links span,
[b-qprs79yowd] .footer-legal-links a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(8px, 0.77vw, 12px);
    line-height: 1;
    color: #BDBDBD;
    text-decoration: none;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-links a:hover {
    color: #757575;
}

[b-qprs79yowd] .footer-legal-separator {
    width: 1px;
    height: clamp(10px, 0.9vw, 14px);
    background: #BDBDBD;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-idioma-selector {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(8px, 0.77vw, 12px);
    line-height: 1;
    color: #BDBDBD;
    cursor: pointer;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-accent-separator {
    width: 1px;
    height: clamp(10px, 0.9vw, 14px);
    background: #BDBDBD;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-idioma-selector span {
    cursor: pointer;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-idioma-selector span:hover {
    color: #757575;
}

[b-qprs79yowd] .footer-idioma-selector .active {
    font-weight: 700;
    color: #3CAA36;
}

/* === VISIBILITY TOGGLES === */
[b-qprs79yowd] .footer-desktop-only {
    display: block;
}

/* Legal bar needs flex even with footer-desktop-only */
[b-qprs79yowd] .footer-legal-bar.footer-desktop-only {
    display: flex;
}

[b-qprs79yowd] .footer-tablet-only {
    display: none;
}

/* ============================================================================
   RESPONSIVE: TABLET (≤834px)
   ============================================================================ */

@media (max-width: 834px) {

    /* Sub-footer: 2x2 wrap on tablet */
    [b-qprs79yowd] .sub-footer-content {
        flex-wrap: wrap;
        gap: 24px;
    }

    [b-qprs79yowd] .ventaja-item {
        width: calc(50% - 12px);
    }

    /* Visibility toggles */
    [b-qprs79yowd] .footer-desktop-only {
        display: none !important;
    }

    [b-qprs79yowd] .footer-tablet-only {
        display: block !important;
    }

    /* Footer */
    [b-qprs79yowd] .footer-nuevo {
        padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px);
    }

    /* Footer: single column on tablet */
    [b-qprs79yowd] .footer-main-row {
        flex-direction: column;
        gap: clamp(16px, 3vw, 30px);
    }

    /* Columna izquierda: desc + certs + marcas + legal */
    [b-qprs79yowd] .footer-col-left {
        gap: clamp(10px, 2vw, 18px);
        justify-content: space-between;
    }

    [b-qprs79yowd] .footer-descripcion {
        font-size: clamp(8px, 1.1vw, 11px);
        line-height: 1.5;
    }

    /* Logos tablet: mismas secciones, otras alturas (las de antes). */
    [b-qprs79yowd] .footer-col-left {
        --logo-h-cert: clamp(60px, 9.6vw, 80px);
        --logo-gap-cert: clamp(6px, 1vw, 16px);
        --logo-h-huella: clamp(24px, 3.5vw, 36px);
        --logo-gap-huella: clamp(4px, 0.6vw, 8px);
        --logo-h-marca: clamp(24px, 4vw, 38px);
        --logo-gap-marca: clamp(8px, 1.5vw, 20px);
        --logo-gap-fila: clamp(8px, 1vw, 16px);
        --logo-relacion: 2.22;
    }

    /* Legal bar tablet: in left column, bottom */
    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only {
        margin-top: auto;
        justify-content: flex-start;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links {
        gap: clamp(4px, 0.8vw, 8px);
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links span,
    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links a {
        font-size: clamp(7px, 1vw, 10px);
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-separator {
        height: clamp(8px, 1vw, 12px);
    }

    /* Ocultar links desktop */
    [b-qprs79yowd] .footer-links-desktop {
        display: none !important;
    }

    /* Mostrar tablet header */
    [b-qprs79yowd] .footer-tablet-header {
        display: block !important;
    }

    /* Columna derecha tablet */
    [b-qprs79yowd] .footer-col-right {
        gap: clamp(12px, 2vw, 20px);
    }

    /* Tablet top: logo+contact in narrow column, accordions take remaining */
    [b-qprs79yowd] .footer-tablet-top {
        display: grid;
        grid-template-columns: clamp(90px, 14vw, 130px) 1fr;
        gap: clamp(12px, 2.5vw, 30px);
        align-items: start;
    }

    /* Logo + contact + social */
    [b-qprs79yowd] .footer-tablet-logo-contact {
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 0.8vw, 8px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-logo {
        max-width: clamp(80px, 13vw, 120px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-logo img {
        height: auto;
        width: 100%;
        max-width: 120px;
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-contacto-info span {
        font-size: clamp(8px, 1.2vw, 11px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-social {
        gap: clamp(3px, 0.5vw, 5px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-social-icon {
        width: clamp(14px, 2.2vw, 20px);
        height: clamp(14px, 2.2vw, 20px);
    }

    /* Accordions tablet */
    [b-qprs79yowd] .footer-tablet-accordions {
        display: flex;
        flex-direction: column;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-header {
        padding: clamp(8px, 1.5vw, 14px) 0;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-titulo {
        font-size: clamp(11px, 1.6vw, 14px);
        line-height: 20px;
        letter-spacing: 0.25px;
        color: #757575;
        white-space: nowrap;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-arrow {
        font-size: clamp(14px, 2.2vw, 20px);
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-links-lista a {
        font-size: clamp(11px, 1.6vw, 14px);
    }


    /* Newsletter tablet */
    [b-qprs79yowd] .footer-newsletter-titulo {
        font-size: clamp(8px, 1.2vw, 12px);
    }

    [b-qprs79yowd] .footer-newsletter-row {
        flex-direction: column;
        align-items: stretch;
    }

    [b-qprs79yowd] .footer-newsletter-form {
        width: 100%;
    }

    [b-qprs79yowd] .footer-newsletter-input {
        flex: 1;
        width: auto;
        font-size: clamp(10px, 1.5vw, 14px);
        padding: clamp(8px, 1.2vw, 14px) 12px;
    }

    [b-qprs79yowd] .footer-newsletter-btn {
        font-size: clamp(11px, 1.6vw, 14px);
        padding: 0 clamp(12px, 1.8vw, 20px);
        height: clamp(34px, 5vw, 44px);
    }
}

/* ============================================================================
   RESPONSIVE: MÓVIL (≤480px)
   ============================================================================ */

@media (max-width: 480px) {
    [b-qprs79yowd] .sub-footer {
        padding: 20px 16px;
    }

    [b-qprs79yowd] .sub-footer-content {
        flex-direction: column;
        gap: 18px;
    }

    [b-qprs79yowd] .ventaja-item {
        width: 100%;
    }

    [b-qprs79yowd] .footer-nuevo {
        padding: 24px 16px;
    }

    [b-qprs79yowd] .footer-main-row {
        flex-direction: column;
        gap: 20px;
    }

    /* Tablet top: single column on mobile */
    [b-qprs79yowd] .footer-tablet-top {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    [b-qprs79yowd] .footer-col-left {
        --logo-gap-fila: 8px;
        --logo-gap-cert: 8px;
        --logo-gap-huella: 6px;
        --logo-gap-marca: 12px;
    }

    [b-qprs79yowd] .footer-newsletter-form {
        flex-direction: column;
    }

    [b-qprs79yowd] .footer-newsletter-btn {
        width: 100%;
        height: 40px;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only {
        justify-content: center;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* Overlay de fondo */
.mobile-drawer-overlay[b-dnn05z4xll] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-drawer-overlay.active[b-dnn05z4xll] {
    opacity: 1;
    visibility: visible;
}

/* Contenedor principal del drawer */
.mobile-drawer[b-dnn05z4xll] {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #FFFFFF;
    z-index: 2001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-drawer.active[b-dnn05z4xll] {
    transform: translateX(0);
}

/* Cabecera del drawer: language selector (izq) + botón cerrar (der) */
.mobile-drawer-header[b-dnn05z4xll] {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

/* Wrapper del language selector en el drawer.
   En tablet (≥768px) se muestra en el header — se oculta aquí.
   En móvil (<768px) el header lo esconde y se muestra en el sidebar. */
.mobile-drawer-lang[b-dnn05z4xll] {
    display: none;          /* oculto por defecto (tablet: está en el header) */
    align-items: center;
}

@media (max-width: 768px) {
    .mobile-drawer-lang[b-dnn05z4xll] {
        display: flex;      /* visible en móvil */
    }
}

.mobile-drawer-close[b-dnn05z4xll] {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #333;
    padding: 0;
    cursor: pointer;
}

/* Vistas del drawer */
.mobile-drawer-view[b-dnn05z4xll] {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: #FFFFFF;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Slide animation */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.mobile-drawer-view.active[b-dnn05z4xll] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Botones principales (Productos/Servicios) */
.mobile-drawer-main-buttons[b-dnn05z4xll] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-drawer-main-btn[b-dnn05z4xll] {
    width: 100%;
    padding: 16px;
    background: #F5F5F5;
    border: none;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2D2E2E;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-drawer-main-btn:hover[b-dnn05z4xll] {
    background: #E0E0E0;
}

/* Breadcrumb nav */
.mobile-drawer-breadcrumb[b-dnn05z4xll] {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    gap: 12px;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

.mobile-drawer-back[b-dnn05z4xll] {
    background: none;
    border: none;
    font-size: 20px;
    color: #3CAA36;
    cursor: pointer;
    padding: 0;
}

/* Promo header */
.mobile-drawer-promo[b-dnn05z4xll] {
    background: #3CAA36;
    color: white;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-drawer-section-header[b-dnn05z4xll] {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 16px;
    color: #2D2E2E;
    background: #FFFFFF;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* Contenido scrolleable */
.mobile-drawer-content[b-dnn05z4xll] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* Items de lista */
.mobile-category-item[b-dnn05z4xll],
.mobile-subcategory-item[b-dnn05z4xll],
.mobile-product-item[b-dnn05z4xll],
.mobile-service-item[b-dnn05z4xll] {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
    min-height: 50px;
}

.mobile-category-icon[b-dnn05z4xll],
.mobile-service-icon[b-dnn05z4xll] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-category-icon img[b-dnn05z4xll],
.mobile-service-icon img[b-dnn05z4xll] {
    max-width: 100%;
    max-height: 100%;
}

.mobile-category-text[b-dnn05z4xll],
.mobile-subcategory-text[b-dnn05z4xll],
.mobile-product-text[b-dnn05z4xll],
.mobile-service-text[b-dnn05z4xll] {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-family: 'Nunito Sans', sans-serif;
    cursor: pointer;
}

.mobile-category-arrow[b-dnn05z4xll],
.mobile-subcategory-arrow[b-dnn05z4xll] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    border-left: 1px solid #f0f0f0;
    margin-left: 8px;
}

/* Enlace servicio */
.mobile-service-item[b-dnn05z4xll] {
    text-decoration: none;
    color: inherit;
}
/* /Components/Pages/AcercaINTEGRAPMC.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE - ACERCA DE PMC */
/* ============================================= */
.acerca-integrapmc-page[b-q9zls727u2] {
    /* Colores */
    --gris-10: #F5F5F5;
    --gris-40: #BDBDBD;
    --gris-60: #757575;
    --negro: #141414;
    --texto-negro-suave: #323332;
    --texto-headings: #2D2E2E;
    --secundario: #6B989C;
    --blanco: #FFFFFF;
    --verde-fondo: rgba(133, 149, 126, 0.06);
    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-horizontal: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(50px, 5.21vw, 100px);
    --padding-top: clamp(30px, 3.13vw, 60px);
    /* Spacing */
    --gap-sections: clamp(30px, 3.13vw, 60px);
    --gap-large: clamp(20px, 2.08vw, 40px);
    --gap-midlarge: clamp(20px, 1.68vw, 40px);
    --gap-medium: clamp(15px, 1.56vw, 30px);
    --gap-small: clamp(15px, 1.04vw, 20px);
    --gap-tiny: clamp(8px, 0.52vw, 10px);
    /* Typography */
    --font-headline-large: clamp(22px, 1.67vw, 32px);
    --font-headline-medium: clamp(20px, 1.46vw, 28px);
    --font-headline-small: clamp(18px, 1.25vw, 24px);
    --font-title: clamp(16px, 1.15vw, 22px);
    --font-body-large: clamp(14px, 0.83vw, 16px);
    --font-body-medium: clamp(12px, 0.73vw, 14px);
    --font-page-title: clamp(14px, 0.83vw, 16px);
    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ============================================= */
/* HEADER - TÍTULO Y BOTÓN VOLVER */
/* ============================================= */
    .acerca-integrapmc-page .ap-header-wrapper[b-q9zls727u2] {
        width: 100%;
        background-color: var(--gris-10);
        padding-top: 20px;
    }

.acerca-integrapmc-page .ap-header[b-q9zls727u2] {
    max-width: clamp(900px, 88vw, 1690px);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--padding-horizontal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.acerca-integrapmc-page .ap-title[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-page-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.acerca-integrapmc-page .ap-back-arrow[b-q9zls727u2] {
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}


/* ============================================= */
/* BACKGROUND SECTIONS */
/* ============================================= */
    .acerca-integrapmc-page .ap-bg-grey[b-q9zls727u2] {
        background: linear-gradient(to bottom, var(--gris-10) 55%, white 50%);
        width: 100%;
        padding: clamp(20px, 1.05vw, 30px) var(--padding-horizontal) clamp(10px, 1.04vw, 20px);
    }

.acerca-integrapmc-page .ap-bg-green[b-q9zls727u2] {
    background-color: var(--verde-fondo);
    width: 100%;
    padding-bottom: clamp(260px, 29vw, 480px);
}

.acerca-integrapmc-page .ap-bg-green + .ap-container[b-q9zls727u2] {
    margin-top: calc(-1 * clamp(200px, 22vw, 420px));
    position: relative;
    z-index: 1;
}

.acerca-integrapmc-page .ap-bg-dark[b-q9zls727u2] {
    background-color: var(--gris-60);
    width: 100%;
    padding-left: clamp(60px, 6vw, 120px);
    padding-right: clamp(60px, 6vw, 120px);
    padding-top: clamp(60px, 6.28vw, 150px);
    padding-bottom: clamp(40px, 3.15vw, 120px);
}

.acerca-integrapmc-page .ap-bg-dark2[b-q9zls727u2] {
    background-color: var(--gris-60);
    width: 100%;
    padding-left: clamp(60px, 6vw, 120px);
    padding-right: clamp(60px, 6vw, 120px);
    padding-top: clamp(30px, 3.14vw, 100px);
    padding-bottom: clamp(60px, 6.28vw, 150px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL CON ANCHO MÁXIMO */
/* ============================================= */
.acerca-integrapmc-page .ap-container[b-q9zls727u2] {
    max-width: clamp(900px, 88vw, 1690px);
    width: 100%;
    margin: 0 auto;
}

/* ============================================= */
/* SECCIONES DE 2 COLUMNAS */
/* ============================================= */
.acerca-integrapmc-page .ap-two-cols[b-q9zls727u2] {
    display: flex;
    gap: var(--gap-sections);
    align-items: flex-start;
    width: 100%;
}

.acerca-integrapmc-page .ap-two-cols--end[b-q9zls727u2] {
    align-items: flex-end;
}

.acerca-integrapmc-page .ap-col[b-q9zls727u2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-midlarge);
}

.acerca-integrapmc-page .ap-heading[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-medium);
    color: var(--texto-negro-suave);
    line-height: 1.29;
    margin: 0;
}

.acerca-integrapmc-page .ap-body[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-large);
    color: var(--texto-negro-suave);
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
}

.acerca-integrapmc-page .ap-body strong[b-q9zls727u2] {
    font-weight: 700;
}

.acerca-integrapmc-page .ap-separator[b-q9zls727u2] {
    width: clamp(300px, 26.2vw, 503px);
    height: 1px;
    background-color: var(--gris-40);
    border: none;
    margin: 0;
}

.acerca-integrapmc-page .ap-placeholder-img[b-q9zls727u2] {
    width: 100%;
    height: clamp(200px, 16vw, 308px);
    background-color: var(--gris-10);
    border-radius: 10px;
}

.acerca-integrapmc-page .ap-office-img[b-q9zls727u2] {
    width: 100%;
    max-width: clamp(400px, 42.4vw, 815px);
    height: auto;
    border-radius: 10px;
    position: relative;
}

.acerca-integrapmc-page .ap-logo-overlay[b-q9zls727u2] {
    position: absolute;
    width: clamp(60px, 5.15vw, 99px);
    height: clamp(66px, 5.31vw, 102px);
    bottom: clamp(15px, 1.35vw, 26px);
    left: clamp(15px, 1.35vw, 26px);
}

/* ============================================= */
/* FEATURE CARDS (4 HORIZONTALES) */
/* ============================================= */
.acerca-integrapmc-page .ap-feature-cards[b-q9zls727u2] {
    display: flex;
    justify-content: space-between;
    padding: clamp(20px, 1.82vw, 35px) 0 clamp(10px, 1.04vw, 20px);
    width: 100%;
}

.acerca-integrapmc-page .ap-card[b-q9zls727u2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.acerca-integrapmc-page .ap-card-title[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-large);
    color: var(--negro);
    line-height: 1.25;
    text-align: left;
    width: 100%;
    margin: 0 0 clamp(10px, 1.04vw, 20px) 0;
    min-height: calc(var(--font-headline-large) * 1.25 * 2);
    padding-left: 20px;
}

/* Descripción oculta — aparece con clip en hover */
.acerca-integrapmc-page .ap-card-desc[b-q9zls727u2] {
    height: 0;
    overflow: hidden;
    opacity: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-large);
    color: var(--texto-negro-suave);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
    transition: height 0.35s ease, opacity 0.3s ease;
    padding: 0 20px;
}

.acerca-integrapmc-page .ap-card:hover .ap-card-desc[b-q9zls727u2] {
    height: clamp(55px, 5.21vw, 100px);
    opacity: 1;
}

/* Imagen — se clip al crecer la descripción */
.acerca-integrapmc-page .ap-card-img-wrapper[b-q9zls727u2] {
    position: relative;
    width: 100%;
    height: clamp(260px, 29.17vw, 560px);
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
    transition: height 0.35s ease;
}

.acerca-integrapmc-page .ap-card:hover .ap-card-img-wrapper[b-q9zls727u2] {
    height: calc(clamp(260px, 29.17vw, 560px) - clamp(55px, 5.21vw, 100px));
}

.acerca-integrapmc-page .ap-card-img[b-q9zls727u2] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(260px, 29.17vw, 560px);
    object-fit: contain;
    display: block;
}


/* ============================================= */
/* TEAM SECTION */
/* ============================================= */
.acerca-integrapmc-page .ap-team[b-q9zls727u2] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sections);
    padding-top: 50px;
}

.acerca-integrapmc-page .ap-team-heading[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-medium);
    color: var(--texto-negro-suave);
    line-height: 1.29;
    margin: 0;
}

.acerca-integrapmc-page .ap-team-photos[b-q9zls727u2] {
    display: flex;
    gap: var(--gap-sections);
    width: 100%;
}

/* ── Foto grande ── */
.acerca-integrapmc-page .ap-team-large-viewport[b-q9zls727u2] {
    overflow: hidden;
    flex-shrink: 0;
    width: clamp(300px, 29.53vw, 567px);
    height: clamp(200px, 20.52vw, 394px);
    border-radius: 10px;
    box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, 0.25);
}

.acerca-integrapmc-page .ap-team-large-track[b-q9zls727u2] {
    display: flex;
    height: 100%;
    transition: transform 0.45s ease;
}

.acerca-integrapmc-page .ap-team-large[b-q9zls727u2] {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Fotos pequeñas ── */
.acerca-integrapmc-page .ap-team-grid[b-q9zls727u2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acerca-integrapmc-page .ap-team-row-viewport[b-q9zls727u2] {
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--gap-sections);
}

.acerca-integrapmc-page .ap-team-row-track[b-q9zls727u2] {
    display: flex;
    transition: transform 0.45s ease;
}

.acerca-integrapmc-page .ap-team-row[b-q9zls727u2] {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    gap: var(--gap-small);
}

.acerca-integrapmc-page .ap-team-small[b-q9zls727u2] {
    flex: 1;
    min-width: 0;
    height: clamp(120px, 14vw, 269px);
    border-radius: 8px;
    object-fit: cover;
}

.acerca-integrapmc-page .ap-team-header[b-q9zls727u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: clamp(16px, 1.67vw, 32px);
}

.acerca-integrapmc-page .ap-team-subtitle[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-small);
    color: var(--texto-negro-suave);
    line-height: 1.33;
    margin: 0;
}

.acerca-integrapmc-page .ap-team-arrows[b-q9zls727u2] {
    display: flex;
    gap: clamp(10px, 1.04vw, 20px);
}

.acerca-integrapmc-page .ap-arrow-btn[b-q9zls727u2] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.acerca-integrapmc-page .ap-arrow-btn img[b-q9zls727u2] {
    width: clamp(30px, 1.825vw, 38px);
    height: 12.62px;
    display: block;
}

.acerca-integrapmc-page .no-transition[b-q9zls727u2] {
    transition: none !important;
}

.acerca-integrapmc-page .ap-professionals[b-q9zls727u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-small);
    width: 100%;
    padding-bottom: clamp(15px, 1.57vw, 80px);
}

.acerca-integrapmc-page .ap-prof-item[b-q9zls727u2] {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
}

.acerca-integrapmc-page .ap-prof-icon[b-q9zls727u2] {
    width: clamp(60px, 4.69vw, 90px);
    height: clamp(60px, 4.69vw, 90px);
    object-fit: cover;
}

.acerca-integrapmc-page .ap-prof-label[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body-medium);
    color: var(--negro);
    letter-spacing: 0.1px;
    line-height: 1.43;
    margin: 0;
}

/* ============================================= */
/* SERVICES GRID */
/* ============================================= */
.acerca-integrapmc-page .ap-services[b-q9zls727u2] {
    padding-top: clamp(15px, 1.57vw, 80px);
    padding-bottom: clamp(50px, 5.25vw, 120px);
    width: 100%;
}

.acerca-integrapmc-page .ap-services-box[b-q9zls727u2] {
    border: 1px solid var(--secundario);
    border-radius: 15px;
    background-color: var(--blanco);
    padding: clamp(40px, 3.91vw, 75px);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
}

.acerca-integrapmc-page .ap-services-heading-row[b-q9zls727u2] {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--gap-sections);
}

.acerca-integrapmc-page .ap-services-heading[b-q9zls727u2] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-medium);
    color: var(--texto-negro-suave);
    line-height: 1.29;
    margin: 0;
}

.acerca-integrapmc-page .ap-services-grid[b-q9zls727u2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(25px, 2.71vw, 52px) clamp(20px, 2.7vw, 52px);
}

.acerca-integrapmc-page .ap-service-item[b-q9zls727u2] {
    display: flex;
    gap: var(--gap-large);
    align-items: flex-start;
    padding-inline: 40px;
}

.acerca-integrapmc-page .ap-service-icon[b-q9zls727u2] {
    width: clamp(70px, 4.45vw, 110px);
    height: clamp(65px, 4.185vw, 100px);
    object-fit: contain;
    flex-shrink: 0;
}

.acerca-integrapmc-page .ap-service-content[b-q9zls727u2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

.acerca-integrapmc-page .ap-service-title[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--texto-headings);
    line-height: 1.27;
    margin: 0;
}

.acerca-integrapmc-page .ap-service-desc-wrapper[b-q9zls727u2] {
    display: flex;
    gap: clamp(15px, 1.26vw, 28px);
    align-items: flex-start;
}

.acerca-integrapmc-page .ap-service-border[b-q9zls727u2] {
    width: 4px;
    background-color: var(--secundario);
    flex-shrink: 0;
    align-self: stretch;
}

.acerca-integrapmc-page .ap-service-desc[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-large);
    color: var(--texto-headings);
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
}

/* ============================================= */
/* DARK SECTIONS */
/* ============================================= */
.acerca-integrapmc-page .ap-dark-heading[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline-medium);
    color: var(--blanco);
    line-height: 1.29;
    margin: 0;
}

.acerca-integrapmc-page .ap-dark-body[b-q9zls727u2] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-large);
    color: var(--blanco);
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
}

.acerca-integrapmc-page .ap-dark-body strong[b-q9zls727u2] {
    font-weight: 700;
}

.acerca-integrapmc-page .ap-dark-separator[b-q9zls727u2] {
    width: clamp(300px, 26.2vw, 503px);
    height: 1px;
    background-color: var(--blanco);
    border: none;
    margin: 0;
}

.acerca-integrapmc-page .ap-dark-img[b-q9zls727u2] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* ============================================= */
/* RESPONSIVE - TABLET (≤834px) */
/* ============================================= */
@media (max-width: 834px) {
    /* Container: full width con padding propio para evitar desbordamiento */
    .acerca-integrapmc-page .ap-container[b-q9zls727u2] {
        max-width: 100%;
        padding-left: var(--padding-horizontal);
        padding-right: var(--padding-horizontal);
    }

    /* Header: full width */
    .acerca-integrapmc-page .ap-header[b-q9zls727u2] {
        max-width: 100%;
    }

    /* Flecha: alineada con el padding de contenido */
    .acerca-integrapmc-page .ap-back-arrow[b-q9zls727u2] {
        left: var(--padding-horizontal);
    }

    /* BG wrappers: sin padding horizontal (lo gestiona el container) */
    .acerca-integrapmc-page .ap-bg-grey[b-q9zls727u2] {
        padding-left: 0;
        padding-right: 0;
    }

    .acerca-integrapmc-page .ap-bg-dark[b-q9zls727u2],
    .acerca-integrapmc-page .ap-bg-dark2[b-q9zls727u2] {
        padding-left: 0;
        padding-right: 0;
    }

    /* Secciones de 2 columnas → columna única */
    .acerca-integrapmc-page .ap-two-cols[b-q9zls727u2] {
        flex-direction: column;
    }

    /* Separadores: ancho disponible */
    .acerca-integrapmc-page .ap-separator[b-q9zls727u2],
    .acerca-integrapmc-page .ap-dark-separator[b-q9zls727u2] {
        width: 100%;
        max-width: 503px;
    }

    /* Imagen de oficina: ancho completo */
    .acerca-integrapmc-page .ap-office-img[b-q9zls727u2] {
        max-width: 100%;
    }

    /* Feature cards: 2×2 */
    .acerca-integrapmc-page .ap-feature-cards[b-q9zls727u2] {
        flex-wrap: wrap;
        gap: var(--gap-medium);
    }

    .acerca-integrapmc-page .ap-card[b-q9zls727u2] {
        flex-basis: calc(50% - var(--gap-medium) / 2);
        min-width: 0;
    }

    /* Fotos del equipo: apiladas */
    .acerca-integrapmc-page .ap-team-photos[b-q9zls727u2] {
        flex-direction: column;
    }

    .acerca-integrapmc-page .ap-team-large-viewport[b-q9zls727u2] {
        width: 100%;
        height: clamp(200px, 45vw, 394px);
    }

    /* Servicios: 2 columnas */
    .acerca-integrapmc-page .ap-services-grid[b-q9zls727u2] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Profesionales: wrap natural */
    .acerca-integrapmc-page .ap-professionals[b-q9zls727u2] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE (≤768px) */
/* ============================================= */
@media (max-width: 768px) {
    /* Servicios: 1 columna, sin padding lateral en los ítems */
    .acerca-integrapmc-page .ap-services-grid[b-q9zls727u2] {
        grid-template-columns: 1fr;
    }

    .acerca-integrapmc-page .ap-service-item[b-q9zls727u2] {
        padding-inline: 0;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE (≤393px) */
/* ============================================= */
@media (max-width: 393px) {
    /* Feature cards: columna única */
    .acerca-integrapmc-page .ap-feature-cards[b-q9zls727u2] {
        flex-direction: column;
    }

    .acerca-integrapmc-page .ap-card[b-q9zls727u2] {
        flex-basis: 100%;
    }

    /* Imagen de card: altura fija para pantallas estrechas */
    .acerca-integrapmc-page .ap-card-img-wrapper[b-q9zls727u2] {
        height: 220px;
    }

    .acerca-integrapmc-page .ap-card-img[b-q9zls727u2] {
        height: 220px;
    }

    .acerca-integrapmc-page .ap-card:hover .ap-card-img-wrapper[b-q9zls727u2] {
        height: calc(220px - 55px);
    }

    /* Foto grande del equipo */
    .acerca-integrapmc-page .ap-team-large-viewport[b-q9zls727u2] {
        height: 240px;
    }

    /* Fotos pequeñas del equipo: 2 por fila */
    .acerca-integrapmc-page .ap-team-row[b-q9zls727u2] {
        flex-wrap: wrap;
    }

    .acerca-integrapmc-page .ap-team-small[b-q9zls727u2] {
        flex: none;
        width: calc(50% - var(--gap-small) / 2);
        height: 110px;
    }

    /* Servicios: 1 columna */
    .acerca-integrapmc-page .ap-services-grid[b-q9zls727u2] {
        grid-template-columns: 1fr;
    }

    .acerca-integrapmc-page .ap-services-box[b-q9zls727u2] {
        padding: 24px 20px;
    }

    /* Profesionales: grid 2 columnas centrado */
    .acerca-integrapmc-page .ap-professionals[b-q9zls727u2] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: var(--gap-medium);
    }

    .acerca-integrapmc-page .ap-prof-item[b-q9zls727u2] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--gap-tiny);
    }

    /* Separadores: ancho completo */
    .acerca-integrapmc-page .ap-separator[b-q9zls727u2],
    .acerca-integrapmc-page .ap-dark-separator[b-q9zls727u2] {
        width: 100%;
        max-width: unset;
    }
}
/* /Components/Pages/ArticuloDetalle.razor.rz.scp.css */
/* =========================================================
   ARTICULO DETALLE — Figma Pixel-Perfect + Responsive
   Design ref: Figma node 263-6871 (Producto)
   Fluid scaling via clamp() across breakpoints.
   ========================================================= */

/* -------- Design Tokens (scoped to page) -------- */
.articulo-detalle-page[b-mkz7nc7p1i] {
    /* Colors (from Figma variables) */
    --ad-negro: #212121;
    --ad-blanco: #FFFFFF;
    --ad-primario: #3CAA36;
    --ad-primario-dark: #2D8A2B;
    --ad-primario-10: #EBF6EB;
    --ad-gris-10: #F5F5F5;
    --ad-gris-20: #EEEEEE;
    --ad-gris-30: #E0E0E0;
    --ad-gris-40: #BDBDBD;
    --ad-gris-50: #9E9E9E;
    --ad-gris-60: #757575;
    --ad-oferta-50: #FF5449;
    --ad-oferta-60: #DE3730;
    --ad-black-900: #121212;
    --ad-neutral-07: #141718;
    --ad-alternativo: #FDD623;
    --ad-alternativo-oscuro: #ECC61B;

    /* Fluid horizontal paddings (mirrors Figma 1920 → mobile) */
    --ad-pad-x: clamp(16px, 6vw, 115px);

    /* Font */
    --ad-font: "Nunito Sans", Helvetica, Arial, sans-serif;

    /* Max content width */
    --ad-max-w: 1690px;

    width: 100%;
    margin: 0 auto;
    /* Márgenes laterales estándar del sitio (igual que el resto de secciones,
       p.ej. Artículos Relacionados): sin esto la primera sección queda
       borde a borde en anchos < max-width */
    padding-left: var(--ad-pad-x);
    padding-right: var(--ad-pad-x);
    font-family: var(--ad-font);
    color: var(--ad-negro);
    box-sizing: border-box;
}

.articulo-detalle-page *[b-mkz7nc7p1i],
.articulo-detalle-page *[b-mkz7nc7p1i]::before,
.articulo-detalle-page *[b-mkz7nc7p1i]::after {
    box-sizing: border-box;
}

/* =========================================================
   MAIN ROW: galería | divisor | info | rail specs
   Figma "Producto nova" (Frame 1000002299): ≈550 : 705 : 320 @1920
   ========================================================= */
.articulo-detalle-row[b-mkz7nc7p1i] {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr) minmax(0, 0.46fr);
    gap: clamp(16px, 2.5vw, 44px);
    max-width: var(--ad-max-w);
    margin: 0 auto;
    position: relative;
}

.articulo-detalle-row[b-mkz7nc7p1i]::before {
    grid-column: 2;
    align-self: stretch;
    background-color: var(--ad-gris-30);
    width: 1px;
}

.articulo-detalle-col-left[b-mkz7nc7p1i] {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.articulo-detalle-col-right[b-mkz7nc7p1i] {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 20px);
    min-width: 0;
    padding-left: 0;
    width: 100%;
    /* Ocupar toda la altura del row para poder pinnear el bottom-group abajo */
    height: 100%;
}

/* Bottom group: se pega al fondo de la columna derecha
   → queda siempre alineado con las thumbnails de la columna izquierda */
.product-bottom-group[b-mkz7nc7p1i] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-bottom: 6px;
}

/* =========================================================
   RAIL DERECHO — Especificaciones / Documentación / Añadir
   ========================================================= */
.articulo-detalle-col-specs[b-mkz7nc7p1i] {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Zona scrolleable del rail: en desktop nunca estira la fila,
   si hay muchas especificaciones aparece scroll interno */
.rail-scroll[b-mkz7nc7p1i] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 28px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ad-gris-40) transparent;
    padding-right: 4px;
    margin-bottom: clamp(12px, 1.2vw, 18px);
}

.rail-scroll[b-mkz7nc7p1i]::-webkit-scrollbar {
    width: 4px;
}

.rail-scroll[b-mkz7nc7p1i]::-webkit-scrollbar-thumb {
    background: var(--ad-gris-40);
    border-radius: 2px;
}

.rail-section[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 0;
}

/* Documentación fija: fuera del scroll, siempre visible sobre AÑADIR */
.rail-section--docs[b-mkz7nc7p1i] {
    margin-bottom: clamp(16px, 1.5vw, 24px);
}

/* Cabecera de sección del rail — botón acordeón */
.rail-title[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ad-negro);
    cursor: pointer;
    text-align: left;
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ad-negro);
    margin: 0;
    padding: 0 0 clamp(8px, 1vw, 12px);
}

.rail-title-chevron[b-mkz7nc7p1i] {
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.rail-section--open .rail-title-chevron[b-mkz7nc7p1i] {
    transform: rotate(180deg);
}

/* Contenido plegable de specs/documentacion: siempre en el DOM, la apertura
   se anima con grid-template-rows 0fr->1fr (no requiere conocer la altura) */
.rail-collapse[b-mkz7nc7p1i] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.2s ease;
}

.rail-section--open .rail-collapse[b-mkz7nc7p1i] {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease 0.05s;
}

.rail-collapse-inner[b-mkz7nc7p1i] {
    min-height: 0;
}

/* Filas compactas (Figma: nombre+valor pegados, ~52px por fila) */
.rail-spec-row[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: clamp(8px, 0.9vw, 12px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    line-height: 20px;
}

.rail-spec-name[b-mkz7nc7p1i] {
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--ad-negro);
}

.rail-spec-value[b-mkz7nc7p1i] {
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--ad-negro);
    overflow-wrap: anywhere;
}

.rail-docs[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
}

.rail-docs-loading[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1.2vw, 14px) 0;
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    color: var(--ad-gris-60);
}

.rail-doc-link[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1vw, 12px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    color: var(--ad-negro);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rail-doc-link:hover[b-mkz7nc7p1i] {
    color: var(--ad-primario);
}

.rail-doc-link--loading[b-mkz7nc7p1i] {
    opacity: 0.5;
    pointer-events: none;
}

.rail-doc-link i[b-mkz7nc7p1i] {
    font-size: 18px;
    flex-shrink: 0;
}

/* Boton AÑADIR pinneado al fondo del rail: se compensa con margin-bottom la altura de la fila de stock que en la columna izquierda queda debajo de COMPRAR, para que ambos botones se alineen */
.rail-add-container[b-mkz7nc7p1i] {
    margin-top: auto;
    margin-bottom: calc(clamp(10px, 2vw, 24px) + 46px);
    display: flex;
    flex-shrink: 0;
    padding-bottom: 6px;
}

.rail-add-container .btn-add-to-cart[b-mkz7nc7p1i] {
    width: 100%;
}


@media (min-width: 1401px) {
    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        height: 0;
        min-height: 100%;
        overflow: hidden;
    }

}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb-container[b-mkz7nc7p1i] {
    font-size: clamp(12px, 1vw, 14px);

}

.breadcrumb-custom[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;        
    padding: 0;
    gap: 10px;
    padding-top: 5px;
}

.breadcrumb-home-arrow[b-mkz7nc7p1i] {
    width: clamp(16px, 1.5vw, 20px);
    height: clamp(16px, 1.5vw, 20px);
    transform: rotate(180deg);
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: brightness(0.3);
}

.breadcrumb-custom > a:hover .breadcrumb-home-arrow[b-mkz7nc7p1i] {
    transform: rotate(180deg) translateX(2px);
}

.breadcrumb[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
    font-family: var(--ad-font);
}

.breadcrumb-item[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    color: var(--ad-gris-60);
}

.breadcrumb-item + .breadcrumb-item[b-mkz7nc7p1i]::before {
    content: "/";
    color: var(--ad-gris-50);
    font-weight: 400;
    padding: 0 8px;
}

.breadcrumb-item a[b-mkz7nc7p1i] {
    color: var(--ad-negro) !important;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover[b-mkz7nc7p1i] {
    color: var(--ad-primario) !important;
}

.breadcrumb-item.active[b-mkz7nc7p1i] {
    color: var(--ad-negro);
    font-weight: 400;
}

/* =========================================================
   LEFT COLUMN — Image gallery
   ========================================================= */
.product-image-gallery[b-mkz7nc7p1i] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-image-area[b-mkz7nc7p1i] {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 8px;
}

.product-main-image-large[b-mkz7nc7p1i] {
    position: relative;
    flex: 1;
    min-width: 0;
    /* Alto FIJO (no aspect-ratio): la fila mide siempre lo mismo aunque la
       imagen falle o el producto tenga poco contenido — evita que la sección
       se compacte, que los separadores se junten en doble línea y que
       ayuda/relacionados entren en el primer viewport */
    height: clamp(320px, 48vw, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
    user-select: none;
    border-radius: 14px;
}

.main-product-img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    transition: transform 0.4s ease;
}

.main-product-img:hover[b-mkz7nc7p1i] {
    transform: scale(1.02);
}

/* Vertical scroll indicator — flex item al lado de la imagen, sin solaparse */
.vertical-scroll-bar[b-mkz7nc7p1i] {
    position: relative;
    flex-shrink: 0;
    width: 3px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.vertical-scroll-bar:hover[b-mkz7nc7p1i],
.product-image-area:hover .vertical-scroll-bar[b-mkz7nc7p1i] {
    opacity: 1;
}

.scroll-track[b-mkz7nc7p1i] {
    position: absolute;
    top: 10%;
    height: 80%;
    width: 100%;
    background: var(--ad-gris-30);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    pointer-events: auto !important;
}

.scroll-track:hover[b-mkz7nc7p1i] {
    background: var(--ad-gris-40);
}

.scroll-thumb[b-mkz7nc7p1i] {
    position: absolute;
    width: 3px;
    background: var(--ad-negro);
    border-radius: 2px;
    cursor: grab;
    min-height: 25px;
    left: 0;
    z-index: 15;
    pointer-events: auto !important;
    user-select: none;
    touch-action: none;
    transition: background-color 0.15s ease;
}

.scroll-thumb:hover[b-mkz7nc7p1i] {
    background: #000;
}

.scroll-thumb:active[b-mkz7nc7p1i] {
    cursor: grabbing !important;
    background: #000;
}

/* Thumbnails row */
.thumbnails-navigation-container[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 1vw, 12px);
    width: 100%;
}

.thumbnails-with-scroll[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    scroll-behavior: smooth;
    /* Al llegar al extremo no encadena el gesto con el scroll de la pagina. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.thumbnails-with-scroll[b-mkz7nc7p1i]::-webkit-scrollbar {
    display: none;
}

/* .can-drag / .is-dragging las pone initThumbsStrip() en articulo-detalle.js */
.thumbnails-with-scroll.can-drag[b-mkz7nc7p1i] {
    cursor: grab;
}

.thumbnails-with-scroll.is-dragging[b-mkz7nc7p1i] {
    cursor: grabbing;
    /* scroll-behavior: smooth pelea con el arrastre (anima cada paso y se siente pastoso). */
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}

/* Mientras se arrastra, las miniaturas no reciben hover ni click. */
.thumbnails-with-scroll.is-dragging .thumb-item[b-mkz7nc7p1i] {
    pointer-events: none;
}

.thumb-item[b-mkz7nc7p1i] {
    width: clamp(80px, 9vw, 120px);
    height: clamp(80px, 9vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: var(--ad-gris-10);
    border-radius: 14px;
    padding: 8px;
    opacity: 0.7;
    filter: grayscale(40%);
}

.thumb-item:hover[b-mkz7nc7p1i] {
    opacity: 0.9;
    filter: grayscale(0);
}

.thumb-item.selected[b-mkz7nc7p1i] {
    opacity: 1;
    filter: grayscale(0);
    background: var(--ad-blanco);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.thumb-item img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    /* Sin esto el navegador inicia su propio drag de imagen y rompe el arrastre. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Las flechas solo tienen sentido si la tira desborda; el JS marca .can-scroll
   en el contenedor cuando scrollWidth > clientWidth. */
.thumbnails-navigation-container:not(.can-scroll) .thumb-nav-btn[b-mkz7nc7p1i] {
    display: none;
}

.thumb-nav-btn[b-mkz7nc7p1i] {
    width: clamp(28px, 3vw, 36px);
    height: clamp(28px, 3vw, 36px);
    border: 1px solid var(--ad-gris-30);
    background: var(--ad-blanco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    color: var(--ad-negro);
}

.thumb-nav-btn:hover:not(:disabled)[b-mkz7nc7p1i] {
    background: var(--ad-gris-10);
    border-color: var(--ad-primario);
    color: var(--ad-primario);
}

.thumb-nav-btn:disabled[b-mkz7nc7p1i] {
    opacity: 0.3;
    cursor: not-allowed;
}

.thumb-nav-btn i[b-mkz7nc7p1i] {
    font-size: clamp(12px, 1.2vw, 14px);
}

/* =========================================================
   RIGHT COLUMN — Product info
   ========================================================= */

/* --- Top row: reference (left) + badges/heart (right) --- */
.product-badges[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 100%;
    min-height: 28px;
}

.product-badges .badge[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    font-family: var(--ad-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border: none;
    border-radius: 2px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    white-space: nowrap;
}

/* Reference code — left, plain text */
.product-badges .badge.referencia[b-mkz7nc7p1i] {
    margin-right: auto;
    color: var(--ad-gris-60);
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
}

/* OFERTA badge — red */
.product-badges .badge.badge-oferta[b-mkz7nc7p1i],
.product-badges .badge.bg-danger[b-mkz7nc7p1i] {
    background-color: var(--ad-oferta-50) !important;
    color: var(--ad-blanco);
}

/* NUEVO badge — dark with subtle border (Figma: white bg with dark border & bold text) */
.product-badges .badge.badge-nuevo[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    border: 1px solid var(--ad-gris-30);
}

/* ECO badge — green */
.product-badges .badge.bg-success[b-mkz7nc7p1i] {
    background-color: var(--ad-primario) !important;
    color: var(--ad-blanco);
}

/* Reembolso: la badge es un enlace clicable a la página de canje del fabricante */
.badge-reembolso-canje[b-mkz7nc7p1i] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

/* Badge clicable: lleva al listado de productos filtrado por esa etiqueta (oferta, homologado, regalo, reembolso) */
.badge-filter-link[b-mkz7nc7p1i] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

/* === REGALO en el rail derecho — mismo patrón que ESPECIFICACIONES/DOCUMENTACIÓN (título con su línea), discreto === */
.rail-title--static[b-mkz7nc7p1i] {
    cursor: default;
}

.rail-regalo[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 14px);
    padding: clamp(10px, 1.1vw, 14px) 0;
}

.rail-regalo__img[b-mkz7nc7p1i] {
    width: clamp(44px, 4vw, 56px);
    height: clamp(44px, 4vw, 56px);
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--ad-gris-30);
    border-radius: 6px;
    background: var(--ad-blanco);
}

.rail-regalo__name[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--ad-negro);
    line-height: 20px;
    overflow-wrap: anywhere;
}

/* REGALO — check verde (umbral alcanzado) + condición de compra + progreso "te faltan X" */
.rail-regalo__check[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ad-primario);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.rail-regalo__cond[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(12px, 0.95vw, 13px);
    font-weight: 600;
    color: var(--ad-negro);
    margin: 6px 0 0 0;
    line-height: 18px;
}

.rail-regalo__progress[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(12px, 0.95vw, 13px);
    font-weight: 600;
    color: var(--ad-gris-60);
    margin: 4px 0 0 0;
    line-height: 18px;
}

.rail-regalo__progress--ok[b-mkz7nc7p1i] {
    color: var(--ad-primario);
}

/* Heart/Favorite */
.product-badges .favorite-icon[b-mkz7nc7p1i] {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--ad-gris-60);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.product-badges .favorite-icon:hover[b-mkz7nc7p1i] {
    transform: scale(1.15);
    color: var(--ad-oferta-60);
}

.product-badges .favorite-icon.text-danger[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60) !important;
}

.product-badges .favorite-icon.text-muted[b-mkz7nc7p1i] {
    color: var(--ad-gris-60) !important;
}

.product-badges .favorite-icon:focus[b-mkz7nc7p1i] {
    outline: none;
    box-shadow: none !important;
}

.product-badges .spinner-border-sm[b-mkz7nc7p1i] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* --- Product title (h1) --- */
/* Clase propia (ad-*) para NO heredar la regla global .product-title de master.css
   (cursor pointer + subrayado verde tipo enlace), que es legado de la card antigua. */
.ad-product-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(20px, 2vw, 22px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ad-negro);
    margin: 0;
    padding: 0;
    letter-spacing: 0;
}

/* --- Description --- */
.product-description[b-mkz7nc7p1i] {
    margin: 0;
    padding: 0;
}

.product-description p[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--ad-gris-60);
    margin: 0;
}

/* --- Price row ---
   Sin borde inferior por defecto: solo lo lleva cuando Oferta Valida
   renderiza justo despues (product-price--with-offer), para no dejar una
   linea suelta cuando Precio es el ultimo elemento del bloque superior */
.product-price[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 16px);
    padding: clamp(6px, 1vw, 10px) 0 clamp(12px, 1.5vw, 18px);
    flex-wrap: wrap;
}

.product-price--with-offer[b-mkz7nc7p1i] {
    border-bottom: 1px solid var(--ad-gris-30);
}

.product-price-values[b-mkz7nc7p1i] {
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1vw, 12px);
}

.current-price[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    color: var(--ad-negro);
    line-height: 1;
    margin: 0;
}

.current-price--offer[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60);
}

.original-price[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--ad-gris-50);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1;
}

/* Brand badge — text fallback (Lenovo-style red) */
.product-brand-badge[b-mkz7nc7p1i] {
    background-color: var(--ad-oferta-50);
    color: var(--ad-blanco);
    font-family: var(--ad-font);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0.3px;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

a.product-brand-badge:hover[b-mkz7nc7p1i] {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Brand badge — image variant (uses real brand logo PNG) */
.product-brand-badge--image[b-mkz7nc7p1i] {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    height: clamp(28px, 3vw, 40px);
    max-width: clamp(90px, 12vw, 140px);
}

.product-brand-badge--image img[b-mkz7nc7p1i] {
    display: block;
    height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Brand badge — skeleton mientras se resuelve la marca */
.product-brand-badge--skeleton[b-mkz7nc7p1i] {
    display: inline-block;
    background-color: var(--ad-gris-20);
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    height: clamp(28px, 3vw, 40px);
    width: clamp(90px, 12vw, 140px);
    position: relative;
    overflow: hidden;
    line-height: 0;
    color: transparent;
}

.product-brand-badge--skeleton[b-mkz7nc7p1i]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: brand-badge-shimmer-b-mkz7nc7p1i 1.2s ease-in-out infinite;
}

@keyframes brand-badge-shimmer-b-mkz7nc7p1i {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Respeta preferencia de usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .product-brand-badge--skeleton[b-mkz7nc7p1i]::after {
        animation: none;
        opacity: 0.3;
    }
}

/* --- Offer validity message ---
   Sin borde inferior: siempre es el ultimo elemento del bloque superior
   (Precio + Oferta Valida), no necesita separador contra el hueco de abajo */
.offer-valid-message[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    color: var(--ad-oferta-60);
    margin: 0;
    padding: 15px 0;
    letter-spacing: 0;
}

/* --- Variants (Color) ---
   Sin border-bottom: la línea inferior la pone .recommended-unit-row
   (border-top); con ambas se duplicaba el separador */
.product-variants[b-mkz7nc7p1i] {
    padding: clamp(8px, 1.2vw, 14px) 0;
}

.variants-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 600;
    color: var(--ad-negro);
    margin: 0 0 clamp(10px, 1.2vw, 14px);
    letter-spacing: 0.1px;
}

.variants-options[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 12px);
    align-items: center;
}

.variant-image[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ad-gris-10);
    border-radius: 14px;
    padding: 4px;
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    overflow: hidden;
    box-sizing: border-box;
}

.variant-image img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    pointer-events: none;
}

.variant-image:hover[b-mkz7nc7p1i] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-color: var(--ad-gris-30);
}

.variant-image.variant-active[b-mkz7nc7p1i] {
    background: var(--ad-blanco);
    border-color: var(--ad-negro);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: default;
}

/* --- Recommended unit row (right-aligned above buttons) --- */
.recommended-unit-row[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.5vw, 18px);
    border-top: 1px solid var(--ad-gris-30);
    border-bottom: 1px solid var(--ad-gris-30);
    padding: clamp(10px, 1.5vw, 16px) 0;
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

.recommended-unit-label[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 400;
    color: var(--ad-gris-60);
    letter-spacing: 0.25px;
}

.recommended-unit-value[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 700;
    color: var(--ad-negro);
    letter-spacing: 0;
    background: var(--ad-gris-10);
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 34px;
    text-align: center;
}

/* --- Actions (buttons) --- */
.product-actions[b-mkz7nc7p1i] {
    margin: 0;
}

/* Fila de compra: stepper + total + COMPRAR (Figma "Producto nova") */
.purchase-row[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(12px, 1.5vw, 24px);
    width: 100%;
    border-bottom: 1px solid var(--ad-gris-30);
    padding-bottom: clamp(10px, 2vw, 24px);
}

/* Selector de cantidad — mismo patrón compartido que Cesta/EditarPedido
   (.cantidad-control + .btn-menos/.btn-mas + InputNumero.cantidad-input) */
.cantidad-control[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.50vw, 8px);
    background-color: var(--ad-gris-10);
    border-radius: 8px;
    padding: 0 clamp(6px, 0.6vw, 12px);
    height: clamp(42px, 5vw, 52px);
    flex-shrink: 0;
}

.btn-menos[b-mkz7nc7p1i],
.btn-mas[b-mkz7nc7p1i] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.btn-menos:disabled[b-mkz7nc7p1i],
.btn-mas:disabled[b-mkz7nc7p1i] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-menos img[b-mkz7nc7p1i],
.btn-mas img[b-mkz7nc7p1i] {
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
}

.purchase-row[b-mkz7nc7p1i]  .cantidad-input {
    width: clamp(30px, 2.6vw, 50px);
    text-align: center;
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--ad-negro);
    appearance: textfield;
    -moz-appearance: textfield;
}

.purchase-row[b-mkz7nc7p1i]  .cantidad-input:focus {
    outline: none;
}

.purchase-total[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    color: var(--ad-negro);
    white-space: nowrap;
    flex-shrink: 0;
}

.purchase-buttons[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(12px, 1.5vw, 24px);
    flex: 1 1 0;
    min-width: 0;
}

.purchase-buttons .btn-buy-now[b-mkz7nc7p1i] {
    flex: 1;
}

/* AÑADIR inline: solo visible cuando el rail pasa abajo (≤1200px) */
.purchase-buttons .btn-add-to-cart--inline[b-mkz7nc7p1i] {
    display: none;
}

/* COMPRAR con el MISMO ancho que AÑADIR: 46% = ratio col-rail/col-centro del
   grid (0.46fr / 1fr). Debe declararse DESPUÉS de la base .purchase-buttons */
@media (min-width: 1401px) {
    /* Una sola línea SIEMPRE: nada de wrap; si el total crece (cantidades
       altas), COMPRAR cede ancho de forma controlada en vez de descolgarse */
    .purchase-row[b-mkz7nc7p1i] {
        flex-wrap: nowrap;
        gap: clamp(10px, 1.2vw, 20px);
    }

    .purchase-buttons[b-mkz7nc7p1i] {
        flex: 0 1 46%;
        min-width: 150px;
        margin-left: auto;
    }
}

/* AÑADIR — green solid */
.btn-add-to-cart[b-mkz7nc7p1i] {
    background-color: var(--ad-primario);
    color: var(--ad-blanco);
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    padding: clamp(10px, 1.4vw, 10px) clamp(16px, 2vw, 24px);
    border: 2px solid var(--ad-primario);
    border-radius: 6px;
    flex: 1;
    min-height: clamp(42px, 5vw, 52px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-add-to-cart:hover:not(:disabled)[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-dark);
    border-color: var(--ad-primario-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(60, 170, 54, 0.32);
    color: var(--ad-blanco);
}

.btn-add-to-cart[b-mkz7nc7p1i]  svg {
    width: clamp(14px, 1.2vw, 16px);
    height: clamp(14px, 1.2vw, 16px);
}

.btn-add-to-cart:disabled[b-mkz7nc7p1i] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* COMPRAR — white outline */
.btn-buy-now[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-primario);
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    padding: clamp(10px, 1.4vw, 10px) clamp(16px, 2vw, 24px);
    border: 1px solid var(--ad-primario);
    border-radius: 6px;
    flex: 1;
    min-height: clamp(42px, 5vw, 52px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-buy-now:hover:not(:disabled)[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-10);
    color: var(--ad-primario-dark);
    border-color: var(--ad-primario-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 170, 54, 0.2);
}

.btn-buy-now:disabled[b-mkz7nc7p1i] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Footer info row: stock + rating --- */
.product-footer-info[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(10px, 1.5vw, 20px);
    padding-top: clamp(10px, 2vw, 24px);
}

.product-stock[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

.stock-indicator[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ad-font);
    font-size: clamp(12px, 1vw, 14px);
    color: var(--ad-negro);
    font-weight: 400;
    letter-spacing: 0.25px;
}

.stock-dot-indicator[b-mkz7nc7p1i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ad-primario);
    display: inline-block;
    flex-shrink: 0;
}

.stock-indicator--out .bi[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60);
    font-size: 14px;
}

.stock-indicator--consult .bi[b-mkz7nc7p1i] {
    color: var(--ad-alternativo);
    font-size: 14px;
}

/* Disponibilidad personalizada (p. ej. "Plazo entrega 3 días"): icono informativo positivo
   (reloj), NUNCA el aspa roja de "sin stock". */
.stock-indicator--custom .bi[b-mkz7nc7p1i] {
    color: var(--ad-primario);
    font-size: 14px;
}

.product-stock span[b-mkz7nc7p1i] {
    font-weight: 400;
    color: var(--ad-negro);
    font-family: var(--ad-font);
}


/* =========================================================
   OFFER COUNTDOWN (preserved)
   ========================================================= */
.offer-countdown[b-mkz7nc7p1i] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.offer-countdown p[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 600;
    color: var(--ad-negro);
    margin-bottom: 1rem;
}

.countdown-timer[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(8px, 1.5vw, 20px);
    margin-top: 1rem;
    justify-content: flex-start;
}

.countdown-block[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(48px, 5vw, 60px);
    background: var(--ad-gris-10);
    border-radius: 8px;
    padding: clamp(8px, 1vw, 12px) 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.countdown-value[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    color: var(--ad-negro);
    line-height: 1;
}

.countdown-label[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(9px, 0.8vw, 11px);
    margin-top: 6px;
    color: var(--ad-gris-60);
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================================
   TABS WRAPPER — tabs + help button side by side
   Figma: 1920w, paddings 58/115/40/115, gap 98px between tabs (1000px) and button (592px)
   Ratio 1000 : 98 : 592 preserved proporcionalmente con clamp()
   ========================================================= */
.product-tabs-wrapper[b-mkz7nc7p1i] {
    display: grid;
    /* 1000fr : 592fr = proporción Figma; gap 98px en diseño, fluido con clamp */
    grid-template-columns: minmax(0, 1000fr) minmax(0, 592fr);
    gap: clamp(24px, 5.1vw, 98px);
    /* Figma: 58px padding-top del contenedor inferior (separación respecto al producto) */
    margin-top: clamp(32px, 3vw, 58px);
    /* Figma: 40px padding-bottom */
    margin-bottom: clamp(24px, 2vw, 40px);
    max-width: var(--ad-max-w);
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}

.product-tabs[b-mkz7nc7p1i] {
    padding: 0;
    min-width: 0;
    /* Figma: inferior producto → 68px alto (línea top + 28px texto + línea bottom) */
}

.tabs-header[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    /* Figma: 20px arriba + 28px línea + 20px abajo = 68px */
    gap: 20px;
    width: 100%;
}

.tabs-header-line[b-mkz7nc7p1i] {
    width: 100%;
    height: 1px;
    background-color: var(--ad-gris-30);
}

.tabs-nav[b-mkz7nc7p1i] {
    display: flex;
    /* Figma: gap-70 entre tabs */
    gap: clamp(24px, 4.5vw, 70px);
    align-items: center;
    flex-wrap: wrap;
}

.tab-btn[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    /* Figma: title/large → Nunito Sans Regular 22/28 */
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    line-height: 28px;
    color: var(--ad-negro);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease, font-weight 0.2s ease;
    position: relative;
    letter-spacing: 0;
}

.tab-btn:hover[b-mkz7nc7p1i] {
    opacity: 0.75;
}

.tab-btn.active[b-mkz7nc7p1i] {
    font-weight: 700;
}

.tab-btn.active[b-mkz7nc7p1i]::after {
    content: "";
    position: absolute;
    /* línea exactamente sobre la horizontal inferior (20px gap) */
    bottom: -21px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--ad-negro);
}

.tabs-content[b-mkz7nc7p1i] {
    padding-top: clamp(20px, 2.5vw, 32px);
}

/* Help button (right side of tabs) — yellow outline, Figma: 592×52 */
.help-button-container[b-mkz7nc7p1i] {
    display: flex;
    justify-content: stretch;
    align-items: flex-start;
    /* Alineado con la línea superior de los tabs (no con el texto) */
    padding-top: 0;
}

.help-button[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    /* Figma: border 1px solid #ECC61B (alternativo-oscuro) */
    border: 1px solid var(--ad-alternativo-oscuro);
    /* Figma: border-radius 6px */
    border-radius: 6px;
    /* Figma: padding 10px 24px */
    padding: 10px 24px;
    /* Figma: altura fija 52px */
    height: clamp(44px, 3.5vw, 52px);
    width: 100%;
    /* Figma: ancho 592px (ya limitado por grid column) */
    max-width: 592px;
    font-family: var(--ad-font);
    /* Figma: title/medium → Nunito Sans SemiBold 16/24 letter-spacing 0.15 */
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.help-button:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-alternativo);
    color: var(--ad-negro);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 214, 35, 0.3);
}

/* =========================================================
   SPECS TABLE
   ========================================================= */
.specs-table[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--ad-negro);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    line-height: 20px;
}

.spec-row[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(16px, 4vw, 75px);
    align-items: flex-start;
    padding: clamp(10px, 1.3vw, 15px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
}

.spec-row:last-child[b-mkz7nc7p1i] {
    border-bottom: none;
}

.spec-name[b-mkz7nc7p1i] {
    font-weight: 600;
    letter-spacing: 0.1px;
    min-width: clamp(120px, 15vw, 200px);
    flex-shrink: 0;
}

.spec-value[b-mkz7nc7p1i] {
    font-weight: 400;
    letter-spacing: 0.25px;
}

/* =========================================================
   1WORLDSYNC MANUFACTURER CONTENT
   ========================================================= */
.manufacturer-content-section[b-mkz7nc7p1i] {
    max-width: var(--ad-max-w);
    margin: clamp(32px, 3vw, 58px) auto 0;
}

/* Contenido web de la ficha (Fase L8c): texto propio de la web encima de lo que
   viene del ERP. Se alinea con el bloque de contenido del fabricante para que los
   dos lean como la misma columna. */
.articulo-contenido-web[b-mkz7nc7p1i] {
    max-width: var(--ad-max-w);
    margin: clamp(32px, 3vw, 58px) auto 0;
}

.articulo-contenido-web-titulo[b-mkz7nc7p1i] {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
    margin: 0 0 12px;
}

.articulo-contenido-web-texto[b-mkz7nc7p1i] {
    line-height: 1.6;
}

.articulo-contenido-web-texto p:last-child[b-mkz7nc7p1i] {
    margin-bottom: 0;
}

/* Fila del botón de ayuda (sustituye al antiguo wrapper de tabs)
   Margen amplio: no debe asomar en el primer viewport al cargar */
.help-button-row[b-mkz7nc7p1i] {
    display: flex;
    justify-content: center;
    max-width: var(--ad-max-w);
    margin: clamp(60px, 6vw, 110px) auto 0;
}

.help-button-row .help-button[b-mkz7nc7p1i] {
    width: 100%;
    max-width: clamp(300px, 40vw, 592px);
}

.ows-separator[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
}

.ows-separator[b-mkz7nc7p1i]::before,
.ows-separator[b-mkz7nc7p1i]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--ad-gris-30);
}

.ows-separator-text[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    color: var(--ad-gris-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* =========================================================
   DOCS GRID
   ========================================================= */
.docs-grid[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 50px);
    align-items: flex-start;
    padding: 20px 0;
}

.doc-card[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(12px, 1.5vw, 30px);
    align-items: center;
    text-decoration: none;
    color: var(--ad-negro);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.doc-card:hover[b-mkz7nc7p1i] {
    opacity: 0.8;
    transform: translateY(-2px);
    color: var(--ad-negro);
}

.doc-card--loading[b-mkz7nc7p1i] {
    opacity: 0.5;
    pointer-events: none;
}

.doc-card-icon[b-mkz7nc7p1i] {
    width: clamp(48px, 6vw, 81px);
    height: clamp(64px, 8vw, 113px);
    flex-shrink: 0;
}

.doc-card-icon svg[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
}

.doc-card-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ad-negro);
    white-space: nowrap;
}

/* =========================================================
   RELATED PRODUCTS (Home body 3) — ORIGINAL (preserved)
   ========================================================= */
:root[b-mkz7nc7p1i] {
    --negro: rgba(33, 33, 33, 1);
    --blanco: rgba(255, 255, 255, 1);
    --primario: rgba(60, 170, 54, 1);
    --secundario: rgba(107, 152, 156, 1);
    --terciario: rgba(133, 149, 126, 1);
    --alternativo: rgba(253, 214, 35, 1);
    --alternativo-oscuro: rgba(236, 198, 27, 1);
    --gris-10: rgba(245, 245, 245, 1);
    --gris-20: rgba(238, 238, 238, 1);
    --gris-30: rgba(224, 224, 224, 1);
    --gris-40: rgba(189, 189, 189, 1);
    --gris-50: rgba(158, 158, 158, 1);
    --gris-60: rgba(117, 117, 117, 1);
    --oferta-50: rgba(255, 84, 73, 1);
    --oferta-60: rgba(222, 55, 48, 1);
    --dark-green-buttons: rgba(58, 79, 57, 1);
    --black-fonts-headings: rgba(45, 46, 46, 1);
}

.home-body-3[b-mkz7nc7p1i] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --primary-10: #EBF6EB;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    padding: 60px var(--padding-lateral) 80px;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    margin-top: 3rem;
}

.frame-5[b-mkz7nc7p1i] {
    position: relative;
    width: 503px;
    height: 75px;
}

.title_relacionados[b-mkz7nc7p1i] {
    position: absolute;
    top: -1px;
    left: 8%;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
}

.vector-3[b-mkz7nc7p1i] {
    position: absolute;
    width: 504px;
    height: 1px;
    top: 74px;
    left: 0;
    object-fit: cover;
}

.frame-6[b-mkz7nc7p1i] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 0px;
    position: relative;
    margin-top: 50px;
}

.flechas-sliders[b-mkz7nc7p1i] {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin: 1%;
}

.flechas-sliders:hover[b-mkz7nc7p1i] {
    transform: scale(1.1);
}

.frame-7[b-mkz7nc7p1i] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.card-producto[b-mkz7nc7p1i],
.card-producto-2[b-mkz7nc7p1i],
.card-producto-3[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 0px 0px 10px 20px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -1.00px;
    margin-bottom: -1.00px;
    border-left-width: 1px;
    border-left-style: solid;
    border-color: var(--gris-30);
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.card-producto:hover[b-mkz7nc7p1i],
.card-producto-2:hover[b-mkz7nc7p1i],
.card-producto-3:hover[b-mkz7nc7p1i] {
    transform: translateY(-5px);
}

.card-producto[b-mkz7nc7p1i] {
    margin-left: -1.00px;
}

.card-producto-3[b-mkz7nc7p1i] {
    margin-right: -1.00px;
}

.frame-wrapper[b-mkz7nc7p1i],
.frame-9[b-mkz7nc7p1i],
.frame-10[b-mkz7nc7p1i],
.frame-11[b-mkz7nc7p1i],
.frame-12[b-mkz7nc7p1i] {
    position: relative;
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 8px;
    overflow: hidden;
}

.frame-8[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    top: 20px;
    left: 20px;
}

.grupo[b-mkz7nc7p1i],
.grupo-2[b-mkz7nc7p1i],
.grupo-3[b-mkz7nc7p1i],
.grupo-4[b-mkz7nc7p1i],
.grupo-5[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.grupo[b-mkz7nc7p1i] { background-color: var(--oferta-50); }
.grupo-2[b-mkz7nc7p1i] { background-color: #fdd623; }
.grupo-3[b-mkz7nc7p1i] { background-color: #ffffff; }
.grupo-4[b-mkz7nc7p1i] { background-color: #686aad; }
.grupo-5[b-mkz7nc7p1i] { background-color: #52b0ad; }

.new-wrapper[b-mkz7nc7p1i] {
    background-color: var(--primario);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.new[b-mkz7nc7p1i],
.new-2[b-mkz7nc7p1i],
.new-3[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.new[b-mkz7nc7p1i] { color: var(--negro); }
.new-2[b-mkz7nc7p1i] { color: #141414; }
.new-3[b-mkz7nc7p1i] { color: var(--negro); }

.pack-info-text[b-mkz7nc7p1i] {
    display: flex;
    width: 300px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0px 20px;
    position: relative;
    flex: 0 0 auto;
}

.info-producto[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    flex: 0 0 auto;
    max-width: 75%;
}

.redondas[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    flex: 0 0 auto;
}

.redonda[b-mkz7nc7p1i],
.ellipse-wrapper[b-mkz7nc7p1i] {
    position: relative;
    width: 23px;
    height: 23px;
}

.redonda[b-mkz7nc7p1i] {
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.redonda:hover[b-mkz7nc7p1i] { transform: scale(1.1); }

.redonda-negra[b-mkz7nc7p1i] {
    background-color: #010101;
    border: 1px dashed #000000;
}

.redonda-blanca[b-mkz7nc7p1i] {
    background-color: #ffffff;
    border: 1px solid var(--gris-60);
}

.redonda-amarilla[b-mkz7nc7p1i] { background-color: #ffd600; }
.redonda-azul[b-mkz7nc7p1i]    { background-color: #3a37bd; }

.ellipse[b-mkz7nc7p1i],
.ellipse-2[b-mkz7nc7p1i],
.ellipse-3[b-mkz7nc7p1i],
.ellipse-4[b-mkz7nc7p1i] {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 7.5px;
}

.ellipse[b-mkz7nc7p1i] { top: 3px; left: 3px; background-color: #010101; }
.ellipse-2[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #ffffff; border: 1px solid; border-color: var(--gris-60); }
.ellipse-3[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #ffd600; }
.ellipse-4[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #3a37bd; }

.div-wrapper[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px;
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-3[b-mkz7nc7p1i] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.text-wrapper-4[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--negro);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.text-wrapper-5[b-mkz7nc7p1i] {
    position: relative;
    align-self: stretch;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 400;
    color: var(--negro);
    font-size: 16px;
    letter-spacing: 0px;
    line-height: normal;
}

.price[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 400;
    color: var(--gris-50);
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--negro);
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-mkz7nc7p1i] {
    width: 65px;
    height: 65px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid;
    border-color: var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
}

.boton:hover[b-mkz7nc7p1i] { background-color: var(--primario); }
.boton:hover .iconos-2[b-mkz7nc7p1i] { filter: brightness(0) invert(1); }

.iconos-2[b-mkz7nc7p1i] {
    position: absolute;
    width: 23px;
    height: 24px;
    top: 19px;
    left: 20px;
    transition: all 0.3s ease;
}

.loader-container[b-mkz7nc7p1i] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
}

#relatedProductCarousel[b-mkz7nc7p1i] {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    flex: 1;
}

#relatedProductCarousel[b-mkz7nc7p1i]::-webkit-scrollbar { display: none; }

.carousel-container[b-mkz7nc7p1i] {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.carousel-container[b-mkz7nc7p1i]::-webkit-scrollbar { display: none; }

.carousel-track[b-mkz7nc7p1i] {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    width: max-content;
}

@keyframes addedToCart-b-mkz7nc7p1i {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.boton.added[b-mkz7nc7p1i] {
    animation: addedToCart-b-mkz7nc7p1i 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-mkz7nc7p1i] {
    filter: brightness(0) invert(1);
}

.grupo-oferta[b-mkz7nc7p1i] { background-color: var(--oferta-50); }
.grupo-eco[b-mkz7nc7p1i] { background-color: var(--primario); }

.badge-text[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: var(--blanco);
    white-space: nowrap;
}

.grupo-stock[b-mkz7nc7p1i] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    width: 59px;
    justify-content: flex-end;
}

.stock-dot[b-mkz7nc7p1i] {
    width: 9px;
    height: 9px;
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

.colors-more[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.no-products-msg[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    color: var(--gris-50);
    text-align: center;
    padding: 40px;
}

.carousel-btn[b-mkz7nc7p1i] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.carousel-btn:hover[b-mkz7nc7p1i] { transform: scale(1.1); }
.carousel-btn:first-child img[b-mkz7nc7p1i] { transform: scaleX(-1); }

.img-4[b-mkz7nc7p1i] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.product-image-wrapper[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    position: relative;
}

/* Responsive related products */
@media (max-width: 1600px) {
    .frame-7[b-mkz7nc7p1i] {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .card-producto[b-mkz7nc7p1i],
    .card-producto-2[b-mkz7nc7p1i],
    .card-producto-3[b-mkz7nc7p1i] {
        border: 1px solid var(--gris-30);
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .home-body-3[b-mkz7nc7p1i] {
        --padding-lateral: 16px;
        padding: 20px var(--padding-lateral);
    }

    .text-wrapper-3[b-mkz7nc7p1i] {
        font-size: 30px;
    }

    .frame-wrapper[b-mkz7nc7p1i],
    .frame-9[b-mkz7nc7p1i],
    .frame-10[b-mkz7nc7p1i],
    .frame-11[b-mkz7nc7p1i],
    .frame-12[b-mkz7nc7p1i] {
        width: 250px;
        height: 250px;
    }

    .pack-info-text[b-mkz7nc7p1i] {
        width: 250px;
    }
}

/* Más Información button */
.boton-mas-info[b-mkz7nc7p1i],
.boton-consultar[b-mkz7nc7p1i] {
    width: 100%;
    max-width: clamp(220px, 25vw, 320px);
    height: clamp(42px, 5vw, 52px);
    padding: 10px 24px;
    background-color: var(--ad-blanco);
    border: 2px solid var(--ad-primario);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-mas-info span[b-mkz7nc7p1i],
.boton-consultar span[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.5;
    color: var(--ad-primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
    transition: color 0.3s ease;
}

.boton-mas-info:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-10);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 170, 54, 0.2);
}

/* "Consultar precio": hover igual que el boton de carrito de la card,
relleno verde + texto blanco + la misma sombra, sin desplazamiento. */
.boton-consultar:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-primario);
    box-shadow: 0px 2px 4px 0px #00000040;
}

.boton-consultar:hover span[b-mkz7nc7p1i] {
    color: var(--ad-blanco);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Desktop pequeño / tablet horizontal: el rail pasa debajo
   de las dos columnas principales y AÑADIR vuelve a la fila de compra */
@media (max-width: 1400px) {
    .articulo-detalle-row[b-mkz7nc7p1i] {
        grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr);
    }

    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        grid-column: 1 / -1;
        grid-row: 2;
        height: auto;
        margin-top: clamp(16px, 2vw, 32px);
    }

    .rail-add-container[b-mkz7nc7p1i] {
        display: none;
    }

    .purchase-buttons .btn-add-to-cart--inline[b-mkz7nc7p1i] {
        display: inline-flex;
    }
}

/* Tablet: collapse columns into stacked */
@media (max-width: 992px) {
    .articulo-detalle-row[b-mkz7nc7p1i] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .articulo-detalle-row[b-mkz7nc7p1i]::before {
        display: none;
    }

    .articulo-detalle-col-left[b-mkz7nc7p1i],
    .articulo-detalle-col-right[b-mkz7nc7p1i] {
        grid-column: 1;
    }

    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        grid-column: 1;
        grid-row: auto;
    }

    .help-button-row[b-mkz7nc7p1i] {
        justify-content: flex-start;
        padding-top: 16px;
    }

    .help-button-row .help-button[b-mkz7nc7p1i] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .product-main-image-large[b-mkz7nc7p1i] {
        height: min(90vw, 400px);
    }

    .purchase-row[b-mkz7nc7p1i] {
        gap: 14px;
    }

    .purchase-total[b-mkz7nc7p1i] {
        margin-left: auto;
    }

    .purchase-buttons[b-mkz7nc7p1i] {
        flex-direction: column;
        flex-basis: 100%;
        gap: 10px;
    }

    .btn-add-to-cart[b-mkz7nc7p1i],
    .btn-buy-now[b-mkz7nc7p1i] {
        width: 100%;
    }

    .product-footer-info[b-mkz7nc7p1i] {
        align-items: flex-start;
        flex-direction: column;
    }

    .recommended-unit-row[b-mkz7nc7p1i] {
        justify-content: flex-start;
    }

    .tabs-nav[b-mkz7nc7p1i] {
        gap: 24px;
    }
}

@media (max-width: 576px) {
    .product-badges .badge[b-mkz7nc7p1i] {
        font-size: 10px;
        padding: 4px 7px;
    }

    .docs-grid[b-mkz7nc7p1i] {
        flex-direction: column;
        gap: 20px;
    }

    .doc-card[b-mkz7nc7p1i] {
        gap: 14px;
    }

    .doc-card-title[b-mkz7nc7p1i] {
        font-size: 14px;
        white-space: normal;
    }

    .spec-row[b-mkz7nc7p1i] {
        flex-direction: column;
        gap: 4px;
    }

    .spec-name[b-mkz7nc7p1i] {
        min-width: unset;
    }
}

/* Color variants images override (for image-style variants from agrupacion) */
.variant-color img[b-mkz7nc7p1i],
.variant-text img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Row — reset bootstrap stray */
.row[b-mkz7nc7p1i] {
    align-items: flex-start;
}

.col-md-6[b-mkz7nc7p1i] {
    padding: 0;
}
/* /Components/Pages/AvisoLegal.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.aviso-legal-page[b-zk25lshdic] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;

    /* Paddings */
    --padding-horizontal: 115px;
    --padding-bottom: 100px;

    /* Spacing */
    --gap-sections: 60px;
    --gap-title-content: 40px;
    --gap-page-top: 30px;

    /* Typography */
    --font-headline: clamp(22px, 1.67vw, 32px);
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-body: clamp(12px, 0.73vw, 14px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--padding-horizontal) var(--padding-bottom);
    position: relative;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.aviso-legal-page .al-container[b-zk25lshdic] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-page-top);
    width: 100%;
}

/* ============================================= */
/* HEADER - TÍTULO Y BOTÓN VOLVER */
/* ============================================= */
.aviso-legal-page .al-header[b-zk25lshdic] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.aviso-legal-page .al-title[b-zk25lshdic] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    line-height: normal;
    margin: 0;
}

.aviso-legal-page .al-back-arrow[b-zk25lshdic] {
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* ============================================= */
/* CONTENIDO */
/* ============================================= */
.aviso-legal-page .al-content[b-zk25lshdic] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sections);
    width: 100%;
}

.aviso-legal-page .al-section[b-zk25lshdic] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-title-content);
    width: 100%;
}

/* Título principal H1 */
.aviso-legal-page .al-main-heading[b-zk25lshdic] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline);
    color: var(--negro);
    line-height: 1.25;
    margin: 0;
}

/* Subtítulos H2 */
.aviso-legal-page .al-section-title[b-zk25lshdic] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0.15px;
    line-height: 1.5;
    margin: 0;
}

/* Texto del cuerpo */
.aviso-legal-page .al-text[b-zk25lshdic] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    letter-spacing: 0.25px;
    line-height: 1.43;
    margin: 0;
    white-space: pre-wrap;
}

/* Enlace inline (Política de privacidad) */
.aviso-legal-page .al-text a[b-zk25lshdic] {
    color: var(--negro);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

.aviso-legal-page .al-text a:hover[b-zk25lshdic] {
    color: #3CAA36;
    background-size: 100% 2px;
    opacity: 1;
}

/* ============================================= */
/* RESPONSIVE */
/* ============================================= */
@media (max-width: 768px) {
    .aviso-legal-page[b-zk25lshdic] {
        padding: 0 16px 50px;
    }

    .aviso-legal-page .al-section[b-zk25lshdic] {
        gap: 20px;
    }

    .aviso-legal-page .al-content[b-zk25lshdic] {
        gap: 30px;
    }
}
/* /Components/Pages/CanalEtico.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.canal-etico-page[b-0tcrtw6m1x] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --terciario: #85957E;
    --gris-40: #BDBDBD;
    --black-fonts-headings: #2D2E2E;

    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-md: clamp(20px, 2.08vw, 40px);
    --gap-lg: clamp(30px, 3.13vw, 60px);
    --gap-xl: clamp(50px, 5.21vw, 100px);

    /* Tamaños de tarjetas */
    --card-section-gap: 40px;
    --card-border-radius: clamp(10px, 0.78vw, 15px);

    /* Tipografía fluida */
    --font-heading-xl: clamp(22px, 1.67vw, 32px);
    --font-heading-lg: clamp(16px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-body-sm: clamp(11px, 0.73vw, 14px);
    --font-title: clamp(14px, 0.83vw, 16px);

    /* Botón */
    --button-height: clamp(48px, 2.81vw, 54px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.ce-container[b-0tcrtw6m1x] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.05vw, 30px);
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.ce-header[b-0tcrtw6m1x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.ce-titulo[b-0tcrtw6m1x] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.ce-titulo-text[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.ce-back-arrow[b-0tcrtw6m1x] {
    position: absolute;
    left: 0;
    top: 19px;
    width: 24px;
    height: 24px;
}

.ce-back-arrow img[b-0tcrtw6m1x] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* CONTENIDO PRINCIPAL */
/* ============================================= */
.ce-content[b-0tcrtw6m1x] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
}

/* ============================================= */
/* INTRO */
/* ============================================= */
.ce-intro[b-0tcrtw6m1x] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.ce-main-heading[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-xl);
    color: var(--negro);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

.ce-intro-text[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-sm);
    color: var(--negro);
    line-height: 1.43;
    letter-spacing: 0.25px;
    margin: 0;
    padding-bottom: 20px;
}

.ce-link[b-0tcrtw6m1x] {
    color: var(--primario);
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.ce-link:hover[b-0tcrtw6m1x] {
    opacity: 0.8;
}

/* ============================================= */
/* SECCIÓN PRINCIPAL (TARJETAS + IMAGEN) */
/* ============================================= */
.ce-main-section[b-0tcrtw6m1x] {
    display: flex;
    gap: var(--gap-xl);
    width: 100%;
}

/* Columna izquierda */
.ce-left-section[b-0tcrtw6m1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Grid de tarjetas */
.ce-cards-grid[b-0tcrtw6m1x] {
    display: flex;
    gap: var(--gap-xl);
    width: 100%;
}

/* Sub-columna derecha: tarjeta 2 + botón */
.ce-right-sub-col[b-0tcrtw6m1x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 46px;
    min-width: 0;
}

/* ============================================= */
/* TARJETAS */
/* ============================================= */
.ce-card[b-0tcrtw6m1x] {
    flex: 1;
    border: 1px solid var(--terciario);
    border-radius: var(--card-border-radius);
    background-color: var(--blanco);
    overflow: hidden;
    min-width: 0;
}

.ce-card-content[b-0tcrtw6m1x] {
    display: flex;
    flex-direction: column;
    gap: var(--card-section-gap);
    padding: 40px 45px;
}

.ce-card-header[b-0tcrtw6m1x] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--gris-40);
}

.ce-card-header-bold[b-0tcrtw6m1x] {
    border-bottom: 1px solid var(--gris-40);
}

.ce-card-heading[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-lg);
    color: var(--negro);
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

.ce-card-subheading[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ce-card-text-bold[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ce-card-body[b-0tcrtw6m1x] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.ce-card-body p[b-0tcrtw6m1x],
.ce-card-body .texto-p[b-0tcrtw6m1x] {
    margin: 0;
}

/* ============================================= */
/* COLUMNA DERECHA - IMAGEN */
/* ============================================= */
.ce-right-column[b-0tcrtw6m1x] {
    flex-shrink: 0;
    width: clamp(300px, 25.89vw, 497px);
    position: relative;
    align-self: stretch;
}

.ce-image-container[b-0tcrtw6m1x] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--card-border-radius);
    overflow: hidden;
}

.ce-image-container img[b-0tcrtw6m1x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================= */
/* BOTÓN ENVIAR */
/* ============================================= */
.ce-button[b-0tcrtw6m1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--button-height);
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: clamp(4px, 0.31vw, 6px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ce-button:hover[b-0tcrtw6m1x] {
    background-color: #2e8a2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(60, 170, 54, 0.3);
}

.ce-button:active[b-0tcrtw6m1x] {
    transform: translateY(0);
}

/* ============================================= */
/* RESPONSIVE - TABLET (≤834px) */
/* ============================================= */
@media (max-width: 834px) {
    .canal-etico-page[b-0tcrtw6m1x] {
        --padding-lateral: 30px;
        --gap-sm: 10px;
        --gap-md: 20px;
        --gap-lg: 30px;
        --gap-xl: 40px;
        --card-section-gap: 30px;
        --font-heading-xl: 24px;
        --font-heading-lg: 18px;
        --font-body: 14px;
        --font-body-sm: 13px;
        --font-title: 15px;
        --button-height: 50px;
    }

    .ce-main-section[b-0tcrtw6m1x] {
        flex-direction: column;
        gap: 30px;
    }

    .ce-right-column[b-0tcrtw6m1x] {
        position: relative;
        width: 100%;
        min-height: 300px;
    }

    .ce-card-content[b-0tcrtw6m1x] {
        padding: 30px 35px;
    }

    .ce-right-sub-col[b-0tcrtw6m1x] {
        gap: 30px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (≤393px) */
/* ============================================= */
@media (max-width: 393px) {
    .canal-etico-page[b-0tcrtw6m1x] {
        --padding-lateral: 16px;
        --gap-sm: 8px;
        --gap-md: 16px;
        --gap-lg: 20px;
        --gap-xl: 20px;
        --card-section-gap: 20px;
        --font-heading-xl: 20px;
        --font-heading-lg: 16px;
        --font-body: 13px;
        --font-body-sm: 12px;
        --font-title: 14px;
        --button-height: 46px;
    }

    .ce-cards-grid[b-0tcrtw6m1x] {
        flex-direction: column;
        gap: 16px;
    }

    .ce-card[b-0tcrtw6m1x] {
        border-radius: 10px;
    }

    .ce-card-content[b-0tcrtw6m1x] {
        padding: 20px;
    }

    .ce-right-sub-col[b-0tcrtw6m1x] {
        gap: 20px;
    }

    .ce-right-column[b-0tcrtw6m1x] {
        position: relative;
        min-height: 200px;
    }
}
/* /Components/Pages/CancelarCuenta.razor.rz.scp.css */
/* ============================================= */
/* CANCELAR CUENTA                               */
/* Responsive pixel-perfect from Figma 489:17634 */
/* ============================================= */
.cancelar-cuenta[b-sx7cvskxo7] {
    /* Responsive variables */
    --cc-padding-lateral: clamp(16px, 6vw, 115px);
    --cc-padding-bottom: clamp(40px, 5.2vw, 100px);
    --cc-gap-section: clamp(16px, 1.56vw, 30px);
    --cc-gap-warning: clamp(24px, 2.6vw, 50px);
    --cc-font-heading: clamp(22px, 1.67vw, 32px);
    --cc-lh-heading: clamp(28px, 2.08vw, 40px);
    --cc-font-body: clamp(14px, 0.83vw, 16px);
    --cc-lh-body: clamp(20px, 1.25vw, 24px);
    --cc-btn-height: clamp(46px, 3.07vw, 59px);
    --cc-btn-width: clamp(280px, 23vw, 442px);
    --cc-warning-width: clamp(260px, 21.35vw, 410px);

    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 0 var(--cc-padding-lateral) var(--cc-padding-bottom);
    position: relative;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME: main content wrapper                   */
/* ============================================= */
.cancelar-cuenta .frame[b-sx7cvskxo7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cc-gap-section);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TITLE BAR: "DAR DE BAJA" + back arrow         */
/* ============================================= */
.cancelar-cuenta .titulo[b-sx7cvskxo7] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.cancelar-cuenta h2[b-sx7cvskxo7] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.cancelar-cuenta .iconos[b-sx7cvskxo7] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: clamp(12px, 1.04vw, 19px);
    left: 0;
}

/* ============================================= */
/* CONTENT AREA                                  */
/* ============================================= */
.cancelar-cuenta .content-area[b-sx7cvskxo7] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-gap-section);
    align-items: center;
    width: 100%;
}

/* ============================================= */
/* HEADING: "Dar de baja la cuenta"              */
/* Nunito Sans Regular 32px/40px, left-aligned   */
/* ============================================= */
.cancelar-cuenta .heading-row[b-sx7cvskxo7] {
    display: flex;
    align-items: center;
    width: 100%;
}

.cancelar-cuenta .heading[b-sx7cvskxo7] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--cc-font-heading);
    line-height: var(--cc-lh-heading);
    letter-spacing: 0;
    margin: 0;
}

/* ============================================= */
/* WARNING BLOCK: centered text + CTA button     */
/* Container: 410px wide, gap 50px               */
/* ============================================= */
.cancelar-cuenta .warning-block[b-sx7cvskxo7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-gap-warning);
    width: var(--cc-warning-width);
    max-width: 100%;
}

.cancelar-cuenta .warning-text[b-sx7cvskxo7] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #323332;
    font-size: var(--cc-font-body);
    line-height: var(--cc-lh-body);
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

/* ============================================= */
/* WARNING CONTENT: text + textarea group         */
/* gap: 25px between text and textarea            */
/* ============================================= */
.cancelar-cuenta .warning-content[b-sx7cvskxo7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 1.3vw, 25px);
    width: 100%;
}

/* ============================================= */
/* TEXTAREA: "Escribe el motivo (opcional)"       */
/* bg: #F5F5F5, h: 136px, rounded: 6px           */
/* placeholder: #9E9E9E, Nunito Light 18px        */
/* ============================================= */
.cancelar-cuenta .motivo-input[b-sx7cvskxo7] {
    background-color: #F5F5F5;
    color: #000000;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(14px, 0.94vw, 18px);
    font-weight: 300;
    line-height: normal;
    width: 100%;
    height: clamp(100px, 7.08vw, 136px);
    padding: clamp(12px, 0.89vw, 17px) clamp(12px, 0.83vw, 16px);
    border: none;
    border-radius: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-sizing: border-box;
    resize: vertical;
}

.cancelar-cuenta .motivo-input[b-sx7cvskxo7]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.cancelar-cuenta .motivo-input:focus[b-sx7cvskxo7] {
    border: 2px solid var(--primario, #3CAA36);
    outline: none;
}

/* ============================================= */
/* CTA BUTTON: "DAR DE BAJA LA CUENTA"           */
/* 442x59, bg #3CAA36, rounded 6px               */
/* ============================================= */
.cancelar-cuenta .boton-baja[b-sx7cvskxo7] {
    display: flex;
    flex-direction: column;
    width: var(--cc-btn-width);
    max-width: 100%;
    height: var(--cc-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--primario, #3CAA36);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

    .cancelar-cuenta .boton-baja:hover[b-sx7cvskxo7] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.cancelar-cuenta .boton-baja:disabled[b-sx7cvskxo7] {
    opacity: 0.7;
    cursor: not-allowed;
}

.cancelar-cuenta .boton-baja .state-layer[b-sx7cvskxo7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(6px, 0.52vw, 10px) clamp(14px, 1.25vw, 24px);
    flex: 1;
    align-self: stretch;
    width: 100%;
}

.cancelar-cuenta .label-text[b-sx7cvskxo7] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: clamp(13px, 0.83vw, 16px);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: clamp(18px, 1.25vw, 24px);
    white-space: nowrap;
}

/* ============================================= */
/* SPINNER                                       */
/* ============================================= */
.cancelar-cuenta .spinner-border[b-sx7cvskxo7] {
    color: #ffffff;
}

/* ============================================= */
/* PAGE BLOCKER (loading overlay)                */
/* ============================================= */
.page-blocker[b-sx7cvskxo7] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-sx7cvskxo7] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* RESPONSIVE: Tablet (≤1024px)                  */
/* ============================================= */
@media (max-width: 1024px) {
    .cancelar-cuenta .warning-block[b-sx7cvskxo7] {
        width: 100%;
    }

    .cancelar-cuenta .boton-baja[b-sx7cvskxo7] {
        width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE: Mobile (≤768px)                   */
/* ============================================= */
@media (max-width: 768px) {
    .cancelar-cuenta .heading[b-sx7cvskxo7] {
        font-size: clamp(20px, 4.5vw, 26px);
        line-height: clamp(26px, 5.5vw, 34px);
    }

    .cancelar-cuenta .warning-text[b-sx7cvskxo7] {
        text-align: center;
    }
}

/* ============================================= */
/* RESPONSIVE: Small mobile (≤480px)             */
/* ============================================= */
@media (max-width: 480px) {
    .cancelar-cuenta .titulo[b-sx7cvskxo7] {
        padding: 12px 0;
    }
}
/* /Components/Pages/CatalogoPropio.razor.rz.scp.css */
.catalogo-propio[b-nz7ndsoukj] {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 75px;
    padding: 0px 115px 100px;
    position: relative;
    background-color: #ffffff;
}

.catalogo-propio .frame[b-nz7ndsoukj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
}

.catalogo-propio .titulo[b-nz7ndsoukj] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.catalogo-propio h2[b-nz7ndsoukj] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.catalogo-propio .iconos[b-nz7ndsoukj] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.catalogo-propio .div[b-nz7ndsoukj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
}

.catalogo-propio .frame-2[b-nz7ndsoukj] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 30px;
    align-self: stretch;
    flex: 0 0 auto;
    position: relative;
}

.catalogo-propio .frame-3[b-nz7ndsoukj] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 30px;
    align-self: stretch;
    flex: 0 0 auto;
    position: relative;
}

.catalogo-propio .frame-4[b-nz7ndsoukj] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 30px;
    align-self: stretch;
    flex: 0 0 auto;
    position: relative;
}

.catalogo-propio .text-wrapper[b-nz7ndsoukj] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.catalogo-propio .component[b-nz7ndsoukj] {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    position: relative;
    flex: 0 0 auto;
}

.catalogo-propio .line[b-nz7ndsoukj] {
    position: relative;
    width: 277px;
    height: 1px;
    object-fit: cover;
    margin-top: 30px;
}

.catalogo-propio .frame-wrapper[b-nz7ndsoukj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.catalogo-propio .frame-wrapper img[b-nz7ndsoukj] {
    rotate: 90deg;
}

.catalogo-propio .input-buscar-producto[b-nz7ndsoukj] {
    position: absolute;
    top: 0px;
    border: none;
    color: #2D2E2E;
    text-align: left;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.25px;
    width: 277px;
}

.catalogo-propio .boton[b-nz7ndsoukj] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.catalogo-propio .boton:hover[b-nz7ndsoukj] {
    background-color: #80C87C;
}

.catalogo-propio .state-layer[b-nz7ndsoukj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.catalogo-propio .label-text[b-nz7ndsoukj] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.catalogo-propio .label-text-2[b-nz7ndsoukj] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.catalogo-propio .alert p[b-nz7ndsoukj] {
    margin-bottom: 0;
}

.catalogo-propio .state-layer-wrapper[b-nz7ndsoukj] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.catalogo-propio .state-layer-wrapper:hover[b-nz7ndsoukj] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.catalogo-propio .state-layer-wrapper:hover .label-text-2[b-nz7ndsoukj] {
    color: var(--blanco);
}

.catalogo-propio .tabla-wrapper[b-nz7ndsoukj] {
    padding: 15px;
    border-radius: 20px;
    width: 100%;
}

.catalogo-propio .tabla-container[b-nz7ndsoukj] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.catalogo-propio .tabla-mejorada[b-nz7ndsoukj] {
    width: 100%;
    border-collapse: separate;
    font-family: var(--body-large-font-family, sans-serif);
    font-size: 16px;
    padding: 0;
}

.catalogo-propio .tabla-mejorada tbody tr:not(:last-child) td[b-nz7ndsoukj] {
    border-bottom: 1px solid #d3d3d3;
}

.catalogo-propio .tabla-mejorada thead[b-nz7ndsoukj] {
    color: #000000;
    font-weight: bold;
    position: relative;
}

.catalogo-propio .tabla-mejorada thead[b-nz7ndsoukj]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.catalogo-propio .tabla-mejorada th[b-nz7ndsoukj],
.catalogo-propio .tabla-mejorada td[b-nz7ndsoukj] {
    padding: 10px;
    min-width: 180px;
    max-width: 180px;
    width: 180px;
    text-align: center;
}

.catalogo-propio .tabla-mejorada .th1[b-nz7ndsoukj] {
    text-align: left;
    min-width: 500px;
    width: 100%;
}

.catalogo-propio .tabla-mejorada .th3[b-nz7ndsoukj] {
    min-width: 300px;
    max-width: 300px;
}

.catalogo-propio .tabla-mejorada th .subheader[b-nz7ndsoukj] {
    font-size: 0.8em; /* Ajusta el tamaño según lo necesites */
    color: #888888; /* Color gris */
}

.catalogo-propio .tabla-mejorada .td1[b-nz7ndsoukj] {
    min-width: 500px;
    width: 100%;
}

.catalogo-propio .tabla-mejorada .td1 .td-content[b-nz7ndsoukj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.catalogo-propio .tabla-mejorada .td1 img[b-nz7ndsoukj] {
    height: 100px;
    width: 100px;
}

.catalogo-propio .tabla-mejorada .td1 .producto-info[b-nz7ndsoukj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.catalogo-propio .tabla-mejorada .td1 .descripcion[b-nz7ndsoukj] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.catalogo-propio .tabla-mejorada .td1 .referencia[b-nz7ndsoukj] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.catalogo-propio .tabla-mejorada .td3 .td-content[b-nz7ndsoukj] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.catalogo-propio .state-layer-wrapper-2[b-nz7ndsoukj] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.catalogo-propio .state-layer-wrapper-2:hover[b-nz7ndsoukj] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.catalogo-propio .state-layer-wrapper-2:hover .label-text-3[b-nz7ndsoukj] {
    color: var(--blanco);
}

.catalogo-propio .label-text-3[b-nz7ndsoukj] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.catalogo-propio[b-nz7ndsoukj]  .img {
    position: relative;
    width: 24px;
    height: 24px;
    color: #212121; /* TrashIcon (svg, stroke=currentColor) */
}

.catalogo-propio .spinner-border[b-nz7ndsoukj] {
    color: var(--blanco);
}

.page-blocker[b-nz7ndsoukj] {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-nz7ndsoukj] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}
/* /Components/Pages/Catalogos.razor.rz.scp.css */
/* ============================================= */
/* CATÁLOGOS - VARIABLES CSS RESPONSIVE          */
/* Mismo sistema que Home.razor (clamp + vars)   */
/* ============================================= */
.catalogos[b-sojffnkuda] {
    /* Layout */
    --cat-padding-lateral: clamp(16px, 6vw, 115px);
    --cat-padding-bottom: clamp(40px, 5.21vw, 100px);
    --cat-section-gap: clamp(30px, 3.91vw, 75px);

    /* Grid catálogos */
    --cat-card-width: clamp(150px, 16.67vw, 320px);
    --cat-img-height: clamp(112px, 12.5vw, 240px);
    --cat-card-gap: clamp(15px, 1.56vw, 30px);
    --cat-card-text-gap: clamp(12px, 1.04vw, 20px);
    --cat-grid-row-gap: clamp(20px, 2.08vw, 40px);

    /* Tipografía fluida */
    --cat-font-title: clamp(14px, 0.83vw, 16px);
    --cat-font-subtitle: clamp(10px, 0.63vw, 12px);
    --cat-font-heading: clamp(14px, 0.83vw, 16px);
    --cat-font-body: clamp(13px, 0.83vw, 16px);
    --cat-font-btn: clamp(14px, 0.83vw, 16px);

    /* Botón CTA */
    --cat-btn-width: clamp(280px, 30.83vw, 592px);
    --cat-btn-height: clamp(44px, 2.71vw, 52px);

    /* Radios */
    --cat-img-radius: clamp(8px, 0.78vw, 15px);
    --cat-btn-radius: 6px;

    /* Iconos */
    --cat-icon-size: clamp(18px, 1.25vw, 24px);
}

/* ============================================= */
/* ESTILOS BASE                                  */
/* ============================================= */
.catalogos[b-sojffnkuda] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cat-section-gap);
    padding: 0 var(--cat-padding-lateral) var(--cat-padding-bottom);
    position: relative;
    width: 100%;
    background-color: var(--blanco, #ffffff);
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME PRINCIPAL (contenedor de contenido)     */
/* ============================================= */
.catalogos .frame[b-sojffnkuda] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 1.56vw, 30px);
    width: 100%;
    position: relative;
}

/* ============================================= */
/* TÍTULO "CATÁLOGOS" CON FLECHA ATRÁS           */
/* ============================================= */
.catalogos .titulo[b-sojffnkuda] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
}

.catalogos h1[b-sojffnkuda],
.catalogos h2[b-sojffnkuda] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--cat-font-heading);
    letter-spacing: 0;
    line-height: normal;
    text-align: center;
}

.catalogos .iconos[b-sojffnkuda] {
    position: absolute;
    width: var(--cat-icon-size);
    height: var(--cat-icon-size);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .catalogos .iconos:hover[b-sojffnkuda] {
        opacity: 0.6;
    }

/* ============================================= */
/* FILA DE CATEGORÍAS + FILTRO                   */
/* ============================================= */
.catalogos .div[b-sojffnkuda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.catalogos .frame-2[b-sojffnkuda] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: clamp(8px, 0.52vw, 10px);
    position: relative;
}

    .catalogos .frame-2 .img[b-sojffnkuda] {
        width: var(--cat-icon-size);
        height: var(--cat-icon-size);
    }

    .catalogos .frame-2 .vista[b-sojffnkuda] {
        font-family: var(--body-large-font-family);
        font-weight: var(--body-large-font-weight);
        color: var(--black-900);
        font-size: var(--cat-font-body);
        letter-spacing: var(--body-large-letter-spacing);
        line-height: var(--body-large-line-height);
        white-space: nowrap;
        font-style: var(--body-large-font-style);
    }

.catalogos .btn-categorias[b-sojffnkuda] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.52vw, 10px);
    transition: opacity 0.2s ease;
}

    .catalogos .btn-categorias:hover[b-sojffnkuda] {
        opacity: 0.7;
    }

    .catalogos .btn-categorias:focus[b-sojffnkuda] {
        outline: none;
    }

.catalogos .categoria-pill[b-sojffnkuda] {
    margin-left: clamp(6px, 0.52vw, 10px);
    font-size: var(--cat-font-subtitle);
    padding: clamp(3px, 0.21vw, 4px) clamp(8px, 0.52vw, 10px);
    border-radius: 999px;
    border: 1px solid #3CAA36;
    color: #3CAA36;
    background: var(--blanco, #ffffff);
    white-space: nowrap;
}

/* ============================================= */
/* GRID DE TARJETAS DE CATÁLOGO                  */
/* ============================================= */
.catalogos .frame-3[b-sojffnkuda] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--cat-grid-row-gap) var(--cat-card-gap);
    width: 100%;
}

/* ============================================= */
/* TARJETA DE CATÁLOGO                           */
/* ============================================= */
.catalogos .component[b-sojffnkuda] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cat-card-text-gap);
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .catalogos .component:hover[b-sojffnkuda] {
        transform: translateY(-4px);
    }

    .catalogos .component a[b-sojffnkuda] {
        display: block;
        width: 100%;
        text-decoration: none;
    }

    .catalogos .component .cat-general[b-sojffnkuda] {
        width: 100%;
        aspect-ratio: 320 / 240;
        object-fit: cover;
        border-radius: var(--cat-img-radius);
        display: block;
        transition: box-shadow 0.3s ease;
    }

    .catalogos .component:hover .cat-general[b-sojffnkuda] {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

/* ============================================= */
/* TEXTOS DE LA TARJETA                          */
/* ============================================= */
.catalogos .component .frame-4[b-sojffnkuda] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(3px, 0.26vw, 5px);
    width: 100%;
}

.catalogos .component .text-wrapper[b-sojffnkuda] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--cat-font-title);
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.catalogos .component .text-wrapper-2[b-sojffnkuda] {
    font-family: var(--body-small-font-family);
    font-weight: var(--body-small-font-weight);
    color: var(--black-fonts-headings);
    font-size: var(--cat-font-subtitle);
    letter-spacing: var(--body-small-letter-spacing);
    line-height: var(--body-small-line-height);
    font-style: var(--body-small-font-style);
    text-transform: uppercase;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?" (CTA)                  */
/* ============================================= */
.catalogos .state-layer-wrapper[b-sojffnkuda] {
    display: flex;
    flex-direction: column;
    width: var(--cat-btn-width);
    max-width: 100%;
    height: var(--cat-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco, #ffffff);
    border-radius: var(--cat-btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .catalogos .state-layer-wrapper:hover[b-sojffnkuda] {
        background-color: var(--alternativo-oscuro);
    }

        .catalogos .state-layer-wrapper:hover .label-text-2[b-sojffnkuda] {
            color: var(--blanco, #ffffff);
        }

.catalogos .state-layer[b-sojffnkuda] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    width: 100%;
    height: 100%;
}

.catalogos .label-text-2[b-sojffnkuda] {
    text-decoration: none;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--cat-font-btn);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.3s ease;
}

/* ============================================= */
/* ESTADOS DE CARGA Y ALERTAS                    */
/* ============================================= */
.loading-container[b-sojffnkuda],
.access-denied-container[b-sojffnkuda] {
    padding: clamp(24px, 2.08vw, 40px);
    text-align: center;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    width: 100%;
}

.catalogos .alert[b-sojffnkuda] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--cat-font-body);
}

.catalogos .alert-warning[b-sojffnkuda] {
    background-color: #FFF3CD;
    color: #856404;
    border: 1px solid #FFEEBA;
}

.catalogos .alert-danger[b-sojffnkuda] {
    background-color: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

.catalogos .alert-success[b-sojffnkuda] {
    background-color: #D4EDDA;
    color: #155724;
    border: 1px solid #C3E6CB;
}

.catalogos .alert-info[b-sojffnkuda] {
    background-color: #D1ECF1;
    color: #0C5460;
    border: 1px solid #BEE5EB;
}

/* ============================================= */
/* MODAL DE CATEGORÍAS (panel lateral Figma)     */
/* Figma: 629px panel, rounded-right 15px,       */
/* shadow 0 2 6 rgba(0,0,0,0.25),                */
/* padding 40px top / 124px horiz / 80px bottom  */
/* title: 48px Nunito Sans Regular #2D2E2E       */
/* rows: 16px/24px body/large, border #F5F5F5    */
/* ============================================= */
.pmc-modal-overlay[b-sojffnkuda] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2000;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.pmc-modal-panel[b-sojffnkuda] {
    width: clamp(300px, 32.76vw, 629px);
    max-width: 90vw;
    height: 100%;
    background: var(--blanco, #ffffff);
    border-radius: 0 15px 15px 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.08vw, 40px) clamp(24px, 6.46vw, 124px) clamp(40px, 4.17vw, 80px);
    gap: clamp(30px, 3.18vw, 61px);
    overflow: hidden;
    animation: pmcSlideInLeft-b-sojffnkuda 0.22s ease-out;
}

@keyframes pmcSlideInLeft-b-sojffnkuda {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Header: título grande "Categorías" + icono X */
.pmc-modal-header[b-sojffnkuda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
}

.pmc-modal-title[b-sojffnkuda] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E);
    font-size: clamp(28px, 2.5vw, 48px);
    line-height: normal;
    letter-spacing: 0;
}

.pmc-modal-close[b-sojffnkuda] {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    transition: opacity 0.2s ease;
}

    .pmc-modal-close:hover[b-sojffnkuda] {
        opacity: 0.5;
    }

    .pmc-modal-close svg[b-sojffnkuda] {
        width: 100%;
        height: 100%;
    }

/* Lista de categorías */
.pmc-modal-list[b-sojffnkuda] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--grisgris-30, #E0E0E0) transparent;
}

/* Fila individual de categoría */
.pmc-cat-row[b-sojffnkuda] {
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--grisgris-10, #F5F5F5);
    background: transparent;
    padding: clamp(12px, 0.78vw, 15px) 0;
    cursor: pointer;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.83vw, 16px);
    color: var(--black-fonts-headings, #2D2E2E);
    letter-spacing: 0.5px;
    line-height: 24px;
    transition: color 0.2s ease;
}

    .pmc-cat-row:last-child[b-sojffnkuda] {
        border-bottom: none;
    }

    .pmc-cat-row:hover[b-sojffnkuda] {
        color: var(--primario, #3CAA36);
    }

    .pmc-cat-row.active[b-sojffnkuda] {
        color: var(--primario, #3CAA36);
        font-weight: 700;
    }

/* ============================================= */
/* BLOCKER DE CARGA                              */
/* ============================================= */
.page-blocker[b-sojffnkuda] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-sojffnkuda] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* Grid 3 columnas, ajustar espaciados           */
/* ============================================= */
@media (max-width: 1024px) {
    .catalogos[b-sojffnkuda] {
        --cat-padding-lateral: 30px;
        --cat-section-gap: 40px;
        --cat-card-gap: 20px;
        --cat-card-text-gap: 14px;
        --cat-grid-row-gap: 28px;
        --cat-font-title: 15px;
        --cat-font-subtitle: 11px;
        --cat-font-heading: 15px;
        --cat-font-body: 14px;
        --cat-font-btn: 15px;
        --cat-btn-width: 400px;
        --cat-btn-height: 48px;
        --cat-img-radius: 12px;
        --cat-icon-size: 22px;
    }

    .catalogos .frame-3[b-sojffnkuda] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* Grid 2 columnas, compactar todo               */
/* ============================================= */
@media (max-width: 768px) {
    .catalogos[b-sojffnkuda] {
        --cat-padding-lateral: 16px;
        --cat-section-gap: 30px;
        --cat-card-gap: 14px;
        --cat-card-text-gap: 10px;
        --cat-grid-row-gap: 22px;
        --cat-font-title: 14px;
        --cat-font-subtitle: 10px;
        --cat-font-heading: 14px;
        --cat-font-body: 13px;
        --cat-font-btn: 14px;
        --cat-btn-width: 100%;
        --cat-btn-height: 46px;
        --cat-img-radius: 10px;
        --cat-icon-size: 20px;
    }

    .catalogos .frame-3[b-sojffnkuda] {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalogos .component:hover[b-sojffnkuda] {
        transform: none;
    }

    .catalogos .component:hover .cat-general[b-sojffnkuda] {
        box-shadow: none;
    }

    .catalogos .state-layer-wrapper[b-sojffnkuda] {
        width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* Grid 2 columnas pero más compacto             */
/* ============================================= */
@media (max-width: 480px) {
    .catalogos[b-sojffnkuda] {
        --cat-padding-lateral: 12px;
        --cat-section-gap: 24px;
        --cat-card-gap: 10px;
        --cat-card-text-gap: 8px;
        --cat-grid-row-gap: 18px;
        --cat-font-title: 13px;
        --cat-font-subtitle: 9px;
        --cat-font-heading: 13px;
        --cat-font-body: 12px;
        --cat-font-btn: 13px;
        --cat-btn-height: 44px;
        --cat-img-radius: 8px;
        --cat-icon-size: 18px;
    }

    .catalogos .frame-3[b-sojffnkuda] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pmc-modal-panel[b-sojffnkuda] {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: 20px 20px 40px;
        gap: 24px;
    }

    .pmc-modal-title[b-sojffnkuda] {
        font-size: 24px;
    }
}

/* Solo en el editor: un catálogo sin PDF (la tienda se lo salta). */
.catalogos .cat-edit-sin-pdf[b-sojffnkuda] {
    font-size: 12px;
    font-weight: 700;
    color: #8a5a00;
    background: #fff4d6;
    border: 1px solid #f0a000;
    border-radius: 4px;
    padding: 2px 6px;
}
/* /Components/Pages/Cesta.razor.rz.scp.css */
/* ============================================
   CESTA - PÁGINA DE CARRITO DE COMPRAS
   Diseño EXACTO según Figma - Width 1920px
   ============================================ */

/* Container principal - EXACTO como Figma */
.cesta-page-wrapper[b-c3i2g6uvtr] {
    /* ============================================= */
    /* SISTEMA RESPONSIVE - Variables fluidas con clamp() */
    /* ============================================= */

    /* Paddings laterales - fluido hasta el max */
    --cesta-padding-lateral: clamp(20px, 6vw, 115px);

    /* Gaps */
    --cesta-gap-sm: clamp(7px, 0.73vw, 14px);
    --cesta-gap-md: clamp(10px, 1.04vw, 20px);
    --cesta-gap-lg: clamp(25px, 2.6vw, 50px);
    --cesta-gap-xl: clamp(50px, 5.2vw, 100px);

    /* Tipografía fluida */
    --cesta-font-title: clamp(14px, 0.83vw, 16px);
    --cesta-font-body: clamp(12px, 0.83vw, 16px);
    --cesta-font-body-sm: clamp(10px, 0.73vw, 14px);
    --cesta-font-price: clamp(14px, 1.04vw, 20px);
    --cesta-font-total: clamp(18px, 1.25vw, 24px);

    /* Tamaños de elementos */
    --cesta-product-img: clamp(70px, 5.2vw, 100px);
    --cesta-btn-height: clamp(36px, 2.08vw, 40px);
    --cesta-btn-height-lg: clamp(44px, 2.81vw, 54px);
    --cesta-totales-width: clamp(320px, 30.83vw, 592px);
    --cesta-card-width: clamp(130px, 8.85vw, 170px);
    --cesta-btn-width: clamp(160px, 10.94vw, 210px);
    --cesta-acciones-width: clamp(330px, 22.92vw, 440px);

    /* Border radius */
    --cesta-radius: clamp(10px, 0.73vw, 14px);
    --cesta-radius-sm: clamp(4px, 0.31vw, 6px);

    /* Estilos base */
    background: white;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* SECCIÓN SUPERIOR: Lista de productos */
.cesta-productos-section[b-c3i2g6uvtr] {
    background: white;
    padding: 0 var(--cesta-padding-lateral) clamp(20px, 1.56vw, 30px);
    display: flex;
    flex-direction: column;
}

/* Header "CESTA" - centrado con iconos de navegación */
.cesta-header[b-c3i2g6uvtr] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

.cesta-nav-back[b-c3i2g6uvtr],
.cesta-nav-close[b-c3i2g6uvtr] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.cesta-nav-back[b-c3i2g6uvtr] {
    left: 0;
}

.cesta-nav-close[b-c3i2g6uvtr] {
    right: 0;
}

.cesta-nav-back:hover[b-c3i2g6uvtr],
.cesta-nav-close:hover[b-c3i2g6uvtr] {
    opacity: 0.6;
}

.cesta-nav-back img[b-c3i2g6uvtr],
.cesta-nav-close img[b-c3i2g6uvtr] {
    width: 24px;
    height: 24px;
}

.cesta-title[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-title);
    color: #000000;
    margin: 0;
    white-space: pre;
}

/* Headers de columnas */
.cesta-table-header[b-c3i2g6uvtr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 20px 0;
    padding-right: 44px;
    border-bottom: 1px solid #000000;
    width: 100%;
}

.header-producto[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-title);
    color: #000000;
    white-space: pre;
}

.header-derecha[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 81px;
}

.header-grupo[b-c3i2g6uvtr] {
    display: flex;
    gap: clamp(50px, 5.94vw, 114px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-title);
    color: #000000;
    white-space: pre;
}

.header-precio[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.precio-label[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-title);
    color: #000000;
}

.sin-iva[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--cesta-font-body-sm);
    line-height: 1.33;
    letter-spacing: 0.4px;
    color: #9E9E9E;
}

/* Item del carrito - EXACTO como Figma */
.cesta-item[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 90px;
    border-bottom: 1px dashed #E0E0E0;
    width: 100%;
}

.item-imagen[b-c3i2g6uvtr] {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
}

.item-content[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-info[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 885px;
    flex-shrink: 0;
}

.item-titulo[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0;
    cursor: pointer;
    min-width: 100%;
    width: min-content;
}

.item-badges[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.item-referencia[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #000000;
    white-space: pre;
}

/* Badges del producto */
.badge[b-c3i2g6uvtr] {
    padding: 2px 7px;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 18px;
    width: 23px;
}

.badge-nuevo[b-c3i2g6uvtr] {
    background: white;
    color: #121212;
}

.badge-oferta[b-c3i2g6uvtr] {
    background: #FF5449;
    color: white;
}

.badge-regalo[b-c3i2g6uvtr] {
    background: #52B0AD;
    color: white;
}

.badge-eco[b-c3i2g6uvtr] {
    background: #3CAA36;
    color: white;
}

.badge-reembolso[b-c3i2g6uvtr] {
    background: #FDD623;
    color: #141414;
}

.badge-homologado[b-c3i2g6uvtr] {
    background: #B052A1;
    color: white;
}

/* Contenedor del stack de badges (componente ProductBadge) bajo la referencia en cada línea de cesta */
.cart-badges[b-c3i2g6uvtr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Reembolso clicable: la badge es un enlace a la web de canje del fabricante */
.badge-reembolso-canje[b-c3i2g6uvtr] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

.lista .tabla-wrapper[b-c3i2g6uvtr] {
    padding: 15px;
    border-radius: 20px;
    width: 100%;
}

.cesta-page-wrapper .tabla-wrapper[b-c3i2g6uvtr] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cesta-page-wrapper .tabla-container[b-c3i2g6uvtr] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
}

.cesta-page-wrapper .tabla-mejorada[b-c3i2g6uvtr] {
    width: 100%;
    border-collapse: separate;
    font-family: var(--body-large-font-family, sans-serif);
    font-size: 16px;
    padding: 0;
}

.cesta-page-wrapper .tabla-mejorada tbody tr:not(:last-child) td[b-c3i2g6uvtr] {
    border-bottom: 1px solid #d3d3d3;
}

.cesta-page-wrapper .tabla-mejorada thead[b-c3i2g6uvtr] {
    color: #000000;
    font-weight: bold;
    position: relative;
}

.cesta-page-wrapper .tabla-mejorada thead[b-c3i2g6uvtr]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.cesta-page-wrapper .tabla-mejorada th[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada td[b-c3i2g6uvtr] {
    padding: 10px 12px;
    text-align: center;
    white-space: nowrap;
}

.cesta-page-wrapper .tabla-mejorada .th1[b-c3i2g6uvtr] {
    text-align: left;
    width: 100%;
    white-space: normal;
}

.cesta-page-wrapper .tabla-mejorada .th2[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td2[b-c3i2g6uvtr] {
    width: 160px;
    min-width: 140px;
}

.cesta-page-wrapper .tabla-mejorada .th3[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td3[b-c3i2g6uvtr] {
    width: 80px;
    min-width: 60px;
}

.cesta-page-wrapper .tabla-mejorada .th6[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td6[b-c3i2g6uvtr] {
    width: 80px;
    min-width: 60px;
}

/* Sin productos de regalo: ocultar cabecera (thead usa ::after para su línea, sin impacto).
   Las celdas td6-oculto ya están vacías, NO se ocultan para que border-bottom sea continuo. */
.cesta-page-wrapper .tabla-mejorada .th6-oculto[b-c3i2g6uvtr] {
    visibility: hidden;
}

.cesta-page-wrapper .tabla-mejorada .th7[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td7[b-c3i2g6uvtr] {
    width: 70px;
    min-width: 50px;
}

.cesta-page-wrapper .tabla-mejorada .th4[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td4[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .th5[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .td5[b-c3i2g6uvtr] {
    width: 140px;
    min-width: 100px;
}

/* "Precio"/"Total" deben quedar centrados con su columna de datos, igual que
   el numero; "sin IVA" no debe contar en ese centrado, solo colgar a la
   derecha de la palabra principal (ver referencia de diseño). Por eso
   .th-label es lo unico que el text-align:center del th centra, y .subheader
   se saca del flujo con position:absolute para no desplazarlo. */
.cesta-page-wrapper .tabla-mejorada .th4 .th-label[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .th5 .th-label[b-c3i2g6uvtr] {
    position: relative;
    display: inline-block;
}

.cesta-page-wrapper .tabla-mejorada th .subheader[b-c3i2g6uvtr] {
    font-size: 0.8em;
    color: #888888;
}

.cesta-page-wrapper .tabla-mejorada .th4 .subheader[b-c3i2g6uvtr],
.cesta-page-wrapper .tabla-mejorada .th5 .subheader[b-c3i2g6uvtr] {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    white-space: nowrap;
}

.cesta-page-wrapper .tabla-mejorada .td1[b-c3i2g6uvtr] {
    width: 100%;
    white-space: normal;
}

.cesta-page-wrapper .tabla-mejorada .td1 .td-content[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--cesta-gap-md);
}

.cesta-page-wrapper .tabla-mejorada .td1 img[b-c3i2g6uvtr] {
    height: var(--cesta-product-img);
    width: var(--cesta-product-img);
}

.cesta-page-wrapper .tabla-mejorada .td1 .producto-info[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
}

.cesta-page-wrapper .tabla-mejorada .td1 .descripcion[b-c3i2g6uvtr] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--cesta-font-body);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.cesta-page-wrapper .tabla-mejorada .td1 .referencia[b-c3i2g6uvtr] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--cesta-font-body);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.cesta-page-wrapper .tabla-mejorada .td2 .td-content[b-c3i2g6uvtr] {
    display: flex;
    height: 46px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background-color: var(--gris-10, #F5F5F5);
    padding: 0px 10px;
    max-width: 130px;
    margin: 0;
}

.cesta-page-wrapper .tabla-mejorada .td2 .td-content button[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--gris-10, #F5F5F5);
    border: 0px;
    padding: 0;
    cursor: pointer;
}


.cesta-page-wrapper .tabla-mejorada .td2 .td-content button img[b-c3i2g6uvtr] {
    width: 20px;
    height: 20px;
    opacity: 1;
    filter: none;
    transition: opacity .15s ease, filter .15s ease;
}

.cesta-page-wrapper .tabla-mejorada .td2 .td-content button:disabled img[b-c3i2g6uvtr] {
    opacity: 0.45;
    filter: brightness(1.6);
}

/* Input de cantidad - usar ::deep con selector padre para compatibilidad Blazor */
.cesta-page-wrapper[b-c3i2g6uvtr]  .td2 .td-content .cantidad-input {
    color: var(--negro, #121212);
    text-align: center;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 1;
    min-width: 0;
    border: 0px;
    background-color: var(--gris-10, #F5F5F5);
    padding: 0;
}

.cesta-page-wrapper .tabla-mejorada .td4 .td-content[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.cesta-page-wrapper .tabla-mejorada .td4 .td-content .precio-tachado[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9E9E9E;
    text-decoration: line-through;
}

.cesta-page-wrapper .tabla-mejorada .td7 .td-content[b-c3i2g6uvtr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

/* Acciones y precios */
.item-acciones[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 73px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.btn-ver-stock[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-ver-stock img[b-c3i2g6uvtr] {
    width: 24px;
    height: 24px;
}

.btn-ver-stock span[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    text-align: right;
    white-space: pre;
}

.item-precios[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.precio-box[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: center;
    width: 66px;
    flex-shrink: 0;
}

.precio-actual[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    text-align: right;
    white-space: pre;
}

.precio-tachado[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9E9E9E;
    text-decoration: line-through;
}

.btn-eliminar[b-c3i2g6uvtr] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    color: #212121; /* TrashIcon (svg, stroke=currentColor) */
}

.btn-eliminar[b-c3i2g6uvtr]  svg {
    width: 100%;
    height: 100%;
}

/* SECCIÓN INFERIOR: Botones, búsqueda y totales */
.cesta-inferior-section[b-c3i2g6uvtr] {
    background: white;
    padding: 0 var(--cesta-padding-lateral) clamp(30px, 2.6vw, 50px);
    display: flex;
    gap: var(--cesta-gap-xl);
    align-items: flex-start;
}

/* Lado izquierdo - crece */
.cesta-inferior-izquierda[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cesta-gap-md);
}

/* Fila de botones y búsqueda */
.cesta-acciones-fila[b-c3i2g6uvtr] {
    display: flex;
    gap: var(--cesta-gap-lg);
    align-items: flex-start;
    width: 100%;
}

.acciones-botones[b-c3i2g6uvtr] {
    display: none;
}

.btn-seguir-comprando[b-c3i2g6uvtr],
.btn-anadir-lista[b-c3i2g6uvtr] {
    width: var(--cesta-btn-width) !important;
    height: var(--cesta-btn-height) !important;
    background: white;
    border: 1px solid #3CAA36;
    border-radius: var(--cesta-radius-sm);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--cesta-font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    text-align: center;
    color: #3CAA36;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.btn-anadir-lista[b-c3i2g6uvtr] {
    border-color: #ECC61B;
    color: #212121;
}

.acciones-buscar[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--cesta-gap-md);
    align-items: stretch;
    height: 44px;
}

.input-buscar-wrapper[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    display: flex;
    height: 100%;
}

.input-buscar-producto[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #121212;
}

.input-buscar-producto[b-c3i2g6uvtr]::placeholder {
    color: #9E9E9E;
}

.btn-anadir-producto[b-c3i2g6uvtr] {
    height: 44px;
    background: white;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 0 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #3CAA36;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-anadir-producto:hover:not(:disabled)[b-c3i2g6uvtr] {
    background-color: #3CAA36;
    color: white;
}

.btn-anadir-producto:disabled[b-c3i2g6uvtr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Productos recomendados */
.productos-interes[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.productos-interes-header[b-c3i2g6uvtr] {
    padding-bottom: 20px;
    padding-right: 44px;
    border-bottom: 1px solid #000000;
    height: 42px;
    display: flex;
    align-items: flex-start;
}

.productos-interes-header h3[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0;
    white-space: pre;
}

.productos-interes-carrusel[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
}

.carrusel-btn[b-c3i2g6uvtr] {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.carrusel-btn:hover[b-c3i2g6uvtr] {
    opacity: 0.7;
}

.carrusel-btn img[b-c3i2g6uvtr] {
    width: 24px;
    height: 24px;
}

/* Flecha izquierda - voltear arrow.png (que apunta a la derecha por defecto) */
.carrusel-btn .arrow-prev[b-c3i2g6uvtr] {
    transform: scaleX(-1);
}

/* Flecha derecha - sin transformación (arrow.png ya apunta a la derecha) */
.carrusel-btn .arrow-next[b-c3i2g6uvtr] {
    transform: none;
}

/* Contenedor de items con scroll nativo */
.carrusel-items[b-c3i2g6uvtr] {
    display: flex;
    gap: 20px;
    flex: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    /* Ocultar scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carrusel-items[b-c3i2g6uvtr]::-webkit-scrollbar {
    display: none;
}

/* Estado de carga del carrusel */
.carrusel-loading[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 40px;
    color: #9E9E9E;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
}

/* Estado vacío del carrusel */
.carrusel-empty[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px;
    color: #9E9E9E;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
}

.producto-recomendado[b-c3i2g6uvtr] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cesta-gap-sm);
    width: var(--cesta-card-width);
    flex-shrink: 0;
}

.producto-img[b-c3i2g6uvtr] {
    width: var(--cesta-card-width);
    height: var(--cesta-card-width);
    border-radius: var(--cesta-radius);
    object-fit: cover;
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.producto-img:hover[b-c3i2g6uvtr] {
    opacity: 0.85;
}

.producto-info-rec[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 143px;
    flex-shrink: 0;
}

.producto-nombre-rec[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--cesta-font-body);
    color: #141718;
    margin: 0;
    width: 100%;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1.3;
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-nombre-rec:hover[b-c3i2g6uvtr] {
    color: #3CAA36;
}

.producto-precios-rec[b-c3i2g6uvtr] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.precio-actual-rec[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-price);
    color: #121212;
}

.precio-tachado-rec[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--cesta-font-body-sm);
    color: #9E9E9E;
    text-decoration: line-through;
}

.btn-anadir-rec[b-c3i2g6uvtr] {
    position: absolute;
    right: clamp(10px, 1.04vw, 20px);
    bottom: calc(var(--cesta-card-width) * 0.10 + clamp(40px, 3.65vw, 70px));
    width: clamp(36px, 2.24vw, 43px);
    height: clamp(36px, 2.24vw, 43px);
    background: white;
    border: 1px solid #ECC61B;
    border-radius: var(--cesta-radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 8px;
}

.btn-anadir-rec img[b-c3i2g6uvtr] {
    width: 24px;
    height: 24px;
}

.btn-anadir-rec:hover:not(:disabled)[b-c3i2g6uvtr] {
    background: #FFF8E1;
    border-color: #D4A800;
}

.btn-anadir-rec:disabled[b-c3i2g6uvtr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* PANEL LATERAL: Totales */
.cesta-totales-panel[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.82vw, 35px);
    align-self: stretch;
    width: var(--cesta-totales-width);
    flex-shrink: 0;
}

.totales-box[b-c3i2g6uvtr] {
    background: #F5F5F5;
    border-radius: var(--cesta-radius-sm);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
    padding: clamp(15px, 1.56vw, 30px);
    display: flex;
    flex-direction: column;
    gap: var(--cesta-gap-sm);
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.total-linea[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--cesta-font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: #141414;
}

.total-label[b-c3i2g6uvtr] {
    width: 236px;
    flex-shrink: 0;
}

.total-valor[b-c3i2g6uvtr] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

.total-separador[b-c3i2g6uvtr] {
    height: 0;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

.total-separador-linea[b-c3i2g6uvtr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: -1px;
    border-top: 1px solid #212121;
}

.total-final[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--cesta-font-total);
    color: #141414;
}

.total-label-final[b-c3i2g6uvtr] {
    width: 236px;
    flex-shrink: 0;
}

.total-valor-final[b-c3i2g6uvtr] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

/* Botones de acción del panel */
.totales-acciones[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    flex-shrink: 0;
}

.totales-acciones-grupo1[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    flex-shrink: 0;
}

.btn-continuar[b-c3i2g6uvtr] {
    width: 100%;
    height: var(--cesta-btn-height-lg);
    background: #3CAA36;
    border: none;
    border-radius: var(--cesta-radius-sm);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--cesta-font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 8px;
    flex-shrink: 0;
}

.totales-acciones-grupo2[b-c3i2g6uvtr] {
    display: flex;
    align-items: stretch;
    gap: 30px;
    width: 100%;
    flex-shrink: 0;
}

.totales-acciones-grupo2 .btn-seguir-comprando[b-c3i2g6uvtr] {
    flex: 2;
    min-width: 0;
    width: auto;
    height: auto;
    align-self: stretch;
}

.ahorro-info[b-c3i2g6uvtr] {
    flex: 1;
    min-width: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--cesta-font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: #3CAA36;
    text-align: right;
    white-space: normal;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?" (amarillo, centrado)     */
/* ============================================= */
.cesta-page-wrapper .state-layer-wrapper[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    width: var(--pp-help-width);
    max-width: 100%;
    height: clamp(44px, 2.71vw, 52px);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--cesta-radius-sm);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding: 0 clamp(16px, 1.25vw, 24px);
}

.cesta-page-wrapper .state-layer-wrapper:hover[b-c3i2g6uvtr] {
    background-color: var(--alternativo-oscuro);
}

.cesta-page-wrapper .label-text-2:hover[b-c3i2g6uvtr] {
    color: var(--blanco);
}

.cesta-page-wrapper .label-text-2[b-c3i2g6uvtr] {
    position: relative;
    width: fit-content;
    text-decoration: none;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.2s ease;
}

/* Carrito vacío */
.cesta-vacia[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 20px;
}

.cesta-vacia-icon[b-c3i2g6uvtr] {
    width: 120px;
    height: 120px;
    opacity: 0.3;
}

.cesta-vacia h2[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #121212;
    margin: 0;
}

.cesta-vacia p[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
    margin: 0;
}

/* Buscador de alta por referencia dentro del estado de cesta vacía (mismo buscador que la sección inferior) */
.cesta-vacia-acciones[b-c3i2g6uvtr] {
    width: 100%;
    max-width: 560px;
    margin-top: 4px;
}

/* Loading */
.cesta-loading[b-c3i2g6uvtr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.spinner[b-c3i2g6uvtr] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-c3i2g6uvtr 1s linear infinite;
}

@keyframes spin-b-c3i2g6uvtr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cesta-loading p[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ---- 1400px: Hide low-value columns ---- */
@media (max-width: 1400px) {
    .cesta-page-wrapper .tabla-mejorada .th5[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td5[b-c3i2g6uvtr] {
        display: none;
    }

    .cesta-page-wrapper .tabla-mejorada .th6[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td6[b-c3i2g6uvtr] {
        display: none;
    }
}

/* ---- 1200px: Stack inferior section ---- */
@media (max-width: 1200px) {
    .cesta-inferior-section[b-c3i2g6uvtr] {
        flex-direction: column;
    }

    .cesta-totales-panel[b-c3i2g6uvtr] {
        width: 100%;
    }

    .cesta-acciones-fila[b-c3i2g6uvtr] {
        flex-direction: column;
    }
}

/* ---- 1024px: Tablet – tighter table ---- */
@media (max-width: 1024px) {
    .cesta-page-wrapper .tabla-mejorada th[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada td[b-c3i2g6uvtr] {
        padding: 8px 8px;
    }

    .cesta-page-wrapper .tabla-mejorada .th2[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td2[b-c3i2g6uvtr] {
        width: 130px;
        min-width: 120px;
    }

    .cesta-page-wrapper .tabla-mejorada .th3[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td3[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .th7[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td7[b-c3i2g6uvtr] {
        width: 60px;
        min-width: 50px;
    }

    .cesta-page-wrapper .tabla-mejorada .th4[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada .td4[b-c3i2g6uvtr] {
        width: 110px;
        min-width: 80px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .producto-info[b-c3i2g6uvtr] {
        gap: 4px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .descripcion[b-c3i2g6uvtr] {
        font-size: 14px;
    }

    .cesta-page-wrapper .tabla-mejorada .td2 .td-content[b-c3i2g6uvtr] {
        max-width: 110px;
        padding: 0 4px;
    }

    .btn-anadir-producto[b-c3i2g6uvtr] {
        padding: 0 16px;
        font-size: 14px;
    }

    .totales-acciones-grupo2[b-c3i2g6uvtr] {
        flex-direction: column;
        gap: 15px;
    }

    .totales-acciones-grupo2 .btn-seguir-comprando[b-c3i2g6uvtr] {
        width: 100%;
    }

    .ahorro-info[b-c3i2g6uvtr] {
        text-align: center;
    }
}

/* ---- 900px: More column hiding ---- */
@media (max-width: 900px) {
    .cesta-page-wrapper .tabla-mejorada .td1 img[b-c3i2g6uvtr] {
        height: 60px;
        width: 60px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .descripcion[b-c3i2g6uvtr] {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .referencia[b-c3i2g6uvtr] {
        font-size: 12px;
    }
}

/* ============================================
   MOBILE (≤768px) - Card Layout
   ============================================ */
@media (max-width: 768px) {
    .cesta-productos-section[b-c3i2g6uvtr] {
        padding: 0 16px 16px;
    }

    .cesta-inferior-section[b-c3i2g6uvtr] {
        padding: 0 16px 24px;
    }

    /* --- Table → Card conversion --- */
    .cesta-page-wrapper .tabla-mejorada thead[b-c3i2g6uvtr] {
        display: none;
    }

    .cesta-page-wrapper .tabla-mejorada[b-c3i2g6uvtr],
    .cesta-page-wrapper .tabla-mejorada tbody[b-c3i2g6uvtr] {
        display: block;
        width: 100%;
    }

    .cesta-page-wrapper .tabla-mejorada tbody tr:not(:last-child) td[b-c3i2g6uvtr] {
        border-bottom: none;
    }

    /* Each row = a card */
    .cesta-page-wrapper .tabla-mejorada tbody tr[b-c3i2g6uvtr] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 16px 0;
        border-bottom: 1px solid #E0E0E0 !important;
        position: relative;
    }

    .cesta-page-wrapper .tabla-mejorada tbody tr:last-child[b-c3i2g6uvtr] {
        border-bottom: none !important;
    }

    .cesta-page-wrapper .tabla-mejorada td[b-c3i2g6uvtr] {
        display: block;
        padding: 0;
        text-align: left;
        white-space: normal;
        border: none !important;
    }

    /* --- Product cell: full width, top of card --- */
    .cesta-page-wrapper .tabla-mejorada .td1[b-c3i2g6uvtr] {
        width: 100%;
        min-width: 0;
        padding-right: 36px; /* space for delete button */
        margin-bottom: 12px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .td-content[b-c3i2g6uvtr] {
        gap: 12px;
        align-items: flex-start;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 img[b-c3i2g6uvtr] {
        height: 64px;
        width: 64px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .producto-info[b-c3i2g6uvtr] {
        gap: 4px;
        min-width: 0;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .descripcion[b-c3i2g6uvtr] {
        font-size: 14px;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .referencia[b-c3i2g6uvtr] {
        font-size: 12px;
        color: #757575;
    }

    /* --- Bottom row: quantity + stock + price, aligned with flexbox --- */
    .cesta-page-wrapper .tabla-mejorada .td2[b-c3i2g6uvtr] {
        order: 1;
        flex-shrink: 0;
    }

    .cesta-page-wrapper .tabla-mejorada .td2 .td-content[b-c3i2g6uvtr] {
        height: 38px;
        max-width: 115px;
        margin: 0;
        padding: 0 8px;
        border-radius: 8px;
        gap: 4px;
    }

    .cesta-page-wrapper .tabla-mejorada .td3[b-c3i2g6uvtr] {
        order: 2;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 8px;
    }

    .cesta-page-wrapper .tabla-mejorada .td3 img[b-c3i2g6uvtr] {
        width: 20px;
        height: 20px;
    }

    .cesta-page-wrapper .tabla-mejorada .td4[b-c3i2g6uvtr] {
        order: 3;
        margin-left: auto;
        text-align: right;
    }

    .cesta-page-wrapper .tabla-mejorada .td4 .td-content[b-c3i2g6uvtr] {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
    }

    .cesta-page-wrapper .tabla-mejorada .td4 .precio-actual[b-c3i2g6uvtr] {
        font-size: 15px;
        font-weight: 700;
    }

    .cesta-page-wrapper .tabla-mejorada .td4 .precio-tachado[b-c3i2g6uvtr] {
        font-size: 12px;
    }

    /* Total cell hidden on mobile (redundant with precio) */
    .cesta-page-wrapper .tabla-mejorada .td5[b-c3i2g6uvtr] {
        display: none;
    }

    /* Gift hidden */
    .cesta-page-wrapper .tabla-mejorada .td6[b-c3i2g6uvtr] {
        display: none;
    }

    /* Delete button - top right corner of the card */
    .cesta-page-wrapper .tabla-mejorada .td7[b-c3i2g6uvtr] {
        position: absolute;
        right: 0;
        top: 16px;
        width: auto;
        padding: 0;
    }

    .cesta-page-wrapper .tabla-mejorada .td7 .td-content[b-c3i2g6uvtr] {
        gap: 0;
    }

    .btn-eliminar[b-c3i2g6uvtr] {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: background 0.2s;
    }

    .btn-eliminar:active[b-c3i2g6uvtr] {
        background: #FFF0F0;
    }

    /* --- Search bar --- */
    .btn-anadir-producto[b-c3i2g6uvtr] {
        padding: 0 14px;
        font-size: 13px;
    }

    /* --- Carousel --- */
    .producto-recomendado[b-c3i2g6uvtr] {
        width: 140px;
    }

    .producto-img[b-c3i2g6uvtr] {
        width: 140px;
        height: 140px;
    }

    .productos-interes-header[b-c3i2g6uvtr] {
        padding-right: 0;
    }

    /* --- Totals panel --- */
    .totales-box[b-c3i2g6uvtr] {
        padding: 20px 16px;
    }

    .total-label[b-c3i2g6uvtr],
    .total-label-final[b-c3i2g6uvtr] {
        width: auto;
        flex: 1;
    }

    .total-valor[b-c3i2g6uvtr],
    .total-valor-final[b-c3i2g6uvtr] {
        width: auto;
        flex-shrink: 0;
    }

    .totales-acciones-grupo2[b-c3i2g6uvtr] {
        flex-direction: column;
        gap: 12px;
    }

    .totales-acciones-grupo2 .btn-seguir-comprando[b-c3i2g6uvtr] {
        width: 100%;
    }

    .cesta-page-wrapper .state-layer-wrapper[b-c3i2g6uvtr] {
        width: 100%;
    }
}

/* ============================================
   SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
    .cesta-productos-section[b-c3i2g6uvtr] {
        padding: 0 12px 12px;
    }

    .cesta-inferior-section[b-c3i2g6uvtr] {
        padding: 0 12px 20px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 img[b-c3i2g6uvtr] {
        height: 56px;
        width: 56px;
        border-radius: 8px;
    }

    .cesta-page-wrapper .tabla-mejorada .td1 .descripcion[b-c3i2g6uvtr] {
        font-size: 13px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .cesta-page-wrapper .tabla-mejorada .td2 .td-content[b-c3i2g6uvtr] {
        max-width: 100px;
        height: 34px;
        gap: 4px;
    }

    .producto-recomendado[b-c3i2g6uvtr] {
        width: 120px;
    }

    .producto-img[b-c3i2g6uvtr] {
        width: 120px;
        height: 120px;
    }

    .btn-anadir-producto[b-c3i2g6uvtr] {
        padding: 0 10px;
        font-size: 12px;
    }

    .totales-box[b-c3i2g6uvtr] {
        padding: 16px 12px;
    }

    .total-linea[b-c3i2g6uvtr] {
        font-size: 14px;
    }

    .total-final[b-c3i2g6uvtr] {
        font-size: 18px;
    }
}



/* ============================================
   BUSCADOR DINÁMICO - DROPDOWN DE SUGERENCIAS
   ============================================ */

/* Wrapper del input con posición relativa para el dropdown */
.input-buscar-wrapper[b-c3i2g6uvtr] {
    position: relative;
    flex: 1;
}

/* Dropdown de sugerencias */
.search-suggestions-dropdown[b-c3i2g6uvtr] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

/* Item individual de sugerencia */
.search-suggestion-item[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease;
}

.search-suggestion-item:last-child[b-c3i2g6uvtr] {
    border-bottom: none;
}

.search-suggestion-item:hover[b-c3i2g6uvtr] {
    background-color: #FFF8E1;
}

/* Imagen de la sugerencia */
.suggestion-img[b-c3i2g6uvtr] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Información del producto en sugerencia */
.suggestion-info[b-c3i2g6uvtr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.suggestion-referencia[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #666666;
    text-transform: uppercase;
}

.suggestion-descripcion[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-precio[b-c3i2g6uvtr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestion-precio .precio-valor[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
}

.suggestion-precio .stock-badge[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #4CAF50;
    background: #E8F5E9;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Spinner pequeño para el botón */
.spinner-small[b-c3i2g6uvtr] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #FFF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-c3i2g6uvtr 0.6s linear infinite;
}

@keyframes spin-b-c3i2g6uvtr {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar personalizado para el dropdown */
.search-suggestions-dropdown[b-c3i2g6uvtr]::-webkit-scrollbar {
    width: 8px;
}

.search-suggestions-dropdown[b-c3i2g6uvtr]::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 4px;
}

.search-suggestions-dropdown[b-c3i2g6uvtr]::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

.search-suggestions-dropdown[b-c3i2g6uvtr]::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

.cesta-page-wrapper .regalo[b-c3i2g6uvtr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.cesta-page-wrapper .regalo .text[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0;
    white-space: pre;
}

.cesta-page-wrapper .regalo .link[b-c3i2g6uvtr] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin: 0;
    white-space: pre;
    cursor: pointer;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.2s ease;
}

.cesta-page-wrapper .regalo .link:hover[b-c3i2g6uvtr] {
    cursor: pointer;
    color: #3CAA36;
    text-decoration: none;
    background-size: 100% 2px;
}
/* /Components/Pages/Checkout.razor.rz.scp.css */
/* Loading */
.checkout-loading[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.spinner[b-4uv516ohec] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-4uv516ohec 1s linear infinite;
}

@keyframes spin-b-4uv516ohec {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.checkout-loading p[b-4uv516ohec] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

.checkout-page-wrapper[b-4uv516ohec] {
    display: flex;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px 0 100px 0;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.checkout-tabs-header[b-4uv516ohec] {
    display: flex;
    width: 100%;
    max-width: 640px;
    align-items: flex-start;
}

.tab-item[b-4uv516ohec] {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-bottom: 1px solid #E0E0E0;
}

.tab-item.active[b-4uv516ohec] {
    border-bottom: 1px solid #212121;
}

.tab-item span[b-4uv516ohec] {
    color: #212121;
    font-family: "Nunito Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    width: 100%;
    text-align: left;
}

.tab-item:last-child span[b-4uv516ohec] {
    text-align: right;
}

.tab-item.center span[b-4uv516ohec] {
    text-align: center;
}

.checkout-main-content[b-4uv516ohec] {
    display: flex;
    padding: 0 clamp(16px, 6vw, 115px);
    justify-content: center;
    align-items: flex-start;
    gap: clamp(24px, 2.6vw, 50px);
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}

.checkout-main-content .checkout-left-column[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 1 0;
    min-width: 0;
}

.checkout-main-content .checkout-left-column .errores[b-4uv516ohec], .checkout-main-content .checkout-left-column .avisos[b-4uv516ohec] {
    display: flex;
    width: 100%;
}

.checkout-main-content .checkout-left-column .errores .alert[b-4uv516ohec], .checkout-main-content .checkout-left-column .avisos .alert[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.checkout-main-content .checkout-left-column .errores .alert[b-4uv516ohec]  p, .checkout-main-content .checkout-left-column .avisos .alert[b-4uv516ohec]  p {
    margin: 0;
    width: 100%;
}

.checkout-main-content .checkout-left-column .checkout-section[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.checkout-main-content .checkout-left-column .section-header[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100%;
}

.checkout-main-content .checkout-left-column .section-header h2[b-4uv516ohec] {
    color: #2D2E2E;
    font-family: "Nunito Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.checkout-main-content .checkout-left-column .entrega-section .section-header h2[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-section .section-header h2[b-4uv516ohec] {
    cursor: default;
}

.checkout-main-content .checkout-left-column .section-header .arrow_image[b-4uv516ohec] {
    transition: transform 0.3s ease;
}

.checkout-main-content .checkout-left-column .section-header.open .arrow_image[b-4uv516ohec] {
    transform: rotate(90deg);
}

.checkout-main-content .checkout-left-column .section-header .section-line[b-4uv516ohec] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 0;
    transition: border-top 0.3s ease;
    width: 100%;
    height: 1px;
    background: #ABABAB;
}

.checkout-main-content .checkout-left-column .direccion-seleccionada-resumen[b-4uv516ohec], .direcciones-lista[b-4uv516ohec], .pagos-lista[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.checkout-main-content .checkout-left-column .direcciones-lista[b-4uv516ohec], .checkout-main-content .checkout-left-column .pagos-lista[b-4uv516ohec] {
    max-height: 210px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #BDBDBD #F2F2F2;
    padding-right: 6px;
}

.checkout-main-content .checkout-left-column .direccion-seleccionada-resumen span[b-4uv516ohec], .direcciones-lista span[b-4uv516ohec], .pagos-lista span[b-4uv516ohec] {
    color: #000000;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.checkout-main-content .checkout-left-column .direcciones-lista[b-4uv516ohec] {
    position: relative;
}

.checkout-main-content .checkout-left-column .direccion-row[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-row[b-4uv516ohec] {
    width: 100%;
}

.checkout-main-content .checkout-left-column .direccion-checkbox[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-checkbox[b-4uv516ohec], .urgente-checkbox[b-4uv516ohec] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    pointer-events: none;
}

.checkout-main-content .checkout-left-column .direccion-checkbox input[b-4uv516ohec], .checkout-main-content .checkout-left-column .direccion-checkbox span[b-4uv516ohec],
.checkout-main-content .checkout-left-column .pago-checkbox input[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-checkbox span[b-4uv516ohec], .urgente-checkbox input[b-4uv516ohec], .urgente-checkbox span[b-4uv516ohec] {
    pointer-events: auto;
}

.checkout-main-content .checkout-left-column .direccion-checkbox .custom-checkbox[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-checkbox .custom-checkbox[b-4uv516ohec], .urgente-checkbox .custom-checkbox[b-4uv516ohec] {
    appearance: none;
    border: 1px solid #000000;
    border-radius: 7px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    position: relative;
    width: 14px;
    -webkit-appearance: none;
}

.checkout-main-content .checkout-left-column .direccion-checkbox .custom-checkbox:checked[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-checkbox .custom-checkbox:checked[b-4uv516ohec], .urgente-checkbox .custom-checkbox:checked[b-4uv516ohec] {
    background-color: green;
    border-color: green;
}

.checkout-main-content .checkout-left-column .direccion-checkbox span[b-4uv516ohec], .checkout-main-content .checkout-left-column .pago-checkbox span[b-4uv516ohec], .urgente-checkbox span[b-4uv516ohec] {
    cursor: pointer;
}

.checkout-main-content .checkout-left-column .section-title-left[b-4uv516ohec] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-main-content .checkout-left-column .optional-label[b-4uv516ohec] {
    color: #9E9E9E;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.checkout-main-content .checkout-left-column .datos-pedido-form[b-4uv516ohec] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field[b-4uv516ohec] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field label[b-4uv516ohec] {
    min-width: 180px;
    color: #2D2E2E;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field input[b-4uv516ohec] {
    color: var(--negro);
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-family: "Nunito Sans";
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field input:focus[b-4uv516ohec] {
    border-color: #28a745;
    box-shadow: 0 0 0 1px #2FA84F;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field input.input1[b-4uv516ohec] {
    max-width: 300px;
}

.checkout-main-content .checkout-left-column .datos-pedido-form .form-field input.input2[b-4uv516ohec] {
    max-width: 500px;
}

.checkout-main-content .checkout-left-column .comentario-input[b-4uv516ohec] {
    width: 100%;
}

.checkout-main-content .checkout-left-column .comentario-input textarea[b-4uv516ohec] {
    background-color: #F5F5F5;
    color: var(--negro);
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-family: "Nunito Sans";
    font-size: 14px;
    resize: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-main-content .checkout-left-column .comentario-input textarea:focus[b-4uv516ohec] {
    border-color: #28a745;
    box-shadow: 0 0 0 1px #2FA84F;
}

.checkout-main-content .checkout-right-column[b-4uv516ohec] {
    display: flex;
    width: 673px;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.checkout-main-content .checkout-right-column .productos-box[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}

.checkout-main-content .checkout-right-column .productos-header[b-4uv516ohec] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.checkout-main-content .checkout-right-column .productos-count[b-4uv516ohec] {
    color: #2D2E2E;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.checkout-main-content .checkout-right-column .btn-modificar[b-4uv516ohec] {
    color: var(--black-fonts-headings, #2D2E2E);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.checkout-main-content .checkout-right-column .btn-modificar:hover[b-4uv516ohec] {
    text-decoration: underline;
}

.checkout-main-content .checkout-right-column .productos-grid[b-4uv516ohec] {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--Negro, #212121);
    width: 100%;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    overflow-y: scroll;
    box-sizing: border-box;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #BDBDBD #F2F2F2;
    min-height: 300px;
    max-height: 300px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items[b-4uv516ohec]::-webkit-scrollbar {
    width: 8px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items[b-4uv516ohec]::-webkit-scrollbar-track {
    background: #F2F2F2;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items[b-4uv516ohec]::-webkit-scrollbar-thumb {
    background: #BDBDBD;
    border-radius: 4px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items[b-4uv516ohec]::-webkit-scrollbar-thumb:hover {
    background: #9E9E9E;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item[b-4uv516ohec] {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 20px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item:last-child[b-4uv516ohec] {
    border-bottom: none;
    padding-bottom: 0px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item .product-image[b-4uv516ohec] {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item img[b-4uv516ohec] {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 14px;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item .producto-info[b-4uv516ohec] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item .producto-info .producto-nombre[b-4uv516ohec] {
    color: #000000;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-self: stretch;
    margin: 0;
}

.checkout-main-content .checkout-right-column .productos-grid .productos-items .producto-item .producto-info .producto-ref[b-4uv516ohec] {
    color: #000000;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    align-self: stretch;
    margin: 0;
}

.checkout-main-content .checkout-right-column .totales-box[b-4uv516ohec] {
    background: #F5F5F5;
    border-radius: 8px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.checkout-main-content .checkout-right-column .total-linea[b-4uv516ohec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #141414;
}

.checkout-main-content .checkout-right-column .total-label[b-4uv516ohec] {
    width: 236px;
    flex-shrink: 0;
}

.checkout-main-content .checkout-right-column .total-valor[b-4uv516ohec] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

.checkout-main-content .checkout-right-column .total-separador[b-4uv516ohec] {
    height: 0;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

.checkout-main-content .checkout-right-column .total-separador-linea[b-4uv516ohec] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: -1px;
    border-top: 1px solid #212121;
}

.checkout-main-content .checkout-right-column .total-final[b-4uv516ohec] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #141414;
}

.checkout-main-content .checkout-right-column .total-label-final[b-4uv516ohec] {
    width: 236px;
    flex-shrink: 0;
}

.checkout-main-content .checkout-right-column .total-valor-final[b-4uv516ohec] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

.checkout-footer-actions[b-4uv516ohec] {
    display: flex;
    padding: 0 clamp(16px, 6vw, 115px);
    justify-content: center;
    align-items: flex-start;
    gap: clamp(24px, 2.6vw, 50px);
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.checkout-footer-actions .checkout-left-column[b-4uv516ohec] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    flex: 1 0 0;
}

.checkout-footer-actions .checkout-left-column .urgente-container[b-4uv516ohec] {
    margin-left: auto;
}

.checkout-footer-actions .checkout-right-column .boton-2[b-4uv516ohec] {
    flex: 1 1 auto;
}

.checkout-footer-actions .boton-1[b-4uv516ohec], .checkout-footer-actions .boton-2[b-4uv516ohec] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.checkout-footer-actions .boton-1[b-4uv516ohec] {
    background-color: var(--blanco);
    border: 1px solid;
    border-color: var(--primario);
    width: 335px;
    max-width: 100%;
}

.checkout-footer-actions .boton-1:hover[b-4uv516ohec] {
    background-color: var(--primario);
}

.checkout-footer-actions .boton-2[b-4uv516ohec] {
    background-color: var(--primario);
}

.checkout-footer-actions .boton-2:hover[b-4uv516ohec] {
    background-color: #80C87C;
}

.checkout-footer-actions .state-layer[b-4uv516ohec] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.checkout-footer-actions .label-text[b-4uv516ohec] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.checkout-footer-actions .boton-1 .label-text[b-4uv516ohec] {
    color: var(--primario);
}

.checkout-footer-actions .boton-1:hover .label-text[b-4uv516ohec] {
    color: var(--blanco);
}

.checkout-footer-actions .boton-2 .label-text[b-4uv516ohec] {
    color: var(--blanco);
}

.checkout-footer-actions .checkout-right-column[b-4uv516ohec] {
    display: flex;
    width: 673px;
    max-width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    gap: 20px;
    flex-wrap: wrap;
}

.page-blocker[b-4uv516ohec] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: wait;
}

.page-blocker-content[b-4uv516ohec] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    font-weight: 600;
}

.busy-text[b-4uv516ohec] {
    font-size: 0.95rem;
    color: #555;
}

/* =====================================================================
   RESPONSIVE — el layout base ya usa clamp() para paddings/gaps; aquí los
   breakpoints que APILAN columnas para que el botón de tramitar SIEMPRE
   sea visible (antes el layout fijo de 1920px lo dejaba fuera del viewport).
   ===================================================================== */
@media (max-width: 1200px) {
    .checkout-main-content[b-4uv516ohec],
    .checkout-footer-actions[b-4uv516ohec] {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(24px, 4vw, 50px);
    }
    .checkout-main-content .checkout-left-column[b-4uv516ohec],
    .checkout-main-content .checkout-right-column[b-4uv516ohec],
    .checkout-footer-actions .checkout-left-column[b-4uv516ohec],
    .checkout-footer-actions .checkout-right-column[b-4uv516ohec] {
        width: 100%;
        max-width: 100%;
    }
    /* Acciones (atrás / tramitar) apiladas y a ancho completo → botón siempre visible */
    .checkout-footer-actions .checkout-left-column[b-4uv516ohec],
    .checkout-footer-actions .checkout-right-column[b-4uv516ohec] {
        flex-direction: column;
        align-items: stretch;
    }
    .checkout-footer-actions .checkout-left-column .urgente-container[b-4uv516ohec] {
        margin-left: 0;
    }
    .checkout-footer-actions .boton-1[b-4uv516ohec],
    .checkout-footer-actions .boton-2[b-4uv516ohec] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .checkout-tabs-header .tab-item span[b-4uv516ohec] { font-size: 18px; }
    .checkout-main-content .checkout-right-column .productos-grid[b-4uv516ohec] { padding: clamp(14px, 4vw, 30px); }
    .checkout-main-content .checkout-right-column .totales-box[b-4uv516ohec] { padding: clamp(16px, 4vw, 30px); }
    /* Formulario de datos: etiqueta encima del campo en móvil */
    .checkout-main-content .checkout-left-column .datos-pedido-form .form-field[b-4uv516ohec] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .checkout-main-content .checkout-left-column .datos-pedido-form .form-field label[b-4uv516ohec] {
        min-width: 0;
        text-align: left;
    }
    /* Totales: etiqueta flexible para no desbordar en pantallas estrechas */
    .checkout-main-content .checkout-right-column .total-label[b-4uv516ohec],
    .checkout-main-content .checkout-right-column .total-label-final[b-4uv516ohec] {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Components/Pages/CondicionesUso.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.condiciones-uso-page[b-5ztm5p7k4r] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;

    /* Paddings */
    --padding-horizontal: 115px;
    --padding-bottom: 100px;

    /* Spacing */
    --gap-sections: 60px;
    --gap-title-content: 40px;
    --gap-page-top: 30px;

    /* Typography */
    --font-headline: clamp(22px, 1.67vw, 32px);
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-body: clamp(12px, 0.73vw, 14px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--padding-horizontal) var(--padding-bottom);
    position: relative;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.condiciones-uso-page .al-container[b-5ztm5p7k4r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-page-top);
    width: 100%;
}

/* ============================================= */
/* HEADER - TÍTULO Y BOTÓN VOLVER */
/* ============================================= */
.condiciones-uso-page .al-header[b-5ztm5p7k4r] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.condiciones-uso-page .al-title[b-5ztm5p7k4r] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    line-height: normal;
    margin: 0;
}

.condiciones-uso-page .al-back-arrow[b-5ztm5p7k4r] {
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* ============================================= */
/* CONTENIDO */
/* ============================================= */
.condiciones-uso-page .al-content[b-5ztm5p7k4r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sections);
    width: 100%;
}

.condiciones-uso-page .al-section[b-5ztm5p7k4r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-title-content);
    width: 100%;
}

/* Título principal H1 */
.condiciones-uso-page .al-main-heading[b-5ztm5p7k4r] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline);
    color: var(--negro);
    line-height: 1.25;
    margin: 0;
}

/* Subtítulos H2 */
.condiciones-uso-page .al-section-title[b-5ztm5p7k4r] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0.15px;
    line-height: 1.5;
    margin: 0;
}

/* Texto del cuerpo */
.condiciones-uso-page .al-text[b-5ztm5p7k4r] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    letter-spacing: 0.25px;
    line-height: 1.43;
    margin: 0;
    white-space: pre-wrap;
}

/* Enlace inline (Política de privacidad) */
.condiciones-uso-page .al-text a[b-5ztm5p7k4r] {
    color: var(--negro);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

.condiciones-uso-page .al-text a:hover[b-5ztm5p7k4r] {
    color: #3CAA36;
    background-size: 100% 2px;
    opacity: 1;
}

/* ============================================= */
/* RESPONSIVE */
/* ============================================= */
@media (max-width: 768px) {
    .condiciones-uso-page[b-5ztm5p7k4r] {
        padding: 0 16px 50px;
    }

    .condiciones-uso-page .al-section[b-5ztm5p7k4r] {
        gap: 20px;
    }

    .condiciones-uso-page .al-content[b-5ztm5p7k4r] {
        gap: 30px;
    }
}
/* /Components/Pages/CondicionesVenta.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.condiciones-venta-page[b-nbm7xua8m3] {
    /* Colores */
    --negro: #212121;
    --texto-negro-suave: #2D2E2E;
    --blanco: #FFFFFF;

    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-horizontal: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(50px, 5.21vw, 100px);

    /* Spacing */
    --gap-sections: clamp(30px, 3.13vw, 60px);
    --gap-title-content: clamp(20px, 2.08vw, 40px);
    --gap-small: clamp(8px, 0.52vw, 10px);
    --gap-medium: clamp(15px, 1.04vw, 20px);
    --gap-page-top: clamp(15px, 1.56vw, 30px);

    /* Typography */
    --font-headline: clamp(22px, 1.67vw, 32px);
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-body-large: clamp(14px, 0.83vw, 16px);
    --font-body-medium: clamp(12px, 0.73vw, 14px);
    --font-page-title: clamp(14px, 0.83vw, 16px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--padding-horizontal) var(--padding-bottom);
    position: relative;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.condiciones-venta-page .cv-container[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-page-top);
    width: 100%;
    position: relative;
}

/* ============================================= */
/* HEADER - TÍTULO Y BOTÓN VOLVER */
/* ============================================= */
.condiciones-venta-page .cv-header[b-nbm7xua8m3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.condiciones-venta-page .cv-title[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-page-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
}

.condiciones-venta-page .cv-back-arrow[b-nbm7xua8m3] {
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* ============================================= */
/* CONTENIDO */
/* ============================================= */
.condiciones-venta-page .cv-content[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-title-content);
    width: 100%;
}

/* Secciones */
.condiciones-venta-page .cv-section-principal[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-title-content);
    width: 100%;
}

.condiciones-venta-page .cv-section[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
    width: 100%;
}

/* Título principal (H1) */
.condiciones-venta-page .cv-main-heading[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-headline);
    color: var(--negro);
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

/* Subtítulos de sección (H2) */
.condiciones-venta-page .cv-section-title[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0.15px;
    line-height: 1.5;
    margin: 0;
    gap: clamp(5px, 1vw, 3px);
}

/* Texto del cuerpo */
.condiciones-venta-page .cv-text[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-medium);
    color: var(--negro);
    letter-spacing: 0.25px;
    line-height: 1.43;
    margin: 0;
}

/* Listas dentro del contenido HTML de una sección */
.condiciones-venta-page .cv-text ul[b-nbm7xua8m3] {
    margin: 10px 0 0;
    padding-left: 22px;
    list-style: disc;
}

.condiciones-venta-page .cv-text li[b-nbm7xua8m3] {
    margin-bottom: var(--gap-small);
}

.condiciones-venta-page .cv-text strong[b-nbm7xua8m3] {
    font-weight: 700;
}

.condiciones-venta-page .cv-intro-text[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-medium);
    color: var(--negro);
    letter-spacing: 0.25px;
    line-height: 1.43;
    margin: 0;
}

/* ============================================= */
/* LISTAS CON BULLETS */
/* ============================================= */
.condiciones-venta-page .cv-list-container[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-page-top);
    width: 100%;
}

.condiciones-venta-page .cv-list-intro[b-nbm7xua8m3] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-medium);
    color: var(--negro);
    letter-spacing: 0.25px;
    line-height: 1.43;
    margin: 0;
}

.condiciones-venta-page .cv-list[b-nbm7xua8m3] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    width: 100%;
}

.condiciones-venta-page .cv-list-item[b-nbm7xua8m3] {
    display: flex;
    gap: var(--gap-medium);
    align-items: flex-start;
    width: 100%;
}

.condiciones-venta-page .cv-bullet[b-nbm7xua8m3] {
    width: 8px;
    height: auto;
    flex-shrink: 0;
    margin-top: 7px;
}

.condiciones-venta-page .cv-list-text[b-nbm7xua8m3] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body-large);
    color: var(--texto-negro-suave);
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
}

/* ============================================= */
/* RESPONSIVE */
/* ============================================= */
@media (max-width: 768px) {
    .condiciones-venta-page[b-nbm7xua8m3] {
        padding: 0 16px 50px;
    }

    .condiciones-venta-page .cv-section[b-nbm7xua8m3] {
        gap: 20px;
    }

    .condiciones-venta-page .cv-content[b-nbm7xua8m3] {
        gap: 30px;
    }
}
/* /Components/Pages/ConsultaPedidos.razor.rz.scp.css */
/* =============================================
   CONSULTA PEDIDOS — Scoped CSS
   Patrón fluid-responsive (ver Home.razor.css / Lista.razor.css)
   ============================================= */

/* ============================================= */
/* VARIABLES CSS                                  */
/* ============================================= */
.consulta-pedidos[b-n4bi0yd8s7] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --black-fonts-headings: #2D2E2E;
    --font-family: 'Nunito Sans', Helvetica, sans-serif;

    /* Sistema responsive */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(40px, 5.21vw, 100px);
    --section-gap: clamp(30px, 3.91vw, 75px);
    --content-gap: clamp(16px, 1.56vw, 30px);

    /* Tipografía fluida */
    --font-title-section: clamp(16px, 1.15vw, 22px);
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-small: clamp(10px, 0.63vw, 12px);

    /* Formulario de filtros */
    --form-padding: clamp(20px, 3.91vw, 75px);
    --form-gap-h: clamp(20px, 5.21vw, 100px);
    --form-inner-gap: clamp(12px, 1.04vw, 20px);
    --form-section-gap: clamp(20px, 2.6vw, 50px);
    --input-height: clamp(48px, 3.07vw, 59px);

    /* Botones */
    --btn-height: clamp(44px, 2.71vw, 52px);
    --btn-help-width: clamp(280px, 30.83vw, 592px);

    /* Tabla */
    --col-fecha: clamp(95px, 6.25vw, 120px);
    --col-pedido: clamp(110px, 9.38vw, 180px);
    --col-usuario: clamp(110px, 9.38vw, 180px);
    --col-importe: clamp(100px, 9.38vw, 180px);
    --col-ahorro: clamp(80px, 6.77vw, 130px);
    --col-acciones: clamp(70px, 5.21vw, 100px);
    --td-padding-v: clamp(8px, 0.78vw, 12px);

    /* Acciones tabla */
    --icon-size: clamp(20px, 1.25vw, 24px);

    /* Layout raíz */
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--section-gap);
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    position: relative;
    background-color: var(--blanco);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ============================================= */
/* FRAMES Y BLOQUES                               */
/* ============================================= */
.consulta-pedidos .frame[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--content-gap);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TÍTULO NAVEGACIÓN                              */
/* ============================================= */
.consulta-pedidos .titulo[b-n4bi0yd8s7] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.consulta-pedidos h2[b-n4bi0yd8s7] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1px;
    font-family: var(--font-family);
    font-weight: 700;
    color: #000;
    font-size: var(--font-body);
    letter-spacing: 0;
    line-height: normal;
}

.consulta-pedidos .iconos[b-n4bi0yd8s7] {
    position: absolute;
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    top: 19px;
    left: 0;
}

/* ============================================= */
/* CABECERA: título sección + botón BUSCAR        */
/* ============================================= */
.consulta-pedidos .div[b-n4bi0yd8s7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    gap: var(--content-gap);
    flex-wrap: wrap;
}

.consulta-pedidos .text-wrapper[b-n4bi0yd8s7] {
    position: relative;
    width: fit-content;
    font-family: var(--font-family);
    font-weight: 700;
    color: #000;
    font-size: var(--font-title-section);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

/* Botón BUSCAR */
.consulta-pedidos .boton[b-n4bi0yd8s7] {
    display: inline-flex;
    flex-direction: column;
    height: var(--btn-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.consulta-pedidos .boton:hover[b-n4bi0yd8s7] {
    background-color: #80C87C;
}

.consulta-pedidos .state-layer[b-n4bi0yd8s7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.consulta-pedidos .label-text[b-n4bi0yd8s7] {
    position: relative;
    width: fit-content;
    font-family: var(--font-family);
    font-weight: 500;
    color: var(--blanco);
    font-size: var(--font-body);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ============================================= */
/* ALERTAS                                        */
/* ============================================= */
.consulta-pedidos .alert p[b-n4bi0yd8s7] {
    margin-bottom: 0;
}

/* ============================================= */
/* SECCIÓN 1: BLOQUE DE FILTROS (frame-2)         */
/* ============================================= */
.consulta-pedidos .frame-2[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--form-padding);
    align-self: stretch;
    width: 100%;
    background-color: var(--gris-10);
    border-radius: 15px;
    box-sizing: border-box;
}

/* ── Fila 1: Código de pedido + Dirección ── */
.consulta-pedidos .frame-3[b-n4bi0yd8s7] {
    display: flex;
    padding-bottom: var(--form-section-gap);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-inner-gap);
    align-self: stretch;
    border-bottom: 1px dashed #c8c8c8;
    width: 100%;
}

.consulta-pedidos .frame-4[b-n4bi0yd8s7] {
    display: flex;
    align-items: flex-start;
    gap: var(--form-gap-h);
    align-self: stretch;
    width: 100%;
}

.consulta-pedidos .frame-5[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-inner-gap);
    flex: 1 0 0;
    min-width: 0;
}

/* Título de cada campo del filtro */
.consulta-pedidos .frame-6[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-inner-gap);
    align-self: stretch;
    border-bottom: 1px solid #d3d3d3;
    padding-bottom: 4px;
}

.consulta-pedidos .text-wrapper-2[b-n4bi0yd8s7] {
    color: var(--black-fonts-headings);
    font-family: var(--font-family);
    font-size: var(--font-title-section);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
}

.consulta-pedidos .text-wrapper-3[b-n4bi0yd8s7] {
    color: var(--black-fonts-headings);
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.consulta-pedidos .frame-7[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 0.83vw, 16px);
    align-self: stretch;
}

/* ── Fila 2: Descripción ── */
.consulta-pedidos .frame-desc[b-n4bi0yd8s7] {
    display: flex;
    padding-top: var(--form-section-gap);
    padding-bottom: var(--form-section-gap);
    flex-direction: column;
    align-items: stretch;
    gap: var(--form-inner-gap);
    align-self: stretch;
    width: 100%;
    border-bottom: 1px dashed #c8c8c8;
}

.consulta-pedidos .frame-desc-header[b-n4bi0yd8s7] {
    border-bottom: 1px solid #d3d3d3;
    padding-bottom: 8px;
}

/* ── Fila 3: Fechas ── */
.consulta-pedidos .frame-9[b-n4bi0yd8s7] {
    display: flex;
    padding-top: var(--form-section-gap);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-inner-gap);
    align-self: stretch;
    width: 100%;
}

/* ============================================= */
/* INPUTS Y SELECT                                */
/* ============================================= */
[b-n4bi0yd8s7] .consulta-pedidos .input {
    background-color: var(--blanco);
    border: 2px solid var(--gris-30);
    border-radius: 6px;
    color: var(--negro);
    display: flex;
    flex: 1;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: 400;
    height: var(--input-height);
    letter-spacing: 0.15px;
    line-height: 24px;
    overflow: hidden;
    padding: clamp(12px, 0.89vw, 17px) 16px;
    position: relative;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

[b-n4bi0yd8s7] .consulta-pedidos input::placeholder {
    color: #888;
}

[b-n4bi0yd8s7] .consulta-pedidos input:focus {
    border: 2px solid var(--primario);
    outline: none;
}

.consulta-pedidos .input-2[b-n4bi0yd8s7] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--blanco);
    border: 2px solid var(--gris-30);
    border-radius: 6px;
    color: var(--negro);
    flex: 1;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: 400;
    height: var(--input-height);
    letter-spacing: 0.15px;
    line-height: 24px;
    padding: clamp(12px, 0.89vw, 17px) 16px;
    padding-right: 50px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.consulta-pedidos .input-2:focus[b-n4bi0yd8s7] {
    border: 2px solid var(--primario);
    outline: none;
}

.consulta-pedidos .select-wrapper[b-n4bi0yd8s7] {
    position: relative;
    width: 100%;
}

.consulta-pedidos .arrow[b-n4bi0yd8s7] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: clamp(12px, 0.78vw, 15px);
    height: clamp(12px, 0.78vw, 15px);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.consulta-pedidos .select-wrapper:focus-within .arrow[b-n4bi0yd8s7] {
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================= */
/* TABLA: Wrapper y container                     */
/* ============================================= */
.consulta-pedidos .tabla-wrapper[b-n4bi0yd8s7] {
    padding: 15px 0;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
}

.consulta-pedidos .tabla-container[b-n4bi0yd8s7] {
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================= */
/* TABLA: Estilos principales                     */
/* ============================================= */
.consulta-pedidos .tabla-mejorada[b-n4bi0yd8s7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-family);
    font-size: var(--font-body);
    table-layout: fixed;
    padding: 0;
}

.consulta-pedidos .tabla-mejorada tbody tr:not(:last-child) td[b-n4bi0yd8s7] {
    border-bottom: 1px solid #d3d3d3;
}

.consulta-pedidos .tabla-mejorada thead[b-n4bi0yd8s7] {
    color: #000;
    font-weight: 700;
    position: relative;
}

.consulta-pedidos .tabla-mejorada thead[b-n4bi0yd8s7]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.consulta-pedidos .tabla-mejorada th[b-n4bi0yd8s7],
.consulta-pedidos .tabla-mejorada td[b-n4bi0yd8s7] {
    padding: var(--td-padding-v) clamp(6px, 0.52vw, 10px);
    text-align: center;
    vertical-align: middle;
}

.consulta-pedidos .tabla-mejorada th[b-n4bi0yd8s7] {
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

/* Anchos de columnas */
.consulta-pedidos .tabla-mejorada .th1[b-n4bi0yd8s7] { width: var(--col-fecha);    text-align: left; }
.consulta-pedidos .tabla-mejorada .th2[b-n4bi0yd8s7] { width: var(--col-pedido);   }
.consulta-pedidos .tabla-mejorada .th3[b-n4bi0yd8s7] { width: var(--col-usuario);  }
.consulta-pedidos .tabla-mejorada .th4[b-n4bi0yd8s7] { width: auto;                text-align: left; }
.consulta-pedidos .tabla-mejorada .th5[b-n4bi0yd8s7] { width: var(--col-importe);  text-align: right; }
.consulta-pedidos .tabla-mejorada .th6[b-n4bi0yd8s7] { width: var(--col-ahorro);   text-align: center; }
.consulta-pedidos .tabla-mejorada .th7[b-n4bi0yd8s7] { width: var(--col-acciones); }

.consulta-pedidos .tabla-mejorada th .subheader[b-n4bi0yd8s7] {
    font-size: 0.8em;
    color: #888;
    font-weight: 400;
}

/* Celdas de datos */
.consulta-pedidos .tabla-mejorada .td1[b-n4bi0yd8s7] { text-align: left;  white-space: nowrap; }
.consulta-pedidos .tabla-mejorada .td2[b-n4bi0yd8s7] { text-align: center; line-height: 1.5; }
.consulta-pedidos .tabla-mejorada .td3[b-n4bi0yd8s7] { text-align: center; line-height: 1.5; }
.consulta-pedidos .tabla-mejorada .td4[b-n4bi0yd8s7] { text-align: left;  word-break: break-word; }
.consulta-pedidos .tabla-mejorada .td5[b-n4bi0yd8s7] { text-align: right; white-space: nowrap; font-weight: 700; }
.consulta-pedidos .tabla-mejorada .td6[b-n4bi0yd8s7] { text-align: center; }

.consulta-pedidos .ahorro-valor[b-n4bi0yd8s7] {
    color: var(--primario);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-body);
    letter-spacing: 0.15px;
    line-height: 1.5;
    white-space: nowrap;
}

/* TD7: Acciones (descargar + ver) */
.consulta-pedidos .tabla-mejorada .td7 .td-content[b-n4bi0yd8s7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 1.3vw, 25px);
}

.consulta-pedidos .img[b-n4bi0yd8s7] {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s;
}

.consulta-pedidos .img:hover[b-n4bi0yd8s7] {
    transform: scale(1.15);
    opacity: 0.7;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?"                          */
/* ============================================= */
.consulta-pedidos .state-layer-wrapper[b-n4bi0yd8s7] {
    display: flex;
    flex-direction: column;
    width: var(--btn-help-width);
    height: var(--btn-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
    align-self: center;
}

.consulta-pedidos .state-layer-wrapper:hover[b-n4bi0yd8s7] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.consulta-pedidos .state-layer-wrapper:hover .label-text-2[b-n4bi0yd8s7] {
    color: var(--blanco);
}

.consulta-pedidos .label-text-2[b-n4bi0yd8s7] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--font-family);
    font-weight: 500;
    color: var(--negro);
    font-size: var(--font-body);
    text-align: center;
    white-space: nowrap;
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                         */
/* ============================================= */
.consulta-pedidos .spinner-border[b-n4bi0yd8s7] {
    color: var(--blanco);
}

.page-blocker[b-n4bi0yd8s7] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-n4bi0yd8s7] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE — TABLET (max-width: 1024px)        */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .consulta-pedidos[b-n4bi0yd8s7] {
        --padding-lateral: 30px;
        --padding-bottom: 60px;
        --section-gap: 40px;
        --content-gap: 20px;
        --font-title-section: 18px;
        --font-body: 14px;
        --font-small: 11px;
        --form-padding: 30px;
        --form-gap-h: 40px;
        --form-section-gap: 30px;
        --form-inner-gap: 14px;
        --input-height: 52px;
        --btn-height: 48px;
        --col-fecha: 100px;
        --col-pedido: 140px;
        --col-usuario: 140px;
        --col-importe: 130px;
        --col-ahorro: 100px;
        --col-acciones: 80px;
        --td-padding-v: 10px;
        --icon-size: 20px;
    }

    .consulta-pedidos .tabla-mejorada[b-n4bi0yd8s7] {
        table-layout: auto;
    }

    .consulta-pedidos .tabla-mejorada .th1[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th2[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th3[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th4[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th5[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th6[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada .th7[b-n4bi0yd8s7] {
        width: auto;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE — MÓVIL (max-width: 840px)          */
/* Filtros apilados · Tabla → tarjetas grid       */
/* ============================================= */
/* ============================================= */
@media (max-width: 840px) {
    .consulta-pedidos[b-n4bi0yd8s7] {
        --padding-lateral: 16px;
        --padding-bottom: 40px;
        --section-gap: 30px;
        --content-gap: 16px;
        --font-title-section: 16px;
        --font-body: 14px;
        --font-small: 10px;
        --form-padding: 20px;
        --form-gap-h: 16px;
        --form-section-gap: 20px;
        --form-inner-gap: 12px;
        --input-height: 50px;
        --btn-height: 46px;
        --td-padding-v: 12px;
        --icon-size: 22px;
    }

    /* ── Cabecera: botón buscar full width ── */
    .consulta-pedidos .div[b-n4bi0yd8s7] {
        flex-direction: column;
        align-items: stretch;
    }

    .consulta-pedidos .boton[b-n4bi0yd8s7] {
        width: 100%;
    }

    /* ── Filtros: grupos en columna ── */
    .consulta-pedidos .frame-4[b-n4bi0yd8s7] {
        flex-direction: column;
        gap: 16px;
    }

    .consulta-pedidos .frame-5[b-n4bi0yd8s7] {
        flex: none;
        width: 100%;
    }

    /* ── Botón ¿Te ayudamos? full width ── */
    .consulta-pedidos .state-layer-wrapper[b-n4bi0yd8s7] {
        width: 100%;
    }

    /* ── TABLA → TARJETAS ── */
    .consulta-pedidos .tabla-container[b-n4bi0yd8s7] {
        overflow-x: visible;
    }

    .consulta-pedidos .tabla-mejorada[b-n4bi0yd8s7] {
        table-layout: auto;
    }

    .consulta-pedidos .tabla-mejorada thead[b-n4bi0yd8s7] {
        display: none;
    }

    .consulta-pedidos .tabla-mejorada thead[b-n4bi0yd8s7]::after {
        display: none;
    }

    .consulta-pedidos .tabla-mejorada[b-n4bi0yd8s7],
    .consulta-pedidos .tabla-mejorada tbody[b-n4bi0yd8s7] {
        display: block;
        width: 100%;
    }

    .consulta-pedidos .tabla-mejorada tbody tr:not(:last-child) td[b-n4bi0yd8s7] {
        border-bottom: none;
    }

    /* Tarjeta: grid 2 columnas */
    .consulta-pedidos .tabla-mejorada tbody tr[b-n4bi0yd8s7] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "td1  td2"
            "td4  td4"
            "td3  td7"
            "td5  td6";
        gap: 0;
        padding: 16px 0;
        border-bottom: 1px dashed var(--gris-30);
    }

    .consulta-pedidos .tabla-mejorada tbody tr:last-child[b-n4bi0yd8s7] {
        border-bottom: none;
    }

    .consulta-pedidos .tabla-mejorada td[b-n4bi0yd8s7] {
        padding: 10px 0;
        text-align: left;
        border-bottom: none;
        vertical-align: top;
    }

    /* ── TD1: Fecha ── */
    .consulta-pedidos .tabla-mejorada .td1[b-n4bi0yd8s7] {
        grid-area: td1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .consulta-pedidos .tabla-mejorada .td1[b-n4bi0yd8s7]::before {
        content: 'FECHA';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD2: Nº Pedido ── */
    .consulta-pedidos .tabla-mejorada .td2[b-n4bi0yd8s7] {
        grid-area: td2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        text-align: right;
    }

    .consulta-pedidos .tabla-mejorada .td2[b-n4bi0yd8s7]::before {
        content: 'Nº PEDIDO';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD4: Dirección (fila completa) ── */
    .consulta-pedidos .tabla-mejorada .td4[b-n4bi0yd8s7] {
        grid-area: td4;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 0;
        border-top: 1px solid var(--gris-30);
        border-bottom: 1px solid var(--gris-30);
        text-align: left;
        word-break: break-word;
    }

    .consulta-pedidos .tabla-mejorada .td4[b-n4bi0yd8s7]::before {
        content: 'DIRECCIÓN';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD3: Usuario ── */
    .consulta-pedidos .tabla-mejorada .td3[b-n4bi0yd8s7] {
        grid-area: td3;
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: left;
    }

    .consulta-pedidos .tabla-mejorada .td3[b-n4bi0yd8s7]::before {
        content: 'USUARIO';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD7: Acciones ── */
    .consulta-pedidos .tabla-mejorada .td7[b-n4bi0yd8s7] {
        grid-area: td7;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding-bottom: 10px;
    }

    .consulta-pedidos .tabla-mejorada .td7 .td-content[b-n4bi0yd8s7] {
        justify-content: flex-end;
        gap: 16px;
    }

    /* ── TD5: Importe ── */
    .consulta-pedidos .tabla-mejorada .td5[b-n4bi0yd8s7] {
        grid-area: td5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--gris-30);
        text-align: left;
    }

    .consulta-pedidos .tabla-mejorada .td5[b-n4bi0yd8s7]::before {
        content: 'IMPORTE';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD6: Ahorro ── */
    .consulta-pedidos .tabla-mejorada .td6[b-n4bi0yd8s7] {
        grid-area: td6;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--gris-30);
        text-align: right;
    }

    .consulta-pedidos .tabla-mejorada .td6[b-n4bi0yd8s7]::before {
        content: 'AHORRO';
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE — MÓVIL PEQUEÑO (max-width: 480px)  */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .consulta-pedidos[b-n4bi0yd8s7] {
        --padding-lateral: 12px;
        --padding-bottom: 30px;
        --section-gap: 24px;
        --content-gap: 12px;
        --font-title-section: 15px;
        --font-body: 13px;
        --font-small: 9px;
        --form-padding: 16px;
        --form-section-gap: 16px;
        --form-inner-gap: 10px;
        --input-height: 46px;
        --btn-height: 44px;
        --icon-size: 20px;
    }

    .consulta-pedidos h2[b-n4bi0yd8s7] {
        padding: 0 30px;
    }
}

/* ============================================= */
/* ACCESIBILIDAD                                  */
/* ============================================= */
@media (prefers-reduced-motion: reduce) {
    .consulta-pedidos *[b-n4bi0yd8s7],
    .consulta-pedidos *[b-n4bi0yd8s7]::before,
    .consulta-pedidos *[b-n4bi0yd8s7]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Contacto.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.contacto-page[b-vle6erbvvn] {
    /* Colores */
    --negro: #141414;
    --texto-negro-suave: #323332;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-10: #F5F5F5;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-input: #ABABAB;
    --black-fonts-headings: #2D2E2E;

    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-md: clamp(15px, 1.25vw, 24px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --gap-xl: clamp(50px, 3.91vw, 75px);
    --gap-columns: clamp(30px, 5.99vw, 115px);

    /* Tipografía fluida */
    --font-heading-xl: clamp(22px, 1.67vw, 32px);
    --font-heading-lg: clamp(16px, 1.25vw, 24px);
    --font-heading-md: clamp(18px, 1.15vw, 22px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-body-sm: clamp(11px, 0.73vw, 14px);
    --font-input: clamp(14px, 0.94vw, 18px);
    --font-title: clamp(14px, 0.83vw, 16px);

    /* Inputs y botones */
    --input-height: clamp(50px, 3.07vw, 59px);
    --input-padding: clamp(12px, 0.83vw, 16px);
    --input-border-radius: clamp(4px, 0.31vw, 6px);
    --button-height: clamp(48px, 2.81vw, 54px);

    /* Mapa */
    --map-height: 130px;

    /* Anchos */
    --info-column-width: clamp(280px, 27.76vw, 533px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.ct-container[b-vle6erbvvn] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.ct-header[b-vle6erbvvn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.ct-titulo[b-vle6erbvvn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(16px, 1.04vw, 20px);
    position: relative;
    width: 100%;
}

.ct-titulo-text[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.ct-back-arrow[b-vle6erbvvn] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

.ct-back-arrow img[b-vle6erbvvn] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* SECCIÓN DEL MAPA */
/* ============================================= */
.ct-map-section[b-vle6erbvvn] {
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(-1 * var(--padding-lateral));
    height: var(--map-height);
    overflow: hidden;
    border-radius: 0;
}

.ct-map-section iframe[b-vle6erbvvn] {
    display: block;
}

/* ============================================= */
/* CONTENIDO PRINCIPAL (FORMULARIO + INFO) */
/* ============================================= */
.ct-main-content[b-vle6erbvvn] {
    display: flex;
    gap: var(--gap-columns);
    width: 100%;
    align-items: flex-start;
}

/* ============================================= */
/* COLUMNA IZQUIERDA: FORMULARIO */
/* ============================================= */
.ct-form-column[b-vle6erbvvn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 28px;
    min-width: 0;
}

/* Intro */
.ct-intro[b-vle6erbvvn] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.ct-main-heading[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-xl);
    color: var(--texto-negro-suave);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

.ct-intro-text[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Formulario */
.ct-form[b-vle6erbvvn] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ct-form-row[b-vle6erbvvn] {
    display: flex;
    gap: var(--gap-md);
    /* 24px horizontal spacing between columns */
    width: 100%;
    margin-bottom: var(--gap-md);
    /* 24px vertical spacing */
}

.ct-form-row:last-child[b-vle6erbvvn] {
    margin-bottom: 0;
    /* Remove margin from last row */
}

.ct-form-row.ct-two-columns[b-vle6erbvvn] {
    display: flex;
    gap: var(--gap-md);
}

/* Separator line */
.ct-separator[b-vle6erbvvn] {
    width: 100%;
    height: 1px;
    background-color: var(--gris-40);
    margin: 0;
    margin-bottom: var(--gap-md);
    /* Space after separator */
}

.ct-form-row.ct-message-row[b-vle6erbvvn] {
    align-items: stretch;
    min-height: auto;
}

.ct-input-group[b-vle6erbvvn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ct-input-group.ct-message-group[b-vle6erbvvn] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Inputs */
.ct-input[b-vle6erbvvn],
.ct-textarea[b-vle6erbvvn] {
    width: 100%;
    padding: 17px 16px;
    background-color: var(--gris-10);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-input);
    color: var(--black-fonts-headings); /* texto escrito: oscuro */
    line-height: normal;
    letter-spacing: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.ct-input[b-vle6erbvvn]::placeholder,
.ct-textarea[b-vle6erbvvn]::placeholder {
    color: var(--gris-50); /* placeholder: gris claro */
    font-weight: 300;
}

.ct-input[b-vle6erbvvn] {
    height: var(--input-height);
}

.ct-textarea[b-vle6erbvvn] {
    flex: 1;
    min-height: 100%;
    resize: none;
}

.ct-input:focus[b-vle6erbvvn],
.ct-textarea:focus[b-vle6erbvvn] {
    outline: none;
    background-color: #eeeeee;
}

/* ::deep para alcanzar InputText/InputTextArea de Blazor */
.ct-input-group[b-vle6erbvvn]  input,
.ct-input-group[b-vle6erbvvn]  textarea {
    width: 100%;
    padding: 17px 16px;
    background-color: var(--gris-10);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-input);
    color: var(--black-fonts-headings); /* texto escrito: oscuro */
    line-height: normal;
    letter-spacing: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
    outline: none;
}

.ct-input-group[b-vle6erbvvn]  input::placeholder,
.ct-input-group[b-vle6erbvvn]  textarea::placeholder {
    color: var(--gris-50); /* placeholder: gris claro */
    font-weight: 300;
}

.ct-input-group[b-vle6erbvvn]  input:focus,
.ct-input-group[b-vle6erbvvn]  textarea:focus {
    outline: none;
    background-color: #eeeeee;
}

.ct-input-group[b-vle6erbvvn]  input {
    height: var(--input-height);
}

.ct-input-group.ct-message-group[b-vle6erbvvn]  textarea {
    flex: 1;
    min-height: 100%;
    resize: none;
}

/* ============================================= */
/* CHECKBOXES PERSONALIZADOS                     */
/* ============================================= */
.ct-check-row[b-vle6erbvvn] {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 0.63vw, 12px);
}

.ct-check-row--newsletter[b-vle6erbvvn] {
    padding-bottom: 30px;
}

/* Ocultar el checkbox nativo de Blazor */
.ct-custom-checkbox[b-vle6erbvvn] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(18px, 1.04vw, 20px);
    height: clamp(18px, 1.04vw, 20px);
    cursor: pointer;
    margin: 0;
}

.ct-custom-checkbox[b-vle6erbvvn]  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

/* Checkmark base */
.ct-checkmark[b-vle6erbvvn] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primario);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-checkmark[b-vle6erbvvn]::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* Cuando está desmarcado */
.ct-custom-checkbox[b-vle6erbvvn]  input[type="checkbox"]:not(:checked) ~ .ct-checkmark {
    background-color: #FCFCFD;
    border: 1.5px solid #6C7275;
}

.ct-custom-checkbox[b-vle6erbvvn]  input[type="checkbox"]:not(:checked) ~ .ct-checkmark::after {
    display: none;
}

/* Labels de checkboxes */
.ct-check-label[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--texto-negro-suave);
    line-height: normal;
    cursor: default;
}

.ct-check-link[b-vle6erbvvn] {
    color: var(--texto-negro-suave);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

.ct-check-link:hover[b-vle6erbvvn] {
    color: var(--primario);
    background-size: 100% 2px;
}

/* Validación */
.ct-text-danger[b-vle6erbvvn] {
    color: #dc3545;
    font-size: clamp(10px, 0.63vw, 12px);
    margin-top: 4px;
    display: block;
}

/* Anular los bordes de validación de Blazor (.valid / .invalid) */
.ct-input-group[b-vle6erbvvn]  input.valid,
.ct-input-group[b-vle6erbvvn]  input.invalid,
.ct-input-group[b-vle6erbvvn]  textarea.valid,
.ct-input-group[b-vle6erbvvn]  textarea.invalid,
.ct-input-group[b-vle6erbvvn]  input.modified,
.ct-input-group[b-vle6erbvvn]  textarea.modified {
    border: none;
    box-shadow: none;
    outline: none;
}

.ct-custom-checkbox[b-vle6erbvvn]  input.valid,
.ct-custom-checkbox[b-vle6erbvvn]  input.invalid,
.ct-custom-checkbox[b-vle6erbvvn]  input.modified {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Columna de envío (info + botón) */
.ct-submit-column[b-vle6erbvvn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: flex-end;
    min-width: 0;
}

.ct-info-message[b-vle6erbvvn] {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 0.63vw, 12px);
    flex: 1;
}

.ct-info-icon[b-vle6erbvvn] {
    flex-shrink: 0;
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

.ct-info-text[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--texto-negro-suave);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Botón */
.ct-submit-button[b-vle6erbvvn] {
    width: 100%;
    height: var(--button-height);
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-submit-button:hover[b-vle6erbvvn] {
    background-color: #2e8a2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(60, 170, 54, 0.3);
}

.ct-submit-button:active[b-vle6erbvvn] {
    transform: translateY(0);
}

.ct-submit-button:disabled[b-vle6erbvvn] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ============================================= */
/* COLUMNA DERECHA: OFICINAS */
/* ============================================= */
.ct-info-column[b-vle6erbvvn] {
    flex-shrink: 0;
    width: var(--info-column-width);
    display: flex;
    flex-direction: column;
}

/* El encabezado de la columna de oficinas. Faltaba: los nombres de ciudad quedaban
   sueltos, sin decir de que eran, y un lector de pantalla tampoco lo sabia. */
.ct-oficinas-titulo[b-vle6erbvvn] {
    margin: 0 0 clamp(8px, 0.83vw, 16px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-heading-lg, 1.5rem);
    color: var(--black-fonts-headings);
    line-height: 1.2;
}

/* Cuando no hay ninguna oficina que ensenar: se dice, en vez de dejar el hueco. */
.ct-oficinas-vacio[b-vle6erbvvn] {
    font-family: 'Nunito Sans', sans-serif;
    color: var(--black-fonts-body, #414a45);
}

.ct-oficinas-list[b-vle6erbvvn] {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.42vw, 8px);
}

/* Items de oficina */
.ct-oficina-item[b-vle6erbvvn] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--gris-40);
    transition: all 0.3s ease;
}

.ct-oficina-item.ct-oficina-active[b-vle6erbvvn] {
    border-bottom: 2px solid var(--primario);
    border-radius: var(--input-border-radius);
    overflow: hidden;
}

.ct-oficina-header[b-vle6erbvvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(20px, 1.46vw, 28px) clamp(16px, 0.99vw, 19px);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    gap: clamp(30px, 2.34vw, 45px);
    transition: all 0.3s ease;
}

.ct-oficina-header:hover[b-vle6erbvvn],
.ct-oficina-header:focus[b-vle6erbvvn] {
    background: none;
    outline: none;
}

.ct-oficina-title[b-vle6erbvvn] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-heading-md);
    color: var(--black-fonts-headings);
    line-height: 1.27;
    letter-spacing: 0;
}

.ct-oficina-icon[b-vle6erbvvn] {
    flex-shrink: 0;
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    color: var(--negro);
    transition: transform 0.3s ease;
}

.ct-oficina-active .ct-oficina-icon[b-vle6erbvvn] {
    transform: rotate(90deg);
}

/* Contenido expandible */
.ct-oficina-content[b-vle6erbvvn] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 clamp(16px, 0.99vw, 19px);
}

.ct-oficina-active .ct-oficina-content[b-vle6erbvvn] {
    max-height: 300px;
    padding: 0 clamp(16px, 0.99vw, 19px) clamp(20px, 1.46vw, 28px);
}

.ct-oficina-info[b-vle6erbvvn] {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-sm);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.ct-oficina-address[b-vle6erbvvn] {
    flex: 1;
}

.ct-oficina-address p[b-vle6erbvvn],
.ct-oficina-contact p[b-vle6erbvvn] {
    margin: 0;
}

.ct-oficina-contact[b-vle6erbvvn] {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* ============================================= */
/* ESTILOS DE VALIDACIÓN Y ALERTAS */
/* ============================================= */
.text-danger[b-vle6erbvvn] {
    color: #dc3545;
    font-size: clamp(10px, 0.63vw, 12px);
    margin-top: 4px;
    display: block;
}

.alert[b-vle6erbvvn] {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success[b-vle6erbvvn] {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-danger[b-vle6erbvvn] {
    color: #7B1D1D;
    background-color: #FEE2E2;
    border: none;
    border-left: 4px solid #DC2626;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--font-body);
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15);
}

.spinner-border[b-vle6erbvvn] {
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-animation-b-vle6erbvvn 0.75s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spinner-border-animation-b-vle6erbvvn {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1280px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1280px) {
    .contacto-page[b-vle6erbvvn] {
        --padding-lateral: clamp(20px, 3vw, 40px);
        --gap-columns: clamp(48px, 5vw, 60px);
        --gap-sm: 10px;
        --gap-md: 16px;
        --gap-lg: 30px;
        --gap-xl: 50px;
        --info-column-width: clamp(250px, 35vw, 400px);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET PEQUEÑO (max-width: 1024px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .contacto-page[b-vle6erbvvn] {
        --padding-lateral: 30px;
        --gap-columns: 40px;
        --gap-sm: 10px;
        --gap-md: 16px;
        --gap-lg: 25px;
        --gap-xl: 40px;
        --font-heading-xl: 24px;
        --font-heading-lg: 18px;
        --font-heading-md: 19px;
        --font-body: 14px;
        --font-body-sm: 13px;
        --font-input: 16px;
        --font-title: 15px;
    }

    .ct-main-content[b-vle6erbvvn] {
        flex-direction: column;
    }

    .ct-info-column[b-vle6erbvvn] {
        width: 100%;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .contacto-page[b-vle6erbvvn] {
        --padding-lateral: 20px;
        --gap-sm: 8px;
        --gap-md: 12px;
        --gap-lg: 20px;
        --gap-xl: 24px;
        --font-heading-xl: 20px;
        --font-heading-lg: 16px;
        --font-heading-md: 17px;
        --font-body: 13px;
        --font-body-sm: 12px;
        --font-input: 15px;
        --font-title: 14px;
    }

    .ct-form-row.ct-two-columns[b-vle6erbvvn] {
        flex-direction: column;
    }

    .ct-form-row.ct-message-row[b-vle6erbvvn] {
        flex-direction: column;
        min-height: auto;
    }

    .ct-submit-column[b-vle6erbvvn] {
        gap: var(--gap-sm);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .contacto-page[b-vle6erbvvn] {
        --padding-lateral: 16px;
        --gap-sm: 6px;
        --gap-md: 10px;
        --gap-lg: 16px;
        --gap-xl: 20px;
        --font-heading-xl: 18px;
        --font-heading-lg: 15px;
        --font-heading-md: 16px;
        --font-body: 12px;
        --font-body-sm: 11px;
        --font-input: 14px;
        --font-title: 13px;
    }

    .ct-oficina-info[b-vle6erbvvn] {
        flex-direction: column;
        gap: var(--gap-md);
    }

    .ct-oficina-contact[b-vle6erbvvn] {
        text-align: left;
    }
}
/* /Components/Pages/ContactoIntegra.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE - CONTACTO INTEGRA   */
/* Patrón Home.razor: clamp() + CSS variables    */
/* ============================================= */
.ci-page[b-hslcd6puwo] {
    /* Colores (Figma design tokens) */
    --negro: #141414;
    --texto-negro-suave: #323332;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-10: #F5F5F5;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-input: #ABABAB;
    --black-fonts-headings: #2D2E2E;
    --neutral-04: #6C7275;

    /* Sistema responsive - Paddings fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(50px, 5.21vw, 100px);

    /* Gaps fluidos */
    --gap-sm: clamp(8px, 0.63vw, 12px);
    --gap-md: clamp(16px, 1.25vw, 24px);
    --gap-lg: clamp(30px, 2.6vw, 50px);
    --gap-header: clamp(25px, 2.34vw, 45px);
    --gap-columns: clamp(40px, 5.99vw, 115px);

    /* Tipografía fluida */
    --font-heading-xl: clamp(22px, 1.67vw, 32px);
    --font-heading-lg: clamp(18px, 1.25vw, 24px);
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-input: clamp(14px, 0.94vw, 18px);
    --font-title: clamp(13px, 0.83vw, 16px);

    /* Inputs y botones */
    --input-padding-x: clamp(12px, 0.83vw, 16px);
    --input-padding-y: clamp(14px, 0.89vw, 17px);
    --input-border-radius: clamp(4px, 0.31vw, 6px);
    --button-height: clamp(42px, 2.5vw, 48px);

    /* Anchos de columnas */
    --info-column-width: clamp(280px, 27.76vw, 533px);
    --info-padding-x: clamp(24px, 2.6vw, 50px);
    --info-padding-top: clamp(30px, 3.28vw, 63px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.ci-container[b-hslcd6puwo] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-header);
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN                       */
/* ============================================= */
.ci-header[b-hslcd6puwo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ci-titulo[b-hslcd6puwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
}

.ci-titulo-text[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: black;
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
    text-align: center;
}

.ci-back-arrow[b-hslcd6puwo] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-back-arrow img[b-hslcd6puwo] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* CONTENIDO PRINCIPAL (FORMULARIO + INFO)       */
/* ============================================= */
.ci-main-content[b-hslcd6puwo] {
    display: flex;
    gap: var(--gap-columns);
    width: 100%;
    align-items: flex-start;
}

/* ============================================= */
/* COLUMNA IZQUIERDA: FORMULARIO                 */
/* ============================================= */
.ci-form-column[b-hslcd6puwo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    min-width: 0;
}

/* Intro */
.ci-intro[b-hslcd6puwo] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 0.99vw, 19px);
}

.ci-main-heading[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-xl);
    color: var(--texto-negro-suave);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

.ci-intro-text[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* FORMULARIO                                    */
/* ============================================= */
.ci-form[b-hslcd6puwo] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ci-form-row[b-hslcd6puwo] {
    display: flex;
    gap: var(--gap-md);
    width: 100%;
    margin-bottom: var(--gap-md);
}

.ci-form-row:last-child[b-hslcd6puwo] {
    margin-bottom: 0;
}

.ci-form-row.ci-two-columns[b-hslcd6puwo] {
    display: flex;
    gap: var(--gap-md);
}

.ci-input-group[b-hslcd6puwo] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================= */
/* INPUTS — ::deep para alcanzar InputText/Area  */
/* ============================================= */
.ci-input-group[b-hslcd6puwo]  input,
.ci-input-group[b-hslcd6puwo]  textarea {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    background-color: var(--gris-10);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--font-input);
    color: var(--texto-negro-suave);
    line-height: normal;
    letter-spacing: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ci-input-group[b-hslcd6puwo]  input::placeholder,
.ci-input-group[b-hslcd6puwo]  textarea::placeholder {
    color: var(--gris-50);
    font-weight: 300;
}

.ci-input-group[b-hslcd6puwo]  input:focus,
.ci-input-group[b-hslcd6puwo]  textarea:focus {
    background-color: #fefefe;
    box-shadow: 0 0 0 1px var(--primario);
}

/* Textarea fila mensaje */
.ci-input-group.ci-message-group[b-hslcd6puwo]  textarea {
    flex: 1;
    min-height: 100%;
    resize: none;
}

/* ============================================= */
/* SEPARADOR DECORATIVO                          */
/* ============================================= */
.ci-separator[b-hslcd6puwo] {
    width: 100%;
    height: clamp(14px, 1.04vw, 20px);
    margin-bottom: var(--gap-md);
    border-bottom: 1px solid var(--gris-40);
}

/* ============================================= */
/* FILA MENSAJE (textarea + submit column)       */
/* ============================================= */
.ci-form-row.ci-message-row[b-hslcd6puwo] {
    align-items: stretch;
    min-height: clamp(140px, 11vw, 210px);
}

.ci-input-group.ci-message-group[b-hslcd6puwo] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================= */
/* COLUMNA SUBMIT (condiciones + botón)          */
/* ============================================= */
.ci-submit-column[b-hslcd6puwo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--gap-md);
    min-width: 0;
}

/* ============================================= */
/* CHECKBOXES PERSONALIZADOS (estilo Figma)      */
/* ============================================= */
.ci-check-row[b-hslcd6puwo] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.ci-check-newsletter[b-hslcd6puwo] {
    padding-bottom: clamp(16px, 1.56vw, 30px);
}

/* Ocultar el checkbox nativo de Blazor */
.ci-custom-checkbox[b-hslcd6puwo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(18px, 1.04vw, 20px);
    height: clamp(18px, 1.04vw, 20px);
    cursor: pointer;
    margin: 0;
}

.ci-custom-checkbox[b-hslcd6puwo]  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

/* Checkmark base (cuadrado vacío) */
.ci-checkmark[b-hslcd6puwo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primario);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icono check blanco dentro */
.ci-checkmark[b-hslcd6puwo]::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* Estilo vacío para Newsletter */
.ci-checkmark.ci-checkmark-empty[b-hslcd6puwo] {
    background-color: #FCFCFD;
    border: 1.5px solid var(--neutral-04);
}

.ci-checkmark.ci-checkmark-empty[b-hslcd6puwo]::after {
    display: none;
}

/* Cuando el checkbox nativo está marcado, mostrar relleno verde */
.ci-custom-checkbox[b-hslcd6puwo]  input[type="checkbox"]:checked ~ .ci-checkmark.ci-checkmark-empty {
    background-color: var(--primario);
    border: none;
}

.ci-custom-checkbox[b-hslcd6puwo]  input[type="checkbox"]:checked ~ .ci-checkmark.ci-checkmark-empty::after {
    display: block;
}

/* Cuando el checkbox de privacidad se desmarca */
.ci-custom-checkbox[b-hslcd6puwo]  input[type="checkbox"]:not(:checked) ~ .ci-checkmark:not(.ci-checkmark-empty) {
    background-color: #FCFCFD;
    border: 1.5px solid var(--neutral-04);
}

.ci-custom-checkbox[b-hslcd6puwo]  input[type="checkbox"]:not(:checked) ~ .ci-checkmark:not(.ci-checkmark-empty)::after {
    display: none;
}

/* Label de los checkboxes */
.ci-check-label[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--texto-negro-suave);
    line-height: normal;
    cursor: default;
}

.ci-check-link[b-hslcd6puwo] {
    color: var(--texto-negro-suave);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

.ci-check-link:hover[b-hslcd6puwo] {
    color: var(--primario);
    background-size: 100% 2px;
}

/* ============================================= */
/* BOTÓN ENVIAR                                  */
/* ============================================= */
.ci-submit-button[b-hslcd6puwo] {
    width: 100%;
    height: var(--button-height);
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.ci-submit-button:hover[b-hslcd6puwo] {
    background-color: #2e8a2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(60, 170, 54, 0.3);
}

.ci-submit-button:active[b-hslcd6puwo] {
    transform: translateY(0);
}

.ci-submit-button:disabled[b-hslcd6puwo] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================= */
/* COLUMNA DERECHA: PANEL INFORMATIVO            */
/* ============================================= */
.ci-info-column[b-hslcd6puwo] {
    flex-shrink: 0;
    width: var(--info-column-width);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--info-padding-top) var(--info-padding-x) 0;
}

.ci-info-block[b-hslcd6puwo] {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.04vw, 20px);
    padding-bottom: clamp(14px, 1.04vw, 20px);
    border-bottom: 1px solid var(--gris-40);
}

.ci-info-main-text[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-lg);
    color: #000000;
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

.ci-info-sub-text[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #000000;
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ci-info-contact[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #000000;
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ci-info-slogan[b-hslcd6puwo] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--gris-50);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* ALERTAS Y VALIDACIÓN                          */
/* ============================================= */
.ci-alert[b-hslcd6puwo] {
    padding: clamp(12px, 0.78vw, 15px);
    border: 1px solid transparent;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--font-body);
    line-height: 1.5;
}

.ci-alert-success[b-hslcd6puwo] {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.ci-alert-danger[b-hslcd6puwo] {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.ci-text-danger[b-hslcd6puwo] {
    color: #dc3545;
    font-size: clamp(10px, 0.63vw, 12px);
    margin-top: 4px;
    display: block;
}

/* Spinner */
.ci-spinner[b-hslcd6puwo] {
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ci-spinner-animation-b-hslcd6puwo 0.75s linear infinite;
    display: inline-block;
}

@keyframes ci-spinner-animation-b-hslcd6puwo {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1280px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1280px) {
    .ci-page[b-hslcd6puwo] {
        --padding-lateral: clamp(20px, 3vw, 40px);
        --gap-columns: clamp(30px, 5vw, 60px);
        --info-column-width: clamp(250px, 35vw, 400px);
        --info-padding-x: clamp(20px, 2vw, 30px);
        --info-padding-top: clamp(20px, 2.5vw, 40px);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET PEQUEÑO (max-width: 1024px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .ci-page[b-hslcd6puwo] {
        --padding-lateral: 30px;
        --gap-columns: 40px;
        --gap-md: 16px;
        --gap-lg: 30px;
        --font-heading-xl: 24px;
        --font-heading-lg: 18px;
        --font-body: 14px;
        --font-input: 16px;
        --font-title: 15px;
        --info-column-width: 100%;
        --info-padding-x: 0;
        --info-padding-top: 0;
    }

    .ci-main-content[b-hslcd6puwo] {
        flex-direction: column;
    }

    .ci-info-column[b-hslcd6puwo] {
        width: 100%;
        padding: clamp(20px, 2vw, 30px) 0 0;
        border-top: 1px solid var(--gris-40);
    }

    .ci-info-block[b-hslcd6puwo] {
        border-bottom: 1px solid var(--gris-40);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .ci-page[b-hslcd6puwo] {
        --padding-lateral: 20px;
        --gap-sm: 8px;
        --gap-md: 12px;
        --gap-lg: 20px;
        --gap-columns: 24px;
        --font-heading-xl: 20px;
        --font-heading-lg: 16px;
        --font-body: 13px;
        --font-input: 15px;
        --font-title: 14px;
        --button-height: 48px;
    }

    /* Dos columnas → una columna */
    .ci-form-row.ci-two-columns[b-hslcd6puwo] {
        flex-direction: column;
    }

    .ci-form-row.ci-message-row[b-hslcd6puwo] {
        flex-direction: column;
        min-height: auto;
    }

    /* Textarea a altura fija en móvil */
    .ci-input-group.ci-message-group[b-hslcd6puwo]  textarea {
        min-height: 120px;
    }

    .ci-submit-column[b-hslcd6puwo] {
        gap: var(--gap-md);
    }

    .ci-check-newsletter[b-hslcd6puwo] {
        padding-bottom: 16px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .ci-page[b-hslcd6puwo] {
        --padding-lateral: 16px;
        --gap-sm: 6px;
        --gap-md: 10px;
        --gap-lg: 16px;
        --gap-columns: 20px;
        --font-heading-xl: 18px;
        --font-heading-lg: 15px;
        --font-body: 12px;
        --font-input: 14px;
        --font-title: 13px;
        --button-height: 44px;
    }

    .ci-info-column[b-hslcd6puwo] {
        gap: var(--gap-md);
    }
}
/* /Components/Pages/Crear_Cuenta.razor.rz.scp.css */
/* Loading */
.crear-cuenta-loading[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.crear-cuenta-loading .spinner[b-0p54apbgns] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.crear-cuenta-loading p[b-0p54apbgns] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

/* ============================================= */
/* PAGE BLOCKER                         */
/* ============================================= */

.page-blocker[b-0p54apbgns] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-0p54apbgns] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.cc-action-center[b-0p54apbgns] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ── Page wrapper ── */
.cc-page[b-0p54apbgns] {
    background: var(--white-background, #fff);
    padding-top: 30px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
}

.cc-wrap[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 600px;
    padding: 0 30px;
    box-sizing: border-box;
}

/* Modo «completar» (dentro de la ventana del login): sin el aire de página. */
.cc-page--completar[b-0p54apbgns] {
    padding-top: 0;
    padding-bottom: 0;
}

.cc-page--completar .cc-wrap[b-0p54apbgns] {
    padding: 0;
}

    /* La parte de abajo, apilada como en el móvil: la de escritorio (comentarios de 458px fijos
   y las condiciones al lado) está pensada para la página de 960px y en la ventana se salía. */
    .cc-page--completar .cc-bottom-grid[b-0p54apbgns] {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-page--completar .cc-textarea[b-0p54apbgns] {
        width: 100%;
        min-width: 0;
        height: 96px;
    }

    .cc-page--completar .cc-conditions[b-0p54apbgns] {
        flex: none;
        height: auto;
        gap: 16px;
    }

    /* La cabecera de la página (título de 32px sin partir y 50px hasta el logo) no cabe en la
   ventana de un móvil, y la X de la ventana caía encima del logo: sitio para la X a los dos
   lados (para que siga centrada) y un título que puede ir en dos líneas. */
    .cc-page--completar .cc-header[b-0p54apbgns] {
        gap: 20px;
        padding: 0 36px;
        box-sizing: border-box;
    }

    .cc-page--completar .cc-title[b-0p54apbgns] {
        font-size: 28px;
        line-height: 34px;
        white-space: normal;
        text-align: center;
    }

    .cc-page--completar .cc-logo[b-0p54apbgns] {
        width: 70px;
    }

@media (max-width: 480px) {
    .cc-page--completar .cc-title[b-0p54apbgns] {
        font-size: 22px;
        line-height: 28px;
    }

    .cc-page--completar .cc-logo[b-0p54apbgns] {
        width: 54px;
    }

    /* De dos en dos no caben y los textos se cortan («Persona de contact…»): uno debajo de otro. */
    .cc-page--completar .cc-row[b-0p54apbgns] {
        flex-direction: column;
        gap: 15px;
    }
}

.cc-intro[b-0p54apbgns] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: var(--black-fonts-headings, #2D2E2E);
    margin: 0;
}

/* ── Header ── */
.cc-header[b-0p54apbgns] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

.cc-title[b-0p54apbgns] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0px;
    color: var(--black-fonts-headings, #2D2E2E);
    margin: 0;
    white-space: nowrap;
}

.cc-logo[b-0p54apbgns] {
    width: 85px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Inputs ── */
.cc-input[b-0p54apbgns] {
    width: 100%;
    background: var(--gris-10, #F5F5F5);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E); /* texto escrito: oscuro */
    line-height: 20px;
    letter-spacing: 0.25px;
    outline: none;
    box-sizing: border-box;
}

    .cc-input[b-0p54apbgns]::placeholder {
        color: var(--gris-50, #9E9E9E); /* placeholder: gris claro */
        font-weight: 300;
    }

    .cc-input:focus[b-0p54apbgns] {
        border-color: var(--primario, #3CAA36);
        color: var(--black-fonts-headings, #2D2E2E);
    }

/* ── Password wrapper con botón ojo ── */
.cc-password-wrap[b-0p54apbgns] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.cc-password-wrap .cc-input[b-0p54apbgns] {
    width: 100%;
    padding-right: 44px;
}

.cc-eye-btn[b-0p54apbgns] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gris-50, #9E9E9E);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease;
}

.cc-eye-btn:hover[b-0p54apbgns] { color: var(--black-fonts-headings, #2D2E2E); }
.cc-eye-btn svg[b-0p54apbgns] { display: block; }

/* ── Two-column row ── */
.cc-row[b-0p54apbgns] {
    display: flex;
    gap: 16px;
    width: 100%;
}

    .cc-row > .cc-input[b-0p54apbgns],
    .cc-row > .cc-col[b-0p54apbgns],
    .cc-row > .cc-select-wrap[b-0p54apbgns] {
        flex: 1;
        min-width: 0;
    }

/* ── Stacked column (Población+Sector / CP+Empleados) ── */
.cc-col[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

/* ── Fields group: gap interno 15px entre inputs relacionados ── */
.cc-fields[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* ── Slide-down animation para Sector / Núm. empleados ── */
.cc-slide-wrap[b-0p54apbgns] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* margin-top negativo cancela el gap del flex-col cuando está oculto */
    margin-top: -15px;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}

.cc-slide-wrap--visible[b-0p54apbgns] {
    max-height: 60px;
    opacity: 1;
    margin-top: 0;
}

/* ── Select with arrow ── */
.cc-select-wrap[b-0p54apbgns] {
    position: relative;
    width: 100%;
}

.cc-select[b-0p54apbgns] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    color: var(--gris-50, #9E9E9E);
}

.cc-chevron[b-0p54apbgns] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    pointer-events: none;
}

/* ── Radio buttons (Empresa / Particular) ── */
.cc-radio-group[b-0p54apbgns] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 10px;
    width: 100%;
}

.cc-radio-option[b-0p54apbgns] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.cc-radio[b-0p54apbgns] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--grisgris-50, #9E9E9E);
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--white-background, #fff);
}

.cc-radio--selected[b-0p54apbgns] {
    background: var(--primario, #3CAA36);
    border-color: var(--primario, #3CAA36);
    box-shadow: var(--1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2));
}

.cc-radio-label[b-0p54apbgns] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
    white-space: nowrap;
}

/* ── Address toggle ── */
.cc-address-toggle[b-0p54apbgns] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
    user-select: none;
}

.cc-address-text[b-0p54apbgns] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
}

/* ── Bottom section ── */
.cc-bottom[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 10px;
    width: 100%;
}

.cc-divider[b-0p54apbgns] {
    height: 1px;
    background: var(--grisgris-30, #E0E0E0);
    width: 100%;
    flex-shrink: 0;
}

.cc-bottom-content[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

/* Kept for backwards compat with existing razor markup */
.cc-bottom-grid[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.cc-textarea[b-0p54apbgns] {
    width: 100%;
    height: 115px;
    background: var(--gris-10, #F5F5F5);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #2D2E2E); /* texto escrito: oscuro */
    outline: none;
    resize: none;
    box-sizing: border-box;
}

    .cc-textarea[b-0p54apbgns]::placeholder {
        color: var(--gris-50, #9E9E9E); /* placeholder: gris claro */
        font-weight: 300;
    }

    .cc-textarea:focus[b-0p54apbgns] {
        border-color: var(--primario, #3CAA36);
    }

/* ── Alertas ── */
.alert[b-0p54apbgns] {
    padding: 15px;
    margin-bottom: 4px;
    border-radius: 6px;
}

.alert-danger[b-0p54apbgns] {
    color: #7B1D1D;
    background-color: #FEE2E2;
    border: none;
    border-left: 4px solid #DC2626;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15);
}

.alert-success[b-0p54apbgns] {
    color: #14532D;
    background-color: #DCFCE7;
    border: none;
    border-left: 4px solid #16A34A;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.12);
}

.alert-info[b-0p54apbgns] {
    color: #1E3A5F;
    background-color: #DBEAFE;
    border: none;
    border-left: 4px solid #2563EB;
    font-weight: 500;
    font-size: 14px;
}

/* Conditions column */
.cc-conditions[b-0p54apbgns] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Checkboxes ── */
.cc-hidden-input[b-0p54apbgns] {
    display: none;
}

.cc-checkbox-option[b-0p54apbgns] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.cc-checkbox[b-0p54apbgns] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--neutrals-8, #FCFCFD);
    border: 1.5px solid var(--neutral-04, #6C7275);
    box-sizing: border-box;
    flex-shrink: 0;
}

.cc-checkbox--checked[b-0p54apbgns] {
    background: var(--primario, #3CAA36);
    border-color: var(--primario, #3CAA36);
}

.cc-checkbox img[b-0p54apbgns] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cc-checkbox-text[b-0p54apbgns] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
}

    .cc-checkbox-text[b-0p54apbgns]  a {
        color: var(--black-fonts-headings, #323332);
        font-weight: 700;
        text-decoration: none;
    }

.cc-checkbox-text a:hover[b-0p54apbgns] {
    text-decoration: underline;
}

/* ── Submit button ── */
.cc-submit-btn[b-0p54apbgns] {
    width: 100%;
    height: 40px;
    background: var(--primario, #3CAA36);
    color: var(--blanco, #fff);
    border: none;
    border-radius: 6px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

    .cc-submit-btn:hover[b-0p54apbgns] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

    .cc-submit-btn:disabled[b-0p54apbgns] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* ── Login link ── */
.cc-login-link[b-0p54apbgns] {
    text-align: center;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E);
}

.cc-login-link a[b-0p54apbgns] {
    color: var(--primario, #3CAA36);
    text-decoration: none;
    font-weight: 600;
}

.cc-login-link a:hover[b-0p54apbgns] {
    text-decoration: underline;
}

/* ── Responsive: tablet/desktop ── */
@media (min-width: 700px) {
    .cc-wrap[b-0p54apbgns] {
        max-width: 960px;
        padding: 0 40px;
    }

    .cc-bottom-grid[b-0p54apbgns] {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .cc-textarea[b-0p54apbgns] {
        width: 458px;
        min-width: 458px;
        height: 205px;
    }

    .cc-conditions[b-0p54apbgns] {
        flex: 1;
        height: 205px;
        justify-content: flex-start;
    }
}
/* /Components/Pages/DatosEmpresa.razor.rz.scp.css */
/* ============================================= */
/* DATOS DE EMPRESA - CSS RESPONSIVE            */
/* Patrón Home.razor: variables + clamp()        */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS                                 */
/* ============================================= */
.datos-de-empresa[b-84q0ey029b] {
    /* Layout */
    --de-padding-lateral: clamp(16px, 6vw, 115px);
    --de-padding-bottom: clamp(40px, 5.21vw, 100px);
    --de-gap-sections: clamp(30px, 3.91vw, 75px);
    --de-gap-rows: clamp(6px, 0.52vw, 10px);

    /* Gray box */
    --de-box-padding-y: clamp(24px, 2.6vw, 50px);
    --de-box-padding-x: clamp(16px, 2.6vw, 50px);
    --de-box-radius: clamp(8px, 0.78vw, 15px);
    --de-columns-gap: clamp(20px, 5.21vw, 100px);

    /* Row items */
    --de-row-height: clamp(44px, 3.07vw, 59px);
    --de-row-gap: clamp(12px, 1.56vw, 30px);
    --de-label-width-left: clamp(90px, 6.51vw, 125px);
    --de-label-width-right: clamp(120px, 10.42vw, 200px);
    --de-value-width: clamp(140px, 18.23vw, 350px);

    /* Typography */
    --de-font-title: clamp(22px, 1.67vw, 32px);
    --de-font-body: clamp(13px, 0.83vw, 16px);
    --de-font-footer: clamp(16px, 1.15vw, 22px);
    --de-line-height-title: clamp(28px, 2.08vw, 40px);
    --de-line-height-body: clamp(18px, 1.25vw, 24px);
    --de-line-height-footer: clamp(22px, 1.46vw, 28px);

    /* Button */
    --de-btn-height: clamp(40px, 2.71vw, 52px);
    --de-btn-font: clamp(13px, 0.83vw, 16px);
    --de-btn-help-width: clamp(280px, 30.83vw, 592px);

    /* Colors */
    --de-bg: #ffffff;
    --de-box-bg: #f5f5f5;
    --de-text: #2d2e2e;
    --de-text-dark: #212121;
    --de-green: #3caa36;
    --de-green-hover: #80c87c;
    --de-yellow: #ecc61b;
    --de-white: #ffffff;
    --de-input-bg: #ffffff;
}

/* ============================================= */
/* ESTRUCTURA PRINCIPAL                          */
/* ============================================= */
.datos-de-empresa[b-84q0ey029b] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--de-gap-sections);
    padding: 0 var(--de-padding-lateral) var(--de-padding-bottom);
    position: relative;
    background-color: var(--de-bg);
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME CONTENEDOR PRINCIPAL                    */
/* ============================================= */
.datos-de-empresa .frame[b-84q0ey029b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 1.56vw, 30px);
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TÍTULO "DATOS DE EMPRESA"                     */
/* ============================================= */
.datos-de-empresa .titulo[b-84q0ey029b] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: calc(-1 * clamp(16px, 1.56vw, 30px));
}

.datos-de-empresa h2[b-84q0ey029b] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--de-font-body);
    letter-spacing: 0;
    line-height: normal;
}

.datos-de-empresa .iconos[b-84q0ey029b] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ============================================= */
/* CABECERA: Código cliente + Botón guardar      */
/* ============================================= */
.datos-de-empresa .div[b-84q0ey029b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    gap: 16px;
    flex-wrap: wrap;
}

.datos-de-empresa .text-wrapper[b-84q0ey029b] {
    position: relative;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--de-font-title);
    line-height: var(--de-line-height-title);
    white-space: nowrap;
}

.datos-de-empresa .boton[b-84q0ey029b] {
    display: inline-flex;
    flex-direction: column;
    height: var(--de-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--de-green);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.datos-de-empresa .boton:hover[b-84q0ey029b] {
    background-color: var(--de-green-hover);
}

.datos-de-empresa .state-layer[b-84q0ey029b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    position: relative;
    flex: 1;
    width: 100%;
}

.datos-de-empresa .label-text[b-84q0ey029b] {
    position: relative;
    width: fit-content;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--de-white);
    font-size: var(--de-btn-font);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    white-space: nowrap;
}

/* ============================================= */
/* ALERTAS                                       */
/* ============================================= */
.datos-de-empresa .alert p[b-84q0ey029b] {
    margin-bottom: 0;
}

.datos-de-empresa .alert[b-84q0ey029b] {
    width: 100%;
}

.datos-de-empresa .frame.align-items-center[b-84q0ey029b] {
    align-items: center;
}

/* ============================================= */
/* CAJA GRIS - Contenedor de datos               */
/* ============================================= */
.datos-de-empresa .frame-2[b-84q0ey029b] {
    background-color: var(--de-box-bg);
    border-radius: var(--de-box-radius);
    display: flex;
    gap: var(--de-columns-gap);
    justify-content: center;
    padding: var(--de-box-padding-y) var(--de-box-padding-x);
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* ============================================= */
/* COLUMNAS (izquierda y derecha)                */
/* ============================================= */
.datos-de-empresa .frame-3[b-84q0ey029b] {
    display: flex;
    flex-direction: column;
    gap: var(--de-gap-rows);
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

/* ============================================= */
/* FILAS DE DATOS (label + valor)                */
/* ============================================= */
.datos-de-empresa .frame-4[b-84q0ey029b] {
    display: flex;
    align-items: center;
    gap: var(--de-row-gap);
    min-height: var(--de-row-height);
    position: relative;
    width: 100%;
}

/* Etiquetas (labels) - base */
.datos-de-empresa .text-wrapper-4[b-84q0ey029b] {
    position: relative;
    min-width: 0;
    flex-shrink: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: var(--de-text);
    font-size: var(--de-font-body);
    text-align: right;
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    word-break: break-word;
}

/* Labels columna izquierda: 125px en Figma */
.datos-de-empresa .frame-3:first-child .text-wrapper-4[b-84q0ey029b] {
    width: var(--de-label-width-left);
}

/* Labels columna derecha: 200px en Figma, "Persona de Contacto" usa flex */
.datos-de-empresa .frame-3:last-child .text-wrapper-4[b-84q0ey029b] {
    width: var(--de-label-width-right);
}

/* Primera fila de la columna derecha (Persona de Contacto): label flex-1 */
.datos-de-empresa .frame-3:last-child .frame-4:first-child .text-wrapper-4[b-84q0ey029b] {
    width: auto;
    flex: 1 0 0;
}

/* Valores (texto readonly) */
.datos-de-empresa .text-wrapper-3[b-84q0ey029b] {
    position: relative;
    width: var(--de-value-width);
    flex-shrink: 0;
    min-width: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--de-text);
    font-size: var(--de-font-body);
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    word-break: break-word;
}

/* ============================================= */
/* INPUTS EDITABLES                              */
/* ============================================= */
.datos-de-empresa .input-2[b-84q0ey029b] {
    width: var(--de-value-width);
    flex-shrink: 0;
    min-width: 0;
    height: var(--de-row-height);
    background-color: var(--de-input-bg);
    border: none;
    border-radius: 6px;
    color: var(--de-text-dark);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--de-font-body);
    font-weight: 400;
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-de-empresa input[b-84q0ey029b]::placeholder {
    color: #888;
}

.datos-de-empresa input:focus[b-84q0ey029b] {
    border: 2px solid var(--de-green);
    outline: none;
}

/* ============================================= */
/* SELECTS (dropdowns)                           */
/* ============================================= */
.datos-de-empresa .select-wrapper[b-84q0ey029b] {
    position: relative;
    width: var(--de-value-width);
    flex-shrink: 0;
    min-width: 0;
}

.datos-de-empresa .input-3[b-84q0ey029b] {
    width: 100%;
    height: var(--de-row-height);
    background-color: var(--de-input-bg);
    border: none;
    border-radius: 6px;
    color: var(--de-text-dark);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--de-font-body);
    font-weight: 400;
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    padding: 0 50px 0 16px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.datos-de-empresa .input-3:focus[b-84q0ey029b] {
    border: 2px solid var(--de-green);
    outline: none;
}

.datos-de-empresa .arrow[b-84q0ey029b] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.datos-de-empresa .select-wrapper:focus-within .arrow[b-84q0ey029b] {
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================= */
/* TEXTO FOOTER "¿Debemos actualizar...?"        */
/* ============================================= */
.datos-de-empresa .debemos-actualizar[b-84q0ey029b] {
    position: relative;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--de-text);
    font-size: var(--de-font-footer);
    text-align: center;
    letter-spacing: 0;
    line-height: var(--de-line-height-footer);
}

.datos-de-empresa .debemos-actualizar b[b-84q0ey029b],
.datos-de-empresa .debemos-actualizar strong[b-84q0ey029b] {
    font-weight: 700;
}

/* ============================================= */
/* BOTÓN "¿Te ayudamos?"                         */
/* ============================================= */
.datos-de-empresa .state-layer-wrapper[b-84q0ey029b] {
    display: flex;
    flex-direction: column;
    width: var(--de-btn-help-width);
    max-width: 100%;
    height: var(--de-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--de-white);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--de-yellow);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.datos-de-empresa .state-layer-wrapper:hover[b-84q0ey029b] {
    background-color: var(--de-yellow);
}

.datos-de-empresa .state-layer-wrapper:hover .label-text-2[b-84q0ey029b] {
    color: var(--de-white);
}

.datos-de-empresa .label-text-2[b-84q0ey029b] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--de-text-dark);
    font-size: var(--de-btn-font);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--de-line-height-body);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* SPINNER / LOADING                             */
/* ============================================= */
.datos-de-empresa .spinner-border[b-84q0ey029b] {
    color: var(--de-white);
}

.page-blocker[b-84q0ey029b] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-84q0ey029b] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .datos-de-empresa[b-84q0ey029b] {
        --de-padding-lateral: 30px;
        --de-padding-bottom: 50px;
        --de-gap-sections: 40px;
        --de-gap-rows: 6px;

        --de-box-padding-y: 40px;
        --de-box-padding-x: 24px;
        --de-box-radius: 12px;
        --de-columns-gap: 24px;

        --de-row-height: 46px;
        --de-row-gap: 14px;
        --de-label-width-left: 110px;
        --de-label-width-right: 150px;
        --de-value-width: 200px;

        --de-font-title: 24px;
        --de-font-body: 14px;
        --de-font-footer: 17px;
        --de-line-height-title: 30px;
        --de-line-height-body: 20px;
        --de-line-height-footer: 24px;

        --de-btn-height: 44px;
        --de-btn-font: 14px;
        --de-btn-help-width: 400px;
    }

    .datos-de-empresa .frame-2[b-84q0ey029b] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .datos-de-empresa .frame-3[b-84q0ey029b] {
        flex: 1 1 300px;
        min-width: 280px;
    }

    .datos-de-empresa .text-wrapper-3[b-84q0ey029b],
    .datos-de-empresa .input-2[b-84q0ey029b],
    .datos-de-empresa .select-wrapper[b-84q0ey029b] {
        width: auto;
        flex: 1 1 0;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .datos-de-empresa[b-84q0ey029b] {
        --de-padding-lateral: 16px;
        --de-padding-bottom: 40px;
        --de-gap-sections: 30px;
        --de-gap-rows: 4px;

        --de-box-padding-y: 24px;
        --de-box-padding-x: 16px;
        --de-box-radius: 10px;
        --de-columns-gap: 20px;

        --de-row-height: auto;
        --de-row-gap: 8px;
        --de-label-width-left: auto;
        --de-label-width-right: auto;
        --de-value-width: auto;

        --de-font-title: 20px;
        --de-font-body: 14px;
        --de-font-footer: 15px;
        --de-line-height-title: 26px;
        --de-line-height-body: 20px;
        --de-line-height-footer: 22px;

        --de-btn-height: 44px;
        --de-btn-font: 14px;
        --de-btn-help-width: 100%;
    }

    /* Stack gray box into single column */
    .datos-de-empresa .frame-2[b-84q0ey029b] {
        flex-direction: column;
        gap: var(--de-columns-gap);
        padding: var(--de-box-padding-y) var(--de-box-padding-x);
    }

    .datos-de-empresa .frame-3[b-84q0ey029b] {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    /* Stack label and value vertically on mobile */
    .datos-de-empresa .frame-4[b-84q0ey029b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-height: auto;
        padding: 8px 0;
        border-bottom: 1px solid #e8e8e8;
    }

    .datos-de-empresa .frame-4:last-child[b-84q0ey029b] {
        border-bottom: none;
    }

    .datos-de-empresa .text-wrapper-4[b-84q0ey029b],
    .datos-de-empresa .frame-3:first-child .text-wrapper-4[b-84q0ey029b],
    .datos-de-empresa .frame-3:last-child .text-wrapper-4[b-84q0ey029b],
    .datos-de-empresa .frame-3:last-child .frame-4:first-child .text-wrapper-4[b-84q0ey029b] {
        width: 100%;
        text-align: left;
        font-size: 13px;
        color: #757575;
        flex: none;
    }

    .datos-de-empresa .text-wrapper-3[b-84q0ey029b] {
        width: 100%;
        font-size: 15px;
    }

    .datos-de-empresa .input-2[b-84q0ey029b] {
        width: 100%;
        height: 46px;
    }

    .datos-de-empresa .select-wrapper[b-84q0ey029b] {
        width: 100%;
    }

    .datos-de-empresa .input-3[b-84q0ey029b] {
        width: 100%;
        height: 46px;
    }

    /* Header: stack code + button */
    .datos-de-empresa .div[b-84q0ey029b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .datos-de-empresa .text-wrapper[b-84q0ey029b] {
        font-size: 20px;
        white-space: normal;
        word-break: break-word;
    }

    .datos-de-empresa .boton[b-84q0ey029b] {
        width: 100%;
    }

    .datos-de-empresa .state-layer-wrapper[b-84q0ey029b] {
        width: 100%;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .datos-de-empresa[b-84q0ey029b] {
        --de-padding-lateral: 12px;
        --de-padding-bottom: 30px;
        --de-gap-sections: 24px;

        --de-box-padding-y: 20px;
        --de-box-padding-x: 12px;

        --de-font-title: 18px;
        --de-font-body: 13px;
        --de-font-footer: 14px;
        --de-line-height-title: 24px;

        --de-btn-height: 42px;
        --de-btn-font: 13px;
    }

    .datos-de-empresa .text-wrapper[b-84q0ey029b] {
        font-size: 18px;
        line-height: 24px;
    }

    .datos-de-empresa .debemos-actualizar[b-84q0ey029b] {
        font-size: 14px;
        line-height: 20px;
    }
}
/* /Components/Pages/DireccionesEntrega.razor.rz.scp.css */
/* ============================================
   Direcciones de Entrega - Scoped CSS
   Following Figma design (node 367:8460) with modern responsive techniques
   ============================================ */

.direcciones-container[b-wbf58dg7bh] {
    /* CSS Variables (Figma-exact tokens) */
    --color-form-bg: #F5F5F5;
    --color-input-bg: #FFFFFF;
    --color-text-primary: #2D2E2E;
    --color-text-black: #212121;
    --color-placeholder: #9E9E9E;
    --color-button-primary: #3CAA36;
    --color-button-help: #ECC61B;
    --color-separator: #E0E0E0;

    /* Typography */
    --font-family: 'Nunito Sans', sans-serif;
    --font-size-title: 16px;
    --font-size-heading: 32px;
    --font-size-section: 22px;
    --font-size-label: 16px;
    --font-size-input: 16px;
    --font-size-address: 14px;

    /* Layout */
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(16px, 6vw, 115px) 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: white;
}

/* ============================================
   Header Section
   ============================================ */
.page-header[b-wbf58dg7bh] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.header-top[b-wbf58dg7bh] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
}

.back-arrow[b-wbf58dg7bh] {
    position: absolute;
    left: 0;
    top: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.back-arrow:hover[b-wbf58dg7bh] {
    opacity: 0.7;
}

.back-arrow img[b-wbf58dg7bh] {
    width: 24px;
    height: 24px;
}

.page-title[b-wbf58dg7bh] {
    font-family: var(--font-family);
    font-size: var(--font-size-title);
    font-weight: 700;
    line-height: normal;
    color: var(--color-text-black);
    text-align: center;
    margin: 0;
}

/* ============================================
   Client Code Row
   ============================================ */
.client-row[b-wbf58dg7bh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 1.875rem);
    margin-top: -30px;
}

.client-code[b-wbf58dg7bh] {
    font-family: var(--font-family);
    font-size: var(--font-size-heading);
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text-black);
    margin: 0;
}

/* Acciones a la derecha del código de cliente: [Cancelar] + [Añadir/Actualizar] */
.direccion-acciones[b-wbf58dg7bh] {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    flex-shrink: 0;
}

.btn-cancelar-edicion[b-wbf58dg7bh] {
    background: #fff;
    border: 1px solid var(--color-button-primary);
    color: var(--color-button-primary);
    border-radius: 6px;
    height: clamp(48px, 6vw, 52px);
    padding: 0 clamp(12px, 1.25vw, 24px);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-cancelar-edicion:hover[b-wbf58dg7bh] {
    background: var(--color-button-primary);
    color: #fff;
}

.btn-cancelar-edicion:disabled[b-wbf58dg7bh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-add[b-wbf58dg7bh] {
    background: var(--color-button-primary);
    color: white;
    border: none;
    border-radius: 6px;
    height: 52px;
    padding: 10px 24px;
    font-family: var(--font-family);
    font-size: var(--font-size-label);
    font-weight: 600;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-add:hover:not(:disabled)[b-wbf58dg7bh] {
    background: #369933;
    transform: translateY(-1px);
}

.btn-add:active:not(:disabled)[b-wbf58dg7bh] {
    transform: translateY(0);
}

.btn-add:disabled[b-wbf58dg7bh] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================
   Alert Messages
   ============================================ */
.alert-container[b-wbf58dg7bh] {
    display: flex;
    justify-content: center;
}

.alert[b-wbf58dg7bh] {
    width: 100%;
    max-width: 800px;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    font-size: var(--font-size-input);
}

.alert-danger[b-wbf58dg7bh] {
    background: #FFEBEE;
    border: 1px solid #EF5350;
    color: #C62828;
}

.alert-success[b-wbf58dg7bh] {
    background: #E8F5E9;
    border: 1px solid #66BB6A;
    color: #2E7D32;
}

.alert-warning[b-wbf58dg7bh] {
    background: #FFF3E0;
    border: 1px solid #FFA726;
    color: #E65100;
}

/* ============================================
   Form Container (Gray Background)
   ============================================ */
.form-container[b-wbf58dg7bh] {
    background: var(--color-form-bg);
    border-radius: 15px;
    padding: 50px clamp(20px, 12vw, 215px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row-two-cols + .form-row-two-cols[b-wbf58dg7bh] {
    margin-top: 40px;
}

/* Full-width Dirección field */
.form-row-full[b-wbf58dg7bh] {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 899px) {
    .form-row-full[b-wbf58dg7bh] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

/* 2-Column Layout */
.form-row-two-cols[b-wbf58dg7bh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 900px) {
    .form-row-two-cols[b-wbf58dg7bh] {
        grid-template-columns: 40fr 60fr;
        gap: clamp(20px, 4vw, 50px);
    }
}

.form-column[b-wbf58dg7bh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* evita grid blowout: permite que la columna encoja */
}

/* Form Field */
.form-field[b-wbf58dg7bh] {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 30px);
    min-width: 0;
}

@media (max-width: 899px) {
    .form-field[b-wbf58dg7bh] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

/* Labels */
.form-label[b-wbf58dg7bh] {
    font-family: var(--font-family);
    font-size: var(--font-size-label);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-primary);
    letter-spacing: 0.15px;
    text-align: right;
    min-width: 100px;
    flex-shrink: 0;
}

.form-label-right[b-wbf58dg7bh] {
    min-width: clamp(100px, 10vw, 175px);
}

.form-label-email[b-wbf58dg7bh] {
    min-width: 100px;
}

@media (max-width: 899px) {

    .form-label[b-wbf58dg7bh],
    .form-label-right[b-wbf58dg7bh],
    .form-label-email[b-wbf58dg7bh] {
        text-align: left;
        min-width: auto;
    }
}

/* Inputs */
.form-input[b-wbf58dg7bh] {
    flex: 1;
    min-width: 0; /* permite que el input encoja dentro del flex/grid */
    height: 59px;
    background: var(--color-input-bg);
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: var(--font-family);
    font-size: var(--font-size-input);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-black);
    letter-spacing: 0.15px;
    transition: box-shadow 0.2s;
}

.form-input[b-wbf58dg7bh]::placeholder {
    color: var(--color-placeholder);
}

.form-input:focus[b-wbf58dg7bh] {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-button-primary);
}

.form-input:focus-visible[b-wbf58dg7bh] {
    outline: 2px solid var(--color-button-primary);
    outline-offset: 2px;
}

/* ============================================
   Direcciones Actuales Section
   ============================================ */
.section-heading[b-wbf58dg7bh] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    max-width: 967px;
}

.section-title[b-wbf58dg7bh] {
    font-family: var(--font-family);
    font-size: var(--font-size-section);
    font-weight: 400;
    line-height: 1.27;
    color: var(--color-text-primary);
    margin: 0;
}

.separator-line[b-wbf58dg7bh] {
    width: 500px;
    height: 1px;
    background: var(--color-separator);
}

/* Address List Container */
.address-list-container[b-wbf58dg7bh] {
    background: white;
    padding: 0 100px 0 50px;
    border-radius: 8px;
    position: relative;
    height: 175px;
    overflow-y: scroll;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #2D2E2E #E0E0E0;
}

/* Chromium / Safari / Edge */
.address-list-container[b-wbf58dg7bh]::-webkit-scrollbar {
    width: 2px;
}

.address-list-container[b-wbf58dg7bh]::-webkit-scrollbar-button {
    height: 0;
    width: 0;
    min-height: 0;
    min-width: 0;
}

.address-list-container[b-wbf58dg7bh]::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 0;
}

.address-list-container[b-wbf58dg7bh]::-webkit-scrollbar-thumb {
    background: #2D2E2E;
    border-radius: 0;
    border: none;
}

.address-list-container[b-wbf58dg7bh]::-webkit-scrollbar-thumb:hover {
    background: #212121;
}

.address-list[b-wbf58dg7bh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 25px;
    padding-bottom: 50px;
}

@media (min-width: 900px) {
    .address-list[b-wbf58dg7bh] {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 75px;
        row-gap: 20px;
    }

    /* Vertical separators between columns */
   /* .address-list-container::before,
    .address-list-container::after {
        content: '';
        position: absolute;
        width: 1px;
        background: var(--color-separator);
        top: 25px;
    }*/

    .address-list-container[b-wbf58dg7bh]::before {
        left: calc(33.33% + 25px);
        height: 100px;
    }

    .address-list-container[b-wbf58dg7bh]::after {
        left: calc(66.66% + 12.5px);
        height: 45px;
    }
}

.address-item[b-wbf58dg7bh] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.address-item:hover[b-wbf58dg7bh] {
    background: rgba(60, 170, 54, 0.08);
}

.address-item.selected[b-wbf58dg7bh] {
    background: rgba(60, 170, 54, 0.14);
}

/* Custom Radio Button */
.custom-radio[b-wbf58dg7bh] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-text-black);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.custom-radio:hover[b-wbf58dg7bh] {
    border-color: var(--color-button-primary);
}

/* Estado seleccionado: relleno verde con anillo blanco interior (radio marcado) */
.custom-radio.checked[b-wbf58dg7bh] {
    border-color: var(--color-button-primary);
    background: var(--color-button-primary);
    box-shadow: inset 0 0 0 2px #fff;
}

.address-text[b-wbf58dg7bh] {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-text-black);
    letter-spacing: 0.1px;
}

.address-text strong[b-wbf58dg7bh] {
    font-weight: 600;
}

/* No Addresses State */
.no-addresses[b-wbf58dg7bh] {
    text-align: center;
    padding: 2.5rem;
    color: #757575;
}

.no-addresses p[b-wbf58dg7bh] {
    margin: 0 0 0.5rem 0;
}

.sub-text[b-wbf58dg7bh] {
    font-size: 0.875rem;
    margin-top: 0.625rem !important;
}

/* ============================================
   Footer Message
   ============================================ */
.footer-message[b-wbf58dg7bh] {
    font-family: var(--font-family);
    font-size: var(--font-size-section);
    font-weight: 400;
    line-height: 1.27;
    color: var(--color-text-primary);
    text-align: center;
    margin: 0;
}

.footer-message strong[b-wbf58dg7bh],
.footer-message b[b-wbf58dg7bh] {
    font-weight: 700;
}

/* ============================================
   Loading & Access Denied
   ============================================ */
.loading-container[b-wbf58dg7bh],
.access-denied-container[b-wbf58dg7bh] {
    padding: 2.5rem;
    text-align: center;
}

/* ============================================
   Page Blocker (Loading Overlay)
   ============================================ */
.page-blocker[b-wbf58dg7bh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.page-blocker-content[b-wbf58dg7bh] {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border[b-wbf58dg7bh] {
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-wbf58dg7bh 0.75s linear infinite;
}

.spinner-border-sm[b-wbf58dg7bh] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border-b-wbf58dg7bh {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *[b-wbf58dg7bh],
    *[b-wbf58dg7bh]::before,
    *[b-wbf58dg7bh]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
a:focus-visible[b-wbf58dg7bh],
button:focus-visible[b-wbf58dg7bh],
input:focus-visible[b-wbf58dg7bh] {
    outline: 2px solid var(--color-button-primary);
    outline-offset: 2px;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {

    .back-arrow[b-wbf58dg7bh],
    .btn-add[b-wbf58dg7bh],
    .page-blocker[b-wbf58dg7bh] {
        display: none !important;
    }

    .direcciones-container[b-wbf58dg7bh] {
        padding: 1rem;
    }
}
/* /Components/Pages/DireccionFacturacion.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS - DATOS DE FACTURACIÓN          */
/* ============================================= */
.datos-de-facturacion[b-44e8vfwoyt] {
    /* Paddings laterales - fluido, igual que Home */
    --df-padding-lateral: clamp(16px, 6vw, 115px);
    --df-padding-bottom: clamp(40px, 5.21vw, 100px);
    /* Gaps */
    --df-gap-sections: clamp(30px, 3.91vw, 75px);
    --df-gap-content: clamp(16px, 1.56vw, 30px);
    --df-gap-rows: clamp(6px, 0.52vw, 10px);
    --df-gap-columns: clamp(20px, 2.6vw, 50px);
    --df-gap-label-value: clamp(12px, 1.56vw, 30px);
    /* Card */
    --df-card-padding-y: clamp(20px, 2.61vw, 50px);
    --df-card-padding-x: clamp(16px, 2.6vw, 50px);
    --df-card-radius: clamp(10px, 0.78vw, 15px);
    /* Tipografía fluida */
    --df-font-title-page: clamp(13px, 0.83vw, 16px);
    --df-font-headline: clamp(22px, 1.67vw, 32px);
    --df-font-headline-lh: clamp(28px, 2.08vw, 40px);
    --df-font-body: clamp(13px, 0.83vw, 16px);
    --df-font-body-lh: clamp(20px, 1.25vw, 24px);
    --df-font-contact: clamp(16px, 1.15vw, 22px);
    --df-font-contact-lh: clamp(22px, 1.46vw, 28px);
    --df-font-btn: clamp(14px, 0.83vw, 16px);
    /* Tamaños labels/values */
    --df-label-width: clamp(100px, 18.23vw, 350px);
    --df-value-width: clamp(120px, 18.23vw, 350px);
    /* Row height */
    --df-row-height: clamp(44px, 3.07vw, 59px);
    /* Botón */
    --df-btn-width: clamp(280px, 30.83vw, 592px);
    --df-btn-height: clamp(44px, 2.71vw, 52px);
    --df-btn-radius: 6px;
    /* Back icon */
    --df-icon-size: clamp(20px, 1.25vw, 24px);
}

/* ============================================= */
/* ESTILOS GENERALES                             */
/* ============================================= */
.datos-de-facturacion[b-44e8vfwoyt] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--blanco);
    padding: 0 var(--df-padding-lateral) var(--df-padding-bottom);
    gap: var(--df-gap-sections);
    box-sizing: border-box;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.df-content[b-44e8vfwoyt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--df-gap-content);
    width: 100%;
}

/* ============================================= */
/* TÍTULO CON FLECHA ATRÁS                       */
/* ============================================= */
.df-title-bar[b-44e8vfwoyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    width: 100%;
    position: relative;
}

.df-back-link[b-44e8vfwoyt] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--df-icon-size);
    height: var(--df-icon-size);
    text-decoration: none;
}

.df-back-link img[b-44e8vfwoyt] {
    width: 100%;
    height: 100%;
    display: block;
}

.df-page-title[b-44e8vfwoyt] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--df-font-title-page);
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

/* ============================================= */
/* CÓDIGO DE CLIENTE (Headline)                  */
/* ============================================= */
.df-client-section[b-44e8vfwoyt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--df-gap-content);
    width: 100%;
}

.df-client-code[b-44e8vfwoyt] {
    display: flex;
    align-items: center;
    width: 100%;
}

.df-client-code-text[b-44e8vfwoyt] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--df-font-headline);
    letter-spacing: 0;
    line-height: var(--df-font-headline-lh);
}

/* ============================================= */
/* TARJETA DE DATOS (Gris)                       */
/* ============================================= */
.df-data-card[b-44e8vfwoyt] {
    display: flex;
    gap: var(--df-gap-columns);
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: var(--df-card-padding-y) var(--df-card-padding-x);
    background-color: var(--grisgris-10);
    border-radius: var(--df-card-radius);
    box-sizing: border-box;
}

/* Columna de datos */
.df-data-column[b-44e8vfwoyt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--df-gap-rows);
    flex: 1;
    min-width: 0;
}

/* Fila label + value */
.df-data-row[b-44e8vfwoyt] {
    display: flex;
    align-items: center;
    gap: var(--df-gap-label-value);
    width: 100%;
    min-height: var(--df-row-height);
}

.df-label[b-44e8vfwoyt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--df-font-body);
    letter-spacing: 0.15px;
    line-height: var(--df-font-body-lh);
    text-align: right;
    flex: 0 0 auto;
    width: var(--df-label-width);
    word-break: break-word;
}

.df-value[b-44e8vfwoyt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings);
    font-size: var(--df-font-body);
    letter-spacing: 0.15px;
    line-height: var(--df-font-body-lh);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* ============================================= */
/* MENSAJE DE CONTACTO                           */
/* ============================================= */
.df-contact-message[b-44e8vfwoyt] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings);
    font-size: var(--df-font-contact);
    text-align: center;
    letter-spacing: 0;
    line-height: var(--df-font-contact-lh);
    width: 100%;
}

.df-contact-message strong[b-44e8vfwoyt] {
    font-weight: 700;
}

/* Botón "Solicitar modificación de datos" (abre PopupModificacionDatos) */
.df-modificar-btn[b-44e8vfwoyt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 10px 18px;
    background-color: #5FB246;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .2s ease;
}

.df-modificar-btn:hover[b-44e8vfwoyt] {
    background-color: #4e9639;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?"                         */
/* ============================================= */
.df-help-button[b-44e8vfwoyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--df-btn-width);
    height: var(--df-btn-height);
    background-color: var(--blanco);
    border: 1px solid var(--alternativo-oscuro);
    border-radius: var(--df-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.df-help-button:hover[b-44e8vfwoyt] {
    background-color: var(--alternativo-oscuro);
}

.df-help-button:hover .df-btn-label[b-44e8vfwoyt] {
    color: var(--blanco);
}

.df-btn-label[b-44e8vfwoyt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--negro);
    font-size: var(--df-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--df-font-body-lh);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ============================================= */
/* ESTADOS: LOADING / ACCESS DENIED / ERROR      */
/* ============================================= */
.df-loading-container[b-44e8vfwoyt],
.df-access-denied-container[b-44e8vfwoyt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 3.13vw, 60px) var(--df-padding-lateral);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

.df-loading-container p[b-44e8vfwoyt],
.df-access-denied-container p[b-44e8vfwoyt] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--df-font-body);
    color: var(--black-fonts-headings);
    margin: 0;
}

.df-error-alert[b-44e8vfwoyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(20px, 2.08vw, 40px);
    background-color: var(--grisgris-10);
    border-radius: var(--df-card-radius);
    box-sizing: border-box;
}

.df-error-alert p[b-44e8vfwoyt] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--df-font-body);
    color: var(--black-fonts-headings);
    text-align: center;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
@media (max-width: 1024px) {
    .datos-de-facturacion[b-44e8vfwoyt] {
        --df-padding-lateral: 30px;
        --df-padding-bottom: 60px;
        --df-gap-sections: 40px;
        --df-gap-content: 24px;
        --df-gap-columns: 30px;
        --df-gap-label-value: 16px;
        --df-card-padding-y: 40px;
        --df-card-padding-x: 30px;
        --df-label-width: 130px;
        --df-row-height: 48px;
        --df-btn-width: min(480px, 100%);
        --df-font-headline: 26px;
        --df-font-headline-lh: 34px;
        --df-font-contact: 18px;
        --df-font-contact-lh: 24px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
@media (max-width: 768px) {
    .datos-de-facturacion[b-44e8vfwoyt] {
        --df-padding-lateral: 16px;
        --df-padding-bottom: 40px;
        --df-gap-sections: 30px;
        --df-gap-content: 20px;
        --df-gap-columns: 0px;
        --df-gap-label-value: 12px;
        --df-card-padding-y: 24px;
        --df-card-padding-x: 16px;
        --df-label-width: 110px;
        --df-row-height: auto;
        --df-btn-width: 100%;
        --df-btn-height: 48px;
        --df-font-headline: 22px;
        --df-font-headline-lh: 28px;
        --df-font-body: 14px;
        --df-font-body-lh: 20px;
        --df-font-contact: 16px;
        --df-font-contact-lh: 22px;
        --df-font-btn: 14px;
    }

    /* Stack columns vertically on mobile */
    .df-data-card[b-44e8vfwoyt] {
        flex-direction: column;
        gap: var(--df-gap-rows);
    }

    .df-data-column[b-44e8vfwoyt] {
        width: 100%;
    }

    .df-data-row[b-44e8vfwoyt] {
        min-height: 44px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .datos-de-facturacion[b-44e8vfwoyt] {
        --df-padding-lateral: 12px;
        --df-padding-bottom: 30px;
        --df-gap-sections: 24px;
        --df-gap-content: 16px;
        --df-card-padding-y: 20px;
        --df-card-padding-x: 12px;
        --df-label-width: 90px;
        --df-gap-label-value: 8px;
        --df-font-headline: 20px;
        --df-font-headline-lh: 26px;
        --df-font-body: 13px;
        --df-font-body-lh: 18px;
        --df-font-contact: 14px;
        --df-font-contact-lh: 20px;
        --df-font-title-page: 13px;
    }

    .df-data-row[b-44e8vfwoyt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-height: auto;
        padding: 6px 0;
    }

    .df-label[b-44e8vfwoyt] {
        text-align: left;
        width: 100%;
    }

    .df-value[b-44e8vfwoyt] {
        width: 100%;
    }
}
/* /Components/Pages/EditarPedido.razor.rz.scp.css */
/* ============================================
   EDITAR PEDIDO PENDIENTE
   Diseño según Figma - Sistema Responsive con clamp()
   ============================================ */

/* Variables CSS */
.editar-pedido[b-pif8nz1n5s] {
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --oferta-50: #FF5449;
    /* Layout */
    --pp-content-gap: clamp(16px, 1.56vw, 30px);
    /* Sistema responsive */
    --max-layout-width: 1680px;
    --padding-lateral: clamp(20px, 6vw, 115px);
    /* Gaps */
    --gap-sm: clamp(7px, 0.73vw, 14px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --gap-xl: clamp(50px, 5.2vw, 100px);
    /* Tipografía fluida */
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-body-sm: clamp(10px, 0.73vw, 14px);
    --font-price: clamp(14px, 1.04vw, 20px);
    --font-total: clamp(18px, 1.25vw, 24px);
    --font-small: clamp(12px, 0.63vw, 12px);
    /* Tamaños */
    --product-img-size: clamp(70px, 5.2vw, 100px);
    --btn-height: clamp(36px, 2.08vw, 40px);
    --btn-height-lg: clamp(44px, 2.81vw, 54px);
    --totales-width: clamp(320px, 30.83vw, 592px);
    --card-width: clamp(130px, 8.85vw, 170px);
    --btn-width: clamp(160px, 10.94vw, 210px);
    --acciones-width: 250px;
    /* Border radius */
    --radius: clamp(10px, 0.73vw, 14px);
    --radius-sm: clamp(4px, 0.31vw, 6px);
    /* Botones */
    --pp-btn-height: clamp(40px, 2.71vw, 52px);
    --pp-btn-padding-x: clamp(16px, 1.25vw, 24px);
    --pp-btn-radius: 6px;
    --pp-btn-font: clamp(13px, 0.83vw, 16px);
    --pp-icon-size: clamp(20px, 1.25vw, 24px);
}

/* Container principal */
.editar-pedido[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--max-layout-width);
    margin: 0 auto;
    background-color: var(--blanco);
    padding-bottom: clamp(50px, 3.9vw, 75px);
}

/* ============================================= */
/* FRAME GENERAL (contenedor de secciones)        */
/* ============================================= */

.editar-pedido .frame[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
}

/* ============================================= */
/* TÍTULO DE PÁGINA (con icono flecha)            */
/* ============================================= */

.editar-pedido .titulo[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.editar-pedido h2[b-pif8nz1n5s] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--pp-font-page-title);
    letter-spacing: 0;
    line-height: normal;
}

.editar-pedido .iconos[b-pif8nz1n5s] {
    position: absolute;
    width: var(--pp-icon-size);
    height: var(--pp-icon-size);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* SECCIÓN SUPERIOR: Lista de productos */
.pedido-productos-section[b-pif8nz1n5s] {
    background: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: clamp(20px, 1.56vw, 30px);
}

/* Contenedor del stack de badges (componente ProductBadge) bajo la referencia en cada línea */
.cart-badges[b-pif8nz1n5s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Reembolso clicable: la badge es un enlace a la web de canje del fabricante */
.badge-reembolso-canje[b-pif8nz1n5s] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

.editar-pedido .tabla-container[b-pif8nz1n5s] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.editar-pedido .tabla-mejorada[b-pif8nz1n5s] {
    width: 100%;
    border-collapse: separate;
    font-family: var(--body-large-font-family, sans-serif);
    font-size: 16px;
    padding: 0;
}

.editar-pedido .tabla-mejorada tbody tr:not(:last-child) td[b-pif8nz1n5s] {
    border-bottom: 1px solid #d3d3d3;
}

.editar-pedido .tabla-mejorada thead[b-pif8nz1n5s] {
    color: #000000;
    font-weight: bold;
    position: relative;
}

.editar-pedido .tabla-mejorada thead[b-pif8nz1n5s]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.editar-pedido .tabla-mejorada th[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada td[b-pif8nz1n5s] {
    padding: 10px;
    min-width: 180px;
    max-width: 180px;
    width: 180px;
    text-align: center;
}

.editar-pedido .tabla-mejorada .th1[b-pif8nz1n5s] {
    text-align: left;
    min-width: 500px;
    width: 100%;
}

.editar-pedido .tabla-mejorada .th2[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .td2[b-pif8nz1n5s] {
    min-width: 200px;
    max-width: 200px;
    width: 200px;
}

.editar-pedido .tabla-mejorada .th3[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .td3[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .th6[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .td6[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .th7[b-pif8nz1n5s],
.editar-pedido .tabla-mejorada .td7[b-pif8nz1n5s] {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
}

/* Sin productos de regalo: ocultar cabecera (thead usa ::after para su línea, sin impacto).
   Las celdas td6-oculto ya están vacías, NO se ocultan para que border-bottom sea continuo. */
.editar-pedido .tabla-mejorada .th6-oculto[b-pif8nz1n5s] {
    visibility: hidden;
}

.editar-pedido .tabla-mejorada th .subheader[b-pif8nz1n5s] {
    font-size: 0.8em;
    color: #888888;
}

.editar-pedido .tabla-mejorada .td1[b-pif8nz1n5s] {
    min-width: 500px;
    width: 100%;
}

.editar-pedido .tabla-mejorada .td1 .td-content[b-pif8nz1n5s] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-md);
}

.editar-pedido .tabla-mejorada .td1 img[b-pif8nz1n5s] {
    height: var(--product-img-size);
    width: var(--product-img-size);
}

.editar-pedido .tabla-mejorada .td1 .producto-info[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.editar-pedido .tabla-mejorada .td1 .descripcion[b-pif8nz1n5s] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.editar-pedido .tabla-mejorada .td1 .referencia[b-pif8nz1n5s] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.editar-pedido .tabla-mejorada .td2 .td-content[b-pif8nz1n5s] {
    display: flex;
    height: 46px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background-color: var(--gris-10, #F5F5F5);
    padding: 0px 10px;
    max-width: 160px;
    margin: 0 auto;
}

.editar-pedido .tabla-mejorada .td2 .td-content button[b-pif8nz1n5s] {
    align-items: center;
    background-color: var(--gris-10, #F5F5F5);
    border: 0px;
    position: relative;
}

.editar-pedido .tabla-mejorada .td2 .td-content button[b-pif8nz1n5s] {
    align-items: center;
    background-color: var(--gris-10, #F5F5F5);
    border: 0px;
    position: relative;
}

.editar-pedido .tabla-mejorada .td2 .td-content button img[b-pif8nz1n5s] {
    opacity: 1;
    filter: none;
    transition: opacity .15s ease, filter .15s ease;
}

.editar-pedido .tabla-mejorada .td2 .td-content button:disabled img[b-pif8nz1n5s] {
    opacity: 0.45;
    filter: brightness(1.6);
}

[b-pif8nz1n5s] .tabla-mejorada .td2 .td-content .cantidad-input {
    color: var(--negro);
    text-align: center;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    border: 0px;
    text-align: center;
    background-color: var(--gris-10, #F5F5F5);
}

.editar-pedido .tabla-mejorada .td4 .td-content[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.editar-pedido .tabla-mejorada .td4 .td-content .precio-tachado[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9E9E9E;
    text-decoration: line-through;
}

.editar-pedido .tabla-mejorada .td7 .td-content[b-pif8nz1n5s] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.precio-actual[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--negro);
    text-align: right;
    white-space: pre;
}

.precio-tachado[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-small);
    color: var(--gris-50);
    text-decoration: line-through;
}

.btn-eliminar[b-pif8nz1n5s] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    color: #212121; /* TrashIcon (svg, stroke=currentColor) */
}

.btn-eliminar:hover[b-pif8nz1n5s] {
    opacity: 0.6;
}

.btn-eliminar[b-pif8nz1n5s]  svg {
    width: 100%;
    height: 100%;
}

/* SECCIÓN INFERIOR: Botones, búsqueda y totales */
.pedido-inferior-section[b-pif8nz1n5s] {
    background: white;
    padding: 0 0 clamp(30px, 2.6vw, 50px);
    display: flex;
    gap: var(--gap-xl);
    align-items: flex-start;
    width: 100%;
}

/* Lado izquierdo - crece */
.pedido-inferior-izquierda[b-pif8nz1n5s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

/* Fila de botones y búsqueda */
.pedido-acciones-fila[b-pif8nz1n5s] {
    display: flex;
    gap: var(--gap-lg);
    align-items: flex-start;
    width: 100%;
}

.acciones-botones[b-pif8nz1n5s] {
    display: flex;
    justify-content: space-between;
    padding-bottom: clamp(15px, 1.3vw, 25px);
    width: var(--acciones-width);
    flex-shrink: 0;
    gap: var(--gap-md);
}

.editar-pedido .state-layer-wrapper-2[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    height: clamp(40px, 2.76vw, 53px);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--primario);
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editar-pedido .state-layer-wrapper-2 .state-layer-2[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    width: 100%;
    height: 100%;
}

.editar-pedido .state-layer-wrapper-2:hover[b-pif8nz1n5s] {
    background-color: var(--primario);
}

.editar-pedido .state-layer-wrapper-2:hover .label-text-3[b-pif8nz1n5s] {
    color: var(--blanco);
}

.editar-pedido .state-layer-wrapper-2.disabled[b-pif8nz1n5s] {
    cursor: not-allowed;
}

.editar-pedido .state-layer-wrapper-2.disabled:hover[b-pif8nz1n5s] {
    background-color: var(--blanco);
}

.editar-pedido .state-layer-wrapper-2.disabled:hover .label-text-3[b-pif8nz1n5s] {
    color: var(--primario);
}

.editar-pedido .label-text-3[b-pif8nz1n5s] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--primario);
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.2s ease;
}

.acciones-buscar[b-pif8nz1n5s] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--gap-md);
    align-items: center;
    padding-bottom: clamp(15px, 1.3vw, 25px);
}

.input-buscar-wrapper[b-pif8nz1n5s] {
    flex: 1;
    min-width: 0;
    display: flex;
    height: 100%;
}

.input-buscar-producto[b-pif8nz1n5s] {
    flex: 1;
    height: var(--btn-height);
    width: 100%;
    background: var(--gris-10);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 clamp(12px, 0.83vw, 16px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 0.94vw, 18px);
    color: var(--negro);
}

.input-buscar-producto[b-pif8nz1n5s]::placeholder {
    color: var(--gris-50);
}

.btn-anadir-producto[b-pif8nz1n5s] {
    height: 40px;
    background: white;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 0 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--primario);
    cursor: pointer;
    flex-shrink: 0;
}

.btn-anadir-producto:hover[b-pif8nz1n5s] {
    background-color: var(--primario);
    color: var(--blanco);
}

.pedido-inferior-izquierda .errores[b-pif8nz1n5s], .pedido-inferior-izquierda .avisos[b-pif8nz1n5s] {
    display: flex;
    width: 100%;
}

.pedido-inferior-izquierda .errores .alert[b-pif8nz1n5s], .pedido-inferior-izquierda .avisos .alert[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.pedido-inferior-izquierda .errores .alert[b-pif8nz1n5s]  p, .pedido-inferior-izquierda .avisos .alert[b-pif8nz1n5s]  p {
    margin: 0;
    width: 100%;
}

.pedido-section[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.pedido-inferior-section .pedido-inferior-izquierda .section-header[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100%;
}

.pedido-inferior-section .pedido-inferior-izquierda .section-header h2[b-pif8nz1n5s] {
    color: #2D2E2E;
    font-family: "Nunito Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.pedido-inferior-section .pedido-inferior-izquierda .entrega-section .section-header h2[b-pif8nz1n5s] {
    cursor: default;
}

.pedido-inferior-section .pedido-inferior-izquierda .section-header .arrow_image[b-pif8nz1n5s] {
    transition: transform 0.3s ease;
}

.pedido-inferior-section .pedido-inferior-izquierda .section-header.open .arrow_image[b-pif8nz1n5s] {
    transform: rotate(90deg);
}

.pedido-inferior-section .pedido-inferior-izquierda .section-header .section-line[b-pif8nz1n5s] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 0;
    transition: border-top 0.3s ease;
    width: 100%;
    height: 1px;
    background: #ABABAB;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-seleccionada-resumen[b-pif8nz1n5s], .direcciones-lista[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.pedido-inferior-section .pedido-inferior-izquierda .direcciones-lista[b-pif8nz1n5s] {
    max-height: 210px;
    overflow-y: scroll;
    position: relative;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #BDBDBD #F2F2F2;
    padding-right: 6px;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-seleccionada-resumen span[b-pif8nz1n5s], .direcciones-lista span[b-pif8nz1n5s] {
    color: #000000;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-row[b-pif8nz1n5s] {
    width: 100%;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    pointer-events: none;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox input[b-pif8nz1n5s], .pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox span[b-pif8nz1n5s] {
    pointer-events: auto;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox .custom-checkbox[b-pif8nz1n5s] {
    appearance: none;
    border: 1px solid #000000;
    border-radius: 7px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    position: relative;
    width: 14px;
    -webkit-appearance: none;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox .custom-checkbox:checked[b-pif8nz1n5s] {
    background-color: green;
    border-color: green;
}

.pedido-inferior-section .pedido-inferior-izquierda .direccion-checkbox span[b-pif8nz1n5s] {
    cursor: pointer;
}

.pedido-inferior-section .pedido-inferior-izquierda .section-title-left[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pedido-inferior-section .pedido-inferior-izquierda .optional-label[b-pif8nz1n5s] {
    color: #9E9E9E;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form[b-pif8nz1n5s] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field[b-pif8nz1n5s] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field label[b-pif8nz1n5s] {
    min-width: 180px;
    color: #2D2E2E;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field input[b-pif8nz1n5s] {
    color: var(--negro);
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-family: "Nunito Sans";
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field input:focus[b-pif8nz1n5s] {
    border-color: #28a745;
    box-shadow: 0 0 0 1px #2FA84F;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field input.input1[b-pif8nz1n5s] {
    max-width: 300px;
}

.pedido-inferior-section .pedido-inferior-izquierda .datos-pedido-form .form-field input.input2[b-pif8nz1n5s] {
    max-width: 500px;
}

.pedido-inferior-section .pedido-inferior-izquierda .comentario-input[b-pif8nz1n5s] {
    width: 100%;
}

.pedido-inferior-section .pedido-inferior-izquierda .comentario-input textarea[b-pif8nz1n5s] {
    background-color: #F5F5F5;
    color: var(--negro);
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-family: "Nunito Sans";
    font-size: 14px;
    resize: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pedido-inferior-section .pedido-inferior-izquierda .comentario-input textarea:focus[b-pif8nz1n5s] {
    border-color: #28a745;
    box-shadow: 0 0 0 1px #2FA84F;
}

/* PANEL LATERAL: Totales */
.pedido-totales-panel[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.82vw, 35px);
    align-self: stretch;
    width: var(--totales-width);
    flex-shrink: 0;
}

.totales-box[b-pif8nz1n5s] {
    background: #F5F5F5;
    border-radius: var(--radius-sm);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
    padding: clamp(15px, 1.56vw, 30px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.total-linea[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: #141414;
}

.total-label[b-pif8nz1n5s] {
    width: 236px;
    flex-shrink: 0;
}

.total-valor[b-pif8nz1n5s] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

.total-separador[b-pif8nz1n5s] {
    height: 0;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

.total-separador-linea[b-pif8nz1n5s] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: -1px;
    border-top: 1px solid #212121;
}

.total-final[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-total);
    color: #141414;
}

.total-label-final[b-pif8nz1n5s] {
    width: 236px;
    flex-shrink: 0;
}

.total-valor-final[b-pif8nz1n5s] {
    width: 129.83px;
    flex-shrink: 0;
    text-align: right;
}

/* Botones de acción del panel */
.totales-acciones[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    flex-shrink: 0;
}

.totales-acciones-grupo1[b-pif8nz1n5s] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    flex-shrink: 0;
}

.boton-2[b-pif8nz1n5s] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.boton-2.continue[b-pif8nz1n5s] {
    flex: 1 1 100%;
}

.boton-2.cancel[b-pif8nz1n5s], .boton-2.save[b-pif8nz1n5s] {
    flex: 1 1 0;
}

.boton-2.continue[b-pif8nz1n5s], .boton-2.save[b-pif8nz1n5s] {
    background-color: var(--primario);
}

.boton-2.continue:hover[b-pif8nz1n5s], .boton-2.save:hover[b-pif8nz1n5s] {
    background-color: #80C87C;
}

.boton-2.cancel[b-pif8nz1n5s] {
    background-color: transparent;
    border: 1px solid var(--error, #D32F2F);
}

.boton-2.cancel .label-text[b-pif8nz1n5s] {
    color: var(--error, #D32F2F);
}

.boton-2.cancel:hover[b-pif8nz1n5s] {
    background-color: var(--error, #D32F2F);
}

.boton-2.cancel:hover .label-text[b-pif8nz1n5s] {
    color: var(--blanco);
}

.boton-2 .state-layer[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.boton-2 .label-text[b-pif8nz1n5s] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    color: var(--blanco);
}

.totales-acciones-grupo2[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-shrink: 0;
}

.ahorro-info[b-pif8nz1n5s] {
    flex: 1;
    min-width: 0;
    height: clamp(44px, 2.71vw, 52px);
    background: white;
    border: 1px solid #3CAA36;
    border-radius: var(--radius-sm);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: #3CAA36;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 8px;
    flex-shrink: 0;
}

.totales-acciones-grupo2[b-pif8nz1n5s]  .help-button-container .btn-help {
    width: auto;
}

.totales-acciones-grupo2[b-pif8nz1n5s]  .help-button-container:only-child {
    flex: 1 1 auto;
}

.totales-acciones-grupo2[b-pif8nz1n5s]  .help-button-container:only-child .btn-help {
    width: 100% !important;
}

/* Loading */
.editar-pedido-loading[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.editar-pedido-loading .spinner[b-pif8nz1n5s] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-pif8nz1n5s 1s linear infinite;
}

.editar-pedido-loading p[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

@keyframes spin-b-pif8nz1n5s {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                         */
/* ============================================= */
/*.spinner-border {
    color: var(--blanco);
}*/

/*.page-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: wait;
}

.page-blocker-content {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    font-weight: 600;
}*/

.page-blocker[b-pif8nz1n5s] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-pif8nz1n5s] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================
   TABLA DE PRODUCTOS
   ============================================ */
.tabla-wrapper[b-pif8nz1n5s] {
    width: 100%;
}

.tabla-container[b-pif8nz1n5s] {
    width: 100%;
    overflow-x: auto;
}

.product-image[b-pif8nz1n5s] {
    width: var(--product-img-size);
    height: var(--product-img-size);
    border-radius: clamp(8px, 0.73vw, 14px);
    overflow: hidden;
    flex-shrink: 0;
}

.product-img[b-pif8nz1n5s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-info[b-pif8nz1n5s] {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.52vw, 10px);
    min-width: 0;
    flex: 1;
}

.descripcion[b-pif8nz1n5s] {
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.3;
}

.referencia[b-pif8nz1n5s] {
    font-weight: 300;
    font-size: var(--font-body);
    color: var(--negro);
}


/* Columna Cantidad */
.cantidad-control[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    background-color: var(--gris-10);
    border-radius: 8px;
    padding: clamp(4px, 0.52vw, 10px);
    max-width: clamp(100px, 8.3vw, 160px);
    margin: 0 auto;
}

.btn-menos[b-pif8nz1n5s],
.btn-mas[b-pif8nz1n5s] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.btn-menos:disabled[b-pif8nz1n5s],
.btn-mas:disabled[b-pif8nz1n5s] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-menos img[b-pif8nz1n5s],
.btn-mas img[b-pif8nz1n5s] {
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
}

.cantidad-input[b-pif8nz1n5s] {
    width: clamp(30px, 2.6vw, 50px);
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--font-body);
    font-weight: 400;
    border: none;
    background: transparent;
    color: var(--negro);
    appearance: textfield;
    -moz-appearance: textfield;
}

.cantidad-input[b-pif8nz1n5s]::-webkit-outer-spin-button,
.cantidad-input[b-pif8nz1n5s]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

 Columna Stock 
.stock-icon[b-pif8nz1n5s] {
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

 Columna Regalo 
.btn-ver-regalo[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primario);
    font-size: var(--font-small);
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.btn-ver-regalo:hover[b-pif8nz1n5s] {
    opacity: 0.7;
}

.btn-ver-regalo img[b-pif8nz1n5s] {
    width: clamp(16px, 1.04vw, 20px);
    height: clamp(16px, 1.04vw, 20px);
}

 Columna Precio 
.precio-container[b-pif8nz1n5s] {
    flex-direction: column;
    gap: 2px;
}


/* ============================================
   SECCIÓN INFERIOR: ACCIONES
   ============================================ */
/* Buscador */
.acciones-buscar[b-pif8nz1n5s] {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
    flex: 1;
}

.input-buscar-wrapper[b-pif8nz1n5s] {
    display: flex;
    flex: 1;
    position: relative;
}

/* Spinner pequeño */
.spinner-small[b-pif8nz1n5s] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gris-30);
    border-top-color: var(--primario);
    border-radius: 50%;
    animation: spin-b-pif8nz1n5s 1s linear infinite;
}

/* ============================================
   RESPONSIVE - Móvil
   ============================================ */
@media (max-width: 1024px) {
    .acciones-fila-principal[b-pif8nz1n5s] {
        flex-direction: column;
        gap: var(--gap-md);
    }

    .acciones-buscar[b-pif8nz1n5s] {
        width: 100%;
    }

    .input-buscar-producto[b-pif8nz1n5s] {
        flex: 1;
        min-width: 0;
    }

    .btn-guardar-pendiente[b-pif8nz1n5s],
    .btn-tramitar[b-pif8nz1n5s] {
        width: 100%;
        min-width: unset;
    }

    .btn-ayuda[b-pif8nz1n5s] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .tabla-container[b-pif8nz1n5s] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabla-mejorada[b-pif8nz1n5s] {
        min-width: 600px;
    }

    .editar-pedido-header[b-pif8nz1n5s] {
        padding: 15px 0;
    }

    .btn-back[b-pif8nz1n5s] {
        position: relative;
        margin-right: auto;
    }

    .editar-pedido-title[b-pif8nz1n5s] {
        flex: 1;
        text-align: center;
        margin-right: 40px;
        /* Compensar el botón */
    }

    .total-row[b-pif8nz1n5s] {
        padding: 15px 0;
    }
}

@media (max-width: 480px) {
    .tabla-mejorada .th1[b-pif8nz1n5s] {
        min-width: 200px;
    }

    .product-image[b-pif8nz1n5s] {
        width: 50px;
        height: 50px;
    }

    .descripcion[b-pif8nz1n5s] {
        font-size: 14px;
    }

    .referencia[b-pif8nz1n5s] {
        font-size: 12px;
    }
}

/* ============================================
   SEARCH SUGGESTIONS DROPDOWN
   ============================================ */
.search-suggestions-dropdown[b-pif8nz1n5s] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.search-suggestion-item[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease;
}

.search-suggestion-item:last-child[b-pif8nz1n5s] {
    border-bottom: none;
}

.search-suggestion-item:hover[b-pif8nz1n5s] {
    background-color: #FFF8E1;
}

.suggestion-img[b-pif8nz1n5s] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.suggestion-info[b-pif8nz1n5s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.suggestion-referencia[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #666666;
    text-transform: uppercase;
}

.suggestion-descripcion[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-precio[b-pif8nz1n5s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestion-precio .precio-valor[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
}

.suggestion-precio .stock-badge[b-pif8nz1n5s] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #4CAF50;
    background: #E8F5E9;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Scrollbar for dropdown */
.search-suggestions-dropdown[b-pif8nz1n5s]::-webkit-scrollbar {
    width: 8px;
}

.search-suggestions-dropdown[b-pif8nz1n5s]::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 4px;
}

.search-suggestions-dropdown[b-pif8nz1n5s]::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

.search-suggestions-dropdown[b-pif8nz1n5s]::-webkit-scrollbar-thumb:hover {
    background: #999999;
}
/* /Components/Pages/ExCrearCuenta.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ExCrearCuenta — desktop two-column hero + FAQ section
   Referencia Figma: frame 1690px | left flex:1 | gap:75px | right:940px
   Escala vw con base 1920px para pantallas anchas
   ═══════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.ex-page[b-mlzxbd3l77] {
    background: var(--white-background, #fff);
    display: flex;
    flex-direction: column;
}

/* ══════════════════════════════════════════
   HERO — two-column layout
   ══════════════════════════════════════════ */
.ex-hero[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 900px;
    gap: 3.906vw;
    position: relative;
    overflow: hidden;
    padding: 0 5.99vw 0 5.99vw;
}

/* ── Watermark: logo PMC gigante de fondo ── */
.ex-bg-deco[b-mlzxbd3l77] {
    position: absolute;
    top: -14%;
    left: -45%;
    right: -10%;
    bottom: 6%;
    width: auto;
    height: auto;
    pointer-events: none;
    opacity: 0.10;
    filter: brightness(0) invert(1);
    z-index: 0;
}

/* ── Left panel — crece para llenar el espacio restante (Figma: flex: 1 0 0) ── */
.ex-left[b-mlzxbd3l77] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;   /* recorta el texto "Únete a" en viewports medianos */
    z-index: 1;
}

.ex-photo-top[b-mlzxbd3l77] {
    width: 100%;
    height: 357px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}

/* "Únete a" — Figma: 160px @ 1920px → 8.333vw para escalar con el viewport */
.ex-unete[b-mlzxbd3l77] {
    position: absolute;
    top: 285px;
    left: 4.74vw;       /* 91px @ 1920px */
    width: auto;
    margin: 0;
    font-family: "Nunito Sans", sans-serif;
    font-size: 8.333vw; /* 160px @ 1920px */
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0px 3px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* Middle row: foto inferior + bloque de marca */
.ex-middle-row[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 79px;
    flex-shrink: 0;
    width: 100%;
}

.ex-photo-bottom[b-mlzxbd3l77] {
    flex: 1 0 0;
    min-width: 0;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
}

.ex-brand[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 37px;
    padding-top: 70px;
    flex: 1 0 0;
    min-width: 0;
}

.ex-brand-logo[b-mlzxbd3l77] {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ex-brand-title[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 50px;
    color: #212121;
    margin: 0;
}

/* Benefits grid (2×2) — Figma: flex-col justify-end, rows justify-between */
.ex-benefits[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
    padding-bottom: 30px;
}

.ex-benefits-row[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Figma: segunda fila usa items-start */
.ex-benefits-row:last-child[b-mlzxbd3l77] {
    align-items: flex-start;
}

.ex-benefit[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;               /* Figma: gap-[20px] */
    width: 295px;            /* Figma: w-[295px] */
}

/* Contenedor del icono: 70×70 centrado (Figma: size-[70px]) */
.ex-benefit-icon[b-mlzxbd3l77] {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ex-benefit-icon img[b-mlzxbd3l77] {
    display: block;
}

.ex-benefit-icon--entrega   img[b-mlzxbd3l77] { width: 70px; height: 70px; }
.ex-benefit-icon--servicio  img[b-mlzxbd3l77] { width: 54px; height: 54px; }
.ex-benefit-icon--portes    img[b-mlzxbd3l77] { width: 70px; height: 49px; }
.ex-benefit-icon--satisfaccion img[b-mlzxbd3l77] { width: 52px; height: 60px; }

/* Figma: title/large — 22px Regular #3caa36 leading-[28px] */
.ex-benefit span[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #3caa36;
    line-height: 28px;
    white-space: nowrap;
}

/* ── Right panel — ancho fijo proporcional (Figma: shrink-0, w-940px @ 1690px) ── */
.ex-form-panel[b-mlzxbd3l77] {
    flex: 0 0 48.958vw;     /* 940px @ 1920px */
    width: 48.958vw;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.ex-form-title[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 48px;        /* Figma: display/medium */
    font-weight: 400;
    line-height: normal;
    color: var(--black-fonts-headings, #2D2E2E);
    margin: 0;
    white-space: nowrap;
}

/* ── Overrides del formulario para pantalla grande ── */
.ex-form-panel .cc-input[b-mlzxbd3l77] {
    padding: 17px 16px;
    font-size: 18px;        /* Figma: L Body 0 */
    font-weight: 300;
    line-height: normal;
}

.ex-form-panel .cc-textarea[b-mlzxbd3l77] {
    padding: 17px 16px;
    font-size: 18px;
    height: 205px;          /* Figma: h-[205px] */
    width: calc(50% - 12px);
    min-width: 0;
}

.ex-form-panel .cc-row[b-mlzxbd3l77] {
    gap: 24px;              /* Figma: gap-[24px] */
}

.ex-form-panel .cc-col[b-mlzxbd3l77] {
    gap: 24px;
}

.ex-form-panel .cc-radio-group[b-mlzxbd3l77] {
    gap: 22px;              /* Figma: gap-[22px] */
    padding-top: 30px;
}

.ex-form-panel .cc-radio-label[b-mlzxbd3l77] {
    font-size: 16px;        /* Figma: R Body 1 */
}

.ex-form-panel .cc-address-text[b-mlzxbd3l77] {
    font-size: 16px;
}

.ex-form-panel .cc-checkbox-text[b-mlzxbd3l77] {
    font-size: 16px;
}

.ex-form-panel .cc-submit-btn[b-mlzxbd3l77] {
    height: 48px;
    font-size: 16px;
    letter-spacing: 0.15px;
}

.ex-form-panel .cc-bottom[b-mlzxbd3l77] {
    gap: 24px;
    padding-top: 10px;      /* Figma: pt-[10px] */
}

.ex-form-panel .cc-bottom-grid[b-mlzxbd3l77] {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.ex-form-panel .cc-conditions[b-mlzxbd3l77] {
    flex: 1;
    justify-content: flex-end;  /* Figma: items al fondo de los 205px */
    padding-right: 30px;        /* Figma: pr-[30px] */
    gap: 24px;
    height: 205px;
}

/* ── Alert override ── */
.ex-form-panel .alert[b-mlzxbd3l77] {
    border-radius: 6px;
    padding: 12px 16px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
}

.ex-form-panel .alert-danger[b-mlzxbd3l77] {
    color: #7B1D1D;
    background-color: #FEE2E2;
    border: none;
    border-left: 4px solid #DC2626;
    border-radius: 6px;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15);
}

/* Wrapper para inputs de contraseña con botón ojo */
.cc-password-wrap[b-mlzxbd3l77] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.cc-password-wrap .cc-input[b-mlzxbd3l77] {
    width: 100%;
    padding-right: 44px; /* espacio para el botón */
}

.cc-eye-btn[b-mlzxbd3l77] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gris-50, #9E9E9E);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease;
}

.cc-eye-btn:hover[b-mlzxbd3l77] { color: var(--black-fonts-headings, #2D2E2E); }
.cc-eye-btn svg[b-mlzxbd3l77] { display: block; }

/* ══════════════════════════════════════════
   cc-* base styles
   ══════════════════════════════════════════ */

.cc-input[b-mlzxbd3l77] {
    width: 100%;
    background: var(--gris-10, #F5F5F5);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E); /* texto escrito: oscuro */
    line-height: 20px;
    letter-spacing: 0.25px;
    outline: none;
    box-sizing: border-box;
}

.cc-input[b-mlzxbd3l77]::placeholder {
    color: var(--gris-50, #9E9E9E); /* placeholder: gris claro */
    font-weight: 300;
}

.cc-input:focus[b-mlzxbd3l77] {
    border-color: var(--primario, #3CAA36);
    color: var(--black-fonts-headings, #2D2E2E);
}

/* Two-column row */
.cc-row[b-mlzxbd3l77] {
    display: flex;
    gap: 16px;
    width: 100%;
}

.cc-row > .cc-input[b-mlzxbd3l77],
.cc-row > .cc-col[b-mlzxbd3l77],
.cc-row > .cc-select-wrap[b-mlzxbd3l77] { flex: 1; min-width: 0; }

/* Stacked column */
.cc-col[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

/* Slide-down animation */
.cc-slide-wrap[b-mlzxbd3l77] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: -15px;
    transition:
        max-height 0.35s ease,
        opacity    0.25s ease,
        margin-top 0.35s ease;
}

.cc-slide-wrap--visible[b-mlzxbd3l77] {
    max-height: 60px;
    opacity: 1;
    margin-top: 0;
}

/* Override para el bloque de dirección de entrega (mayor contenido) */
.cc-slide-wrap--address.cc-slide-wrap--visible[b-mlzxbd3l77] {
    max-height: 200px;
}

/* Gap entre inputs directos en cc-row dentro del bloque de entrega */
.cc-row > .cc-row-item[b-mlzxbd3l77] { flex: 1; min-width: 0; }

/* Padding superior para separar el bloque de entrega del toggle */
.cc-fields--delivery[b-mlzxbd3l77] { padding-top: 15px; gap: 15px; display: flex; flex-direction: column; }

/* Select with arrow */
.cc-select-wrap[b-mlzxbd3l77] { position: relative; width: 100%; }

.cc-select[b-mlzxbd3l77] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    color: var(--gris-50, #9E9E9E);
}

.cc-chevron-arrow[b-mlzxbd3l77] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: var(--gris-50, #9E9E9E);
}

/* Radio buttons */
.cc-radio-group[b-mlzxbd3l77] {
    display: flex;
    align-items: center;
    padding-top: 30px;
    width: 100%;
}

.cc-radio-option[b-mlzxbd3l77] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.cc-radio[b-mlzxbd3l77] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--grisgris-50, #9E9E9E);
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--white-background, #fff);
}

.cc-radio--selected[b-mlzxbd3l77] {
    background: var(--primario, #3CAA36);
    border-color: var(--primario, #3CAA36);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);
}

.cc-radio-label[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
    white-space: nowrap;
}

/* Address toggle */
.cc-address-toggle[b-mlzxbd3l77] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
    user-select: none;
}

.cc-address-text[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
}

/* Bottom section */
.cc-bottom[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
    width: 100%;
}

.cc-divider[b-mlzxbd3l77] {
    height: 1px;
    background: var(--grisgris-30, #E0E0E0);
    width: 100%;
    flex-shrink: 0;
}

.cc-bottom-content[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.cc-bottom-grid[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.cc-textarea[b-mlzxbd3l77] {
    width: 100%;
    height: 115px;
    background: var(--gris-10, #F5F5F5);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #2D2E2E); /* texto escrito: oscuro */
    outline: none;
    resize: none;
    box-sizing: border-box;
}

.cc-textarea[b-mlzxbd3l77]::placeholder {
    color: var(--gris-50, #9E9E9E); /* placeholder: gris claro */
    font-weight: 300;
}

.cc-textarea:focus[b-mlzxbd3l77] { border-color: var(--primario, #3CAA36); }

/* Conditions column */
.cc-conditions[b-mlzxbd3l77] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Checkboxes */
.cc-hidden-input[b-mlzxbd3l77] { display: none; }

.cc-checkbox-option[b-mlzxbd3l77] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.cc-checkbox[b-mlzxbd3l77] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--neutrals-8, #FCFCFD);
    border: 1.5px solid var(--neutral-04, #6C7275);
    box-sizing: border-box;
    flex-shrink: 0;
}

.cc-checkbox--checked[b-mlzxbd3l77] {
    background: var(--primario, #3CAA36);
    border-color: var(--primario, #3CAA36);
}

.cc-checkbox img[b-mlzxbd3l77] { width: 100%; height: 100%; object-fit: contain; }

.cc-checkbox-text[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--black-fonts-headings, #323332);
}

.cc-checkbox-text a[b-mlzxbd3l77] {
    color: var(--black-fonts-headings, #323332);
    font-weight: 700;
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.2s ease;
}

.cc-checkbox-text a:hover[b-mlzxbd3l77] { text-decoration: none; color: #3CAA36; background-size: 100% 2px; }

/* Submit button */
.cc-submit-btn[b-mlzxbd3l77] {
    width: 100%;
    height: 44px;
    background: var(--primario, #3CAA36);
    color: var(--blanco, #fff);
    border: none;
    border-radius: 6px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cc-submit-btn:hover[b-mlzxbd3l77] { background: var(--primaryprimary-60, #2F9A29); }

.cc-submit-btn:disabled[b-mlzxbd3l77] { opacity: 0.7; cursor: not-allowed; }

/* Login link */
.cc-login-link[b-mlzxbd3l77] {
    text-align: center;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E);
    margin-top: 4px;
}

.cc-login-link a[b-mlzxbd3l77] {
    color: var(--primario, #3CAA36);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out;
}

.cc-login-link a:hover[b-mlzxbd3l77] { text-decoration: none; background-size: 100% 2px; }

/* ══════════════════════════════════════════
   FAQ SECTION — mismas proporciones que el hero
   ══════════════════════════════════════════ */
.ex-faq-section[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: var(--white-background, #fff);
    gap: 3.906vw;
    padding: 65px 5.99vw 0 5.99vw;  /* 115px lateral + 65px top @ 1920px */
    box-sizing: border-box;
}

.ex-faq-left[b-mlzxbd3l77] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 70px;
    box-sizing: border-box;
}

.ex-faq-title[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--black-fonts-headings, #2D2E2E);
    margin: 0;
    text-align: right;
}

.ex-faq-contact[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gris-50, #6B7280);
    margin: 0;
    text-align: right;
}

.ex-faq-contact strong[b-mlzxbd3l77] {
    color: var(--black-fonts-headings, #2D2E2E);
    font-weight: 800;
}

.ex-faq-photo[b-mlzxbd3l77] {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 4px;
}

.ex-faq-accordion[b-mlzxbd3l77] {
    flex: 0 0 48.958vw;     /* espejo del form panel */
    width: 48.958vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 70px;
    box-sizing: border-box;
}

.ex-faq-item[b-mlzxbd3l77] {
    border-bottom: 1px solid var(--grisgris-30, #E0E0E0);
    cursor: pointer;
    user-select: none;
}

.ex-faq-item:first-child[b-mlzxbd3l77] {
    border-top: 1px solid var(--grisgris-30, #E0E0E0);
}

.ex-faq-item--open[b-mlzxbd3l77] {
    border-bottom: 2px solid var(--primario, #3CAA36);
}

.ex-faq-question[b-mlzxbd3l77] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 16px;
}

.ex-faq-q-text[b-mlzxbd3l77] {
    font-family: "Nunito Sans", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--black-fonts-headings, #2D2E2E);
    margin: 0;
    flex: 1;
}

.ex-faq-item--open .ex-faq-q-text[b-mlzxbd3l77] {
    font-weight: 700;
}

.ex-faq-icon[b-mlzxbd3l77] {
    flex-shrink: 0;
    color: var(--gris-50, #9E9E9E);
    transform: rotate(-90deg);
    transition: transform 0.25s ease, color 0.25s ease;
}

.ex-faq-item--open .ex-faq-icon[b-mlzxbd3l77] {
    color: var(--primario, #3CAA36);
    transform: rotate(0deg);
}

.ex-faq-answer[b-mlzxbd3l77] {
    padding: 0 0 24px 0;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--black-fonts-headings, #2D2E2E);
    animation: faqSlideIn-b-mlzxbd3l77 0.25s ease;
}

/* ::deep penetra el scoping de Blazor — necesario porque ul/li vienen de @((MarkupString)respuesta) */
.ex-faq-answer[b-mlzxbd3l77]  p { margin: 0 0 10px 0; }

.ex-faq-answer[b-mlzxbd3l77]  ul {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}

.ex-faq-answer[b-mlzxbd3l77]  li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 6px;
}

.ex-faq-answer[b-mlzxbd3l77]  li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L12 4.5' stroke='%233CAA36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@keyframes faqSlideIn-b-mlzxbd3l77 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE — tablet: apila columnas desde 1200px
   Por debajo de este punto la columna izquierda
   era demasiado estrecha (~450px) con overflow:hidden
   ══════════════════════════════════════════ */
@media (max-width: 1200px) {
    /* ── Hero apilado ── */
    .ex-hero[b-mlzxbd3l77] {
        flex-direction: column;
        min-height: unset;
        gap: 0;
        padding: 0;
    }

    .ex-left[b-mlzxbd3l77] {
        flex: none;
        width: 100%;
        overflow: hidden;
        padding: 0;
    }

    .ex-photo-top[b-mlzxbd3l77] { height: 340px; }

    .ex-unete[b-mlzxbd3l77] {
        font-size: clamp(52px, 6vw, 90px);
        top: 240px;
        left: 5vw;
    }

    /* middle-row y benefits reciben padding horizontal propio */
    .ex-middle-row[b-mlzxbd3l77] { padding: 0 5vw; gap: 32px; }
    .ex-brand-title[b-mlzxbd3l77] { font-size: 32px; line-height: 1.3; }
    .ex-benefits[b-mlzxbd3l77] { padding: 0 5vw 30px; }
    .ex-benefit[b-mlzxbd3l77] { width: auto; min-width: 260px; flex: 1; }

    /* ── Formulario full-width ── */
    .ex-form-panel[b-mlzxbd3l77] {
        flex: none;
        width: 100%;
        padding: 40px 5vw 60px;
        gap: 18px;
    }

    .ex-form-title[b-mlzxbd3l77] { font-size: 40px; white-space: normal; }
    .ex-form-panel .cc-input[b-mlzxbd3l77] { padding: 15px 16px; font-size: 16px; }
    .ex-form-panel .cc-textarea[b-mlzxbd3l77] { width: 100%; min-width: unset; }
    .ex-form-panel .cc-conditions[b-mlzxbd3l77] { height: auto; padding-right: 0; justify-content: flex-start; }
    .ex-form-panel .cc-bottom-grid[b-mlzxbd3l77] { flex-direction: column; }

    /* ── FAQ apilado ── */
    .ex-faq-section[b-mlzxbd3l77] {
        flex-direction: column;
        padding: 40px 5vw 0;
        gap: 0;
    }

    .ex-faq-left[b-mlzxbd3l77] { flex: none; width: 100%; padding-bottom: 40px; }
    .ex-faq-accordion[b-mlzxbd3l77] { flex: none; width: 100%; padding-bottom: 60px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Imagen superior más compacta */
    .ex-photo-top[b-mlzxbd3l77] { height: 220px; }

    .ex-unete[b-mlzxbd3l77] { font-size: 42px; top: 150px; left: 16px; }

    /* Middle row: más compacto */
    .ex-middle-row[b-mlzxbd3l77] { padding: 0 16px; gap: 16px; }
    .ex-photo-bottom[b-mlzxbd3l77] { height: 130px; }
    .ex-brand-title[b-mlzxbd3l77] { font-size: 20px; line-height: 1.3; }
    .ex-brand[b-mlzxbd3l77] { gap: 16px; padding-top: 20px; }

    /* Benefits: iconos más pequeños, texto envuelve */
    .ex-benefits[b-mlzxbd3l77] { padding: 0 16px 24px; }
    .ex-benefits-row[b-mlzxbd3l77] { gap: 10px; }
    .ex-benefit[b-mlzxbd3l77] { min-width: 0; flex: 1; gap: 10px; }
    .ex-benefit-icon[b-mlzxbd3l77] { width: 40px; height: 40px; }
    .ex-benefit-icon--entrega   img[b-mlzxbd3l77] { width: 40px; height: 40px; }
    .ex-benefit-icon--servicio  img[b-mlzxbd3l77] { width: 30px; height: 30px; }
    .ex-benefit-icon--portes    img[b-mlzxbd3l77] { width: 40px; height: 28px; }
    .ex-benefit-icon--satisfaccion img[b-mlzxbd3l77] { width: 28px; height: 34px; }
    .ex-benefit span[b-mlzxbd3l77] { font-size: 13px; line-height: 1.3; white-space: normal; }

    /* Formulario */
    .ex-form-panel[b-mlzxbd3l77] { padding: 32px 16px 40px; gap: 14px; }
    .ex-form-title[b-mlzxbd3l77] { font-size: 26px; }

    .ex-form-panel .cc-input[b-mlzxbd3l77] { padding: 13px 16px; font-size: 14px; line-height: 20px; }
    .ex-form-panel .cc-textarea[b-mlzxbd3l77] { height: 100px; padding: 13px 16px; font-size: 14px; }
    .ex-form-panel .cc-row[b-mlzxbd3l77] { gap: 10px; }
    .ex-form-panel .cc-col[b-mlzxbd3l77] { gap: 10px; }
    .ex-form-panel .cc-radio-group[b-mlzxbd3l77] { gap: 14px; }
    .ex-form-panel .cc-radio-label[b-mlzxbd3l77] { font-size: 14px; }
    .ex-form-panel .cc-address-text[b-mlzxbd3l77] { font-size: 14px; }
    .ex-form-panel .cc-checkbox-text[b-mlzxbd3l77] { font-size: 14px; }
    .ex-form-panel .cc-submit-btn[b-mlzxbd3l77] { height: 40px; font-size: 14px; }
    .ex-form-panel .cc-bottom[b-mlzxbd3l77] { gap: 16px; }

    /* FAQ */
    .ex-faq-section[b-mlzxbd3l77] { padding: 32px 16px 0; }
    .ex-faq-photo[b-mlzxbd3l77] { height: 200px; }
    .ex-faq-title[b-mlzxbd3l77] { font-size: 24px; }
    .ex-faq-q-text[b-mlzxbd3l77] { font-size: 15px; }
}
/* /Components/Pages/FAQIntegra.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.faq-page[b-8ybcla37sl] {
    /* Colores según Figma */
    --black-fonts-headings: #2D2E2E;
    --negro-texto-suave: #323332;
    --verde-pmc: #3CAA36;
    --gris-40: #BDBDBD;
    --blanco: #FFFFFF;
    --negro: #212121;

    /* Sistema responsive - basado en Home.razor.css */
    --max-layout-width: 1680px;
    --padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps fluidos */
    --gap-content: clamp(45px, 4.64vw, 89px);
    --gap-vertical: clamp(38px, 3.91vw, 75px);
    --gap-item: clamp(4px, 0.42vw, 8px);

    /* Tipografía fluida según Figma */
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-title-large: clamp(20px, 1.67vw, 32px); /* Headline/large: 32px */
    --font-title-medium: clamp(18px, 1.15vw, 22px); /* Título pregunta: 22px */
    --font-body: clamp(14px, 0.83vw, 16px); /* Body/large: 16px */

    /* Dimensiones */
    --sidebar-width: clamp(200px, 17.38vw, 334px);
    --main-width: clamp(400px, 46.79vw, 899px);
    --header-height: clamp(44px, 3.18vw, 61px);

    /* Border radius */
    --radius-card: clamp(7px, 0.73vw, 14px);

    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.faq-page-container[b-8ybcla37sl] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.05vw, 30px);
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.faq-header[b-8ybcla37sl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.faq-titulo[b-8ybcla37sl] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.faq-titulo-text[b-8ybcla37sl] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.faq-back-arrow[b-8ybcla37sl] {
    position: absolute;
    left: 0;
    top: 19px;
    width: 24px;
    height: 24px;
}

.faq-back-arrow img[b-8ybcla37sl] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.faq-content-wrapper[b-8ybcla37sl] {
    display: flex;
    gap: var(--gap-content);
    padding: 0 var(--padding-lateral);
    width: 100%;
    align-items: flex-start;
}

.faq-sidebar[b-8ybcla37sl] {
    flex: 0 0 auto;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.04vw, 20px);
    padding-top: clamp(15px, 1.56vw, 30px);
}

.faq-sidebar-title[b-8ybcla37sl] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-title-large);
    color: var(--negro-texto-suave);
    margin: 0;
    line-height: clamp(28px, 2.08vw, 40px);
    letter-spacing: 0;
}

.faq-sidebar-text[b-8ybcla37sl] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: clamp(18px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    margin: 0;
}

.faq-sidebar-link[b-8ybcla37sl] {
    color: var(--verde-pmc);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

    .faq-sidebar-link:hover[b-8ybcla37sl] {
        opacity: 0.8;
    }

/* ============================================= */
/* CONTENIDO PRINCIPAL - FAQs */
/* ============================================= */
.faq-main[b-8ybcla37sl] {
    flex: 1;
    min-width: 0;
    max-width: var(--main-width);
    display: flex;
    flex-direction: column;
    gap: var(--gap-item);
}

/* ============================================= */
/* ITEM FAQ */
/* ============================================= */
.faq-item[b-8ybcla37sl] {
    width: 100%;
    border-bottom: 1px solid var(--gris-40);
    transition: border-color 0.3s ease;
}

    .faq-item.open[b-8ybcla37sl] {
        border-bottom: 2px solid var(--verde-pmc);
    }

.faq-question[b-8ybcla37sl] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(23px, 2.34vw, 45px);
    padding: clamp(20px, 2.08vw, 40px) clamp(10px, 0.99vw, 19px);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.2s ease;
}

    .faq-question:hover[b-8ybcla37sl] {
        opacity: 0.8;
    }

.faq-question-text[b-8ybcla37sl] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-title-medium);
    color: var(--black-fonts-headings);
    line-height: clamp(20px, 1.46vw, 28px);
    letter-spacing: 0;
}

.faq-arrow[b-8ybcla37sl] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #000000;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-arrow[b-8ybcla37sl] {
    transform: rotate(180deg);
}

/* ============================================= */
/* RESPUESTA FAQ */
/* ============================================= */
.faq-answer[b-8ybcla37sl] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer[b-8ybcla37sl] {
    max-height: 2000px; /* Valor alto para contenido largo */
}

.faq-answer-content[b-8ybcla37sl] {
    padding: 0 clamp(10px, 0.99vw, 19px) clamp(20px, 2.08vw, 40px) clamp(10px, 0.99vw, 19px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.04vw, 20px);
}

.faq-intro-text[b-8ybcla37sl] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: clamp(18px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    margin: 0;
}

.faq-answer-content p[b-8ybcla37sl] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: clamp(18px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* CHECKLIST CON ICONOS */
/* ============================================= */
.faq-checklist[b-8ybcla37sl] {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.52vw, 10px);
}

.faq-check-item[b-8ybcla37sl] {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px);
}

.faq-check-icon[b-8ybcla37sl] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.faq-check-item span[b-8ybcla37sl] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: clamp(18px, 1.25vw, 24px);
    letter-spacing: 0.5px;
}

/* ============================================= */
/* LISTAS NORMALES */
/* ============================================= */
.faq-list[b-8ybcla37sl] {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.52vw, 10px);
}

    .faq-list li[b-8ybcla37sl] {
        position: relative;
        padding-left: clamp(16px, 1.25vw, 24px);
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 400;
        font-size: var(--font-body);
        color: var(--black-fonts-headings);
        line-height: clamp(18px, 1.25vw, 24px);
        letter-spacing: 0.5px;
    }

        .faq-list li[b-8ybcla37sl]::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--black-fonts-headings);
            font-weight: bold;
        }

/* ============================================= */
/* RESPONSIVE - TABLET */
/* ============================================= */
@media (max-width: 1024px) {
    .faq-content-wrapper[b-8ybcla37sl] {
        flex-direction: column;
        gap: clamp(20px, 2.6vw, 40px);
    }

    .faq-sidebar[b-8ybcla37sl] {
        width: 100%;
        padding-top: 0;
    }

    .faq-main[b-8ybcla37sl] {
        max-width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE */
/* ============================================= */
@media (max-width: 768px) {
    .faq-page-container[b-8ybcla37sl] {
        --padding-lateral: 16px;
    }

    .faq-header[b-8ybcla37sl] {
        margin-bottom: 24px;
    }

    .faq-content-wrapper[b-8ybcla37sl] {
        gap: 20px;
    }

    .faq-sidebar-title[b-8ybcla37sl] {
        font-size: 24px;
        line-height: 32px;
    }

    .faq-sidebar-text[b-8ybcla37sl] {
        font-size: 14px;
        line-height: 20px;
    }

    .faq-question[b-8ybcla37sl] {
        padding: 20px 12px;
        gap: 16px;
    }

    .faq-question-text[b-8ybcla37sl] {
        font-size: 18px;
        line-height: 24px;
    }

    .faq-answer-content[b-8ybcla37sl] {
        padding: 0 12px 20px 12px;
        gap: 12px;
    }

    .faq-check-item[b-8ybcla37sl] {
        gap: 12px;
    }

    .faq-list li[b-8ybcla37sl] {
        padding-left: 20px;
    }
}
/* /Components/Pages/Favoritos.razor.rz.scp.css */
/* =============================================
   FAVORITOS — Scoped CSS
   Patrón fluid-responsive (ver Home.razor.css / Lista.razor.css)
   ============================================= */

/* ============================================= */
/* VARIABLES CSS                                  */
/* ============================================= */
.favoritos[b-pb72vknx6s] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --primario-hover: #80C87C;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --font-family: 'Nunito Sans', Helvetica, sans-serif;
    /* Sistema responsive */
    --max-layout-width: 1680px;
    /* Espaciados fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(40px, 5.21vw, 100px);
    --content-gap: clamp(20px, 1.56vw, 30px);
    --section-gap: clamp(30px, 3.91vw, 75px);
    /* Tipografía fluida */
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-ref: clamp(12px, 0.73vw, 14px);
    --font-small: clamp(10px, 0.63vw, 12px);
    /* Buscador */
    --search-line-width: clamp(180px, 14.43vw, 277px);
    --search-input-width: clamp(180px, 14.43vw, 277px);
    /* Botón Añadir todo (GGW) */
    --btn-height: clamp(44px, 2.71vw, 52px);
    /* Imagen de producto */
    --product-img: clamp(70px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);
    /* Contador cantidad */
    --counter-width: clamp(120px, 8.33vw, 160px);
    --counter-height: clamp(40px, 2.4vw, 46px);
    --counter-btn-size: clamp(16px, 1.04vw, 20px);
    /* Columnas tabla */
    --col-cantidad: clamp(130px, 9.38vw, 180px);
    --col-stock: clamp(60px, 5.21vw, 100px);
    --col-precio: clamp(90px, 7.81vw, 150px);
    --col-actions: clamp(160px, 15.63vw, 300px);
    --td-padding-v: clamp(8px, 0.78vw, 15px);
    /* Botón carrito tabla */
    --btn-cart-w: clamp(48px, 3.39vw, 65px);
    --btn-cart-h: clamp(40px, 2.76vw, 53px);
    /* Layout raíz */
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: var(--section-gap);
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    position: relative;
    background-color: var(--blanco);
    box-sizing: border-box;
    overflow-x: hidden;
}

    /* ============================================= */
    /* FRAMES Y BLOQUES                               */
    /* ============================================= */
    .favoritos .frame[b-pb72vknx6s] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--content-gap);
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        position: relative;
    }

    /* ============================================= */
    /* TÍTULO NAVEGACIÓN                              */
    /* ============================================= */
    .favoritos .titulo[b-pb72vknx6s] {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 20px 0;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .favoritos h2[b-pb72vknx6s] {
        display: block;
        position: relative;
        width: fit-content;
        margin: 0;
        margin-top: -1px;
        font-family: var(--font-family);
        font-weight: 700;
        color: #000;
        font-size: var(--font-title);
        letter-spacing: 0;
        line-height: normal;
    }

    .favoritos .iconos[b-pb72vknx6s] {
        position: absolute;
        width: clamp(18px, 1.25vw, 24px);
        height: clamp(18px, 1.25vw, 24px);
        top: 19px;
        left: 0;
    }

    /* ============================================= */
    /* CABECERA: buscador + botón "Añadir todo"       */
    /* ============================================= */
    .favoritos .div[b-pb72vknx6s] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        position: relative;
        gap: var(--content-gap);
        flex-wrap: wrap;
    }

    .favoritos .frame-2[b-pb72vknx6s] {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: clamp(16px, 1.56vw, 30px);
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
    }

    .favoritos .text-wrapper[b-pb72vknx6s] {
        position: relative;
        width: fit-content;
        font-family: var(--font-family);
        font-weight: 700;
        color: #000;
        font-size: var(--font-title);
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
    }

    .favoritos .component[b-pb72vknx6s] {
        display: flex;
        align-items: flex-end;
        gap: clamp(10px, 1.15vw, 22px);
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        max-width: var(--search-input-width);
    }

    .favoritos .line[b-pb72vknx6s] {
        position: relative;
        width: var(--search-line-width);
        height: 1px;
        object-fit: cover;
        margin-top: 30px;
    }

    .favoritos .frame-wrapper[b-pb72vknx6s] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        .favoritos .frame-wrapper img[b-pb72vknx6s] {
            rotate: 90deg;
            width: clamp(18px, 1.25vw, 24px);
            height: clamp(18px, 1.25vw, 24px);
        }

    .favoritos .input-buscar-producto[b-pb72vknx6s] {
        position: absolute;
        top: 0;
        border: none;
        color: #2D2E2E;
        text-align: left;
        font-family: var(--font-family);
        font-size: var(--font-body);
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.25px;
        width: var(--search-input-width);
        background: transparent;
        outline: none;
    }

    /* ============================================= */
    /* TABLA: Wrapper y container                     */
    /* ============================================= */
    .favoritos .tabla-wrapper[b-pb72vknx6s] {
        padding: 15px 0;
        border-radius: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .favoritos .tabla-container[b-pb72vknx6s] {
        display: block;
        margin: 0 auto;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ============================================= */
    /* TABLA: Estilos principales                     */
    /* ============================================= */
    .favoritos .tabla-mejorada[b-pb72vknx6s] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-family: var(--font-family);
        font-size: var(--font-body);
        table-layout: fixed;
        padding: 0;
    }

        .favoritos .tabla-mejorada tbody tr:not(:last-child) td[b-pb72vknx6s] {
            border-bottom: 1px solid #d3d3d3;
        }

        .favoritos .tabla-mejorada thead[b-pb72vknx6s] {
            color: #000;
            font-weight: 700;
            position: relative;
        }

            .favoritos .tabla-mejorada thead[b-pb72vknx6s]::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #000;
            }

        .favoritos .tabla-mejorada th[b-pb72vknx6s],
        .favoritos .tabla-mejorada td[b-pb72vknx6s] {
            padding: var(--td-padding-v) clamp(6px, 0.52vw, 10px);
            text-align: center;
            vertical-align: middle;
            word-break: break-word;
        }

        .favoritos .tabla-mejorada th[b-pb72vknx6s] {
            font-weight: 700;
            color: #000;
            white-space: nowrap;
        }

        .favoritos .tabla-mejorada .th1[b-pb72vknx6s] {
            text-align: left;
            width: auto;
        }

        .favoritos .tabla-mejorada .th2[b-pb72vknx6s] {
            width: var(--col-cantidad);
        }

        .favoritos .tabla-mejorada .th3[b-pb72vknx6s] {
            width: var(--col-stock);
        }

        .favoritos .tabla-mejorada .th4[b-pb72vknx6s] {
            width: var(--col-precio);
        }

        .favoritos .tabla-mejorada .th5[b-pb72vknx6s] {
            width: var(--col-precio);
        }

        .favoritos .tabla-mejorada .th6[b-pb72vknx6s] {
            width: var(--col-actions);
        }

        .favoritos .tabla-mejorada th .subheader[b-pb72vknx6s] {
            font-size: 0.8em;
            color: #888;
            font-weight: 400;
        }

        /* ============================================= */
        /* TD1: Producto (imagen + descripción + ref)     */
        /* ============================================= */
        .favoritos .tabla-mejorada .td1[b-pb72vknx6s] {
            text-align: left;
            width: auto;
        }

            .favoritos .tabla-mejorada .td1 .td-content[b-pb72vknx6s] {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: clamp(8px, 0.78vw, 15px);
                min-width: 0;
            }

            .favoritos .tabla-mejorada .td1 .product-link[b-pb72vknx6s] {
                flex-shrink: 0;
                text-decoration: none;
            }

            .favoritos .tabla-mejorada .td1 .product-image[b-pb72vknx6s] {
                width: var(--product-img);
                height: var(--product-img);
                min-width: var(--product-img);
                border-radius: var(--img-radius);
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

                .favoritos .tabla-mejorada .td1 .product-image img[b-pb72vknx6s],
                .favoritos .tabla-mejorada .td1 .product-img[b-pb72vknx6s] {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: var(--img-radius);
                    display: block;
                }

            .favoritos .tabla-mejorada .td1 .producto-info[b-pb72vknx6s] {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: clamp(4px, 0.52vw, 10px);
                width: 100%;
                min-width: 0;
            }

            .favoritos .tabla-mejorada .td1 .descripcion[b-pb72vknx6s] {
                color: var(--negro);
                font-family: var(--font-family);
                font-size: var(--font-body);
                font-weight: 700;
                line-height: 1.35;
                word-break: break-word;
            }

            .favoritos .tabla-mejorada .td1 .referencia[b-pb72vknx6s] {
                color: var(--negro);
                font-family: var(--font-family);
                font-size: var(--font-ref);
                font-weight: 300;
                line-height: 1.35;
                word-break: break-word;
            }

        /* ============================================= */
        /* TD2: Cantidad (contador ±)                     */
        /* ============================================= */
        .favoritos .tabla-mejorada .td2 .td-content[b-pb72vknx6s] {
            display: flex;
            height: var(--counter-height);
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: clamp(6px, 0.52vw, 10px);
            border-radius: 8px;
            background-color: var(--gris-10);
            padding: 0 clamp(8px, 0.63vw, 12px);
            width: 100%;
            max-width: var(--counter-width);
            margin: 0 auto;
            box-sizing: border-box;
        }

            .favoritos .tabla-mejorada .td2 .td-content button[b-pb72vknx6s] {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--gris-10);
                border: 0;
                padding: 0;
                cursor: pointer;
                position: relative;
                flex-shrink: 0;
            }

                .favoritos .tabla-mejorada .td2 .td-content button img[b-pb72vknx6s] {
                    width: var(--counter-btn-size);
                    height: var(--counter-btn-size);
                    opacity: 1;
                    filter: none;
                    transition: opacity .15s ease, filter .15s ease;
                }

                .favoritos .tabla-mejorada .td2 .td-content button:disabled img[b-pb72vknx6s] {
                    opacity: 0.45;
                    filter: brightness(1.6);
                }

[b-pb72vknx6s] .favoritos .tabla-mejorada .td2 .td-content .cantidad-input {
    color: var(--negro);
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    border: 0;
    background-color: var(--gris-10);
    outline: none;
}

/* ============================================= */
/* TD3: Stock                                     */
/* ============================================= */
.favoritos .tabla-mejorada .td3 img[b-pb72vknx6s] {
    width: clamp(20px, 1.46vw, 28px);
    height: clamp(20px, 1.46vw, 28px);
}

/* ============================================= */
/* TD4/TD5: Precio y Total                        */
/* ============================================= */
.favoritos .tabla-mejorada .td4[b-pb72vknx6s],
.favoritos .tabla-mejorada .td5[b-pb72vknx6s] {
    font-weight: 700;
    color: var(--negro);
    white-space: nowrap;
}

/* ============================================= */
/* TD6: Acciones (carrito + añadir lista + delete)*/
/* ============================================= */
.favoritos .tabla-mejorada .td6 .td-content[b-pb72vknx6s] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.3vw, 25px);
    flex-wrap: nowrap;
}

    .favoritos .tabla-mejorada .td6 .td-content .btn-cart[b-pb72vknx6s] {
        width: var(--btn-cart-w);
        height: var(--btn-cart-h);
        border-radius: 6px;
        background-color: var(--blanco);
        border: 1px solid var(--primario);
        color: var(--primario);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        position: relative;
    }

        .favoritos .tabla-mejorada .td6 .td-content .btn-cart:hover[b-pb72vknx6s] {
            background-color: var(--primario);
            color: var(--blanco);
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
        }

        .favoritos .tabla-mejorada .td6 .td-content .btn-cart:active[b-pb72vknx6s] {
            transform: scale(0.98);
        }

        .favoritos .tabla-mejorada .td6 .td-content .btn-cart[b-pb72vknx6s]  svg {
            width: clamp(18px, 1.25vw, 24px);
            height: clamp(18px, 1.25vw, 24px);
        }

    .favoritos .tabla-mejorada .td6 .td-content[b-pb72vknx6s]  .img {
        width: clamp(20px, 1.25vw, 24px);
        height: clamp(20px, 1.25vw, 24px);
        color: #212121;
        cursor: pointer;
        flex-shrink: 0;
        transition: transform 0.15s, opacity 0.15s;
    }

        .favoritos .tabla-mejorada .td6 .td-content[b-pb72vknx6s]  .img:hover {
            transform: scale(1.15);
            opacity: 0.7;
        }

    /* Texto del botón "Añadir a una lista" — fluido para no cortarse */
    .favoritos .tabla-mejorada .td6 .td-content .button-YWB-label-text[b-pb72vknx6s] {
        font-size: clamp(12px, 0.83vw, 16px);
    }

/* ============================================= */
/* IMG genérica fuera de tabla                    */
/* ============================================= */
.favoritos .img[b-pb72vknx6s] {
    position: relative;
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                         */
/* ============================================= */
.favoritos .spinner-border[b-pb72vknx6s] {
    color: var(--blanco);
}

.page-blocker[b-pb72vknx6s] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-pb72vknx6s] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)        */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .favoritos[b-pb72vknx6s] {
        --padding-lateral: 30px;
        --padding-bottom: 60px;
        --section-gap: 40px;
        --content-gap: 20px;
        --font-title: 15px;
        --font-body: 14px;
        --font-ref: 13px;
        --font-small: 11px;
        --product-img: 80px;
        --img-radius: 12px;
        --counter-width: 140px;
        --counter-height: 42px;
        --counter-btn-size: 18px;
        --col-cantidad: 150px;
        --col-stock: 70px;
        --col-precio: 100px;
        --col-actions: 200px;
        --td-padding-v: 10px;
        --btn-cart-w: 52px;
        --btn-cart-h: 44px;
        --btn-height: 48px;
        --search-line-width: 200px;
        --search-input-width: 200px;
    }

        .favoritos .tabla-mejorada[b-pb72vknx6s] {
            table-layout: auto;
        }

            .favoritos .tabla-mejorada .th1[b-pb72vknx6s],
            .favoritos .tabla-mejorada .th2[b-pb72vknx6s],
            .favoritos .tabla-mejorada .th3[b-pb72vknx6s],
            .favoritos .tabla-mejorada .th4[b-pb72vknx6s],
            .favoritos .tabla-mejorada .th5[b-pb72vknx6s],
            .favoritos .tabla-mejorada .th6[b-pb72vknx6s] {
                width: auto;
            }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 840px)          */
/* Tabla → tarjetas grid                          */
/* ============================================= */
/* ============================================= */
@media (max-width: 840px) {
    .favoritos[b-pb72vknx6s] {
        --padding-lateral: 16px;
        --padding-bottom: 40px;
        --section-gap: 30px;
        --content-gap: 16px;
        --font-title: 14px;
        --font-body: 14px;
        --font-ref: 12px;
        --font-small: 10px;
        --product-img: 80px;
        --img-radius: 10px;
        --counter-width: 130px;
        --counter-height: 40px;
        --counter-btn-size: 16px;
        --btn-cart-w: 48px;
        --btn-cart-h: 42px;
        --btn-height: 46px;
        --td-padding-v: 12px;
    }

        /* ── Cabecera: buscador y botón apilados ── */
        .favoritos .div[b-pb72vknx6s] {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
        }

        .favoritos .frame-2[b-pb72vknx6s] {
            width: 100%;
            flex-wrap: wrap;
            gap: 12px;
        }

        .favoritos .component[b-pb72vknx6s] {
            flex: 1 1 100%;
            max-width: 100%;
        }

        .favoritos .line[b-pb72vknx6s] {
            width: 100%;
        }

        .favoritos .input-buscar-producto[b-pb72vknx6s] {
            width: calc(100% - 50px);
        }

        /* ── Botón "Añadir todo" full width ── */
        .favoritos .button-GGW-container[b-pb72vknx6s] {
            width: 100% !important;
            align-self: stretch;
        }

        /* ── TABLA → TARJETAS ── */
        .favoritos .tabla-container[b-pb72vknx6s] {
            overflow-x: visible;
        }

        .favoritos .tabla-mejorada[b-pb72vknx6s] {
            table-layout: auto;
        }

            .favoritos .tabla-mejorada thead[b-pb72vknx6s] {
                display: none;
            }

                .favoritos .tabla-mejorada thead[b-pb72vknx6s]::after {
                    display: none;
                }

            .favoritos .tabla-mejorada[b-pb72vknx6s],
            .favoritos .tabla-mejorada tbody[b-pb72vknx6s] {
                display: block;
                width: 100%;
            }

                .favoritos .tabla-mejorada tbody tr:not(:last-child) td[b-pb72vknx6s] {
                    border-bottom: none;
                }

                /* Tarjeta: grid de 2 columnas */
                .favoritos .tabla-mejorada tbody tr[b-pb72vknx6s] {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-template-areas:
                        "td1  td1"
                        "td2  td3"
                        "td4  td5"
                        "td6  td6";
                    gap: 0;
                    padding: 16px 0;
                    border-bottom: 1px dashed var(--gris-30);
                }

                    .favoritos .tabla-mejorada tbody tr:last-child[b-pb72vknx6s] {
                        border-bottom: none;
                    }

                .favoritos .tabla-mejorada td[b-pb72vknx6s] {
                    padding: 12px 0;
                    text-align: left;
                    border-bottom: none;
                }

                /* ── TD1: Producto (fila completa) ── */
                .favoritos .tabla-mejorada .td1[b-pb72vknx6s] {
                    grid-area: td1;
                    padding: 0 0 12px 0;
                    border-bottom: 1px solid var(--gris-30) !important;
                }

                    .favoritos .tabla-mejorada .td1 .td-content[b-pb72vknx6s] {
                        gap: 12px;
                    }

                /* ── TD2: Cantidad ── */
                .favoritos .tabla-mejorada .td2[b-pb72vknx6s] {
                    grid-area: td2;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                }

                    .favoritos .tabla-mejorada .td2[b-pb72vknx6s]::before {
                        content: 'CANTIDAD';
                        font-size: var(--font-small);
                        font-weight: 700;
                        color: var(--gris-50);
                        letter-spacing: 0.6px;
                        line-height: 1;
                    }

                    .favoritos .tabla-mejorada .td2 .td-content[b-pb72vknx6s] {
                        margin: 0;
                        width: var(--counter-width);
                    }

                /* ── TD3: Stock ── */
                .favoritos .tabla-mejorada .td3[b-pb72vknx6s] {
                    grid-area: td3;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 6px;
                }

                    .favoritos .tabla-mejorada .td3[b-pb72vknx6s]::before {
                        content: 'STOCK';
                        font-size: var(--font-small);
                        font-weight: 700;
                        color: var(--gris-50);
                        letter-spacing: 0.6px;
                        line-height: 1;
                    }

                /* ── TD4: Precio ── */
                .favoritos .tabla-mejorada .td4[b-pb72vknx6s] {
                    grid-area: td4;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                    text-align: left;
                }

                    .favoritos .tabla-mejorada .td4[b-pb72vknx6s]::before {
                        content: 'PRECIO';
                        font-size: var(--font-small);
                        font-weight: 700;
                        color: var(--gris-50);
                        letter-spacing: 0.6px;
                        line-height: 1;
                    }

                /* ── TD5: Total ── */
                .favoritos .tabla-mejorada .td5[b-pb72vknx6s] {
                    grid-area: td5;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 6px;
                    text-align: right;
                }

                    .favoritos .tabla-mejorada .td5[b-pb72vknx6s]::before {
                        content: 'TOTAL';
                        font-size: var(--font-small);
                        font-weight: 700;
                        color: var(--gris-50);
                        letter-spacing: 0.6px;
                        line-height: 1;
                    }

                /* ── TD6: Acciones (fila completa) ── */
                .favoritos .tabla-mejorada .td6[b-pb72vknx6s] {
                    grid-area: td6;
                    padding: 12px 0 0 0;
                    border-top: 1px solid var(--gris-30);
                    margin-top: 4px;
                }

                    .favoritos .tabla-mejorada .td6 .td-content[b-pb72vknx6s] {
                        justify-content: center;
                        align-items: center;
                        gap: 12px;
                        flex-wrap: nowrap;
                    }

                    .favoritos .tabla-mejorada .td6 .td-content .button-YWB-container[b-pb72vknx6s] {
                        flex: 1 1 auto;
                        min-width: 0;
                    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px)  */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .favoritos[b-pb72vknx6s] {
        --padding-lateral: 12px;
        --padding-bottom: 30px;
        --section-gap: 24px;
        --content-gap: 12px;
        --font-title: 13px;
        --font-body: 13px;
        --font-ref: 11px;
        --font-small: 9px;
        --product-img: 64px;
        --img-radius: 8px;
        --counter-width: 120px;
        --counter-height: 36px;
        --counter-btn-size: 14px;
        --btn-cart-w: 44px;
        --btn-cart-h: 38px;
        --btn-height: 44px;
    }

        .favoritos h2[b-pb72vknx6s] {
            padding: 0 30px;
        }

        .favoritos .tabla-mejorada .td6 .td-content[b-pb72vknx6s] {
            gap: 8px;
        }

            .favoritos .tabla-mejorada .td6 .td-content .btn-cart[b-pb72vknx6s] {
                width: var(--btn-cart-w);
                height: var(--btn-cart-h);
            }
}

/* ============================================= */
/* ACCESIBILIDAD                                  */
/* ============================================= */
@media (prefers-reduced-motion: reduce) {
    .favoritos *[b-pb72vknx6s],
    .favoritos *[b-pb72vknx6s]::before,
    .favoritos *[b-pb72vknx6s]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/GestionPresupuesto.razor.rz.scp.css */
/* ============================================= */
/* GESTIÓN DE PRESUPUESTO                        */
/* Responsive pixel-perfect from Figma 381:10251 */
/* ============================================= */
.gestion-presupuestos[b-b42sx49xir] {
    /* Responsive variables */
    --gp-padding-lateral: clamp(16px, 6vw, 115px);
    --gp-padding-bottom: clamp(40px, 5.2vw, 100px);
    --gp-gap-main: clamp(35px, 3.9vw, 75px);
    --gp-gap-section: clamp(16px, 1.56vw, 30px);
    --gp-font-title: 16px;
    --gp-font-subtitle: clamp(16px, 1.25vw, 24px);
    --gp-lh-subtitle: clamp(22px, 1.67vw, 32px);
    --gp-font-body: clamp(14px, 0.94vw, 18px);
    --gp-btn-height: clamp(42px, 2.71vw, 52px);
    --gp-textarea-height: clamp(140px, 10.68vw, 205px);
    --gp-help-btn-width: clamp(280px, 30.83vw, 592px);

    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--gp-gap-main);
    padding: 0 var(--gp-padding-lateral) var(--gp-padding-bottom);
    position: relative;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME: main content wrapper                   */
/* ============================================= */
.gestion-presupuestos .frame[b-b42sx49xir] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-gap-section);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TITLE BAR: centered title + back arrow        */
/* ============================================= */
.gestion-presupuestos .titulo[b-b42sx49xir] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gestion-presupuestos h2[b-b42sx49xir] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--gp-font-title);
    letter-spacing: 0;
    line-height: normal;
}

.gestion-presupuestos .iconos[b-b42sx49xir] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: clamp(12px, 1.04vw, 19px);
    left: 0;
}

/* ============================================= */
/* SUBTITLE + BUTTON ROW                         */
/* ============================================= */
.gestion-presupuestos .div[b-b42sx49xir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 1.56vw, 30px);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gestion-presupuestos .text-wrapper[b-b42sx49xir] {
    color: #000000;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--gp-font-subtitle);
    font-style: normal;
    font-weight: 400;
    line-height: var(--gp-lh-subtitle);
    flex: 1;
}

/* ============================================= */
/* GREEN BUTTON: "SOLICITUD DE PRESUPUESTO"      */
/* bg: #3CAA36, h: 52px, rounded: 6px            */
/* ============================================= */
.gestion-presupuestos .boton[b-b42sx49xir] {
    display: inline-flex;
    flex-direction: column;
    height: var(--gp-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    background-color: var(--primario, #3CAA36);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.gestion-presupuestos .boton:hover[b-b42sx49xir] {
    background-color: #80C87C;
}

.gestion-presupuestos .state-layer[b-b42sx49xir] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(6px, 0.52vw, 10px) clamp(14px, 1.25vw, 24px);
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.gestion-presupuestos .label-text[b-b42sx49xir] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: clamp(13px, 0.83vw, 16px);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: clamp(18px, 1.25vw, 24px);
    white-space: nowrap;
}

/* ============================================= */
/* TEXTAREA: Budget request input                */
/* bg: #F5F5F5, h: 205px, rounded: 6px           */
/* placeholder: #9E9E9E, Nunito Light 18px        */
/* ============================================= */
.gestion-presupuestos textarea[b-b42sx49xir] {
    background-color: #F5F5F5;
    color: #000000;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--gp-font-body);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    width: 100%;
    height: var(--gp-textarea-height);
    padding: clamp(12px, 0.89vw, 17px) clamp(12px, 0.83vw, 16px);
    border: none;
    border-radius: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-sizing: border-box;
    resize: vertical;
}

.gestion-presupuestos textarea[b-b42sx49xir]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.gestion-presupuestos textarea:focus[b-b42sx49xir] {
    border: 2px solid var(--primario, #3CAA36);
    outline: none;
}

/* ============================================= */
/* HELP BUTTON: "¿Te ayudamos?"                  */
/* w: 592px, h: 52px, border: #ECC61B            */
/* ============================================= */
.gestion-presupuestos .state-layer-wrapper[b-b42sx49xir] {
    display: flex;
    flex-direction: column;
    width: var(--gp-help-btn-width);
    max-width: 100%;
    height: var(--gp-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro, #ECC61B);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.gestion-presupuestos .state-layer-wrapper:hover[b-b42sx49xir] {
    background-color: var(--alternativo-oscuro, #ECC61B);
}

.gestion-presupuestos .state-layer-wrapper:hover .label-text-2[b-b42sx49xir] {
    color: #ffffff;
}

.gestion-presupuestos .label-text-2[b-b42sx49xir] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: var(--negro, #212121);
    font-size: clamp(13px, 0.83vw, 16px);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: clamp(18px, 1.25vw, 24px);
    white-space: nowrap;
}

/* ============================================= */
/* ALERTS                                        */
/* ============================================= */
.gestion-presupuestos .alert p[b-b42sx49xir] {
    margin-bottom: 0;
}

.gestion-presupuestos .spinner-border[b-b42sx49xir] {
    color: #ffffff;
}

/* ============================================= */
/* PAGE BLOCKER (loading overlay)                */
/* ============================================= */
.page-blocker[b-b42sx49xir] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-b42sx49xir] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* RESPONSIVE: Tablet (≤1024px)                  */
/* ============================================= */
@media (max-width: 1024px) {
    .gestion-presupuestos .div[b-b42sx49xir] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .gestion-presupuestos .boton[b-b42sx49xir] {
        align-self: stretch;
        width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE: Mobile (≤768px)                   */
/* ============================================= */
@media (max-width: 768px) {
    .gestion-presupuestos .state-layer-wrapper[b-b42sx49xir] {
        width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE: Small mobile (≤480px)             */
/* ============================================= */
@media (max-width: 480px) {
    .gestion-presupuestos .titulo[b-b42sx49xir] {
        padding: 12px 0;
    }
}
/* /Components/Pages/HistoricoDetallado.razor.rz.scp.css */
.historico-detallado[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 75px;
    padding: 0px 115px 100px;
    position: relative;
    background-color: #ffffff;
}

.historico-detallado .frame[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-detallado .titulo[b-q09glwltp3] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-detallado h2[b-q09glwltp3] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.historico-detallado .iconos[b-q09glwltp3] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.historico-detallado .div[b-q09glwltp3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-detallado .div-buttons[b-q09glwltp3] {
    display: flex;
    gap: 10px;
}

.historico-detallado .text-wrapper[b-q09glwltp3] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.historico-detallado .boton[b-q09glwltp3] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.historico-detallado .boton:hover[b-q09glwltp3] {
    background-color: #80C87C;
}

.historico-detallado .state-layer[b-q09glwltp3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.historico-detallado .label-text[b-q09glwltp3] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.historico-detallado .frame-2[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 75px;
    align-self: stretch;
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: 15px;
}

.historico-detallado .frame-3[b-q09glwltp3] {
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-detallado .text-wrapper-2[b-q09glwltp3] {
    color: var(--black-fonts-headings);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.historico-detallado .frame-4[b-q09glwltp3] {
    display: flex;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}

.historico-detallado .frame-5[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    flex: 1 0 0;
}

.historico-detallado .frame-6[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-bottom: 1px solid #d3d3d3;
}

.historico-detallado .text-wrapper-3[b-q09glwltp3] {
    color: var(--black-fonts-headings);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.historico-detallado .frame-7[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

[b-q09glwltp3] .historico-detallado .input {
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: 6px;
    color: var(--negro);
    display: -webkit-box;
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: -0.50px;
    overflow: hidden;
    padding: 17px 16px;
    position: relative;
    text-overflow: ellipsis;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

[b-q09glwltp3] .historico-detallado input::placeholder {
    color: #888;
}

[b-q09glwltp3] .historico-detallado input:focus {
    border: 2px solid #28a745;
    outline: none;
}

.historico-detallado .frame-8[b-q09glwltp3] {
    display: flex;
    padding: 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-detallado .input-2[b-q09glwltp3] {
    appearance: none;
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: 6px;
    color: var(--negro);
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: -0.50px;
    padding: 17px 16px;
    padding-right: 50px;
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.historico-detallado .input-2:focus[b-q09glwltp3] {
    border: 2px solid #3CAA36 !important;
    outline: none !important;
}

.historico-detallado .arrow[b-q09glwltp3] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.historico-detallado .select-wrapper[b-q09glwltp3]{
    position: relative;
    width: 100%;
}

.historico-detallado .select-wrapper:focus-within .arrow[b-q09glwltp3] {
    transform: translateY(-50%) rotate(90deg);
}

.historico-detallado .frame-9[b-q09glwltp3] {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-detallado .state-layer-wrapper[b-q09glwltp3] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.historico-detallado .state-layer-wrapper:hover[b-q09glwltp3] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.historico-detallado .state-layer-wrapper:hover .label-text-2[b-q09glwltp3] {
    color: var(--blanco);
}

.historico-detallado .label-text-2[b-q09glwltp3] {

    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);

}

.historico-detallado .alert p[b-q09glwltp3] {
    margin-bottom: 0;
}

.historico-detallado .spinner-border[b-q09glwltp3] {
    color: var(--blanco);
}

.page-blocker[b-q09glwltp3] {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-q09glwltp3] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}
/* /Components/Pages/HistoricoEntregas.razor.rz.scp.css */
.historico-entregas[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 75px;
    padding: 0px 115px 100px;
    position: relative;
    background-color: #ffffff;
}

.historico-entregas .frame[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-entregas .titulo[b-bvg7t50fe5] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-entregas h2[b-bvg7t50fe5] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.historico-entregas .iconos[b-bvg7t50fe5] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.historico-entregas .div[b-bvg7t50fe5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.historico-entregas .text-wrapper[b-bvg7t50fe5] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.historico-entregas .boton[b-bvg7t50fe5] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.historico-entregas .boton:hover[b-bvg7t50fe5] {
    background-color: #80C87C;
}

.historico-entregas .state-layer[b-bvg7t50fe5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.historico-entregas .label-text[b-bvg7t50fe5] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.historico-entregas .frame-2[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 75px;
    align-self: stretch;
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: 15px;
}

.historico-entregas .frame-3[b-bvg7t50fe5] {
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-entregas .text-wrapper-2[b-bvg7t50fe5] {
    color: var(--black-fonts-headings);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.historico-entregas .frame-4[b-bvg7t50fe5] {
    display: flex;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}

.historico-entregas .frame-5[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    flex: 1 0 0;
}

.historico-entregas .frame-6[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-bottom: 1px solid #d3d3d3;
}

.historico-entregas .text-wrapper-3[b-bvg7t50fe5] {
    color: var(--black-fonts-headings);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.historico-entregas .frame-7[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

[b-bvg7t50fe5] .historico-entregas .input {
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: 6px;
    color: var(--negro);
    display: -webkit-box;
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: -0.50px;
    overflow: hidden;
    padding: 17px 16px;
    position: relative;
    text-overflow: ellipsis;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

[b-bvg7t50fe5] .historico-entregas input::placeholder {
    color: #888;
}

[b-bvg7t50fe5] .historico-entregas input:focus {
    border: 2px solid #28a745;
    outline: none;
}

.historico-entregas .frame-8[b-bvg7t50fe5] {
    display: flex;
    padding: 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-entregas .input-2[b-bvg7t50fe5] {
    appearance: none;
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: 6px;
    color: var(--negro);
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: -0.50px;
    padding: 17px 16px;
    padding-right: 50px;
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.historico-entregas .input-2:focus[b-bvg7t50fe5] {
    border: 2px solid #3CAA36 !important;
    outline: none !important;
}

.historico-entregas .arrow[b-bvg7t50fe5] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.historico-entregas .select-wrapper[b-bvg7t50fe5] {
    position: relative;
    width: 100%;
}

.historico-entregas .select-wrapper:focus-within .arrow[b-bvg7t50fe5] {
    transform: translateY(-50%) rotate(90deg);
}

.historico-entregas .frame-9[b-bvg7t50fe5] {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.historico-entregas .state-layer-wrapper[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.historico-entregas .state-layer-wrapper:hover[b-bvg7t50fe5] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.historico-entregas .state-layer-wrapper:hover .label-text-2[b-bvg7t50fe5] {
    color: var(--blanco);
}

.historico-entregas .label-text-2[b-bvg7t50fe5] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.historico-entregas .alert p[b-bvg7t50fe5] {
    margin-bottom: 0;
}

.historico-entregas .tabla-wrapper[b-bvg7t50fe5] {
    padding: 15px;
    border-radius: 20px;
    width: 100%;
}

.historico-entregas .tabla-container[b-bvg7t50fe5] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.historico-entregas .tabla-mejorada[b-bvg7t50fe5] {
    width: 100%;
    border-collapse: separate;
    font-family: var(--body-large-font-family, sans-serif);
    font-size: 16px;
    padding: 0;
}

.historico-entregas .tabla-mejorada tbody tr:not(:last-child) td[b-bvg7t50fe5] {
    border-bottom: 1px solid #d3d3d3;
}

.historico-entregas .tabla-mejorada thead[b-bvg7t50fe5] {
    color: #000000;
    font-weight: bold;
    position: relative;
}

.historico-entregas .tabla-mejorada thead[b-bvg7t50fe5]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.historico-entregas .tabla-mejorada th[b-bvg7t50fe5],
.historico-entregas .tabla-mejorada td[b-bvg7t50fe5] {
    padding: 10px;
    min-width: 140px;
    max-width: 140px;
    width: 140px;
    text-align: center;
}

.historico-entregas .tabla-mejorada .th1[b-bvg7t50fe5] {
    text-align: left;
    min-width: 500px;
    width: 100%;
}

.historico-entregas .tabla-mejorada .th5[b-bvg7t50fe5] {
    min-width: 300px;
    max-width: 300px;
}

.historico-entregas .tabla-mejorada th .subheader[b-bvg7t50fe5] {
    font-size: 0.8em; /* Ajusta el tamaño según lo necesites */
    color: #888888; /* Color gris */
}

.historico-entregas .tabla-mejorada .td1[b-bvg7t50fe5] {
    min-width: 500px;
    width: 100%;
}

.historico-entregas .tabla-mejorada .td1 .td-content[b-bvg7t50fe5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.historico-entregas .tabla-mejorada .td1 img[b-bvg7t50fe5] {
    height: 100px;
    width: 100px;
}

.historico-entregas .tabla-mejorada .td1 .producto-info[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.historico-entregas .tabla-mejorada .td1 .descripcion[b-bvg7t50fe5] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.historico-entregas .tabla-mejorada .td1 .referencia[b-bvg7t50fe5] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.historico-entregas .tabla-mejorada .td5 .td-content[b-bvg7t50fe5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.historico-entregas .tabla-mejorada .td5 .td-content .btn-cart[b-bvg7t50fe5] {
    width: 65px;
    height: 53px;
    border-radius: 6px;
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    color: #3CAA36;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.historico-entregas .tabla-mejorada .td5 .td-content .btn-cart:hover[b-bvg7t50fe5] {
    background-color: #3CAA36;
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
}

.historico-entregas .tabla-mejorada .td5 .td-content .btn-cart:active[b-bvg7t50fe5] {
    transform: scale(0.98);
}

.historico-entregas .tabla-mejorada .td5 .td-content .btn-cart[b-bvg7t50fe5]  svg {
    width: 24px;
    height: 24px;
}

.historico-entregas .state-layer-wrapper-2[b-bvg7t50fe5] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.historico-entregas .state-layer-wrapper-2:hover[b-bvg7t50fe5] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.historico-entregas .state-layer-wrapper-2:hover .label-text-3[b-bvg7t50fe5] {
    color: var(--blanco);
}

.historico-entregas .label-text-3[b-bvg7t50fe5] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.historico-entregas .img[b-bvg7t50fe5] {
    position: relative;
    width: 24px;
    height: 24px;
}

.historico-entregas .spinner-border[b-bvg7t50fe5] {
    color: var(--blanco);
}

.page-blocker[b-bvg7t50fe5] {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-bvg7t50fe5] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}
/* /Components/Pages/HistoricoProductos.razor.rz.scp.css */
/* ============================================= */
/* HISTÓRICO DE PRODUCTOS - RESPONSIVE CSS      */
/* Figma: 514:23753 - Clamp-based responsive     */
/* ============================================= */

/* ============================================= */
/* CSS VARIABLES - Responsive system             */
/* ============================================= */
.historico-productos[b-8rddnquumf] {
    /* Layout */
    --hp-padding-lateral: clamp(16px, 6vw, 115px);
    --hp-padding-bottom: clamp(40px, 5.21vw, 100px);
    --hp-gap-sections: clamp(30px, 3.91vw, 75px);

    /* Filter box */
    --hp-filter-px: clamp(20px, 3.91vw, 75px);
    --hp-filter-py: clamp(20px, 2.6vw, 50px);
    --hp-filter-radius: clamp(10px, 0.78vw, 15px);
    --hp-filter-col-gap: clamp(30px, 5.21vw, 100px);
    --hp-filter-section-py: clamp(24px, 2.6vw, 50px);
    --hp-filter-inner-gap: clamp(16px, 1.56vw, 30px);
    --hp-filter-title-gap: clamp(12px, 1.04vw, 20px);

    /* Typography */
    --hp-font-page-title: clamp(13px, 0.83vw, 16px);
    --hp-font-headline: clamp(20px, 1.67vw, 32px);
    --hp-font-headline-lh: clamp(28px, 2.08vw, 40px);
    --hp-font-section-title: clamp(16px, 1.15vw, 22px);
    --hp-font-section-title-lh: clamp(22px, 1.46vw, 28px);
    --hp-font-input: clamp(14px, 0.94vw, 18px);
    --hp-font-body: clamp(13px, 0.83vw, 16px);
    --hp-font-body-lh: clamp(20px, 1.25vw, 24px);

    /* Inputs */
    --hp-input-padding: clamp(12px, 0.89vw, 17px);
    --hp-input-radius: 6px;

    /* Buttons */
    --hp-btn-height: clamp(42px, 2.71vw, 52px);
    --hp-btn-radius: 6px;
    --hp-btn-px: clamp(16px, 1.25vw, 24px);
    --hp-btn-font: clamp(13px, 0.83vw, 16px);

    /* Products table */
    --hp-product-img: clamp(60px, 5.21vw, 100px);
    --hp-product-img-radius: clamp(8px, 0.73vw, 14px);
    --hp-product-gap: clamp(12px, 1.04vw, 20px);
    --hp-actions-gap: clamp(12px, 1.3vw, 25px);
    --hp-qty-actions-gap: clamp(30px, 5.21vw, 100px);

    /* Help button */
    --hp-help-btn-width: clamp(280px, 30.83vw, 592px);

    /* Arrow icon */
    --hp-arrow-size: clamp(20px, 1.25vw, 24px);
}

/* ============================================= */
/* BASE LAYOUT                                   */
/* ============================================= */
.historico-productos[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: var(--hp-gap-sections);
    padding: 0 var(--hp-padding-lateral) var(--hp-padding-bottom);
    position: relative;
    background-color: var(--blanco);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}

.historico-productos *[b-8rddnquumf],
.historico-productos *[b-8rddnquumf]::before,
.historico-productos *[b-8rddnquumf]::after {
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME (generic column container)              */
/* ============================================= */
.historico-productos .frame[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TITLE BAR (arrow + page title centered)       */
/* ============================================= */
.historico-productos .titulo[b-8rddnquumf] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.075vw, 20px) 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.historico-productos h2[b-8rddnquumf] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--hp-font-page-title);
    letter-spacing: 0;
    line-height: normal;
}

.historico-productos .iconos[b-8rddnquumf] {
    position: absolute;
    width: var(--hp-arrow-size);
    height: var(--hp-arrow-size);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ============================================= */
/* HEADER ROW (headline + search button)         */
/* ============================================= */
.historico-productos .div[b-8rddnquumf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    gap: clamp(12px, 1.04vw, 20px);
    flex-wrap: wrap;
    margin-bottom : clamp(12px, 1.61vw, 20px);
}

.historico-productos .text-wrapper[b-8rddnquumf] {
    position: relative;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--hp-font-headline);
    letter-spacing: 0;
    line-height: var(--hp-font-headline-lh);
    font-style: normal;
}

/* ============================================= */
/* SEARCH BUTTON (green, primary)                */
/* ============================================= */
.historico-productos .boton[b-8rddnquumf] {
    display: inline-flex;
    flex-direction: column;
    height: var(--hp-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: var(--hp-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.historico-productos .boton:hover[b-8rddnquumf] {
    background-color: #80C87C;
}

.historico-productos .state-layer[b-8rddnquumf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 0.52vw, 10px) var(--hp-btn-px);
    position: relative;
    flex: 1;
    width: 100%;
}

.historico-productos .label-text[b-8rddnquumf] {
    position: relative;
    width: fit-content;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--blanco);
    font-size: var(--hp-btn-font);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--hp-font-body-lh);
    white-space: nowrap;
}

/* ============================================= */
/* FILTER BOX (gray container)                   */
/* Figma: bg #F5F5F5, px 75, py 50, r 15        */
/* ============================================= */
.historico-productos .frame-2[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--hp-filter-py) var(--hp-filter-px);
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: var(--hp-filter-radius);
}

/* --- Section 1: Código + Dirección (dashed bottom) --- */
.historico-productos .frame-3[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--hp-filter-section-py);
    width: 100%;
}

/* --- Section 2: Descripción (dashed top & bottom) --- */
.historico-productos .frame-8[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--hp-filter-section-py) 0;
    width: 100%;
}

/* --- Section 3: Fechas (padding-top only) --- */
.historico-productos .frame-9[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-filter-title-gap);
    padding-top: var(--hp-filter-section-py);
    width: 100%;
}

/* --- Two-column row (código+dirección, desde+hasta) --- */
.historico-productos .frame-4[b-8rddnquumf] {
    display: flex;
    align-items: flex-start;
    gap: var(--hp-filter-col-gap);
    width: 100%;
}

/* --- Single filter column --- */
.historico-productos .frame-5[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--hp-filter-inner-gap);
    flex: 1 1 0;
    min-width: 0;
}

/* --- Title + underline wrapper --- */
.historico-productos .frame-6[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-filter-title-gap);
    width: 100%;
    border-bottom: 1px solid #d3d3d3;
    padding-bottom: clamp(4px, 0.26vw, 5px);
}

/* --- Section titles (bold 22px) --- */
.historico-productos .text-wrapper-2[b-8rddnquumf] {
    color: var(--black-fonts-headings);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-section-title);
    font-weight: 700;
    line-height: var(--hp-font-section-title-lh);
}

/* --- Date labels (same weight as section titles) --- */
.historico-productos .text-wrapper-3[b-8rddnquumf] {
    color: var(--black-fonts-headings);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-section-title);
    font-weight: 700;
    line-height: var(--hp-font-section-title-lh);
}

/* --- Input wrapper --- */
/* CRITICAL: align-items:stretch makes children full width */
.historico-productos .frame-7[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* ============================================= */
/* INPUTS                                        */
/* Figma: bg white, p 17, r 6, font 18 light    */
/* ============================================= */
.historico-productos[b-8rddnquumf]  .input,
.historico-productos .input[b-8rddnquumf] {
    background-color: var(--blanco) !important;
    border: 2px solid var(--grisgris-10) !important;
    border-radius: var(--hp-input-radius) !important;
    color: var(--negro);
    display: block !important;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-input);
    font-weight: 300;
    letter-spacing: 0;
    line-height: normal;
    padding: var(--hp-input-padding) !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
}

.historico-productos[b-8rddnquumf]  input::placeholder,
.historico-productos input[b-8rddnquumf]::placeholder {
    color: var(--grisgris-50);
    font-weight: 300;
}

.historico-productos[b-8rddnquumf]  input:focus,
.historico-productos input:focus[b-8rddnquumf] {
    border: 2px solid var(--primario) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Select (dirección) --- */
.historico-productos .input-2[b-8rddnquumf] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--blanco) !important;
    border: 2px solid var(--grisgris-10) !important;
    border-radius: var(--hp-input-radius) !important;
    color: var(--negro);
    display: block !important;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-input);
    font-weight: 300;
    letter-spacing: 0;
    line-height: normal;
    padding: var(--hp-input-padding) !important;
    padding-right: clamp(36px, 2.6vw, 50px) !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    transition: border-color 0.2s ease;
    box-sizing: border-box !important;
}

.historico-productos .input-2:focus[b-8rddnquumf] {
    border: 2px solid var(--primario) !important;
    outline: none !important;
    box-shadow: none !important;
}

.historico-productos .select-wrapper[b-8rddnquumf] {
    position: relative;
    width: 100%;
}

.historico-productos .arrow[b-8rddnquumf] {
    position: absolute;
    right: clamp(12px, 0.83vw, 16px);
    top: 50%;
    width: clamp(10px, 0.78vw, 15px);
    height: clamp(10px, 0.78vw, 15px);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.historico-productos .select-wrapper:focus-within .arrow[b-8rddnquumf] {
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================= */
/* ALERTS                                        */
/* ============================================= */
.historico-productos .alert[b-8rddnquumf] {
    width: 100%;
    border-radius: var(--hp-input-radius);
}

.historico-productos .alert p[b-8rddnquumf] {
    margin-bottom: 0;
}

/* ============================================= */
/* PRODUCTS TABLE                                */
/* Figma: Producto (left flex), Cantidad + actions (right) */
/* ============================================= */
.historico-productos .tabla-wrapper[b-8rddnquumf] {
    width: 100%;
}

.historico-productos .tabla-container[b-8rddnquumf] {
    width: 100%;
}

.historico-productos .tabla-mejorada[b-8rddnquumf] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-body);
    table-layout: auto;
}

/* --- Table header --- */
.historico-productos .tabla-mejorada thead[b-8rddnquumf] {
    color: #000000;
    font-weight: 700;
}

.historico-productos .tabla-mejorada th[b-8rddnquumf] {
    font-size: var(--hp-font-body);
    font-weight: 700;
    border-bottom: 2px solid #000000;
    vertical-align: bottom;
}

/* th1: Producto - takes all remaining space */
.historico-productos .tabla-mejorada .th1[b-8rddnquumf] {
    text-align: left;
    padding: clamp(8px, 0.52vw, 10px) clamp(8px, 0.52vw, 10px) clamp(14px, 1.04vw, 20px);
    width: auto;
}

/* th2: Cantidad - shrink-to-fit, right-aligned */
.historico-productos .tabla-mejorada .th2[b-8rddnquumf] {
    text-align: center;
    padding: clamp(8px, 0.52vw, 10px) clamp(8px, 0.52vw, 10px) clamp(14px, 1.04vw, 20px);
    white-space: nowrap;
    width: 1px;
}

/* th3: Actions spacer - shrink-to-fit */
.historico-productos .tabla-mejorada .th3[b-8rddnquumf] {
    width: 1px;
    padding: clamp(8px, 0.52vw, 10px) 0 clamp(14px, 1.04vw, 20px);
}

/* --- Table rows --- */
.historico-productos .tabla-mejorada td[b-8rddnquumf] {
    vertical-align: middle;
}

.historico-productos .tabla-mejorada tbody tr:not(:last-child) td[b-8rddnquumf] {
    border-bottom: 1px dashed var(--grisgris-30);
}

/* --- td1: Product cell --- */
.historico-productos .tabla-mejorada .td1[b-8rddnquumf] {
    text-align: left;
    padding: clamp(10px, 0.78vw, 15px) clamp(8px, 0.52vw, 10px);
}

.historico-productos .tabla-mejorada .td1 .td-content[b-8rddnquumf] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--hp-product-gap);
}

.historico-productos .tabla-mejorada .td1 .product-link[b-8rddnquumf] {
    flex-shrink: 0;
    text-decoration: none;
}

.historico-productos .tabla-mejorada .td1 .product-image[b-8rddnquumf] {
    width: var(--hp-product-img);
    height: var(--hp-product-img);
    border-radius: var(--hp-product-img-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.historico-productos .tabla-mejorada .td1 .product-img[b-8rddnquumf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--hp-product-img-radius);
}

.historico-productos .tabla-mejorada .td1 .producto-info[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.historico-productos .tabla-mejorada .td1 .descripcion[b-8rddnquumf] {
    color: #000000;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-body);
    font-weight: 400;
    line-height: var(--hp-font-body-lh);
    letter-spacing: 0.5px;
    word-break: break-word;
}

.historico-productos .tabla-mejorada .td1 .referencia[b-8rddnquumf] {
    color: #000000;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--hp-font-body);
    font-weight: 300;
    line-height: normal;
}

/* --- td2: Quantity cell - shrink-to-fit, right-positioned --- */
.historico-productos .tabla-mejorada .td2[b-8rddnquumf] {
    text-align: center;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--hp-font-body);
    letter-spacing: 0.5px;
    line-height: var(--hp-font-body-lh);
    white-space: nowrap;
    width: 1px;
    padding: clamp(10px, 0.78vw, 15px) clamp(8px, 0.52vw, 10px);
}

/* --- td3: Actions cell - shrink-to-fit, right-aligned --- */
.historico-productos .tabla-mejorada .td3[b-8rddnquumf] {
    text-align: right;
    white-space: nowrap;
    width: 1px;
    padding: clamp(10px, 0.78vw, 15px) 0 clamp(10px, 0.78vw, 15px) var(--hp-qty-actions-gap);
}

.historico-productos .tabla-mejorada .td3 .td-content[b-8rddnquumf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--hp-actions-gap);
}

/* --- Cart button (green border) --- */
.historico-productos .tabla-mejorada .td3 .btn-cart[b-8rddnquumf] {
    width: clamp(48px, 3.39vw, 65px);
    height: clamp(40px, 2.76vw, 53px);
    border-radius: var(--hp-btn-radius);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    color: var(--primario);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.historico-productos .tabla-mejorada .td3 .btn-cart:hover[b-8rddnquumf] {
    background-color: var(--primario);
    color: var(--blanco);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
}

.historico-productos .tabla-mejorada .td3 .btn-cart:active[b-8rddnquumf] {
    transform: scale(0.98);
}

.historico-productos .tabla-mejorada .td3 .btn-cart[b-8rddnquumf]  svg {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
}

/* --- "Añadir a una lista" button (yellow border) --- */
.historico-productos .state-layer-wrapper-2[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    height: clamp(38px, 2.4vw, 46px);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--hp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.historico-productos .state-layer-wrapper-2:hover[b-8rddnquumf] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.historico-productos .state-layer-wrapper-2:hover .label-text-3[b-8rddnquumf] {
    color: var(--blanco);
}

.historico-productos .state-layer-2[b-8rddnquumf] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 0.52vw, 10px) var(--hp-btn-px);
    width: 100%;
    height: 100%;
}

.historico-productos .label-text-3[b-8rddnquumf] {
    position: relative;
    width: fit-content;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--negro);
    font-size: var(--hp-btn-font);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--hp-font-body-lh);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* HELP BUTTON (bottom, yellow border)           */
/* ============================================= */
.historico-productos .state-layer-wrapper[b-8rddnquumf] {
    display: flex;
    flex-direction: column;
    width: var(--hp-help-btn-width);
    max-width: 100%;
    height: var(--hp-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--hp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
}

.historico-productos .state-layer-wrapper:hover[b-8rddnquumf] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.historico-productos .state-layer-wrapper:hover .label-text-2[b-8rddnquumf] {
    color: var(--blanco);
}

.historico-productos .label-text-2[b-8rddnquumf] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--negro);
    font-size: var(--hp-btn-font);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--hp-font-body-lh);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* SPINNER & PAGE BLOCKER                        */
/* ============================================= */
.historico-productos .spinner-border[b-8rddnquumf] {
    color: var(--blanco);
}

.page-blocker[b-8rddnquumf] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-8rddnquumf] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* LOADING & ACCESS DENIED                       */
/* ============================================= */
.loading-container[b-8rddnquumf],
.access-denied-container[b-8rddnquumf] {
    padding: clamp(24px, 2.08vw, 40px);
    text-align: center;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .historico-productos[b-8rddnquumf] {
        --hp-padding-lateral: 30px;
        --hp-gap-sections: 40px;
        --hp-filter-px: 30px;
        --hp-filter-py: 30px;
        --hp-filter-col-gap: 30px;
        --hp-filter-section-py: 24px;
        --hp-filter-inner-gap: 16px;
        --hp-filter-title-gap: 12px;
        --hp-font-headline: 24px;
        --hp-font-headline-lh: 32px;
        --hp-font-section-title: 18px;
        --hp-font-section-title-lh: 24px;
        --hp-font-input: 15px;
        --hp-font-body: 14px;
        --hp-font-body-lh: 22px;
        --hp-input-padding: 14px;
        --hp-product-img: 80px;
        --hp-product-img-radius: 10px;
        --hp-product-gap: 14px;
        --hp-actions-gap: 14px;
        --hp-qty-actions-gap: 40px;
        --hp-btn-height: 44px;
        --hp-btn-font: 14px;
        --hp-help-btn-width: 400px;
    }

    /* Stack filter columns on tablet */
    .historico-productos .frame-4[b-8rddnquumf] {
        flex-direction: column;
        gap: 20px;
    }

    .historico-productos .frame-5[b-8rddnquumf] {
        width: 100%;
        flex: none;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MOBILE (max-width: 768px)        */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .historico-productos[b-8rddnquumf] {
        --hp-padding-lateral: 16px;
        --hp-gap-sections: 30px;
        --hp-filter-px: 20px;
        --hp-filter-py: 20px;
        --hp-filter-col-gap: 20px;
        --hp-filter-section-py: 20px;
        --hp-filter-inner-gap: 12px;
        --hp-filter-title-gap: 10px;
        --hp-font-page-title: 13px;
        --hp-font-headline: 20px;
        --hp-font-headline-lh: 28px;
        --hp-font-section-title: 16px;
        --hp-font-section-title-lh: 22px;
        --hp-font-input: 14px;
        --hp-font-body: 13px;
        --hp-font-body-lh: 20px;
        --hp-input-padding: 12px;
        --hp-product-img: 70px;
        --hp-product-img-radius: 8px;
        --hp-product-gap: 10px;
        --hp-actions-gap: 8px;
        --hp-qty-actions-gap: 16px;
        --hp-btn-height: 42px;
        --hp-btn-px: 16px;
        --hp-btn-font: 13px;
        --hp-arrow-size: 20px;
        --hp-help-btn-width: 100%;
    }

    /* Search button full width on mobile */
    .historico-productos .div[b-8rddnquumf] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .historico-productos .boton[b-8rddnquumf] {
        width: 100%;
    }

    /* Hide table header on mobile - rows become cards */
    .historico-productos .tabla-mejorada thead[b-8rddnquumf] {
        display: none;
    }

    /* Table rows → card layout */
    .historico-productos .tabla-mejorada tbody tr[b-8rddnquumf] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 0;
        gap: 8px;
    }

    .historico-productos .tabla-mejorada tbody tr:not(:last-child)[b-8rddnquumf] {
        border-bottom: 1px dashed var(--grisgris-30);
    }

    .historico-productos .tabla-mejorada tbody tr:not(:last-child) td[b-8rddnquumf] {
        border-bottom: none;
    }

    .historico-productos .tabla-mejorada .td1[b-8rddnquumf] {
        flex: 1 1 100%;
        padding: 0;
        width: auto;
    }

    .historico-productos .tabla-mejorada .td2[b-8rddnquumf] {
        flex: 0 0 auto;
        padding: 4px 0;
        font-weight: 600;
        width: auto;
    }

    .historico-productos .tabla-mejorada .td2[b-8rddnquumf]::before {
        content: 'Cantidad: ';
        font-weight: 400;
    }

    .historico-productos .tabla-mejorada .td3[b-8rddnquumf] {
        flex: 1 1 auto;
        padding: 4px 0;
        text-align: right;
        width: auto;
    }

    .historico-productos .tabla-mejorada .td3 .td-content[b-8rddnquumf] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Smaller buttons on mobile */
    .historico-productos .state-layer-wrapper-2[b-8rddnquumf] {
        height: 38px;
    }

    .historico-productos .state-layer-2[b-8rddnquumf] {
        padding: 6px 12px;
    }

    .historico-productos .label-text-3[b-8rddnquumf] {
        font-size: 12px;
    }

    .historico-productos .tabla-mejorada .td3 .btn-cart[b-8rddnquumf] {
        width: 42px;
        height: 38px;
    }

    .historico-productos .tabla-mejorada .td3 .btn-cart[b-8rddnquumf]  svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - SMALL MOBILE (max-width: 480px)  */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .historico-productos[b-8rddnquumf] {
        --hp-padding-lateral: 12px;
        --hp-gap-sections: 24px;
        --hp-filter-px: 16px;
        --hp-filter-py: 16px;
        --hp-font-headline: 18px;
        --hp-font-headline-lh: 24px;
        --hp-font-section-title: 15px;
        --hp-font-section-title-lh: 20px;
        --hp-font-input: 14px;
        --hp-font-body: 12px;
        --hp-font-body-lh: 18px;
        --hp-product-img: 60px;
        --hp-product-img-radius: 8px;
    }

    .historico-productos .tabla-mejorada .td1 .descripcion[b-8rddnquumf] {
        font-size: 12px;
        line-height: 18px;
    }

    .historico-productos .tabla-mejorada .td1 .referencia[b-8rddnquumf] {
        font-size: 11px;
    }

    .historico-productos .state-layer-wrapper-2[b-8rddnquumf] {
        height: 36px;
    }

    .historico-productos .label-text-3[b-8rddnquumf] {
        font-size: 11px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS */
/* ============================================= */
.new-home[b-1x2m0jbkfu] {
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --secundario: #6B989C;
    --terciario: #85957E;
    --alternativo: #FDD623;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-20: #EEEEEE;
    --gris-30: #E0E0E0;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-60: #757575;
    --oferta-50: #FF5449;
    --oferta-60: #DE3730;
    --dark-green-buttons: #3A4F39;
    --black-fonts-headings: #2D2E2E;
    --primary-10: #EBF6EB;

    /* ============================================= */
    /* SISTEMA RESPONSIVE - Max width layout */
    /* ============================================= */
    --max-layout-width: 1680px;

    /* Paddings laterales - fluido hasta el max */
    --padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps */
    --gap-sm: clamp(7px, 0.73vw, 14px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);

    /* Tamaños de categorías */
    --categoria-height: clamp(85px, 8.7vw, 167px);
    --categoria-img-height: clamp(65px, 6.51vw, 125px);

    /* Tamaños de productos */
    --producto-img-size: clamp(140px, 15.63vw, 300px);
    --producto-card-padding: clamp(10px, 1.04vw, 20px);

    /* Tipografía fluida */
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-title-lg: clamp(16px, 1.67vw, 32px);
    --font-title-md: clamp(14px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-price: clamp(14px, 1.04vw, 20px);
    --font-badge: clamp(9px, 0.52vw, 10px);

    /* Border radius */
    --radius-card: clamp(7px, 0.73vw, 14px);

    /* Botones */
    --btn-cart-size: clamp(36px, 3.39vw, 65px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);

    /* Marcas */
    --brand-height: clamp(25px, 2.6vw, 50px);

    /* Línea decorativa */
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
}

/* ============================================= */
/* ESTILOS GENERALES */
/* ============================================= */
.new-home[b-1x2m0jbkfu] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    overflow-x: hidden;
    /* Previene hueco horizontal en móvil */
}

/* ============================================= */
/* SECCIÓN 1: BANNERS PRINCIPALES (Home Body 1) */
/* ============================================= */
.home-body-1[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    background-color: var(--blanco);
    overflow: hidden;
    padding: 0 var(--padding-lateral);
    gap: var(--gap-sm);
}

.banner-gran[b-1x2m0jbkfu] {
    flex: 1 0 0;
    min-width: 0;
}

.banner-gran .sin-titulo[b-1x2m0jbkfu] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 520px;
    width: 100%;
    padding: 100px 396px 0 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.banner-gran .sin-titulo img[b-1x2m0jbkfu] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-gran .sin-titulo p[b-1x2m0jbkfu] {
    position: relative;
    z-index: 1;
    margin: 0;
    font-weight: 400;
    font-size: 48px;
    line-height: normal;
    color: var(--Primario, #3CAA36);
    font-family: "Nunito Sans";
}

.frame-2[b-1x2m0jbkfu] {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-sm);
    flex: 1;
    min-width: 0;
    position: relative;
}

.banner-medium-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 412px;
    height: 520px;
    padding: 47px 50px 50px;
    background: #EBF6EB;
    border-radius: var(--radius-card);
}

.banner-medium-subtitle[b-1x2m0jbkfu] {
    font-family: "Nunito Sans";
    font-weight: 400;
    font-size: 48px;
    line-height: normal;
    color: var(--Primario, #3CAA36);
}

.banner-medium-subtitle .banner-medium-pregunta[b-1x2m0jbkfu] {
    font-size: 22px;
    line-height: 28px;
    color: #000;
    margin-top: 33px;
}

.banner-medium-subtitle .banner-medium-respuesta[b-1x2m0jbkfu] {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #000;
}

.banner-medium-wrapper .banner-medium-contacto[b-1x2m0jbkfu] {
    text-align: right;
    width: 100%;
}

.banner-medium-wrapper .banner-medium-contacto .banner-medium-contacto-titulo[b-1x2m0jbkfu] {
    font-family: "Nunito Sans";
    font-weight: 900; /* Black */
    font-size: 24px;
    color: var(--Primario, #3CAA36);
}

.banner-medium-wrapper .banner-medium-contacto .banner-medium-contacto-datos[b-1x2m0jbkfu] {
    font-family: "Nunito Sans";
    font-size: 22px;
    line-height: 28px;
    color: #212121;
}

.banner-medium-wrapper .contacto .datos strong[b-1x2m0jbkfu] {
    font-weight: 600; /* SemiBold */
}

.frame-3[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-sm);
    position: relative;
}

/* ============================================= */
/* BANNER PEQUE CON ANIMACIÓN HOVER */
/* ============================================= */
.banner-peque-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.banner-peque-subtitle[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: var(--font-title-lg);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.banner-peque-img-container[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: height 0.3s ease;
}

.img-2[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.banner-peque-wrapper:hover .banner-peque-img-container[b-1x2m0jbkfu] {
    height: calc(100% - clamp(30px, 2.86vw, 55px));
}

.banner-peque-wrapper:hover .banner-peque-subtitle[b-1x2m0jbkfu] {
    height: clamp(30px, 2.86vw, 55px);
    opacity: 1;
}

/* ============================================= */
/* SECCIÓN 2: CATEGORÍAS (Home Body 2) */
/* ============================================= */
.home-body-2[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(10px, 1.04vw, 20px) var(--padding-lateral) clamp(14px, 1.46vw, 28px);
    gap: clamp(18px, 1.82vw, 35px);
    width: 100%;
    background-color: var(--blanco);
    position: relative;
}

.home-body-2[b-1x2m0jbkfu]::before {
    content: '';
    position: relative;
    display: block;
    width: var(--line-width);
    height: 1px;
    background-color: #ABABAB;
    border-radius: 0.5px;
    flex-shrink: 0;
}

.frame-4[b-1x2m0jbkfu] {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
    gap: var(--gap-sm);
}

.banner-material-de[b-1x2m0jbkfu],
.banner-categoria[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    height: var(--categoria-height);
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.banner-material-de:hover[b-1x2m0jbkfu],
.banner-categoria:hover[b-1x2m0jbkfu] {
    transform: translateY(-5px);
}

/* ============================================= */
/* CATEGORÍAS CON ANIMACIÓN DE ENTRADA           */
/* Efecto "desenrollar" (unroll blind):          */
/*   1. Imagen enrollada (tira fina arriba)      */
/*   2. Se desenrolla/estira hacia abajo         */
/*   3. Texto aparece suavemente                 */
/* ============================================= */

/* --- Fase 1→2: Desenrollar — movimiento continuo y fluido --- */
@keyframes catUnroll-b-1x2m0jbkfu {
    0% {
        opacity: 0;
        clip-path: inset(0 0 92% 0 round var(--radius-card));
        transform: scaleY(0.08);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0% 0 round var(--radius-card));
        transform: scaleY(1);
    }
}

/* --- Fase 3: Texto aparece suavemente desde abajo --- */
@keyframes catTextReveal-b-1x2m0jbkfu {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Wrapper --- */
.banner-categoria-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: center;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* --- Imagen --- */
.banner-categoria-img-container[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    height: var(--categoria-img-height);
    border-radius: var(--radius-card);
    overflow: hidden;
    transform-origin: top center;
}

.img-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* --- Texto --- */
.text-wrapper-2[b-1x2m0jbkfu] {
    position: relative;
    margin-top: clamp(5px, 0.52vw, 10px);
    width: 100%;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--font-title-md);
    letter-spacing: 0;
    line-height: 1.33;
    text-align: left;
}

/* --- Animaciones solo en render interactivo --- */
.home-animated .banner-categoria-img-container[b-1x2m0jbkfu] {
    will-change: transform, clip-path, opacity;
    animation: catUnroll-b-1x2m0jbkfu 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-animated .text-wrapper-2[b-1x2m0jbkfu] {
    will-change: transform, opacity;
    animation: catTextReveal-b-1x2m0jbkfu 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Stagger en cascada (150ms entre cards) ---
   Imagen se desenrolla ~1s, texto aparece justo al final --- */
.home-animated .banner-categoria-wrapper:nth-child(1) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.05s; }
.home-animated .banner-categoria-wrapper:nth-child(1) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 0.85s; }

.home-animated .banner-categoria-wrapper:nth-child(2) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.20s; }
.home-animated .banner-categoria-wrapper:nth-child(2) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.00s; }

.home-animated .banner-categoria-wrapper:nth-child(3) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.35s; }
.home-animated .banner-categoria-wrapper:nth-child(3) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.15s; }

.home-animated .banner-categoria-wrapper:nth-child(4) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.50s; }
.home-animated .banner-categoria-wrapper:nth-child(4) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.30s; }



/* ============================================= */
/* SECCIÓN 3: PRODUCTOS DESTACADOS (Home Body 3) */
/* ============================================= */
.home-body-3[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    padding: clamp(30px, 3.13vw, 60px) var(--padding-lateral) clamp(40px, 4.17vw, 80px);
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

.frame-5[b-1x2m0jbkfu] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.text-wrapper-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.vector-3[b-1x2m0jbkfu] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

/* Slider productos */
.frame-6[b-1x2m0jbkfu] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.carousel-btn[b-1x2m0jbkfu] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.carousel-btn:hover[b-1x2m0jbkfu] {
    opacity: 0.6;
}

.carousel-btn svg[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
}

.frame-7[b-1x2m0jbkfu] {
    flex: 1;
    overflow: hidden;
}

.carousel-container[b-1x2m0jbkfu] {
    overflow: hidden;
    width: 100%;
}

.carousel-track[b-1x2m0jbkfu] {
    display: flex;
    gap: var(--gap-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track[b-1x2m0jbkfu]::-webkit-scrollbar {
    display: none;
}

/* ============================================= */
/* TARJETAS DE PRODUCTO */
/* ============================================= */
.card-producto[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    padding: 0 0 clamp(5px, 0.52vw, 10px) var(--producto-card-padding);
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.card-producto[b-1x2m0jbkfu]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:first-child[b-1x2m0jbkfu]::before {
    display: block;
}

.card-producto:hover[b-1x2m0jbkfu]::before {
    background-color: var(--primario);
    width: clamp(2px, 0.156vw, 3px);
}

.card-producto:first-child[b-1x2m0jbkfu] {
    padding-left: var(--producto-card-padding);
}

.card-producto:hover[b-1x2m0jbkfu] {
    transform: translateY(-2px);
}

.frame-wrapper[b-1x2m0jbkfu] {
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-wrapper[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-card);
    position: relative;
}

.frame-8[b-1x2m0jbkfu] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Badges/Etiquetas */
.grupo[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.grupo-oferta[b-1x2m0jbkfu] {
    background-color: var(--oferta-50);
}

.grupo-eco[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.badge-text[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: var(--blanco);
    white-space: nowrap;
}

.grupo-stock[b-1x2m0jbkfu] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-1x2m0jbkfu] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

.pack-info-text[b-1x2m0jbkfu] {
    display: flex;
    width: calc(var(--producto-img-size) - clamp(10px, 1.04vw, 20px) * 2);
    margin: 0 auto;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 0.78vw, 15px);
    flex-shrink: 0;
}

.info-producto[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(3px, 0.31vw, 6px);
    flex: 1;
    min-width: 0;
    max-width: calc(100% - var(--btn-cart-size) - clamp(8px, 0.78vw, 15px));
}

.redondas[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.21vw, 4px);
    position: relative;
    flex: 0 0 auto;
}

.redonda[b-1x2m0jbkfu] {
    width: clamp(14px, 1.2vw, 23px);
    height: clamp(14px, 1.2vw, 23px);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}

.redonda:hover[b-1x2m0jbkfu] {
    transform: scale(1.1);
}

.redonda-negra[b-1x2m0jbkfu] {
    background-color: #010101;
    border: 1px dashed #000000;
}

.redonda-blanca[b-1x2m0jbkfu] {
    background-color: #ffffff;
    border: 1px solid var(--gris-60);
}

.redonda-amarilla[b-1x2m0jbkfu] {
    background-color: #ffd600;
}

.redonda-azul[b-1x2m0jbkfu] {
    background-color: #3a37bd;
}

.colors-more[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: clamp(10px, 0.73vw, 14px);
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.text-wrapper-5[b-1x2m0jbkfu] {
    display: block;
    width: clamp(80px, 9vw, 170px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0px;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-wrapper-5 span[b-1x2m0jbkfu] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-producto:hover .text-wrapper-5 span[b-1x2m0jbkfu] {
    display: inline-block;
    text-overflow: clip;
    animation: marquee-scroll-b-1x2m0jbkfu 5s linear infinite;
}

@keyframes marquee-scroll-b-1x2m0jbkfu {

    0%,
    10% {
        transform: translateX(0);
    }

    90%,
    100% {
        transform: translateX(calc(-100% + clamp(80px, 8vw, 150px)));
    }
}

/* Precios */
.price[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

/* Botón añadir al carrito */
.boton[b-1x2m0jbkfu] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: clamp(4px, 0.31vw, 6px);
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.boton:hover[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.boton:hover .iconos-2[b-1x2m0jbkfu] {
    color: var(--blanco);
}

.iconos-2[b-1x2m0jbkfu] {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-1x2m0jbkfu {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-1x2m0jbkfu] {
    animation: addedToCart-b-1x2m0jbkfu 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-1x2m0jbkfu] {
    color: var(--blanco);
}

/* ============================================= */
/* SECCIÓN 4: MEJORES MARCAS (Home Body 4) */
/* ============================================= */
.home-body-4[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    padding: 0 var(--padding-lateral) 0;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

.home-body-4 .frame-5[b-1x2m0jbkfu] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.home-body-4 .frame-5 .text-wrapper-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-body-4 .frame-5 .vector-3[b-1x2m0jbkfu] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.brands-slider-wrapper[b-1x2m0jbkfu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.brands-slider-container[b-1x2m0jbkfu] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.brands-slider-container[b-1x2m0jbkfu]::before,
.brands-slider-container[b-1x2m0jbkfu]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(50px, 5vw, 100px);
    z-index: 2;
    pointer-events: none;
}

.brands-slider-container[b-1x2m0jbkfu]::before {
    left: 0;
    background: linear-gradient(to right, var(--blanco) 0%, transparent 100%);
}

.brands-slider-container[b-1x2m0jbkfu]::after {
    right: 0;
    background: linear-gradient(to left, var(--blanco) 0%, transparent 100%);
}

.brands-nav-btn[b-1x2m0jbkfu] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.brands-nav-btn:hover[b-1x2m0jbkfu] {
    opacity: 0.6;
}

.brands-nav-btn svg[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
}

.brands-track-infinite[b-1x2m0jbkfu] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.brand-item[b-1x2m0jbkfu] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.brand-item:hover[b-1x2m0jbkfu] {
    transform: scale(1.1);
}

.brand-item img[b-1x2m0jbkfu] {
    max-height: var(--brand-height);
    width: auto;
    object-fit: contain;
}

/* ============================================= */
/* SECCIÓN 5: SERVICIOS (Home Body 5) */
/* ============================================= */
.home-body-5[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(14px, 1.46vw, 28px) var(--padding-lateral) clamp(37px, 3.85vw, 74px);
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

/* ============================================= */
/* BANNER SERVICIO CON ANIMACIÓN HOVER */
/* ============================================= */
.banner-servicio-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    aspect-ratio: 412 / 560;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.52vw, 10px);
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.banner-servicio-subtitle[b-1x2m0jbkfu] {
    width: 100%;
    height: 0;
    overflow: hidden;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: var(--font-title-lg);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.banner-servicio-img-container[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: height 0.3s ease;
}

.banner-servicio-img[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.banner-servicio-wrapper:hover .banner-servicio-img-container[b-1x2m0jbkfu] {
    height: calc(100% - clamp(30px, 2.86vw, 55px));
}

.banner-servicio-wrapper:hover .banner-servicio-subtitle[b-1x2m0jbkfu] {
    height: clamp(30px, 2.86vw, 55px);
    opacity: 1;
}

.banner-servicio[b-1x2m0jbkfu] {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: var(--radius-card);
    cursor: pointer;
    overflow: hidden;
}

.banner-servicio img[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* ============================================= */
/* SECCIÓN 6: PRE-FOOTER (Links Categorías) */
/* ============================================= */
.pre-footer[b-1x2m0jbkfu] {
    display: flex;
    width: 100%;
    padding: clamp(30px, 3.125vw, 60px) var(--padding-lateral);
    align-items: center;
    justify-content: space-between;
    background-color: var(--blanco);
    gap: 0;
    --prefooter-col-padding: clamp(20px, 2.1vw, 40px);
}

.pre-footer-column[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
    flex: 1;
    padding: 0 var(--prefooter-col-padding);
    justify-content: center;
    align-items: flex-start;
}

.pre-footer-separator[b-1x2m0jbkfu] {
    width: 1px;
    height: clamp(50px, 4.375vw, 84px);
    align-self: center;
    background-image: linear-gradient(to bottom, var(--gris-40) 50%, transparent 50%);
    background-size: 1px clamp(4px, 0.3125vw, 6px);
    background-repeat: repeat-y;
    flex-shrink: 0;
    position: relative;
}

.category-link[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.625vw, 12px);
    text-decoration: none;
    color: #9E9E9E;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: clamp(18px, 1.458vw, 28px);
    position: relative;
    padding-left: 0;
}

.link-indicator[b-1x2m0jbkfu] {
    position: absolute;
    left: calc(var(--prefooter-col-padding) * -1 - 1.5px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(2px, 0.156vw, 3px);
    height: clamp(25px, 2.1875vw, 42px);
    background-color: transparent;
    border-radius: 2px;
    transition: background-color 0.35s ease;
}

.link-icon[b-1x2m0jbkfu] {
    width: clamp(14px, 1.042vw, 20px);
    height: clamp(14px, 1.042vw, 20px);
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.link-text[b-1x2m0jbkfu] {
    white-space: nowrap;
    transition: transform 0.35s ease, color 0.35s ease;
}

.category-link:hover[b-1x2m0jbkfu] {
    color: #141718;
}

.category-link:hover .link-indicator[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.category-link:hover .link-icon[b-1x2m0jbkfu] {
    opacity: 1;
}

.category-link:hover .link-text[b-1x2m0jbkfu] {
    color: #141718;
}

/* ============================================= */
/* NO PRODUCTS MESSAGE */
/* ============================================= */
.no-products-msg[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    color: var(--gris-50);
    text-align: center;
    padding: clamp(20px, 2.08vw, 40px);
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* Layout Figma: Video grande izq + columna 3 banners derecha */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 30px;
        --gap-sm: 7px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --categoria-height: 140px;
        --categoria-img-height: 100px;
        --producto-img-size: 160px;
        --producto-card-padding: 14px;
        --font-title-xl: 22px;
        --font-title-lg: 16px;
        --font-title-md: 15px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
        --radius-card: 14px;
        --btn-cart-size: 44px;
        --btn-icon-size: 20px;
        --brand-height: 30px;
        --line-width: 200px;
        --line-height-section: 40px;
    }

    /* ========== REORDENAR SECCIONES ========== */
    /* En tablet: Slider productos (order:2) ANTES de Categorías (order:3) */
    .new-home .home-body-1[b-1x2m0jbkfu] {
        order: 1 !important;
    }

    .new-home .home-body-3[b-1x2m0jbkfu] {
        order: 2 !important;
    }

    /* Slider productos primero */
    .new-home .home-body-2[b-1x2m0jbkfu] {
        order: 3 !important;
    }

    /* Categorías después */
    .new-home .home-body-4[b-1x2m0jbkfu] {
        order: 4 !important;
    }

    .new-home .home-body-5[b-1x2m0jbkfu] {
        order: 5 !important;
    }

    .new-home .pre-footer[b-1x2m0jbkfu] {
        order: 6 !important;
    }

    /* ========== BANNERS TABLET ========== */
    /* Layout Figma: Video grande izq (flex-grow) + columna 163px der con 3 banners */
    .home-body-1[b-1x2m0jbkfu] {
        flex-direction: row;
        gap: 20px;
        padding: 0 var(--padding-lateral);
        box-sizing: border-box;
    }

    .banner-gran[b-1x2m0jbkfu] {
        flex: 1;
        min-width: 0;
    }

    .banner-gran .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 591 / 453;
        width: 100%;
        height: auto;
        padding: 30px 20px 0;
    }

    /* Columna derecha: ancho fijo 163px con 3 banners verticales */
    .frame-2[b-1x2m0jbkfu] {
        flex: 0 0 163px;
        width: 163px;
        flex-direction: column;
        gap: 7px;
    }

    /* Banner medium - altura fija 223px, ancho 100% de la columna */
    .banner-medium-wrapper[b-1x2m0jbkfu] {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 223px;
        padding: 18px 14px;
        gap: 10px;
    }

    .banner-medium-subtitle[b-1x2m0jbkfu] {
        font-size: 22px;
        gap: 8px;
    }

    .banner-medium-pregunta[b-1x2m0jbkfu] {
        font-size: 15px;
        margin-top: 8px;
        line-height: 1.3;
    }

    .banner-medium-respuesta[b-1x2m0jbkfu] {
        font-size: 13px;
        line-height: 1.3;
    }

    .banner-medium-contacto-titulo[b-1x2m0jbkfu] {
        font-size: 16px;
    }

    .banner-medium-contacto-datos[b-1x2m0jbkfu] {
        font-size: 13px;
        line-height: 1.3;
    }

    /* frame-3: columna con los 2 banners pequeños */
    .frame-3[b-1x2m0jbkfu] {
        flex: 1;
        flex-direction: column;
        gap: 7px;
        width: 100%;
    }

    /* Banners pequeños - aspect ratio 412/273, full width de la columna */
    .banner-peque-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        width: 100%;
        aspect-ratio: 412 / 273;
        height: auto;
    }

    .banner-peque-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .img-2[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Desactivar hover animations en tablet */
    .banner-medium-wrapper:hover .banner-medium-img-container[b-1x2m0jbkfu],
    .banner-peque-wrapper:hover .banner-peque-img-container[b-1x2m0jbkfu] {
        height: 100%;
    }

    .banner-medium-wrapper:hover .banner-medium-subtitle[b-1x2m0jbkfu],
    .banner-peque-wrapper:hover .banner-peque-subtitle[b-1x2m0jbkfu] {
        height: 0;
        opacity: 0;
    }

    /* ========== CATEGORÍAS TABLET ========== */
    .home-body-2[b-1x2m0jbkfu] {
        gap: 20px;
    }

    .frame-4[b-1x2m0jbkfu] {
        gap: var(--gap-md);
    }



    /* ========== SLIDER PRODUCTOS TABLET ========== */
    .home-body-3[b-1x2m0jbkfu] {
        padding: 30px var(--padding-lateral) 40px;
    }

    .frame-6[b-1x2m0jbkfu] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .carousel-btn[b-1x2m0jbkfu] {
        display: none;
    }

    .carousel-track[b-1x2m0jbkfu] {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 0;
    }

    .card-producto[b-1x2m0jbkfu] {
        scroll-snap-align: start;
    }

    .card-producto[b-1x2m0jbkfu]::before {
        display: none;
    }

    .card-producto:hover[b-1x2m0jbkfu]::before {
        display: none;
    }

    .card-producto:first-child[b-1x2m0jbkfu] {
        padding-left: 0;
    }

    .card-producto:hover[b-1x2m0jbkfu] {
        transform: none;
    }

    /* Ocultar botón carrito en tablet */
    .boton[b-1x2m0jbkfu] {
        display: none;
    }

    .pack-info-text[b-1x2m0jbkfu] {
        width: var(--producto-img-size);
    }

    .info-producto[b-1x2m0jbkfu] {
        max-width: 100%;
    }

    .text-wrapper-5[b-1x2m0jbkfu] {
        width: 100%;
    }

    .card-producto:hover .text-wrapper-5 span[b-1x2m0jbkfu] {
        animation: none;
    }

    /* ========== MARCAS TABLET ========== */
    .brands-slider-wrapper[b-1x2m0jbkfu] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .brands-nav-btn[b-1x2m0jbkfu] {
        display: none;
    }

    .brands-slider-container[b-1x2m0jbkfu]::before,
    .brands-slider-container[b-1x2m0jbkfu]::after {
        width: 30px;
    }

    .brands-track-infinite[b-1x2m0jbkfu] {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-track-infinite[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .brand-item[b-1x2m0jbkfu] {
        scroll-snap-align: start;
    }

    .brand-item:hover[b-1x2m0jbkfu] {
        transform: none;
    }

    /* ========== SERVICIOS TABLET ========== */
    .home-body-5 .frame-4[b-1x2m0jbkfu] {
        gap: var(--gap-md);
    }

    .banner-servicio-wrapper[b-1x2m0jbkfu] {
        aspect-ratio: 3 / 4;
    }

    .banner-servicio-wrapper:hover .banner-servicio-img-container[b-1x2m0jbkfu] {
        height: 100%;
    }

    .banner-servicio-wrapper:hover .banner-servicio-subtitle[b-1x2m0jbkfu] {
        height: 0;
        opacity: 0;
    }

    /* ========== PRE-FOOTER TABLET - Siempre horizontal ========== */
    .pre-footer[b-1x2m0jbkfu] {
        flex-wrap: nowrap;
        gap: 0;
        padding: 30px var(--padding-lateral);
        --prefooter-col-padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pre-footer[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        flex: 1 0 auto;
        min-width: 100px;
        padding: 0 var(--prefooter-col-padding);
        gap: 8px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        display: block;
        flex-shrink: 0;
        height: 50px;
    }

    .link-indicator[b-1x2m0jbkfu] {
        display: none;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 11px;
        gap: 4px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 14px;
        height: 14px;
    }

    .link-text[b-1x2m0jbkfu] {
        white-space: nowrap;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* Layout Figma: Video arriba + fila (1 grande + columna 2 pequeños) */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 16px;
        --gap-sm: 7px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --categoria-height: 130px;
        --categoria-img-height: 90px;
        --producto-img-size: 140px;
        --producto-card-padding: 12px;
        --font-title-xl: 20px;
        --font-title-lg: 15px;
        --font-title-md: 14px;
        --font-body: 12px;
        --font-price: 14px;
        --font-badge: 8px;
        --radius-card: 14px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --brand-height: 24px;
        --line-width: 160px;
        --line-height-section: 35px;
        overflow-x: hidden;
    }

    /* ========== REORDENAR SECCIONES MÓVIL ========== */
    .new-home .home-body-1[b-1x2m0jbkfu] {
        order: 1 !important;
    }

    .new-home .home-body-3[b-1x2m0jbkfu] {
        order: 2 !important;
    }

    /* Slider productos segundo */
    .new-home .home-body-2[b-1x2m0jbkfu] {
        order: 3 !important;
    }

    /* Categorías tercero */
    .new-home .home-body-4[b-1x2m0jbkfu] {
        order: 4 !important;
    }

    /* Marcas cuarto */
    .new-home .home-body-5[b-1x2m0jbkfu] {
        order: 5 !important;
    }

    .new-home .pre-footer[b-1x2m0jbkfu] {
        order: 6 !important;
    }

    /* ========== BANNERS MÓVIL ========== */
    /* Layout: Video arriba (full width) + fila debajo (EPIs izq + columna 2 pequeños der) */
    .home-body-1[b-1x2m0jbkfu] {
        flex-direction: column;
        gap: 10px;
        padding: 0 var(--padding-lateral);
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .banner-gran[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
    }

    .banner-gran .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
        padding: 20px;
    }

    /* Fila con banner EPIs izq y columna 2 pequeños der */
    .frame-2[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
        flex-direction: row;
        gap: 10px;
        display: flex;
    }

    .banner-medium-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 14px 12px;
    }

    .banner-medium-subtitle[b-1x2m0jbkfu] {
        font-size: 15px;
        gap: 6px;
    }

    .banner-medium-pregunta[b-1x2m0jbkfu] {
        font-size: 12px;
        margin-top: 6px;
        line-height: 1.25;
    }

    .banner-medium-respuesta[b-1x2m0jbkfu] {
        font-size: 11px;
        line-height: 1.25;
    }

    .banner-medium-contacto-titulo[b-1x2m0jbkfu] {
        font-size: 14px;
    }

    .banner-medium-contacto-datos[b-1x2m0jbkfu] {
        font-size: 11px;
        line-height: 1.25;
    }

    /* Columna con 2 banners pequeños - 50% del ancho */
    .frame-3[b-1x2m0jbkfu] {
        flex: 1;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        display: flex;
    }

    /* Banners pequeños - se reparten el espacio vertical equitativamente */
    .banner-peque-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .banner-peque-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .img-2[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background-color: #f5f5f5;
    }

    /* ========== CATEGORÍAS MÓVIL - Grid 2x2 ========== */
    .home-body-2[b-1x2m0jbkfu] {
        gap: 16px;
    }

    .frame-4[b-1x2m0jbkfu] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-md);
    }

    .banner-categoria-wrapper[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
    }

    /* ========== SLIDER PRODUCTOS MÓVIL ========== */
    .home-body-3[b-1x2m0jbkfu] {
        padding: 24px var(--padding-lateral) 30px;
    }

    .frame-6[b-1x2m0jbkfu] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .carousel-track[b-1x2m0jbkfu] {
        padding: 0 var(--padding-lateral);
    }

    .card-producto[b-1x2m0jbkfu] {
        padding-left: var(--producto-card-padding);
    }

    /* ========== SERVICIOS MÓVIL - Grid 2x2 ========== */
    .home-body-5 .frame-4[b-1x2m0jbkfu] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-md);
    }

    .banner-servicio-wrapper[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    /* ========== PRE-FOOTER MÓVIL - Horizontal scroll ========== */
    .pre-footer[b-1x2m0jbkfu] {
        flex-wrap: nowrap;
        padding: 24px var(--padding-lateral);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        --prefooter-col-padding: 8px;
        max-width: 100%;
    }

    .pre-footer[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 0 var(--prefooter-col-padding);
        gap: 6px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        height: 40px;
        flex-shrink: 0;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 10px;
        gap: 3px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 12px;
        height: 12px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 12px;
        --producto-img-size: 120px;
        --font-title-xl: 18px;
        --font-title-md: 13px;
        --font-body: 11px;
        --font-price: 13px;
        overflow-x: hidden;
    }

    .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .banner-medium-wrapper[b-1x2m0jbkfu] {
        aspect-ratio: 1 / 1.2;
        height: auto;
    }

    /* Frame-6 sin márgenes negativos en móvil pequeño */
    .frame-6[b-1x2m0jbkfu] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }

    .brands-slider-wrapper[b-1x2m0jbkfu] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }

    /* Pre-footer más compacto pero siempre horizontal */
    .pre-footer[b-1x2m0jbkfu] {
        padding: 20px var(--padding-lateral);
        --prefooter-col-padding: 6px;
        max-width: 100%;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        min-width: 75px;
        gap: 4px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        height: 35px;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 9px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/Pages/Homologados.razor.rz.scp.css */
/* =============================================
   HOMOLOGADOS — Scoped CSS
   Figma design: node 388-14020
   ============================================= */

.homologados[b-68vpiexwlf] {
    /* Colores */
    --primario: #3CAA36;
    --alternativo-oscuro: #ECC61B;
    --negro: #212121;
    --blanco: #FFFFFF;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --font-family: 'Nunito Sans', Helvetica, sans-serif;

    /* Espaciado responsive */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --padding-bottom: clamp(40px, 5.21vw, 100px);
    --section-gap: clamp(30px, 3.91vw, 75px);
    --content-gap: clamp(16px, 1.56vw, 30px);

    /* Tipografía */
    --font-heading: clamp(22px, 1.67vw, 32px);
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-small: clamp(10px, 0.63vw, 12px);
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-ref: clamp(12px, 0.73vw, 14px);

    /* Botones */
    --btn-height-lg: clamp(44px, 2.71vw, 52px);
    --btn-height-sm: clamp(38px, 2.4vw, 46px);
    --btn-radius: 6px;

    /* Columnas de tabla */
    --col-cantidad: clamp(100px, 8.07vw, 129px);
    --col-stock: clamp(70px, 5.21vw, 100px);
    --col-precio: clamp(70px, 5.21vw, 100px);
    --col-total: clamp(70px, 5.21vw, 100px);
    --col-actions: clamp(220px, 22.5vw, 340px);
    --product-img: clamp(70px, 5.21vw, 100px);

    /* Layout */
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--section-gap);
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    position: relative;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* =============================================
   FRAMES (contenedores estructurales)
   ============================================= */
.homologados .frame[b-68vpiexwlf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--content-gap);
    width: 100%;
    flex: 0 0 auto;
    position: relative;
}

/* Marco externo: 10px entre título y sección de contenido */
.homologados > .frame[b-68vpiexwlf] {
    gap: 10px;
}

/* =============================================
   TÍTULO DE PÁGINA
   ============================================= */
.homologados .titulo[b-68vpiexwlf] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.homologados h2[b-68vpiexwlf] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title);
    letter-spacing: 0;
    line-height: normal;
}

.homologados .iconos[b-68vpiexwlf] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

/* =============================================
   FILA CABECERA (heading + buscador + botón)
   ============================================= */
.homologados .div[b-68vpiexwlf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    gap: clamp(12px, 1.25vw, 24px);
}

/* Contenedor heading + buscador */
.homologados .frame-2[b-68vpiexwlf] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: clamp(14px, 1.15vw, 22px);
    flex: 0 0 auto;
    position: relative;
}

/* Heading "Lista de Homologados" */
.homologados .text-wrapper[b-68vpiexwlf] {
    position: relative;
    font-family: var(--font-family);
    font-weight: 400;
    color: #000000;
    font-size: var(--font-heading);
    line-height: 1.25;
    white-space: nowrap;
    letter-spacing: 0;
}

/* Buscador (underline style — Figma 388-14020) */
.homologados .component[b-68vpiexwlf] {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.15vw, 22px);
    position: relative;
    flex: 0 0 auto;
}

/* Contenedor del input con línea inferior */
.homologados .search-underline[b-68vpiexwlf] {
    width: clamp(140px, 14.43vw, 277px);
    border-bottom: 1.5px solid var(--negro);
    position: relative;
    transition: border-color 0.2s;
}

.homologados .search-underline:focus-within[b-68vpiexwlf] {
    border-bottom-color: var(--primario);
}

.homologados .input-buscar-producto[b-68vpiexwlf] {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #2D2E2E;
    font-family: var(--font-family);
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.25px;
    padding: 4px 0;
}

.homologados .input-buscar-producto[b-68vpiexwlf]::placeholder {
    color: var(--gris-50);
}

/* Botón lupa */
.homologados .search-btn[b-68vpiexwlf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.homologados .search-btn:hover[b-68vpiexwlf] {
    opacity: 0.65;
}

.homologados .search-btn .img[b-68vpiexwlf] {
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    display: block;
}

/* Botón AÑADIR TODO */
.homologados .boton[b-68vpiexwlf] {
    display: inline-flex;
    flex-direction: column;
    height: var(--btn-height-lg);
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    background-color: var(--primario);
    border-radius: var(--btn-radius);
    overflow: hidden;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.homologados .boton:hover[b-68vpiexwlf] {
    background-color: #2e8a2a;
}

.homologados .state-layer[b-68vpiexwlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    width: 100%;
}

.homologados .label-text[b-68vpiexwlf] {
    position: relative;
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--blanco);
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    white-space: nowrap;
}

.homologados[b-68vpiexwlf]  .iconos-2 {
    width: 24px;
    height: 24px;
    color: var(--blanco);
    flex-shrink: 0;
}

/* =============================================
   WRAPPER DE TABLA
   ============================================= */
.homologados .tabla-wrapper[b-68vpiexwlf] {
    width: 100%;
    margin-top: 10px;
}

.homologados .tabla-container[b-68vpiexwlf] {
    width: 100%;
    overflow-x: auto;
}

/* =============================================
   TABLA — DESKTOP
   ============================================= */
.homologados .tabla-mejorada[b-68vpiexwlf] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-family);
    font-size: var(--font-body);
    table-layout: fixed;
}

/* Cabecera */
.homologados .tabla-mejorada thead[b-68vpiexwlf] {
    color: #000000;
    font-weight: 700;
}

.homologados .tabla-mejorada th[b-68vpiexwlf] {
    padding: 0 7.5px clamp(12px, 1.04vw, 20px);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-body);
    line-height: normal;
    color: #000000;
    text-align: left;
    border-bottom: 2px solid #000000;
    white-space: nowrap;
    vertical-align: bottom;
}

.homologados .tabla-mejorada th .subheader[b-68vpiexwlf] {
    font-size: var(--font-small);
    font-weight: 400;
    color: var(--gris-50);
    letter-spacing: 0.4px;
}

/* Anchos de columnas */
.homologados .tabla-mejorada .th1[b-68vpiexwlf] { width: 40%; text-align: left; }
.homologados .tabla-mejorada .th2[b-68vpiexwlf] { width: var(--col-cantidad); text-align: center; }
.homologados .tabla-mejorada .th3[b-68vpiexwlf] { width: var(--col-stock); text-align: center; }
.homologados .tabla-mejorada .th4[b-68vpiexwlf] { width: var(--col-precio); text-align: right; }
.homologados .tabla-mejorada .th5[b-68vpiexwlf] { width: var(--col-total); text-align: right; }
.homologados .tabla-mejorada .th6[b-68vpiexwlf] { width: var(--col-actions); text-align: right; }

/* Filas de datos */
.homologados .tabla-mejorada tbody tr:not(:last-child) td[b-68vpiexwlf] {
    border-bottom: 1px dashed var(--gris-30);
}

.homologados .tabla-mejorada td[b-68vpiexwlf] {
    padding: clamp(16px, 1.25vw, 24px) 7.5px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--font-body);
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #000000;
    vertical-align: middle;
}

.homologados .tabla-mejorada .td1[b-68vpiexwlf] { text-align: left; }
.homologados .tabla-mejorada .td2[b-68vpiexwlf] { text-align: center; }
.homologados .tabla-mejorada .td3[b-68vpiexwlf] { text-align: center; }
.homologados .tabla-mejorada .td4[b-68vpiexwlf] { text-align: right; }
.homologados .tabla-mejorada .td5[b-68vpiexwlf] { text-align: right; font-weight: 700; }
.homologados .tabla-mejorada .td6[b-68vpiexwlf] { text-align: right; padding-right: 0; }

/* =============================================
   COLUMNA PRODUCTO (td1)
   ============================================= */
.homologados .tabla-mejorada .td1 .td-content[b-68vpiexwlf] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(10px, 1.09vw, 25px);
}

.homologados .product-link[b-68vpiexwlf] {
    text-decoration: none;
    flex-shrink: 0;
}

.homologados .product-image[b-68vpiexwlf] {
    width: var(--product-img);
    height: var(--product-img);
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.homologados .product-img[b-68vpiexwlf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.homologados .producto-info[b-68vpiexwlf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.homologados .descripcion[b-68vpiexwlf] {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--font-body);
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #000000;
    overflow-wrap: break-word;
}

.homologados .referencia[b-68vpiexwlf] {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: var(--font-body);
    line-height: normal;
    color: #000000;
    overflow-wrap: break-word;
}

/* =============================================
   COLUMNA CANTIDAD (td2) — contador
   ============================================= */
.homologados .tabla-mejorada .td2 .td-content[b-68vpiexwlf] {
    display: inline-flex;
    height: var(--btn-height-sm);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background-color: var(--gris-10);
    padding: 0 clamp(8px, 0.64vw, 12px);
    width: var(--col-cantidad);
    margin: 0 auto;
    box-sizing: border-box;
}

.homologados .tabla-mejorada .td2 .td-content button[b-68vpiexwlf] {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.homologados .tabla-mejorada .td2 .td-content button img[b-68vpiexwlf] {
    opacity: 1;
    filter: none;
    transition: opacity 0.15s ease, filter 0.15s ease;
    width: 20px;
    height: 20px;
}

.homologados .tabla-mejorada .td2 .td-content button:disabled img[b-68vpiexwlf] {
    opacity: 0.45;
    filter: brightness(1.6);
}

[b-68vpiexwlf] .homologados .tabla-mejorada .td2 .td-content .cantidad-input {
    color: #121212;
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: normal;
    background-color: var(--gris-10);
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;
}

/* =============================================
   COLUMNA STOCK (td3)
   ============================================= */
.homologados .tabla-mejorada .td3 img[b-68vpiexwlf] {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* =============================================
   COLUMNA ACCIONES (td6)
   ============================================= */
.homologados .tabla-mejorada .td6 .td-content[b-68vpiexwlf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(12px, 1.3vw, 25px);
}

/* Botón carrito (outlined verde) */
.homologados .btn-cart[b-68vpiexwlf] {
    height: var(--btn-height-sm);
    border-radius: var(--btn-radius);
    background-color: #FFFFFF;
    border: 1px solid var(--primario);
    color: var(--primario);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: clamp(8px, 0.57vw, 11px) clamp(12px, 0.89vw, 17px);
}

.homologados .btn-cart:hover[b-68vpiexwlf] {
    background-color: var(--primario);
    color: #FFFFFF;
}

.homologados .btn-cart[b-68vpiexwlf]  svg {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
}

/* Botón eliminar */
.homologados[b-68vpiexwlf]  .btn-delete {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    color: #212121;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s;
}

.homologados[b-68vpiexwlf]  .btn-delete:hover {
    transform: scale(1.15);
    opacity: 0.7;
}

/* Botón "Añadir a una lista" (outlined amarillo) */
.homologados .state-layer-wrapper-2[b-68vpiexwlf] {
    display: flex;
    flex-direction: column;
    width: clamp(130px, 9.32vw, 179px);
    height: var(--btn-height-sm);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.homologados .state-layer-2[b-68vpiexwlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px clamp(12px, 1.25vw, 24px);
}

.homologados .state-layer-wrapper-2:hover[b-68vpiexwlf] {
    background-color: var(--alternativo-oscuro);
}

.homologados .state-layer-wrapper-2:hover .label-text-3[b-68vpiexwlf] {
    color: var(--blanco);
}

.homologados .label-text-3[b-68vpiexwlf] {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--negro);
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* =============================================
   BOTÓN ¿TE AYUDAMOS?
   ============================================= */
.homologados .state-layer-wrapper[b-68vpiexwlf] {
    display: flex;
    flex-direction: column;
    width: clamp(300px, 30.83vw, 592px);
    max-width: 100%;
    height: var(--btn-height-lg);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.homologados .state-layer-wrapper:hover[b-68vpiexwlf] {
    background-color: var(--alternativo-oscuro);
}

.homologados .state-layer-wrapper:hover .label-text-2[b-68vpiexwlf] {
    color: var(--blanco);
}

.homologados .label-text-2[b-68vpiexwlf] {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--negro);
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* =============================================
   ALERTAS
   ============================================= */
.homologados .alert[b-68vpiexwlf] {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-body);
}

.homologados .alert p[b-68vpiexwlf] {
    margin-bottom: 0;
}

/* =============================================
   SPINNER / PAGE BLOCKER
   ============================================= */
.homologados .spinner-border[b-68vpiexwlf] {
    color: var(--blanco);
}

.page-blocker[b-68vpiexwlf] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-68vpiexwlf] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* =============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================= */
@media (max-width: 1024px) {
    .homologados[b-68vpiexwlf] {
        --font-heading: 24px;
        --font-body: 14px;
        --font-small: 10px;
        --font-title: 15px;
        --col-cantidad: 110px;
        --col-stock: 80px;
        --col-precio: 80px;
        --col-total: 80px;
        --col-actions: 240px;
        --product-img: 80px;
    }

    .homologados .tabla-mejorada[b-68vpiexwlf] {
        table-layout: auto;
    }

    .homologados .tabla-mejorada th[b-68vpiexwlf],
    .homologados .tabla-mejorada td[b-68vpiexwlf] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .homologados .tabla-mejorada .th1[b-68vpiexwlf] { width: auto; }
    .homologados .tabla-mejorada .th2[b-68vpiexwlf],
    .homologados .tabla-mejorada .th3[b-68vpiexwlf],
    .homologados .tabla-mejorada .th4[b-68vpiexwlf],
    .homologados .tabla-mejorada .th5[b-68vpiexwlf],
    .homologados .tabla-mejorada .th6[b-68vpiexwlf] { width: auto; }
}

/* =============================================
   RESPONSIVE — MÓVIL (≤768px)
   Tabla → tarjetas grid 2 columnas
   ============================================= */
@media (max-width: 768px) {
    .homologados[b-68vpiexwlf] {
        --font-heading: 20px;
        --font-body: 14px;
        --font-title: 14px;
        --product-img: 70px;
    }

    /* ── Cabecera de página ── */
    .homologados .frame-2[b-68vpiexwlf] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .homologados .div[b-68vpiexwlf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .homologados .boton[b-68vpiexwlf] {
        width: 100%;
    }

    .homologados .search-underline[b-68vpiexwlf] {
        width: 100%;
        max-width: 100%;
    }

    .homologados .component[b-68vpiexwlf] {
        width: 100%;
    }

    .homologados .state-layer-wrapper[b-68vpiexwlf] {
        width: 100%;
    }

    /* ── Tabla → tarjetas ── */
    .homologados .tabla-mejorada[b-68vpiexwlf] {
        display: block;
    }

    .homologados .tabla-mejorada thead[b-68vpiexwlf] {
        display: none;
    }

    .homologados .tabla-mejorada tbody[b-68vpiexwlf] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Tarjeta: grid 2 columnas con áreas nombradas */
    .homologados .tabla-mejorada tbody tr[b-68vpiexwlf] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "td1  td1"
            "td2  td3"
            "td4  td5"
            "td6  td6";
        background: #fff;
        border-radius: 10px;
        padding: 16px;
        column-gap: 16px;
        row-gap: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .homologados .tabla-mejorada tbody tr:not(:last-child) td[b-68vpiexwlf] {
        border-bottom: none;
    }

    .homologados .tabla-mejorada td[b-68vpiexwlf] {
        padding: 8px 0;
        text-align: left !important;
        font-size: var(--font-body);
    }

    /* ── Asignar áreas de grid ── */
    .homologados .tabla-mejorada .td1[b-68vpiexwlf] { grid-area: td1; }
    .homologados .tabla-mejorada .td2[b-68vpiexwlf] { grid-area: td2; }
    .homologados .tabla-mejorada .td3[b-68vpiexwlf] { grid-area: td3; }
    .homologados .tabla-mejorada .td4[b-68vpiexwlf] { grid-area: td4; }
    .homologados .tabla-mejorada .td5[b-68vpiexwlf] { grid-area: td5; }
    .homologados .tabla-mejorada .td6[b-68vpiexwlf] { grid-area: td6; }

    /* ── Separadores de sección ── */
    .homologados .tabla-mejorada .td1[b-68vpiexwlf] {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--gris-30);
    }

    .homologados .tabla-mejorada .td6[b-68vpiexwlf] {
        padding-top: 12px;
        border-top: 1px solid var(--gris-30);
    }

    /* ── Celdas de datos: flex columna con mini-label ── */
    .homologados .tabla-mejorada .td2[b-68vpiexwlf],
    .homologados .tabla-mejorada .td3[b-68vpiexwlf],
    .homologados .tabla-mejorada .td4[b-68vpiexwlf],
    .homologados .tabla-mejorada .td5[b-68vpiexwlf] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Columna derecha: alineación a la derecha */
    .homologados .tabla-mejorada .td3[b-68vpiexwlf],
    .homologados .tabla-mejorada .td5[b-68vpiexwlf] {
        align-items: flex-end;
    }

    /* Mini-labels mediante ::before */
    .homologados .tabla-mejorada .td2[b-68vpiexwlf]::before { content: "CANTIDAD"; }
    .homologados .tabla-mejorada .td3[b-68vpiexwlf]::before { content: "STOCK"; }
    .homologados .tabla-mejorada .td4[b-68vpiexwlf]::before { content: "PRECIO"; }
    .homologados .tabla-mejorada .td5[b-68vpiexwlf]::before { content: "TOTAL"; }

    .homologados .tabla-mejorada .td2[b-68vpiexwlf]::before,
    .homologados .tabla-mejorada .td3[b-68vpiexwlf]::before,
    .homologados .tabla-mejorada .td4[b-68vpiexwlf]::before,
    .homologados .tabla-mejorada .td5[b-68vpiexwlf]::before {
        font-size: 10px;
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
    }

    /* ── td2: control cantidad compacto ── */
    .homologados .tabla-mejorada .td2 .td-content[b-68vpiexwlf] {
        margin: 0;
        width: auto;
        max-width: 128px;
    }

    /* ── td6: acciones en una sola fila ── */
    .homologados .tabla-mejorada .td6 .td-content[b-68vpiexwlf] {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }

    /* Botón lista crece para llenar el espacio disponible */
    .homologados .state-layer-wrapper-2[b-68vpiexwlf] {
        flex: 1;
        width: auto;
    }
}

/* =============================================
   RESPONSIVE — MÓVIL PEQUEÑO (≤480px)
   ============================================= */
@media (max-width: 480px) {
    .homologados[b-68vpiexwlf] {
        --font-heading: 18px;
        --font-body: 13px;
        --font-title: 13px;
        --product-img: 60px;
    }

    .homologados .tabla-mejorada .td1 .td-content[b-68vpiexwlf] {
        gap: 8px;
    }

    .homologados .tabla-mejorada .td6 .td-content[b-68vpiexwlf] {
        gap: 10px;
    }
}
/* /Components/Pages/Integra.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS - SISTEMA RESPONSIVE CON CLAMP() */
/* Basado en patrón Home.razor.css                 */
/* ============================================= */
.integra[b-llfm6qu22n] {
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --secundario: #6B989C;
    --terciario: #85957E;
    --alternativo: #FDD623;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-20: #EEEEEE;
    --gris-30: #E0E0E0;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-60: #757575;
    --oferta-50: #FF5449;
    --oferta-60: #DE3730;
    --dark-green-buttons: #3A4F39;
    --black-fonts-headings: #2D2E2E;
    --primary-10: #EBF6EB;

    /* Layout */
    --max-layout-width: 1680px;
    --padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps fluidos */
    --gap-xs: clamp(4px, 0.39vw, 7.5px);
    --gap-sm: clamp(8px, 0.65vw, 12.5px);
    --gap-md: clamp(12px, 1.3vw, 25px);
    --gap-lg: clamp(20px, 2.6vw, 50px);
    --gap-xl: clamp(30px, 3.9vw, 75px);
    --gap-xxl: clamp(40px, 5.2vw, 100px);

    /* Tipografía fluida */
    --font-h1: clamp(22px, 2.08vw, 32px);        /* headline large - 32/40 */
    --font-h1-line: clamp(28px, 2.6vw, 40px);
    --font-h2: clamp(20px, 1.82vw, 28px);        /* headline medium - 28/36 */
    --font-h2-line: clamp(26px, 2.34vw, 36px);
    --font-h3: clamp(16px, 1.43vw, 22px);        /* title bold 22/28 */
    --font-h3-line: clamp(22px, 1.82vw, 28px);
    --font-body: clamp(13px, 1.04vw, 16px);      /* body large 16/24 */
    --font-body-line: clamp(20px, 1.56vw, 24px);
    --font-body-sm: clamp(12px, 0.91vw, 14px);   /* body medium 14/20 */
    --font-body-sm-line: clamp(18px, 1.3vw, 20px);
    --font-label-sm: clamp(10px, 0.72vw, 11px);  /* label small 11/16 */
    --font-label-sm-line: clamp(14px, 1.04vw, 16px);

    /* Radios */
    --radius-sm: clamp(4px, 0.39vw, 6px);
    --radius-md: clamp(6px, 0.52vw, 8px);
    --radius-lg: clamp(10px, 0.98vw, 15px);

    /* Iconos y elementos circulares */
    --icon-sm: clamp(14px, 1.25vw, 20px);
    --icon-md: clamp(18px, 1.56vw, 24px);
    --icon-lg: clamp(28px, 2.6vw, 40px);
    --circle-lg: clamp(32px, 2.67vw, 41px);
    --logo-integra-h: clamp(38px, 3.78vw, 58px);
    --logo-integra-w: clamp(48px, 4.76vw, 73px);

    /* Padding de tarjetas */
    --card-pad-sm: clamp(14px, 1.62vw, 25px);
    --card-pad-md: clamp(20px, 3.25vw, 50px);

    /* Anchos de columna — max 496.5px alcanzado a 1920px (25.86vw = 496.5/19.2)
       Por debajo de 1920px ambas columnas fijas (frame-7, frame-20) escalan
       proporcionalmente, cediendo espacio a frame-24 (columna de pasos). */
    --col-main: clamp(280px, 25.86vw, 496.5px);

    /* Sombra tarjetas */
    --shadow-card: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);

    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--gap-xl);
    padding: 0 var(--padding-lateral) clamp(40px, 5.2vw, 100px);
    position: relative;
    background-color: var(--blanco);
    overflow-x: clip;
    box-sizing: border-box;
}

    .integra *[b-llfm6qu22n],
    .integra *[b-llfm6qu22n]::before,
    .integra *[b-llfm6qu22n]::after {
        box-sizing: border-box;
    }

    /* Rectangle: reemplazado por bg-calculadora::before */
    .integra .rectangle[b-llfm6qu22n] {
        display: none;
    }

    /* Wrapper de la sección azul (calculadora + stats + CTAs).
       El ::before extiende el fondo a sangre completa sin depender
       de un top fijo que se desajusta con el contenido. */
    .integra .bg-calculadora[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xl);
        width: 100%;
        align-self: stretch;
        position: relative;
        z-index: 1;
    }

    .integra .bg-calculadora[b-llfm6qu22n]::before {
        content: '';
        position: absolute;
        left: calc(var(--padding-lateral) * -1);
        right: calc(var(--padding-lateral) * -1);
        top: calc(var(--gap-xl) * -1);
        height: clamp(550px, 51vw, 900px);
        background-color: var(--secundario);
        z-index: 0;
        pointer-events: none;
    }

    /* Rectángulo verde claro detrás de la mujer (Figma: bg-#d8eed7,
       left 1317, top 267, w 603, h 863, rounded-l-[15px]) */
    .integra .div[b-llfm6qu22n] {
        display: block;
        position: absolute;
        top: clamp(130px, 17vw, 600px);
        right: calc(var(--padding-lateral) * -0.1);
        width: clamp(250px, 31.4vw, 603px);
        height: clamp(450px, 45vw, 863px);
        background-color: #d8eed7;
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg);
        z-index: 0;
        pointer-events: none;
    }

    .integra .frame[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        z-index: 1;
        overflow: hidden;
    }

    /* Calculadora, Stats y CTAs por encima del rectángulo azul de fondo */
    .integra .component[b-llfm6qu22n],
    .integra .frame-45[b-llfm6qu22n],
    .integra .frame-48[b-llfm6qu22n] {
        z-index: 1;
    }

    /* ============================================= */
    /* HEADER - Título "INTEGRA PMC" + back arrow    */
    /* Figma: 518-18084                              */
    /* ============================================= */
    .integra .ttulo[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(12px, 1.3vw, 20px) 0;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .CESTA[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0;
        line-height: normal;
    }

    .integra .iconos[b-llfm6qu22n] {
        position: absolute;
        width: var(--icon-md);
        height: var(--icon-md);
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    /* ============================================= */
    /* HERO SECTION - ¿Sois más de 50 personas...?   */
    /* Figma: 519-17969                              */
    /* ============================================= */
    .integra .frame-2[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-xl);
        padding: 0 0 var(--gap-xl);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .frame-3[b-llfm6qu22n] {
        display: flex;
        align-items: flex-end;
        gap: var(--gap-xl);
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        min-height: clamp(400px, 36vw, 680px);
        position: relative;
    }

    .integra .frame-4[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-lg);
        position: relative;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        z-index: 1;
    }

    .integra .frame-wrapper[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: var(--col-main);
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        background-color: var(--blanco);
        border-radius: var(--radius-lg);
        border: 1px solid var(--terciario);
        flex-shrink: 1;
    }

    /* Frame-5: título + subtítulo (Figma gap: 15px) */
    .integra .frame-5[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(8px, 0.78vw, 15px);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .text-wrapper[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-h1);
        letter-spacing: 0;
        line-height: var(--font-h1-line);
    }

    .integra .p[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body-sm);
        letter-spacing: 0.25px;
        line-height: var(--font-body-sm-line);
    }

    .integra .frame-6[b-llfm6qu22n] {
        display: flex;
        align-items: stretch;
        gap: var(--gap-xxl);
        position: relative;
        flex: 0 0 auto;
        max-width: 100%;
    }

    .integra .frame-7[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        width: var(--col-main);
        max-width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-md);
        position: relative;
        align-self: stretch;
        flex: 0 1 auto;
    }

    .integra .frame-8[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: var(--gap-xs);
        padding: var(--card-pad-sm);
        position: relative;
        flex: 0 0 auto;
        background-color: var(--primary-10);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    .integra .text-wrapper-2[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--negro);
        font-size: var(--font-h3);
        letter-spacing: 0;
        line-height: var(--font-h3-line);
        white-space: nowrap;
    }

    .integra .frame-9[b-llfm6qu22n] {
        display: inline-flex;
        align-items: center;
        position: relative;
        flex: 0 0 auto;
    }

    .integra .text-wrapper-3[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body-sm);
        letter-spacing: 0.25px;
        line-height: var(--font-body-sm-line);
        white-space: nowrap;
    }

    .integra .img[b-llfm6qu22n] {
        position: relative;
        width: var(--icon-md);
        height: var(--icon-md);
    }

    .integra .frame-10[b-llfm6qu22n] {
        display: inline-flex;
        align-items: center;
        gap: clamp(3px, 0.26vw, 5px);
        position: relative;
        flex: 0 0 auto;
    }

    .integra .alternativa-centro[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-label-sm);
        letter-spacing: 0.5px;
        line-height: var(--font-label-sm-line);
        white-space: nowrap;
    }

    .integra .span[b-llfm6qu22n] {
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .integra .text-wrapper-4[b-llfm6qu22n] {
        font-weight: 400;
        font-size: var(--font-label-sm);
        line-height: var(--font-label-sm-line);
        letter-spacing: 0.5px;
        font-family: "Nunito Sans", Helvetica, sans-serif;
    }

    .integra .text-wrapper-5[b-llfm6qu22n] {
        letter-spacing: 0.5px;
    }

    .integra .frame-11[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .line[b-llfm6qu22n] {
        position: relative;
        width: 2px;
        height: clamp(28px, 3.38vw, 52px);
    }

    .integra .line-2[b-llfm6qu22n] {
        position: relative;
        width: 100%;
        height: 2.8px;
    }

    /* Branching arrowheads under the T-bar in the LGD hero diagram.
       Full width so the arrowhead tips align with the SÍ/NO circles
       and the boxes in frame-13 / frame-15. */
    .integra .frame-12[b-llfm6qu22n] {
        position: relative;
        flex: 0 0 auto;
        width: 50%;
        height: auto;
    }

    .integra .frame-13[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: var(--gap-md);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .frame-14[b-llfm6qu22n] {
        display: inline-flex;
        gap: var(--gap-sm);
        align-items: center;
        position: relative;
        flex: 0 0 auto;
    }

    .integra .iconos-wrapper[b-llfm6qu22n] {
        position: relative;
        width: var(--circle-lg);
        height: var(--circle-lg);
        background-color: var(--primario);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .integra .iconos-2[b-llfm6qu22n] {
        position: absolute;
        width: var(--icon-md);
        height: var(--icon-md);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .integra .text-wrapper-6[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--negro);
        font-size: var(--font-h3);
        letter-spacing: 0;
        line-height: var(--font-h3-line);
        white-space: nowrap;
    }

    .integra .img-wrapper[b-llfm6qu22n] {
        position: relative;
        width: var(--circle-lg);
        height: var(--circle-lg);
        background-color: var(--oferta-60);
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Double downward-arrows SVG spanning both SÍ/NO columns in the LGD diagram
       (frame-1000002643-1.svg — sits between frame-13 and frame-15 inside frame-7).
       Same width as frame-13 and frame-15 so its two arrows align with the
       SÍ/NO circles above and the boxes below. */
    .integra .img-2[b-llfm6qu22n] {
        position: relative;
        flex: 0 0 auto;
        width: 50%;
        height: auto;
    }

    /* Small bullet/checkmark icon used as list marker in frame-21 / frame-22.
       (iconos-9.svg — one per list item in the Medidas Alternativas list.) */
    .integra .img-bullet[b-llfm6qu22n] {
        position: relative;
        flex: 0 0 auto;
        width: var(--icon-md);
        height: var(--icon-md);
        flex-shrink: 0;
    }

    .integra .frame-15[b-llfm6qu22n] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gap-md);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .div-wrapper[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(8px, 0.98vw, 15px);
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        border-radius: var(--radius-md);
        border: 2px solid var(--primario);
    }

    .integra .text-wrapper-7[b-llfm6qu22n] {
        position: relative;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--negro);
        font-size: var(--font-h3);
        letter-spacing: 0;
        line-height: var(--font-h3-line);
        white-space: normal;
        text-align: center;
        word-break: break-word;
    }

    .integra .frame-16[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(8px, 0.98vw, 15px);
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        border-radius: var(--radius-md);
        border: 2px solid var(--gris-40);
    }

    /* Flecha dashed horizontal entre columna LGD e info card (Figma: 519:17849) */
    .integra .arrow[b-llfm6qu22n] {
        position: absolute;
        width: clamp(28px, 2.6vw, 50px);
        height: auto;
        top: calc(50% + clamp(60px, 10.2vw, 230px));
        left: calc(var(--col-main) + (var(--gap-xxl) - clamp(28px, 2.6vw, 5px)) / 2);
        pointer-events: none;
        z-index: 1;
    }

    .integra .frame-17[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-lg);
        padding: var(--card-pad-md);
        position: relative;
        flex: 1;
        width: 100%;
    }

    .integra .frame-18[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        padding: 0 0 var(--gap-md);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        border-bottom: 1px solid var(--gris-40);
    }

    .integra .el-cumplimiento-de[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--black-fonts-headings);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
    }

    .integra .text-wrapper-8[b-llfm6qu22n] {
        letter-spacing: 0.5px;
    }

    .integra .text-wrapper-9[b-llfm6qu22n] {
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .integra .text-wrapper-10[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-h2);
        letter-spacing: 0;
        line-height: var(--font-h2-line);
    }

    .integra .text-wrapper-11[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        width: 100%;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
    }

    .integra .aasjoh[b-llfm6qu22n] {
        position: absolute;
        right: 0;
        top: calc(100% + var(--gap-xl) - 492px);
        width: 36%;
        max-width: 600px;
        min-width: 300px;
        height: auto;
        pointer-events: none;
        z-index: 1;
    }

    /* ============================================= */
    /* MEDIDAS ALTERNATIVAS - Figma: 519-17897        */
    /* ============================================= */
    .integra .frame-19[b-llfm6qu22n] {
        display: flex;
        align-items: flex-start;
        gap: var(--gap-xxl);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .frame-20[b-llfm6qu22n] {
        width: var(--col-main);
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gap-lg);
        position: relative;
        align-self: stretch;
        flex-shrink: 1;
    }

    .integra .frame-21[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-lg);
        position: relative;
        align-self: stretch;
        flex-shrink: 1;
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .integra .text-wrapper-12[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--black-fonts-headings);
        font-size: var(--font-h2);
        letter-spacing: 0;
        line-height: var(--font-h2-line);
    }

    .integra .si-no-se-puede[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
    }

    /* ::deep necesario porque el span se inyecta via MarkupString
       y Blazor no añade el atributo de scope a ese HTML dinámico */
    .integra .si-no-se-puede[b-llfm6qu22n]  .text-highlight {
        font-weight: 700;
        color: var(--primario);
    }

    .integra .text-wrapper-13[b-llfm6qu22n] {
        color: var(--negro);
        letter-spacing: 0.5px;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        line-height: var(--font-body-line);
        font-size: var(--font-body);
    }

    .integra .text-wrapper-14[b-llfm6qu22n] {
        font-weight: 700;
        color: var(--primario);
        letter-spacing: 0.5px;
    }

    .integra .text-wrapper-14[b-llfm6qu22n],
    .integra .text-wrapper-16[b-llfm6qu22n] {
        font-size: clamp(10px, 1vw, 14px);
        text-align: center;
    }

    .integra .frame-22[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-sm);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    /* La lista de medidas (texto con formato): cada punto como las antiguas .frame-23
       (icono + texto .text-wrapper-15, con el margen que le daba Bootstrap al <p>). ::deep
       porque ese HTML no lleva la marca de esta hoja. */
    .integra .lista-medidas[b-llfm6qu22n]  ul {
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .integra .lista-medidas[b-llfm6qu22n]  li {
        /* Sin flex: dentro de un punto flex, un enlace o una negrita pasaría a ser una
           columna aparte. El icono va con ::before. */
        position: relative;
        padding-left: calc(var(--icon-md) + var(--gap-md));
        margin: 0;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--black-fonts-headings);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
        padding-bottom: 1rem;
    }

        .integra .lista-medidas[b-llfm6qu22n]  li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: var(--icon-md);
            height: var(--icon-md);
            background: url("/images/integra/iconos-9.svg") center / contain no-repeat;
        }

    .integra .frame-23[b-llfm6qu22n] {
        display: flex;
        align-items: flex-start;
        gap: var(--gap-md);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .text-wrapper-15[b-llfm6qu22n] {
        position: relative;
        flex: 1;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--black-fonts-headings);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
    }

    /* ::deep necesario porque NavLink es un componente Blazor y su <a>
       renderizado puede no recibir el atributo scope del padre */
    .integra[b-llfm6qu22n]  .boton {
        display: flex;
        height: clamp(44px, 3.4vw, 52px);
        align-items: center;
        align-self: stretch;
        width: 100%;
        background-color: var(--blanco);
        border: 1px solid var(--alternativo);
        flex-direction: column;
        justify-content: center;
        gap: var(--gap-xs);
        position: relative;
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: background-color 0.2s ease;
        text-decoration: none;
        cursor: pointer;
    }

    .integra[b-llfm6qu22n]  .boton:hover {
        background-color: var(--alternativo);
    }

    .integra[b-llfm6qu22n]  .boton:hover .label-text {
        color: var(--negro);
    }

    .integra .state-layer[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap-xs);
        padding: clamp(8px, 0.65vw, 10px) clamp(12px, 1.56vw, 24px);
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
    }

    .integra .label-text[b-llfm6qu22n] {
        color: var(--negro);
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        font-size: var(--font-body);
        text-align: center;
        letter-spacing: 0.15px;
        line-height: var(--font-body-line);
        white-space: nowrap;
    }

    .integra .frame-24[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-xl);
        position: relative;
        flex: 1;
        min-width: 0;
    }

    .integra .frame-25[b-llfm6qu22n] {
        flex-direction: column;
        padding: var(--card-pad-md);
        width: 100%;
        flex: 0 0 auto;
        border: 1px solid var(--terciario);
        box-shadow: var(--shadow-card);
        display: flex;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        background-color: var(--blanco);
        border-radius: var(--radius-lg);
    }

    .integra .frame-26[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        padding: 0 0 var(--gap-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        border-bottom: 1px dashed var(--gris-30);
    }

    .integra .text-wrapper-16[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--primario);
        font-size: var(--font-h3);
        letter-spacing: 0;
        line-height: var(--font-h3-line);
    }

    .integra .frame-27[b-llfm6qu22n] {
        display: flex;
        flex-direction: row; /* Forzamos horizontal */
        flex-wrap: nowrap; /* Evitamos que los botones salten abajo */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px; /* Reducimos el gap para ganar espacio */
        overflow: hidden; /* Seguridad */
    }

    .integra .icon-neutro-empresa[b-llfm6qu22n] {
        position: relative;
        width: var(--icon-lg);
        height: var(--icon-lg);
        flex-shrink: 0;
    }

    .integra .text-wrapper-17[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
        white-space: nowrap;
    }

    .integra .arrow-2[b-llfm6qu22n] {
        position: relative;
        width: clamp(28px, 3.51vw, 54px);
        height: clamp(10px, 0.96vw, 15px);
        flex-shrink: 0;
    }

    .integra .frame-28[b-llfm6qu22n] {
        display: flex;
        width: clamp(180px, 14.58vw, 280px);
        align-items: center;
        justify-content: center;
        gap: var(--gap-xs);
        padding: clamp(8px, 0.65vw, 10px) 0;
        position: relative;
        border-radius: var(--radius-md);
        border: 1px solid var(--primario);
        flex-shrink: 0;
    }

    .integra .text-wrapper-18[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 600;
        color: var(--negro);
        font-size: var(--font-body);
        text-align: center;
        letter-spacing: 0.15px;
        line-height: var(--font-body-line);
    }

    .integra .line-3[b-llfm6qu22n] {
        position: relative;
        width: clamp(22px, 2.28vw, 35px);
        height: 2px;
    }

    .integra .line-4[b-llfm6qu22n] {
        position: relative;
        width: 2.6px;
        height: clamp(40px, 4.04vw, 62px);
    }

    .integra .frame-29[b-llfm6qu22n] {
        position: relative;
        width: clamp(16px, 1.5vw, 23px);
        flex-shrink: 0;
    }

    .integra .frame-30[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        width: clamp(220px, 18.85vw, 362px);
        align-items: stretch;
        /* gap matches line-4 height (clamp 40→62px) so the two entity boxes
           align with the top/bottom arrowhead tips of the T-junction */
        gap: clamp(8px, 2.08vw, 40px);
        position: relative;
        flex-shrink: 0;
    }

    /* Bordered boxes for SPEE / SPEA in step 1 SOLICITUD */
    .integra .entity-box[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(6px, 0.52vw, 8px) clamp(8px, 0.78vw, 12px);
        border-radius: var(--radius-md);
        border: 1px solid var(--primario);
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 600;
        color: var(--negro);
        font-size: var(--font-body-sm);
        letter-spacing: 0.15px;
        line-height: var(--font-body-sm-line);
        text-align: center;
    }

    .integra .text-wrapper-19[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
    }

    .integra .frame-31[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        padding: var(--gap-lg) 0;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        border-bottom: 1px dashed var(--gris-30);
    }

    .integra .frame-32[b-llfm6qu22n] {
        display: flex;
        width: clamp(180px, 20.31vw, 390px);
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-sm);
        position: relative;
        flex-shrink: 1;
        min-width: 0;
    }

    .integra .frame-33[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* gap matches line-5/line-6 spacing (frame-34 gap) for step 2 T-junction */
        gap: clamp(8px, 2.08vw, 40px);
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
    }

    .integra .text-wrapper-20[b-llfm6qu22n],
    .integra .text-wrapper-21[b-llfm6qu22n] {
        position: relative;
        width: 100%;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        text-align: right;
        letter-spacing: 0.5px;
        line-height: var(--font-body-line);
        white-space: normal;
    }

    /* frame-34: two horizontal stubs (line-5, line-6) for step 2 T-junction.
       Gap must match frame-33 gap so stubs align with the two service text rows. */
    .integra .frame-34[b-llfm6qu22n] {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(8px, 2.08vw, 40px);
        position: relative;
        flex: 0 0 auto;
    }

    .integra .line-5[b-llfm6qu22n],
    .integra .line-6[b-llfm6qu22n] {
        position: relative;
        width: 10px;
        height: 2px;
    }

    .integra .line-7[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        width: 2px;
    }

    .integra .arrow-3[b-llfm6qu22n] {
        position: relative;
        width: clamp(28px, 2.73vw, 42px);
        height: clamp(10px, 0.96vw, 15px);
        flex-shrink: 0;
    }

    /* Tipo A: frame-35 dentro de los pasos (arrow + entidad pequeña).
       Siempre en fila; se encogen si el espacio escasea. */
    .integra .frame-35[b-llfm6qu22n] {
        display: flex;
        gap: var(--gap-md);
        align-items: center;
        position: relative;
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    /* Tipo B: frame-35 resultado final (frame-39-col + arrow + "Sí cumple").
       Ocupa todo el ancho de frame-24; frame-39-col crece, los demás son fijos. */
    .integra .frame-24 > .frame-35[b-llfm6qu22n] {
        width: 100%;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--gap-lg);
    }

    /* frame-39-col: crece para llenar el espacio disponible en el Tipo B */
    .integra .frame-24 > .frame-35 > .frame-39-col[b-llfm6qu22n] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* arrow-4 y el div "Sí cumple" en el Tipo B no crecen ni se encogen */
    .integra .frame-24 > .frame-35 > .arrow-4[b-llfm6qu22n],
    .integra .frame-24 > .frame-35 > div[b-llfm6qu22n] {
        flex: 0 0 auto;
    }

    .integra .frame-39-col[b-llfm6qu22n] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .integra .frame-39[b-llfm6qu22n] {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Tipografía dentro de frame-39: escala más agresivamente
       para que el contenido quepa sin romper la disposición */
    .integra .frame-39 .text-wrapper-7[b-llfm6qu22n] {
        font-size: clamp(10px, 1.1vw, 16px);
        line-height: 1.3;
        white-space: normal;
        text-align: center;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .integra .frame-39 .text-wrapper-17[b-llfm6qu22n] {
        font-size: clamp(10px, 0.9vw, 14px);
        line-height: 1.3;
    }

    .integra .arrow-4[b-llfm6qu22n] {
        position: relative;
        width: clamp(48px, 4.75vw, 73px);
        height: clamp(10px, 0.96vw, 15px);
        flex-shrink: 0;
    }

    .integra .frame-36[b-llfm6qu22n] {
        display: flex;
        width: clamp(180px, 14.06vw, 270px);
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-sm);
        position: relative;
        flex-shrink: 0;
    }

    .integra .arrow-5[b-llfm6qu22n] {
        position: relative;
        width: clamp(70px, 7.88vw, 121px);
        height: clamp(10px, 0.96vw, 15px);
        flex-shrink: 0;
    }

    .integra .frame-37[b-llfm6qu22n] {
        display: flex;
        width: clamp(240px, 20.83vw, 400px);
        align-items: center;
        justify-content: center;
        gap: var(--gap-xs);
        padding: clamp(8px, 0.65vw, 10px) 0;
        position: relative;
        border-radius: var(--radius-md);
        border: 1px solid var(--primario);
        flex-shrink: 0;
    }

    .integra .text-wrapper-22[b-llfm6qu22n] {
        position: relative;
        width: fit-content;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 600;
        color: var(--negro);
        font-size: var(--font-body);
        letter-spacing: 0.15px;
        line-height: var(--font-body-line);
        white-space: nowrap;
    }

    .integra .logo-integra-wrapper[b-llfm6qu22n] {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-xs);
        padding: 0 clamp(16px, 1.875vw, 36px) 0 clamp(3px, 0.46vw, 7px);
        position: relative;
        flex: 0 0 auto;
    }

    .integra .logo-integra[b-llfm6qu22n] {
        position: relative;
        width: var(--logo-integra-w);
        height: var(--logo-integra-h);
    }

    .integra .frame-38[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        padding: var(--gap-lg) 0 0;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .arrow-6[b-llfm6qu22n] {
        position: relative;
        width: clamp(80px, 9.57vw, 147px);
        height: clamp(10px, 0.96vw, 15px);
        flex-shrink: 0;
    }

    .integra .frame-39[b-llfm6qu22n] {
        display: inline-flex;
        align-items: inherit;
        gap: var(--gap-md);
        padding: var(--card-pad-md);
        position: relative;
        flex: 0 0 auto;
        background-color: var(--blanco);
        border-radius: var(--radius-md);
        border: 2px solid var(--primario);
        box-shadow: var(--shadow-card);
        flex-wrap: wrap;
        justify-content: center;
    }

    .integra .frame-40[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        width: clamp(10px, 0.91vw, 14px);
    }

    /* ============================================= */
    /* CALCULADORA DE MEDIDAS ALTERNATIVAS           */
    /* Figma: 522-24449                              */
    /* ============================================= */
    .integra .component[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-self: stretch;
        align-items: flex-start;
        gap: var(--gap-lg);
        padding: var(--card-pad-md);
        position: relative;
        flex: 0 0 auto;
        background-color: var(--blanco);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    /* Separador horizontal dentro del card */
    .integra .component hr[b-llfm6qu22n] {
        width: 100%;
        border: none;
        border-top: 1px solid var(--gris-30);
        margin: 0;
    }

    /* Fila de dos inputs */
    .integra .frame-41[b-llfm6qu22n] {
        display: flex;
        align-items: stretch;
        gap: var(--gap-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .columna[b-llfm6qu22n],
    .integra .columna-2[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        flex: 1;
    }

    .integra .input-wrapper[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    /* Inputs: borde visible como en Figma */
    .integra .input-trabajadores[b-llfm6qu22n],
    .integra .emial_medidas_alternativas[b-llfm6qu22n] {
        padding: clamp(10px, 1.04vw, 17px) 1rem;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: var(--blanco);
        border-radius: var(--radius-md);
        border: 1px solid var(--gris-40);
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body);
        line-height: var(--font-body-line);
        outline: none;
        transition: border-color 0.2s ease;
    }

    .integra .input-trabajadores:focus[b-llfm6qu22n],
    .integra .emial_medidas_alternativas:focus[b-llfm6qu22n] {
        border-color: var(--primario);
    }

    .integra .input-trabajadores[b-llfm6qu22n]::placeholder,
    .integra .emial_medidas_alternativas[b-llfm6qu22n]::placeholder {
        color: var(--gris-50);
    }

    /* Fila checkbox + botón CALCULAR — sólo dentro de .component */
    .integra .component > .frame-27[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-lg);
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .frame-42[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        gap: var(--gap-sm);
        position: relative;
        flex: 1;
        min-width: 0;
    }

    .integra .checkbox-terminos[b-llfm6qu22n] {
        -webkit-appearance: none;
        appearance: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
        min-width: var(--icon-sm);
        border: 1px solid var(--negro);
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        flex-shrink: 0;
    }

    .integra .checkbox-terminos:checked[b-llfm6qu22n] {
        background-color: var(--primario);
        border-color: var(--primario);
    }

    .integra .text-wrapper-23[b-llfm6qu22n] {
        position: relative;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--negro);
        font-size: var(--font-body-sm);
        line-height: var(--font-body-sm-line);
    }

    /* Botón CALCULAR */
    .integra .state-layer-wrapper[b-llfm6qu22n] {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primario);
        border-radius: var(--radius-md);
        padding: clamp(10px, 1.04vw, 16px) clamp(20px, 2.08vw, 32px);
        cursor: pointer;
        flex-shrink: 0;
        border: none;
        transition: background-color 0.2s ease;
    }

    .integra .state-layer-wrapper:hover[b-llfm6qu22n] {
        background-color: var(--dark-green-buttons);
    }

    .integra .label-text-2[b-llfm6qu22n] {
        position: relative;
        color: var(--blanco);
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        font-size: var(--font-body-sm);
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    /* Sección de tres columnas de resultados */
    .integra .frame-43[b-llfm6qu22n] {
        display: flex;
        align-items: flex-start;
        gap: var(--gap-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .integra .frame-44[b-llfm6qu22n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    /* Separador SVG superior de cada columna de resultado */
    .integra .line-8[b-llfm6qu22n] {
        display: block;
        position: relative;
        align-self: stretch;
        width: 100%;
        height: auto;
    }

    /* Labels de columna: uppercase bold pequeño */
    .integra .n-MERO-DE-EMPLEADOS[b-llfm6qu22n],
    .integra .text-wrapper-24[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--negro);
        font-size: var(--font-body-sm);
        letter-spacing: 0.05em;
        line-height: var(--font-body-sm-line);
        text-transform: uppercase;
    }

    /* Valor calculado dentro de cada frame-44 */
    .integra .frame-44 .calc-result[b-llfm6qu22n] {
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 700;
        color: var(--primario);
        font-size: var(--font-h3);
        line-height: var(--font-h3-line);
    }

    /* Nota al pie del calculador */
    .integra .text-wrapper-25[b-llfm6qu22n] {
        position: relative;
        align-self: stretch;
        font-family: "Nunito Sans", Helvetica, sans-serif;
        font-weight: 400;
        color: var(--gris-60);
        font-size: var(--font-label-sm);
        letter-spacing: 0;
        line-height: var(--font-label-sm-line);
    }

.integra .frame-45[b-llfm6qu22n] {
    display: flex;
    align-items: stretch;
    gap: var(--gap-xl);
    padding: var(--gap-xl) 0 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.integra .frame-46[b-llfm6qu22n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: var(--card-pad-md);
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    background-color: var(--blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.integra .text-wrapper-26[b-llfm6qu22n] {
    position: relative;
    width: 100%;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-h2);
    text-align: center;
    letter-spacing: 0;
    line-height: var(--font-h2-line);
}

.integra .frame-47[b-llfm6qu22n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: var(--card-pad-md);
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    background-color: var(--blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.integra .text-wrapper-27[b-llfm6qu22n] {
    position: relative;
    width: 100%;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-h2);
    text-align: center;
    letter-spacing: 0;
    line-height: var(--font-h2-line);
}

.integra .text-wrapper-28[b-llfm6qu22n] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--negro);
    font-size: var(--font-body-sm);
    text-align: center;
    letter-spacing: 0.25px;
    line-height: var(--font-body-sm-line);
    white-space: normal;
}

.integra .frame-48[b-llfm6qu22n] {
    display: flex;
    width: 105.625rem;
    align-items: flex-start;
    gap: 6.25rem;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

.integra .frame-49[b-llfm6qu22n] {
    display: flex;
    align-items: flex-start;
    position: relative;
    flex: 1;
    align-self: stretch;
    flex-grow: 1;
    margin-top: -0.0625rem;
    margin-bottom: -0.0625rem;
    margin-left: -0.0625rem;
    background-color: var(--blanco);
    border-radius: 0.9375rem;
    border: 0.0625rem solid;
    border-color: var(--grisgris-50);
}

.integra .capa-wrapper[b-llfm6qu22n] {
    display: flex;
    flex-direction: column;
    width: 9.375rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 3.125rem 0rem 0rem;
    position: relative;
    align-self: stretch;
    background-color: var(--grisgris-30);
    border-radius: 0.9375rem;
}

.integra .capa[b-llfm6qu22n] {
    position: relative;
    width: 7.375rem;
    height: 17.5rem;
}

.integra .overlap-group[b-llfm6qu22n] {
    position: relative;
    height: 17.5rem;
}

.integra .group[b-llfm6qu22n] {
    position: absolute;
    width: 5.5rem;
    height: 5.5rem;
    top: 0;
    left: 1.25rem;
}

.integra .vector[b-llfm6qu22n] {
    position: absolute;
    width: 6.25rem;
    height: 7.4375rem;
    top: 10.0625rem;
    left: 0.5rem;
}

.integra .vector-2[b-llfm6qu22n] {
    position: absolute;
    width: 5.125rem;
    height: 6.8125rem;
    top: 3.8125rem;
    left: 1.4375rem;
}

.integra .vector-3[b-llfm6qu22n] {
    position: absolute;
    width: 3.1875rem;
    height: 5rem;
    top: 6.375rem;
    left: 2.375rem;
}

.integra .vector-4[b-llfm6qu22n] {
    position: absolute;
    width: 1rem;
    height: 0.0625rem;
    top: 6.9375rem;
    left: 4.1875rem;
}

.integra .vector-5[b-llfm6qu22n] {
    position: absolute;
    width: 1rem;
    height: 0.0625rem;
    top: 7.3125rem;
    left: 4.1875rem;
}

.integra .vector-6[b-llfm6qu22n] {
    position: absolute;
    width: 1rem;
    height: 0.0625rem;
    top: 7.625rem;
    left: 4.1875rem;
}

.integra .vector-7[b-llfm6qu22n] {
    position: absolute;
    width: 2.375rem;
    height: 0.1875rem;
    top: 8.6875rem;
    left: 2.8125rem;
}

.integra .b[b-llfm6qu22n] {
    position: absolute;
    width: 4.1875rem;
    height: 1.625rem;
    top: 9.25rem;
    left: 0.625rem;
}

.integra .vector-8[b-llfm6qu22n] {
    position: absolute;
    width: 2.3125rem;
    height: 5.1875rem;
    top: 5rem;
    left: 0;
}

.integra .c[b-llfm6qu22n] {
    position: absolute;
    width: 4.1875rem;
    height: 1.1875rem;
    top: 9.1875rem;
    left: 2.4375rem;
}

.integra .vector-9[b-llfm6qu22n] {
    position: absolute;
    width: 1.875rem;
    height: 5.3125rem;
    top: 5rem;
    left: 5.5rem;
}

.integra .vector-10[b-llfm6qu22n] {
    position: absolute;
    width: 1.125rem;
    height: 1.375rem;
    top: 6.75rem;
    left: 2.6875rem;
}

.integra .vector-11[b-llfm6qu22n] {
    position: absolute;
    width: 0.3125rem;
    height: 0.5rem;
    top: 7.625rem;
    left: 2.6875rem;
}

.integra .vector-12[b-llfm6qu22n] {
    position: absolute;
    width: 0.25rem;
    height: 0.5rem;
    top: 7.625rem;
    left: 3.5625rem;
}

.integra .group-2[b-llfm6qu22n] {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    top: 6.9375rem;
    left: 2.9375rem;
}

.integra .vector-13[b-llfm6qu22n] {
    position: absolute;
    width: 0.8125rem;
    height: 0.6875rem;
    top: 7.4375rem;
    left: 2.875rem;
}

.integra .frame-50[b-llfm6qu22n] {
    padding: 3.125rem;
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
}

.integra .text-wrapper-29[b-llfm6qu22n] {
    position: relative;
    align-self: stretch;
    margin-top: -0.0625rem;
    font-family: var(--headline-small-font-family);
    font-weight: var(--headline-small-font-weight);
    color: #000000;
    font-size: var(--headline-small-font-size);
    letter-spacing: var(--headline-small-letter-spacing);
    line-height: var(--headline-small-line-height);
    font-style: var(--headline-small-font-style);
}

.integra .boton-2[b-llfm6qu22n] {
    display: inline-flex;
    height: 3.3125rem;
    align-items: center;
    background-color: var(--blanco);
    border: 0.0625rem solid;
    border-color: var(--primario);
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    text-decoration: none;
}

.integra .label-text-3[b-llfm6qu22n] {
    color: var(--primario);
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.integra .boton-2:hover[b-llfm6qu22n] {
    background-color: #3caa36;
}

    .integra .boton-2:hover .label-text-3[b-llfm6qu22n] {
        color: #ffffff;
    }

.integra .frame-51[b-llfm6qu22n] {
    flex: 1;
    flex-grow: 1;
    margin-top: -0.0625rem;
    margin-bottom: -0.0625rem;
    margin-right: -0.0625rem;
    border-color: var(--primario);
    display: flex;
    align-items: flex-start;
    position: relative;
    align-self: stretch;
    background-color: var(--blanco);
    border-radius: 0.9375rem;
    border: 0.0625rem solid;
}

.integra .frame-52[b-llfm6qu22n] {
    display: flex;
    flex-direction: column;
    width: 9.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 3.125rem 0rem 0rem;
    position: relative;
    align-self: stretch;
    background-color: var(--primaryprimary-10);
    border-radius: 0.9375rem;
}

.integra .overlap-group-wrapper[b-llfm6qu22n] {
    position: relative;
    width: 7.5rem;
    height: 11.25rem;
}

.integra .overlap-group-2[b-llfm6qu22n] {
    position: relative;
    width: 6.9375rem;
    height: 11.25rem;
    left: 0.5625rem;
}

.integra .vector-14[b-llfm6qu22n] {
    position: absolute;
    width: 6.3125rem;
    height: 6.5rem;
    top: 0;
    left: 0.625rem;
}

.integra .b-2[b-llfm6qu22n] {
    position: absolute;
    width: 1.375rem;
    height: 0.9375rem;
    top: 4.4375rem;
    left: 0.3125rem;
}

.integra .vector-15[b-llfm6qu22n] {
    position: absolute;
    width: 3.125rem;
    height: 2.125rem;
    top: 3.125rem;
    left: 0.625rem;
}

.integra .vector-16[b-llfm6qu22n] {
    position: absolute;
    width: 1.1875rem;
    height: 1.25rem;
    top: 1.3125rem;
    left: 3.3125rem;
}

.integra .group-3[b-llfm6qu22n] {
    position: absolute;
    width: 1.4375rem;
    height: 2.25rem;
    top: 8.625rem;
    left: 3rem;
}

.integra .group-4[b-llfm6qu22n] {
    position: absolute;
    width: 1.4375rem;
    height: 2.125rem;
    top: 9.125rem;
    left: 3.75rem;
}

.integra .vector-17[b-llfm6qu22n] {
    position: absolute;
    width: 2.3125rem;
    height: 3.3125rem;
    top: 4.3125rem;
    left: 2.875rem;
}

.integra .vector-18[b-llfm6qu22n] {
    position: absolute;
    width: 1.8125rem;
    height: 3rem;
    top: 2.25rem;
    left: 2.9375rem;
}

.integra .vector-19[b-llfm6qu22n] {
    position: absolute;
    width: 2.9375rem;
    height: 4.875rem;
    top: 4.8125rem;
    left: 1.8125rem;
}

.integra .vector-20[b-llfm6qu22n] {
    position: absolute;
    width: 3rem;
    height: 5.875rem;
    top: 2.375rem;
    left: 3.75rem;
}

.integra .vector-21[b-llfm6qu22n] {
    position: absolute;
    width: 1rem;
    height: 2.5rem;
    top: 2.5625rem;
    left: 2.875rem;
}

.integra .c-2[b-llfm6qu22n] {
    position: absolute;
    width: 1rem;
    height: 1.375rem;
    top: 4.5625rem;
    left: 5.9375rem;
}

.integra .vector-22[b-llfm6qu22n] {
    position: absolute;
    width: 2.1875rem;
    height: 3.0625rem;
    top: 2.5rem;
    left: 4.5rem;
}

.integra .vector-23[b-llfm6qu22n] {
    position: absolute;
    width: 1.0625rem;
    height: 1.0625rem;
    top: 1.1875rem;
    left: 3.375rem;
}

.integra .vector-24[b-llfm6qu22n] {
    position: absolute;
    width: 1.5rem;
    height: 1.6875rem;
    top: 0.875rem;
    left: 3.375rem;
}

.integra .vector-25[b-llfm6qu22n] {
    position: absolute;
    width: 2.375rem;
    height: 0.0625rem;
    top: 2rem;
    left: 0.25rem;
}

.integra .group-5[b-llfm6qu22n] {
    position: absolute;
    width: 3.0625rem;
    height: 1.0625rem;
    top: 1.25rem;
    left: 0;
}

.integra .vector-26[b-llfm6qu22n] {
    position: absolute;
    width: 2.5625rem;
    height: 0.0625rem;
    top: 4rem;
    left: 0.25rem;
}

.integra .group-6[b-llfm6qu22n] {
    position: absolute;
    width: 2.3125rem;
    height: 1.0625rem;
    top: 3.1875rem;
    left: 0.125rem;
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .integra .frame-25[b-llfm6qu22n] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .integra .frame-27[b-llfm6qu22n] {
        gap: 5px; /* Gap mínimo para que quepa todo */
    }
}

.integra .boton-3[b-llfm6qu22n] {
    display: inline-flex;
    height: 3.375rem;
    align-items: center;
    width: fit-content;
    background-color: var(--primario);
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    overflow: hidden;
    border: none;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

    .integra .boton-3:hover[b-llfm6qu22n] {
        background-color: var(--blanco);
        border: 0.125rem solid #3caa36;
        outline: none;
    }

        .integra .boton-3:hover .label-text-2[b-llfm6qu22n] {
            color: var(--primario);
        }

/* Flecha en la parte inferior de frame-wrapper, empujada al fondo con margin-top: auto */
.integra .arrow-7[b-llfm6qu22n] {
    display: block;
    width: clamp(24px, 1.82vw, 35px);
    height: auto;
    margin-top: auto;
    padding-bottom: var(--gap-md);
    flex-shrink: 0;
    pointer-events: none;
}

/* Columna wrapper: arrow-8 encima de frame-39, centrados juntos.
   flex: 1 1 auto para que crezca dentro de frame-24 > frame-35. */
.integra .frame-39-col[b-llfm6qu22n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    flex: 1 1 auto;
    min-width: 0;
}

/* Flecha hacia abajo centrada sobre frame-39 (card verde de resultado) */
.integra .arrow-8[b-llfm6qu22n] {
    display: block;
    width: clamp(24px, 1.82vw, 35px);
    height: auto;
    flex-shrink: 0;
    pointer-events: none;
}

/* ================================================== */
/* RESPONSIVE - DESKTOP INTERMEDIO (max-width: 1280px) */
/* La imagen pasa de absolute derecha a relative abajo */
/* ================================================== */
@media (max-width: 1280px) {
    .integra .frame-3[b-llfm6qu22n] {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        gap: var(--gap-lg);
    }

    .integra .frame-4[b-llfm6qu22n] {
        width: 100%;
    }

    /* Imagen mujer: layout colapsado no tiene hueco para ella, se oculta */
    .integra .aasjoh[b-llfm6qu22n] {
        display: none;
    }

    /* Ocultar flecha decorativa (su anclaje absoluto no aplica aquí) */
    .integra .arrow[b-llfm6qu22n] {
        display: none;
    }

    /* Rectángulo verde claro detrás de imagen: se oculta al pasar imagen a flujo */
    .integra .div[b-llfm6qu22n] {
        display: none;
    }

    /* Flechas inter-sección: se ocultan (su alto no se puede calcular de forma fiable) */
    .integra .arrow-7[b-llfm6qu22n],
    .integra .arrow-8[b-llfm6qu22n] {
        display: none;
    }
}

/* ================================================== */
/* RESPONSIVE - TABLET (max-width: 1024px)            */
/* Figma: 4206-7448 (834px)                           */
/* - LGD + info card SIGUEN side-by-side               */
/* - Medidas alt: orden invertido (steps → texto)      */
/* - Imagen mujer: fondo en sección medidas alt        */
/* ================================================== */
@media (max-width: 1024px) {
    .integra[b-llfm6qu22n] {
        --padding-lateral: clamp(20px, 3.6vw, 36px);
        --gap-xl: clamp(24px, 3.6vw, 40px);
        --gap-xxl: clamp(12px, 2.4vw, 26px);
        --card-pad-md: clamp(18px, 2.8vw, 30px);
        --col-main: calc((100% - var(--gap-xxl)) / 2);
    }

    /* HERO: LGD col + info card siguen en fila (2 columnas 50/50) */
    .integra .frame-6[b-llfm6qu22n] {
        align-items: stretch;
        width: 100%;
        gap: var(--gap-xxl);
    }

    .integra .frame-7[b-llfm6qu22n],
    .integra .frame-wrapper[b-llfm6qu22n] {
        width: var(--col-main);
        flex: 1 1 0;
        min-width: 0;
    }

    /* Imagen mujer: ya no aparece debajo del hero */
    .integra .aasjoh[b-llfm6qu22n] {
        display: none;
    }

    /* MEDIDAS ALTERNATIVAS: una sola columna, orden invertido */
    .integra .frame-19[b-llfm6qu22n] {
        flex-direction: column;
        gap: var(--gap-xl);
    }

    .integra .frame-20[b-llfm6qu22n],
    .integra .frame-24[b-llfm6qu22n] {
        width: 100%;
    }

    /* frame-24 (steps + empresa card) aparece PRIMERO */
    .integra .frame-24[b-llfm6qu22n] {
        order: 1;
    }

    /* frame-20 (título + lista + botón) aparece DESPUÉS con imagen de fondo */
    .integra .frame-20[b-llfm6qu22n] {
        order: 2;
        position: relative;
        overflow: hidden;
    }

    /* Imagen mujer como decoración de fondo en sección medidas alt
       (Figma: x=387, y=-19, 700x574 dentro del bloque texto) */
    .integra .frame-20[b-llfm6qu22n]::after {
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        width: 90%;
        max-width: 700px;
        aspect-ratio: 700 / 574;
        background-image: url("https://c.animaapp.com/91Yj1gRN/img/aa18sjoh-1.png");
        background-size: cover;
        background-position: center;
        opacity: 0.25;
        pointer-events: none;
        z-index: 0;
        border-radius: var(--radius-lg);
    }

    .integra .frame-20 > *[b-llfm6qu22n] {
        position: relative;
        z-index: 1;
    }

    /* Preguntas Frecuentes button: full width en tablet */
    .integra .frame-20 .boton[b-llfm6qu22n] {
        align-self: stretch;
    }

    /* Steps card: permitir wrap si no caben */
    .integra .frame-27[b-llfm6qu22n] {
        flex-wrap: wrap;
        gap: var(--gap-md);
    }

    /* Tipo A (steps): reducir gap en tablet, siempre en fila */
    .integra .frame-35[b-llfm6qu22n] {
        gap: var(--gap-sm);
    }

    /* Tipo B (resultado final): ancho completo, space-between */
    .integra .frame-24 > .frame-35[b-llfm6qu22n] {
        gap: var(--gap-md);
        justify-content: space-between;
    }

    .integra .frame-39[b-llfm6qu22n] {
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--card-pad-md);
    }

    /* CTAs pendientes (no refactorizados aún) */
    .integra .component[b-llfm6qu22n],
    .integra .frame-48[b-llfm6qu22n] {
        width: 100%;
    }

    /* frame-45: stats en tablet — 2 columnas + 1 debajo si no caben */
    .integra .frame-45[b-llfm6qu22n] {
        gap: var(--gap-lg);
    }

    .integra .frame-46[b-llfm6qu22n],
    .integra .frame-47[b-llfm6qu22n] {
        flex: 1 1 calc(50% - var(--gap-lg));
        min-width: 160px;
    }

    /* frame-35 resultado final: permitir wrap en tablet */
    .integra .frame-24 > .frame-35[b-llfm6qu22n] {
        gap: var(--gap-md);
    }

    /* En tablet ocultamos el fondo azul del bg-calculadora y aplicamos
       un color neutro directamente sobre la calculadora */
    .integra .bg-calculadora[b-llfm6qu22n]::before {
        display: none;
    }

    .integra .component[b-llfm6qu22n] {
        background-color: var(--gris-10);
    }
}

/* ================================================== */
/* RESPONSIVE - MÓVIL (max-width: 768px)              */
/* ================================================== */
@media (max-width: 768px) {
    .integra[b-llfm6qu22n] {
        --padding-lateral: clamp(16px, 4vw, 24px);
        --gap-lg: clamp(20px, 4vw, 28px);
        --gap-xl: clamp(24px, 5vw, 36px);
        --gap-xxl: clamp(18px, 4vw, 28px);
        --card-pad-sm: clamp(12px, 3vw, 18px);
        --card-pad-md: clamp(16px, 4vw, 24px);
        --col-main: 100%;
    }

    /* HERO: ahora sí apilar LGD + info card verticalmente */
    .integra .frame-6[b-llfm6qu22n] {
        flex-direction: column;
        gap: var(--gap-lg);
    }

    .integra .frame-7[b-llfm6qu22n],
    .integra .frame-wrapper[b-llfm6qu22n] {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Fondo mujer en medidas alt más discreto */
    .integra .frame-20[b-llfm6qu22n]::after {
        opacity: 0.15;
        width: 100%;
    }

    /* HEADER */
    .integra .ttulo[b-llfm6qu22n] {
        justify-content: flex-start;
        padding-left: clamp(28px, 7vw, 36px);
    }

    /* HERO - LGD CARD */
    .integra .frame-13[b-llfm6qu22n] {
        gap: var(--gap-sm);
        justify-content: space-around;
    }

    .integra .text-wrapper-6[b-llfm6qu22n] {
        font-size: clamp(14px, 3.8vw, 18px);
        line-height: 1.3;
    }

    /* Cards que pueden desbordar: permitir que sus textos se adapten */
    .integra .div-wrapper[b-llfm6qu22n],
    .integra .frame-16[b-llfm6qu22n] {
        flex: 1;
        min-width: 0;
    }

    .integra .div-wrapper .text-wrapper-7[b-llfm6qu22n],
    .integra .frame-16 .text-wrapper-7[b-llfm6qu22n] {
        white-space: normal;
        text-align: center;
        font-size: clamp(14px, 3.8vw, 18px);
        line-height: 1.3;
    }

    /* Info card - reducir padding */
    .integra .frame-17[b-llfm6qu22n] {
        gap: var(--gap-md);
    }

    /* MEDIDAS ALTERNATIVAS - Steps */
    .integra .frame-25[b-llfm6qu22n] {
        overflow: hidden; /* Corta cualquier desborde accidental */
        padding: clamp(15px, 2vw, 40px); /* Suaviza el padding interno */
        box-sizing: border-box;
    }

    /* Pasos con elementos que no caben: wrap y centrar */
    .integra .frame-27[b-llfm6qu22n] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-md);
    }

    .integra .frame-27 > *[b-llfm6qu22n] {
        margin: 0 auto;
    }

    @media (max-width: 1150px) {
        .integra .arrow-2[b-llfm6qu22n],
        .integra .arrow-3[b-llfm6qu22n],
        .integra .arrow-4[b-llfm6qu22n],
        .integra .arrow-5[b-llfm6qu22n],
        .integra .arrow-6[b-llfm6qu22n] {
            display: none; /* A veces es mejor ocultarlas en el flujo horizontal si se amontonan */
        }

        .integra .frame-27[b-llfm6qu22n] {
            flex-direction: column; /* Apilamos los elementos verticalmente */
            gap: var(--gap-sm);
        }
    }

    .integra .arrow-2[b-llfm6qu22n],
    .integra .arrow-3[b-llfm6qu22n],
    .integra .arrow-4[b-llfm6qu22n],
    .integra .arrow-5[b-llfm6qu22n],
    .integra .arrow-6[b-llfm6qu22n] {
        flex: 0 1 auto; /* Pueden encogerse (1) pero no crecer (0) */
        min-width: 15px; /* Mínimo para que no desaparezcan */
        max-width: 50px; /* Ajusta según el tamaño original de tus flechas */
        height: auto;
        object-fit: contain;
    }

    /* Cards centradas y full-width */
    .integra .frame-28[b-llfm6qu22n],
    .integra .frame-37[b-llfm6qu22n],
    .integra .frame-30[b-llfm6qu22n],
    .integra .frame-32[b-llfm6qu22n],
    .integra .frame-36[b-llfm6qu22n] {
        width: 100%;
        max-width: 340px;
    }

    .integra .frame-28[b-llfm6qu22n],
    .integra .frame-30[b-llfm6qu22n],
    .integra .frame-32[b-llfm6qu22n],
    .integra .frame-36[b-llfm6qu22n],
    .integra .frame-37[b-llfm6qu22n] {
        flex: 1 1 auto; /* Que todos se repartan el espacio equitativamente */
        min-width: 120px; /* Un mínimo razonable para que el texto sea legible */
        max-width: 250px; /* Que no crezcan infinito */
        padding: 10px 5px;
    }

    /* Entity boxes (SPEE/SPEA) full width on mobile */
    .integra .entity-box[b-llfm6qu22n] {
        white-space: normal; /* Permite que el texto salte de línea dentro de la cajita */
        height: auto;
        min-height: clamp(40px, 4vw, 60px);
    }

    /* T-junction gaps collapse to simple vertical on mobile */
    .integra .frame-33[b-llfm6qu22n],
    .integra .frame-34[b-llfm6qu22n] {
        gap: var(--gap-md);
    }

    /* Frame-39 (card final "Empresa + INTEGRA = Medidas alternativas") */
    .integra .frame-39[b-llfm6qu22n] {
        padding: var(--card-pad-md);
        gap: var(--gap-sm);
        width: 100%;
    }

    /* Tipo A (steps): en móvil se apilan dentro del frame-27 que ya es columna */
    .integra .frame-35[b-llfm6qu22n] {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: var(--gap-sm);
    }

    /* Tipo B (resultado final): columna centrada en móvil */
    .integra .frame-24 > .frame-35[b-llfm6qu22n] {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-md);
    }

    /* frame-45: stats en móvil — una columna */
    .integra .frame-45[b-llfm6qu22n] {
        flex-direction: column;
        gap: var(--gap-md);
    }

    .integra .frame-46[b-llfm6qu22n],
    .integra .frame-47[b-llfm6qu22n] {
        flex: 0 0 auto;
        width: 100%;
    }

    /* CTAs (frame-48): apilar las dos tarjetas verticalmente */
    .integra .frame-48[b-llfm6qu22n] {
        flex-direction: column;
        gap: var(--gap-lg);
    }

    /* Dentro de cada tarjeta: ilustración arriba, texto abajo */
    .integra .frame-49[b-llfm6qu22n],
    .integra .frame-51[b-llfm6qu22n] {
        flex-direction: column;
        margin: 0;
    }

    /* Ilustración: ancho completo, altura acotada, esquinas superiores redondeadas */
    .integra .capa-wrapper[b-llfm6qu22n],
    .integra .frame-52[b-llfm6qu22n] {
        width: 100%;
        height: clamp(160px, 38vw, 200px);
        padding-top: var(--gap-md);
        overflow: hidden;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        justify-content: flex-start;
    }

    /* Área de texto: padding responsivo */
    .integra .frame-50[b-llfm6qu22n] {
        padding: var(--card-pad-md);
        width: 100%;
    }
}
/* /Components/Pages/Lista.razor.rz.scp.css */
/* =============================================
   LISTA (detalle) — Scoped CSS
   Figma design: node 381-11709
   ============================================= */

/* ============================================= */
/* VARIABLES CSS                                  */
/* ============================================= */
.lista[b-5y26h5j44v] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --primario-hover: #369933;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --black-900: #121212;
    --font-family: 'Nunito Sans', Helvetica, sans-serif;

    /* Espaciado responsive */
    --padding-lateral: clamp(16px, 6.165vw, 120px);
    --padding-bottom: clamp(40px, 5.38vw, 110px);
    --content-gap: clamp(20px, 1.56vw, 30px);

    /* Tipografía */
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-small: clamp(10px, 0.63vw, 12px);
    --font-title: clamp(14px, 0.83vw, 16px);
    --font-ref: clamp(12px, 0.73vw, 14px);

    /* Botones */
    --btn-height-lg: clamp(44px, 2.71vw, 52px);
    --btn-height-sm: clamp(38px, 2.4vw, 46px);
    --btn-radius: 6px;

    /* Imagen de producto */
    --product-img: clamp(70px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);

    /* Contador */
    --counter-width: clamp(100px, 6.68vw, 128px);
    --counter-height: clamp(36px, 2.4vw, 46px);
    --counter-btn-size: clamp(16px, 1.04vw, 20px);

    /* Columnas tabla */
    --col-cantidad: clamp(100px, 6.71vw, 129px);
    --col-stock: clamp(44px, 3.47vw, 50px);
    --col-precio: clamp(80px, 6.94vw, 100px);
    --col-actions: clamp(140px, 16.67vw, 240px);
    --td-padding-v: clamp(4px, 0.56vw, 8px);

    /* Layout */
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    background: var(--blanco, #FFFFFF);
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME EXTERNO                                  */
/* ============================================= */
.lista .frame[b-5y26h5j44v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--content-gap);
    width: 100%;
}

/* ============================================= */
/* TÍTULO NAVEGACIÓN (pequeño, centrado)          */
/* ============================================= */
.lista .titulo[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.lista .titulo-text[b-5y26h5j44v] {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
    text-align: center;
}

.lista .back-arrow[b-5y26h5j44v] {
    position: absolute;
    left: 0;
    top: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.lista .back-arrow:hover[b-5y26h5j44v] {
    opacity: 0.7;
}

.lista .back-arrow .iconos[b-5y26h5j44v],
.lista .titulo .iconos[b-5y26h5j44v] {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
}

/* ============================================= */
/* ALERTAS                                        */
/* ============================================= */
.lista .alert p[b-5y26h5j44v] {
    margin-bottom: 0;
}

/* ============================================= */
/* TABLA: Wrapper y container                     */
/* ============================================= */
.lista .tabla-wrapper[b-5y26h5j44v] {
    width: 100%;
}

.lista .tabla-container[b-5y26h5j44v] {
    width: 100%;
    overflow-x: auto;
}

/* ============================================= */
/* TABLA: Estilos principales                     */
/* ============================================= */
    .lista .tabla-mejorada[b-5y26h5j44v] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-family: var(--font-family);
        font-size: var(--font-body);
        table-layout: fixed;
        margin-top: clamp(20px, 1.65vw, 45px);
        margin-bottom : clamp(50px, 4.04vw, 85px);
    }

/* ============================================= */
/* TABLA: THEAD                                   */
/* ============================================= */
.lista .tabla-mejorada th[b-5y26h5j44v] {
    padding: 0 7.5px clamp(12px, 1.04vw, 20px);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: bottom;
    border-bottom: 1px solid var(--negro);
}

.lista .tabla-mejorada .th1[b-5y26h5j44v] {
    text-align: left;
    width: 40%;
    padding-left: 0;  /* flush con el borde del contenedor */
}

.lista .tabla-mejorada .th2[b-5y26h5j44v] {
    width: var(--col-cantidad);
}

.lista .tabla-mejorada .th3[b-5y26h5j44v] {
    width: var(--col-stock);
}

.lista .tabla-mejorada .th4[b-5y26h5j44v] {
    text-align: right;
    width: var(--col-precio);
}

.lista .tabla-mejorada .th5[b-5y26h5j44v] {
    width: var(--col-actions);
    padding-right: 0; /* flush con el borde del contenedor */
}

.lista .tabla-mejorada th .subheader[b-5y26h5j44v] {
    font-size: var(--font-small);
    font-weight: 400;
    color: var(--gris-50);
    letter-spacing: 0.4px;
    margin-left: 4px;
}

/* ============================================= */
/* TABLA: TBODY                                   */
/* ============================================= */
.lista .tabla-mejorada td[b-5y26h5j44v] {
    padding: var(--td-padding-v, 8px) 7.5px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--font-body);
    line-height: 1.5;
    color: var(--negro);
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--gris-30);
}

.lista .tabla-mejorada tbody tr:last-child td[b-5y26h5j44v] {
    border-bottom: none;
}

/* ============================================= */
/* TD1: Producto (imagen + descripción + ref)     */
/* ============================================= */
.lista .tabla-mejorada .td1[b-5y26h5j44v] {
    text-align: left;
    padding-left: 0;
}

.lista .tabla-mejorada .td1 .td-content[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
}

.lista .tabla-mejorada .td1 .product-link[b-5y26h5j44v] {
    flex-shrink: 0;
    text-decoration: none;
}

.lista .tabla-mejorada .td1 .product-image[b-5y26h5j44v] {
    width: var(--product-img, 100px);
    height: var(--product-img, 100px);
    min-width: var(--product-img, 100px);
    min-height: var(--product-img, 100px);
    max-width: var(--product-img, 100px);
    max-height: var(--product-img, 100px);
    border-radius: var(--img-radius, 14px);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lista .tabla-mejorada .td1 .product-image img[b-5y26h5j44v],
.lista .tabla-mejorada .td1 .product-image .product-img[b-5y26h5j44v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-radius, 14px);
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.lista .tabla-mejorada .td1 .product-image > *[b-5y26h5j44v] {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.lista .tabla-mejorada .td1 .producto-info[b-5y26h5j44v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lista .tabla-mejorada .td1 .descripcion[b-5y26h5j44v] {
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    word-break: break-word;
}

.lista .tabla-mejorada .td1 .referencia[b-5y26h5j44v] {
    font-weight: 300;
    font-size: var(--font-ref);
    color: var(--gris-50);
    line-height: 1.4;
    letter-spacing: 0.25px;
}

/* ============================================= */
/* TD2: Cantidad (contador ±)                     */
/* ============================================= */
.lista .tabla-mejorada .td2 .td-content[b-5y26h5j44v] {
    display: flex;
    height: var(--counter-height);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background-color: var(--gris-10);
    padding: 0 clamp(8px, 0.63vw, 12px);
    width: var(--counter-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.lista .tabla-mejorada .td2 .td-content button[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.lista .tabla-mejorada .td2 .td-content button img[b-5y26h5j44v] {
    width: var(--counter-btn-size);
    height: var(--counter-btn-size);
    opacity: 1;
    transition: opacity 0.15s;
}

.lista .tabla-mejorada .td2 .td-content button:disabled img[b-5y26h5j44v] {
    opacity: 0.35;
}

[b-5y26h5j44v] .tabla-mejorada .td2 .td-content .cantidad-input {
    color: var(--black-900);
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: normal;
    width: 100%;
    border: none;
    background-color: var(--gris-10);
    outline: none;
}

/* ============================================= */
/* TD3: Stock                                     */
/* ============================================= */
.lista .tabla-mejorada .td3[b-5y26h5j44v] {
    text-align: center;
}

.lista .tabla-mejorada .td3 .stock-icon[b-5y26h5j44v] {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
}

/* ============================================= */
/* TD4: Precio sin IVA                            */
/* ============================================= */
.lista .tabla-mejorada .td4[b-5y26h5j44v] {
    text-align: right;
    padding-right: 25px;
}

.lista .tabla-mejorada .td4 .precio-content[b-5y26h5j44v] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.lista .tabla-mejorada .td4 .precio-actual[b-5y26h5j44v] {
    font-weight: 700;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.lista .tabla-mejorada .td4 .precio-tachado[b-5y26h5j44v] {
    font-weight: 400;
    font-size: clamp(11px, 0.73vw, 14px);
    color: var(--gris-50);
    text-decoration: line-through;
    line-height: 1.4;
}

/* ============================================= */
/* TD5: Acciones (carrito + corazón + eliminar)   */
/* ============================================= */
.lista .tabla-mejorada .td5[b-5y26h5j44v] {
    text-align: right;
    padding-right: 0;
}

.lista .tabla-mejorada .td5 .acciones-content[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.lista .tabla-mejorada .td5 .btn-cart[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Botón cuadrado (ancho = alto), como el .boton de ProductCard */
    width: clamp(38px, 3vw, 46px);
    height: clamp(38px, 3vw, 46px);
    min-width: clamp(38px, 3vw, 46px);
    border-radius: 6px;
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lista .tabla-mejorada .td5 .btn-cart:hover[b-5y26h5j44v] {
    background-color: var(--primario);
}

/* Icono del carrito (CartIcon, fill=currentColor): verde PMC → blanco en hover */
.lista .tabla-mejorada .td5 .btn-cart[b-5y26h5j44v]  .btn-icon {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    display: block;
    flex-shrink: 0;
    color: var(--primario);
    transition: color 0.2s;
}

.lista .tabla-mejorada .td5 .btn-cart:hover[b-5y26h5j44v]  .btn-icon {
    color: #fff;
}

/* Botón favorito — solo icono, sin círculo */
.lista .tabla-mejorada .td5 .btn-fav[b-5y26h5j44v] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.lista .tabla-mejorada .td5 .btn-fav:hover[b-5y26h5j44v] {
    transform: scale(1.15);
}

/* Corazón favorito: icono de fuente (bi-heart / bi-heart-fill), como el resto de la web.
   Gris en inactivo; ROJO relleno cuando es favorito (bi-heart-fill) y en hover. */
.lista .tabla-mejorada .td5 .btn-fav i[b-5y26h5j44v] {
    font-size: clamp(18px, 1.075vw, 24px);
    line-height: 1;
    color: #9E9E9E;
    transition: color 0.2s;
}

.lista .tabla-mejorada .td5 .btn-fav:hover i[b-5y26h5j44v] {
    color: #dc3545;
}

.lista .tabla-mejorada .td5 .btn-fav.is-fav i[b-5y26h5j44v] {
    color: #dc3545;
}

/* Botón eliminar (TrashIcon, stroke=currentColor) */
.lista .tabla-mejorada .td5[b-5y26h5j44v]  .btn-delete {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    color: #212121;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.lista .tabla-mejorada .td5[b-5y26h5j44v]  .btn-delete:hover {
    transform: scale(1.15);
    opacity: 0.7;
}

/* ============================================= */
/* BOTONES INFERIORES (¿Te ayudamos? + AÑADIR TODO) */
/* Figma: container w=808px gap=20px; botones h=52px radius=6px */
/* ============================================= */
.lista .buttons[b-5y26h5j44v] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 808px;
    margin: 0 auto;
    align-self: center;
}

.lista .buttons > *[b-5y26h5j44v] {
    flex: 1;
}

.lista .buttons .help-button-container .btn-help[b-5y26h5j44v], .lista .buttons .button-GGW-container .button-GGW-container-state-layer[b-5y26h5j44v] {
    width: 100%;
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                         */
/* ============================================= */
.lista .spinner-border[b-5y26h5j44v] {
    color: var(--blanco);
}

.page-blocker[b-5y26h5j44v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-blocker-content[b-5y26h5j44v] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================= */
/* RESPONSIVE — TABLET (≤1024px)                  */
/* ============================================= */
@media (max-width: 1024px) {
    .lista[b-5y26h5j44v] {
        --padding-lateral: 30px;
        --content-gap: 20px;
        --font-body: 14px;
        --product-img: 80px;
        --col-cantidad: 110px;
        --col-stock: 50px;
        --col-precio: 90px;
        --col-actions: 180px;
        --td-padding-v: 8px;
    }

    .lista .state-layer-wrapper[b-5y26h5j44v],
    .lista .boton-add-all[b-5y26h5j44v] {
        height: 48px;
    }

    .lista .tabla-mejorada[b-5y26h5j44v] {
        table-layout: auto;
    }

    .lista .tabla-mejorada .th1[b-5y26h5j44v] { width: auto; }
    .lista .tabla-mejorada .th2[b-5y26h5j44v],
    .lista .tabla-mejorada .th3[b-5y26h5j44v],
    .lista .tabla-mejorada .th4[b-5y26h5j44v],
    .lista .tabla-mejorada .th5[b-5y26h5j44v] { width: auto; }
}

/* ============================================= */
/* RESPONSIVE — MÓVIL (≤768px): tabla → tarjetas  */
/* ============================================= */
@media (max-width: 768px) {
    .lista[b-5y26h5j44v] {
        --padding-lateral: 16px;
        --content-gap: 14px;
        --font-body: 14px;
        --font-small: 11px;
        --product-img: 72px;
        --img-radius: 10px;
        --counter-width: 120px;
        --counter-height: 40px;
        --td-padding-v: 12px;
        --padding-bottom: 40px;
    }

    .lista .state-layer-wrapper[b-5y26h5j44v],
    .lista .boton-add-all[b-5y26h5j44v] {
        height: 46px;
    }

    .lista .tabla-mejorada thead[b-5y26h5j44v] {
        display: none;
    }

    .lista .tabla-mejorada[b-5y26h5j44v],
    .lista .tabla-mejorada tbody[b-5y26h5j44v] {
        display: block;
        width: 100%;
    }

    /* Reset border-bottom heredado de filas de tabla */
    .lista .tabla-mejorada td[b-5y26h5j44v] {
        border-bottom: none;
    }

    /* ── TARJETA: grid 2 columnas ── */
    .lista .tabla-mejorada tbody tr[b-5y26h5j44v] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "td1  td1"
            "td2  td3"
            "td4  td5";
        gap: 0;
        padding: 16px 0;
        border-bottom: 1px dashed var(--gris-30);
    }

    /* ── TD1: Producto (fila completa) ── */
    .lista .tabla-mejorada .td1[b-5y26h5j44v] {
        grid-area: td1;
        text-align: left;
        padding: 0 0 12px 0;
        border-bottom: 1px solid var(--gris-30) !important;
    }

    /* ── TD2: Cantidad ── */
    .lista .tabla-mejorada .td2[b-5y26h5j44v] {
        grid-area: td2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 0;
    }

    .lista .tabla-mejorada .td2[b-5y26h5j44v]::before {
        content: 'CANTIDAD';
        font-size: 10px;
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    .lista .tabla-mejorada .td2 .td-content[b-5y26h5j44v] {
        margin: 0;
        width: var(--counter-width);
    }

    /* ── TD3: Stock ── */
    .lista .tabla-mejorada .td3[b-5y26h5j44v] {
        grid-area: td3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        padding: 12px 0;
    }

    .lista .tabla-mejorada .td3[b-5y26h5j44v]::before {
        content: 'STOCK';
        font-size: 10px;
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    /* ── TD4: Precio ── */
    .lista .tabla-mejorada .td4[b-5y26h5j44v] {
        grid-area: td4;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 0 0 0;
    }

    .lista .tabla-mejorada .td4[b-5y26h5j44v]::before {
        content: 'PRECIO';
        font-size: 10px;
        font-weight: 700;
        color: var(--gris-50);
        letter-spacing: 0.6px;
        line-height: 1;
    }

    .lista .tabla-mejorada .td4 .precio-content[b-5y26h5j44v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* ── TD5: Acciones ── */
    .lista .tabla-mejorada .td5[b-5y26h5j44v] {
        grid-area: td5;
        text-align: right;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 12px 0 0 0;
    }

    .lista .tabla-mejorada .td5 .acciones-content[b-5y26h5j44v] {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 16px;
    }

    /* Footer buttons: stack en móvil */
    .lista .buttons[b-5y26h5j44v] {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 12px;
    }


    .lista .buttons .help-button-container[b-5y26h5j44v], .lista .buttons .button-GGW-container[b-5y26h5j44v] {
        flex: none;
        width: 100%;
    }
}

/* ============================================= */
/* RESPONSIVE — MÓVIL PEQUEÑO (≤480px)            */
/* ============================================= */
@media (max-width: 480px) {
    .lista[b-5y26h5j44v] {
        --padding-lateral: 12px;
        --content-gap: 12px;
        --font-body: 13px;
        --product-img: 64px;
        --img-radius: 8px;
        --counter-width: 110px;
        --counter-height: 36px;
        --btn-height-sm: 38px;
        --padding-bottom: 30px;
    }

    .lista .titulo-text[b-5y26h5j44v] {
        padding: 0 30px;
    }
}

/* ============================================= */
/* ACCESIBILIDAD                                  */
/* ============================================= */
@media (prefers-reduced-motion: reduce) {
    .lista *[b-5y26h5j44v],
    .lista *[b-5y26h5j44v]::before,
    .lista *[b-5y26h5j44v]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
*[b-0meb52hool] {
    box-sizing: border-box;
}

body[b-0meb52hool] {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #333;
    margin: 0;
    padding: 0;
}

.container[b-0meb52hool] {
    max-width: 900px;
    margin-top: 150px;
    margin-bottom: 180px;
    text-align: center;
}

/* Encabezado con título y logo */
.form-header[b-0meb52hool] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra horizontalmente */
    gap: 50px;
    margin-bottom: 24px;
}

    .form-header h1[b-0meb52hool] {
        font-size: 48px;
        margin: 0;
    }

/* Logo como texto (puedes cambiarlo por <img> si lo prefieres) */
.logo[b-0meb52hool] {
    font-size: 2em;
    font-weight: bold;
}

.accent[b-0meb52hool] {
    color: #28a745; /* Letra en verde */
}

/* Formulario */
.login-form[b-0meb52hool] {
    max-width: 400px;
    margin: 0 auto;
}

    /* Inputs */
    .login-form input[b-0meb52hool] {
        width: 100%;
        padding: 12px;
        margin-bottom: 24px;
        border: 1px solid #f5f5f5;
        border-radius: 8px;
        background: #f5f5f5;
        font-size: 1em;
        font-family: inherit;
    }

        .login-form input[b-0meb52hool]::placeholder {
            color: #888;
        }

        .login-form input:focus[b-0meb52hool] {
            border: 2px solid #28a745;
            outline: none;
        }

    /* Campo de contraseña con toggle (ojito) */
    .login-form .password-field[b-0meb52hool] {
        position: relative;
        width: 100%;
    }

        .login-form .password-field input[b-0meb52hool] {
            padding-right: 48px;
        }

    .login-form .toggle-password[b-0meb52hool] {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(calc(-50% - 12px)); /* compensa el margin-bottom:24px del input */
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }

        .login-form .toggle-password:hover[b-0meb52hool] {
            opacity: 1;
        }

/* Checkbox Recuérdame — same style as PopupLoginPrecios */
.checkbox-option[b-0meb52hool] {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    cursor: pointer;
}

    .checkbox-option input[b-0meb52hool] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

.custom-check[b-0meb52hool] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .custom-check svg[b-0meb52hool] {
        display: block;
    }

.checkbox-option span:not(.custom-check)[b-0meb52hool] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #323332;
}

/* Botones */
.btn-group[b-0meb52hool] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.submit-btn[b-0meb52hool],
.outline-btn[b-0meb52hool] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 24px;
    text-decoration: none;
    padding: 7px 24px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.submit-btn[b-0meb52hool] {
    height: 54px;
    background: var(--primario, #3CAA36);
    color: var(--blanco, #fff);
    border: none;
}

    .submit-btn:hover[b-0meb52hool] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

    .submit-btn:disabled[b-0meb52hool] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.outline-btn[b-0meb52hool] {
    height: 54px;
    background: var(--white-background, #fff);
    color: var(--primario, #3CAA36);
    border: 1px solid var(--primario, #3CAA36);
}

    .outline-btn:hover[b-0meb52hool] {
        background-color: #3CAA36;
        color: #fff;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Enlace de contraseña olvidada */
.forgot[b-0meb52hool] {
    margin-top: 24px;
}

    .forgot a[b-0meb52hool] {
        color: #555;
        text-decoration: none;
        position: relative;
        background-image: linear-gradient(#3CAA36, #3CAA36);
        background-size: 0% 2px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background-size 0.3s ease-in-out, color 0.2s ease;
    }

        .forgot a:hover[b-0meb52hool] {
            text-decoration: none;
            color: #3CAA36;
            background-size: 100% 2px;
        }
/* /Components/Pages/Marcas.razor.rz.scp.css */
/* ============================================================
   Página /marcas — directorio A-Z de todas las marcas.
   Estética coherente con el resto del sitio (contenedor 1690px,
   padding lateral del sitio, Nunito Sans, tarjetas estilo ProductCard).
   ============================================================ */

.marcas-page[b-vorm3i0gtw] {
    max-width: 1690px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(16px, 6vw, 115px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
}

.marcas-header[b-vorm3i0gtw] {
    margin-bottom: clamp(16px, 2vw, 32px);
}

.marcas-title[b-vorm3i0gtw] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.08vw, 40px);
    color: #000000;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.marcas-intro[b-vorm3i0gtw] {
    font-size: clamp(14px, 0.9vw, 16px);
    color: #555555;
    max-width: 70ch;
    line-height: 1.5;
    margin: 0;
}

/* Índice A-Z (sticky) */
.marcas-index[b-vorm3i0gtw] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
    margin-bottom: 16px;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.marcas-index a[b-vorm3i0gtw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    color: #141718;
    text-decoration: none;
    background: #f5f5f5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.marcas-index a:hover[b-vorm3i0gtw] {
    background: var(--primario, #3CAA36);
    color: #ffffff;
}

/* Grupos por letra */
.marcas-grupo[b-vorm3i0gtw] {
    scroll-margin-top: 64px; /* compensa el índice sticky al saltar con el ancla */
    margin-bottom: clamp(24px, 3vw, 48px);
}

.marcas-grupo-letra[b-vorm3i0gtw] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.5vw, 26px);
    color: var(--primario, #3CAA36);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e0e0;
}

/* Rejilla de marcas */
.marcas-grid[b-vorm3i0gtw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw, 180px), 1fr));
    gap: clamp(12px, 1.5vw, 24px);
}

/* Tarjeta de marca (logo + nombre) */
.marca-card[b-vorm3i0gtw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.marca-card:hover[b-vorm3i0gtw] {
    transform: translateY(-4px);
    border-color: var(--primario, #3CAA36);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.marca-logo-wrap[b-vorm3i0gtw] {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-logo-wrap img[b-vorm3i0gtw] {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.marca-nombre[b-vorm3i0gtw] {
    width: 100%;
    font-size: clamp(12px, 0.83vw, 14px);
    font-weight: 600;
    color: #141718;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Skeleton de carga */
.marca-card-skeleton[b-vorm3i0gtw] {
    height: 120px;
    border-radius: 10px;
}

.marcas-empty[b-vorm3i0gtw] {
    padding: 40px 0;
    color: #757575;
}

/* Responsive */
@media (max-width: 768px) {
    .marcas-index[b-vorm3i0gtw] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .marcas-index[b-vorm3i0gtw]::-webkit-scrollbar {
        display: none;
    }
    .marcas-index a[b-vorm3i0gtw] {
        min-width: 28px;
        height: 28px;
        font-size: 13px;
    }
}
/* /Components/Pages/MedioAmbiente.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.medio-ambiente-page[b-r4g7klw1na] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --terciario: #85957E;
    --gris-40: #BDBDBD;
    --gris-60: #757575;
    --black-fonts-headings: #2D2E2E;
    --primary-10: #EBF6EB;

    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-md: clamp(25px, 2.6vw, 50px);
    --gap-lg: clamp(50px, 3.91vw, 75px);
    
    /* Tamaños de tarjetas */
    --card-sidebar-width: clamp(100px, 7.81vw, 150px);
    --card-padding: clamp(20px, 2.6vw, 50px);
    --card-section-gap: clamp(30px, 2.6vw, 50px);
    --card-gap: clamp(8px, 0.52vw, 10px);
    --card-border-radius: clamp(10px, 0.78vw, 15px);
    
    /* Tipografía fluida */
    --font-heading-xl: clamp(18px, 1.25vw, 24px);
    --font-heading-lg: clamp(16px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-title: clamp(14px, 0.83vw, 16px);
    
    /* Elementos específicos */
    --button-height: clamp(45px, 2.76vw, 53px);
    --button-padding: clamp(10px, 1.25vw, 24px);
    --check-icon-size: clamp(12px, 0.78vw, 15px);
    --badge-padding: clamp(4px, 0.36vw, 7px);
    
    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* FONDO VERDE SUPERIOR */
/* ============================================= */
.bg-verde-superior[b-r4g7klw1na] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(400px, 31.56vw, 606px);
    background-color: var(--primary-10);
    z-index: 0;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.ma-container[b-r4g7klw1na] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* GRUPO SUPERIOR (cabecera + intro + primera fila) */
/* ============================================= */
.ma-top-section[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.ma-header[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 10px;
    width: 100%;
}

.ma-titulo[b-r4g7klw1na] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.ma-titulo-text[b-r4g7klw1na] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.ma-back-arrow[b-r4g7klw1na] {
    position: absolute;
    left: 0;
    top: 19px;
    width: 24px;
    height: 24px;
}

.ma-back-arrow img[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* SECCIÓN INTRO */
/* ============================================= */
.ma-intro[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    gap: var(--card-section-gap);
    padding-top: 20px;
    padding-bottom: 50px;
}

.ma-intro-header[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gris-40);
}

.ma-heading[b-r4g7klw1na] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-xl);
    color: var(--negro);
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

.ma-subheading[b-r4g7klw1na] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ma-description[b-r4g7klw1na] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* FILAS DE TARJETAS */
/* ============================================= */
.ma-cards-row[b-r4g7klw1na] {
    display: flex;
    gap: clamp(50px, 5.21vw, 100px);
    width: 100%;
}

/* ============================================= */
/* TARJETAS */
/* ============================================= */
.ma-card[b-r4g7klw1na] {
    display: flex;
    flex: 1;
    border: 1px solid var(--terciario);
    border-radius: var(--card-border-radius);
    background-color: var(--blanco);
    overflow: hidden;
    min-width: 0;
}

/* Sidebar de la tarjeta */
.ma-card-sidebar[b-r4g7klw1na] {
    flex-shrink: 0;
    width: var(--card-sidebar-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
}

.ma-sidebar-green[b-r4g7klw1na] {
    background-color: var(--primario);
}

.ma-sidebar-image[b-r4g7klw1na] {
    padding: 0;
    overflow: hidden;
}

.ma-sidebar-image img[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-sidebar-certificado[b-r4g7klw1na] {
    padding: 0;
    overflow: hidden;
}

.ma-certificado-img[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-sidebar-fsc[b-r4g7klw1na] {
    padding: 0;
    overflow: hidden;
}

.ma-logo-fsc[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-sidebar-hp[b-r4g7klw1na] {
    padding: 0;
    overflow: hidden;
}

.ma-hp-logo[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Contenido de la tarjeta */
.ma-card-content[b-r4g7klw1na] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--card-section-gap);
    padding: var(--card-padding);
    min-width: 0;
}

.ma-card-title[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--gris-40);
}

.ma-card-heading[b-r4g7klw1na] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-lg);
    color: var(--negro);
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

/* ============================================= */
/* LISTAS CON CHECKS */
/* ============================================= */
.ma-list[b-r4g7klw1na] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.ma-list-item[b-r4g7klw1na] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.ma-list-item-indented[b-r4g7klw1na] {
    padding-left: clamp(40px, 4.17vw, 80px);
}

.ma-check-icon[b-r4g7klw1na] {
    flex-shrink: 0;
    width: var(--check-icon-size);
    height: var(--check-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(2px, 0.26vw, 5px);
}

.ma-check-icon svg[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
}

.ma-list-text[b-r4g7klw1na] {
    flex: 1;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.ma-list-text a[b-r4g7klw1na] {
    color: var(--black-fonts-headings);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.2s ease;
}

.ma-list-text a:hover[b-r4g7klw1na] {
    color: var(--primario);
    background-size: 100% 2px;
}

/* Badge ECO */
.ma-badge-eco[b-r4g7klw1na] {
    flex-shrink: 0;
    padding: clamp(1px, 0.1vw, 2px) var(--badge-padding);
    background-color: var(--primario);
    color: var(--blanco);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(8px, 0.52vw, 10px);
    text-align: center;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    line-height: normal;
    margin-top: clamp(2px, 0.26vw, 5px);
}

/* ============================================= */
/* BOTÓN */
/* ============================================= */
.ma-button[b-r4g7klw1na] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding: clamp(8px, 0.52vw, 10px) var(--button-padding);
    background-color: var(--blanco);
    color: var(--primario);
    border: 1px solid var(--primario);
    border-radius: clamp(4px, 0.31vw, 6px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.15px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: fit-content;
}

.ma-button:hover[b-r4g7klw1na] {
    background-color: var(--primario);
    color: var(--blanco);
}

/* ============================================= */
/* IMAGEN GRANDE */
/* ============================================= */
.ma-image-card[b-r4g7klw1na] {
    flex: 1;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    min-width: 0;
}

.ma-image-card img[b-r4g7klw1na] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--card-border-radius);
}

/* Link con underline animado */
.ma-link-underline[b-r4g7klw1na] {
    position: relative;
    text-decoration: none;
    color: var(--negro);
    cursor: pointer;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

.ma-link-underline:hover[b-r4g7klw1na] {
    color: var(--primario);
    background-size: 100% 2px;
}

/* ============================================= */
/* RESPONSIVE - TABLET (≤834px) */
/* ============================================= */
@media (max-width: 834px) {
    .medio-ambiente-page[b-r4g7klw1na] {
        --padding-lateral: 30px;
        --card-sidebar-width: 100px;
        --card-padding: 25px;
        --card-section-gap: 30px;
        --card-gap: 10px;
        --gap-sm: 10px;
        --gap-md: 20px;
        --gap-lg: 35px;
        --font-heading-xl: 20px;
        --font-heading-lg: 18px;
        --font-body: 14px;
        --font-title: 15px;
    }

    .bg-verde-superior[b-r4g7klw1na] {
        height: 450px;
    }

    .ma-intro[b-r4g7klw1na] {
        padding-bottom: 35px;
    }

    .ma-cards-row[b-r4g7klw1na] {
        flex-direction: column;
        gap: 30px;
    }

    .ma-card[b-r4g7klw1na] {
        width: 100%;
    }

    .ma-image-card[b-r4g7klw1na] {
        min-height: 300px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (≤393px) */
/* ============================================= */
@media (max-width: 393px) {
    .medio-ambiente-page[b-r4g7klw1na] {
        --padding-lateral: 16px;
        --card-sidebar-width: 0px;
        --card-padding: 16px;
        --card-section-gap: 20px;
        --card-gap: 10px;
        --gap-sm: 8px;
        --gap-md: 16px;
        --gap-lg: 24px;
        --font-heading-xl: 18px;
        --font-heading-lg: 16px;
        --font-body: 13px;
        --font-title: 14px;
        --button-height: 42px;
        --button-padding: 14px;
    }

    .bg-verde-superior[b-r4g7klw1na] {
        height: 280px;
    }

    .ma-titulo[b-r4g7klw1na] {
        padding: 16px 0;
    }

    .ma-back-arrow[b-r4g7klw1na] {
        top: 15px;
    }

    .ma-intro[b-r4g7klw1na] {
        padding-top: 16px;
        padding-bottom: 24px;
    }

    .ma-intro-header[b-r4g7klw1na] {
        gap: 12px;
        padding-bottom: 12px;
    }

    .ma-card-sidebar[b-r4g7klw1na] {
        display: none;
    }

    .ma-card[b-r4g7klw1na] {
        border-radius: 10px;
    }

    .ma-cards-row[b-r4g7klw1na] {
        gap: 16px;
    }

    .ma-list-item-indented[b-r4g7klw1na] {
        padding-left: 30px;
    }

    .ma-image-card[b-r4g7klw1na] {
        min-height: 200px;
    }

    .ma-button[b-r4g7klw1na] {
        width: 100%;
    }
}
/* /Components/Pages/MiCuenta.razor.rz.scp.css */
/* ============================================= */
/* MI CUENTA - CSS RESPONSIVE                    */
/* Siguiendo patrones de Home.razor con clamp()  */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS LOCALES                         */
/* ============================================= */
.mi-cuenta[b-qybgc0bi7v] {
    /* Paddings laterales - fluido hasta el max */
    --mc-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps entre secciones */
    --mc-gap-sections: clamp(30px, 1.3vw, 25px);

    /* Tipografía fluida */
    --mc-font-header: clamp(13px, 0.83vw, 16px);
    --mc-font-title: clamp(16px, 1.15vw, 22px);
    --mc-font-body: clamp(13px, 0.83vw, 16px);
    --mc-font-button: clamp(14px, 0.83vw, 16px);

    /* Line heights fluidos */
    --mc-lh-title: clamp(22px, 1.46vw, 28px);
    --mc-lh-body: clamp(20px, 1.25vw, 24px);

    /* Espaciados internos */
    --mc-submenu-gap: clamp(8px, 0.52vw, 10px);

    /* Botón */
    --mc-btn-width: clamp(280px, 30.83vw, 592px);
    --mc-btn-height: clamp(44px, 2.71vw, 52px);

    /* Padding inferior de página */
    --mc-padding-bottom: clamp(40px, 5.21vw, 100px);

    /* Arrow icon */
    --mc-arrow-size: clamp(18px, 1.25vw, 24px);

    /* Submenu columns */
    --mc-submenu-columns: 3;

    /* Accordion gaps (from Figma) */
    --mc-accordion-gap: clamp(35px, 3.65vw, 70px);
    --mc-accordion-wrapper-gap: clamp(40px, 4.17vw, 80px);
    --mc-accordion-inner-gap: clamp(6px, 0.52vw, 10px);
}

/* ============================================= */
/* ESTILOS GENERALES - CONTENEDOR PRINCIPAL      */
/* ============================================= */
.mi-cuenta[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: center;
    gap: var(--mc-gap-sections);
    padding: 0 var(--mc-padding-lateral) var(--mc-padding-bottom);
    position: relative;
    background-color: var(--blanco, #ffffff);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME - Contenedor del título + secciones     */
/* ============================================= */
.mi-cuenta .frame[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.3vw, 25px);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* ACCORDION WRAPPER (sections + button)         */
/* Gap: 80px (Figma) between sections and button */
/* ============================================= */
.accordion-wrapper[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-accordion-wrapper-gap);
    width: 100%;
}

/* ============================================= */
/* ACCORDION SECTIONS (between each item)        */
/* Gap: 70px (Figma) between accordion items     */
/* ============================================= */
.accordion-sections[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mc-accordion-gap);
    width: 100%;
}

/* ============================================= */
/* HEADER / TÍTULO                               */
/* ============================================= */
.mi-cuenta .titulo[b-qybgc0bi7v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.04vw, 20px) 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.mi-cuenta h2[b-qybgc0bi7v] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--mc-font-header);
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

.mi-cuenta .iconos[b-qybgc0bi7v] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: var(--mc-arrow-size);
    height: var(--mc-arrow-size);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mi-cuenta .iconos:hover[b-qybgc0bi7v] {
    opacity: 0.6;
}

/* ============================================= */
/* SECCIONES ACCORDION                           */
/* ============================================= */
.acount-item[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    gap: var(--mc-accordion-inner-gap);
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Header row: title + arrow, side by side */
.acount-item-header[b-qybgc0bi7v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    cursor: pointer;
    width: 100%;
}

.title-section[b-qybgc0bi7v] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E);
    font-size: var(--mc-font-title);
    line-height: var(--mc-lh-title);
    letter-spacing: 0;
    margin: 0;
    padding: 0;
}

.content-section[b-qybgc0bi7v] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings, #2D2E2E);
    font-size: var(--mc-font-body);
    line-height: var(--mc-lh-body);
    letter-spacing: 0.5px;
    cursor: pointer;
    margin: 0;
}

/* Arrow container */
.arrow-container[b-qybgc0bi7v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 1.46vw, 28px);
    height: clamp(20px, 1.46vw, 28px);
    flex-shrink: 0;
}

/* Flecha del accordion */
.acount-item .arrow_image[b-qybgc0bi7v] {
    width: clamp(12px, 0.83vw, 16px);
    height: clamp(12px, 0.83vw, 16px);
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: pointer;
    transform: rotate(0deg);
}

.acount-item.open .arrow_image[b-qybgc0bi7v] {
    transform: rotate(90deg);
}

/* Línea divisoria */
.acount-item .divider[b-qybgc0bi7v] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0;
}

.acount-item.open .divider[b-qybgc0bi7v] {
    border-top: 3px solid var(--primario, #3CAA36);
}

.divider[b-qybgc0bi7v] {
    border-radius: 10px;
}

/* ============================================= */
/* SUBMENU (expandible) - Figma specs            */
/* bg: #F5F5F5, rounded: 15px, padding: 50px     */
/* 3 flex columns, gap 25px, shadow               */
/* ============================================= */
.submenu[b-qybgc0bi7v] {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.acount-item.open .submenu[b-qybgc0bi7v] {
    display: flex;
    gap: clamp(16px, 1.3vw, 25px);
    align-items: flex-start;
    padding: clamp(24px, 2.6vw, 50px);
    background-color: var(--gris-10, #F5F5F5);
    border-radius: clamp(8px, 0.78vw, 15px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin-top: clamp(10px, 1.04vw, 20px);
}

/* Each column in the submenu (equal width) */
.submenu li[b-qybgc0bi7v] {
    list-style: none;
    flex: 1 0 0;
    min-width: 0;
}

/* We use CSS columns approach via grid for flowing items into 3 cols */
.acount-item.open .submenu[b-qybgc0bi7v] {
    display: grid;
    grid-template-columns: repeat(var(--mc-submenu-columns), 1fr);
    grid-auto-rows: auto;
    row-gap: clamp(16px, 1.3vw, 25px);
    column-gap: clamp(16px, 1.3vw, 25px);
}

.submenu li[b-qybgc0bi7v] {
    flex: none;
}

.submenu a[b-qybgc0bi7v] {
    display: flex;
    align-items: flex-start;
    gap: clamp(6px, 0.52vw, 10px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--mc-font-body);
    line-height: var(--mc-lh-body);
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--black-fonts-headings, #2D2E2E);
    cursor: pointer;
    transition: color 0.2s ease;
    text-transform: uppercase;
    padding: 0;
    position: relative;
}

.submenu a:hover[b-qybgc0bi7v] {
    color: var(--primario, #3CAA36);
}

/* Small arrow chevron before each submenu item */
.submenu a[b-qybgc0bi7v]::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: clamp(5px, 0.36vw, 7px);
    height: clamp(10px, 0.73vw, 14px);
    margin-top: clamp(3px, 0.26vw, 5px);
    background-image: url("/images/images/integra/arrow_skinny_black.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?"                         */
/* ============================================= */
.mi-cuenta .div-wrapper[b-qybgc0bi7v] {
    display: flex;
    flex-direction: column;
    width: var(--mc-btn-width);
    max-width: 100%;
    height: var(--mc-btn-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco, #ffffff);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro, #ECC61B);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mi-cuenta .state-layer[b-qybgc0bi7v] {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    width: 100%;
}

.mi-cuenta .label-text-3[b-qybgc0bi7v] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: var(--negro, #212121);
    font-size: var(--mc-font-button);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: clamp(20px, 1.25vw, 24px);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.mi-cuenta .div-wrapper:hover[b-qybgc0bi7v] {
    background-color: var(--alternativo-oscuro, #ECC61B);
    cursor: pointer;
}

.mi-cuenta .div-wrapper:hover .label-text-3[b-qybgc0bi7v] {
    color: var(--blanco, #ffffff);
}

/* ============================================= */
/* ESTADOS: LOADING Y ACCESS DENIED              */
/* ============================================= */
.loading-container[b-qybgc0bi7v] {
    padding: clamp(24px, 2.08vw, 40px);
    text-align: center;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--mc-font-body);
    color: var(--black-fonts-headings, #2D2E2E);
}

.access-denied-container[b-qybgc0bi7v] {
    padding: clamp(24px, 2.08vw, 40px);
    text-align: center;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--mc-font-body);
    color: var(--black-fonts-headings, #2D2E2E);
}

/* ============================================= */
/* ALERT WARNING                                 */
/* ============================================= */
.mi-cuenta .alert-warning[b-qybgc0bi7v] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--mc-font-body);
    line-height: var(--mc-lh-body);
    border-radius: 6px;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .mi-cuenta[b-qybgc0bi7v] {
        --mc-padding-lateral: 30px;
        --mc-gap-sections: 30px;
        --mc-font-header: 15px;
        --mc-font-title: 19px;
        --mc-font-body: 14px;
        --mc-font-button: 15px;
        --mc-lh-title: 26px;
        --mc-lh-body: 22px;
        --mc-btn-width: 420px;
        --mc-btn-height: 48px;
        --mc-arrow-size: 22px;
        --mc-padding-bottom: 60px;
        --mc-submenu-columns: 2;
        --mc-accordion-gap: 45px;
        --mc-accordion-wrapper-gap: 50px;
        --mc-accordion-inner-gap: 8px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .mi-cuenta[b-qybgc0bi7v] {
        --mc-padding-lateral: 16px;
        --mc-gap-sections: 25px;
        --mc-font-header: 14px;
        --mc-font-title: 17px;
        --mc-font-body: 13px;
        --mc-font-button: 14px;
        --mc-lh-title: 24px;
        --mc-lh-body: 20px;
        --mc-btn-width: 100%;
        --mc-btn-height: 46px;
        --mc-arrow-size: 20px;
        --mc-padding-bottom: 50px;
        --mc-submenu-columns: 2;
        --mc-accordion-gap: 35px;
        --mc-accordion-wrapper-gap: 40px;
        --mc-accordion-inner-gap: 6px;
    }

    /* En móvil el botón ocupa todo el ancho */
    .mi-cuenta .div-wrapper[b-qybgc0bi7v] {
        width: 100%;
        max-width: 400px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .mi-cuenta[b-qybgc0bi7v] {
        --mc-padding-lateral: 12px;
        --mc-gap-sections: 20px;
        --mc-font-header: 13px;
        --mc-font-title: 16px;
        --mc-font-body: 12px;
        --mc-font-button: 13px;
        --mc-lh-title: 22px;
        --mc-lh-body: 18px;
        --mc-btn-height: 44px;
        --mc-arrow-size: 18px;
        --mc-padding-bottom: 40px;
        --mc-submenu-columns: 1;
        --mc-accordion-gap: 25px;
        --mc-accordion-wrapper-gap: 30px;
        --mc-accordion-inner-gap: 5px;
    }

    .mi-cuenta .div-wrapper[b-qybgc0bi7v] {
        max-width: 100%;
    }

    /* Submenu en una sola columna en móvil pequeño */
    .acount-item.open .submenu[b-qybgc0bi7v] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MiEquipo.razor.rz.scp.css */
/* ============================================= */
/* MiEquipo Page - Responsive CSS                */
/* Based on Figma designs: desktop 1920px &      */
/* mobile 393px. Using same responsive approach   */
/* as Home.razor.css (clamp, CSS vars, MQs).     */
/* ============================================= */

/* ============================================= */
/* CSS CUSTOM PROPERTIES                         */
/* ============================================= */
.equipo-page[b-82s18gf2sg] {
    /* Layout */
    --padding-lateral: clamp(30px, 6vw, 115px);
    --padding-bottom: clamp(30px, 5.21vw, 100px);
    --gap-sections: clamp(20px, 1.56vw, 30px);
    --gap-content: clamp(20px, 2.6vw, 50px);
    --gap-columns: clamp(30px, 5.21vw, 100px);
    --gap-cards: clamp(20px, 2.6vw, 50px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-xs: clamp(5px, 0.52vw, 10px);

    /* Members */
    --member-img-width: clamp(140px, 12.15vw, 233px);
    --member-img-height: clamp(210px, 18.23vw, 350px);
    --member-info-gap: clamp(20px, 2.08vw, 40px);
    --member-card-gap: clamp(20px, 2.6vw, 50px);

    /* Delegation */
    --deleg-img-width: clamp(250px, 26.2vw, 503px);
    --deleg-img-height: clamp(180px, 18.39vw, 353px);
    --deleg-padding: clamp(20px, 2.6vw, 50px);

    /* CTA */
    --cta-width: clamp(280px, 30.83vw, 592px);
    --cta-height: clamp(40px, 2.71vw, 52px);

    /* Typography */
    --font-title: clamp(14px, 1.15vw, 22px);
    --font-name: 16px;
    --font-body: clamp(12px, 0.73vw, 14px);
    --font-contact: clamp(14px, 0.83vw, 16px);
    --font-division: clamp(12px, 0.73vw, 14px);
    --font-header: 16px;

    /* Icons */
    --icon-size: clamp(15px, 1.25vw, 24px);

    /* Border radius */
    --radius-photo: 15px;
    --radius-deleg: clamp(10px, 0.78vw, 15px);
    --radius-cta: 6px;

    /* Gestor section width ratio on desktop (515 / 1690 ≈ 30.47%) */
    --gestor-width: clamp(300px, 30.47%, 515px);
}

/* ============================================= */
/* PAGE CONTAINER                                */
/* ============================================= */
.equipo-page[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sections);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    background-color: #ffffff;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ============================================= */
/* HEADER                                        */
/* ============================================= */
.equipo-header[b-82s18gf2sg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    width: 100%;
    position: relative;
}

.equipo-back-arrow[b-82s18gf2sg] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipo-back-arrow img[b-82s18gf2sg] {
    width: 100%;
    height: 100%;
}

.equipo-title[b-82s18gf2sg] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-header);
    line-height: normal;
    letter-spacing: 0;
}

/* ============================================= */
/* ALERT / PERMISSIONS                           */
/* ============================================= */
.equipo-alert[b-82s18gf2sg] {
    width: 100%;
    padding: 20px;
    text-align: center;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
}

/* ============================================= */
/* BODY CONTAINER                                */
/* ============================================= */
.equipo-body[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-content);
    width: 100%;
}

/* ============================================= */
/* EQUIPO CONTENT (Two-column: Gestor + Comercial) */
/* ============================================= */
.equipo-content[b-82s18gf2sg] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-columns);
    width: 100%;
}

/* ============================================= */
/* GESTOR SECTION (left column)                  */
/* ============================================= */
.gestor-section[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-content);
    width: var(--gestor-width);
    flex-shrink: 0;
}

/* ============================================= */
/* COMERCIAL SECTION (right column)              */
/* ============================================= */
.comercial-section[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-content);
    flex: 1;
    min-width: 0;
}

/* ============================================= */
/* SECTION HEADING (section title + border)      */
/* ============================================= */
.section-heading[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #ABABAB;
}

.section-heading-text[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #2D2E2E;
    font-size: var(--font-title);
    line-height: 28px;
    letter-spacing: 0;
}

/* ============================================= */
/* MEMBER CARD (shared between gestor & comercial) */
/* ============================================= */
.member-card[b-82s18gf2sg] {
    display: flex;
    align-items: flex-start;
    gap: var(--member-card-gap);
    width: 100%;
}

.member-photo[b-82s18gf2sg] {
    width: var(--member-img-width);
    height: var(--member-img-height);
    object-fit: cover;
    border-radius: var(--radius-photo);
    flex-shrink: 0;
}

/* ============================================= */
/* MEMBER INFO                                   */
/* ============================================= */
.member-info[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--member-info-gap);
    flex: 1;
    min-width: 0;
}

.member-details[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
}

.member-name[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-name);
    letter-spacing: 0.5px;
    line-height: 24px;
    word-wrap: break-word;
}

.member-desc[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #757575;
    font-size: var(--font-body);
    letter-spacing: 0.25px;
    line-height: 20px;
    margin: 0;
    word-wrap: break-word;
    max-width: clamp(160px, 12.08vw, 232px);
}

.member-division[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: var(--font-division);
    letter-spacing: 0.25px;
    line-height: 20px;
}

/* ============================================= */
/* CONTACT INFO (email, phone)                   */
/* ============================================= */
.member-contact[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.contact-row[b-82s18gf2sg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-icon[b-82s18gf2sg] {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.contact-text[b-82s18gf2sg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--font-contact);
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
    text-decoration: none;
}

/* ============================================= */
/* COMERCIAL LIST (multiple cards)               */
/* ============================================= */
.comercial-list[b-82s18gf2sg] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap-cards);
    width: 100%;
}

/* Each comercial card takes ~half the row (minus gap) on desktop */
.comercial-section .member-card[b-82s18gf2sg] {
    flex: 0 1 calc(50% - var(--gap-cards) / 2);
    min-width: 300px;
}

/* ============================================= */
/* EMPTY STATE                                   */
/* ============================================= */
.equipo-empty[b-82s18gf2sg] {
    width: 100%;
    padding: 20px;
    text-align: center;
    color: #757575;
}

/* ============================================= */
/* DELEGACION CARD                               */
/* ============================================= */
.delegacion-card[b-82s18gf2sg] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-content);
    padding: var(--deleg-padding);
    width: 100%;
    background-color: #F5F5F5;
    border-radius: var(--radius-deleg);
    box-sizing: border-box;
}

.delegacion-photo[b-82s18gf2sg] {
    width: var(--deleg-img-width);
    height: var(--deleg-img-height);
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.delegacion-info[b-82s18gf2sg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--member-info-gap);
    flex: 1;
    min-width: 0;
}

/* ============================================= */
/* CTA BUTTON                                    */
/* ============================================= */
.cta-btn[b-82s18gf2sg] {
    display: flex;
    justify-content: center;
    width: 100%;
    /* Extra separation: gap already gives clamp(20px,1.56vw,30px),
       adding this reaches the desired clamp(50px,3.9vw,75px) total */
    margin-top: clamp(30px, 2.34vw, 45px);
}

.cta-btn-link[b-82s18gf2sg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cta-width);
    height: var(--cta-height);
    background-color: #ffffff;
    border: 1px solid #ECC61B;
    border-radius: var(--radius-cta);
    cursor: pointer;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: #212121;
    font-size: var(--font-name);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-btn-link:hover[b-82s18gf2sg] {
    background-color: #ECC61B;
    color: #ffffff;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
@media (max-width: 1024px) {
    .equipo-page[b-82s18gf2sg] {
        --padding-lateral: clamp(20px, 4vw, 60px);
        --gap-columns: clamp(20px, 3vw, 50px);
        --member-img-width: clamp(130px, 18vw, 200px);
        --member-img-height: clamp(195px, 27vw, 300px);
        --deleg-img-width: clamp(200px, 35vw, 400px);
        --deleg-img-height: clamp(150px, 25vw, 280px);
        --member-card-gap: clamp(15px, 2vw, 30px);
        --gestor-width: 40%;
    }

    /* On tablet, comercial cards take full width due to reduced space */
    .comercial-section .member-card[b-82s18gf2sg] {
        flex: none;
        width: 100%;
        min-width: 0;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE (max-width: 768px)        */
/* Figma mobile: 393px, 30px padding, stacked    */
/* ============================================= */
@media (max-width: 768px) {
    .equipo-page[b-82s18gf2sg] {
        --padding-lateral: 30px;
        --padding-bottom: 30px;
        --gap-sections: 30px;
        --gap-content: 20px;
        --gap-columns: 20px;
        --gap-cards: 20px;
        --gap-sm: 10px;
        --member-card-gap: 20px;
        --member-info-gap: 20px;
        --deleg-padding: 20px;
        --icon-size: 15px;
        --font-title: 16px;
        --font-name: 16px;
        --font-body: 12px;
        --font-contact: 14px;
        --font-division: 12px;
        --radius-photo: 15px;
        --cta-height: 40px;
    }

    /* Stack everything into single column */
    .equipo-content[b-82s18gf2sg] {
        flex-direction: column;
        gap: var(--gap-content);
    }

    .gestor-section[b-82s18gf2sg] {
        width: 100%;
    }

    .comercial-section[b-82s18gf2sg] {
        width: 100%;
    }

    /* Comercial cards stack vertically on mobile */
    .comercial-list[b-82s18gf2sg] {
        flex-direction: column;
    }

    .comercial-section .member-card[b-82s18gf2sg] {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    /* Section heading */
    .section-heading[b-82s18gf2sg] {
        border-bottom: 1px solid #212121;
    }

    .section-heading-text[b-82s18gf2sg] {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.15px;
    }

    /* Member cards - image and info side by side, equal width */
    .member-card[b-82s18gf2sg] {
        gap: var(--member-card-gap);
    }

    .member-photo[b-82s18gf2sg] {
        width: 0;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        aspect-ratio: 233 / 350;
    }

    .member-info[b-82s18gf2sg] {
        flex: 1 1 0;
        min-width: 0;
    }

    .member-name[b-82s18gf2sg] {
        font-weight: 600;
        letter-spacing: 0.15px;
    }

    .member-desc[b-82s18gf2sg] {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.4px;
    }

    .member-division[b-82s18gf2sg] {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.4px;
    }

    .contact-text[b-82s18gf2sg] {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.25px;
    }

    /* Delegacion card - stack vertically */
    .delegacion-card[b-82s18gf2sg] {
        flex-direction: column;
        gap: var(--gap-sm);
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    .delegacion-photo[b-82s18gf2sg] {
        width: 100%;
        height: auto;
        aspect-ratio: 503 / 353;
        border-radius: 10px;
    }

    .delegacion-info[b-82s18gf2sg] {
        gap: var(--member-info-gap);
    }

    /* CTA button full width on mobile */
    .cta-btn-link[b-82s18gf2sg] {
        width: 100%;
        font-size: 14px;
        letter-spacing: 0.1px;
        line-height: 20px;
    }
}

/* ============================================= */
/* RESPONSIVE - SMALL MOBILE (max-width: 480px)  */
/* ============================================= */
@media (max-width: 480px) {
    .equipo-page[b-82s18gf2sg] {
        --padding-lateral: 16px;
        --padding-bottom: 24px;
        --gap-sections: 24px;
        --gap-content: 16px;
        --member-card-gap: 12px;
        --member-info-gap: 16px;
    }

    .member-name[b-82s18gf2sg] {
        font-size: 14px;
        line-height: 20px;
    }

    .contact-text[b-82s18gf2sg] {
        font-size: 12px;
        line-height: 18px;
    }
}
/* /Components/Pages/MisAlbaranes.razor.rz.scp.css */
/* ============================================= */
/* MIS ALBARANES - CSS 100% RESPONSIVE           */
/* Siguiendo patron Home.razor con clamp()        */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS RESPONSIVE                       */
/* ============================================= */
.mis-albaranes[b-ibjglu4rhw] {
    /* Paddings laterales - fluido */
    --ma-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps entre secciones */
    --ma-gap-sections: clamp(30px, 3.91vw, 75px);
    --ma-gap-content: clamp(16px, 1.56vw, 30px);

    /* Form area */
    --ma-form-padding: clamp(20px, 3.91vw, 75px);
    --ma-form-radius: clamp(10px, 0.78vw, 15px);
    --ma-form-cols-gap: clamp(20px, 5.21vw, 100px);
    --ma-form-section-padding: clamp(24px, 2.6vw, 50px);

    /* Tipografia fluida */
    --ma-font-page-title: clamp(13px, 0.83vw, 16px);
    --ma-font-section-title: clamp(20px, 1.67vw, 32px);
    --ma-font-form-title: clamp(16px, 1.15vw, 22px);
    --ma-font-form-label: clamp(14px, 1.15vw, 22px);
    --ma-font-input: clamp(14px, 0.94vw, 18px);
    --ma-font-body: clamp(13px, 0.83vw, 16px);
    --ma-font-small: clamp(10px, 0.63vw, 12px);

    /* Input */
    --ma-input-padding: clamp(12px, 0.89vw, 17px);
    --ma-input-radius: 6px;

    /* Botones */
    --ma-btn-height: clamp(42px, 2.71vw, 52px);
    --ma-btn-font: clamp(13px, 0.83vw, 16px);
    --ma-help-btn-width: clamp(280px, 30.83vw, 592px);

    /* Iconos */
    --ma-icon-size: clamp(18px, 1.25vw, 24px);

    /* Tabla */
    --ma-table-font: clamp(13px, 0.83vw, 16px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                           */
/* ============================================= */
.mis-albaranes[b-ibjglu4rhw] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ma-gap-sections);
    padding: 0 var(--ma-padding-lateral) clamp(40px, 5.21vw, 100px);
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ============================================= */
/* FRAME GENERICO (columna flex)                  */
/* ============================================= */
.mis-albaranes .frame[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TITULO DE PAGINA (MIS ALBARANES + flecha)      */
/* ============================================= */
.mis-albaranes .titulo[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
}

.mis-albaranes h2[b-ibjglu4rhw] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--ma-font-page-title);
    letter-spacing: 0;
    line-height: normal;
}

.mis-albaranes .iconos[b-ibjglu4rhw] {
    position: absolute;
    width: var(--ma-icon-size);
    height: var(--ma-icon-size);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ============================================= */
/* SUBTITULO + BOTON BUSCAR                       */
/* ============================================= */
.mis-albaranes .div[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: clamp(10px, 1.61vw, 40px);
    padding-top: var(--ma-form-section-padding);
}

.mis-albaranes .text-wrapper[b-ibjglu4rhw] {
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--ma-font-section-title);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: 1.25;
    font-style: var(--headline-large-font-style);
}

/* ============================================= */
/* BOTON BUSCAR (verde)                           */
/* ============================================= */
.mis-albaranes .boton[b-ibjglu4rhw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ma-btn-height);
    padding: 0 clamp(16px, 1.25vw, 24px);
    background-color: var(--primario);
    border-radius: var(--ma-input-radius);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.mis-albaranes .boton:hover[b-ibjglu4rhw] {
    background-color: #80C87C;
}

.mis-albaranes .boton .state-layer[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    width: auto;
}

.mis-albaranes .boton .label-text[b-ibjglu4rhw] {
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--ma-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
}

.mis-albaranes .boton .spinner-border[b-ibjglu4rhw] {
    color: var(--blanco);
    width: 1em;
    height: 1em;
}

/* ============================================= */
/* AREA DE FORMULARIO (fondo gris)                */
/* ============================================= */
.mis-albaranes .frame-2[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;                     /* el espaciado lo gestionan los padding de cada sección */
    padding: var(--ma-form-padding);
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: var(--ma-form-radius);
    box-sizing: border-box;
}

/* ============================================= */
/* SECCION DE FILTRO (pedido / albaran / fecha)   */
/* ============================================= */

/* Primera seccion: borde inferior dashed */
    .mis-albaranes .frame-3[b-ibjglu4rhw] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(12px, 1.04vw, 20px);
        width: 100%;
    }

/* Seccion intermedia: padding top y bottom + borde inferior */
    .mis-albaranes .frame-8[b-ibjglu4rhw] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding-top: var(--ma-form-section-padding);
    }

/* Ultima seccion: solo padding top, sin borde */
.mis-albaranes .frame-9[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.04vw, 20px);
    width: 100%;
    padding-top: var(--ma-form-section-padding);
}

/* Titulo de seccion de filtro */
.mis-albaranes .text-wrapper-2[b-ibjglu4rhw] {
    color: var(--black-fonts-headings);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--ma-font-form-title);
    line-height: 1.27;
}

/* ============================================= */
/* FILA DESDE / HASTA (2 columnas)                */
/* ============================================= */
.mis-albaranes .frame-4[b-ibjglu4rhw] {
    display: flex;
    align-items: flex-start;
    gap: var(--ma-form-cols-gap);
    width: 100%;
}

/* Columna individual (DESDE o HASTA) */
.mis-albaranes .frame-5[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 0.78vw, 15px);
    flex: 1;
    min-width: 0;
}

/* Label DESDE / HASTA + linea decorativa */
.mis-albaranes .frame-6[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.04vw, 20px);
    width: 100%;
    border-bottom: 1px solid var(--grisgris-30);
    padding-bottom: 2px;
}

.mis-albaranes .text-wrapper-3[b-ibjglu4rhw] {
    color: var(--black-fonts-headings);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--ma-font-form-label);
    line-height: 1.27;
}

/* Contenedor del input */
.mis-albaranes .frame-7[b-ibjglu4rhw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* ============================================= */
/* INPUTS (texto y fecha)                         */
/* ============================================= */
/* Estilos para <input> directos en el componente */
.mis-albaranes .input[b-ibjglu4rhw] {
    width: 100%;
    padding: var(--ma-input-padding);
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: var(--ma-input-radius);
    color: var(--negro);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--ma-font-input);
    font-weight: 300;
    line-height: normal;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mis-albaranes .input[b-ibjglu4rhw]::placeholder {
    color: var(--grisgris-50);
    font-weight: 300;
}

.mis-albaranes .input:focus[b-ibjglu4rhw] {
    border-color: var(--primario);
    outline: none;
}

/* ::deep para inputs dentro de child components (InputNumero, InputDate) */
.mis-albaranes .frame-7[b-ibjglu4rhw]  input,
.mis-albaranes .frame-7[b-ibjglu4rhw]  .input {
    width: 100%;
    padding: var(--ma-input-padding);
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: var(--ma-input-radius);
    color: var(--negro);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--ma-font-input);
    font-weight: 300;
    line-height: normal;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mis-albaranes .frame-7[b-ibjglu4rhw]  input::placeholder,
.mis-albaranes .frame-7[b-ibjglu4rhw]  .input::placeholder {
    color: var(--grisgris-50);
    font-weight: 300;
}

.mis-albaranes .frame-7[b-ibjglu4rhw]  input:focus,
.mis-albaranes .frame-7[b-ibjglu4rhw]  .input:focus {
    border-color: var(--primario);
    outline: none;
}

/* ============================================= */
/* MENSAJES (alertas)                             */
/* ============================================= */
.mis-albaranes .alert[b-ibjglu4rhw] {
    width: 100%;
    border-radius: var(--ma-input-radius);
    font-size: var(--ma-font-body);
}

.mis-albaranes .alert p[b-ibjglu4rhw] {
    margin-bottom: 0;
}

/* ============================================= */
/* TABLA DE RESULTADOS                            */
/* ============================================= */
.mis-albaranes .tabla-wrapper[b-ibjglu4rhw] {
    width: 100%;
    border-radius: 0;
    padding: 0;
    margin-top: clamp(50px, 4.05vw, 85px);
}

.mis-albaranes .tabla-container[b-ibjglu4rhw] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mis-albaranes .tabla-mejorada[b-ibjglu4rhw] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--ma-table-font);
}

/* Cabecera */
.mis-albaranes .tabla-mejorada thead tr[b-ibjglu4rhw] {
    border-bottom: 2px solid #000000;
}

.mis-albaranes .tabla-mejorada th[b-ibjglu4rhw] {
    padding: clamp(8px, 0.52vw, 10px) clamp(6px, 0.52vw, 10px);
    font-weight: 700;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    font-size: var(--ma-table-font);
    vertical-align: bottom;
    padding-bottom: clamp(12px, 1.04vw, 20px);
}

.mis-albaranes .tabla-mejorada th .subheader[b-ibjglu4rhw] {
    font-size: var(--ma-font-small);
    font-weight: 400;
    color: var(--grisgris-50);
    letter-spacing: 0.4px;
}

/* Celdas de datos */
.mis-albaranes .tabla-mejorada td[b-ibjglu4rhw] {
    padding: clamp(8px, 0.52vw, 10px) clamp(6px, 0.52vw, 10px);
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.mis-albaranes .tabla-mejorada tbody tr[b-ibjglu4rhw] {
    border-bottom: 1px dashed var(--grisgris-30);
}

.mis-albaranes .tabla-mejorada tbody tr:last-child[b-ibjglu4rhw] {
    border-bottom: 1px dashed var(--grisgris-30);
}

/* Anchos de columna proporcionales */
.mis-albaranes .tabla-mejorada .th1[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td1[b-ibjglu4rhw] {
    text-align: left;
    width: 10%;
    min-width: 100px;
}

.mis-albaranes .tabla-mejorada .th2[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td2[b-ibjglu4rhw] {
    text-align: center;
    width: 12%;
    min-width: 90px;
}

.mis-albaranes .tabla-mejorada .th3[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td3[b-ibjglu4rhw] {
    text-align: center;
    width: 12%;
    min-width: 90px;
}

.mis-albaranes .tabla-mejorada .th4[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td4[b-ibjglu4rhw] {
    text-align: center;
    width: 30%;
    min-width: 180px;
}

.mis-albaranes .tabla-mejorada .th5[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td5[b-ibjglu4rhw] {
    text-align: right;
    width: 12%;
    min-width: 90px;
}

.mis-albaranes .tabla-mejorada .th6[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td6[b-ibjglu4rhw] {
    text-align: right;
    width: 12%;
    min-width: 90px;
}

.mis-albaranes .tabla-mejorada .th7[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td7[b-ibjglu4rhw] {
    width: 8%;
    min-width: 50px;
}

.mis-albaranes .tabla-mejorada .td5[b-ibjglu4rhw],
.mis-albaranes .tabla-mejorada .td6[b-ibjglu4rhw] {
    font-weight: 700;
}

/* Contenedor de acciones en la celda */
.mis-albaranes .tabla-mejorada .td7 .td-content[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.3vw, 25px);
}

.mis-albaranes .img[b-ibjglu4rhw] {
    width: var(--ma-icon-size);
    height: var(--ma-icon-size);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mis-albaranes .img:hover[b-ibjglu4rhw] {
    opacity: 0.6;
}

/* ============================================= */
/* BOTON AYUDA (¿Te ayudamos?)                    */
/* ============================================= */
.mis-albaranes .state-layer-wrapper[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ma-help-btn-width);
    max-width: 100%;
    height: var(--ma-btn-height);
    background-color: var(--blanco);
    border-radius: var(--ma-input-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.mis-albaranes .state-layer-wrapper:hover[b-ibjglu4rhw] {
    background-color: var(--alternativo-oscuro);
}

.mis-albaranes .state-layer-wrapper:hover .label-text-2[b-ibjglu4rhw] {
    color: var(--blanco);
}

.mis-albaranes .state-layer-wrapper .state-layer[b-ibjglu4rhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    width: 100%;
    height: 100%;
}

.mis-albaranes .label-text-2[b-ibjglu4rhw] {
    text-decoration: none;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--ma-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* PAGE BLOCKER (overlay loading)                 */
/* ============================================= */
.page-blocker[b-ibjglu4rhw] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-ibjglu4rhw] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* MOBILE TABLE: Labels para layout card          */
/* ============================================= */
.mis-albaranes .tabla-mejorada td[b-ibjglu4rhw]::before {
    display: none;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)        */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .mis-albaranes[b-ibjglu4rhw] {
        --ma-padding-lateral: 30px;
        --ma-gap-sections: 40px;
        --ma-gap-content: 20px;
        --ma-form-padding: 30px;
        --ma-form-cols-gap: 30px;
        --ma-form-section-padding: 30px;
        --ma-font-section-title: 24px;
        --ma-font-form-title: 18px;
        --ma-font-form-label: 18px;
        --ma-font-input: 15px;
        --ma-input-padding: 14px;
        --ma-help-btn-width: 400px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MOVIL (max-width: 768px)          */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .mis-albaranes[b-ibjglu4rhw] {
        --ma-padding-lateral: 16px;
        --ma-gap-sections: 30px;
        --ma-gap-content: 16px;
        --ma-form-padding: 20px;
        --ma-form-cols-gap: 16px;
        --ma-form-section-padding: 20px;
        --ma-font-page-title: 13px;
        --ma-font-section-title: 20px;
        --ma-font-form-title: 16px;
        --ma-font-form-label: 15px;
        --ma-font-input: 14px;
        --ma-font-body: 13px;
        --ma-input-padding: 12px;
        --ma-btn-height: 44px;
        --ma-btn-font: 13px;
        --ma-icon-size: 20px;
        --ma-help-btn-width: 100%;
        --ma-table-font: 13px;
    }

    /* Subtitulo + boton: stack en movil */
    .mis-albaranes .div[b-ibjglu4rhw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mis-albaranes .boton[b-ibjglu4rhw] {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Formulario: pares DESDE/HASTA en columna */
    .mis-albaranes .frame-4[b-ibjglu4rhw] {
        flex-direction: column;
        gap: var(--ma-form-cols-gap);
        align-items: stretch;
    }

    /* Botón ayuda: full width en móvil (override de buttons.css global) */
    .mis-albaranes .help-button-container[b-ibjglu4rhw] {
        width: 100%;
    }

    .mis-albaranes .btn-help[b-ibjglu4rhw] {
        width: 100%;
    }

    /* ========== TABLA CARD LAYOUT ========== */
    .mis-albaranes .tabla-mejorada thead[b-ibjglu4rhw] {
        display: none;
    }

    .mis-albaranes .tabla-mejorada[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada tbody[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada tr[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada td[b-ibjglu4rhw] {
        display: block;
        width: 100%;
    }

    .mis-albaranes .tabla-mejorada tr[b-ibjglu4rhw] {
        padding: 16px 0;
        border-bottom: 1px dashed var(--grisgris-30);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .mis-albaranes .tabla-mejorada td[b-ibjglu4rhw] {
        text-align: left;
        padding: 2px 0;
        min-width: 0;
        font-size: 13px;
    }

    /* Mostrar labels antes de cada celda */
    .mis-albaranes .tabla-mejorada td[b-ibjglu4rhw]::before {
        display: block;
        font-weight: 700;
        font-size: 11px;
        color: var(--grisgris-50);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .mis-albaranes .tabla-mejorada .td1[b-ibjglu4rhw]::before { content: "Fecha"; }
    .mis-albaranes .tabla-mejorada .td2[b-ibjglu4rhw]::before { content: "Nº Pedido"; }
    .mis-albaranes .tabla-mejorada .td3[b-ibjglu4rhw]::before { content: "Nº Albarán"; }
    .mis-albaranes .tabla-mejorada .td4[b-ibjglu4rhw]::before { content: "Dirección"; }
    .mis-albaranes .tabla-mejorada .td5[b-ibjglu4rhw]::before { content: "Importe (sin IVA)"; }
    .mis-albaranes .tabla-mejorada .td6[b-ibjglu4rhw]::before { content: "Importe (con IVA)"; }

    /* Fecha ocupa toda la fila */
    .mis-albaranes .tabla-mejorada .td1[b-ibjglu4rhw] {
        grid-column: 1 / -1;
    }

    /* Direccion ocupa toda la fila */
    .mis-albaranes .tabla-mejorada .td4[b-ibjglu4rhw] {
        grid-column: 1 / -1;
    }

    /* Acciones ocupa toda la fila, alineado derecha */
    .mis-albaranes .tabla-mejorada .td7[b-ibjglu4rhw] {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }

    .mis-albaranes .tabla-mejorada .td7[b-ibjglu4rhw]::before {
        display: none;
    }

    .mis-albaranes .tabla-mejorada .td7 .td-content[b-ibjglu4rhw] {
        gap: 16px;
    }

    /* Reset min-widths de tabla en movil */
    .mis-albaranes .tabla-mejorada .th1[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td1[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th2[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td2[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th3[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td3[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th4[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td4[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th5[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td5[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th6[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td6[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .th7[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td7[b-ibjglu4rhw] {
        width: 100%;
        min-width: 0;
    }

    .mis-albaranes .tabla-mejorada .td5[b-ibjglu4rhw],
    .mis-albaranes .tabla-mejorada .td6[b-ibjglu4rhw] {
        text-align: left;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MOVIL PEQUENO (max-width: 480px)  */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .mis-albaranes[b-ibjglu4rhw] {
        --ma-padding-lateral: 12px;
        --ma-form-padding: 16px;
        --ma-form-section-padding: 20px;
        --ma-font-section-title: 18px;
        --ma-font-form-title: 15px;
        --ma-font-form-label: 14px;
        --ma-font-input: 14px;
        --ma-table-font: 12px;
    }

    .mis-albaranes .tabla-mejorada td[b-ibjglu4rhw] {
        font-size: 12px;
    }

    .mis-albaranes .tabla-mejorada td[b-ibjglu4rhw]::before {
        font-size: 10px;
    }
}
/* /Components/Pages/MisFacturas.razor.rz.scp.css */
/* ============================================= */
/* MIS FACTURAS - RESPONSIVE CSS                 */
/* Siguiendo patrones de Home.razor con clamp()  */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS RESPONSIVE                      */
/* ============================================= */
.mis-facturas[b-xsemtuyi1z] {
    /* Paddings laterales - fluido hasta el max */
    --mf-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps */
    --mf-gap-xs: clamp(2px, 0.21vw, 4px);
    --mf-gap-sm: clamp(10px, 1.04vw, 20px);
    --mf-gap-md: clamp(15px, 1.56vw, 30px);
    --mf-gap-lg: clamp(25px, 2.6vw, 50px);
    --mf-gap-xl: clamp(37px, 3.91vw, 75px);

    /* Tipografía fluida */
    --mf-font-title: clamp(22px, 1.67vw, 32px);
    --mf-font-section: clamp(16px, 1.15vw, 22px);
    --mf-font-body: clamp(13px, 0.83vw, 16px);
    --mf-font-small: clamp(10px, 0.63vw, 12px);
    --mf-font-label: clamp(14px, 0.94vw, 18px);
    --mf-font-header: clamp(13px, 0.83vw, 16px);
    --mf-font-btn: clamp(13px, 0.83vw, 16px);

    /* Line heights */
    --mf-lh-title: clamp(28px, 2.08vw, 40px);
    --mf-lh-body: clamp(18px, 1.25vw, 24px);

    /* Filtros panel */
    --mf-filter-padding: clamp(30px, 3.91vw, 75px);
    --mf-filter-radius: clamp(10px, 0.78vw, 15px);
    --mf-filter-input-height: clamp(48px, 3.07vw, 59px);
    --mf-filter-btn-height: clamp(48px, 3.07vw, 59px);
    --mf-filter-gap: clamp(25px, 2.6vw, 50px);

    /* Tabla */
    --mf-row-padding: clamp(8px, 0.52vw, 10px);
    --mf-icon-size: clamp(20px, 1.25vw, 24px);

    /* Contenido gap entre columnas */
    --mf-content-gap: clamp(40px, 5.21vw, 100px);

    /* Botón ayuda */
    --mf-help-width: clamp(320px, 30.83vw, 592px);
    --mf-help-height: clamp(44px, 2.71vw, 52px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.mis-facturas[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--mf-padding-lateral) clamp(50px, 5.21vw, 100px);
    position: relative;
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* ============================================= */
/* HEADER: Titulo de pagina                      */
/* ============================================= */
.mf-header[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mf-gap-md);
    width: 100%;
    /* Primer hijo: sin margin-top */
}

.mf-titulo[b-xsemtuyi1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
}

.mf-back-link[b-xsemtuyi1z] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mf-icon-size);
    height: var(--mf-icon-size);
    text-decoration: none;
}

.mf-back-icon[b-xsemtuyi1z] {
    width: var(--mf-icon-size);
    height: var(--mf-icon-size);
}

.mf-titulo-text[b-xsemtuyi1z] {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--mf-font-body);
    letter-spacing: 0;
    line-height: normal;
}

/* ============================================= */
/* SUBTITULO                                     */
/* ============================================= */
.mf-subtitle-section[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.mf-subtitle[b-xsemtuyi1z] {
    margin: 0;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--mf-font-title);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--mf-lh-title);
    font-style: var(--headline-large-font-style);
}

/* ============================================= */
/* ALERTAS                                       */
/* ============================================= */
.mf-alert-wrapper[b-xsemtuyi1z] {
    width: 100%;
    margin-top: var(--mf-gap-lg);
}

.mf-alert-wrapper .alert[b-xsemtuyi1z] {
    margin-bottom: 0;
}

.mf-alert-wrapper .alert p[b-xsemtuyi1z] {
    margin-bottom: 0;
}

/* ============================================= */
/* CONTENIDO PRINCIPAL: 2 columnas               */
/* ============================================= */
.mf-content[b-xsemtuyi1z] {
    display: flex;
    gap: var(--mf-content-gap);
    align-items: flex-start;
    width: 100%;
    margin-top: var(--mf-gap-md);
}

/* ============================================= */
/* COLUMNA IZQUIERDA: Tabla                      */
/* ============================================= */
.mf-table-col[b-xsemtuyi1z] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mf-gap-md);
}

/* Contador de resultados */
.mf-results-info[b-xsemtuyi1z] {
    width: 100%;
}

.mf-results-text[b-xsemtuyi1z] {
    margin: 0;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--mf-font-title);
    line-height: var(--mf-lh-title);
}

/* Cabecera de tabla */
.mf-table-header[b-xsemtuyi1z] {
    display: flex;
    align-items: center;
    padding-bottom: clamp(14px, 1.04vw, 20px);
    border-bottom: 2px solid #000000;
    gap: clamp(8px, 0.83vw, 16px);
}

.mf-th[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--mf-font-header);
    line-height: normal;
    white-space: nowrap;
}

.mf-th-fecha[b-xsemtuyi1z] {
    flex: 0 0 clamp(170px, 13.5vw, 195px);
}

.mf-th-numero[b-xsemtuyi1z] {
    flex: 0 0 clamp(105px, 7.29vw, 140px);
    text-align: center;
}

.mf-th-direccion[b-xsemtuyi1z] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mf-th-importe[b-xsemtuyi1z] {
    flex: 0 0 clamp(90px, 7.81vw, 150px);
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: clamp(3px, 0.31vw, 6px);
}

.mf-th-importe-iva[b-xsemtuyi1z] {
    flex: 0 0 clamp(90px, 6vw, 150px);
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: clamp(3px, 0.31vw, 6px);
}

.mf-th-sub[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--grisgris-50);
    font-size: var(--mf-font-small);
    letter-spacing: 0.4px;
    line-height: 16px;
}

.mf-th-acciones[b-xsemtuyi1z] {
    flex: 0 0 calc(2 * var(--mf-icon-size) + clamp(15px, 1.3vw, 25px));
}

/* Cuerpo de tabla */
.mf-table-body[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mf-table-row[b-xsemtuyi1z] {
    display: flex;
    align-items: center;
    padding: var(--mf-row-padding) 0;
    border-bottom: 1px dashed var(--grisgris-30);
    gap: clamp(8px, 0.83vw, 16px);
}

.mf-td[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--mf-font-body);
    letter-spacing: 0.5px;
    line-height: var(--mf-lh-body);
}

.mf-td-fecha[b-xsemtuyi1z] {
    flex: 0 0 clamp(170px, 13.5vw, 195px);
    white-space: nowrap;
}


.mf-td-numero[b-xsemtuyi1z] {
    flex: 0 0 clamp(105px, 7.29vw, 140px);
    text-align: center;
}

.mf-td-direccion[b-xsemtuyi1z] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-td-importe[b-xsemtuyi1z] {
    flex: 0 0 clamp(90px, 6vw, 150px);
    text-align: right;
    font-weight: 700;
}

.mf-td-importe-iva[b-xsemtuyi1z] {
    flex: 0 0 clamp(90px, 6vw, 150px);
    text-align: right;
    font-weight: 700;
}

.mf-td-acciones[b-xsemtuyi1z] {
    flex: 0 0 calc(2 * var(--mf-icon-size) + clamp(15px, 1.3vw, 25px));
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.3vw, 25px);
}

.mf-action-icon[b-xsemtuyi1z] {
    width: var(--mf-icon-size);
    height: var(--mf-icon-size);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mf-action-icon:hover[b-xsemtuyi1z] {
    opacity: 0.6;
}

/* Mobile cards - hidden on desktop */
.mf-mobile-cards[b-xsemtuyi1z] {
    display: none;
}

/* ============================================= */
/* COLUMNA DERECHA: Panel de filtros             */
/* ============================================= */
.mf-filters-col[b-xsemtuyi1z] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 40px;
    width: clamp(320px, 30.83vw, 592px);
}

.mf-filters-panel[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    gap: var(--mf-filter-gap);
    padding: var(--mf-filter-padding);
    background-color: var(--grisgris-10);
    border-radius: var(--mf-filter-radius);
}

/* Grupo de filtro (DESDE / HASTA) */
.mf-filter-group[b-xsemtuyi1z],
.mf-filter-group2[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    gap: var(--mf-gap-md);
}

.mf-filter-label-row[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.075vw, 25px);
}

.mf-filter-label[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings);
    font-size: var(--mf-font-section);
    line-height: clamp(22px, 1.46vw, 28px);
}

.mf-filter-separator[b-xsemtuyi1z] {
    width: 100%;
    height: 1px;
    background-color: #000000;
}

.mf-filter-input-wrapper[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

[b-xsemtuyi1z] .mf-filter-input {
    width: 100%;
    height: var(--mf-filter-input-height);
    padding: clamp(12px, 0.89vw, 17px) clamp(12px, 0.83vw, 16px);
    background-color: var(--blanco);
    border: 2px solid var(--grisgris-10);
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--mf-font-label);
    color: var(--negro);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

[b-xsemtuyi1z] .mf-filter-input::placeholder {
    color: var(--grisgris-50);
    font-weight: 300;
}

[b-xsemtuyi1z] .mf-filter-input:focus {
    border-color: var(--primario);
    outline: none;
}

/* Botón Consultar Facturas */
.mf-filter-btn[b-xsemtuyi1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--mf-filter-btn-height);
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mf-filter-btn:hover[b-xsemtuyi1z] {
    background-color: #2f9a29;
}

.mf-filter-btn-inner[b-xsemtuyi1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
}

.mf-filter-btn-text[b-xsemtuyi1z] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--blanco);
    font-size: var(--mf-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

.mf-filter-btn .spinner-border[b-xsemtuyi1z] {
    color: var(--blanco);
    width: 18px;
    height: 18px;
}

/* ============================================= */
/* SECCIÓN AYUDA                                 */
/* ============================================= */
.mf-help-section[b-xsemtuyi1z] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: clamp(25px, 2.68vw, 50px);
}

.mf-help-btn[b-xsemtuyi1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mf-help-width);
    height: var(--mf-help-height);
    background-color: var(--blanco);
    border: 1px solid var(--alternativo-oscuro);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mf-help-btn:hover[b-xsemtuyi1z] {
    background-color: var(--alternativo-oscuro);
}

.mf-help-btn:hover .mf-help-btn-text[b-xsemtuyi1z] {
    color: var(--blanco);
}

.mf-help-btn-text[b-xsemtuyi1z] {
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* PAGE BLOCKER                                  */
/* ============================================= */
.page-blocker[b-xsemtuyi1z] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-xsemtuyi1z] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}


/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .mis-facturas[b-xsemtuyi1z] {
        --mf-padding-lateral: 30px;
        --mf-gap-md: 20px;
        --mf-gap-lg: 30px;
        --mf-content-gap: 30px;
        --mf-filter-padding: 30px;
        --mf-filter-gap: 30px;
        --mf-font-title: 24px;
        --mf-font-section: 18px;
        --mf-font-body: 14px;
        --mf-font-small: 11px;
        --mf-font-header: 14px;
        --mf-font-btn: 14px;
        --mf-font-label: 15px;
        --mf-icon-size: 22px;
        --mf-filter-input-height: 50px;
        --mf-filter-btn-height: 50px;
        --mf-help-width: 100%;
        --mf-help-height: 48px;
    }

    /* Contenido: stack vertical - filtros arriba, tabla abajo */
    .mf-content[b-xsemtuyi1z] {
        flex-direction: column-reverse;
        gap: var(--mf-gap-lg);
    }

    .mf-table-col[b-xsemtuyi1z] {
        width: 100%;
    }

    /* Filtros: full width */
    .mf-filters-col[b-xsemtuyi1z] {
        width: 100%;
    }

    /* Filtros panel: grid 2 col — DESDE | HASTA / botón full width */
    .mf-filters-panel[b-xsemtuyi1z] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--mf-gap-md);
    }

    .mf-filter-group[b-xsemtuyi1z],
    .mf-filter-group2[b-xsemtuyi1z] {
        /* cada grupo ocupa 1 columna del grid */
        min-width: 0;
    }

    .mf-filter-btn[b-xsemtuyi1z] {
        /* botón ocupa las 2 columnas — siempre dentro del panel */
        grid-column: 1 / -1;
        width: 100%;
        box-sizing: border-box;
    }

    /* Tabla: esconder columna dirección para dar más espacio */
    .mf-th-direccion[b-xsemtuyi1z],
    .mf-td-direccion[b-xsemtuyi1z] {
        display: none;
    }

    /* Tabla: columnas con flex-grow para ocupar 100% del ancho */
    .mf-table-header[b-xsemtuyi1z],
    .mf-table-row[b-xsemtuyi1z] {
        width: 100%;
    }

    .mf-th-fecha[b-xsemtuyi1z],
    .mf-td-fecha[b-xsemtuyi1z] {
        flex: 1.2 1 0;
        min-width: 0;
    }

    .mf-th-numero[b-xsemtuyi1z],
    .mf-td-numero[b-xsemtuyi1z] {
        flex: 1 1 0;
        min-width: 0;
    }

    .mf-th-importe[b-xsemtuyi1z],
    .mf-td-importe[b-xsemtuyi1z] {
        flex: 1.2 1 0;
        min-width: 0;
    }

    .mf-th-importe-iva[b-xsemtuyi1z],
    .mf-td-importe-iva[b-xsemtuyi1z] {
        flex: 1.2 1 0;
        min-width: 0;
    }

    .mf-th-acciones[b-xsemtuyi1z],
    .mf-td-acciones[b-xsemtuyi1z] {
        flex: 0 0 auto;
    }

    /* Ayuda: centrado */
    .mf-help-section[b-xsemtuyi1z] {
        justify-content: center;
    }
}


/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 840px)         */
/* ============================================= */
/* ============================================= */
@media (max-width: 840px) {
    .mis-facturas[b-xsemtuyi1z] {
        --mf-padding-lateral: 16px;
        --mf-gap-sm: 12px;
        --mf-gap-md: 16px;
        --mf-gap-lg: 24px;
        --mf-content-gap: 24px;
        --mf-filter-padding: 24px;
        --mf-filter-gap: 24px;
        --mf-font-title: 20px;
        --mf-font-section: 16px;
        --mf-font-body: 14px;
        --mf-font-small: 10px;
        --mf-font-header: 13px;
        --mf-font-btn: 14px;
        --mf-font-label: 14px;
        --mf-icon-size: 22px;
        --mf-filter-input-height: 48px;
        --mf-filter-btn-height: 48px;
        --mf-help-width: 100%;
        --mf-help-height: 46px;
        --mf-lh-title: 26px;
    }

    /* Subtitulo más pequeño */
    .mf-subtitle[b-xsemtuyi1z] {
        font-size: var(--mf-font-title);
        line-height: var(--mf-lh-title);
    }

    /* Filtros: vuelve a flex columna — cancela el grid del 1024px */
    .mf-filters-panel[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: var(--mf-gap-md);
    }

    .mf-filter-group[b-xsemtuyi1z],
    .mf-filter-group2[b-xsemtuyi1z] {
        grid-column: unset;
        width: 100%;
        min-width: 0;
    }

    .mf-filter-btn[b-xsemtuyi1z] {
        grid-column: unset;
        width: 100%;
    }

    /* Ocultar tabla desktop, mostrar cards móvil */
    .mf-table-header[b-xsemtuyi1z],
    .mf-table-body[b-xsemtuyi1z] {
        display: none;
    }

    .mf-mobile-cards[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .mf-mobile-card[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px dashed var(--grisgris-30);
    }

    .mf-mobile-card:last-child[b-xsemtuyi1z] {
        border-bottom: none;
    }

    .mf-mobile-card-top[b-xsemtuyi1z] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
    }

    .mf-mobile-card-fecha[b-xsemtuyi1z],
    .mf-mobile-card-numero[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mf-mobile-card-direccion[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mf-mobile-label[b-xsemtuyi1z] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        line-height: normal;
    }

    .mf-mobile-value[b-xsemtuyi1z] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 14px;
        letter-spacing: 0.5px;
        line-height: 22px;
    }

    .mf-mobile-value-sub[b-xsemtuyi1z] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
        color: #000000;
        font-size: 13px;
        line-height: normal;
    }

    .mf-mobile-value-bold[b-xsemtuyi1z] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 700;
        color: #000000;
        font-size: 15px;
        line-height: normal;
    }

    .mf-mobile-card-bottom[b-xsemtuyi1z] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mf-mobile-card-importes[b-xsemtuyi1z] {
        display: flex;
        gap: 24px;
    }

    .mf-mobile-importe-item[b-xsemtuyi1z] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mf-mobile-card-actions[b-xsemtuyi1z] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Results text en móvil */
    .mf-results-text[b-xsemtuyi1z] {
        font-size: 18px;
        line-height: 24px;
    }
}


/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .mis-facturas[b-xsemtuyi1z] {
        --mf-padding-lateral: 12px;
        --mf-gap-lg: 20px;
        --mf-filter-padding: 20px;
        --mf-filter-gap: 20px;
        --mf-font-title: 18px;
        --mf-font-section: 15px;
        --mf-font-body: 13px;
        --mf-font-btn: 13px;
        --mf-lh-title: 24px;
    }

    .mf-mobile-card-importes[b-xsemtuyi1z] {
        gap: 16px;
    }

    .mf-mobile-value-bold[b-xsemtuyi1z] {
        font-size: 14px;
    }

    .mf-help-btn-text[b-xsemtuyi1z] {
        font-size: 14px;
    }
}
/* /Components/Pages/MisListas.razor.rz.scp.css */
/* ============================================= */
/* MIS LISTAS - CSS RESPONSIVE                   */
/* Siguiendo patrones de Home.razor con clamp()  */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS LOCALES                         */
/* ============================================= */
.mis-listas[b-1wbq8gpt5q] {
    /* Colores (tokens del diseño) */
    --ml-negro: #212121;
    --ml-blanco: #FFFFFF;
    --ml-primario: #3CAA36;
    --ml-primario-hover: #80C87C;
    --ml-gris-10: #F5F5F5;
    --ml-gris-30: #E0E0E0;
    --ml-gris-50: #9E9E9E;
    --ml-alternativo-oscuro: #ECC61B;

    /* Paddings laterales - fluido, misma fórmula que Home */
    --ml-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gap entre secciones principales (contenido ↔ botón ayuda) */
    --ml-gap-sections: clamp(30px, 3.91vw, 75px);

    /* Gap dentro de secciones */
    --ml-gap-inner: clamp(16px, 1.56vw, 30px);

    /* Padding de la caja gris */
    --ml-container-padding: clamp(20px, 3.91vw, 75px);

    /* Border radius de la caja gris */
    --ml-container-radius: clamp(10px, 0.78vw, 15px);

    /* Tipografía fluida */
    --ml-font-header: clamp(13px, 0.83vw, 16px);
    --ml-font-title: clamp(22px, 1.67vw, 32px);
    --ml-font-body: clamp(13px, 0.83vw, 16px);
    --ml-font-button: clamp(13px, 0.83vw, 16px);
    --ml-font-small: clamp(10px, 0.63vw, 12px);

    /* Line heights */
    --ml-lh-title: clamp(28px, 2.08vw, 40px);
    --ml-lh-body: clamp(20px, 1.25vw, 24px);

    /* Título de página padding */
    --ml-title-py: clamp(12px, 1.04vw, 20px);

    /* Tabla: padding vertical de cada fila */
    --ml-row-py: clamp(16px, 1.82vw, 35px);

    /* Tabla: padding inferior del header */
    --ml-header-pb: clamp(10px, 1.04vw, 20px);

    /* Arrow icon */
    --ml-arrow-size: clamp(18px, 1.25vw, 24px);

    /* Botón CREAR NUEVA LISTA */
    --ml-btn-height: clamp(42px, 2.71vw, 52px);

    /* Botón AÑADIR (outline) — Figma: 50px */
    --ml-btn-add-height: clamp(40px, 2.60vw, 50px);

    /* Iconos acciones */
    --ml-icon-size: clamp(20px, 1.25vw, 24px);

    /* Gap entre acciones */
    --ml-actions-gap: clamp(12px, 1.3vw, 25px);

    /* Gap entre columnas de datos y acciones (desktop) */
    --ml-data-actions-gap: clamp(20px, 5.21vw, 100px);

    /* Botón ¿Te ayudamos? */
    --ml-help-btn-width: clamp(280px, 30.83vw, 592px);
    --ml-help-btn-height: clamp(44px, 2.71vw, 52px);

    /* Padding inferior de página */
    --ml-padding-bottom: clamp(40px, 5.21vw, 100px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.mis-listas[b-1wbq8gpt5q] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: center;
    gap: var(--ml-gap-sections);
    padding: 0 var(--ml-padding-lateral) var(--ml-padding-bottom);
    position: relative;
    background-color: var(--ml-blanco);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME CONTENEDOR GENERAL                      */
/* ============================================= */
.mis-listas .frame[b-1wbq8gpt5q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ml-gap-inner);
    position: relative;
    width: 100%;
}

/* ============================================= */
/* TÍTULO DE PÁGINA (MIS LISTAS + flecha)        */
/* ============================================= */
.mis-listas .titulo[b-1wbq8gpt5q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ml-title-py) 0;
    position: relative;
    width: 100%;
}

.mis-listas .titulo h2[b-1wbq8gpt5q] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--ml-font-header);
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

.mis-listas .titulo .iconos[b-1wbq8gpt5q] {
    position: absolute;
    width: var(--ml-arrow-size);
    height: var(--ml-arrow-size);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================= */
/* CABECERA: "Tienes X listas" + botón crear     */
/* ============================================= */
.mis-listas .div[b-1wbq8gpt5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    gap: 16px;
}

.mis-listas .text-wrapper[b-1wbq8gpt5q] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--ml-font-title);
    line-height: var(--ml-lh-title);
    white-space: nowrap;
}

.mis-listas .boton[b-1wbq8gpt5q] {
    display: inline-flex;
    flex-direction: column;
    height: var(--ml-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--ml-primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.mis-listas .boton:hover[b-1wbq8gpt5q] {
    background-color: var(--ml-primario-hover);
}

.mis-listas .boton .state-layer[b-1wbq8gpt5q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    width: 100%;
    height: 100%;
}

.mis-listas .boton .label-text[b-1wbq8gpt5q] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--ml-blanco);
    font-size: var(--ml-font-button);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--ml-lh-body);
    white-space: nowrap;
}

/* ============================================= */
/* ALERTAS                                       */
/* ============================================= */
.mis-listas .alert p[b-1wbq8gpt5q] {
    margin-bottom: 0;
}

/* ============================================= */
/* CAJA GRIS (contenedor de la tabla)            */
/* ============================================= */
.mis-listas .frame-2[b-1wbq8gpt5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--ml-container-padding);
    width: 100%;
    background-color: var(--ml-gris-10);
    border-radius: var(--ml-container-radius);
    box-sizing: border-box;
}

/* ============================================= */
/* TABLA: Wrapper y container                    */
/* ============================================= */
.mis-listas .tabla-wrapper[b-1wbq8gpt5q] {
    width: 100%;
}

.mis-listas .tabla-container[b-1wbq8gpt5q] {
    width: 100%;
}

/* ============================================= */
/* TABLA: Estilos principales                    */
/* ============================================= */
.mis-listas .tabla-mejorada[b-1wbq8gpt5q] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--ml-font-body);
}

/* ============================================= */
/* TABLA: THEAD                                  */
/* ============================================= */
.mis-listas .tabla-mejorada thead[b-1wbq8gpt5q] {
    color: #000000;
    font-weight: 700;
}

.mis-listas .tabla-mejorada thead tr[b-1wbq8gpt5q] {
    border-bottom: 1px solid #000000;
}

.mis-listas .tabla-mejorada th[b-1wbq8gpt5q] {
    padding: 0 0 var(--ml-header-pb) 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--ml-font-body);
    line-height: normal;
    text-align: center;
    vertical-align: bottom;
}

.mis-listas .tabla-mejorada .th1[b-1wbq8gpt5q] {
    text-align: left;
    width: 35%;
}

.mis-listas .tabla-mejorada .th2[b-1wbq8gpt5q] {
    width: 15%;
}

.mis-listas .tabla-mejorada .th3[b-1wbq8gpt5q] {
    width: 15%;
}

.mis-listas .tabla-mejorada .th4[b-1wbq8gpt5q] {
    text-align: right;
    width: 15%;
}

.mis-listas .tabla-mejorada .th5[b-1wbq8gpt5q] {
    width: 20%;
}

.mis-listas .tabla-mejorada th .subheader[b-1wbq8gpt5q] {
    font-size: var(--ml-font-small);
    font-weight: 400;
    color: var(--ml-gris-50);
    letter-spacing: 0.4px;
    margin-left: 4px;
}

/* ============================================= */
/* TABLA: TBODY                                  */
/* ============================================= */
.mis-listas .tabla-mejorada tbody tr[b-1wbq8gpt5q] {
    border-bottom: 1px dashed var(--ml-gris-30);
}

.mis-listas .tabla-mejorada tbody tr:last-child[b-1wbq8gpt5q] {
    border-bottom: none;
}

.mis-listas .tabla-mejorada td[b-1wbq8gpt5q] {
    padding: var(--ml-row-py) 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--ml-font-body);
    line-height: var(--ml-lh-body);
    letter-spacing: 0.5px;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

.mis-listas .tabla-mejorada .td1[b-1wbq8gpt5q] {
    text-align: left;
    word-break: break-word;
}

.mis-listas .tabla-mejorada .td2[b-1wbq8gpt5q] {
    text-align: center;
}

.mis-listas .tabla-mejorada .td3[b-1wbq8gpt5q] {
    text-align: center;
}

.mis-listas .tabla-mejorada .td4[b-1wbq8gpt5q] {
    text-align: right;
}

.mis-listas .tabla-mejorada .td5[b-1wbq8gpt5q] {
    text-align: right;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================= */
/* TABLA: Checkbox (Predeterminada)              */
/* ============================================= */
.mis-listas .tabla-mejorada .td2 .checkbox-wrapper[b-1wbq8gpt5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mis-listas .tabla-mejorada .td2 .custom-checkbox[b-1wbq8gpt5q] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mis-listas .tabla-mejorada .td2 .custom-checkbox+label[b-1wbq8gpt5q] {
    width: clamp(12px, 0.73vw, 14px);
    height: clamp(12px, 0.73vw, 14px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url("/images/iconos/circle-outline.svg") no-repeat center center;
    background-size: contain;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.mis-listas .tabla-mejorada .td2 .custom-checkbox+label:hover[b-1wbq8gpt5q] {
    transform: scale(1.15);
}

.mis-listas .tabla-mejorada .td2 .custom-checkbox:checked+label[b-1wbq8gpt5q] {
    background-image: url("/images/iconos/circle-green.svg");
    background-size: contain;
}

/* ============================================= */
/* TABLA: Acciones (AÑADIR + editar + eliminar)  */
/* ============================================= */
.mis-listas .tabla-mejorada .td5 .td-content[b-1wbq8gpt5q] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ml-actions-gap);
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart[b-1wbq8gpt5q] {
    height: var(--ml-btn-add-height);
    padding: 0 clamp(14px, 1.25vw, 24px);
    border-radius: 6px;
    background-color: var(--ml-blanco);
    border: 1px solid var(--ml-primario);
    color: var(--ml-primario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 1;  /* permite que el botón encoja cuando td5 se estrecha */
    min-width: 0;    /* elimina el mínimo implícito del contenido para que clamp() tome el control */
    gap: clamp(6px, 0.42vw, 8px);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    font-size: var(--ml-font-button);
    letter-spacing: 0.15px;
    line-height: var(--ml-lh-body);
    white-space: nowrap;
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart:hover[b-1wbq8gpt5q] {
    background-color: var(--ml-primario);
    color: var(--ml-blanco);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart:hover[b-1wbq8gpt5q]  svg path {
    fill: var(--ml-blanco);
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart:active[b-1wbq8gpt5q] {
    transform: scale(0.98);
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart[b-1wbq8gpt5q]  svg {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    flex-shrink: 0; /* el icono no se comprime, solo el texto */
}

.mis-listas .tabla-mejorada .td5 .td-content .btn-cart i[b-1wbq8gpt5q] {
    font-size: var(--ml-icon-size);
}

.mis-listas .tabla-mejorada .td5 .td-content[b-1wbq8gpt5q]  .img {
    width: var(--ml-icon-size);
    height: var(--ml-icon-size);
    color: #212121; /* TrashIcon (svg, stroke=currentColor); no afecta a editar.svg (<img>) */
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.mis-listas .tabla-mejorada .td5 .td-content[b-1wbq8gpt5q]  .img:hover {
    transform: scale(1.15);
    opacity: 0.7;
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                        */
/* ============================================= */
.page-blocker[b-1wbq8gpt5q] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-1wbq8gpt5q] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.mis-listas .spinner-border[b-1wbq8gpt5q] {
    color: var(--ml-blanco);
}

/* ============================================= */
/* MOBILE: Labels ocultos en desktop             */
/* ============================================= */
.mis-listas .mobile-label[b-1wbq8gpt5q] {
    display: none;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .mis-listas[b-1wbq8gpt5q] {
        --ml-padding-lateral: 30px;
        --ml-gap-sections: 40px;
        --ml-gap-inner: 20px;
        --ml-container-padding: 30px;
        --ml-font-title: 24px;
        --ml-lh-title: 32px;
        --ml-row-py: 20px;
        --ml-header-pb: 14px;
        --ml-btn-height: 46px;
        --ml-btn-add-height: 38px;
        --ml-icon-size: 22px;
        --ml-actions-gap: 16px;
        --ml-data-actions-gap: 30px;
        --ml-help-btn-width: 100%;
        --ml-help-btn-height: 48px;
        --ml-padding-bottom: 60px;
    }

    /* Reducir anchos de columnas fijas */
    .mis-listas .tabla-mejorada .th1[b-1wbq8gpt5q] {
        width: 30%;
    }

    .mis-listas .tabla-mejorada .th2[b-1wbq8gpt5q],
    .mis-listas .tabla-mejorada .th3[b-1wbq8gpt5q],
    .mis-listas .tabla-mejorada .th4[b-1wbq8gpt5q] {
        width: 14%;
    }

    .mis-listas .tabla-mejorada .th5[b-1wbq8gpt5q] {
        width: 28%;
    }

    /* Botón AÑADIR: ocultar texto, mostrar solo icono */
    .mis-listas .tabla-mejorada .td5 .td-content .btn-cart span[b-1wbq8gpt5q] {
        display: none;
    }

    .mis-listas .tabla-mejorada .td5 .td-content .btn-cart[b-1wbq8gpt5q] {
        padding: 0 12px; /* padding simétrico para botón cuadrado de icono */
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* Tabla → layout de tarjetas apiladas           */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .mis-listas[b-1wbq8gpt5q] {
        --ml-padding-lateral: 16px;
        --ml-gap-sections: 30px;
        --ml-gap-inner: 16px;
        --ml-container-padding: 16px;
        --ml-container-radius: 12px;
        --ml-font-header: 14px;
        --ml-font-title: 20px;
        --ml-lh-title: 28px;
        --ml-font-body: 14px;
        --ml-font-button: 14px;
        --ml-font-small: 11px;
        --ml-title-py: 14px;
        --ml-row-py: 16px;
        --ml-btn-height: 44px;
        --ml-btn-add-height: 40px;
        --ml-icon-size: 22px;
        --ml-actions-gap: 16px;
        --ml-help-btn-width: 100%;
        --ml-help-btn-height: 46px;
        --ml-padding-bottom: 40px;
    }

    /* Cabecera: apilar título y botón en móvil */
    .mis-listas .div[b-1wbq8gpt5q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mis-listas .text-wrapper[b-1wbq8gpt5q] {
        white-space: normal;
    }

    .mis-listas .boton[b-1wbq8gpt5q] {
        width: 100%;
    }

    /* ========== TABLA → TARJETAS ========== */
    .mis-listas .tabla-mejorada thead[b-1wbq8gpt5q] {
        display: none;
    }

    .mis-listas .tabla-mejorada[b-1wbq8gpt5q],
    .mis-listas .tabla-mejorada tbody[b-1wbq8gpt5q] {
        display: block;
        width: 100%;
    }

    .mis-listas .tabla-mejorada tbody tr[b-1wbq8gpt5q] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "nombre   nombre"
            "predet   articulos"
            "importe  importe"
            "acciones acciones";
        gap: 10px 16px;
        padding: var(--ml-row-py) 0;
        border-bottom: 1px dashed var(--ml-gris-30);
        align-items: center;
    }

    .mis-listas .tabla-mejorada .td1[b-1wbq8gpt5q] {
        grid-area: nombre;
        text-align: left;
        font-weight: 600;
        font-size: 15px;
    }

    .mis-listas .tabla-mejorada .td2[b-1wbq8gpt5q] {
        grid-area: predet;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mis-listas .tabla-mejorada .td3[b-1wbq8gpt5q] {
        grid-area: articulos;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .mis-listas .tabla-mejorada .td4[b-1wbq8gpt5q] {
        grid-area: importe;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
    }

    .mis-listas .tabla-mejorada .td5[b-1wbq8gpt5q] {
        grid-area: acciones;
        text-align: left;
    }

    .mis-listas .tabla-mejorada .td5 .td-content[b-1wbq8gpt5q] {
        justify-content: flex-start;
        gap: 12px;
    }

    .mis-listas .tabla-mejorada .td5 .td-content .btn-cart[b-1wbq8gpt5q] {
        flex: 1;
        max-width: 200px;
    }

    /* Mostrar labels en mobile */
    .mis-listas .mobile-label[b-1wbq8gpt5q] {
        display: inline;
        font-weight: 700;
        font-size: 12px;
        color: var(--ml-gris-50);
        letter-spacing: 0.3px;
        text-transform: uppercase;
        margin-right: 4px;
    }

    .mis-listas .tabla-mejorada .td2 .checkbox-wrapper[b-1wbq8gpt5q] {
        order: 2;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .mis-listas[b-1wbq8gpt5q] {
        --ml-padding-lateral: 12px;
        --ml-gap-sections: 24px;
        --ml-gap-inner: 12px;
        --ml-container-padding: 12px;
        --ml-font-title: 18px;
        --ml-lh-title: 24px;
        --ml-font-body: 13px;
        --ml-font-button: 13px;
        --ml-btn-height: 42px;
        --ml-btn-add-height: 38px;
        --ml-icon-size: 20px;
        --ml-actions-gap: 10px;
        --ml-padding-bottom: 30px;
    }

    .mis-listas .tabla-mejorada tbody tr[b-1wbq8gpt5q] {
        gap: 8px 12px;
    }

    .mis-listas .tabla-mejorada .td5 .td-content .btn-cart[b-1wbq8gpt5q] {
        max-width: none;
        flex: 1;
    }
}
/* /Components/Pages/MisPuntos.razor.rz.scp.css */
/* Loading */
.puntos-loading[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.spinner[b-ezw6iuzb98] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-ezw6iuzb98 1s linear infinite;
}

@keyframes spin-b-ezw6iuzb98 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.puntos-loading p[b-ezw6iuzb98] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

.puntos[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    align-items: center;
    gap: 50px;
    padding: 0px clamp(1rem, 6vw, 115px) clamp(3rem, 5vw, 100px);
    position: relative;
    background-color: #ffffff;
}

.puntos .frame[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .titulo[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .titulo h2[b-ezw6iuzb98] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

.puntos .iconos[b-ezw6iuzb98] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.puntos .div[b-ezw6iuzb98] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .frame-2-left[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    flex: 1;
    flex-grow: 1;
    min-width: 0;
}

.puntos .text-wrapper[b-ezw6iuzb98] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.puntos .p[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    margin-top: -1.00px;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    font-style: var(--headline-large-font-style);
}

.puntos .frame-2[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

    .puntos .frame-3[b-ezw6iuzb98] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 30px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background-color: var(--grisgris-10);
        border-radius: 15px;
        box-shadow: var(--3);
        width: -webkit-fill-available;
    }

    .puntos .frame-5 p[b-ezw6iuzb98],
    .puntos .frame-5 .texto-p[b-ezw6iuzb98] {
        margin-top: 0;
        margin-bottom: 0;
    }

.puntos .frame-4[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .text-wrapper-2[b-ezw6iuzb98] {
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    margin-top: -1.00px;
    color: #141414;
}

.puntos .text-wrapper-3[b-ezw6iuzb98] {
    position: relative;
    flex: 1;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: 24px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.puntos .line[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 0;
    border-top: 1px solid #000000;
}

.puntos .text-wrapper-4[b-ezw6iuzb98] {
    position: relative;
    width: 236px;
    margin-top: -1.00px;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: #141414;
    font-size: var(--title-medium-font-size);
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    font-style: var(--title-medium-font-style);
}

.puntos .text-wrapper-5[b-ezw6iuzb98] {
    position: relative;
    width: 129.83px;
    margin-top: -1.00px;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: #141414;
    font-size: var(--title-medium-font-size);
    text-align: right;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    font-style: var(--title-medium-font-style);
}

.puntos .frame-5[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.puntos .text-wrapper-6[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    margin-top: -1.00px;
    font-family: var(--body-large-font-family);
    font-weight: var(--body-large-font-weight);
    color: #000000;
    font-size: var(--body-large-font-size);
    letter-spacing: var(--body-large-letter-spacing);
    line-height: var(--body-large-line-height);
    font-style: var(--body-large-font-style);
}

.puntos .text-wrapper-7[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    font-family: var(--body-large-font-family);
    font-weight: var(--body-large-font-weight);
    color: var(--grisgris-60);
    font-size: var(--body-large-font-size);
    letter-spacing: var(--body-large-letter-spacing);
    line-height: var(--body-large-line-height);
    font-style: var(--body-large-font-style);
}

.puntos .frame-6[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .frame-7[b-ezw6iuzb98] {
    display: flex;
    height: 424px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
}

.puntos .component[b-ezw6iuzb98] {
    width: 303px;
    justify-content: center;
    gap: 20px;
    padding: 0px 0px 15px;
    border-radius: 15px;
    border: 10px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.puntos .component:hover[b-ezw6iuzb98] {
    border-color: #B1DDAF;
}

.puntos .image[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 283px;
    object-fit: cover;
}

.puntos .frame-wrapper[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .frame-8[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.puntos .robot-de-cocina[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    margin-top: -1.00px;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: #000000;
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    font-style: var(--title-medium-font-style);
}

.puntos .text-wrapper-8[b-ezw6iuzb98] {
    position: relative;
    align-self: stretch;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--primario);
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: 28px;
}

.puntos .component-2[b-ezw6iuzb98] {
    width: 303px;
    justify-content: center;
    gap: 20px;
    padding: 0px 0px 15px;
    border-radius: 15px;
    border: 10px solid;
    border-color: var(--primario);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: border-color 0.2s ease;
}

.puntos .div-wrapper[b-ezw6iuzb98] {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .frame-9[b-ezw6iuzb98] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .component-3[b-ezw6iuzb98] {
    gap: 24px;
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.puntos .frame-10[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .columna[b-ezw6iuzb98] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.puntos .input-wrapper[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.puntos .input[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 17px 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--gris-10);
    border-radius: 6px;
}

.puntos .text-wrapper-9[b-ezw6iuzb98] {
    position: relative;
    flex: 1;
    margin-top: -1.00px;
    font-family: var(--l-body-0-font-family);
    font-weight: var(--l-body-0-font-weight);
    color: var(--gris-50);
    font-size: var(--l-body-0-font-size);
    letter-spacing: var(--l-body-0-letter-spacing);
    line-height: var(--l-body-0-line-height);
    font-style: var(--l-body-0-font-style);
}

.puntos .columna-2[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.puntos .frame-11[b-ezw6iuzb98] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
}

.puntos .frame-12[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    width: 549px;
    height: 181px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    margin-bottom: 40px;
    position: relative;
    background-color: var(--grisgris-10);
    border-radius: 15px;
    box-shadow: var(--3);
}

.puntos .boton[b-ezw6iuzb98] {
    height: 59px;
    align-self: stretch;
    width: 100%;
    background-color: var(--primario);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.puntos .input[b-ezw6iuzb98] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 17px 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--gris-10);
    border: 2px solid transparent;
    /* Borde inicial transparente */
    border-radius: 6px;
}

/* Al hacer focus, cambia el color del borde a verde */
.puntos .input:focus[b-ezw6iuzb98] {
    border-color: green;
    outline: none;
    /* Opcional para quitar el outline por defecto del navegador */
}


.puntos .state-layer[b-ezw6iuzb98] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;

}

.puntos .label-text[b-ezw6iuzb98] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.puntos .state-layer-wrapper[b-ezw6iuzb98] {
    width: 592px;
    height: 52px;
    margin-top: 40px;
    margin-left: 550px;
    background-color: var(--blanco);
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.puntos .state-layer-wrapper:hover[b-ezw6iuzb98] {
    background-color: var(--alternativo-oscuro)
}

.puntos .label-text-2[b-ezw6iuzb98] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    text-decoration: none;
}

.puntos .state-layer-wrapper:hover .label-text-2[b-ezw6iuzb98] {
    color: var(--blanco);
}

/* ========================================
   Gift Modal Styles - Based on Figma Design
   ======================================== */

.gift-modal-overlay[b-ezw6iuzb98] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.gift-modal[b-ezw6iuzb98] {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    max-width: 976px;
    width: 100%;
    max-height: 90vh;
    position: relative;
    padding: clamp(35px, 3.65vw, 70px) clamp(25px, 2.6vw, 50px) clamp(25px, 2.6vw, 50px);
    overflow-y: auto;
}

.gift-modal-close[b-ezw6iuzb98] {
    position: absolute;
    top: clamp(15px, 1.56vw, 30px);
    right: clamp(15px, 1.56vw, 30px);
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-modal-close:hover[b-ezw6iuzb98] {
    opacity: 0.7;
}

.gift-modal-content[b-ezw6iuzb98] {
    display: flex;
    gap: clamp(15px, 1.56vw, 30px);
    align-items: center;
}

.gift-modal-image[b-ezw6iuzb98] {
    flex: 1;
    min-width: 0;
    height: clamp(250px, 22.03vw, 423px);
    border-radius: 15px;
    overflow: hidden;
}

.gift-modal-image img[b-ezw6iuzb98] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

.gift-modal-info[b-ezw6iuzb98] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.56vw, 30px);
    min-height: clamp(250px, 18.125vw, 348px);
    max-height: clamp(250px, 18.125vw, 348px);
}

.gift-modal-header[b-ezw6iuzb98] {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.52vw, 10px);
}

.gift-modal-title[b-ezw6iuzb98] {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: clamp(24px, 1.46vw, 28px);
    color: #000000;
    margin: 0;
}

.gift-modal-points[b-ezw6iuzb98] {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: clamp(24px, 1.46vw, 28px);
    color: #3CAA36;
    margin: 0;
}

.gift-modal-description[b-ezw6iuzb98] {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #000000;
    flex: 1;
    min-height: 0;
    max-height: clamp(120px, 8.75vw, 168px);
    overflow-y: auto;
}

.gift-modal-description div[b-ezw6iuzb98] {
    padding-left: 1em;
    text-indent: -1em;
}

.gift-modal-btn[b-ezw6iuzb98] {
    width: fit-content;
    height: clamp(44px, 2.8125vw, 54px);
    padding: clamp(8px, 0.52vw, 10px) clamp(18px, 1.25vw, 24px);
    border-radius: 6px;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.gift-modal-btn-filled[b-ezw6iuzb98] {
    background-color: #3CAA36;
    color: #ffffff;
    border: none;
}

.gift-modal-btn-filled:hover[b-ezw6iuzb98] {
    background-color: #2d8a29;
}

.gift-modal-btn-outlined[b-ezw6iuzb98] {
    background-color: transparent;
    color: #3CAA36;
    border: 1px solid #3CAA36;
}

.gift-modal-btn-outlined:hover[b-ezw6iuzb98] {
    background-color: rgba(60, 170, 54, 0.1);
}

.gift-modal-btn-disabled[b-ezw6iuzb98] {
    background-color: #e0e0e0;
    color: #9e9e9e;
    border: none;
    cursor: not-allowed;
}

/* Mobile: stack layout */
@media (max-width: 768px) {
    .gift-modal-content[b-ezw6iuzb98] {
        flex-direction: column;
    }

    .gift-modal-image[b-ezw6iuzb98] {
        height: 250px;
        width: 100%;
    }

    .gift-modal-info[b-ezw6iuzb98] {
        min-height: unset;
        max-height: unset;
    }

    .gift-modal-description[b-ezw6iuzb98] {
        max-height: 150px;
    }

    .gift-modal-actions[b-ezw6iuzb98] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ========================================
   Gift Quantity Badge - Card overlay
   ======================================== */

.gift-quantity-badge[b-ezw6iuzb98] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 2px solid #3CAA36;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #121212;
    z-index: 2;
}

/* ========================================
   Gift Modal Counter & Actions
   ======================================== */

.gift-modal-actions[b-ezw6iuzb98] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gift-counter[b-ezw6iuzb98] {
    width: 145px;
    height: 52px;
    background-color: #F5F5F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 21px;
    flex-shrink: 0;
}

.gift-counter-btn[b-ezw6iuzb98] {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gift-counter-btn:disabled[b-ezw6iuzb98] {
    opacity: 0.3;
    cursor: not-allowed;
}

.gift-counter-btn:not(:disabled):hover[b-ezw6iuzb98] {
    opacity: 0.7;
}

.gift-counter-value[b-ezw6iuzb98] {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #121212;
    text-align: center;
    min-width: 20px;
}
/* /Components/Pages/MisSellos.razor.rz.scp.css */
/* =====================================================
   MIS SELLOS PAGE - Blazor Scoped CSS
   100% Figma Design with Modern Responsive CSS
   ===================================================== */

/* ========== CSS VARIABLES ========== */
.sellos-container[b-5s7yhxnz9v] {
    /* Colors */
    --color-background: #FFFFFF;
    --color-text-primary: #2D2E2E;
    --color-text-black: #000000;
    --color-input-bg: #F5F5F5;
    --color-placeholder: #9E9E9E;
    --color-button-primary: #3CAA36;
    --color-button-help: #ECC61B;
    --color-button-help-text: #212121;
    --color-white: #FFFFFF;
    --color-green: #3CAA36;
    --color-separator: #000000;

    /* Typography */
    --font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-page-title: 1rem;
    /* 16px */
    --font-size-main-title: clamp(1.5rem, 3vw, 2rem);
    /* 24px → 32px */
    --font-size-description: clamp(0.875rem, 1vw, 1rem);
    /* 14px → 16px */
    --font-size-column-title: clamp(1.125rem, 1.5vw, 1.375rem);
    /* 18px → 22px */
    --font-size-input: clamp(1rem, 1vw, 1.125rem);
    /* 16px → 18px */
    --font-size-button: 1rem;
    /* 16px */

    /* Spacing (Figma-exact) */
    --spacing-gap-sections: clamp(1.5rem, 3vw, 2.5rem);
    /* 24px → 40px */
    --spacing-gap-columns: clamp(1rem, 3vw, 3.125rem);
    /* 16px → 50px */
    --spacing-gap-elements: clamp(1.25rem, 2vw, 1.875rem);
    /* 20px → 30px */
    --spacing-gap-heading: clamp(1rem, 1.5vw, 1.25rem);
    /* 16px → 20px */

    /* Form elements */
    --input-height: 59px;
    --input-border-radius: 6px;
    --input-padding-x: 16px;
    --input-padding-y: 17px;

    /* Container */
    --container-max-width: 1690px;
    --container-padding: clamp(1rem, 4vw, 7.1875rem);
    /* 16px → 115px */
    --page-padding-bottom: clamp(3rem, 6vw, 6.25rem);
    /* 48px → 100px */

    /* Page Layout */
    background: var(--color-background);
    padding: 0 var(--container-padding) var(--page-padding-bottom);
    font-family: var(--font-family);
    color: var(--color-text-primary);
}

/* ========== HEADER SECTION ========== */
.sellos-header[b-5s7yhxnz9v] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    margin-bottom: var(--spacing-gap-sections);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-top[b-5s7yhxnz9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 0;
}

.back-arrow[b-5s7yhxnz9v] {
    position: absolute;
    left: 0;
    top: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.back-arrow:hover[b-5s7yhxnz9v] {
    transform: translateX(-4px);
}

.back-arrow img[b-5s7yhxnz9v] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-title[b-5s7yhxnz9v] {
    font-size: var(--font-size-page-title);
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: 0;
    color: var(--color-text-black);
    margin: 0;
    text-align: center;
}

.main-title[b-5s7yhxnz9v] {
    font-size: var(--font-size-main-title);
    font-weight: 400;
    line-height: 1.25;
    /* 40px at 32px */
    letter-spacing: 0;
    color: var(--color-text-black);
    margin: 0;
}

/* ========== DESCRIPTION ========== */
.description[b-5s7yhxnz9v] {
    font-size: var(--font-size-description);
    font-weight: 400;
    line-height: 1.5;
    /* 24px at 16px */
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
    margin: 0;
}

.description br[b-5s7yhxnz9v] {
    content: "";
    display: block;
    margin-bottom: 0;
}

.link-green[b-5s7yhxnz9v],
.text-green[b-5s7yhxnz9v] {
    color: var(--color-green);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out;
}

.link-green:hover[b-5s7yhxnz9v] {
    text-decoration: none;
    background-size: 100% 2px;
}

/* ========== FORM GRID (2 COLUMNS) ========== */
.sellos-form[b-5s7yhxnz9v] {
    max-width: var(--container-max-width);
    margin: 0 auto var(--spacing-gap-sections);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-gap-columns);
}

@media (min-width: 900px) {
    .sellos-form[b-5s7yhxnz9v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-column[b-5s7yhxnz9v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-elements);
}

/* Right column uses ALL available height */
.form-column-right[b-5s7yhxnz9v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Important for flex children */
}

.form-column-right .form-textarea[b-5s7yhxnz9v] {
    flex: 1 0 auto;
    /* Takes all available space */
    min-height: 300px;
    /* Minimum on mobile */
}

@media (min-width: 900px) {
    .form-column-right .form-textarea[b-5s7yhxnz9v] {
        min-height: 0;
        /* Let flex handle it on desktop */
    }
}

/* ========== SECTION HEADING (Title + Separator Line) ========== */
.section-heading[b-5s7yhxnz9v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-heading);
}

.column-title[b-5s7yhxnz9v] {
    font-size: var(--font-size-column-title);
    font-weight: 400;
    line-height: 1.27;
    /* 28px at 22px */
    letter-spacing: 0;
    color: var(--color-text-primary);
    margin: 0;
}

.separator-line[b-5s7yhxnz9v] {
    width: 100%;
    height: 1px;
    background-color: var(--color-separator);
}

/* ========== FORM INPUTS ========== */
.form-input[b-5s7yhxnz9v],
.form-textarea[b-5s7yhxnz9v] {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-bg);
    border-radius: var(--input-border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-input);
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    outline: none;
}

.form-input[b-5s7yhxnz9v] {
    height: var(--input-height);
}

.form-input[b-5s7yhxnz9v]::placeholder,
.form-textarea[b-5s7yhxnz9v]::placeholder {
    color: var(--color-placeholder);
    font-weight: 300;
}

.form-input:focus[b-5s7yhxnz9v],
.form-textarea:focus[b-5s7yhxnz9v] {
    border: 2px solid var(--color-button-primary);    
}

/* Textarea fills available space */
.form-textarea[b-5s7yhxnz9v] {
    resize: vertical;
    padding-top: var(--input-padding-y);
}

/* ========== ACTION BUTTONS ========== */
.action-buttons[b-5s7yhxnz9v] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-columns);
    align-items: center;
}

@media (min-width: 900px) {
    .action-buttons[b-5s7yhxnz9v] {
        flex-direction: row;
        justify-content: center;
    }
}

.btn-submit[b-5s7yhxnz9v] {
    width: 100%;
    max-width: 592px;
    border-radius: var(--input-border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-button);
    font-weight: 600;
    line-height: 1.5;
    /* 24px */
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 10px 24px;
}

/* Submit Button (Green bg) */
.btn-submit[b-5s7yhxnz9v] {
    height: 54px;
    background: var(--color-button-primary);
    color: var(--color-white);
}

.btn-submit:hover:not(:disabled)[b-5s7yhxnz9v] {
    background: #35962f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 170, 54, 0.3);
}

.btn-submit:active:not(:disabled)[b-5s7yhxnz9v] {
    transform: translateY(0);
}

.btn-submit:disabled[b-5s7yhxnz9v] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 899px) {
    .header-top[b-5s7yhxnz9v] {
        flex-direction: row;
    }

    .page-title[b-5s7yhxnz9v] {
        flex: 1;
    }

    .description br[b-5s7yhxnz9v] {
        display: none;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *[b-5s7yhxnz9v] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {

    .back-arrow[b-5s7yhxnz9v],
    .action-buttons[b-5s7yhxnz9v] {
        display: none;
    }

    .sellos-container[b-5s7yhxnz9v] {
        padding: 0;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* ============================================================
   404 Error Page — Scoped Styles
   Matches Figma design: node 135:1216
   ============================================================ */

.error404-page[b-lpwi6yjfzf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white-background, #ffffff);
    padding: 0px 20px 120px;
    min-height: 60vh;
    overflow: hidden;
}

/* ── Broken pencil image ── */
.error404-image-wrapper[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 743px;
    display: flex;
    justify-content: center;
}

.error404-image[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 743px;
    height: auto;
    max-height: 495px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* ── Content block ── */
.error404-content[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 692px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ── Title row: "404 | ¡Ups! Se nos ha roto" ── */
.error404-title-row[b-lpwi6yjfzf] {
    display: flex;
    align-items: center;
    gap: 50px;
}

.error404-code[b-lpwi6yjfzf] {
    font-family: var(--display-medium-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--black-fonts-headings, #323332);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.error404-divider[b-lpwi6yjfzf] {
    width: 2px;
    height: 63px;
    background-color: var(--black-fonts-headings, #323332);
    flex-shrink: 0;
}

.error404-title[b-lpwi6yjfzf] {
    font-family: var(--display-large-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: var(--display-large-font-weight, 400);
    font-size: var(--display-large-font-size, 57px);
    line-height: var(--display-large-line-height, 64px);
    letter-spacing: var(--display-large-letter-spacing, -0.25px);
    margin: 0;
    white-space: nowrap;
}

.error404-ups[b-lpwi6yjfzf] {
    color: var(--primario, #3caa36);
}

.error404-broken[b-lpwi6yjfzf] {
    color: var(--black-fonts-headings, #323332);
}

/* ── Description block ── */
.error404-description-block[b-lpwi6yjfzf] {
    position: relative;
    width: 100%;
}

.error404-description[b-lpwi6yjfzf] {
    font-family: var(--l-body-0-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: var(--l-body-0-font-weight, 400);
    font-size: 18px;
    line-height: 1.6;
    color: var(--black-fonts-headings, #2d2e2e);
    margin: 0 0 12px 0;
    max-width: 520px;
}

.error404-back-link[b-lpwi6yjfzf] {
    display: block;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: var(--black-fonts-headings, #323332);
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.error404-back-link:hover[b-lpwi6yjfzf] {
    color: var(--primario, #3caa36);
    opacity: 0.85;
}

/* ── Responsive ── */

/* Tablets */
@media (max-width: 992px) {
    .error404-page[b-lpwi6yjfzf] {
        padding: 60px 30px 80px;
    }

    .error404-title-row[b-lpwi6yjfzf] {
        gap: 30px;
    }

    .error404-title[b-lpwi6yjfzf] {
        font-size: 42px;
        line-height: 50px;
    }

    .error404-code[b-lpwi6yjfzf] {
        font-size: 40px;
    }

    .error404-divider[b-lpwi6yjfzf] {
        height: 50px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .error404-page[b-lpwi6yjfzf] {
        padding: 40px 20px 60px;
        min-height: 50vh;
    }

    .error404-image-wrapper[b-lpwi6yjfzf] {
        margin-bottom: 24px;
    }

    .error404-title-row[b-lpwi6yjfzf] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .error404-divider[b-lpwi6yjfzf] {
        width: 60px;
        height: 2px;
    }

    .error404-code[b-lpwi6yjfzf] {
        font-size: 36px;
    }

    .error404-title[b-lpwi6yjfzf] {
        font-size: 28px;
        line-height: 36px;
        white-space: normal;
    }

    .error404-content[b-lpwi6yjfzf] {
        gap: 20px;
    }

    .error404-description[b-lpwi6yjfzf] {
        font-size: 15px;
    }
}
/* /Components/Pages/PedidoConfirmado.razor.rz.scp.css */
/* ========================================================================
   PedidoConfirmado - Responsive CSS (Figma-faithful + Home.razor patterns)
   ======================================================================== */

/* ============================================= */
/* VARIABLES CSS (mismo sistema que Home.razor)  */
/* ============================================= */
.pedido-confirmado[b-flju7vpd2g] {
    /* Colores del design system */
    --negro: #212121;
    --blanco: #FFFFFF;
    --black-fonts-headings: #2D2E2E;
    --gris-30: #E0E0E0;

    /* Paddings laterales - fluido hasta el max (misma escala que Home) */
    --padding-lateral: clamp(16px, 6vw, 115px);

    /* Padding inferior de página */
    --padding-bottom: clamp(40px, 5.2vw, 100px);

    /* Gaps entre secciones */
    --gap-sections: clamp(24px, 2.6vw, 50px);
    --gap-inner: clamp(16px, 1.56vw, 30px);
    --gap-items: clamp(12px, 1.04vw, 20px);

    /* Tipografía fluida */
    --font-header-bar: clamp(12px, 0.83vw, 16px);
    --font-title: clamp(22px, 1.67vw, 32px);
    --font-body: clamp(13px, 0.83vw, 16px);
    --font-product-name: clamp(13px, 0.83vw, 16px);
    --font-product-ref: clamp(12px, 0.83vw, 16px);

    /* Line heights fluidos */
    --lh-title: clamp(30px, 2.08vw, 40px);
    --lh-body: clamp(20px, 1.25vw, 24px);

    /* Tamaño imagen producto */
    --img-size: clamp(50px, 3.65vw, 70px);
    --img-radius: clamp(8px, 0.73vw, 14px);

    /* Tamaño iconos */
    --icon-size: clamp(18px, 1.25vw, 24px);

    /* Card de productos */
    --card-max-width: 673px;
    --card-padding: clamp(16px, 1.56vw, 30px);
    --card-radius: clamp(10px, 0.78vw, 15px);
    --card-border-color: var(--negro);

    /* Border radius general */
    --radius-card: clamp(7px, 0.73vw, 14px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */

.pedido-confirmado-loading[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.pedido-confirmado-loading p[b-flju7vpd2g] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9E9E9E;
}

.spinner[b-flju7vpd2g] {
    width: 50px;
    height: 50px;
    border: 4px solid #F5F5F5;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.pedido-confirmado[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 0 var(--padding-lateral) var(--padding-bottom);
    background-color: var(--blanco);
}

.pedido-confirmado-content[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sections);
    width: 100%;
    max-width: 1690px;
}

/* ============================================= */
/* BARRA SUPERIOR "PEDIDO CONFIRMADO"            */
/* ============================================= */
.pedido-confirmado-header-bar[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(14px, 1.04vw, 20px) 0;
}

.header-bar-text[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-header-bar);
    color: #000000;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ============================================= */
/* CUERPO PRINCIPAL                              */
/* ============================================= */
.pedido-confirmado-body[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-inner);
    width: 100%;
}

/* --- Título principal --- */
.pedido-confirmado-title[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-title);
    color: #000000;
    line-height: var(--lh-title);
    margin: 0;
    max-width: var(--card-max-width);
    width: 100%;
    text-align: left;
}

/* --- Subtítulo / descripción --- */
.pedido-confirmado-subtitle[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: var(--lh-body);
    letter-spacing: 0.5px;
    margin: 0;
    max-width: var(--card-max-width);
    width: 100%;
    text-align: left;
}

/* ============================================= */
/* SECCIÓN POR PEDIDO                            */
/* ============================================= */
.pedido-section[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* --- Contenedor interior limitado a ancho card --- */
.pedido-section-inner[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.78vw, 15px);
    width: 100%;
    max-width: var(--card-max-width);
}

/* --- Cabecera: Nº Pedido + iconos --- */
.pedido-section-header[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pedido-numero[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: var(--lh-body);
    letter-spacing: 0.5px;
}

.pedido-section-actions[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.3vw, 25px);
}

.pedido-action-icon[b-flju7vpd2g] {
    width: var(--icon-size);
    height: var(--icon-size);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.pedido-action-icon:hover[b-flju7vpd2g] {
    opacity: 1;
}

/* ============================================= */
/* CONTENEDOR DE PRODUCTOS (Card)                */
/* ============================================= */
.pedido-productos-container[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-items);
    width: 100%;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    background-color: var(--blanco);
}

/* ============================================= */
/* ITEM DE PRODUCTO                              */
/* ============================================= */
.pedido-producto-item[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    gap: var(--gap-items);
    padding-bottom: var(--gap-items);
    border-bottom: 1px dashed var(--gris-30);
}

.pedido-producto-item:last-child[b-flju7vpd2g] {
    border-bottom: none;
    padding-bottom: 0px;
}

/* --- Imagen --- */
.producto-image-link[b-flju7vpd2g] {
    flex-shrink: 0;
    text-decoration: none;
}

.producto-image-wrapper[b-flju7vpd2g] {
    width: var(--img-size);
    height: var(--img-size);
    border-radius: var(--img-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
}

.producto-img[b-flju7vpd2g] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--img-radius);
}

/* --- Info del producto (nombre + referencia) --- */
.producto-info[b-flju7vpd2g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.producto-descripcion[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-product-name);
    color: #000000;
    line-height: normal;
    text-decoration: none;
    word-break: break-word;
}

.producto-referencia[b-flju7vpd2g] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 300;
    font-size: var(--font-product-ref);
    color: #000000;
    line-height: normal;
}

/* --- Enlace "Ver" --- */
.producto-ver-link[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.26vw, 5px);
    text-decoration: none;
    color: #000000;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    flex-shrink: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.producto-ver-link:hover[b-flju7vpd2g] {
    opacity: 0.7;
}

.producto-ver-icon[b-flju7vpd2g] {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* --- Sin líneas --- */
.pedido-sin-lineas[b-flju7vpd2g] {
    padding: var(--card-padding);
    text-align: center;
    color: #888888;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--font-body);
}

.pedido-sin-lineas p[b-flju7vpd2g] {
    margin: 0;
}

/* ============================================= */
/* ALERTAS                                       */
/* ============================================= */
.pedido-confirmado .alert[b-flju7vpd2g] {
    width: 100%;
    max-width: var(--card-max-width);
    border-radius: 8px;
}

.pedido-confirmado .alert p[b-flju7vpd2g] {
    margin-bottom: 0;
}

/* ============================================= */
/* PAGE BLOCKER (loading overlay)                */
/* ============================================= */
.page-blocker[b-flju7vpd2g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.page-blocker-content[b-flju7vpd2g] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================= */
/* ACCESS DENIED / LOADING containers            */
/* ============================================= */
.loading-container[b-flju7vpd2g],
.access-denied-container[b-flju7vpd2g] {
    width: 100%;
    padding: clamp(24px, 2.08vw, 40px);
    text-align: center;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--font-body);
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
@media (max-width: 1024px) {
    .pedido-confirmado[b-flju7vpd2g] {
        --padding-lateral: 30px;
        --gap-sections: 30px;
        --gap-inner: 20px;
        --gap-items: 16px;
        --card-padding: 20px;
        --card-max-width: 100%;
        --img-size: 60px;
        --icon-size: 22px;
        --font-title: 26px;
        --font-body: 14px;
        --font-header-bar: 14px;
        --font-product-name: 14px;
        --font-product-ref: 14px;
        --lh-title: 34px;
        --lh-body: 22px;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE (max-width: 768px)        */
/* ============================================= */
@media (max-width: 768px) {
    .pedido-confirmado[b-flju7vpd2g] {
        --padding-lateral: 16px;
        --padding-bottom: 40px;
        --gap-sections: 24px;
        --gap-inner: 16px;
        --gap-items: 14px;
        --card-padding: 16px;
        --card-radius: 10px;
        --card-max-width: 100%;
        --img-size: 54px;
        --img-radius: 8px;
        --icon-size: 20px;
        --font-title: 22px;
        --font-body: 13px;
        --font-header-bar: 13px;
        --font-product-name: 13px;
        --font-product-ref: 13px;
        --lh-title: 30px;
        --lh-body: 20px;
    }

    .pedido-confirmado-subtitle[b-flju7vpd2g] {
        max-width: 100%;
    }

    /* Stack "Ver" link below info on very tight layouts */
    .producto-ver-link span[b-flju7vpd2g] {
        display: none;
    }

    .producto-ver-link[b-flju7vpd2g] {
        padding: 6px;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE SMALL (max-width: 480px)  */
/* ============================================= */
@media (max-width: 480px) {
    .pedido-confirmado[b-flju7vpd2g] {
        --padding-lateral: 12px;
        --padding-bottom: 30px;
        --gap-sections: 20px;
        --gap-inner: 14px;
        --gap-items: 12px;
        --card-padding: 14px;
        --card-radius: 10px;
        --img-size: 48px;
        --img-radius: 8px;
        --icon-size: 18px;
        --font-title: 20px;
        --font-body: 12px;
        --font-header-bar: 12px;
        --font-product-name: 12px;
        --font-product-ref: 11px;
        --lh-title: 28px;
        --lh-body: 18px;
    }

    .pedido-section-header[b-flju7vpd2g] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pedido-numero[b-flju7vpd2g] {
        flex: 1;
        min-width: 0;
    }
}
/* /Components/Pages/PedidosEnCurso.razor.rz.scp.css */
/* ============================================= */
/* PEDIDOS EN CURSO - CSS RESPONSIVE              */
/* Patrones de Home.razor (clamp) + MisListas    */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS LOCALES                         */
/* ============================================= */
.pedidos-en-curso[b-xnoqwpn0pa] {
    /* Colores (tokens del diseño) */
    --pec-negro: #212121;
    --pec-blanco: #FFFFFF;
    --pec-primario: #3CAA36;
    --pec-primario-hover: #80C87C;
    --pec-gris-10: #F5F5F5;
    --pec-gris-30: #E0E0E0;
    --pec-gris-50: #9E9E9E;
    --pec-alternativo-oscuro: #ECC61B;

    /* Paddings laterales — fluido, misma fórmula que Home */
    --pec-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gap entre secciones principales (contenido ↔ botón ayuda) */
    --pec-gap-sections: clamp(30px, 3.91vw, 75px);

    /* Gap dentro del frame (título ↔ contenido) — Figma: 10px */
    --pec-gap-inner: clamp(8px, 0.52vw, 10px);

    /* Padding de la caja gris */
    --pec-container-padding-x: clamp(20px, 3.91vw, 75px);
    --pec-container-padding-y: clamp(24px, 3.13vw, 60px);

    /* Border radius de la caja gris */
    --pec-container-radius: clamp(10px, 0.78vw, 15px);

    /* Tipografía fluida */
    --pec-font-header: clamp(13px, 0.83vw, 16px);
    --pec-font-title: clamp(22px, 1.67vw, 32px);
    --pec-font-body: clamp(13px, 0.83vw, 16px);
    --pec-font-button: clamp(13px, 0.83vw, 16px);
    --pec-font-small: clamp(10px, 0.63vw, 12px);

    /* Line heights */
    --pec-lh-title: clamp(28px, 2.08vw, 40px);
    --pec-lh-body: clamp(20px, 1.25vw, 24px);

    /* Título de página padding */
    --pec-title-py: clamp(12px, 1.04vw, 20px);

    /* Tabla: padding vertical de cada fila */
    --pec-row-py: clamp(20px, 2.08vw, 40px);

    /* Tabla: padding inferior del header */
    --pec-header-pb: clamp(10px, 1.04vw, 20px);

    /* Arrow icon */
    --pec-arrow-size: clamp(18px, 1.25vw, 24px);

    /* Botón HISTÓRICO (filled green) */
    --pec-btn-height: clamp(42px, 2.71vw, 52px);

    /* Botón SEGUIMIENTO (outline green) */
    --pec-btn-seguimiento-height: clamp(42px, 2.76vw, 53px);

    /* Iconos acciones */
    --pec-icon-size: clamp(20px, 1.25vw, 24px);

    /* Gap entre acciones (seguimiento + icons) */
    --pec-actions-gap: clamp(12px, 1.3vw, 25px);

    /* Botón ¿Te ayudamos? */
    --pec-help-btn-width: clamp(280px, 30.83vw, 592px);
    --pec-help-btn-height: clamp(44px, 2.71vw, 52px);

    /* Padding inferior de página */
    --pec-padding-bottom: clamp(40px, 5.21vw, 100px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.pedidos-en-curso[b-xnoqwpn0pa] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: center;
    gap: var(--pec-gap-sections);
    padding: 0 var(--pec-padding-lateral) var(--pec-padding-bottom);
    position: relative;
    background-color: var(--pec-blanco);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME CONTENEDOR GENERAL                      */
/* ============================================= */
.pedidos-en-curso .frame[b-xnoqwpn0pa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pec-gap-inner);
    position: relative;
    width: 100%;
}

/* ============================================= */
/* TÍTULO DE PÁGINA (PEDIDOS EN CURSO + flecha)  */
/* ============================================= */
.pedidos-en-curso .titulo[b-xnoqwpn0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pec-title-py) 0;
    position: relative;
    width: 100%;
}

.pedidos-en-curso .titulo h2[b-xnoqwpn0pa] {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--pec-font-header);
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

.pedidos-en-curso .titulo .iconos[b-xnoqwpn0pa] {
    position: absolute;
    width: var(--pec-arrow-size);
    height: var(--pec-arrow-size);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================= */
/* CABECERA: "Tienes X pedidos en curso" + botón */
/* ============================================= */
.pedidos-en-curso .div[b-xnoqwpn0pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    gap: 16px;
}

.pedidos-en-curso .text-wrapper[b-xnoqwpn0pa] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--pec-font-title);
    line-height: var(--pec-lh-title);
    white-space: nowrap;
}

/* ============================================= */
/* BOTÓN HISTÓRICO (filled green)                */
/* ============================================= */
.pedidos-en-curso .boton[b-xnoqwpn0pa] {
    display: inline-flex;
    flex-direction: column;
    height: var(--pec-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--pec-primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.pedidos-en-curso .boton:hover[b-xnoqwpn0pa] {
    background-color: var(--pec-primario-hover);
}

.pedidos-en-curso .boton .state-layer[b-xnoqwpn0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    width: 100%;
    height: 100%;
}

.pedidos-en-curso .boton .label-text[b-xnoqwpn0pa] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--pec-blanco);
    font-size: var(--pec-font-button);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--pec-lh-body);
    white-space: nowrap;
}

/* ============================================= */
/* ALERTAS                                       */
/* ============================================= */
.pedidos-en-curso .alert p[b-xnoqwpn0pa] {
    margin-bottom: 0;
}

/* ============================================= */
/* CAJA GRIS (contenedor de la tabla)            */
/* ============================================= */
.pedidos-en-curso .frame-2[b-xnoqwpn0pa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--pec-container-padding-y) var(--pec-container-padding-x);
    width: 100%;
    background-color: var(--pec-gris-10);
    border-radius: var(--pec-container-radius);
    box-sizing: border-box;
    margin-top: clamp(20px, 1.56vw, 30px);
}

/* ============================================= */
/* TABLA: Wrapper y container                    */
/* ============================================= */
.pedidos-en-curso .tabla-wrapper[b-xnoqwpn0pa] {
    width: 100%;
}

.pedidos-en-curso .tabla-container[b-xnoqwpn0pa] {
    width: 100%;
}

/* ============================================= */
/* TABLA: Estilos principales                    */
/* ============================================= */
.pedidos-en-curso .tabla-mejorada[b-xnoqwpn0pa] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: var(--pec-font-body);
}

/* ============================================= */
/* TABLA: THEAD                                  */
/* ============================================= */
.pedidos-en-curso .tabla-mejorada thead[b-xnoqwpn0pa] {
    color: #000000;
    font-weight: 700;
}

.pedidos-en-curso .tabla-mejorada thead tr[b-xnoqwpn0pa] {
    border-bottom: 2px solid #000000;
}

.pedidos-en-curso .tabla-mejorada th[b-xnoqwpn0pa] {
    padding: 0 0 var(--pec-header-pb) 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--pec-font-body);
    line-height: normal;
    text-align: center;
    vertical-align: bottom;
}

/* Columnas del header — proporciones Figma (total ~1441px) */
/* Fecha: 110px, Pedido: 200px, Usuario: 200px, Dirección: 350px, */
/* Importe sinIVA: 110px, Importe conIVA: ~110px, Seguimiento: ~161px */
.pedidos-en-curso .tabla-mejorada .th1[b-xnoqwpn0pa] {
    text-align: left;
    width: 8%;
}

.pedidos-en-curso .tabla-mejorada .th2[b-xnoqwpn0pa] {
    width: 14%;
}

.pedidos-en-curso .tabla-mejorada .th3[b-xnoqwpn0pa] {
    width: 14%;
}

.pedidos-en-curso .tabla-mejorada .th4[b-xnoqwpn0pa] {
    width: 24%;
}

.pedidos-en-curso .tabla-mejorada .th5[b-xnoqwpn0pa] {
    text-align: right;
    width: 8%;
}

.pedidos-en-curso .tabla-mejorada .th6[b-xnoqwpn0pa] {
    text-align: right;
    width: 8%;
}

/* Seguimiento = acciones column */
.pedidos-en-curso .tabla-mejorada .th7[b-xnoqwpn0pa] {
    text-align: center;
    width: 24%;
}


.pedidos-en-curso .tabla-mejorada th .subheader[b-xnoqwpn0pa] {
    font-size: var(--pec-font-small);
    font-weight: 400;
    color: var(--pec-gris-50);
    letter-spacing: 0.4px;
    margin-left: 4px;
}

/* ============================================= */
/* TABLA: TBODY                                  */
/* ============================================= */
.pedidos-en-curso .tabla-mejorada tbody tr[b-xnoqwpn0pa] {
    border-bottom: 1px solid var(--pec-gris-30);
}

.pedidos-en-curso .tabla-mejorada tbody tr:last-child[b-xnoqwpn0pa] {
    border-bottom: none;
}

.pedidos-en-curso .tabla-mejorada td[b-xnoqwpn0pa] {
    padding: var(--pec-row-py) 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--pec-font-body);
    line-height: var(--pec-lh-body);
    letter-spacing: 0.5px;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

/* Columnas de datos */
.pedidos-en-curso .tabla-mejorada .td1[b-xnoqwpn0pa] {
    text-align: left;
}

.pedidos-en-curso .tabla-mejorada .td4[b-xnoqwpn0pa] {
    text-align: center;
    word-break: break-word;
}

.pedidos-en-curso .tabla-mejorada .td5[b-xnoqwpn0pa],
.pedidos-en-curso .tabla-mejorada .td6[b-xnoqwpn0pa] {
    text-align: right;
}

/* ============================================= */
/* TABLA: Acciones (seguimiento + iconos)        */
/* ============================================= */
.pedidos-en-curso .tabla-mejorada .td7 .td-content[b-xnoqwpn0pa] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--pec-actions-gap);
}

/* Botón SEGUIMIENTO (outline green) */
.pedidos-en-curso .state-layer-wrapper-2[b-xnoqwpn0pa] {
    display: inline-flex;
    height: var(--pec-btn-seguimiento-height);
    align-items: center;
    justify-content: center;
    background-color: var(--pec-blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--pec-primario);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    padding: 0 clamp(16px, 1.25vw, 24px);
}

.pedidos-en-curso .state-layer-wrapper-2:hover[b-xnoqwpn0pa] {
    background-color: var(--pec-primario);
}

.pedidos-en-curso .state-layer-wrapper-2:hover .label-text-3[b-xnoqwpn0pa] {
    color: var(--pec-blanco);
}

.pedidos-en-curso .state-layer-2[b-xnoqwpn0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pedidos-en-curso .label-text-3[b-xnoqwpn0pa] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--pec-primario);
    font-size: var(--pec-font-button);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--pec-lh-body);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Iconos de acciones (download, ojo) */
.pedidos-en-curso .img[b-xnoqwpn0pa] {
    width: var(--pec-icon-size);
    height: var(--pec-icon-size);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.pedidos-en-curso .img:hover[b-xnoqwpn0pa] {
    transform: scale(1.15);
    opacity: 0.7;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?"                         */
/* ============================================= */
.pedidos-en-curso .state-layer-wrapper[b-xnoqwpn0pa] {
    display: flex;
    flex-direction: column;
    width: var(--pec-help-btn-width);
    max-width: 100%;
    height: var(--pec-help-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--pec-blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--pec-alternativo-oscuro);
    transition: background-color 0.2s ease;
}

.pedidos-en-curso .state-layer-wrapper:hover[b-xnoqwpn0pa] {
    background-color: var(--pec-alternativo-oscuro);
    cursor: pointer;
}

.pedidos-en-curso .state-layer-wrapper:hover .label-text-2[b-xnoqwpn0pa] {
    color: var(--pec-blanco);
}

.pedidos-en-curso .state-layer-wrapper .state-layer[b-xnoqwpn0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
}

.pedidos-en-curso .label-text-2[b-xnoqwpn0pa] {
    text-decoration: none;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: var(--pec-negro);
    font-size: var(--pec-font-button);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: var(--pec-lh-body);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                        */
/* ============================================= */
.page-blocker[b-xnoqwpn0pa] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-xnoqwpn0pa] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.pedidos-en-curso .spinner-border[b-xnoqwpn0pa] {
    color: var(--pec-blanco);
}

/* ============================================= */
/* MOBILE: Labels ocultos en desktop             */
/* ============================================= */
.pedidos-en-curso .mobile-label[b-xnoqwpn0pa] {
    display: none;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .pedidos-en-curso[b-xnoqwpn0pa] {
        --pec-padding-lateral: 30px;
        --pec-gap-sections: 40px;
        --pec-gap-inner: 20px;
        --pec-container-padding-x: 30px;
        --pec-container-padding-y: 30px;
        --pec-font-title: 24px;
        --pec-lh-title: 32px;
        --pec-row-py: 20px;
        --pec-header-pb: 14px;
        --pec-btn-height: 46px;
        --pec-btn-seguimiento-height: 42px;
        --pec-icon-size: 22px;
        --pec-actions-gap: 16px;
        --pec-help-btn-width: 100%;
        --pec-help-btn-height: 48px;
        --pec-padding-bottom: 60px;
    }

    /* Ocultar columna Dirección en tablet para ganar espacio */
    .pedidos-en-curso .tabla-mejorada .th4[b-xnoqwpn0pa] {
        width: 20%;
    }

    .pedidos-en-curso .tabla-mejorada .th8[b-xnoqwpn0pa] {
        width: 20%;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* Tabla → layout de tarjetas apiladas           */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .pedidos-en-curso[b-xnoqwpn0pa] {
        --pec-padding-lateral: 16px;
        --pec-gap-sections: 30px;
        --pec-gap-inner: 16px;
        --pec-container-padding-x: 16px;
        --pec-container-padding-y: 20px;
        --pec-container-radius: 12px;
        --pec-font-header: 14px;
        --pec-font-title: 20px;
        --pec-lh-title: 28px;
        --pec-font-body: 14px;
        --pec-font-button: 14px;
        --pec-font-small: 11px;
        --pec-title-py: 14px;
        --pec-row-py: 16px;
        --pec-btn-height: 44px;
        --pec-btn-seguimiento-height: 40px;
        --pec-icon-size: 22px;
        --pec-actions-gap: 12px;
        --pec-help-btn-width: 100%;
        --pec-help-btn-height: 46px;
        --pec-padding-bottom: 40px;
    }

    /* Cabecera: apilar título y botón */
    .pedidos-en-curso .div[b-xnoqwpn0pa] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pedidos-en-curso .text-wrapper[b-xnoqwpn0pa] {
        white-space: normal;
    }

    .pedidos-en-curso .boton[b-xnoqwpn0pa] {
        width: 100%;
    }

    /* ========== TABLA → TARJETAS ========== */
    .pedidos-en-curso .tabla-mejorada thead[b-xnoqwpn0pa] {
        display: none;
    }

    .pedidos-en-curso .tabla-mejorada[b-xnoqwpn0pa],
    .pedidos-en-curso .tabla-mejorada tbody[b-xnoqwpn0pa] {
        display: block;
        width: 100%;
    }

    /* Cada fila → grid de tarjeta */
    .pedidos-en-curso .tabla-mejorada tbody tr[b-xnoqwpn0pa] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "fecha    pedido"
            "usuario  direccion"
            "siniva   coniva"
            "acciones acciones";
        gap: 10px 16px;
        padding: var(--pec-row-py) 0;
        border-bottom: 1px dashed var(--pec-gris-30);
        align-items: start;
    }

    .pedidos-en-curso .tabla-mejorada tbody tr:last-child[b-xnoqwpn0pa] {
        border-bottom: 1px dashed var(--pec-gris-30);
    }

    .pedidos-en-curso .tabla-mejorada .td1[b-xnoqwpn0pa] {
        grid-area: fecha;
        text-align: left;
    }

    .pedidos-en-curso .tabla-mejorada .td2[b-xnoqwpn0pa] {
        grid-area: pedido;
        text-align: right;
    }

    .pedidos-en-curso .tabla-mejorada .td3[b-xnoqwpn0pa] {
        grid-area: usuario;
        text-align: left;
    }

    .pedidos-en-curso .tabla-mejorada .td4[b-xnoqwpn0pa] {
        grid-area: direccion;
        text-align: right;
        word-break: break-word;
    }

    .pedidos-en-curso .tabla-mejorada .td5[b-xnoqwpn0pa] {
        grid-area: siniva;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .pedidos-en-curso .tabla-mejorada .td6[b-xnoqwpn0pa] {
        grid-area: coniva;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .pedidos-en-curso .tabla-mejorada .td7[b-xnoqwpn0pa] {
        grid-area: acciones;
    }

    .pedidos-en-curso .tabla-mejorada .td7 .td-content[b-xnoqwpn0pa] {
        justify-content: flex-start;
        gap: 12px;
    }

    .pedidos-en-curso .state-layer-wrapper-2[b-xnoqwpn0pa] {
        flex: 1;
        max-width: 200px;
    }

    /* Mostrar labels en mobile */
    .pedidos-en-curso .mobile-label[b-xnoqwpn0pa] {
        display: inline;
        font-weight: 700;
        font-size: 12px;
        color: var(--pec-gris-50);
        letter-spacing: 0.3px;
        text-transform: uppercase;
        margin-right: 4px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .pedidos-en-curso[b-xnoqwpn0pa] {
        --pec-padding-lateral: 12px;
        --pec-gap-sections: 24px;
        --pec-gap-inner: 12px;
        --pec-container-padding-x: 12px;
        --pec-container-padding-y: 16px;
        --pec-font-title: 18px;
        --pec-lh-title: 24px;
        --pec-font-body: 13px;
        --pec-font-button: 13px;
        --pec-btn-height: 42px;
        --pec-btn-seguimiento-height: 38px;
        --pec-icon-size: 20px;
        --pec-actions-gap: 10px;
        --pec-padding-bottom: 30px;
    }

    .pedidos-en-curso .tabla-mejorada tbody tr[b-xnoqwpn0pa] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .pedidos-en-curso .state-layer-wrapper-2[b-xnoqwpn0pa] {
        max-width: none;
        flex: 1;
    }
}
/* /Components/Pages/PedidosPendientes.razor.rz.scp.css */
/* ============================================= */
/* PEDIDOS PENDIENTES - RESPONSIVE CSS            */
/* Siguiendo patrones de Home.razor con clamp()   */
/* ============================================= */

/* ============================================= */
/* VARIABLES CSS RESPONSIVE                       */
/* ============================================= */
.pedidos-pendientes[b-um73pkj88f] {
    /* Layout */
    --pp-padding-lateral: clamp(16px, 6vw, 115px);
    --pp-padding-bottom: clamp(40px, 5.21vw, 100px);
    --pp-section-gap: clamp(30px, 3.91vw, 75px);
    --pp-content-gap: clamp(16px, 1.56vw, 30px);

    /* Tabla container */
    --pp-table-padding: clamp(20px, 3.91vw, 75px);
    --pp-table-padding-y: 50px;
    --pp-table-radius: clamp(10px, 0.78vw, 15px);
    --pp-row-padding-y: clamp(16px, 2.08vw, 40px);
    --pp-actions-gap: clamp(12px, 1.3vw, 25px);
    --pp-data-actions-gap: clamp(20px, 2.6vw, 50px);

    /* Tipografía fluida */
    --pp-font-title: clamp(20px, 1.67vw, 32px);
    --pp-font-title-lh: clamp(28px, 2.08vw, 40px);
    --pp-font-body: clamp(13px, 0.83vw, 16px);
    --pp-font-body-lh: clamp(18px, 1.25vw, 24px);
    --pp-font-header: clamp(13px, 0.83vw, 16px);
    --pp-font-small: clamp(10px, 0.63vw, 12px);
    --pp-font-page-title: clamp(13px, 0.83vw, 16px);

    /* Botones */
    --pp-btn-height: clamp(40px, 2.71vw, 52px);
    --pp-btn-padding-x: clamp(16px, 1.25vw, 24px);
    --pp-btn-radius: 6px;
    --pp-btn-font: clamp(13px, 0.83vw, 16px);
    --pp-icon-size: clamp(20px, 1.25vw, 24px);

    /* Help button */
    --pp-help-width: clamp(280px, 30.83vw, 592px);
    --pp-help-height: clamp(40px, 2.71vw, 52px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                           */
/* ============================================= */
.pedidos-pendientes[b-um73pkj88f] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--pp-section-gap);
    padding: 0 var(--pp-padding-lateral) var(--pp-padding-bottom);
    position: relative;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME GENERAL (contenedor de secciones)        */
/* ============================================= */
.pedidos-pendientes .frame[b-um73pkj88f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pp-content-gap);
    width: 100%;
    flex: 0 0 auto;
    position: relative;
}

/* Outer frame: 10px gap between titulo and content section (Figma: gap-10px) */
.pedidos-pendientes > .frame[b-um73pkj88f] {
    gap: 10px;
}

/* ============================================= */
/* TÍTULO DE PÁGINA (con icono flecha)            */
/* ============================================= */
.pedidos-pendientes .titulo[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.pedidos-pendientes h2[b-um73pkj88f] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--pp-font-page-title);
    letter-spacing: 0;
    line-height: normal;
}

.pedidos-pendientes .iconos[b-um73pkj88f] {
    position: absolute;
    width: var(--pp-icon-size);
    height: var(--pp-icon-size);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ============================================= */
/* SUBTÍTULO + BOTÓN "TRAMITAR TODO"              */
/* ============================================= */
.pedidos-pendientes .div[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    gap: clamp(12px, 1.25vw, 24px);
    flex-wrap: wrap;
}

.pedidos-pendientes .text-wrapper[b-um73pkj88f] {
    position: relative;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--pp-font-title);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--pp-font-title-lh);
    font-style: var(--headline-large-font-style);
}

.pedidos-pendientes .boton[b-um73pkj88f] {
    display: inline-flex;
    flex-direction: column;
    height: var(--pp-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .pedidos-pendientes .boton:hover[b-um73pkj88f] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

.pedidos-pendientes .state-layer[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    position: relative;
    flex: 1;
    width: 100%;
    flex-grow: 1;
}

.pedidos-pendientes .label-text[b-um73pkj88f] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

/* ============================================= */
/* CONTENEDOR DE TABLA (fondo gris redondeado)    */
/* ============================================= */
.pedidos-pendientes .frame-2[b-um73pkj88f] {
    background-color: var(--grisgris-10);
    border-radius: var(--pp-table-radius);
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: var(--pp-table-padding-y) var(--pp-table-padding);
    margin-top: 20px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.tabla-wrapper[b-um73pkj88f] {
    width: 100%;
}

.tabla-container[b-um73pkj88f] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

/* ============================================= */
/* TABLA - DESKTOP                                */
/* ============================================= */
.pedidos-pendientes .tabla-mejorada[b-um73pkj88f] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--body-large-font-family, 'Nunito Sans', sans-serif);
    background-color: transparent;
    font-size: var(--pp-font-body);
    padding: 0;
    table-layout: fixed;
}

/* ============================================= */
/* TABLA CABECERA                                 */
/* ============================================= */
.pedidos-pendientes .tabla-mejorada thead[b-um73pkj88f] {
    background-color: transparent;
    color: #000000;
    font-weight: 700;
}

.pedidos-pendientes .tabla-mejorada thead tr[b-um73pkj88f] {
    border-bottom: 2px solid #000000;
}

.pedidos-pendientes .tabla-mejorada th[b-um73pkj88f] {
    padding: 0 clamp(4px, 0.42vw, 8px) clamp(12px, 1.04vw, 20px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--pp-font-header);
    line-height: normal;
    color: #000000;
    text-align: left;
    border-bottom: 2px solid #000000;
    white-space: nowrap;
}

/* Anchos relativos de columnas con porcentajes */
.pedidos-pendientes .tabla-mejorada .th1[b-um73pkj88f] { width: 8%; text-align: left; }
.pedidos-pendientes .tabla-mejorada .th2[b-um73pkj88f] { width: 11%; text-align: center; }
.pedidos-pendientes .tabla-mejorada .th3[b-um73pkj88f] { width: 11%; text-align: center; }
.pedidos-pendientes .tabla-mejorada .th4[b-um73pkj88f] { width: 22%; text-align: center; }
.pedidos-pendientes .tabla-mejorada .th5[b-um73pkj88f] { width: 11%; text-align: right; }
.pedidos-pendientes .tabla-mejorada .th6[b-um73pkj88f] { width: 12%; text-align: right; }
.pedidos-pendientes .tabla-mejorada .th7[b-um73pkj88f] { width: 25%; text-align: right; }

.pedidos-pendientes .tabla-mejorada th .subheader[b-um73pkj88f] {
    font-size: var(--pp-font-small);
    font-weight: 400;
    color: var(--grisgris-50);
    letter-spacing: 0.4px;
    line-height: 16px;
}

/* ============================================= */
/* TABLA FILAS DE DATOS                           */
/* ============================================= */
.pedidos-pendientes .tabla-mejorada td[b-um73pkj88f] {
    padding: var(--pp-row-padding-y) clamp(4px, 0.42vw, 8px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--pp-font-body);
    line-height: var(--pp-font-body-lh);
    letter-spacing: 0.5px;
    color: #000000;
    background-color: transparent;
    vertical-align: middle;
    word-break: break-word;
}

.pedidos-pendientes .tabla-mejorada tbody tr:not(:last-child) td[b-um73pkj88f] {
    border-bottom: 1px dashed var(--grisgris-30);
}

.pedidos-pendientes .tabla-mejorada .td1[b-um73pkj88f] { text-align: left; }
.pedidos-pendientes .tabla-mejorada .td2[b-um73pkj88f] { text-align: center; }
.pedidos-pendientes .tabla-mejorada .td3[b-um73pkj88f] { text-align: center; }
.pedidos-pendientes .tabla-mejorada .td4[b-um73pkj88f] { text-align: center; }
.pedidos-pendientes .tabla-mejorada .td5[b-um73pkj88f] { text-align: right; }
.pedidos-pendientes .tabla-mejorada .td6[b-um73pkj88f] { text-align: right; }
.pedidos-pendientes .tabla-mejorada .td7[b-um73pkj88f] { text-align: right; }

/* ============================================= */
/* ACCIONES EN FILA (botón + iconos)              */
/* ============================================= */
.pedidos-pendientes .tabla-mejorada .td7 .td-content[b-um73pkj88f] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--pp-actions-gap);
}

.pedidos-pendientes .state-layer-wrapper-2[b-um73pkj88f] {
    display: flex;
    flex-direction: column;
    height: clamp(40px, 2.76vw, 53px);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--primario);
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pedidos-pendientes .state-layer-wrapper-2 .state-layer-2[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    width: 100%;
    height: 100%;
}

.pedidos-pendientes .state-layer-wrapper-2:hover[b-um73pkj88f] {
    background-color: var(--primario);
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pedidos-pendientes .state-layer-wrapper-2:hover .label-text-3[b-um73pkj88f] {
    color: var(--blanco);
}

.pedidos-pendientes .label-text-3[b-um73pkj88f] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--primario);
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.2s ease;
}

.pedidos-pendientes .state-layer-wrapper-3[b-um73pkj88f] {
    display: flex;
    flex-direction: column;
    height: clamp(40px, 2.76vw, 53px);
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pedidos-pendientes .state-layer-wrapper-3 .state-layer-3[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    width: 100%;
    height: 100%;
}

.pedidos-pendientes .label-text-4[b-um73pkj88f] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: #DE3730;
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.2s ease;
}

.pedidos-pendientes[b-um73pkj88f]  .img {
    position: relative;
    width: var(--pp-icon-size);
    height: var(--pp-icon-size);
    color: #212121; /* TrashIcon (svg, stroke=currentColor); no afecta a editar.svg/ojo.svg (<img>) */
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.pedidos-pendientes[b-um73pkj88f]  .img:hover {
    opacity: 0.6;
}

/* ============================================= */
/* BOTÓN "¿TE AYUDAMOS?" (amarillo, centrado)     */
/* ============================================= */
.pedidos-pendientes .state-layer-wrapper[b-um73pkj88f] {
    display: flex;
    flex-direction: column;
    width: var(--pp-help-width);
    max-width: 100%;
    height: var(--pp-help-height);
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--blanco);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--alternativo-oscuro);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.pedidos-pendientes .state-layer-wrapper:hover[b-um73pkj88f] {
    background-color: var(--alternativo-oscuro);
}

.pedidos-pendientes .state-layer-wrapper:hover .label-text-2[b-um73pkj88f] {
    color: var(--blanco);
}

.pedidos-pendientes .label-text-2[b-um73pkj88f] {
    position: relative;
    width: fit-content;
    text-decoration: none;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--pp-btn-font);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
    transition: color 0.2s ease;
}

/* ============================================= */
/* ALERTAS Y MENSAJES                             */
/* ============================================= */
.pedidos-pendientes .alert[b-um73pkj88f] {
    width: 100%;
    padding: clamp(12px, 1.04vw, 20px);
    border-radius: var(--pp-btn-radius);
    font-size: var(--pp-font-body);
    line-height: var(--pp-font-body-lh);
}

.pedidos-pendientes .frame .alert p[b-um73pkj88f] {
    margin-bottom: 0;
}

/* ============================================= */
/* SPINNER / PAGE BLOCKER                         */
/* ============================================= */
.pedidos-pendientes .spinner-border[b-um73pkj88f] {
    color: var(--blanco);
}

.page-blocker[b-um73pkj88f] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-um73pkj88f] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}


/* ============================================= */
/* POPUP RESULTADO TRAMITACIÓN MASIVA             */
/* ============================================= */
/*.popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.popup-container {
    background-color: #ffffff;
    border-radius: var(--pp-table-radius);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    font-family: 'Nunito Sans', Helvetica, sans-serif;
}

.popup-header {
    padding: clamp(16px, 1.25vw, 24px) clamp(20px, 1.56vw, 30px) clamp(10px, 0.78vw, 15px);
}

.popup-header h3 {
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--pp-font-title);
    line-height: var(--pp-font-title-lh);
    color: #000000;
}

.popup-body {
    padding: var(--pp-content-gap) clamp(24px, 2vw, 40px);
    overflow-y: auto;
    flex: 1;
    max-height: 50vh;
    padding-left: 10px;
    padding-right: 10px;
}*/

/* Pedido row */
/*.popup-pedido {
    border: 1px solid var(--grisgris-30);
    border-radius: var(--pp-btn-radius);
    padding: clamp(12px, 1vw, 18px) clamp(16px, 1.25vw, 24px);
    margin-bottom: clamp(10px, 0.78vw, 14px);
}

.popup-pedido:last-child {
    margin-bottom: 0;
}

.popup-pedido-ok {
    border-left: 4px solid var(--primario);
}

.popup-pedido-ko {
    border-left: 4px solid #f44336;
}*/

/* Pedido header */
/*.popup-pedido-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.popup-pedido-titulo {
    font-weight: 600;
    font-size: var(--pp-font-body);
    line-height: var(--pp-font-body-lh);
    color: #000000;
}

.popup-pedido-estado {
    font-size: var(--pp-font-body);
    font-weight: 700;
    white-space: nowrap;
}

.popup-pedido-estado.estado-ok {
    color: var(--primario);
}

.popup-pedido-estado.estado-ko {
    color: #f44336;
}*/

/* Errores y avisos */
/*.popup-pedido-errores,
.popup-pedido-avisos {
    margin-top: 8px;
    font-size: var(--pp-font-small);
    line-height: var(--pp-font-body-lh);
}

.popup-pedido-errores {
    color: #d32f2f;
}

.popup-pedido-avisos {
    color: #e65100;
}

.popup-pedido-errores p,
.popup-pedido-avisos p {
    margin: 2px 0;
}*/

/* Footer */
/*.popup-footer {
    padding: clamp(12px, 1.04vw, 20px) clamp(20px, 1.56vw, 30px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.popup-footer .boton-1 {
    display: inline-flex;
    flex-direction: column;
    height: var(--pp-btn-height);
    min-width: 120px;
    align-items: center;
    justify-content: center;
    background-color: var(--blanco);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    border: 1px solid var(--grisgris-50);
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-footer .boton-1:hover {
    background-color: var(--grisgris-20, #e0e0e0);
    border-color: var(--grisgris-60, #999);
}

.popup-footer .boton-1 .state-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    width: 100%;
    height: 100%;
}

.popup-footer .boton-1 .label-text {
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: #000000;
    font-size: var(--pp-btn-font);
    white-space: nowrap;
}

.popup-footer .boton-2 {
    display: inline-flex;
    flex-direction: column;
    height: var(--pp-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--primario);
    border-radius: var(--pp-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.popup-footer .boton-2:hover {
    background-color: #80C87C;
}

.popup-footer .boton-2 .state-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.52vw, 10px) var(--pp-btn-padding-x);
    width: 100%;
    height: 100%;
}

.popup-footer .boton-2 .label-text {
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--pp-btn-font);
    white-space: nowrap;
}*/

/* ============================================= */
/* POPUP RESULTADO TRAMITACIÓN                    */
/* ============================================= */
.popup-overlay[b-um73pkj88f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popupOverlayIn-b-um73pkj88f 0.2s ease;
}

@keyframes popupOverlayIn-b-um73pkj88f {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.popup-container[b-um73pkj88f] {
    position: relative;
    width: 703px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    animation: popupSlideIn-b-um73pkj88f 0.3s ease;
}

@keyframes popupSlideIn-b-um73pkj88f {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== CLOSE BUTTON ===== */
.popup-close[b-um73pkj88f] {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.popup-close:hover[b-um73pkj88f] {
    opacity: 0.6;
}

/* ===== HEADER ===== */
.popup-header[b-um73pkj88f] {
    padding: 50px 100px 0;
}

.popup-header h3[b-um73pkj88f] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #000000;
    text-align: center;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== BODY ===== */
.popup-body[b-um73pkj88f] {
    padding: 45px 100px;
    overflow-y: auto;
    flex: 1;
    max-height: 50vh;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.popup-body[b-um73pkj88f]::-webkit-scrollbar {
    width: 4px;
}

.popup-body[b-um73pkj88f]::-webkit-scrollbar-track {
    background: transparent;
}

.popup-body[b-um73pkj88f]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* ===== PEDIDO ROW ===== */
.popup-pedido[b-um73pkj88f] {
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    padding: 16px 24px;
    margin-bottom: 12px;
}

.popup-pedido:last-child[b-um73pkj88f] {
    margin-bottom: 0;
}

.popup-pedido-ok[b-um73pkj88f] {
    border-left: 4px solid #3CAA36;
}

.popup-pedido-ko[b-um73pkj88f] {
    border-left: 4px solid #f44336;
}

/* Pedido header */
.popup-pedido-header[b-um73pkj88f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.popup-pedido-titulo[b-um73pkj88f] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #000000;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.popup-pedido-estado[b-um73pkj88f] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.popup-pedido-estado.estado-ok[b-um73pkj88f] {
    color: #3CAA36;
}

.popup-pedido-estado.estado-ko[b-um73pkj88f] {
    color: #f44336;
}

/* Errores y avisos */
.popup-pedido-errores[b-um73pkj88f],
.popup-pedido-avisos[b-um73pkj88f] {
    margin-top: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.popup-pedido-errores[b-um73pkj88f] {
    color: #d32f2f;
}

.popup-pedido-avisos[b-um73pkj88f] {
    color: #e65100;
}

.popup-pedido-errores p[b-um73pkj88f],
.popup-pedido-avisos p[b-um73pkj88f] {
    margin: 2px 0;
}

/* ===== FOOTER ===== */
.popup-footer[b-um73pkj88f] {
    padding: 0 100px 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Botón principal (ir al pedido confirmado) */
.popup-footer .boton-2[b-um73pkj88f] {
    width: 100%;
    height: 54px;
    background: #3CAA36;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-footer .boton-2:hover[b-um73pkj88f] {
    background: #2E8A2A;
}

.popup-footer .boton-2 .state-layer[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
}

.popup-footer .boton-2 .label-text[b-um73pkj88f] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #FFFFFF;
    text-align: center;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Botón cerrar */
.popup-footer .boton-1[b-um73pkj88f] {
    width: 100%;
    height: 53px;
    background: #FFFFFF;
    border: 1px solid var(--grisgris-50, #9E9E9E);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-footer .boton-1:hover[b-um73pkj88f] {
    background: var(--grisgris-10, #F5F5F5);
    border-color: var(--grisgris-60, #757575);
}

.popup-footer .boton-1 .state-layer[b-um73pkj88f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
}

.popup-footer .boton-1 .label-text[b-um73pkj88f] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #212121;
    text-align: center;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ============================================= */
/* MOBILE LABELS (ocultos en desktop)             */
/* ============================================= */
.pedidos-pendientes .mobile-label[b-um73pkj88f] {
    display: none;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)        */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .pedidos-pendientes[b-um73pkj88f] {
        --pp-padding-lateral: 30px;
        --pp-section-gap: 40px;
        --pp-content-gap: 20px;
        --pp-table-padding: 30px;
        --pp-table-padding-y: 35px;
        --pp-table-radius: 12px;
        --pp-row-padding-y: 20px;
        --pp-actions-gap: 15px;
        --pp-data-actions-gap: 20px;
        --pp-font-title: 24px;
        --pp-font-title-lh: 32px;
        --pp-font-body: 14px;
        --pp-font-body-lh: 20px;
        --pp-font-header: 13px;
        --pp-font-small: 10px;
        --pp-font-page-title: 14px;
        --pp-btn-height: 42px;
        --pp-btn-padding-x: 16px;
        --pp-btn-font: 13px;
        --pp-icon-size: 22px;
        --pp-help-width: 400px;
        --pp-help-height: 44px;
    }

    /* En tablet la tabla se puede comprimir pero sigue siendo tabla */
    .pedidos-pendientes .tabla-mejorada[b-um73pkj88f] {
        table-layout: auto;
    }

    .pedidos-pendientes .tabla-mejorada th[b-um73pkj88f],
    .pedidos-pendientes .tabla-mejorada td[b-um73pkj88f] {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Ajustar anchos para tablet */
    .pedidos-pendientes .tabla-mejorada .th1[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th2[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th3[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th4[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th5[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th6[b-um73pkj88f] { width: auto; }
    .pedidos-pendientes .tabla-mejorada .th7[b-um73pkj88f] { width: auto; }

    .pedidos-pendientes .text-wrapper[b-um73pkj88f] {
        font-size: var(--pp-font-title);
        line-height: var(--pp-font-title-lh);
    }

    .popup-container[b-um73pkj88f] {
        max-width: 540px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)          */
/* Tabla se convierte en tarjetas                 */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .pedidos-pendientes[b-um73pkj88f] {
        --pp-padding-lateral: 16px;
        --pp-section-gap: 30px;
        --pp-content-gap: 16px;
        --pp-table-padding: 16px;
        --pp-table-padding-y: 20px;
        --pp-table-radius: 10px;
        --pp-row-padding-y: 0;
        --pp-actions-gap: 12px;
        --pp-font-title: 20px;
        --pp-font-title-lh: 28px;
        --pp-font-body: 14px;
        --pp-font-body-lh: 20px;
        --pp-font-header: 12px;
        --pp-font-small: 10px;
        --pp-font-page-title: 13px;
        --pp-btn-height: 40px;
        --pp-btn-padding-x: 14px;
        --pp-btn-font: 13px;
        --pp-icon-size: 22px;
        --pp-help-width: 100%;
        --pp-help-height: 44px;
    }

    .pedidos-pendientes .frame-2[b-um73pkj88f] {
        margin-top: 10px;
    }

    /* Subtítulo + botón en columna */
    .pedidos-pendientes .div[b-um73pkj88f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pedidos-pendientes .boton[b-um73pkj88f] {
        width: 100%;
    }

    .pedidos-pendientes .boton .state-layer[b-um73pkj88f] {
        justify-content: center;
    }

    /* ===== TABLA → TARJETAS ===== */
    .pedidos-pendientes .tabla-mejorada[b-um73pkj88f] {
        display: block;
    }

    .pedidos-pendientes .tabla-mejorada thead[b-um73pkj88f] {
        display: none;
    }

    .pedidos-pendientes .tabla-mejorada tbody[b-um73pkj88f] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pedidos-pendientes .tabla-mejorada tbody tr[b-um73pkj88f] {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 16px;
        gap: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .pedidos-pendientes .tabla-mejorada tbody tr:not(:last-child) td[b-um73pkj88f] {
        border-bottom: none;
    }

    .pedidos-pendientes .tabla-mejorada td[b-um73pkj88f] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 4px 0;
        text-align: right !important;
        font-size: var(--pp-font-body);
        line-height: var(--pp-font-body-lh);
        width: 100%;
    }

    .pedidos-pendientes .tabla-mejorada td[b-um73pkj88f]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 13px;
        color: #000000;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
        min-width: 90px;
    }

    /* Ocultar labels nativos para mobile */
    .pedidos-pendientes .mobile-label[b-um73pkj88f] {
        display: none;
    }

    /* Fila de acciones en tarjeta */
    .pedidos-pendientes .tabla-mejorada .td7[b-um73pkj88f] {
        padding-top: 12px;
        border-top: 1px solid var(--grisgris-30);
        margin-top: 4px;
    }

    .pedidos-pendientes .tabla-mejorada .td7[b-um73pkj88f]::before {
        display: none;
    }

    .pedidos-pendientes .tabla-mejorada .td7 .td-content[b-um73pkj88f] {
        width: 100%;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .pedidos-pendientes .state-layer-wrapper-2[b-um73pkj88f] {
        flex: 1;
        min-width: 100px;
    }

    /* Botón ayuda full width */
    .pedidos-pendientes .state-layer-wrapper[b-um73pkj88f] {
        width: 100%;
    }

    .popup-container[b-um73pkj88f] {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .popup-header[b-um73pkj88f] {
        padding: 30px 24px 0;
    }

    .popup-header h3[b-um73pkj88f] {
        font-size: 22px;
        line-height: 28px;
    }

    .popup-body[b-um73pkj88f] {
        padding: 30px 24px;
    }

    .popup-footer[b-um73pkj88f] {
        padding: 0 24px 40px;
    }

    .popup-close[b-um73pkj88f] {
        right: 16px;
        top: 16px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .pedidos-pendientes .frame-2[b-um73pkj88f] {
        margin-top: 8px;
    }

    .pedidos-pendientes[b-um73pkj88f] {
        --pp-padding-lateral: 12px;
        --pp-section-gap: 24px;
        --pp-content-gap: 12px;
        --pp-table-padding: 12px;
        --pp-table-padding-y: 16px;
        --pp-font-title: 18px;
        --pp-font-title-lh: 24px;
        --pp-font-body: 13px;
        --pp-font-body-lh: 18px;
        --pp-font-page-title: 12px;
        --pp-btn-font: 12px;
        --pp-icon-size: 20px;
    }

    .pedidos-pendientes .tabla-mejorada tbody tr[b-um73pkj88f] {
        padding: 14px;
        gap: 8px;
    }

    .pedidos-pendientes .tabla-mejorada td[b-um73pkj88f]::before {
        font-size: 12px;
        min-width: 75px;
    }

    .pedidos-pendientes .tabla-mejorada .td7 .td-content[b-um73pkj88f] {
        gap: 10px;
    }

    .pedidos-pendientes .state-layer-wrapper-2[b-um73pkj88f] {
        flex: 1 1 100%;
    }

    .popup-header[b-um73pkj88f] {
        padding: 24px 16px 0;
    }

    .popup-header h3[b-um73pkj88f] {
        font-size: 20px;
        line-height: 26px;
    }

    .popup-body[b-um73pkj88f] {
        padding: 24px 16px;
    }

    .popup-pedido[b-um73pkj88f] {
        padding: 12px 16px;
    }

    .popup-footer[b-um73pkj88f] {
        padding: 0 16px 32px;
    }
}
/* /Components/Pages/PerfilUsuario.razor.rz.scp.css */
/* ============================================= */
/* PERFIL DE USUARIO - RESPONSIVE CSS            */
/* Pixel-perfect match to Figma node 367:10599   */
/* Breakpoints: 1024px (tablet), 768px (mobile), 480px (small) */
/* ============================================= */

/* ============================================= */
/* VARIABLES RESPONSIVE                          */
/* ============================================= */
.perfil-de-usuario[b-mc6jnh76en] {
    /* Layout */
    --pu-max-width: 1690px;
    --pu-padding-lateral: clamp(16px, 6vw, 115px);
    --pu-padding-bottom: clamp(40px, 5.2vw, 100px);

    /* Gaps */
    --pu-gap-page: clamp(30px, 3.9vw, 75px);
    --pu-gap-section: clamp(15px, 1.56vw, 30px);
    --pu-gap-form-cols: clamp(30px, 5.2vw, 100px);
    --pu-gap-form-rows: 10px;
    --pu-gap-checkbox: clamp(12px, 1.04vw, 20px);
    --pu-gap-inner-section: clamp(25px, 2.6vw, 50px);

    /* Tipografía fluida */
    --pu-font-page-title: clamp(14px, 0.83vw, 16px);
    --pu-font-headline: clamp(20px, 1.67vw, 32px);
    --pu-font-headline-line: clamp(28px, 2.08vw, 40px);
    --pu-font-section-title: clamp(17px, 1.15vw, 22px);
    --pu-font-label: clamp(14px, 0.83vw, 16px);
    --pu-font-input: clamp(14px, 0.83vw, 16px);
    --pu-font-btn: clamp(14px, 0.83vw, 16px);
    --pu-font-checkbox: clamp(13px, 0.73vw, 14px);
    --pu-font-table: clamp(12px, 0.73vw, 14px);
    --pu-font-contact: clamp(17px, 1.15vw, 22px);
    --pu-font-contact-line: clamp(22px, 1.46vw, 28px);

    /* Form field sizing — Figma: left labels 140px, right labels 250px, inputs 350px */
    --pu-label-width: clamp(100px, 7.3vw, 140px);
    --pu-label-width-right: clamp(140px, 13vw, 250px);
    --pu-input-width: 350px;
    --pu-input-height: clamp(48px, 3.07vw, 59px);

    /* Paddings internos — Figma: py-[50px] */
    --pu-form-padding-y: clamp(30px, 2.6vw, 50px);
    --pu-form-padding-x: clamp(16px, 2.6vw, 50px);

    /* Botones */
    --pu-btn-height: clamp(44px, 2.71vw, 52px);
    --pu-btn-radius: 6px;
    --pu-btn-help-width: clamp(280px, 30.83vw, 592px);

    /* Tabla */
    --pu-table-icon-size: clamp(16px, 1.04vw, 20px);
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL                          */
/* ============================================= */
.perfil-de-usuario[b-mc6jnh76en] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: var(--pu-gap-page);
    padding: 0 var(--pu-padding-lateral) var(--pu-padding-bottom);
    position: relative;
    background-color: var(--blanco);
    box-sizing: border-box;
    overflow-x: hidden;
}

.perfil-de-usuario *[b-mc6jnh76en],
.perfil-de-usuario *[b-mc6jnh76en]::before,
.perfil-de-usuario *[b-mc6jnh76en]::after {
    box-sizing: border-box;
}

/* ============================================= */
/* FRAME PRINCIPAL (contenedor secciones)        */
/* ============================================= */
.perfil-de-usuario .frame[b-mc6jnh76en] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pu-gap-section);
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* TÍTULO DE PÁGINA                              */
/* ============================================= */
.perfil-de-usuario .titulo[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.perfil-de-usuario h2[b-mc6jnh76en] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--pu-font-page-title);
    letter-spacing: 0;
    line-height: normal;
}

.perfil-de-usuario .iconos[b-mc6jnh76en] {
    position: absolute;
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    cursor: pointer;
}

/* ============================================= */
/* CÓDIGO CLIENTE + BOTÓN MODIFICAR              */
/* ============================================= */
.perfil-de-usuario .div[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    gap: clamp(10px, 1.04vw, 20px);
    flex-wrap: wrap;
}

/* Figma: font-weight 400 (Regular), 32px, line-height 40px */
.perfil-de-usuario .text-wrapper[b-mc6jnh76en] {
    position: relative;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--pu-font-headline);
    letter-spacing: 0;
    line-height: var(--pu-font-headline-line);
    white-space: nowrap;
}

.perfil-de-usuario .boton[b-mc6jnh76en] {
    display: inline-flex;
    flex-direction: column;
    height: var(--pu-btn-height);
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: var(--pu-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.perfil-de-usuario .boton:hover[b-mc6jnh76en] {
    background-color: #80C87C;
}

.perfil-de-usuario .state-layer[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    position: relative;
    flex: 1;
    width: 100%;
}

.perfil-de-usuario .label-text[b-mc6jnh76en] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--pu-font-btn);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

/* ============================================= */
/* ÁREA GRIS DEL FORMULARIO                      */
/* Figma: bg-[#f5f5f5] rounded-[15px] py-[50px] gap-[50px] */
/* ============================================= */
.perfil-de-usuario .frame-2[b-mc6jnh76en] {
    background-color: var(--grisgris-10);
    border-radius: clamp(8px, 0.78vw, 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pu-gap-inner-section);
    position: relative;
    width: 100%;
    padding: var(--pu-form-padding-y) var(--pu-form-padding-x);
}

/* ============================================= */
/* DOS COLUMNAS DEL FORMULARIO                   */
/* Figma: gap-[100px] between left and right columns */
/* ============================================= */
.perfil-de-usuario .frame-3[b-mc6jnh76en] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--pu-gap-form-cols);
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

/* Cada columna del formulario */
.perfil-de-usuario .frame-4[b-mc6jnh76en] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pu-gap-form-rows);
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

/* ============================================= */
/* RIGHT COLUMN — "Cambio de Contraseña"         */
/* Figma: labels 250px wide                      */
/* ============================================= */
.perfil-de-usuario .frame-4.right-col .text-wrapper-4[b-mc6jnh76en] {
    width: var(--pu-label-width-right);
}

.perfil-de-usuario .frame-4.right-col .text-wrapper-5[b-mc6jnh76en] {
    width: var(--pu-label-width-right);
}

/* Fila de campo: label + input */
/* Figma: gap-[30px], h-[59px] */
.perfil-de-usuario .frame-5[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.56vw, 30px);
    height: var(--pu-input-height);
    justify-content: flex-end;
    position: relative;
    width: 100%;
}

/* ============================================= */
/* LABELS                                        */
/* ============================================= */
.perfil-de-usuario .text-wrapper-2[b-mc6jnh76en] {
    color: var(--black-fonts-headings);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--pu-font-label);
    font-weight: 700;
    letter-spacing: 0.15px;
    line-height: 24px;
    text-align: right;
    width: var(--pu-label-width);
    flex-shrink: 0;
}

/* Figma: value text, Regular */
.perfil-de-usuario .text-wrapper-3[b-mc6jnh76en] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--black-fonts-headings);
    font-size: var(--pu-font-label);
    letter-spacing: 0.15px;
    line-height: 24px;
    flex: 1;
    min-width: 0;
    max-width: var(--pu-input-width);
}

/* Figma: label text, Bold, w-[140px] left column */
.perfil-de-usuario .text-wrapper-4[b-mc6jnh76en] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--pu-font-label);
    text-align: right;
    letter-spacing: 0.15px;
    line-height: 24px;
    width: var(--pu-label-width);
    flex-shrink: 0;
}

/* Figma: "Cambio de Contraseña" title, Bold 22px, w-[250px] */
.perfil-de-usuario .text-wrapper-5[b-mc6jnh76en] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--pu-font-section-title);
    text-align: right;
    letter-spacing: 0.15px;
    line-height: 24px;
    width: var(--pu-label-width-right);
    flex-shrink: 0;
}

/* ============================================= */
/* INPUTS                                        */
/* Figma: w-[350px] h-[59px] bg-white rounded-[6px] px-[16px] py-[17px] */
/* ============================================= */
.perfil-de-usuario .input[b-mc6jnh76en] {
    background-color: var(--blanco);
    border: none;
    border-radius: var(--pu-btn-radius);
    color: var(--negro);
    display: block;
    width: var(--pu-input-width);
    max-width: 100%;
    flex-shrink: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--pu-font-input);
    font-weight: 400;
    height: var(--pu-input-height);
    letter-spacing: 0.15px;
    line-height: 24px;
    overflow: hidden;
    padding: clamp(10px, 0.89vw, 17px) clamp(10px, 0.83vw, 16px);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.perfil-de-usuario input[b-mc6jnh76en]::placeholder {
    color: var(--grisgris-50);
}

.perfil-de-usuario input:focus[b-mc6jnh76en] {
    border: 2px solid var(--primario);
    outline: none;
}

/* Input con icono ojo (contraseña) */
.perfil-de-usuario .input-wrapper[b-mc6jnh76en] {
    position: relative;
    width: var(--pu-input-width);
    max-width: 100%;
    flex-shrink: 0;
}

.perfil-de-usuario .input-wrapper .input[b-mc6jnh76en] {
    width: 100%;
    padding-right: clamp(36px, 2.08vw, 40px);
}

.perfil-de-usuario .input-wrapper .img[b-mc6jnh76en] {
    cursor: pointer;
    height: clamp(18px, 1.25vw, 24px);
    width: clamp(18px, 1.25vw, 24px);
    position: absolute;
    right: clamp(8px, 0.52vw, 10px);
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================= */
/* SECCIÓN CHECKBOXES (inside gray area)         */
/* Figma: gap-[20px], 14px font, green filled circles */
/* ============================================= */
.perfil-de-usuario .frame-6[b-mc6jnh76en] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pu-gap-checkbox);
    position: relative;
    width: fit-content;
    padding: 0;
}

.perfil-de-usuario .frame-7[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    gap: var(--pu-gap-checkbox);
    position: relative;
}

/* Custom checkbox: Figma uses green filled circle (checked) / empty circle (unchecked) */
.perfil-de-usuario .custom-checkbox[b-mc6jnh76en] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--grisgris-50);
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.perfil-de-usuario .custom-checkbox:checked[b-mc6jnh76en] {
    background-color: var(--primario);
    border-color: var(--primario);
}

.perfil-de-usuario .custom-checkbox:focus[b-mc6jnh76en] {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}

.perfil-de-usuario .p[b-mc6jnh76en] {
    font-family: var(--label-large-font-family);
    font-weight: var(--label-large-font-weight);
    color: #000000;
    font-size: var(--pu-font-checkbox);
    letter-spacing: var(--label-large-letter-spacing);
    line-height: var(--label-large-line-height);
    font-style: var(--label-large-font-style);
}

/* ============================================= */
/* SECCIÓN TABLA USUARIOS                        */
/* ============================================= */
.perfil-de-usuario .frame-8[b-mc6jnh76en] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pu-gap-page);
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

.perfil-de-usuario .frame-9[b-mc6jnh76en] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

/* Barra filtro + Nuevo Usuario */
.perfil-de-usuario .frame-10[b-mc6jnh76en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--pu-gap-checkbox);
    width: 100%;
    position: relative;
    flex: 0 0 auto;
    gap: clamp(10px, 1.04vw, 20px);
    flex-wrap: wrap;
}

.perfil-de-usuario .frame-11[b-mc6jnh76en] {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    position: relative;
    flex: 0 0 auto;
}

.perfil-de-usuario .text-wrapper-6[b-mc6jnh76en] {
    font-family: var(--label-large-font-family);
    font-weight: var(--label-large-font-weight);
    color: var(--black-fonts-headings);
    font-size: var(--pu-font-checkbox);
    letter-spacing: var(--label-large-letter-spacing);
    line-height: var(--label-large-line-height);
    white-space: nowrap;
    font-style: var(--label-large-font-style);
}

/* ============================================= */
/* TABLA                                         */
/* ============================================= */
.perfil-de-usuario .tabla-container[b-mc6jnh76en] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.perfil-de-usuario .tabla[b-mc6jnh76en] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    background-color: var(--blanco);
    font-size: var(--pu-font-table);
    position: relative;
    min-width: 700px;
}

.perfil-de-usuario .tabla thead[b-mc6jnh76en] {
    background-color: var(--blanco);
    color: #000000;
    font-weight: 700;
    position: relative;
}

.perfil-de-usuario .tabla thead[b-mc6jnh76en]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--grisgris-50);
}

.perfil-de-usuario .tabla th[b-mc6jnh76en],
.perfil-de-usuario .tabla td[b-mc6jnh76en] {
    padding: clamp(6px, 0.52vw, 10px) clamp(8px, 1.56vw, 30px);
    text-align: center;
    background-color: var(--blanco);
    white-space: nowrap;
}

.perfil-de-usuario .tabla th[b-mc6jnh76en] {
    font-size: var(--pu-font-table);
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 20px;
    padding-bottom: clamp(10px, 0.8vw, 20px);
}

.perfil-de-usuario .tabla td[b-mc6jnh76en] {
    font-size: var(--pu-font-table);
    font-weight: 400;
    letter-spacing: 0.25px;
    line-height: 20px;
    padding-top: clamp(10px, 1vw, 25px);
}

.perfil-de-usuario .tabla td img[b-mc6jnh76en] {
    width: var(--pu-table-icon-size);
    height: var(--pu-table-icon-size);
}

.perfil-de-usuario .tabla td:first-child[b-mc6jnh76en] {
    text-align: left;
    padding-left: 0;
    padding-top: clamp(10px, 1vw, 25px);
}

.perfil-de-usuario .tabla th:first-child[b-mc6jnh76en] {
    text-align: left;
    padding-left: 0;
}

.perfil-de-usuario .tabla td:last-child[b-mc6jnh76en] {
    text-align: right;
    padding-right: 0;
}

.perfil-de-usuario .tabla th:last-child[b-mc6jnh76en] {
    text-align: right;
}

.perfil-de-usuario .tabla td a[b-mc6jnh76en] {
    color: #000000;
    text-decoration: none;
    font-weight: 400;
    font-size: var(--pu-font-table);
    letter-spacing: 0.25px;
    transition: color 0.2s ease;
}

.perfil-de-usuario .tabla td a:hover[b-mc6jnh76en] {
    color: var(--primario);
}

/* Action icons (edit + trash) in table last column */
.perfil-de-usuario .action-icons[b-mc6jnh76en] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.perfil-de-usuario .action-icon[b-mc6jnh76en] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.perfil-de-usuario .action-icon:hover[b-mc6jnh76en] {
    opacity: 0.7;
}

.perfil-de-usuario .action-icon-btn[b-mc6jnh76en] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* ============================================= */
/* TEXTO CONTACTO                                */
/* Figma: 22px, bold spans for email & phone     */
/* ============================================= */
.perfil-de-usuario .debemos-actualizar[b-mc6jnh76en] {
    position: relative;
    width: 100%;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    color: var(--black-fonts-headings);
    font-size: var(--pu-font-contact);
    text-align: center;
    letter-spacing: 0;
    line-height: var(--pu-font-contact-line);
    margin-top: clamp(30px, 3.9vw, 75px);
    margin-bottom: clamp(30px, 3.9vw, 75px);
}

.perfil-de-usuario .span[b-mc6jnh76en] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #2d2e2e;
    font-size: var(--pu-font-contact);
    letter-spacing: 0;
    line-height: var(--pu-font-contact-line);
}

.perfil-de-usuario .text-wrapper-da[b-mc6jnh76en] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
}

/* ============================================= */
/* ALERTAS Y ESTADOS                             */
/* ============================================= */
.perfil-de-usuario .alert[b-mc6jnh76en] {
    width: 100%;
    border-radius: var(--pu-btn-radius);
}

.perfil-de-usuario .alert p[b-mc6jnh76en] {
    margin-bottom: 0;
}

.perfil-de-usuario .spinner-border[b-mc6jnh76en] {
    color: var(--blanco);
}

/* Ocultar .component vacío */
.perfil-de-usuario .component[b-mc6jnh76en] {
    display: none;
}

/* Icono img genérico */
.perfil-de-usuario .img[b-mc6jnh76en] {
    height: clamp(18px, 1.25vw, 24px);
    width: clamp(18px, 1.25vw, 24px);
    position: relative;
}

/* ============================================= */
/* PAGE BLOCKER (loading overlay)                */
/* ============================================= */
.page-blocker[b-mc6jnh76en] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-mc6jnh76en] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px)       */
/* ============================================= */
@media (max-width: 1024px) {
    .perfil-de-usuario[b-mc6jnh76en] {
        --pu-padding-lateral: 30px;
        --pu-gap-page: 40px;
        --pu-gap-section: 20px;
        --pu-gap-form-cols: 40px;
        --pu-gap-form-rows: 8px;
        --pu-gap-inner-section: 30px;
        --pu-label-width: 120px;
        --pu-label-width-right: 180px;
        --pu-input-width: 280px;
        --pu-input-height: 48px;
        --pu-form-padding-y: 40px;
        --pu-form-padding-x: 24px;
        --pu-font-headline: 24px;
        --pu-font-headline-line: 32px;
        --pu-font-section-title: 18px;
        --pu-font-contact: 18px;
        --pu-font-contact-line: 24px;
    }

    .perfil-de-usuario .frame-4[b-mc6jnh76en] {
        max-width: none;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
@media (max-width: 768px) {
    .perfil-de-usuario[b-mc6jnh76en] {
        --pu-padding-lateral: 16px;
        --pu-gap-page: 30px;
        --pu-gap-section: 16px;
        --pu-gap-form-cols: 24px;
        --pu-gap-form-rows: 6px;
        --pu-gap-inner-section: 24px;
        --pu-label-width: auto;
        --pu-label-width-right: auto;
        --pu-input-width: 100%;
        --pu-input-height: 44px;
        --pu-form-padding-y: 24px;
        --pu-form-padding-x: 16px;
        --pu-font-page-title: 14px;
        --pu-font-headline: 20px;
        --pu-font-headline-line: 28px;
        --pu-font-section-title: 16px;
        --pu-font-label: 14px;
        --pu-font-input: 14px;
        --pu-font-btn: 14px;
        --pu-font-checkbox: 13px;
        --pu-font-table: 12px;
        --pu-font-contact: 15px;
        --pu-font-contact-line: 22px;
        --pu-btn-height: 44px;
    }

    /* Columnas del formulario apiladas */
    .perfil-de-usuario .frame-3[b-mc6jnh76en] {
        flex-direction: column;
        gap: var(--pu-gap-form-cols);
    }

    .perfil-de-usuario .frame-4[b-mc6jnh76en] {
        width: 100%;
        max-width: none;
    }

    /* Filas de campo: label encima del input (stack vertical) */
    .perfil-de-usuario .frame-5[b-mc6jnh76en] {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 4px;
    }

    .perfil-de-usuario .text-wrapper-4[b-mc6jnh76en],
    .perfil-de-usuario .text-wrapper-5[b-mc6jnh76en],
    .perfil-de-usuario .text-wrapper-2[b-mc6jnh76en] {
        width: 100%;
        text-align: left;
    }

    /* Override right-col label widths for mobile */
    .perfil-de-usuario .frame-4.right-col .text-wrapper-4[b-mc6jnh76en],
    .perfil-de-usuario .frame-4.right-col .text-wrapper-5[b-mc6jnh76en] {
        width: 100%;
        text-align: left;
    }

    .perfil-de-usuario .text-wrapper-3[b-mc6jnh76en] {
        width: 100%;
        max-width: 100%;
    }

    .perfil-de-usuario .input[b-mc6jnh76en] {
        width: 100%;
        max-width: 100%;
    }

    .perfil-de-usuario .input-wrapper[b-mc6jnh76en] {
        width: 100%;
    }

    /* Código cliente + botón: wrap si no caben */
    .perfil-de-usuario .div[b-mc6jnh76en] {
        gap: 12px;
    }

    .perfil-de-usuario .text-wrapper[b-mc6jnh76en] {
        font-size: var(--pu-font-headline);
        white-space: normal;
        word-break: break-word;
    }

    /* Tabla scroll horizontal */
    .perfil-de-usuario .tabla[b-mc6jnh76en] {
        min-width: 650px;
    }

    /* Barra filtro */
    .perfil-de-usuario .frame-10[b-mc6jnh76en] {
        gap: 12px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .perfil-de-usuario[b-mc6jnh76en] {
        --pu-padding-lateral: 12px;
        --pu-gap-page: 24px;
        --pu-font-headline: 18px;
        --pu-font-headline-line: 24px;
        --pu-font-section-title: 15px;
        --pu-font-contact: 14px;
        --pu-font-contact-line: 20px;
        --pu-form-padding-y: 20px;
        --pu-form-padding-x: 12px;
        --pu-btn-height: 40px;
        --pu-font-btn: 13px;
    }

    .perfil-de-usuario .frame-5[b-mc6jnh76en] {
        gap: 3px;
    }

}
/* /Components/Pages/Productos.razor.rz.scp.css */
/* ============================================= */
/* CONTENEDOR PRINCIPAL Y TOOLBAR                */
/* Figma node: 3321:33013 "Texto superior"       */
/* ============================================= */
/* Sistema responsive (como Home.razor):          */
/*   - clamp() para fluid scaling                */
/*   - Breakpoints: 1024px / 768px / 480px       */
/* ============================================= */

.productos-page-container[b-6f5p5t4qkt] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================
   TOOLBAR WRAPPER (sticky + background)
   ============================================= */
.productos-toolbar[b-6f5p5t4qkt] {
    width: 100%;
    background: #FFFFFF;
    position: sticky;
    top: var(--header-height, 0px) !important;
    z-index: 999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estado scrolled: fondo gris claro */
.productos-toolbar.scrolled[b-6f5p5t4qkt] {
    background: #F5F5F5;
    box-shadow: none;
    margin-bottom: 0;
}

/* =============================================
   INNER CONTAINER
   ============================================= */
.toolbar-inner[b-6f5p5t4qkt] {
    width: 100%;
    padding: clamp(6px, 0.52vw, 10px) clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.21vw, 4px);
    box-sizing: border-box;
}

.productos-toolbar.scrolled .toolbar-inner[b-6f5p5t4qkt] {
    height: 54px;
    padding: 0 clamp(16px, 6vw, 115px);
    gap: 0;
    justify-content: center;
}

/* =============================================
   ROW 1: TÍTULO DE CATEGORÍA
   ============================================= */
.toolbar-title-row[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* 📦 (Colección) El antiguo enlace ".coleccion-ver-todo" junto al título se sustituyó por el
   breadcrumb "PMC / Productos / {colección}": el nivel "Productos" es el enlace al catálogo completo. */

.toolbar-title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.46vw, 28px);
    line-height: clamp(17.1px, 1.15vw, 22px);
    color: #000000;
    margin: 0;
    padding: 0;
    min-width: 0;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ocultar título en modo scrolled */
.productos-toolbar.scrolled .toolbar-title-row[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   ROW 2: CONTROLES
   ============================================= */
.toolbar-controls-row[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: clamp(36px, 2.29vw, 44px);
}

/* --- LADO IZQUIERDO --- */
.toolbar-left[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.56vw, 30px);
    min-width: 0;
    flex: 1;
}

/* --- LADO DERECHO --- */
.toolbar-right[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
    flex-shrink: 0;
    margin-left: clamp(12px, 1.04vw, 20px);
}

/* =============================================
   BOTONES DE ACCIÓN (Categorías / Filtros)
   ============================================= */
.toolbar-action-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #121212;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-action-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.toolbar-icon[b-6f5p5t4qkt] {
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    flex-shrink: 0;
    color: currentColor;
}

/* Scrolled: texto oscuro en botones (fondo claro) */
.productos-toolbar.scrolled .toolbar-action-btn[b-6f5p5t4qkt] {
    color: #212121;
}

/* =============================================
   SEPARADOR VERTICAL
   ============================================= */
.toolbar-separator[b-6f5p5t4qkt] {
    width: 1px;
    height: 19px;
    background: #000;
    flex-shrink: 0;
}

/* Ocultar separadores en modo scrolled */
.productos-toolbar.scrolled .toolbar-separator[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.productos-breadcrumb[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #757575;
}

.productos-breadcrumb a[b-6f5p5t4qkt] {
    color: #757575;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 300;
    flex-shrink: 0;
}

.productos-breadcrumb a:hover[b-6f5p5t4qkt] {
    color: #121212;
}

.productos-breadcrumb .separator[b-6f5p5t4qkt] {
    color: #757575;
    margin: 0 4px;
    font-weight: 300;
    flex-shrink: 0;
    user-select: none;
}

.productos-breadcrumb .active[b-6f5p5t4qkt] {
    color: #121212;
    font-weight: 300;
    flex-shrink: 0;
}

/* Ocultar breadcrumb en scrolled */
.productos-toolbar.scrolled .productos-breadcrumb[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   CONTADOR DE PRODUCTOS
   ============================================= */
.toolbar-product-count[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #757575;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ocultar contador en scrolled */
.productos-toolbar.scrolled .toolbar-product-count[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   LABEL "VISTA"
   ============================================= */
.vista-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #121212;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ocultar vista en scrolled */
.productos-toolbar.scrolled .vista-label[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   VIEW TOGGLE (selector grid 4 / grid 16)
   Figma node: 3321:33032
   ============================================= */
.view-buttons-container[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    border: 1px solid #E0E0E0;
    border-radius: clamp(6px, 0.42vw, 8px);
    overflow: hidden;
    flex-shrink: 0;
    background: #FFFFFF;
}

.view-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 2.4vw, 46px);
    height: clamp(34px, 2.08vw, 40px);
    background: #FFFFFF;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #BDBDBD;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

/* Separador entre botones */
.view-btn:first-child[b-6f5p5t4qkt] {
    border-right: 1px solid #E0E0E0;
}

.view-btn:last-child[b-6f5p5t4qkt] {
    border-right: none;
}

.view-btn.active[b-6f5p5t4qkt] {
    background-color: #F5F5F5;
    color: #121212;
}

.view-btn:hover:not(.active)[b-6f5p5t4qkt] {
    background-color: #FAFAFA;
    color: #757575;
}

.view-btn svg[b-6f5p5t4qkt] {
    width: clamp(16px, 1.15vw, 22px);
    height: clamp(16px, 1.15vw, 22px);
}

/* Ocultar toggle en scrolled */
.productos-toolbar.scrolled .view-buttons-container[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   BOTÓN SUBIR (modo scrolled)
   ============================================= */
.btn-scroll-top[b-6f5p5t4qkt] {
    display: none;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: #212121;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(13px, 0.83vw, 16px);
    font-weight: 600;
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.productos-toolbar.scrolled .btn-scroll-top[b-6f5p5t4qkt] {
    display: flex;
}

.btn-scroll-top:hover[b-6f5p5t4qkt] {
    opacity: 0.8;
}

.btn-scroll-top img[b-6f5p5t4qkt] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =============================================
   Eliminado: .productos-count-discrete ya está
   integrado en el toolbar como .toolbar-product-count
   ============================================= */

/* =================================
   ESTADOS DE CARGA Y ERROR
   ================================= */

.productos-loading[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 20px;
}

.loading-spinner[b-6f5p5t4qkt] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4CAF50;
    border-radius: 50%;
    animation: spin-b-6f5p5t4qkt 1s linear infinite;
}

@keyframes spin-b-6f5p5t4qkt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.productos-loading p[b-6f5p5t4qkt] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.productos-error[b-6f5p5t4qkt] {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.productos-error h4[b-6f5p5t4qkt] {
    color: #c00;
    margin: 0 0 10px 0;
    font-size: 18px;
}

.productos-error p[b-6f5p5t4qkt] {
    color: #800;
    margin: 0;
}

.no-products-message[b-6f5p5t4qkt] {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.no-products-message p[b-6f5p5t4qkt] {
    color: #0c5460;
    margin: 0;
}

.category-info-message[b-6f5p5t4qkt] {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-info-message i[b-6f5p5t4qkt] {
    color: #0c5460;
    font-size: 18px;
}

.category-info-message span[b-6f5p5t4qkt] {
    color: #0c5460;
    font-size: 14px;
}

/* =================================
   LOAD MORE CONTAINER
   Figma node: 3380-33270
   ================================= */
.load-more-container[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0;
    gap: 10px;
}

/* Figma: pt 30px px 115px, flex-col gap 15px, items center */
.load-more-btn-container[b-6f5p5t4qkt] {
    width: 100%;
    box-sizing: border-box;
    padding: 40px clamp(16px, 6vw, 115px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Figma: horizontal separator line — 704px wide, #212121 (dark), centered */
.load-more-divider[b-6f5p5t4qkt] {
    width: 704px;
    max-width: 100%;
    height: 1px;
    background-color: #212121;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Figma: "Ver más Productos" button — text + down arrow, no bg, no border */
.load-more-btn[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: none;
    padding: 15px 0 0;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: #121212;
    letter-spacing: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.load-more-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

/* Hide the secondary count span — Figma design only shows main text + arrow */
.load-more-btn-count[b-6f5p5t4qkt] {
    display: none;
}

.load-more-btn-text[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: #121212;
}

/* Down arrow icon in load-more button */
.load-more-btn svg[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #121212;
}


.loading-indicator[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
}

.loading-indicator .spinner[b-6f5p5t4qkt] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-6f5p5t4qkt 1s linear infinite;
}

@keyframes spin-b-6f5p5t4qkt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-indicator p[b-6f5p5t4qkt] {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
}

/* Elemento sentinel invisible para scroll infinito */
#scroll-sentinel[b-6f5p5t4qkt] {
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* =================================
   ESTILOS PARA FILTRO DE CATEGORÍAS SIMPLE
   ================================= */

/* =================================
   GRID DE PRODUCTOS
   Figma: flex, justify-between, px 115px, gap-y 55px
   5 tarjetas × 300px + justify-between distribuye el espacio restante
   ================================= */
.product-grid[b-6f5p5t4qkt] {
    /* Variables de diseño (Figma 1920px).
       Card base 260px → 6 por fila en FHD: floor((1920 - 2*115) / 260) = 6.
       Tokens escalados ~0.87 respecto al 300px original para conservar la proporción. */
    --padding-lateral: 115px;
    --gap-vertical: 48px;
    --producto-img-size: 260px;
    --producto-card-padding: 20px;
    --font-body: 14px;
    --font-price: 17px;
    --font-badge: 9px;
    --radius-card: 14px;
    --btn-cart-size: 56px;
    --btn-icon-size: 21px;
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --oferta-60: #DE3730;
    --primary-10: #EBF6EB;

    /* Grid: auto-fill con ancho de card = --producto-img-size.
       justify-content: space-between → filas completas se distribuyen uniformemente;
       última fila incompleta queda alineada a la izquierda (las celdas vacías no tienen items). */
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--producto-img-size));
    justify-content: space-between;
    align-items: flex-start;
    row-gap: var(--gap-vertical);
    column-gap: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--padding-lateral);
    margin: 0;
}

/* =================================
   IMAGES-ONLY GRID VIEW
   Figma node: 209-26864
   8 tarjetas, 170px imagen, justify-between, px 115px
   Igual estructura que el grid normal pero con 8 columnas de 170px
   ================================= */
.product-grid.images-only-grid[b-6f5p5t4qkt] {
    --producto-img-size: 170px;
    --gap-vertical: 55px;
    /* Volver a flex para el grid de solo imágenes (cards 190px ≠ --producto-img-size 170px) */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 0;
}

/* =================================
   CARDS DE PRODUCTO
   Figma: fixed 300px width, border-l #e0e0e0, pl 20px, pb 10px, gap 8px
   ================================= */
.card-producto[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 10px 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
}

.card-producto[b-6f5p5t4qkt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:hover[b-6f5p5t4qkt]::before {
    background-color: var(--primario);
    width: 2px;
}

.card-producto:hover[b-6f5p5t4qkt] {
    transform: translateY(-5px);
}

/* Vista solo imágenes */
.card-producto.images-only-card[b-6f5p5t4qkt] {
    padding: 0 0 0 20px;
    gap: 0;
    flex: 0 0 190px;
    width: 190px;
}

.card-producto.images-only-card .frame-wrapper[b-6f5p5t4qkt] {
    /* Figma: imagen exactamente 170×170px, border-radius 14px */
    width: 170px;
    height: 170px;
    border-radius: 14px;
}

/* Hide badges in image-only view (Figma shows clean images) */
.card-producto.images-only-card .frame-8[b-6f5p5t4qkt] {
    display: none;
}

.frame-wrapper[b-6f5p5t4qkt] {
    /* Figma: 300px × 300px square image, border-radius 14px */
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    flex-shrink: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image-wrapper[b-6f5p5t4qkt] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-card);
    position: relative;
}

/* =================================
   BADGES FIGMA
   ================================= */
.frame-8[b-6f5p5t4qkt] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Las badges de producto (descuento, oferta, eco, homologado…) se movieron al componente
   reutilizable Components/Shared/ProductBadge.razor (CSS aislado). Aquí solo queda el badge
   de stock (.grupo-stock), que sigue siendo markup propio de esta página. */

.grupo-stock[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-6f5p5t4qkt] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

/* =================================
   CONTENIDO DE PRODUCTO
   ================================= */
/* Contenido bajo la imagen (Figma node 5835:38330): columna con gap 8px y px 20px,
   con el MISMO ancho que la imagen para que ambos queden alineados. */
.product-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: var(--producto-img-size);
    box-sizing: border-box;
    padding: 0 clamp(8px, 1.04vw, 20px);
    flex-shrink: 0;
}

/* Fila 1 — precio (izq) + swatches (der). Figma node 5851:38816 */
.price-row[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

/* Fila 2 — título (izq, flexible) + botón carrito (der). Figma node 5851:38824 */
.title-row[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.04vw, 20px);
    min-width: 0;
    box-sizing: border-box;
}

/* Referencia del producto cuando NO hay variantes de color (Figma node 5867:6065, body/large) */
.product-ref[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #757575;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-wrapper-5[b-6f5p5t4qkt] {
    /* Figma body/medium: 2 líneas máximo con ellipsis, altura reservada para alinear las cards */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0.25px; /* Figma body/medium */
    line-height: 1.43;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-6f5p5t4qkt] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    min-width: var(--btn-cart-size);
    min-height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .boton:hover[b-6f5p5t4qkt] {
        background-color: var(--primario);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.boton:hover .iconos-2[b-6f5p5t4qkt] {
    color: var(--blanco);
}

.iconos-2[b-6f5p5t4qkt] {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-6f5p5t4qkt {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-6f5p5t4qkt] {
    animation: addedToCart-b-6f5p5t4qkt 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-6f5p5t4qkt] {
    color: var(--blanco);
}

/* === Botón "Más Información" — Figma node 3086:8274 (Property 1=deliniado)
   Outlined: white bg, border #3CAA36, rounded 6px, px 24px py 10px, h ~53px
   Font: Nunito Sans SemiBold 16px, color #3CAA36, letter-spacing 0.15px === */
.boton-mas-info[b-6f5p5t4qkt] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-mas-info span[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-mas-info:hover[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}

/* === Botón "Consultar precio" — Same outlined style
   For SubFamilia con PrecioNoVisibleSinLogin y usuario no logueado === */
.boton-consultar[b-6f5p5t4qkt] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-consultar span[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-consultar:hover[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}



/* =================================
   PANEL LATERAL CATEGORÍAS
   Figma node: 241-5176
   Mismos tokens que .filtros-panel para consistencia
   ================================= */
.custom-offcanvas[b-6f5p5t4qkt] {
    /* Variables compartidas con .filtros-panel */
    --fp-width: clamp(300px, 33vw, 630px);
    --fp-padding-x: clamp(20px, 6.46vw, 124px);
    --fp-padding-top: clamp(24px, 2.08vw, 40px);
    --fp-padding-bottom: clamp(60px, 6.46vw, 124px);
    --fp-gap-sections: clamp(30px, 3.18vw, 61px);
    --fp-title-size: clamp(28px, 2.5vw, 48px);
    --fp-body-size: clamp(14px, 0.83vw, 16px);
    --fp-item-py: clamp(10px, 0.78vw, 15px);
    --fp-radius: clamp(10px, 0.78vw, 15px);

    position: fixed;
    top: 0;
    left: calc(-1 * var(--fp-width));
    width: var(--fp-width);
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito Sans', sans-serif;
    overscroll-behavior: contain;
}

.custom-offcanvas.open[b-6f5p5t4qkt] {
    left: 0;
}

/* --- CABECERA --- */
.custom-offcanvas-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    flex-shrink: 0;
}

.custom-offcanvas-header h5[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-title-size);
    line-height: 1;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
}

/* --- BODY SCROLLABLE --- */
.custom-offcanvas-body[b-6f5p5t4qkt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--fp-gap-sections) var(--fp-padding-x) var(--fp-padding-bottom);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* --- BOTÓN CERRAR --- */
.close-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 20px;
    color: #2D2E2E;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.close-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.6;
}

/* Overlay de fondo oscuro */
.offcanvas-overlay[b-6f5p5t4qkt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: block;
}

/* =================================
   BOTÓN VOLVER CATEGORÍA
   ================================= */
.btn-back-category[b-6f5p5t4qkt] {
    background: none;
    color: var(--primario);
    border: none;
    border-bottom: 1px solid #F5F5F5;
    padding: var(--fp-item-py) 0;
    padding-bottom: var(--fp-item-py);
    margin-bottom: var(--fp-item-py);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-back-category:hover[b-6f5p5t4qkt] {
    color: #2a7a26;
}

/* =================================
   LISTA DE CATEGORÍAS
   Figma: py-15px, border-b #F5F5F5, 16px Nunito Sans, tracking 0.5px
   ================================= */
.category-list[b-6f5p5t4qkt] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.category-list li[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.category-list li:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.category-simple-item[b-6f5p5t4qkt] {
    padding: var(--fp-item-py) 0;
    cursor: pointer;
    color: #2D2E2E;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.category-simple-item:hover[b-6f5p5t4qkt] {
    color: var(--primario);
}


/* =================================
   BOTÓN CATEGORÍAS PRINCIPAL SIMPLEF
   ================================= */
#categoryToggleBtn[b-6f5p5t4qkt] {
    background: transparent !important;
    border: none !important;
    color: #121212 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
}

#categoryToggleBtn:hover[b-6f5p5t4qkt] {
    opacity: 0.7 !important;
}

#categoryToggleBtn i[b-6f5p5t4qkt] {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   PANEL DE FILTROS – FIGMA NODE 241-5331
   Responsive system: clamp() fluid – misma técnica que Home.razor
   Breakpoints: 1200px / 768px / 480px
   ============================================================ */
.filtros-panel[b-6f5p5t4qkt] {
    /* --- VARIABLES LOCALES --- */
    --fp-width: clamp(300px, 33vw, 630px);
    --fp-padding-x: clamp(20px, 6.46vw, 124px);
    --fp-padding-top: clamp(24px, 2.08vw, 40px);
    --fp-padding-bottom: clamp(60px, 6.46vw, 124px);
    --fp-content-width: 100%;
    --fp-gap-sections: clamp(30px, 3.18vw, 61px);
    --fp-title-size: clamp(28px, 2.5vw, 48px);
    --fp-body-size: clamp(14px, 0.83vw, 16px);
    --fp-item-py: clamp(10px, 0.78vw, 15px);
    --fp-btn-height: clamp(44px, 2.81vw, 54px);
    --fp-radius: clamp(10px, 0.78vw, 15px);

    /* --- LAYOUT --- */
    position: fixed;
    top: 0;
    left: calc(-1 * var(--fp-width));
    width: var(--fp-width);
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito Sans', sans-serif;
    overscroll-behavior: contain;
}

.filtros-panel.open[b-6f5p5t4qkt] {
    left: 0;
}

/* --- CABECERA --- */
.filtros-panel__header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    flex-shrink: 0;
}

.filtros-panel__title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-title-size);
    line-height: 1;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
}

.filtros-panel__close[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.filtros-panel__close:hover[b-6f5p5t4qkt] {
    opacity: 0.6;
}

.filtros-panel__close svg[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
}

/* --- CUERPO SCROLLABLE --- */
.filtros-panel__body[b-6f5p5t4qkt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--fp-gap-sections) var(--fp-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--fp-gap-sections);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar-track {
    background: transparent;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* --- LISTA DE FILTROS --- */
.filtros-panel__list[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    width: var(--fp-content-width);
}

/* --- ITEM DE FILTRO COLAPSABLE --- */
.filtros-panel__item[b-6f5p5t4qkt] {
    width: 100%;
}

.filtros-panel__item--border[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__item--border:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.filtros-panel__item-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--fp-item-py) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    transition: opacity 0.2s ease;
}

.filtros-panel__item-header:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.filtros-panel__item-label-group[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.78vw, 15px);
}

.filtros-panel__item-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

.filtros-panel__item-hint[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #9E9E9E;
}

.filtros-panel__toggle-icon[b-6f5p5t4qkt] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- CONTENIDO EXPANDIDO --- */
.filtros-panel__item-content[b-6f5p5t4qkt] {
    padding: 0 0 clamp(8px, 0.52vw, 10px) 0;
}

/* --- SORT OPTIONS / CHECKBOXES --- */
.filtros-panel__sort-options[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filtros-panel__sort-option[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.63vw, 12px);
    padding: clamp(6px, 0.42vw, 8px) 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 4px;
}

.filtros-panel__sort-option:hover[b-6f5p5t4qkt] {
    background-color: rgba(60, 170, 54, 0.04);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Custom checkbox (Figma-style) */
.filtros-panel__checkbox[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    background: #FCFCFD;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.filtros-panel__checkbox--checked[b-6f5p5t4qkt] {
    background: #3CAA36;
    border-color: #3CAA36;
}

.filtros-panel__checkbox--checked svg[b-6f5p5t4qkt] {
    display: block;
}

.filtros-panel__sort-text[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

/* --- COLOR SWATCH (filtro de color) --- */
.filtros-panel__color-swatch[b-6f5p5t4qkt] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    display: inline-block;
    flex-shrink: 0;
}

/* --- SEARCH INPUT (marcas) --- */
.filtros-panel__search-input[b-6f5p5t4qkt] {
    width: 100%;
    padding: clamp(6px, 0.42vw, 8px) clamp(10px, 0.63vw, 12px);
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    color: #2D2E2E;
    margin-bottom: clamp(8px, 0.52vw, 10px);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.filtros-panel__search-input:focus[b-6f5p5t4qkt] {
    outline: none;
    border-color: #3CAA36;
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.1);
}

.filtros-panel__search-input[b-6f5p5t4qkt]::placeholder {
    color: #9E9E9E;
}

.filtros-panel__brands-list[b-6f5p5t4qkt] {
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.filtros-panel__brands-list[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.filtros-panel__brands-list[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

/* --- PRICE RANGE (Figma node: 241-5459) --- */
.filtros-panel__price-range[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(4px, 0.42vw, 8px) 0;
}

.filtros-panel__range-slider-wrapper[b-6f5p5t4qkt] {
    position: relative;
    width: 100%;
    height: 11px;
}

/* Base gray track */
.filtros-panel__range-track[b-6f5p5t4qkt] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #BDBDBD;
    transform: translateY(-50%);
    border-radius: 1px;
    pointer-events: none;
}

/* Active green segment between handles */
.filtros-panel__range-active[b-6f5p5t4qkt] {
    position: absolute;
    top: 50%;
    height: 2px;
    background: #3CAA36;
    transform: translateY(-50%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

/* Range input base */
.filtros-panel__range-slider[b-6f5p5t4qkt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

/* WebKit track (invisible – we use custom track divs) */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: transparent;
    border: none;
}

/* WebKit thumb – solid green circle matching Figma */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    background: #3CAA36;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: none;
    margin-top: -5px;
    transition: transform 0.15s ease;
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb:active {
    transform: scale(1.4);
}

/* Firefox track */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-track {
    width: 100%;
    height: 2px;
    background: transparent;
    border: none;
}

/* Firefox thumb */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: #3CAA36;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: none;
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-thumb:hover {
    transform: scale(1.3);
}

.filtros-panel__range-slider--min[b-6f5p5t4qkt] {
    z-index: 3;
}

.filtros-panel__range-slider--max[b-6f5p5t4qkt] {
    z-index: 4;
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt] {
    outline: none;
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt]::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt]::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

/* Price labels below slider */
.filtros-panel__price-labels[b-6f5p5t4qkt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.filtros-panel__price-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
}

/* --- ESPECIFICACIONES --- */
.filtros-panel__specs-content[b-6f5p5t4qkt] {
    padding: 0;
}

.filtros-panel__spec-item[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__spec-item:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.filtros-panel__spec-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(8px, 0.63vw, 12px) 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.filtros-panel__spec-header:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.filtros-panel__spec-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

.filtros-panel__spec-values[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(6px, 0.42vw, 8px);
}

/* --- ETIQUETAS (Figma node: 241-6695) --- */
.filtros-panel__tags-section[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.52vw, 10px);
}

.filtros-panel__tags-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fp-item-py) 0;
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__tags-grid[b-6f5p5t4qkt] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.52vw, 10px) clamp(6px, 0.42vw, 8px);
    padding: clamp(4px, 0.37vw, 7px) 0;
}

.filtros-panel__tag[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 2px clamp(10px, 0.78vw, 15px);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.filtros-panel__tag:hover[b-6f5p5t4qkt] {
    transform: translateY(-1px);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

.filtros-panel__tag:active[b-6f5p5t4qkt] {
    transform: translateY(0);
}

.filtros-panel__tag span[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
}

/* Tag colors - matching Figma exactly */
.filtros-panel__tag--nuevo[b-6f5p5t4qkt] {
    background: #FFFFFF;
}

.filtros-panel__tag--nuevo span[b-6f5p5t4qkt] {
    color: #121212;
}

.filtros-panel__tag--porcentaje[b-6f5p5t4qkt] {
    background: #686AAD;
}

.filtros-panel__tag--porcentaje span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--eco[b-6f5p5t4qkt] {
    background: #3CAA36;
}

.filtros-panel__tag--eco span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--oferta[b-6f5p5t4qkt] {
    background: #FF5449;
}

.filtros-panel__tag--oferta span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--reembolso[b-6f5p5t4qkt] {
    background: #FDD623;
}

.filtros-panel__tag--reembolso span[b-6f5p5t4qkt] {
    color: #141414;
}

.filtros-panel__tag--regalo[b-6f5p5t4qkt] {
    background: #52B0AD;
}

.filtros-panel__tag--regalo span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--homologado[b-6f5p5t4qkt] {
    background: #FF9500;
}

.filtros-panel__tag--homologado span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

/* Active state for tags — box-shadow inset (never clipped by overflow) */
.filtros-panel__tag--active[b-6f5p5t4qkt] {
    box-shadow: inset 0 0 0 2px #2D2E2E, 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Disabled/placeholder tags */
.filtros-panel__tag--disabled[b-6f5p5t4qkt] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- BOTONERA INFERIOR FIJA --- */
.filtros-panel__actions[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 0.78vw, 15px);
    padding: clamp(16px, 1.25vw, 24px) var(--fp-padding-x) clamp(24px, 2.08vw, 40px);
    flex-shrink: 0;
    background: #FFFFFF;
}

.filtros-panel__btn[b-6f5p5t4qkt] {
    flex: 1 1 0;
    height: var(--fp-btn-height);
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filtros-panel__btn--outline[b-6f5p5t4qkt] {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    color: #3CAA36;
}

.filtros-panel__btn--outline:hover[b-6f5p5t4qkt] {
    background: rgba(60, 170, 54, 0.06);
}

.filtros-panel__btn--filled[b-6f5p5t4qkt] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
}

.filtros-panel__btn--filled:hover[b-6f5p5t4qkt] {
    background: #35982f;
}

.filtros-panel__btn--filled:active[b-6f5p5t4qkt] {
    background: #2e8628;
}

/* Spinner inside button */
.filtros-panel__spinner[b-6f5p5t4qkt] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fp-spin-b-6f5p5t4qkt 0.8s linear infinite;
}

@keyframes fp-spin-b-6f5p5t4qkt {
    to {
        transform: rotate(360deg);
    }
}

/* Botón Filtros toolbar (estilo base) */
#filterToggleBtn[b-6f5p5t4qkt] {
    background: transparent;
    border: none;
    color: #121212;
    padding: 0;
    font-size: clamp(13px, 0.83vw, 16px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.50px;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    transition: opacity 0.2s ease;
    cursor: pointer;
}

#filterToggleBtn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.offcanvas-overlay[b-6f5p5t4qkt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: block;
    opacity: 1;
}

/* =================================
   SECCIÓN DE CONTENIDO SEO (Categorías y Marcas)
   ================================= */
.category-brand-seo-content[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 40px 115px 80px 115px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Header con título y línea */
.category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
    position: relative;
    height: 75px;
    width: 503px;
}

.category-brand-seo-content h2[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

.category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
    position: absolute;
    left: 0;
    top: 75px;
    width: 503px;
    height: auto;
}

/* Texto descriptivo */
.category-brand-seo-content p[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    margin: 0;
    text-align: left;
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */

/* Responsive para sección SEO */
@media (max-width: 1200px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 32px;
    }

    .category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }
}

@media (max-width: 768px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 15px;
        padding-right: 15px;
        gap: 20px;
    }

    .category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
        height: auto;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 24px;
    }

    .category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
        position: static;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 40px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 14px;
    }
}

/* =================================
   RESPONSIVE BREAKPOINTS - GRID PRODUCTOS
   ================================= */



/* Tablets y pantallas medianas */
@media (max-width: 1200px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    /* Truncar breadcrumb en tablets */
    .productos-breadcrumb[b-6f5p5t4qkt] {
        max-width: 400px;
    }


    .product-image[b-6f5p5t4qkt] {
        height: 240px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 15px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 15px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 15px;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    /* Toolbar: controles en 2 filas */
    .toolbar-controls-row[b-6f5p5t4qkt] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .toolbar-left[b-6f5p5t4qkt] {
        flex: 1 1 100%;
        order: 2;
        gap: 16px;
    }

    .toolbar-right[b-6f5p5t4qkt] {
        flex: 1 1 100%;
        order: 1;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* Ocultar separadores y breadcrumb en móvil */
    .toolbar-separator[b-6f5p5t4qkt] {
        display: none;
    }

    .productos-breadcrumb[b-6f5p5t4qkt] {
        display: none;
    }

    /* En scrolled volver a 1 fila */
    .productos-toolbar.scrolled .toolbar-controls-row[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
    }

    .productos-toolbar.scrolled .toolbar-left[b-6f5p5t4qkt] {
        flex: 0 1 auto;
        order: 1;
    }

    .productos-toolbar.scrolled .toolbar-right[b-6f5p5t4qkt] {
        flex: 0 1 auto;
        order: 2;
        margin-left: auto;
    }

    .product-grid[b-6f5p5t4qkt] {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
        gap: 20px 10px;
        padding: 0 15px;
    }

    .product-image[b-6f5p5t4qkt] {
        height: 180px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 10px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 10px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 10px;
    }

    .badge span[b-6f5p5t4qkt],
    .badge-stock span[b-6f5p5t4qkt] {
        font-size: 9px;
    }

    .product-title[b-6f5p5t4qkt] {
        font-size: 13px;
    }

    .current-price[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .btn-cart[b-6f5p5t4qkt] {
        width: 40px;
        height: 40px;
    }

    .btn-cart i[b-6f5p5t4qkt] {
        font-size: 18px;
    }

    .custom-offcanvas[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

    .filtros-panel[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

}

@media (max-width: 480px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    .product-grid[b-6f5p5t4qkt] {
        gap: 15px 8px;
    }

    .product-image[b-6f5p5t4qkt] {
        height: 150px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 8px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 8px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 8px;
    }

    .badge[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        padding: 1px 5px;
    }

    .badge span[b-6f5p5t4qkt],
    .badge-stock span[b-6f5p5t4qkt] {
        font-size: 8px;
    }

    .custom-offcanvas[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

    .filtros-panel[b-6f5p5t4qkt] {
        --fp-width: 90vw;
        --fp-padding-x: 16px;
        --fp-gap-sections: 20px;
        --fp-title-size: 28px;
    }

    .custom-offcanvas-header[b-6f5p5t4qkt] {
        padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    }

    .custom-offcanvas-body[b-6f5p5t4qkt] {
        padding: var(--fp-gap-sections) var(--fp-padding-x) var(--fp-padding-bottom);
    }
}

/* Old filter styles removed – all filter CSS now in .filtros-panel block above */

/* =================================
   CONTADOR DISCRETO DE PRODUCTOS
   (Integrado en toolbar-product-count)
   ================================= */

/* =================================
   BOTÓN CARGAR MÁS (Página 1 → 2)
   Clic manual con SEO en mente.
   Páginas 2+ se cargan automáticamente.
   ================================= */


/* =================================
   SECCIÓN OPORTUNIDADES ONLINE
   ================================= */
.oportunidades-section[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 20px 115px 80px 115px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

/* Header común para secciones */
.section-header[b-6f5p5t4qkt] {
    position: relative;
    height: 75px;
    width: 503px;
}

.section-title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

.section-underline[b-6f5p5t4qkt] {
    position: absolute;
    left: 0;
    top: 75px;
    width: 503px;
    height: auto;
}

/* Contenedor del slider */
.slider-container[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
}

/* Botones de navegación del carrusel */
.carousel-btn[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.carousel-btn:hover[b-6f5p5t4qkt] {
    transform: scale(1.1);
}

.carousel-btn img[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Flecha izquierda - invertida (arrow.png apunta a la derecha por defecto) */
.carousel-btn-prev img[b-6f5p5t4qkt] {
    transform: scaleX(-1);
}

/* Flecha derecha - sin transformación (ya apunta a la derecha) */
.carousel-btn-next img[b-6f5p5t4qkt] {
    /* Sin transformación */
}

/* Wrapper del carrusel con scroll horizontal */
.carousel-wrapper[b-6f5p5t4qkt] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE y Edge */
}

.carousel-wrapper[b-6f5p5t4qkt]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Track del carrusel de oportunidades */
.carousel-track.oportunidades-track[b-6f5p5t4qkt] {
    display: flex;
    gap: 0;
    min-width: max-content;
}

/* Card de producto de oportunidad */
.card-producto-oportunidad[b-6f5p5t4qkt] {
    border-left: 1px solid #E0E0E0;
    padding: 0 0 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    transition: border-left 0.2s ease;
    position: relative;
}

.card-producto-oportunidad:hover[b-6f5p5t4qkt] {
    border-left: 1px solid transparent;
}

.card-producto-oportunidad:hover[b-6f5p5t4qkt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #3CAA36;
    border-radius: 0 2px 2px 0;
}

.product-link-oportunidad[b-6f5p5t4qkt] {
    text-decoration: none;
    color: inherit;
}

/* Wrapper de imagen de producto oportunidad */
.product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
    width: 300px;
    height: 300px;
    border-radius: 14px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Badges izquierda en oportunidades */
.badges-left-oportunidad[b-6f5p5t4qkt] {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.badge-oportunidad[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.badge-oportunidad span[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    text-align: center;
}

.badge-oferta-oportunidad[b-6f5p5t4qkt] {
    background-color: #FF5449;
}

.badge-oferta-oportunidad span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.badge-eco-oportunidad[b-6f5p5t4qkt] {
    background-color: #3CAA36;
}

.badge-eco-oportunidad span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

/* Badge de stock en oportunidades */
.badge-stock-oportunidad[b-6f5p5t4qkt] {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    background-color: #EBF6EB;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.stock-dot-oportunidad[b-6f5p5t4qkt] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #3CAA36;
}

.stock-text-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #000000;
    text-align: center;
}

/* Contenido de producto oportunidad */
.product-content-oportunidad[b-6f5p5t4qkt] {
    width: 300px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.product-info-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Colores en oportunidades */
.colors-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-circle-oportunidad[b-6f5p5t4qkt] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.color-circle-oportunidad[b-6f5p5t4qkt]::after {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.color-black-op[b-6f5p5t4qkt]::after {
    background-color: #000000;
}

.color-white-op[b-6f5p5t4qkt]::after {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
}

.color-yellow-op[b-6f5p5t4qkt]::after {
    background-color: #FDD623;
}

.color-blue-op[b-6f5p5t4qkt]::after {
    background-color: #0066CC;
}

/* Color seleccionado con borde externo */
.color-circle-oportunidad.selected[b-6f5p5t4qkt] {
    border: 4px solid rgba(0, 0, 0, 0.2);
}

.more-colors-op[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #141718;
    text-align: center;
    margin-left: 2px;
}

/* Título en oportunidades */
.title-link-oportunidad[b-6f5p5t4qkt] {
    text-decoration: none;
    color: inherit;
}

.product-title-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #141718;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: block;
    transition: color 0.2s ease;
}

.title-link-oportunidad:hover .product-title-oportunidad[b-6f5p5t4qkt] {
    color: #3CAA36;
}

/* Precio en oportunidades */
.price-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.current-price-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #212121;
}

.current-price-oportunidad.price-offer-op[b-6f5p5t4qkt] {
    color: #DE3730;
}

.original-price-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #9E9E9E;
    text-decoration: line-through;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

/* Botón carrito en oportunidades */
.btn-cart-oportunidad[b-6f5p5t4qkt] {
    width: 65px;
    height: 65px;
    border-radius: 6px;
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    color: #3CAA36;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-cart-oportunidad:hover[b-6f5p5t4qkt] {
    background-color: #3CAA36;
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
}

.btn-cart-oportunidad:active[b-6f5p5t4qkt] {
    transform: scale(0.98);
}

.btn-cart-oportunidad i[b-6f5p5t4qkt] {
    font-size: 24px;
}

.no-products-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #666;
    padding: 20px;
}

/* =================================
   SECCIÓN NUESTRAS MARCAS
   ================================= */
.marcas-section[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 40px 115px 0 115px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* Wrapper del carrusel de marcas */
.marcas-carousel-wrapper[b-6f5p5t4qkt] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.marcas-carousel-wrapper[b-6f5p5t4qkt]::-webkit-scrollbar {
    display: none;
}

/* Track de marcas */
.marcas-track[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    /* Sin gap, justificación space-between */
    width: 1690px;
}

.marcas-track img[b-6f5p5t4qkt] {
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.marcas-track img:hover[b-6f5p5t4qkt] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Tamaños específicos de Figma para cada logo */
.marcas-track .logo-hp[b-6f5p5t4qkt] {
    width: 50px;
    height: 50px;
}

.marcas-track .logo-sharp[b-6f5p5t4qkt] {
    width: 103px;
    height: 14px;
}

.marcas-track .logo-navigator[b-6f5p5t4qkt] {
    width: 106px;
    height: 33px;
}

.marcas-track .element[b-6f5p5t4qkt] {
    width: 63.46px;
    height: 33px;
}

.marcas-track .logo-pilot[b-6f5p5t4qkt] {
    width: 108.6px;
    height: 30px;
}

.marcas-track .logo-fellowes[b-6f5p5t4qkt] {
    width: 122.18px;
    height: 28px;
}

.marcas-track .logo-poly-polycom[b-6f5p5t4qkt] {
    width: 107px;
    height: 50px;
}

.marcas-track .logo-petrus-azul[b-6f5p5t4qkt] {
    width: 99px;
    height: 33px;
}

.marcas-track .LOGO-EDDING[b-6f5p5t4qkt] {
    width: 132px;
    height: 33px;
}

.marcas-track .logo-bic[b-6f5p5t4qkt] {
    width: 101.64px;
    height: 33px;
}

/* =================================
   RESPONSIVE PARA SECCIONES DE SLIDER
   ================================= */

@media (max-width: 1200px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .section-header[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 32px;
    }

    .section-underline[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 260px;
        height: 260px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 260px;
    }
}

@media (max-width: 768px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 15px;
        padding-right: 15px;
        gap: 30px;
    }

    .section-header[b-6f5p5t4qkt] {
        height: auto;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 24px;
    }

    .section-underline[b-6f5p5t4qkt] {
        position: static;
        margin-top: 10px;
    }

    .slider-container[b-6f5p5t4qkt] {
        gap: 10px;
    }

    .carousel-btn[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }

    .carousel-btn img[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 220px;
        height: 220px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 220px;
        padding: 0 10px;
    }

    .btn-cart-oportunidad[b-6f5p5t4qkt] {
        width: 50px;
        height: 50px;
    }

    .btn-cart-oportunidad i[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .marca-logo[b-6f5p5t4qkt] {
        height: 40px;
    }

    .marca-logo img[b-6f5p5t4qkt] {
        max-height: 40px;
        max-width: 100px;
    }
}

@media (max-width: 480px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 10px;
        padding-right: 10px;
        gap: 20px;
        margin-top: 40px;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 180px;
        height: 180px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 180px;
    }

    .badges-left-oportunidad[b-6f5p5t4qkt],
    .badge-stock-oportunidad[b-6f5p5t4qkt] {
        top: 10px;
    }

    .badges-left-oportunidad[b-6f5p5t4qkt] {
        left: 10px;
    }

    .badge-stock-oportunidad[b-6f5p5t4qkt] {
        right: 10px;
    }

    .product-title-oportunidad[b-6f5p5t4qkt] {
        font-size: 14px;
        max-width: 120px;
    }

    .current-price-oportunidad[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .original-price-oportunidad[b-6f5p5t4qkt] {
        font-size: 12px;
    }

    .btn-cart-oportunidad[b-6f5p5t4qkt] {
        width: 45px;
        height: 45px;
    }

    .btn-cart-oportunidad i[b-6f5p5t4qkt] {
        font-size: 18px;
    }

    .marca-logo[b-6f5p5t4qkt] {
        height: 30px;
    }

    .marca-logo img[b-6f5p5t4qkt] {
        max-height: 30px;
        max-width: 80px;
    }
}

/* ============================================= */
/* SLIDER WRAPPERS                                */
/* These wrappers provide --padding-lateral and    */
/* overflow:hidden so the shared ProductSlider &   */
/* BrandSlider components can use negative margins */
/* without causing body overflow.                  */
/* Mirrors .home-body-3 / .home-body-4 from Home  */
/* ============================================= */

.productos-slider-wrapper[b-6f5p5t4qkt] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(30px, 3.13vw, 60px) var(--padding-lateral) clamp(20px, 2.08vw, 40px);
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
}

.productos-brands-wrapper[b-6f5p5t4qkt] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(10px, 1.04vw, 20px) var(--padding-lateral) clamp(10px, 1.04vw, 20px);
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
}

/* TABLET */
@media (max-width: 1024px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 30px;
        padding: 30px var(--padding-lateral) 20px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 30px;
        padding: 10px var(--padding-lateral);
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        padding: 24px var(--padding-lateral) 16px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        padding: 8px var(--padding-lateral);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        padding: 20px var(--padding-lateral) 12px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        padding: 8px var(--padding-lateral);
    }
}

/* ============================================= */
/* SEO CONTENT SECTION (Info)                     */
/* Figma node: 3627:35656                         */
/* Responsive: clamp() fluid + breakpoints        */
/* ============================================= */

.category-brand-seo-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.83vw, 16px);
    align-items: flex-start;
    padding: clamp(25px, 2.6vw, 50px) clamp(16px, 6vw, 115px);
    width: 100%;
    box-sizing: border-box;
    font-family: "Nunito Sans", Helvetica, sans-serif;
}

.category-brand-seo-content h2[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: clamp(22px, 1.46vw, 28px);
    color: #212121;
    margin: 0;
    padding: 0;
}

.category-brand-seo-content p[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: clamp(16px, 1.04vw, 20px);
    letter-spacing: 0.25px;
    color: #757575;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.seo-text-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.52vw, 10px);
}

/* TABLET */
@media (max-width: 1024px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 30px 30px;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 24px 16px;
        gap: 12px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 18px;
        line-height: 24px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 13px;
        line-height: 18px;
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 20px 12px;
        gap: 10px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 12px;
        line-height: 17px;
    }
}

/* ============================================= */
/* PRE-FOOTER (Links Categorías)                 */
/* Igual que Home - Figma: 3627:35660            */
/* ============================================= */
.pre-footer[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    padding: clamp(25px, 2.6vw, 50px) clamp(16px, 6vw, 115px);
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    gap: 0;
    --prefooter-col-padding: clamp(20px, 2.1vw, 40px);
    box-sizing: border-box;
}

.pre-footer-column[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
    flex: 1;
    padding: 0 var(--prefooter-col-padding);
    justify-content: center;
    align-items: flex-start;
}

.pre-footer-separator[b-6f5p5t4qkt] {
    width: 1px;
    height: clamp(50px, 4.375vw, 84px);
    align-self: center;
    background-image: linear-gradient(to bottom, #9E9E9E 50%, transparent 50%);
    background-size: 1px clamp(4px, 0.3125vw, 6px);
    background-repeat: repeat-y;
    flex-shrink: 0;
    position: relative;
}

.category-link[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.625vw, 12px);
    text-decoration: none;
    color: #9E9E9E;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: clamp(18px, 1.458vw, 28px);
    position: relative;
    padding-left: 0;
}

.link-indicator[b-6f5p5t4qkt] {
    position: absolute;
    left: calc(var(--prefooter-col-padding) * -1 - 1.5px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(2px, 0.156vw, 3px);
    height: clamp(25px, 2.1875vw, 42px);
    background-color: transparent;
    border-radius: 2px;
    transition: background-color 0.35s ease;
}

.link-icon[b-6f5p5t4qkt] {
    width: clamp(14px, 1.042vw, 20px);
    height: clamp(14px, 1.042vw, 20px);
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.link-text[b-6f5p5t4qkt] {
    white-space: nowrap;
    transition: transform 0.35s ease, color 0.35s ease;
}

.category-link:hover[b-6f5p5t4qkt] {
    color: #141718;
}

.category-link:hover .link-indicator[b-6f5p5t4qkt] {
    background-color: #3CAA36;
}

.category-link:hover .link-icon[b-6f5p5t4qkt] {
    opacity: 1;
}

.category-link:hover .link-text[b-6f5p5t4qkt] {
    color: #141718;
}

@media (max-width: 1024px) {
    .pre-footer[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
        gap: 0;
        padding: 30px var(--padding-lateral, 30px);
        --prefooter-col-padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pre-footer[b-6f5p5t4qkt]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        flex: 1 0 auto;
        min-width: 100px;
        padding: 0 var(--prefooter-col-padding);
        gap: 8px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        display: block;
        flex-shrink: 0;
        height: 50px;
    }

    .link-indicator[b-6f5p5t4qkt] {
        display: none;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 11px;
        gap: 4px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 14px;
        height: 14px;
    }

    .link-text[b-6f5p5t4qkt] {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .pre-footer[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
        padding: 24px var(--padding-lateral, 16px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        --prefooter-col-padding: 8px;
        max-width: 100%;
    }

    .pre-footer[b-6f5p5t4qkt]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 0 var(--prefooter-col-padding);
        gap: 6px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        height: 40px;
        flex-shrink: 0;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 10px;
        gap: 3px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .pre-footer[b-6f5p5t4qkt] {
        padding: 20px var(--padding-lateral, 12px);
        --prefooter-col-padding: 6px;
        max-width: 100%;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        min-width: 75px;
        gap: 4px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        height: 35px;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 9px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 10px;
        height: 10px;
    }
}

/* === Agrupaciones: swatches de variantes ===
   El markup se movió al componente compartido ProductSwatches
   (Components/Shared/ProductSwatches.razor) para que el grid y los sliders
   rendericen exactamente el mismo componente. Sus estilos viven ahora en
   ProductSwatches.razor.css (CSS aislado de Blazor). === */

/* =================================
   RESPONSIVE PRODUCT GRID
   Flex-wrap con cards de tamaño fijo escalado por breakpoint
   ================================= */

/* ≤1400px — 4 columnas de 280px, padding lateral menor */
@media (max-width: 1400px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(24px, 4vw, 80px);
        --producto-img-size: 240px;
        --btn-cart-size: 52px;
        --font-body: 14px;
        --font-price: 17px;
        --gap-vertical: 40px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 240px;
        width: 240px;
    }
}

/* ≤1100px — 3 columnas de 220px */
@media (max-width: 1100px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(16px, 3vw, 48px);
        --producto-img-size: 220px;
        --btn-cart-size: 48px;
        --radius-card: 10px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
        --gap-vertical: 32px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 220px;
        width: 220px;
        padding: 0 0 8px 12px;
        gap: 6px;
    }

    .boton[b-6f5p5t4qkt] {
        border-radius: 5px;
    }

    .load-more-btn[b-6f5p5t4qkt] {
        font-size: 18px;
    }
}

/* ≤768px — 2 columnas de 180px */
@media (max-width: 768px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        --producto-img-size: 180px;
        --btn-cart-size: 44px;
        --radius-card: 9px;
        --font-body: 12px;
        --font-price: 14px;
        --gap-vertical: 24px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 180px;
        width: 180px;
        padding: 0 0 6px 10px;
        gap: 4px;
    }

    .load-more-btn[b-6f5p5t4qkt] {
        font-size: 16px;
        gap: 10px;
    }

    .load-more-btn svg[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }
}

/* ≤520px — columnas de 150px, auto-fill determina cuántas caben */
@media (max-width: 520px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        --producto-img-size: 150px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --radius-card: 8px;
        --font-price: 13px;
        --gap-vertical: 20px;
        justify-content: space-between;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 150px;
        width: 150px;
    }
}

/* images-only grid responsive: escalar imagen y card a la vez */
@media (max-width: 1400px) {
    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 130px + pl 20px = 150px */
        flex: 0 0 150px;
        width: 150px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 1100px) {
    .product-grid.images-only-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(16px, 3vw, 48px);
    }

    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 110px + pl 20px = 130px */
        flex: 0 0 130px;
        width: 130px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .product-grid.images-only-grid[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        /* En móvil: 4 columnas */
        justify-content: space-around;
    }

    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 90px + pl 12px = 102px */
        flex: 0 0 102px;
        width: 102px;
        padding-left: 12px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 90px;
        height: 90px;
        border-radius: 8px;
    }
}

/* /Components/Pages/ResetPassword.razor.rz.scp.css */
*[b-z7lti548b2] {
    box-sizing: border-box;
}

body[b-z7lti548b2] {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #333;
    margin: 0;
    padding: 0;
}

.container[b-z7lti548b2] {
    max-width: 900px;
    margin-top: 150px;
    margin-bottom: 180px;
    text-align: center;
}

/* Encabezado — solo título, sin logo */
.form-header[b-z7lti548b2] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

    .form-header h1[b-z7lti548b2] {
        font-size: 48px;
        margin: 0;
    }

/* Formulario */
.reset-form[b-z7lti548b2] {
    max-width: 400px;
    margin: 0 auto;
}

/* Inputs */
.reset-form input[b-z7lti548b2] {
    width: 100%;
    padding: 12px;
    margin-bottom: 24px;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 1em;
    font-family: inherit;
}

    .reset-form input[b-z7lti548b2]::placeholder {
        color: #888;
    }

    .reset-form input:focus[b-z7lti548b2] {
        border: 2px solid #28a745;
        outline: none;
    }

/* Campo de contraseña con toggle */
.password-field[b-z7lti548b2] {
    position: relative;
    width: 100%;
}

    .password-field input[b-z7lti548b2] {
        padding-right: 48px;
    }

.toggle-password[b-z7lti548b2] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(calc(-50% - 12px)); /* compensar margin-bottom:24px del input */
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

    .toggle-password:hover[b-z7lti548b2] {
        opacity: 1;
    }

/* Alertas */
.alert[b-z7lti548b2] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: left;
}

.alert-danger[b-z7lti548b2] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.alert-success[b-z7lti548b2] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Loading state */
.loading-state[b-z7lti548b2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 0;
}

    .loading-state p[b-z7lti548b2] {
        color: #666;
        font-size: 16px;
    }

.spinner-border[b-z7lti548b2] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(60, 170, 54, 0.25);
    border-right-color: var(--primario, #3CAA36);
    border-radius: 50%;
    animation: spinner-border-b-z7lti548b2 0.75s linear infinite;
}

.spinner-border-sm[b-z7lti548b2] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

@keyframes spinner-border-b-z7lti548b2 {
    to {
        transform: rotate(360deg);
    }
}

/* Botones — idéntico a Login */
.btn-group[b-z7lti548b2] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.submit-btn[b-z7lti548b2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 24px;
    text-decoration: none;
    padding: 7px 24px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    height: 54px;
    background: var(--primario, #3CAA36);
    color: var(--blanco, #fff);
    border: none;
}

    .submit-btn:hover[b-z7lti548b2] {
        background: var(--primaryprimary-60, #2F9A29);
    }

    .submit-btn:disabled[b-z7lti548b2] {
        opacity: 0.7;
        cursor: not-allowed;
    }
/* /Components/Pages/SeguimientoPedido.razor.rz.scp.css */
.seguimiento-pedido[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 75px;
    padding: 0px 115px 100px;
    position: relative;
    background-color: #ffffff;
}

.seguimiento-pedido .frame[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.seguimiento-pedido .titulo[b-3afsou0zrb] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.seguimiento-pedido h2[b-3afsou0zrb] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.seguimiento-pedido .iconos[b-3afsou0zrb] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.seguimiento-pedido .div[b-3afsou0zrb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.seguimiento-pedido .text-wrapper[b-3afsou0zrb] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.seguimiento-pedido .boton[b-3afsou0zrb] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.seguimiento-pedido .boton:hover[b-3afsou0zrb] {
    background-color: #80C87C;
}

.seguimiento-pedido .state-layer[b-3afsou0zrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.seguimiento-pedido .label-text[b-3afsou0zrb] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.seguimiento-pedido .frame-2[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 75px;
    align-self: stretch;
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: 15px;
    position: relative;
    flex: 0 0 auto;
}

.seguimiento-pedido .frame-3[b-3afsou0zrb] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}

.seguimiento-pedido .frame-4[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.seguimiento-pedido .text-wrapper-2[b-3afsou0zrb] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    max-width: 200px;
    text-align: center;
}

.seguimiento-pedido .text-wrapper-2.realizado[b-3afsou0zrb] {
    font-weight: 700;
    color: var(--primario);
}

.seguimiento-pedido .text-wrapper-2.actual[b-3afsou0zrb] {
    font-weight: 700;
    color: var(--alternativo-oscuro);
}

.seguimiento-pedido .frame-4 .icon[b-3afsou0zrb] {
    display: flex;
    width: 150px;
    height: 40px;
    padding: 10px 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: var(--alternativo);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20);
}

.seguimiento-pedido .frame-4 .icon.realizado[b-3afsou0zrb] {
    background: var(--primario);
}

.seguimiento-pedido .frame-4 .icon img[b-3afsou0zrb] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.seguimiento-pedido .frame-4 img[b-3afsou0zrb] {
    height: 1px;
}

.seguimiento-pedido .frame-5[b-3afsou0zrb] {
    display: flex;
    padding-top: 45px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex: 1 0 0;
}

.seguimiento-pedido .frame-5 img[b-3afsou0zrb] {
    height: 5px;
    align-self: stretch;
    width: 100%;
}

.seguimiento-pedido .frame-6[b-3afsou0zrb] {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 20px;
    position: relative;
    width: 1328px;
}

.seguimiento-pedido .tabla-wrapper[b-3afsou0zrb] {
    padding: 15px;
    border-radius: 20px;
    width: 100%;
}

.seguimiento-pedido .tabla-container[b-3afsou0zrb] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.seguimiento-pedido .tabla-mejorada[b-3afsou0zrb] {
    width: 100%;
    border-collapse: separate;
    font-family: var(--body-large-font-family, sans-serif);
    font-size: 16px;
    padding: 0;
}

.seguimiento-pedido .tabla-mejorada tbody tr:not(:last-child) td[b-3afsou0zrb] {
    border-bottom: 1px solid #d3d3d3;
}

.seguimiento-pedido .tabla-mejorada thead[b-3afsou0zrb] {
    color: #000000;
    font-weight: bold;
    position: relative;
}

.seguimiento-pedido .tabla-mejorada thead[b-3afsou0zrb]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.seguimiento-pedido .tabla-mejorada th[b-3afsou0zrb],
.seguimiento-pedido .tabla-mejorada td[b-3afsou0zrb] {
    padding: 10px;
    min-width: 140px;
    max-width: 140px;
    width: 140px;
    text-align: center;
}

.seguimiento-pedido .tabla-mejorada .th1[b-3afsou0zrb] {
    text-align: left;
    min-width: 500px;
    width: 100%;
}

.seguimiento-pedido .tabla-mejorada .th6[b-3afsou0zrb] {
    max-width: 250px;
    min-width: 250px;
    width: 250px;
}

.seguimiento-pedido .tabla-mejorada th .subheader[b-3afsou0zrb] {
    font-size: 0.8em; /* Ajusta el tamaño según lo necesites */
    color: #888888; /* Color gris */
}

.seguimiento-pedido .tabla-mejorada .td1[b-3afsou0zrb] {
    min-width: 500px;
    width: 100%;
}

.seguimiento-pedido .tabla-mejorada .td1 .td-content[b-3afsou0zrb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.seguimiento-pedido .tabla-mejorada .td1 img[b-3afsou0zrb] {
    height: 100px;
    width: 100px;
}

.seguimiento-pedido .tabla-mejorada .td1 .producto-info[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.seguimiento-pedido .tabla-mejorada .td1 .descripcion[b-3afsou0zrb] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.seguimiento-pedido .tabla-mejorada .td1 .referencia[b-3afsou0zrb] {
    color: var(--negro);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.seguimiento-pedido .tabla-mejorada .td3[b-3afsou0zrb], .seguimiento-pedido .tabla-mejorada .td4[b-3afsou0zrb], .seguimiento-pedido .tabla-mejorada .td5[b-3afsou0zrb] {
    text-align: right;
}

.seguimiento-pedido .tabla-mejorada .td6[b-3afsou0zrb] {
    max-width: 250px;
    min-width: 250px;
    width: 250px;
}

.seguimiento-pedido .state-layer-wrapper[b-3afsou0zrb] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.seguimiento-pedido .state-layer-wrapper:hover[b-3afsou0zrb] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.seguimiento-pedido .state-layer-wrapper:hover .label-text-2[b-3afsou0zrb] {
    color: var(--blanco);
}

.seguimiento-pedido .label-text-2[b-3afsou0zrb] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.seguimiento-pedido .alert p[b-3afsou0zrb] {
    margin-bottom: 0;
}
/* /Components/Pages/ServicioTecnicoEquipos.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS - Sistema responsive con clamp() */
/* ============================================= */
.servicio-tecnico[b-cf276rbezw] {
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-30: #E0E0E0;
    --black-fonts-headings: #2D2E2E;

    /* Paddings laterales */
    --st-padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps */
    --st-gap-sm: clamp(15px, 1.56vw, 30px);
    --st-gap-lg: clamp(35px, 3.91vw, 75px);

    /* Card interior padding */
    --st-card-padding-y: clamp(20px, 3.13vw, 60px);
    --st-card-padding-x: clamp(20px, 3.91vw, 75px);

    /* Tipografía fluida */
    --st-font-title: clamp(14px, 1.67vw, 32px);
    --st-font-header: clamp(12px, 0.83vw, 16px);
    --st-font-body: clamp(13px, 0.83vw, 16px);
    --st-font-btn: clamp(12px, 0.83vw, 16px);

    /* Imagen producto */
    --st-img-size: clamp(60px, 5.21vw, 100px);
    --st-img-radius: clamp(8px, 0.73vw, 14px);

    /* Botones */
    --st-btn-radius: 6px;
    --st-btn-padding-x: clamp(8px, 1.25vw, 24px);
    --st-btn-padding-y: clamp(8px, 0.76vw, 14.5px);

    /* Help button */
    --st-help-btn-width: clamp(280px, 30.83vw, 592px);
    --st-help-btn-height: clamp(44px, 2.71vw, 52px);

    /* Border radius card */
    --st-card-radius: clamp(10px, 0.78vw, 15px);

    /* Row height */
    --st-row-height: clamp(80px, 6.67vw, 128px);
}

/* ============================================= */
/* ESTILOS GENERALES */
/* ============================================= */
.servicio-tecnico[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--st-gap-lg);
    padding: 0 var(--st-padding-lateral) clamp(40px, 5.21vw, 100px);
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    box-sizing: border-box;
}

/* ============================================= */
/* HEADER - Título + flecha */
/* ============================================= */
.servicio-tecnico .titulo[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.servicio-tecnico .titulo h2[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--st-font-header);
    letter-spacing: 0;
    line-height: normal;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}

.servicio-tecnico .titulo a[b-cf276rbezw] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.servicio-tecnico .titulo .iconos[b-cf276rbezw] {
    width: clamp(18px, 1.25vw, 24px);
    height: clamp(18px, 1.25vw, 24px);
}

/* ============================================= */
/* CONTENIDO PRINCIPAL */
/* ============================================= */
.servicio-tecnico .frame[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    gap: var(--st-gap-sm);
    align-items: flex-start;
    width: 100%;
}

/* Subtítulo "Equipos de Impresión" */
.servicio-tecnico .text-wrapper[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--st-font-title);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

/* ============================================= */
/* CONTENEDOR TABLA GRIS */
/* ============================================= */
.servicio-tecnico .frame-2[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--gris-10);
    border-radius: var(--st-card-radius);
    padding: var(--st-card-padding-y) var(--st-card-padding-x);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* TABLA DESKTOP */
/* ============================================= */
.servicio-tecnico .tabla-wrapper[b-cf276rbezw] {
    width: 100%;
}

.servicio-tecnico .tabla-container[b-cf276rbezw] {
    width: 100%;
}

.servicio-tecnico .tabla-mejorada[b-cf276rbezw] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--st-font-body);
}

/* Header */
.servicio-tecnico .tabla-mejorada thead tr[b-cf276rbezw] {
    border-bottom: 1px solid #000000;
}

.servicio-tecnico .tabla-mejorada thead th[b-cf276rbezw] {
    font-weight: 700;
    color: #000000;
    font-size: var(--st-font-header);
    padding-bottom: 20px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #000000;
}

.servicio-tecnico .tabla-mejorada .th1[b-cf276rbezw] {
    width: 305px;
    min-width: 200px;
}

.servicio-tecnico .tabla-mejorada .th2[b-cf276rbezw] {
    width: 180px;
    text-align: center;
    padding-left: clamp(10px, 1.56vw, 30px);
    padding-right: clamp(10px, 1.56vw, 30px);
}

.servicio-tecnico .tabla-mejorada .th3[b-cf276rbezw] {
    width: 278px;
    text-align: center;
    padding-left: clamp(10px, 1.56vw, 30px);
    padding-right: clamp(10px, 1.56vw, 30px);
}

.servicio-tecnico .tabla-mejorada .th4[b-cf276rbezw] {
    width: auto;
    padding-left: clamp(5px, 1.04vw, 20px);
}

/* Rows */
.servicio-tecnico .tabla-mejorada tbody tr[b-cf276rbezw] {
    border-bottom: 1px dashed var(--gris-30);
    height: var(--st-row-height);
}

.servicio-tecnico .tabla-mejorada tbody tr td[b-cf276rbezw] {
    padding: 0;
    vertical-align: middle;
    border-bottom: 1px dashed var(--gris-30);
    height: var(--st-row-height);
}

.servicio-tecnico .tabla-mejorada tbody tr:last-child td[b-cf276rbezw] {
    border-bottom: none;
}

/* TD1: Imagen + nombre producto */
.servicio-tecnico .td1 .td-content[b-cf276rbezw] {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.56vw, 30px);
}

.servicio-tecnico .td1[b-cf276rbezw] {
    padding-right: 10px;
}

.servicio-tecnico .product-image[b-cf276rbezw] {
    width: var(--st-img-size);
    height: var(--st-img-size);
    border-radius: var(--st-img-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.servicio-tecnico .product-img[b-cf276rbezw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--st-img-radius);
}

.servicio-tecnico .product-link[b-cf276rbezw] {
    display: flex;
    flex-shrink: 0;
}

.servicio-tecnico .producto-info[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
}

.servicio-tecnico .descripcion[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--st-font-body);
    line-height: 24px;
    letter-spacing: 0.5px;
}

/* TD2: Número de máquina */
.servicio-tecnico .td2[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--st-font-body);
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: center;
    padding-left: clamp(10px, 1.56vw, 30px);
    padding-right: clamp(10px, 1.56vw, 30px);
}

/* TD3: Dirección */
.servicio-tecnico .td3[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: var(--st-font-body);
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: center;
    padding-left: clamp(10px, 1.56vw, 30px);
    padding-right: clamp(10px, 1.56vw, 30px);
}

/* TD4: Botones */
.servicio-tecnico .td4[b-cf276rbezw] {
    padding-left: clamp(5px, 1.04vw, 20px);
}

.servicio-tecnico .td4 .td-content[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.3vw, 25px);
}

/* ============================================= */
/* BOTONES DE ACCIÓN */
/* ============================================= */
.servicio-tecnico .boton[b-cf276rbezw],
.servicio-tecnico .boton-2[b-cf276rbezw],
.servicio-tecnico .boton-3[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--st-btn-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Solicitar Consumible - verde relleno */
.servicio-tecnico .boton[b-cf276rbezw] {
    background-color: var(--primario);
    border: none;
}

.servicio-tecnico .boton .state-layer[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--st-btn-padding-y) var(--st-btn-padding-x);
    width: 100%;
}

.servicio-tecnico .boton .label-text[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--blanco);
    font-size: var(--st-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

/* Reportar Incidencia - verde contorno */
.servicio-tecnico .boton-2[b-cf276rbezw] {
    background-color: var(--blanco);
    border: 1px solid var(--primario);
}

.servicio-tecnico .boton-2 .state-layer[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--st-btn-padding-y) var(--st-btn-padding-x);
    width: 100%;
}

.servicio-tecnico .boton-2 .label-text[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--primario);
    font-size: var(--st-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

/* Enviar Contador - amarillo contorno */
.servicio-tecnico .boton-3[b-cf276rbezw] {
    background-color: var(--blanco);
    border: 1px solid var(--alternativo-oscuro);
}

.servicio-tecnico .boton-3 .state-layer[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--st-btn-padding-y) var(--st-btn-padding-x);
    width: 100%;
}

.servicio-tecnico .boton-3 .label-text[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--negro);
    font-size: var(--st-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

/* Hover effects */
.servicio-tecnico .boton:hover[b-cf276rbezw] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.servicio-tecnico .boton-2:hover[b-cf276rbezw] {
    background-color: rgba(60, 170, 54, 0.05);
    transform: translateY(-1px);
}

.servicio-tecnico .boton-3:hover[b-cf276rbezw] {
    background-color: rgba(236, 198, 27, 0.08);
    transform: translateY(-1px);
}

/* ============================================= */
/* BOTÓN ¿TE AYUDAMOS? */
/* ============================================= */
.servicio-tecnico .state-layer-wrapper[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    width: var(--st-help-btn-width);
    height: var(--st-help-btn-height);
    align-items: center;
    justify-content: center;
    background-color: var(--blanco);
    border: 1px solid var(--alternativo-oscuro);
    border-radius: var(--st-btn-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.servicio-tecnico .state-layer-wrapper:hover[b-cf276rbezw] {
    background-color: rgba(236, 198, 27, 0.08);
    transform: translateY(-1px);
}

.servicio-tecnico .state-layer-wrapper .state-layer[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    width: 100%;
    height: 100%;
}

.servicio-tecnico .label-text-2[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--negro);
    font-size: var(--st-font-btn);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}

.servicio-tecnico .label-text-2:hover[b-cf276rbezw] {
    text-decoration: none;
    color: var(--negro);
}

/* ============================================= */
/* ALERTS */
/* ============================================= */
.servicio-tecnico .alert[b-cf276rbezw] {
    padding: clamp(10px, 1.04vw, 20px);
    border-radius: 8px;
    font-size: var(--st-font-body);
    width: 100%;
    box-sizing: border-box;
}

.servicio-tecnico .alert-warning[b-cf276rbezw] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.servicio-tecnico .alert-danger[b-cf276rbezw] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.servicio-tecnico .alert-success[b-cf276rbezw] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ============================================= */
/* MOBILE CARD LAYOUT (hidden on desktop) */
/* ============================================= */
.servicio-tecnico .mobile-cards[b-cf276rbezw] {
    display: none;
}

/* ============================================= */
/* MODALS - Figma Design */
/* ============================================= */
.st-modal-overlay[b-cf276rbezw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.st-modal[b-cf276rbezw] {
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: clamp(600px, 51.3vw, 985px);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);
    padding: clamp(20px, 1.56vw, 30px) clamp(25px, 2.6vw, 50px);
}

.st-modal-close[b-cf276rbezw] {
    position: absolute;
    top: clamp(15px, 1.56vw, 30px);
    right: clamp(14px, 1.4vw, 27px);
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #757575;
    line-height: 1;
    transition: color 0.2s ease;
}

.st-modal-close:hover[b-cf276rbezw] {
    color: #000000;
}

/* Two-column layout */
.st-modal-columns[b-cf276rbezw] {
    display: flex;
    gap: clamp(25px, 2.6vw, 50px);
    align-items: flex-start;
    width: 100%;
}

.st-modal-col[b-cf276rbezw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Each field section */
.st-modal-field[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.83vw, 16px);
    padding: clamp(12px, 1.25vw, 24px) 0;
    border-bottom: 1px dashed #E0E0E0;
}

/* All fields inside columns get the same height for row alignment */
.st-modal-col .st-modal-field[b-cf276rbezw] {
    height: clamp(100px, 7.86vw, 151px);
    box-sizing: border-box;
}

.st-modal-col .st-modal-field:last-child[b-cf276rbezw] {
    border-bottom: 1px dashed #E0E0E0;
}

/* Field label (title) */
.st-modal-label[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: clamp(22px, 1.46vw, 28px);
    color: #212121;
}

/* Field value (disabled/static) */
.st-modal-value[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: clamp(16px, 1.04vw, 20px);
    letter-spacing: 0.25px;
    color: #757575;
    word-break: break-word;
}

/* Input wrapper */
.st-modal-input-wrap[b-cf276rbezw] {
    width: 100%;
}

/* Input field */
.st-modal-input[b-cf276rbezw] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 0.94vw, 18px);
    padding: clamp(12px, 0.89vw, 17px) clamp(12px, 0.83vw, 16px);
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    outline: none;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

.st-modal-input[b-cf276rbezw]::placeholder {
    color: #9E9E9E;
}

.st-modal-input:focus[b-cf276rbezw] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.2);
}

/* Textarea */
.st-modal-textarea[b-cf276rbezw] {
    min-height: clamp(100px, 7.24vw, 139px);
    resize: vertical;
}

/* Full-width field (no column) */
.st-modal-field-full[b-cf276rbezw] {
    border-bottom: none;
    padding-top: 0;
}

/* Submit button */
.st-modal-btn[b-cf276rbezw] {
    width: fit-content;
    height: clamp(44px, 2.8125vw, 54px);
    padding: clamp(8px, 0.52vw, 10px) clamp(18px, 1.25vw, 24px);
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.st-modal-btn:hover[b-cf276rbezw] {
    background-color: #349c2f;
}

.st-modal-btn:disabled[b-cf276rbezw] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Consumibles section */
.st-modal-field-consumibles[b-cf276rbezw] {
    padding-top: 0;
    padding-bottom: clamp(12px, 1.25vw, 24px);
    border-bottom: 1px dashed #E0E0E0;
}

.st-modal-consumibles[b-cf276rbezw] {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.04vw, 20px);
    flex-wrap: wrap;
}

/* Color circle checkboxes */
.consumible-circle[b-cf276rbezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.consumible-circle input[type="checkbox"][b-cf276rbezw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.consumible-circle .circle-dot[b-cf276rbezw] {
    width: clamp(18px, 1.09vw, 21px);
    height: clamp(18px, 1.09vw, 21px);
    border-radius: 50%;
    border: clamp(3px, 0.21vw, 4px) solid transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner colored dot - always 15px (fills remaining space after border) */
.consumible-circle .circle-dot[b-cf276rbezw]::after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Selected: dashed ring appears around the dot */
.consumible-circle input:checked+.circle-dot[b-cf276rbezw] {
    outline: 1.5px dashed currentColor;
    outline-offset: 0px;
    border-color: transparent;
}

.consumible-negro .circle-dot[b-cf276rbezw]::after {
    background-color: #000000;
}

.consumible-negro[b-cf276rbezw] {
    color: #000000;
}

.consumible-cian .circle-dot[b-cf276rbezw]::after {
    background-color: #00BCD4;
}

.consumible-cian[b-cf276rbezw] {
    color: #00BCD4;
}

.consumible-amarillo .circle-dot[b-cf276rbezw]::after {
    background-color: #FFEB3B;
}

.consumible-amarillo[b-cf276rbezw] {
    color: #FFEB3B;
}

.consumible-magenta .circle-dot[b-cf276rbezw]::after {
    background-color: #E91E63;
}

.consumible-magenta[b-cf276rbezw] {
    color: #E91E63;
}

/* Separator */
.consumible-separator[b-cf276rbezw] {
    width: 1px;
    height: clamp(18px, 1.25vw, 24px);
    background-color: #9E9E9E;
    margin: 0;
}

/* Bote residual */
.consumible-bote[b-cf276rbezw] {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
    position: relative;
}

.consumible-bote input[type="checkbox"][b-cf276rbezw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bote-circle[b-cf276rbezw] {
    width: clamp(11px, 0.78vw, 15px);
    height: clamp(11px, 0.78vw, 15px);
    border-radius: 50%;
    border: 1.5px solid #757575;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.consumible-bote input:checked+.bote-circle[b-cf276rbezw] {
    border-color: #212121;
    background-color: #212121;
}

/* Mobile modal */
@media (max-width: 768px) {
    .st-modal-columns[b-cf276rbezw] {
        flex-direction: column;
        gap: 0;
    }

    .st-modal[b-cf276rbezw] {
        max-width: 100%;
        margin: 10px;
    }
}

/* ============================================= */
/* PAGE BLOCKER */
/* ============================================= */
.page-blocker[b-cf276rbezw] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-cf276rbezw] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* Loading & access denied */
.loading-container[b-cf276rbezw],
.access-denied-container[b-cf276rbezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: clamp(30px, 3vw, 60px);
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--st-font-body, 16px);
    color: #424242;
    width: 100%;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .servicio-tecnico[b-cf276rbezw] {
        --st-padding-lateral: 30px;
        --st-card-padding-y: 30px;
        --st-card-padding-x: 30px;
        --st-font-title: 24px;
        --st-font-header: 14px;
        --st-font-body: 14px;
        --st-font-btn: 13px;
        --st-img-size: 70px;
        --st-btn-padding-x: 14px;
        --st-gap-lg: 40px;
        --st-gap-sm: 20px;
        --st-help-btn-width: 100%;
        --st-row-height: 100px;
    }

    /* Buttons stack vertically in tablet */
    .servicio-tecnico .td4 .td-content[b-cf276rbezw] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .servicio-tecnico .boton[b-cf276rbezw],
    .servicio-tecnico .boton-2[b-cf276rbezw],
    .servicio-tecnico .boton-3[b-cf276rbezw] {
        width: 100%;
    }

    /* Reduce table header widths for flexibility */
    .servicio-tecnico .tabla-mejorada .th1[b-cf276rbezw] {
        width: auto;
        min-width: 150px;
    }

    .servicio-tecnico .tabla-mejorada .th2[b-cf276rbezw] {
        width: 120px;
    }

    .servicio-tecnico .tabla-mejorada .th3[b-cf276rbezw] {
        width: auto;
    }

}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* Switch from table to card layout */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .servicio-tecnico[b-cf276rbezw] {
        --st-padding-lateral: 16px;
        --st-card-padding-y: 16px;
        --st-card-padding-x: 16px;
        --st-font-title: 20px;
        --st-font-header: 13px;
        --st-font-body: 13px;
        --st-font-btn: 12px;
        --st-img-size: 60px;
        --st-img-radius: 10px;
        --st-btn-padding-x: 12px;
        --st-gap-lg: 30px;
        --st-gap-sm: 16px;
        --st-card-radius: 12px;
        --st-help-btn-width: 100%;
        --st-help-btn-height: 44px;
    }

    /* Hide desktop table, show mobile cards */
    .servicio-tecnico .tabla-wrapper[b-cf276rbezw] {
        display: none;
    }

    .servicio-tecnico .mobile-cards[b-cf276rbezw] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Machine Card */
    .servicio-tecnico .machine-card[b-cf276rbezw] {
        display: flex;
        flex-direction: column;
        background-color: var(--blanco);
        border-radius: 12px;
        padding: 16px;
        gap: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .servicio-tecnico .machine-card-header[b-cf276rbezw] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .servicio-tecnico .machine-card-info[b-cf276rbezw] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .servicio-tecnico .machine-card-model[b-cf276rbezw] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 600;
        color: #000000;
        font-size: 14px;
        line-height: 1.4;
    }

    .servicio-tecnico .machine-card-detail[b-cf276rbezw] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 400;
        color: #757575;
        font-size: 12px;
        line-height: 1.4;
    }

    .servicio-tecnico .machine-card-detail span[b-cf276rbezw] {
        font-weight: 600;
        color: #424242;
    }

    .servicio-tecnico .machine-card-actions[b-cf276rbezw] {
        display: flex;
        gap: 8px;
    }

    .servicio-tecnico .machine-card-actions .boton[b-cf276rbezw],
    .servicio-tecnico .machine-card-actions .boton-2[b-cf276rbezw],
    .servicio-tecnico .machine-card-actions .boton-3[b-cf276rbezw] {
        flex: 1;
    }

    .servicio-tecnico .machine-card-actions .label-text[b-cf276rbezw] {
        font-size: 11px;
    }

    /* Title header adjustments */
    .servicio-tecnico .titulo h2[b-cf276rbezw] {
        font-size: 12px;
    }


    /* Help button */
    .servicio-tecnico .state-layer-wrapper[b-cf276rbezw] {
        width: 100%;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .servicio-tecnico[b-cf276rbezw] {
        --st-padding-lateral: 12px;
        --st-card-padding-y: 12px;
        --st-card-padding-x: 12px;
        --st-font-title: 18px;
        --st-font-header: 12px;
        --st-font-body: 12px;
        --st-font-btn: 11px;
        --st-img-size: 50px;
        --st-img-radius: 8px;
        --st-gap-lg: 24px;
        --st-gap-sm: 12px;
    }

    .servicio-tecnico .machine-card[b-cf276rbezw] {
        padding: 12px;
        gap: 10px;
    }

    .servicio-tecnico .machine-card-header[b-cf276rbezw] {
        gap: 10px;
    }

    .servicio-tecnico .machine-card-model[b-cf276rbezw] {
        font-size: 13px;
    }

    .servicio-tecnico .machine-card-detail[b-cf276rbezw] {
        font-size: 11px;
    }

    /* Stack buttons vertically on very small screens */
    .servicio-tecnico .machine-card-actions[b-cf276rbezw] {
        flex-direction: column;
    }

    .servicio-tecnico .machine-card-actions .label-text[b-cf276rbezw] {
        font-size: 11px;
    }

    /* Title */
    .servicio-tecnico .titulo h2[b-cf276rbezw] {
        font-size: 11px;
    }
}
/* /Components/Pages/Sostenibilidad.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-lv5f3dma6x] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-lv5f3dma6x] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-lv5f3dma6x] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-lv5f3dma6x] {
        font-size: 1.5rem;
    }


/* MAIN */

a[b-lv5f3dma6x] {
    text-decoration: none;
}

.container[b-lv5f3dma6x] {
    max-width: 1920px;
    max-height: 1827px;
    font-family: "Nunito Sans", sans-serif;
}

.containerTwo[b-lv5f3dma6x] {
    max-width: 500px;
    max-height: 369px;
    width: 500px;
    height: 369px;
}

h2[b-lv5f3dma6x] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

h4[b-lv5f3dma6x] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-lv5f3dma6x] {
    border: 1px;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-lv5f3dma6x] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 30px;
}

.mainText[b-lv5f3dma6x] {
    width: 820px;
    height: 489px;
    max-width: 820px;
    max-height: 489px;
}

.displayFlex[b-lv5f3dma6x] {
    display: flex;
    justify-content: space-between;
}

.displayFlexTwo[b-lv5f3dma6x] {
    display: flex;
    gap: 32px;
    margin-top: 30px;
}

.collection[b-lv5f3dma6x] {
    padding: 120px 115px 0 115px;
    width: 1920px;
    height: 729px;
    max-width: 1920px;
    max-height: 729px;
    background-color: #F6F6F6;
}

.sectionTwo[b-lv5f3dma6x] {
    padding: 120px 115px 0 115px;
    background-color: white;
}

.marginBottom[b-lv5f3dma6x] {
    margin-bottom: 25px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-lv5f3dma6x] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-lv5f3dma6x] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-lv5f3dma6x] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-lv5f3dma6x] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-lv5f3dma6x] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-lv5f3dma6x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-lv5f3dma6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-lv5f3dma6x],
    .form-row textarea[b-lv5f3dma6x] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-lv5f3dma6x],
        .form-row textarea:focus[b-lv5f3dma6x] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-lv5f3dma6x] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-lv5f3dma6x] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-lv5f3dma6x] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-lv5f3dma6x] {
    list-style: none;
    padding: 0;
}

.faq-item[b-lv5f3dma6x] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-lv5f3dma6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-lv5f3dma6x] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-lv5f3dma6x] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-lv5f3dma6x] {
    transition: transform 0.3s ease;
}

.rotate[b-lv5f3dma6x] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-lv5f3dma6x] {
        flex-direction: column;
    }

    .contact-left[b-lv5f3dma6x], .contact-right[b-lv5f3dma6x] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/Inspiracion.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-nujtwkd1jz] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-nujtwkd1jz] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-nujtwkd1jz] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-nujtwkd1jz] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-nujtwkd1jz] {
    max-width: 1920px;
    max-height: 1800px;
    font-family: "Nunito Sans", sans-serif;
    padding: 120px 0 60px 0;
}

h1[b-nujtwkd1jz] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-nujtwkd1jz] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

h3[b-nujtwkd1jz] {
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    margin-top: 25px;
}

p[b-nujtwkd1jz]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-nujtwkd1jz] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-nujtwkd1jz] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-nujtwkd1jz] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding[b-nujtwkd1jz] {
    padding-left: 120px;
    margin-bottom: 60px;
}

.mainText[b-nujtwkd1jz] {
    width: 830px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.divContenedor[b-nujtwkd1jz] {
    width: 1690px;
    height: 369px;
    display: flex;
    justify-content: space-between;
}

.displayFlex[b-nujtwkd1jz] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-nujtwkd1jz] {
    padding: 120px 115px 120px 115px;
    background-color: #FCF9F8;
}


.sectionThree[b-nujtwkd1jz] {
    padding: 120px 115px 120px 115px;
    background-color: #FCF9F8;
}

.sectionFour[b-nujtwkd1jz] {
    padding: 120px 115px 120px 115px;
    background-color: white;
}

.paddingBottom[b-nujtwkd1jz] {
    padding-bottom: 120px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-nujtwkd1jz] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-nujtwkd1jz] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-nujtwkd1jz] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-nujtwkd1jz] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-nujtwkd1jz] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-nujtwkd1jz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-nujtwkd1jz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-nujtwkd1jz],
    .form-row textarea[b-nujtwkd1jz] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-nujtwkd1jz],
        .form-row textarea:focus[b-nujtwkd1jz] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-nujtwkd1jz] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-nujtwkd1jz] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-nujtwkd1jz] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-nujtwkd1jz] {
    list-style: none;
    padding: 0;
}

.faq-item[b-nujtwkd1jz] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-nujtwkd1jz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-nujtwkd1jz] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-nujtwkd1jz] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-nujtwkd1jz] {
    transition: transform 0.3s ease;
}

.rotate[b-nujtwkd1jz] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-nujtwkd1jz] {
        flex-direction: column;
    }

    .contact-left[b-nujtwkd1jz], .contact-right[b-nujtwkd1jz] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/MaterialesNaturales.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-ogsxvfhbib] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-ogsxvfhbib] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-ogsxvfhbib] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-ogsxvfhbib] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-ogsxvfhbib] {
    max-width: 1920px;
    max-height: 4207px;
    font-family: "Nunito Sans", sans-serif;
    padding-bottom: 60px;
}

h1[b-ogsxvfhbib] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-ogsxvfhbib] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

p[b-ogsxvfhbib]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-ogsxvfhbib] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-ogsxvfhbib] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-ogsxvfhbib] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding-left[b-ogsxvfhbib] {
    padding-left: 120px;
}

.mainText[b-ogsxvfhbib] {
    width: 830px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.displayFlex[b-ogsxvfhbib] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-ogsxvfhbib] {
    padding: 120px 115px 0px 115px;
    width: 1920px;
    height: 787px;
    max-width: 1920px;
    max-height: 787px;
    background-color: #FCF9F8;
}

.sectionTwo[b-ogsxvfhbib] {
    padding: 120px 115px 0px 115px;
    background-color: white;
}

.sectionThree[b-ogsxvfhbib] {
    padding: 120px 115px 120px 115px;
    background-color: #FCF9F8;
}

.sectionFour[b-ogsxvfhbib] {
    padding: 120px 115px 120px 115px;
    background-color: white;
}

.paddingBottom[b-ogsxvfhbib] {
    padding-bottom: 120px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-ogsxvfhbib] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-ogsxvfhbib] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-ogsxvfhbib] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-ogsxvfhbib] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-ogsxvfhbib] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-ogsxvfhbib] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-ogsxvfhbib] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-ogsxvfhbib],
    .form-row textarea[b-ogsxvfhbib] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-ogsxvfhbib],
        .form-row textarea:focus[b-ogsxvfhbib] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-ogsxvfhbib] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-ogsxvfhbib] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-ogsxvfhbib] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-ogsxvfhbib] {
    list-style: none;
    padding: 0;
}

.faq-item[b-ogsxvfhbib] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-ogsxvfhbib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-ogsxvfhbib] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-ogsxvfhbib] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-ogsxvfhbib] {
    transition: transform 0.3s ease;
}

.rotate[b-ogsxvfhbib] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-ogsxvfhbib] {
        flex-direction: column;
    }

    .contact-left[b-ogsxvfhbib], .contact-right[b-ogsxvfhbib] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/MaterialesReciclados.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-jvaz4c4qrr] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-jvaz4c4qrr] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-jvaz4c4qrr] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-jvaz4c4qrr] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-jvaz4c4qrr] {
    max-width: 1920px;
    max-height: 4140px;
    font-family: "Nunito Sans", sans-serif;
    padding-bottom: 60px;
}

h1[b-jvaz4c4qrr] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-jvaz4c4qrr] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

p[b-jvaz4c4qrr]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-jvaz4c4qrr] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-jvaz4c4qrr] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-jvaz4c4qrr] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding-left[b-jvaz4c4qrr] {
    padding-left: 120px;
}

.mainText[b-jvaz4c4qrr] {
    width: 830px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.displayFlex[b-jvaz4c4qrr] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-jvaz4c4qrr] {
    padding: 120px 115px 0px 115px;
    width: 1920px;
    height: 895px;
    max-width: 1920px;
    max-height: 737px;
    background-color: #F8FAFC;
}

.sectionTwo[b-jvaz4c4qrr] {
    padding: 120px 115px 0px 115px;
    background-color: white;
}

.sectionThree[b-jvaz4c4qrr] {
    padding: 120px 115px 120px 115px;
    background-color: #F8FAFC;
}

.sectionFour[b-jvaz4c4qrr] {
    padding: 120px 115px 120px 115px;
    background-color: white;
}

.paddingBottom[b-jvaz4c4qrr] {
    padding-bottom: 120px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-jvaz4c4qrr] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-jvaz4c4qrr] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-jvaz4c4qrr] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-jvaz4c4qrr] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-jvaz4c4qrr] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-jvaz4c4qrr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-jvaz4c4qrr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-jvaz4c4qrr],
    .form-row textarea[b-jvaz4c4qrr] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-jvaz4c4qrr],
        .form-row textarea:focus[b-jvaz4c4qrr] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-jvaz4c4qrr] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-jvaz4c4qrr] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-jvaz4c4qrr] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-jvaz4c4qrr] {
    list-style: none;
    padding: 0;
}

.faq-item[b-jvaz4c4qrr] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-jvaz4c4qrr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-jvaz4c4qrr] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-jvaz4c4qrr] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-jvaz4c4qrr] {
    transition: transform 0.3s ease;
}

.rotate[b-jvaz4c4qrr] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-jvaz4c4qrr] {
        flex-direction: column;
    }

    .contact-left[b-jvaz4c4qrr], .contact-right[b-jvaz4c4qrr] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/MaterialesReutilizables.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-48r3z0oqui] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-48r3z0oqui] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-48r3z0oqui] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-48r3z0oqui] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-48r3z0oqui] {
    max-width: 1920px;
    max-height: 4207px;
    font-family: "Nunito Sans", sans-serif;
    padding-bottom: 60px;
}

h1[b-48r3z0oqui] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-48r3z0oqui] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

p[b-48r3z0oqui]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-48r3z0oqui] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-48r3z0oqui] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-48r3z0oqui] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding-left[b-48r3z0oqui] {
    padding-left: 120px;
}

.mainText[b-48r3z0oqui] {
    width: 832px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.displayFlex[b-48r3z0oqui] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-48r3z0oqui] {
    padding: 120px 115px 0px 115px;
    width: 1920px;
    height: 754px;
    max-width: 1920px;
    max-height: 754px;
    background-color: #FAFCF8;
}

.sectionTwo[b-48r3z0oqui] {
    padding: 120px 115px 0px 115px;
    background-color: white;
}

.paddingBottom[b-48r3z0oqui] {
    padding-bottom: 120px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-48r3z0oqui] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-48r3z0oqui] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-48r3z0oqui] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-48r3z0oqui] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-48r3z0oqui] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-48r3z0oqui] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-48r3z0oqui] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-48r3z0oqui],
    .form-row textarea[b-48r3z0oqui] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-48r3z0oqui],
        .form-row textarea:focus[b-48r3z0oqui] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-48r3z0oqui] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-48r3z0oqui] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-48r3z0oqui] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-48r3z0oqui] {
    list-style: none;
    padding: 0;
}

.faq-item[b-48r3z0oqui] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-48r3z0oqui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-48r3z0oqui] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-48r3z0oqui] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-48r3z0oqui] {
    transition: transform 0.3s ease;
}

.rotate[b-48r3z0oqui] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-48r3z0oqui] {
        flex-direction: column;
    }

    .contact-left[b-48r3z0oqui], .contact-right[b-48r3z0oqui] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/ProductosReutilizables.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-atgf2gbyd8] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-atgf2gbyd8] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-atgf2gbyd8] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-atgf2gbyd8] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-atgf2gbyd8] {
    max-width: 1920px;
    max-height: 4207px;
    font-family: "Nunito Sans", sans-serif;
    padding-bottom: 60px;
}

h1[b-atgf2gbyd8] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-atgf2gbyd8] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

p[b-atgf2gbyd8]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-atgf2gbyd8] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-atgf2gbyd8] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-atgf2gbyd8] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding-left[b-atgf2gbyd8] {
    padding-left: 120px;
}

.mainText[b-atgf2gbyd8] {
    width: 830px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.displayFlex[b-atgf2gbyd8] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-atgf2gbyd8] {
    padding: 120px 115px 0px 115px;
    width: 1920px;
    height: 754px;
    max-width: 1920px;
    max-height: 787px;
    background-color: #FCFCF8;
}

.sectionTwo[b-atgf2gbyd8] {
    padding: 120px 115px 0px 115px;
    background-color: white;
}

.sectionThree[b-atgf2gbyd8] {
    padding: 120px 115px 120px 115px;
    background-color: #FCF9F8;
}

.sectionFour[b-atgf2gbyd8] {
    padding: 120px 115px 120px 115px;
    background-color: white;
}

.paddingBottom[b-atgf2gbyd8] {
    padding-bottom: 120px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-atgf2gbyd8] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-atgf2gbyd8] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-atgf2gbyd8] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-atgf2gbyd8] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-atgf2gbyd8] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-atgf2gbyd8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-atgf2gbyd8] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-atgf2gbyd8],
    .form-row textarea[b-atgf2gbyd8] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-atgf2gbyd8],
        .form-row textarea:focus[b-atgf2gbyd8] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-atgf2gbyd8] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-atgf2gbyd8] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-atgf2gbyd8] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-atgf2gbyd8] {
    list-style: none;
    padding: 0;
}

.faq-item[b-atgf2gbyd8] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-atgf2gbyd8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-atgf2gbyd8] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-atgf2gbyd8] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-atgf2gbyd8] {
    transition: transform 0.3s ease;
}

.rotate[b-atgf2gbyd8] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-atgf2gbyd8] {
        flex-direction: column;
    }

    .contact-left[b-atgf2gbyd8], .contact-right[b-atgf2gbyd8] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/Sostenibilidades/TelaEtica.razor.rz.scp.css */
/* RESET BÁSICO */
*[b-rzsgjz6n39] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS GENERALES */
body[b-rzsgjz6n39] {
    font-family: sans-serif;
    color: #333;
}

/* ENCABEZADO */
header[b-rzsgjz6n39] {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}


    header h1[b-rzsgjz6n39] {
        font-size: 1.5rem;
    }


/* MAIN */

.container[b-rzsgjz6n39] {
    max-width: 1920px;
    max-height: 1993px;
    font-family: "Nunito Sans", sans-serif;
    padding-bottom: 60px;
}

h1[b-rzsgjz6n39] {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
}

h2[b-rzsgjz6n39] {
    font-weight: 700;
    font-size: 32px;
    line-height 100%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

p[b-rzsgjz6n39]{
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

h4[b-rzsgjz6n39] {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323332;
}

hr[b-rzsgjz6n39] {
    border: 1px solid;
    color:#ABABAB;
    background-color: #ABABAB;
    width: 503px;
}

.pText[b-rzsgjz6n39] {
    font-weight: 300;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #323332;
    margin-bottom: 32px;
}

.padding-left[b-rzsgjz6n39] {
    padding-left: 120px;
}

.mainText[b-rzsgjz6n39] {
    width: 830px;
    height: 460px;
    max-width: 835px;
    max-height: 483px;
    padding-right: 5px;
}

.displayFlex[b-rzsgjz6n39] {
    display: flex; 
    padding-left: 120px;
    gap: 120px;
}


.collection[b-rzsgjz6n39] {
    padding: 120px 115px 0 115px;
    width: 1920px;
    height: 895px;
    max-width: 1920px;
    max-height: 937px;
    background-color: #FCFBF8;
}

.sectionTwo[b-rzsgjz6n39] {
    padding: 120px 115px 120px 115px;
    background-color: white;
}

.marginBottom[b-rzsgjz6n39] {
    margin-bottom: 25px;
}

/* END MAIN*/

/* SECCIÓN DEL MAPA */
.map-section[b-rzsgjz6n39] {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.contact-container[b-rzsgjz6n39] {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* COLUMNA IZQUIERDA: FORMULARIO */
.contact-left[b-rzsgjz6n39] {
    flex: 1 1 500px;
    margin-right: 2rem;
}

    .contact-left h2[b-rzsgjz6n39] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contact-left p[b-rzsgjz6n39] {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

form[b-rzsgjz6n39] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-rzsgjz6n39] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row input[b-rzsgjz6n39],
    .form-row textarea[b-rzsgjz6n39] {
        flex: 1;
        padding: 0.8rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #F5F5F5;
    }

        .form-row input:focus[b-rzsgjz6n39],
        .form-row textarea:focus[b-rzsgjz6n39] {
            outline: none;
            border: 1px solid #3CAA36;
            box-shadow: 0 0 0 1px #3CAA36;
            background-color: #fefefe;
        }

form button[b-rzsgjz6n39] {
    background-color: #2BA84A;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 6px;
}

    form button:hover[b-rzsgjz6n39] {
        background-color: #24913f;
    }

/* COLUMNA DERECHA: SEDES estilo FAQ */
.contact-right[b-rzsgjz6n39] {
    flex: 1 1 300px;
    margin-top: 2rem;
}

.faq[b-rzsgjz6n39] {
    list-style: none;
    padding: 0;
}

.faq-item[b-rzsgjz6n39] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.faq-question[b-rzsgjz6n39] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    color: #000;
}

.faq-answer[b-rzsgjz6n39] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 14px;
    color: #444;
    padding-right: 24px;
}

.faq-item.open[b-rzsgjz6n39] {
    border-bottom: 2px solid #3CAA36;
}

.arrow[b-rzsgjz6n39] {
    transition: transform 0.3s ease;
}

.rotate[b-rzsgjz6n39] {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container[b-rzsgjz6n39] {
        flex-direction: column;
    }

    .contact-left[b-rzsgjz6n39], .contact-right[b-rzsgjz6n39] {
        margin-right: 0;
        margin-top: 1rem;
    }
}
/* /Components/Pages/SostenibilidadHP.razor.rz.scp.css */
.hp-showcase-page[b-up9ocaqgn7] {
    display: flex;
    justify-content: center;
    padding: 32px 16px 64px;
}

.hp-showcase-container[b-up9ocaqgn7] {
    width: 100%;
    max-width: 1200px;
}

.hp-showcase-title[b-up9ocaqgn7] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
}

.hp-showcase-intro[b-up9ocaqgn7] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    margin: 0 0 32px;
    max-width: 820px;
}

/* Contenedor del contenido sindicado de HP: que respire y no desborde en móvil. */
#hp-inpage-content[b-up9ocaqgn7] {
    width: 100%;
    overflow-x: hidden;
    min-height: 200px;
}

#hp-inpage-content img[b-up9ocaqgn7],
#hp-inpage-content iframe[b-up9ocaqgn7] {
    max-width: 100%;
}

@media (max-width: 768px) {
    .hp-showcase-page[b-up9ocaqgn7] {
        padding: 20px 12px 48px;
    }

    .hp-showcase-title[b-up9ocaqgn7] {
        font-size: 1.5rem;
    }

    .hp-showcase-intro[b-up9ocaqgn7] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Suscripciones.razor.rz.scp.css */
.suscripciones[b-i6phasennq] {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 75px;
    padding: 0px 115px 100px;
    position: relative;
    background-color: #ffffff;
}

.suscripciones .frame[b-i6phasennq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /*center;*/
    gap: 30px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.suscripciones .titulo[b-i6phasennq] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.suscripciones h2[b-i6phasennq] {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.suscripciones .iconos[b-i6phasennq] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

.suscripciones .div[b-i6phasennq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.suscripciones .text-wrapper[b-i6phasennq] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

.suscripciones .boton[b-i6phasennq] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.suscripciones .boton:hover[b-i6phasennq] {
    background-color: #80C87C;
}

.suscripciones .state-layer[b-i6phasennq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.suscripciones .label-text[b-i6phasennq] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.suscripciones .frame-2[b-i6phasennq] {
    display: flex;
    padding: 75px 0;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: 15px;
    position: relative;
    flex: 0 0 auto;
}

.suscripciones .frame-3[b-i6phasennq] {
    display: flex;
    width: 1489px;
    justify-content: space-between;
    align-items: flex-start;
}

.suscripciones .frame-4[b-i6phasennq] {
    align-items: center;
    display: flex;
    flex: 1 0 0;
    gap: 20px;
    
}

.suscripciones .custom-checkbox[b-i6phasennq] {
    appearance: none;
    border: 1px solid #000000;
    border-radius: 7px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    position: relative;
    width: 14px;
    -webkit-appearance: none;
}

.suscripciones .custom-checkbox:checked[b-i6phasennq] {
    background-color: green;
    border-color: green;
}

.suscripciones .custom-checkbox:focus[b-i6phasennq] {
    outline: 2px solid green;
}

.suscripciones .p[b-i6phasennq] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: var(--label-large-font-family);
    font-weight: var(--label-large-font-weight);
    color: #000000;
    font-size: var(--label-large-font-size);
    letter-spacing: var(--label-large-letter-spacing);
    line-height: var(--label-large-line-height);
    white-space: nowrap;
    font-style: var(--label-large-font-style);
}

.suscripciones .state-layer-wrapper[b-i6phasennq] {
    display: flex;
    flex-direction: column;
    width: 592px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.suscripciones .state-layer-wrapper:hover[b-i6phasennq] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.suscripciones .state-layer-wrapper:hover .label-text-2[b-i6phasennq] {
    color: var(--blanco);
}

.suscripciones .label-text-2[b-i6phasennq] {
    color: var(--primario);
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.suscripciones .debemos-actualizar[b-i6phasennq] {
    position: relative;
    align-self: stretch;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--black-fonts-headings);
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: 28px;
}

.suscripciones .span[b-i6phasennq] {
    font-family: "Nunito Sans-Regular", Helvetica;
    font-weight: 400;
    color: #2d2e2e;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 28px;
}

/* Los enlaces de «¿Debemos actualizar algún dato?». El texto sale del panel (texto con
formato) y su color iba en un style="" que el saneador quita al volver a guardarlo: va
aquí. ::deep porque ese HTML no lleva la marca de esta hoja. */
.suscripciones .debemos-actualizar[b-i6phasennq]  a {
    color: #2d2e2e;
    text-decoration: none;
}

.suscripciones .text-wrapper-da[b-i6phasennq] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
}

.suscripciones .label-text-2[b-i6phasennq] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.suscripciones .alert p[b-i6phasennq] {
    margin-bottom: 0;
}

.suscripciones .spinner-border[b-i6phasennq] {
    color: var(--blanco);
}

.page-blocker[b-i6phasennq] {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.page-blocker-content[b-i6phasennq] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}
/* /Components/Pages/TrabajoIntegra.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.trabajo-page[b-y5e7cqc273] {
    /* Colores */
    --negro: #141414;
    --texto-negro-suave: #323332;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-10: #F5F5F5;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-input: #ABABAB;
    --black-fonts-headings: #2D2E2E;
    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-md: clamp(15px, 1.25vw, 24px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --gap-xl: clamp(50px, 3.91vw, 75px);
    --gap-columns: clamp(30px, 5.99vw, 115px);
    /* Tipografía fluida */
    --font-heading-xl: clamp(22px, 1.67vw, 32px);
    --font-heading-lg: clamp(16px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-body-sm: clamp(11px, 0.73vw, 14px);
    --font-input: clamp(14px, 0.94vw, 18px);
    --font-title: clamp(14px, 0.83vw, 16px);
    /* Inputs y botones */
    --input-height: clamp(50px, 3.07vw, 59px);
    --input-padding: clamp(12px, 0.83vw, 16px);
    --input-border-radius: clamp(4px, 0.31vw, 6px);
    --button-height: clamp(48px, 2.81vw, 54px);
    /* Info card */
    --info-card-gap: clamp(20px, 1.44vw, 30px);
    --info-column-width: clamp(280px, 27.76vw, 533px);
    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.tp-container[b-y5e7cqc273] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.tp-header[b-y5e7cqc273] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.tp-titulo[b-y5e7cqc273] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.tp-titulo-text[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.tp-back-arrow[b-y5e7cqc273] {
    position: absolute;
    left: 0;
    top: 19px;
    width: 24px;
    height: 24px;
}

    .tp-back-arrow img[b-y5e7cqc273] {
        width: 100%;
        height: 100%;
    }

/* ============================================= */
/* CONTENIDO PRINCIPAL (FORMULARIO + INFO) */
/* ============================================= */
.tp-main-content[b-y5e7cqc273] {
    display: flex;
    gap: var(--gap-columns);
    width: 100%;
    align-items: flex-start;
}

/* ============================================= */
/* COLUMNA IZQUIERDA: FORMULARIO */
/* ============================================= */
.tp-form-column[b-y5e7cqc273] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.56vw, 30px);
    min-width: 0;
}

/* Intro */
.tp-intro[b-y5e7cqc273] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.tp-main-heading[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-xl);
    color: var(--texto-negro-suave);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

.tp-intro-text[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--black-fonts-headings);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* FORMULARIO */
/* ============================================= */
.tp-form[b-y5e7cqc273] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.tp-form-row[b-y5e7cqc273] {
    display: flex;
    gap: var(--gap-md);
    width: 100%;
}

    .tp-form-row.tp-two-columns[b-y5e7cqc273] {
        display: flex;
        gap: var(--gap-md);
    }

.tp-input-group[b-y5e7cqc273] {
    flex: 1;
    min-width: 0;
}

    .tp-input-group.tp-full-width[b-y5e7cqc273] {
        width: 100%;
    }

/* ============================================= */
/* INPUTS */
/* ============================================= */
.tp-input[b-y5e7cqc273],
.tp-textarea[b-y5e7cqc273] {
    width: 100%;
    padding: 17px var(--input-padding);
    background-color: var(--gris-10);
    border: none;
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--font-input);
    color: var(--gris-50);
    line-height: normal;
    letter-spacing: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.tp-input[b-y5e7cqc273] {
    height: var(--input-height);
}

.tp-textarea[b-y5e7cqc273] {
    min-height: clamp(120px, 8.23vw, 158px);
    resize: vertical;
}

    .tp-input:focus[b-y5e7cqc273],
    .tp-textarea:focus[b-y5e7cqc273] {
        outline: none;
        background-color: #eeeeee;
    }

    .tp-input[b-y5e7cqc273]::placeholder,
    .tp-textarea[b-y5e7cqc273]::placeholder {
        color: var(--gris-50);
    }

/* ============================================= */
/* BOTONES */
/* ============================================= */
.tp-button-outline[b-y5e7cqc273],
.tp-button-submit[b-y5e7cqc273] {
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--font-body);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-button-outline[b-y5e7cqc273] {
    background-color: var(--blanco);
    color: var(--primario);
    border: 1px solid var(--primario);
    height: var(--input-height);
    padding: 0 var(--gap-md);
}

    .tp-button-outline:hover[b-y5e7cqc273] {
        background-color: var(--primario);
        color: var(--blanco);
    }

.tp-button-submit[b-y5e7cqc273] {
    flex: 1;
    background-color: var(--primario);
    color: var(--blanco);
    height: var(--button-height);
    padding: clamp(10px, 0.52vw, 10px) var(--gap-md);
}

    .tp-button-submit:hover[b-y5e7cqc273] {
        background-color: #2e8a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(60, 170, 54, 0.3);
    }

    .tp-button-submit:active[b-y5e7cqc273] {
        transform: translateY(0);
    }

/* Validación y feedback del formulario */
.tp-validation-error[b-y5e7cqc273] {
    color: #dc3545;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--font-body-sm);
    margin-top: 4px;
    display: block;
}

.tp-alert[b-y5e7cqc273] {
    padding: var(--input-padding);
    border-radius: var(--input-border-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--font-body);
    line-height: 1.5;
    margin-bottom: var(--gap-sm);
}

.tp-alert-success[b-y5e7cqc273] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.tp-alert-danger[b-y5e7cqc273] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.tp-spinner[b-y5e7cqc273] {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tp-spin-b-y5e7cqc273 0.75s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes tp-spin-b-y5e7cqc273 {
    to {
        transform: rotate(360deg);
    }
}

/* Checkboxes */
.tp-checkbox-group[b-y5e7cqc273] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    flex: 1;
    min-width: 0;
}

.tp-checkbox-input[b-y5e7cqc273] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.tp-checkbox-custom[b-y5e7cqc273] {
    flex-shrink: 0;
    width: clamp(16px, 1.04vw, 20px);
    height: clamp(16px, 1.04vw, 20px);
    margin-top: 2px;
    border: 1.5px solid #6C7275;
    border-radius: 4px;
    background-color: #FCFCFD;
    position: relative;
    transition: all 0.2s ease;
}

    .tp-checkbox-custom[b-y5e7cqc273]::after {
        content: "";
        position: absolute;
        display: none;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 4px;
        height: 8px;
        border: solid var(--blanco);
        border-width: 0 2px 2px 0;
    }

.tp-checkbox-input:checked ~ .tp-checkbox-custom[b-y5e7cqc273] {
    background-color: var(--primario);
    border-color: var(--primario);
}

    .tp-checkbox-input:checked ~ .tp-checkbox-custom[b-y5e7cqc273]::after {
        display: block;
    }

.tp-checkbox-label[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--texto-negro-suave);
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
}

.tp-link[b-y5e7cqc273] {
    color: var(--negro);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease;
}

    .tp-link:hover[b-y5e7cqc273] {
        color: var(--primario);
        background-size: 100% 2px;
    }

/* ============================================= */
/* FILA CONDICIONES (privacidad + info mensaje) */
/* ============================================= */
.tp-conditions-row[b-y5e7cqc273] {
    align-items: flex-start;
}

/* ============================================= */
/* FILA ENVÍO (newsletter + botón) */
/* ============================================= */
.tp-submit-row[b-y5e7cqc273] {
    padding-top: 30px;
    align-items: center;
}

/* Columna derecha: alert + botón apilados */
.tp-submit-right[b-y5e7cqc273] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

    .tp-submit-right .tp-alert[b-y5e7cqc273] {
        margin-bottom: 0;
        font-size: var(--font-body-sm);
        padding: 10px 14px;
    }

/* Separador comentario */
.tp-comentario[b-y5e7cqc273] {
    position: relative;
    width: 100%;
    height: 20px;
    flex-shrink: 0;
}

    .tp-comentario img[b-y5e7cqc273] {
        width: 100%;
        height: 100%;
        display: block;
    }

/* Mensaje info */
.tp-info-message[b-y5e7cqc273] {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 0.63vw, 12px);
    flex: 1;
    min-width: 0;
}

.tp-info-icon[b-y5e7cqc273] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.tp-info-text[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--texto-negro-suave);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* COLUMNA DERECHA: INFORMACIÓN */
/* ============================================= */
.tp-info-column[b-y5e7cqc273] {
    flex-shrink: 0;
    width: var(--info-column-width);
    display: flex;
    flex-direction: column;
}

.tp-info-card[b-y5e7cqc273] {
    display: flex;
    flex-direction: column;
    gap: var(--info-card-gap);
    padding: 0 var(--gap-lg);
}

.tp-info-header[b-y5e7cqc273] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gris-40);
}

.tp-info-heading[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-lg);
    color: var(--negro);
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

.tp-info-subheading[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.tp-contact-info[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

    .tp-contact-info p[b-y5e7cqc273] {
        margin: 0;
    }

.tp-privacy-text[b-y5e7cqc273] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--gris-50);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* RESPONSIVE - TABLET (≤834px) */
/* ============================================= */
@media (max-width: 834px) {
    .trabajo-page[b-y5e7cqc273] {
        --padding-lateral: 30px;
        --gap-sm: 10px;
        --gap-md: 16px;
        --gap-lg: 25px;
        --gap-xl: 40px;
        --gap-columns: 40px;
        --info-card-gap: 20px;
        --font-heading-xl: 24px;
        --font-heading-lg: 20px;
        --font-body: 14px;
        --font-body-sm: 13px;
        --font-input: 16px;
        --font-title: 15px;
    }

    .tp-main-content[b-y5e7cqc273] {
        flex-direction: column;
        gap: 30px;
    }

    .tp-info-column[b-y5e7cqc273] {
        width: 100%;
    }

    .tp-info-card[b-y5e7cqc273] {
        padding: 0;
    }

    .tp-submit-row[b-y5e7cqc273] {
        padding-top: 24px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (≤393px) */
/* ============================================= */
@media (max-width: 393px) {
    .trabajo-page[b-y5e7cqc273] {
        --padding-lateral: 16px;
        --gap-sm: 8px;
        --gap-md: 12px;
        --gap-lg: 20px;
        --gap-xl: 24px;
        --info-card-gap: 16px;
        --font-heading-xl: 20px;
        --font-heading-lg: 18px;
        --font-body: 13px;
        --font-body-sm: 12px;
        --font-input: 15px;
        --font-title: 14px;
    }

    .tp-form-row.tp-two-columns[b-y5e7cqc273] {
        flex-direction: column;
    }

    .tp-form-row.tp-conditions-row[b-y5e7cqc273] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .tp-form-row.tp-submit-row[b-y5e7cqc273] {
        flex-direction: column;
        gap: var(--gap-md);
        padding-top: 20px;
    }

    .tp-button-submit[b-y5e7cqc273] {
        width: 100%;
    }

    .tp-info-card[b-y5e7cqc273] {
        padding: 0;
    }
}
/* /Components/Pages/Usuario.razor.rz.scp.css */
/* ============================================================
   Usuario.razor.css — Pixel-perfect redesign from Figma
   ============================================================ */

/* ── Root container ─────────────────────────────────────────── */
.usuario[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    align-items: center;
    gap: clamp(30px, 5vw, 75px);
    padding: 0 clamp(20px, 8vw, 115px) clamp(40px, 6vw, 100px);
    position: relative;
    background-color: #ffffff;
    margin: 0 auto;
    overflow-x: hidden;
}

/* ── Title bar ──────────────────────────────────────────────── */
.usuario .frame[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 30px);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.usuario .titulo[b-zz6vkolay9] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.usuario .titulo h2[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    line-height: normal;
    margin: 0;
}

.usuario .titulo .iconos[b-zz6vkolay9] {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 19px;
    left: 0;
}

/* ── Header row (subtitle + save button) ────────────────────── */
.usuario .div[b-zz6vkolay9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.usuario .text-wrapper[b-zz6vkolay9] {
    position: relative;
    width: fit-content;
    font-family: var(--headline-large-font-family);
    font-weight: var(--headline-large-font-weight);
    color: #000000;
    font-size: var(--headline-large-font-size);
    letter-spacing: var(--headline-large-letter-spacing);
    line-height: var(--headline-large-line-height);
    white-space: nowrap;
    font-style: var(--headline-large-font-style);
}

/* ── Save button (green filled) ─────────────────────────────── */
.usuario .boton[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--primario, #3CAA36);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.usuario .boton:hover[b-zz6vkolay9] {
    opacity: 0.9;
}

.usuario .state-layer[b-zz6vkolay9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.usuario .label-text[b-zz6vkolay9] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco, #FFFFFF);
    font-size: var(--title-medium-font-size);
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

/* ── Gray form card ─────────────────────────────────────────── */
.usuario .frame-2[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 50px);
    align-items: center;
    padding: clamp(25px, 4vw, 50px) clamp(30px, 14.6vw, 220px);
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: #F5F5F5;
    border-radius: 15px;
    box-sizing: border-box;
}

/* ── Two-column form row ────────────────────────────────────── */
.usuario .frame-3[b-zz6vkolay9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

/* Form column */
.usuario .frame-4[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Proporciones Figma: izquierda 645px (credenciales), derecha 520px (datos) */
.usuario .frame-4:first-child[b-zz6vkolay9] {
    flex: 645 1 0;
    max-width: 645px;
}

.usuario .frame-4:last-child[b-zz6vkolay9] {
    flex: 520 1 0;
    max-width: 520px;
}

/* Single form row (label + input) */
.usuario .frame-5[b-zz6vkolay9] {
    display: flex;
    gap: clamp(15px, 1.79vw, 30px);
    align-items: center;
    position: relative;
    width: 100%;
    height: 59px;
    flex: 0 0 auto;
}

.usuario .frame-5.col2 label[b-zz6vkolay9] {
    cursor: pointer;
}

/* Labels */
.usuario .text-wrapper-4[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #2D2E2E;
    font-size: 16px;
    text-align: right;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: pre-wrap;
    flex-shrink: 0;
}

/* Left column labels — fluido entre 160px (1013px viewport) y 265px (1680px) */
.usuario .frame-4:first-child .text-wrapper-4[b-zz6vkolay9] {
    width: clamp(160px, 15.8vw, 265px);
}

/* Right column labels (Nombre, Email, Tipo) — 140px per Figma */
.usuario .frame-4:last-child .text-wrapper-4[b-zz6vkolay9] {
    width: 140px;
}

/* ── Inputs ─────────────────────────────────────────────────── */
[b-zz6vkolay9] .usuario .input {
    background-color: #FFFFFF;
    border: none;
    border-radius: 6px;
    color: var(--negro, #212121);
    display: flex;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.5px;
    line-height: 24px;
    padding: 17px 16px;
    position: relative;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
}

[b-zz6vkolay9] .usuario .input::placeholder {
    color: #9E9E9E;
}

[b-zz6vkolay9] .usuario .input:focus {
    border: 2px solid #3CAA36 !important;
    outline: none !important;
}

.usuario .input-wrapper[b-zz6vkolay9] {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.usuario .input-wrapper .input[b-zz6vkolay9] {
    width: 100%;
    padding-right: 45px;
}



[b-zz6vkolay9] .usuario .selected-address-item .input {
    margin-left: auto;
    width: 150px;
    max-width: 150px
}

.usuario .img[b-zz6vkolay9] {
    height: 24px;
    width: 24px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* ── Select / Dropdown input ────────────────────────────────── */
.usuario .select-wrapper[b-zz6vkolay9] {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.usuario .input-2[b-zz6vkolay9] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #FFFFFF;
    border: none;
    border-radius: 6px;
    color: var(--negro, #212121);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.5px;
    line-height: 24px;
    padding: 17px 40px 17px 16px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.usuario .input-2:focus[b-zz6vkolay9] {
    border: 2px solid #3CAA36 !important;
    outline: none !important;
}

.usuario .arrow[b-zz6vkolay9] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 5px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ============================================================
   ROUND CHECKBOXES — Figma uses 14px circles
   Checked = filled green circle, Unchecked = gray circle outline
   ============================================================ */
.usuario .custom-checkbox[b-zz6vkolay9] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    border: 2px solid #9E9E9E;
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.usuario .custom-checkbox:checked[b-zz6vkolay9] {
    background-color: #3CAA36;
    border-color: #3CAA36;
}

.usuario .custom-checkbox:focus[b-zz6vkolay9] {
    outline: 2px solid #3CAA36;
    outline-offset: 2px;
}

/* ── Permissions row (horizontal checkboxes) ────────────────── */
.usuario .permissions-row[b-zz6vkolay9] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.usuario .permission-item[b-zz6vkolay9] {
    display: flex;
    flex: 1 0 0;
    gap: 12px;
    align-items: center;
    position: relative;
    min-width: 0;
}

/* Ítems con etiqueta larga: gap propio independiente */
.usuario .permission-item--wide[b-zz6vkolay9] {
    gap: 20px;
    margin-right: 60px;
}

.usuario .permission-item label[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0.1px;
    line-height: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Address section ────────────────────────────────────────── */
.usuario .address-section[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 50px);
    align-self: stretch;
    width: 100%;
}

/* Address row (label + dropdown trigger) */
.usuario .address-row[b-zz6vkolay9] {
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
    width: 100%;
    height: 59px;
}

.usuario .address-label[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #2D2E2E;
    font-size: 16px;
    text-align: right;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: pre-wrap;
    width: 265px;
    flex-shrink: 0;
}

/* Dropdown trigger (collapsed input) */
.usuario .dropdown-trigger[b-zz6vkolay9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 16px;
    background-color: #FFFFFF;
    border-radius: 6px;
    height: 59px;
    flex: 1;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.usuario .dropdown-trigger-text[b-zz6vkolay9] {
    flex: 1;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #9E9E9E;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario .dropdown-trigger-text.has-value[b-zz6vkolay9] {
    color: #212121;
}

.usuario .dropdown-arrow[b-zz6vkolay9] {
    width: 10px;
    height: 5px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.usuario .dropdown-arrow.open[b-zz6vkolay9] {
    transform: rotate(180deg);
}

/* ── Dropdown panel (expanded) ──────────────────────────────── */
.usuario .dropdown-panel[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    padding: 30px 30px 50px 50px;
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    width: calc(100% - 295px); /* 265px label + 30px gap → mismo ancho que el trigger */
    max-width: 955px;
    position: relative;
    box-sizing: border-box;
    margin-left: calc(265px + 30px);
}

/* Dropdown header (Marcar todas + Seleccionar) */
.usuario .addr-dropdown-header[b-zz6vkolay9] {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.usuario .dropdown-select-all[b-zz6vkolay9] {
    display: flex;
    flex: 1;
    gap: 20px;
    align-items: center;
}

.usuario .dropdown-select-all label[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 16px;
    cursor: pointer;
}

/* Seleccionar button (outlined green) */
.usuario .btn-seleccionar[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    height: 53px;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.usuario .btn-seleccionar:hover[b-zz6vkolay9] {
    background-color: #3CAA36;
}

.usuario .btn-seleccionar:hover .btn-seleccionar-text[b-zz6vkolay9] {
    color: #FFFFFF;
}

.usuario .btn-seleccionar-inner[b-zz6vkolay9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    flex: 1;
    width: 100%;
}

.usuario .btn-seleccionar-text[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    color: #3CAA36;
    font-size: 16px;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Dropdown address list (scrollable) */
.usuario .dropdown-body[b-zz6vkolay9] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

.usuario .dropdown-list[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    flex: 1;
    max-width: 845px;
    max-height: 250px;
    overflow-y: auto;
}

.usuario .dropdown-item[b-zz6vkolay9] {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.usuario .dropdown-item label[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
    cursor: pointer;
}

/* Scrollbar vertical divider */
.usuario .dropdown-scrollbar[b-zz6vkolay9] {
    width: 1px;
    align-self: stretch;
    background-color: #E0E0E0;
    flex-shrink: 0;
    min-height: 100%;
}

/* ── Selected addresses ─────────────────────────────────────── */
.usuario .selected-addresses-row[b-zz6vkolay9] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

.usuario .selected-addresses-list[b-zz6vkolay9] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.usuario .selected-address-item[b-zz6vkolay9] {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.usuario .green-dot[b-zz6vkolay9] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    background-color: #3CAA36;
    flex-shrink: 0;
}

.usuario .selected-address-text[b-zz6vkolay9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.usuario .footer-text[b-zz6vkolay9] {
    position: relative;
    align-self: stretch;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #2D2E2E;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: 28px;
}

.usuario .footer-text .bold[b-zz6vkolay9] {
    font-weight: 700;
}

/* ── Alert messages ─────────────────────────────────────────── */
.usuario .alert[b-zz6vkolay9] {
    padding: 12px 20px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Busy / blocker overlay ─────────────────────────────────── */
.page-blocker[b-zz6vkolay9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: wait;
}

.page-blocker-content[b-zz6vkolay9] {
    background: white;
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Permisos: 2 columnas por debajo de 1700px para garantizar legibilidad */
@media (max-width: 1700px) {
    .usuario .permissions-row[b-zz6vkolay9] {
        gap: 16px 30px;
    }

    .usuario .permission-item[b-zz6vkolay9] {
        flex: 0 0 calc(50% - 15px);
    }

    /* En 2 columnas el margin-right rompe el cálculo de flex-basis — se anula */
    .usuario .permission-item--wide[b-zz6vkolay9] {
        margin-right: 0;
    }
}

@media (max-width: 1100px) {
    /* Card gris: reducir padding lateral para dar ancho a las columnas */
    .usuario .frame-2[b-zz6vkolay9] {
        padding-inline: 40px;
    }

    /* Labels: más compactos para ceder espacio al input */
    .usuario .frame-4:first-child .text-wrapper-4[b-zz6vkolay9] {
        width: 160px;
    }

    .usuario .frame-4:last-child .text-wrapper-4[b-zz6vkolay9] {
        width: 120px;
    }

    /* Gap label → input: reducido */
    .usuario .frame-5[b-zz6vkolay9] {
        gap: 15px;
    }

    /* Inputs: llenan el espacio disponible de su columna */
    [b-zz6vkolay9] .usuario .input,
    .usuario .input-wrapper[b-zz6vkolay9],
    .usuario .select-wrapper[b-zz6vkolay9] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    [b-zz6vkolay9] .usuario .frame-5.col2 .input {
        width: 100%;
        max-width: 100%;
    }

    /* Label dirección */
    .usuario .address-label[b-zz6vkolay9] {
        width: 160px;
    }

    /* Panel dropdown: recalcular offset con label reducido (160px + 30px gap = 190px) */
    .usuario .dropdown-panel[b-zz6vkolay9] {
        margin-left: calc(160px + 30px);
        width: calc(100% - 190px);
    }
}

@media (max-width: 768px) {
    .usuario .frame-5[b-zz6vkolay9] {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 8px;
    }

    .usuario .frame-4:first-child .text-wrapper-4[b-zz6vkolay9],
    .usuario .frame-4:last-child .text-wrapper-4[b-zz6vkolay9] {
        width: auto;
        text-align: left;
    }

    [b-zz6vkolay9] .usuario .input,
    .usuario .input-wrapper[b-zz6vkolay9],
    .usuario .select-wrapper[b-zz6vkolay9] {
        width: 100%;
        max-width: 100%;
    }

    /* Permisos: compactar gaps en móvil (layout 2-col ya viene del 1700px) */
    .usuario .permissions-row[b-zz6vkolay9] {
        gap: 14px 20px;
    }

    .usuario .address-row[b-zz6vkolay9] {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 8px;
    }

    .usuario .address-label[b-zz6vkolay9] {
        width: auto;
        text-align: left;
    }

    .usuario .selected-addresses-row[b-zz6vkolay9] {
        flex-direction: column;
        gap: 8px;
    }

    .usuario .dropdown-trigger[b-zz6vkolay9] {
        width: 100%;
    }

    .usuario .div[b-zz6vkolay9] {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .usuario .dropdown-panel[b-zz6vkolay9] {
        padding: 20px;
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Reducir padding lateral del formulario gris */
    .usuario .frame-2[b-zz6vkolay9] {
        padding: 24px 16px;
    }

    /* Columnas: ahora sí colapsan a una sola (móvil) */
    .usuario .frame-3[b-zz6vkolay9] {
        flex-direction: column;
    }

    /* Columnas del formulario: ancho completo, resetear el flex del breakpoint anterior */
    .usuario .frame-4[b-zz6vkolay9] {
        flex: none;
        width: 100%;
        align-items: stretch;
    }

    /* Checkboxes: mantener checkbox + label en la misma fila */
    .usuario .frame-5.col2[b-zz6vkolay9] {
        flex-direction: row;
        align-items: center;
        height: auto;
    }

    /* Código de cliente: permitir wrapping */
    .usuario .text-wrapper[b-zz6vkolay9] {
        white-space: normal;
        overflow-wrap: break-word;
        width: 100%;
    }
}

/* ============================================================ */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px)               */
/* ============================================================ */
@media (max-width: 480px) {
    .usuario .frame-2[b-zz6vkolay9] {
        padding: 16px 12px;
    }

    .usuario[b-zz6vkolay9] {
        padding-inline: 12px;
    }

    /* Permisos: 1 columna en pantallas muy pequeñas */
    .usuario .permission-item[b-zz6vkolay9] {
        flex: 0 0 100%;
    }

    /* Dropdown panel: más compacto en móvil pequeño */
    .usuario .dropdown-panel[b-zz6vkolay9] {
        padding: 16px 12px;
    }

    /* Header: los 3 botones se envuelven si no caben en una fila */
    .usuario .addr-dropdown-header[b-zz6vkolay9] {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Botones: ancho natural, no se comprimen */
    .usuario .dropdown-panel .button-GWG-container[b-zz6vkolay9],
    .usuario .dropdown-panel .button-YWB-container[b-zz6vkolay9] {
        flex: 0 0 auto;
    }

    /* Items de lista: texto envuelve en lugar de cortarse */
    .usuario .dropdown-item label[b-zz6vkolay9] {
        white-space: normal;
        overflow-wrap: break-word;
    }
}
/* /Components/Pages/Ventajas.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS RESPONSIVE */
/* ============================================= */
.ventajas-page[b-es7mau1c7d] {
    /* Colores */
    --negro: #212121;
    --blanco: #FFFFFF;
    --gris-60: #757575;
    --gris-40: #BDBDBD;
    --terciario: #85957E;
    --secundario: #6B989C;
    --alternativo: #FDD623;
    --alternativo-oscuro: #ECC61B;

    /* Sistema responsive - Paddings y gaps fluidos */
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-sm: clamp(10px, 1.04vw, 20px);
    --gap-md: clamp(25px, 2.6vw, 50px);
    --gap-lg: clamp(50px, 5.21vw, 100px);
    
    /* Tamaños de tarjetas */
    --card-sidebar-width: clamp(100px, 7.81vw, 150px);
    --card-padding: clamp(20px, 2.1vw, 50px);
    --card-gap: clamp(10px, 1.04vw, 20px);
    --card-border-radius: clamp(10px, 0.78vw, 15px);
    
    /* Tipografía fluida */
    --font-heading-lg: clamp(16px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-title: clamp(14px, 0.83vw, 16px);
    
    /* Iconos */
    --icon-size: clamp(45px, 3.13vw, 60px);
    
    /* Layout */
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--blanco);
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL */
/* ============================================= */
.vt-container[b-es7mau1c7d] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 1.57vw, 47px);
    padding: 0 var(--padding-lateral) clamp(50px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================= */
/* CABECERA CON NAVEGACIÓN */
/* ============================================= */
.vt-header[b-es7mau1c7d] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.vt-titulo[b-es7mau1c7d] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.04vw, 20px) 0;
    position: relative;
    width: 100%;
}

.vt-titulo-text[b-es7mau1c7d] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--negro);
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
}

.vt-back-arrow[b-es7mau1c7d] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

.vt-back-arrow img[b-es7mau1c7d] {
    width: 100%;
    height: 100%;
}

/* ============================================= */
/* FILAS DE TARJETAS */
/* ============================================= */
.vt-cards-row[b-es7mau1c7d] {
    display: flex;
    gap: var(--gap-lg);
    width: 100%;
}

/* ============================================= */
/* TARJETAS */
/* ============================================= */
.vt-card[b-es7mau1c7d] {
    display: flex;
    flex: 1;
    border-radius: var(--card-border-radius);
    background-color: var(--blanco);
    overflow: hidden;
    min-width: 0;
}

/* Bordes específicos por tarjeta */
.vt-card-entrega[b-es7mau1c7d] {
    border: 1px solid var(--gris-60);
}

.vt-card-servicio[b-es7mau1c7d] {
    border: 1px solid var(--terciario);
}

.vt-card-portes[b-es7mau1c7d] {
    border: 1px solid var(--secundario);
}

.vt-card-satisfaccion[b-es7mau1c7d] {
    border: 1px solid var(--alternativo-oscuro);
}

/* Sidebar de la tarjeta */
.vt-card-sidebar[b-es7mau1c7d] {
    flex-shrink: 0;
    width: var(--card-sidebar-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--card-padding);
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
}

.vt-sidebar-gris[b-es7mau1c7d] {
    background-color: var(--gris-60);
}

.vt-sidebar-terciario[b-es7mau1c7d] {
    background-color: var(--terciario);
}

.vt-sidebar-secundario[b-es7mau1c7d] {
    background-color: var(--secundario);
}

.vt-sidebar-amarillo[b-es7mau1c7d] {
    background-color: var(--alternativo);
}

/* Iconos */
.vt-icon[b-es7mau1c7d] {
    width: var(--icon-size);
    height: var(--icon-size);
}

.vt-icon-portes[b-es7mau1c7d] {
    width: clamp(48px, 3.55vw, 68px);
    height: clamp(33px, 2.49vw, 48px);
}

/* Icono de tarjeta data-driven (Etapa O): tamaño uniforme ≤ --icon-size. */
.vt-card-icono[b-es7mau1c7d] {
    max-width: 86px;
    max-height: var(--icon-size);
    width: auto;
    height: auto;
}

/* Contenido de la tarjeta */
.vt-card-content[b-es7mau1c7d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--card-padding);
    min-width: 0;
}

.vt-card-title[b-es7mau1c7d] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--gris-40);
}

.vt-card-heading[b-es7mau1c7d] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-heading-lg);
    color: var(--negro);
    line-height: 1.33;
    letter-spacing: 0;
    margin: 0;
}

.vt-subheading[b-es7mau1c7d] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

.vt-description[b-es7mau1c7d] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: var(--negro);
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1280px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1280px) {
    .ventajas-page[b-es7mau1c7d] {
        --padding-lateral: clamp(20px, 3vw, 40px);
        --card-sidebar-width: clamp(80px, 10vw, 120px);
        --card-padding: clamp(20px, 3vw, 30px);
        --card-gap: clamp(15px, 2vw, 20px);
        --gap-sm: 10px;
        --gap-md: 20px;
        --gap-lg: clamp(30px, 5vw, 60px);
    }

    .vt-cards-row[b-es7mau1c7d] {
        gap: clamp(30px, 5vw, 60px);
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET PEQUEÑO (max-width: 1024px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .ventajas-page[b-es7mau1c7d] {
        --padding-lateral: 30px;
        --card-sidebar-width: 100px;
        --card-padding: 25px;
        --card-gap: 15px;
        --gap-sm: 10px;
        --gap-md: 20px;
        --gap-lg: 35px;
        --font-heading-lg: 18px;
        --font-body: 14px;
        --font-title: 15px;
    }

    .vt-cards-row[b-es7mau1c7d] {
        flex-direction: column;
        gap: 30px;
    }

    .vt-card[b-es7mau1c7d] {
        width: 100%;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .ventajas-page[b-es7mau1c7d] {
        --padding-lateral: 20px;
        --card-sidebar-width: 0;
        --card-padding: 20px;
        --card-gap: 12px;
        --gap-sm: 8px;
        --gap-md: 16px;
        --gap-lg: 24px;
        --font-heading-lg: 16px;
        --font-body: 13px;
        --font-title: 14px;
    }

    /* Ocultar sidebars en móvil */
    .vt-card-sidebar[b-es7mau1c7d] {
        display: none;
    }

    .vt-card[b-es7mau1c7d] {
        border-radius: 10px;
    }

    .vt-cards-row[b-es7mau1c7d] {
        gap: 20px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .ventajas-page[b-es7mau1c7d] {
        --padding-lateral: 16px;
        --card-padding: 16px;
        --card-gap: 10px;
        --gap-sm: 6px;
        --gap-md: 12px;
        --gap-lg: 20px;
        --font-heading-lg: 15px;
        --font-body: 12px;
        --font-title: 13px;
    }

    .vt-cards-row[b-es7mau1c7d] {
        gap: 16px;
    }
}
/* /Components/Search/GlobalSearch.razor.rz.scp.css */
/* ============================================================================
   ESTILOS PROPIOS DEL COMPONENTE GLOBAL SEARCH
   ============================================================================ */

/* Contenedor Principal (Barra de Búsqueda)
   NO añadir background, border-radius ni padding aquí.
   Los estilos de layout vienen de header-nuevo.css (.header-nuevo-busqueda-inline)
   que se aplican según el breakpoint (desktop = underline, tablet = rounded box). */

/* Estado Focus — sutil glow sin cambiar el layout */
.header-nuevo-busqueda-inline:focus-within .header-nuevo-busqueda-linea-wrapper[b-46yfsnmuh6] {
    border-bottom-color: #3CAA36;
}

/* ============================================================================
   DROPDOWN DE SUGERENCIAS
   ============================================================================ */
.search-suggestions-container[b-46yfsnmuh6] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 480px;
    /* El dropdown puede ser más ancho que la barra si se desea */
    max-width: 90vw;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Si el dropdown debe alinearse a la derecha o izquierda, ajustar aquí.
   Para que no se salga de la pantalla en resoluciones bajas: */
@media (max-width: 1200px) {
    .search-suggestions-container[b-46yfsnmuh6] {
        width: 100%;
        /* Ajustarse al ancho de la barra si es necesario */
        min-width: 320px;
    }
}

/* Cabecera del Dropdown (Resultados recientes, etc) */
.suggestions-header[b-46yfsnmuh6] {
    padding: 12px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid #F0F0F0;
    font-size: 12px;
    color: #757575;
    font-weight: 600;
}

/* Lista de Sugerencias */
.suggestions-list[b-46yfsnmuh6] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
}

.suggestion-item[b-46yfsnmuh6] {
    padding: 12px 16px;
    border-bottom: 1px solid #F5F5F5;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.suggestion-item:last-child[b-46yfsnmuh6] {
    border-bottom: none;
}

.suggestion-item:hover[b-46yfsnmuh6],
.suggestion-item.active[b-46yfsnmuh6] {
    background: #F5F5F5;
}

.suggestion-info[b-46yfsnmuh6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.suggestion-title[b-46yfsnmuh6] {
    font-size: 14px;
    font-weight: 600;
    color: #2D2E2E;
}

.suggestion-subtitle[b-46yfsnmuh6] {
    font-size: 12px;
    color: #757575;
}

/* Panel de Filtros (Side Panel) */
/* ... Se mantiene igual, pero asegurarse de que no dependa de estilos borrados ... */
.search-filters-panel[b-46yfsnmuh6] {
    position: fixed;
    top: 72px;
    /* Ajustar a la altura del nuevo header */
    right: 0;
    bottom: 0;
    width: 320px;
    background: white;
    z-index: 990;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.search-filters-panel.open[b-46yfsnmuh6] {
    transform: translateX(0);
}
/* /Components/Shared/AddToListModal.razor.rz.scp.css */
.add-to-list.modal-overlay[b-mb4xroq5os] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.add-to-list .modal-results[b-mb4xroq5os] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.add-to-list .modal-close[b-mb4xroq5os] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.add-to-list .modal-addtolist-body[b-mb4xroq5os] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.add-to-list .producto-modal[b-mb4xroq5os] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.add-to-list .producto-modal .product-image[b-mb4xroq5os] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.add-to-list .producto-modal .product-img[b-mb4xroq5os] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-to-list .producto-modal .producto-info[b-mb4xroq5os] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.add-to-list .producto-modal .descripcion[b-mb4xroq5os] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.add-to-list .producto-modal .referencia[b-mb4xroq5os] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.add-to-list .select-wrapper[b-mb4xroq5os] {
    position: relative;
}

    .add-to-list .select-wrapper:focus-within .arrow[b-mb4xroq5os] {
        transform: translateY(-50%) rotate(90deg);
    }

    .add-to-list .select-wrapper .img[b-mb4xroq5os] {
        position: relative;
        width: 11.5px;
        height: 6.5px;
        margin-right: -0.75px;
        margin-left: -0.75px;
    }

.add-to-list .form-select[b-mb4xroq5os] {
    appearance: none;
    background-color: var(--blanco);
    background-image: none;
    border: 2px solid var(--grisgris-10) !important;
    border-radius: 6px;
    color: var(--negro);
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: 10px;
    padding: 17px 16px;
    padding-right: 50px;
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .add-to-list .form-select:focus[b-mb4xroq5os] {
        border: 2px solid #3CAA36 !important;
        outline: none !important;
    }

.add-to-list .arrow[b-mb4xroq5os] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg); /* Estado por defecto */
    transition: transform 0.3s ease;
}

.add-to-list .modal-actions[b-mb4xroq5os] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.add-to-list .boton.new[b-mb4xroq5os]{
    margin-right: auto;
}

.add-to-list .boton[b-mb4xroq5os] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.add-to-list .boton:hover[b-mb4xroq5os] {
    background-color: #80C87C;
}

.add-to-list .state-layer[b-mb4xroq5os], .add-to-list .state-layer-2[b-mb4xroq5os] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.add-to-list .label-text[b-mb4xroq5os] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.add-to-list .boton-2[b-mb4xroq5os] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.add-to-list .boton-2:hover[b-mb4xroq5os] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.add-to-list .boton-2:hover .label-text-2[b-mb4xroq5os] {
    color: var(--blanco);
}

.add-to-list .label-text-2[b-mb4xroq5os] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.add-to-list .alert-success[b-mb4xroq5os], .add-to-list .alert-danger[b-mb4xroq5os] {
    text-align: center;
}
/* /Components/Shared/BotonAyuda.razor.rz.scp.css */
/* Estilo alineado con Figma (node 3499:34076, "boton" / "Te ayudamos"):
   fondo blanco, borde amarillo, radius 6px, Nunito Sans SemiBold 16/24. */
.ba-help-btn[b-ecv8lq5fy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: #fff;
    color: #2D2E2E;
    border: 1px solid #2D2E2E;
    border-radius: 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
}

.ba-help-btn:hover[b-ecv8lq5fy0] {
    background: #2D2E2E;
    color: #fff;
}
/* /Components/Shared/BrandSlider.razor.rz.scp.css */
/* BRAND SLIDER COMPONENT */
.brand-slider-section[b-7whukxnpiq] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --brand-height: clamp(25px, 2.6vw, 50px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
    --blanco: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: var(--blanco);
}

.section-header[b-7whukxnpiq] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.section-title[b-7whukxnpiq] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
}

.vector-3[b-7whukxnpiq] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.brands-slider-wrapper[b-7whukxnpiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.brands-slider-container[b-7whukxnpiq] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.brands-slider-container[b-7whukxnpiq]::before,
.brands-slider-container[b-7whukxnpiq]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(50px, 5vw, 100px);
    z-index: 2;
    pointer-events: none;
}

.brands-slider-container[b-7whukxnpiq]::before {
    left: 0;
    background: linear-gradient(to right, var(--blanco) 0%, transparent 100%);
}

.brands-slider-container[b-7whukxnpiq]::after {
    right: 0;
    background: linear-gradient(to left, var(--blanco) 0%, transparent 100%);
}

.brands-nav-btn[b-7whukxnpiq] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.brands-nav-btn:hover[b-7whukxnpiq] {
    opacity: 0.6;
}

.brands-nav-btn svg[b-7whukxnpiq] {
    width: 100%;
    height: 100%;
}

.brands-track-infinite[b-7whukxnpiq] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.brand-item[b-7whukxnpiq] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.brand-item:hover[b-7whukxnpiq] {
    transform: scale(1.1);
}

.brand-item img[b-7whukxnpiq] {
    max-height: var(--brand-height);
    width: auto;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --brand-height: 30px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .brands-nav-btn[b-7whukxnpiq] {
        display: none;
    }

    .brands-slider-container[b-7whukxnpiq]::before,
    .brands-slider-container[b-7whukxnpiq]::after {
        width: 30px;
    }

    .brands-track-infinite[b-7whukxnpiq] {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-track-infinite[b-7whukxnpiq]::-webkit-scrollbar {
        display: none;
    }

    .brand-item[b-7whukxnpiq] {
        scroll-snap-align: start;
    }

    .brand-item:hover[b-7whukxnpiq] {
        transform: none;
    }
}

@media (max-width: 768px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --brand-height: 24px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 12px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}
/* /Components/Shared/CartArticulosRegalo.razor.rz.scp.css */
.articulos-regalo.modal-overlay[b-3ihdea1q26] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.articulos-regalo .modal-results[b-3ihdea1q26] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.articulos-regalo .modal-close[b-3ihdea1q26] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.articulos-regalo .modal-regalos-body[b-3ihdea1q26] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 8px; 
}

.articulos-regalo .producto-modal[b-3ihdea1q26] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.articulos-regalo .producto-modal:last-child[b-3ihdea1q26] {
    border-bottom: none;
}

.articulos-regalo .producto-modal .product-image[b-3ihdea1q26] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.articulos-regalo .producto-modal .product-img[b-3ihdea1q26] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.articulos-regalo .producto-modal .producto-info[b-3ihdea1q26] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.articulos-regalo .producto-modal .descripcion[b-3ihdea1q26] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.articulos-regalo .producto-modal .referencia[b-3ihdea1q26] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* --- Skeleton de carga (mismo layout que .producto-modal, evita el flash de "No se han encontrado regalos") --- */
.articulos-regalo .regalo-skeleton .product-image .skeleton[b-3ihdea1q26] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line[b-3ihdea1q26] {
    margin-bottom: 0; /* el gap de .producto-info separa las líneas */
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.desc[b-3ihdea1q26] {
    width: 65%;
    height: 18px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.ref[b-3ihdea1q26] {
    width: 45%;
    height: 16px;
}

.articulos-regalo .label-text[b-3ihdea1q26] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.articulos-regalo .label-text-2[b-3ihdea1q26] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}
/* /Components/Shared/CartDropdown.razor.rz.scp.css */
/* ============================================= */
/* CART DROPDOWN - 100% Responsive (Figma match) */
/* ============================================= */

/* --- CSS Variables (sistema fluido con clamp) --- */
.cartDropdown.modal-overlay[b-q0wkuf3lfg] {
    /* Panel */
    --panel-width: min(756px, 100vw);
    --panel-padding-x: clamp(20px, 4.69vw, 90px);
    --panel-padding-top: clamp(20px, 2.08vw, 40px);
    --panel-padding-bottom: clamp(32px, 3.65vw, 70px);
    --panel-radius: 15px;
    /* Tipografía */
    --title-font: clamp(26px, 2.5vw, 48px);
    --body-font: clamp(13px, 0.83vw, 16px);
    --total-font: clamp(18px, 1.25vw, 24px);
    --btn-font: clamp(13px, 0.83vw, 16px);
    /* Espaciado */
    --gap-title-items: clamp(28px, 2.86vw, 55px);
    --gap-items: 0px;
    --gap-row: clamp(12px, 1.04vw, 20px);
    --gap-total: clamp(20px, 2.08vw, 40px);
    /* Producto */
    --img-size: clamp(60px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);
    --row-padding-y: clamp(4px, 0.312vw, 6px);
    /* Contador */
    --counter-width: clamp(100px, 6.68vw, 128px);
    --counter-height: clamp(36px, 2.4vw, 46px);
    --counter-radius: 8px;
    --counter-btn-size: clamp(16px, 1.08vw, 20px);
    /* Botones */
    --delete-btn-size: clamp(18px, 1.25vw, 24px);
    --close-btn-size: clamp(18px, 1.25vw, 24px);
    --cta-height: clamp(44px, 2.81vw, 54px);
    --cta-radius: 6px;
}

/* ============================================= */
/* OVERLAY */
/* ============================================= */
.cartDropdown.modal-overlay[b-q0wkuf3lfg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    animation: overlayFadeIn-b-q0wkuf3lfg 0.25s ease;
}

@keyframes overlayFadeIn-b-q0wkuf3lfg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================= */
/* PANEL PRINCIPAL */
/* ============================================= */
.cartDropdown-panel[b-q0wkuf3lfg] {
    position: relative;
    width: var(--panel-width);
    height: 100%;
    background: #FFFFFF;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: panelSlideIn-b-q0wkuf3lfg 0.3s ease;
}

@keyframes panelSlideIn-b-q0wkuf3lfg {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cartDropdown-panel .dropdown-content[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--panel-padding-top) var(--panel-padding-x) var(--panel-padding-bottom);
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    /* Reset master.css overrides */
    inset: unset;
    right: unset;
    top: unset;
    box-shadow: none;
}

/* ============================================= */
/* CABECERA (Título + Cerrar) */
/* ============================================= */
.cartDropdown-panel .carritohead[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cartDropdown-panel .carritohead h2[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--title-font);
    color: #2D2E2E;
    margin: 0;
    line-height: 1.1;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: block;
}

.cartDropdown-panel #close[b-q0wkuf3lfg] {
    width: var(--close-btn-size);
    height: var(--close-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2D2E2E;
    font-size: var(--close-btn-size);
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
    margin: 0;
}

.cartDropdown-panel #close:hover[b-q0wkuf3lfg] {
    opacity: 0.6;
}

/* ============================================= */
/* LISTA DE PRODUCTOS */
/* ============================================= */
.cartDropdown-panel .cart-items[b-q0wkuf3lfg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: var(--gap-title-items) 0 0 0;
    padding: 0;
    max-height: none;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar {
    width: 4px;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar-track {
    background: transparent;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

.cartDropdown-panel .cart-items-list[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
}

.cartDropdown-panel #labelCartEmpty[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--body-font);
    color: #9E9E9E;
    text-align: center;
    padding: clamp(30px, 3vw, 60px) 0;
    margin: 0;
}

/* ============================================= */
/* FILA DE PRODUCTO */
/* ============================================= */
.cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: var(--row-padding-y) 0;
    border-bottom: 1px dashed #EEEEEE;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
}

.cartDropdown-panel .cart-item:last-child[b-q0wkuf3lfg] {
    border-bottom: 1px dashed #EEEEEE;
}

/* Imagen */
.cartDropdown-panel .cart-item-image[b-q0wkuf3lfg] {
    flex-shrink: 0;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: var(--img-radius);
    overflow: hidden;
}

.cartDropdown-panel .cart-item-image img[b-q0wkuf3lfg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-radius);
    mix-blend-mode: multiply;
}

/* Info (nombre + código) */
.cartDropdown-panel .cart-item-info[b-q0wkuf3lfg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: left;
}

.cartDropdown-panel .product-name[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.cartDropdown-panel .product-name:hover[b-q0wkuf3lfg] {
    color: #3CAA36;
}

.cartDropdown-panel .product-code[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Precio */
.cartDropdown-panel .cart-item-price[b-q0wkuf3lfg] {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cartDropdown-panel .price-label[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.cartDropdown-panel .price-value[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador de cantidad */
.cartDropdown-panel .quantity-control[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F5F5;
    border-radius: var(--counter-radius);
    width: var(--counter-width);
    height: var(--counter-height);
    padding: 0 clamp(8px, 0.64vw, 12px);
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
}

.cartDropdown-panel .qty-btn[b-q0wkuf3lfg] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: var(--counter-btn-size);
    width: var(--counter-btn-size);
    height: var(--counter-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.cartDropdown-panel .qty-btn:hover:not(:disabled)[b-q0wkuf3lfg] {
    color: #3CAA36;
}

.cartDropdown-panel .qty-btn:disabled[b-q0wkuf3lfg] {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-q0wkuf3lfg] .cartDropdown-panel .qty-input {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--body-font);
    color: #121212;
    text-align: center;
    min-width: 20px;
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
}

/* Botón eliminar (papelera) */
.cartDropdown-panel .delete-btn[b-q0wkuf3lfg] {
    background: none;
    border: none;
    cursor: pointer;
    color: #666666;
    width: var(--delete-btn-size);
    height: var(--delete-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: var(--delete-btn-size);
    transition: color 0.2s ease;
}

.cartDropdown-panel .delete-btn:hover[b-q0wkuf3lfg] {
    color: #dc3545;
}

/* ============================================= */
/* ZONA INFERIOR: TOTAL + BOTONES CTA (Figma match) */
/* ============================================= */

/* Ocultar el hr redundante del master */
.cartDropdown-panel .dropdown-content > div[style*="margin-left: 10%"][b-q0wkuf3lfg] {
    display: none !important;
}

/* Contenedor de total + botones */
.cartDropdown-panel .cart-bottom-section[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);
    flex-shrink: 0;
    width: 100%;
    padding: clamp(16px, 2.34vw, 45px) 0 0 0;
    margin: 0;
}

/* Total Precios */
.cartDropdown-panel .total-price[b-q0wkuf3lfg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: clamp(14px, 1.04vw, 20px);
    border-bottom: 1px solid #BDBDBD;
    margin: 0;
    width: 100%;
}

.cartDropdown-panel .total-price p[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--total-font);
    color: #141414;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contenedor de los dos botones CTA */
.cartDropdown-panel .cta-buttons[b-q0wkuf3lfg] {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.3vw, 25px);
    width: 100%;
    margin: 0;
}

/* Estilo base compartido por ambos botones */
.cartDropdown-panel .cta-btn[b-q0wkuf3lfg] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--cta-height);
    border-radius: var(--cta-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--btn-font);
    letter-spacing: 0.15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    box-sizing: border-box;
}

/* Botón "Añadir a una Lista" — borde amarillo, fondo blanco */
.cartDropdown-panel .cta-add-list[b-q0wkuf3lfg] {
    background: #FFFFFF;
    border: 1px solid #ECC61B;
    color: #212121;
}

    .cartDropdown-panel .cta-add-list:hover[b-q0wkuf3lfg] {
        background-color: #FDD623;
        border-color: #FDD623;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "IR A LA CESTA" — fondo verde */
.cartDropdown-panel .cta-go-cart[b-q0wkuf3lfg] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
    text-transform: uppercase;
}

    .cartDropdown-panel .cta-go-cart:hover[b-q0wkuf3lfg] {
        background: #80C87C;
        border-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "IR A LA CESTA" en ancho completo (usuario anónimo, sin botón de lista) */
.cartDropdown-panel .cta-go-cart--full[b-q0wkuf3lfg] {
    flex: 1 1 100%;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================= */
@media (max-width: 1024px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-width: min(600px, 100vw);
        --panel-padding-x: clamp(20px, 5vw, 50px);
        --panel-padding-top: clamp(20px, 3vw, 30px);
        --panel-padding-bottom: clamp(28px, 4vw, 50px);
        --title-font: clamp(28px, 4vw, 36px);
        --body-font: clamp(13px, 1.5vw, 15px);
        --total-font: clamp(18px, 2.5vw, 22px);
        --img-size: clamp(60px, 10vw, 80px);
        --counter-width: clamp(100px, 14vw, 120px);
        --counter-height: clamp(36px, 5vw, 42px);
        --gap-title-items: clamp(24px, 4vw, 40px);
        --gap-row: clamp(12px, 2vw, 16px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
@media (max-width: 768px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-width: 100vw;
        --panel-padding-x: 20px;
        --panel-padding-top: 20px;
        --panel-padding-bottom: 24px;
        --panel-radius: 0px;
        --title-font: 28px;
        --body-font: 14px;
        --total-font: 20px;
        --btn-font: 14px;
        --img-size: 70px;
        --img-radius: 10px;
        --counter-width: 110px;
        --counter-height: 40px;
        --gap-title-items: 24px;
        --gap-row: 12px;
        --gap-total: 20px;
        --delete-btn-size: 22px;
        --close-btn-size: 22px;
        --cta-height: 48px;
    }

    .cartDropdown-panel[b-q0wkuf3lfg] {
        border-radius: 0;
    }

    .cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
        flex-wrap: wrap;
    }

    .cartDropdown-panel .cart-item-info[b-q0wkuf3lfg] {
        flex: 1;
        min-width: calc(100% - var(--img-size) - var(--gap-row) - 60px);
    }

    .cartDropdown-panel .cart-item-price[b-q0wkuf3lfg] {
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-padding-x: 16px;
        --panel-padding-top: 16px;
        --panel-padding-bottom: 20px;
        --title-font: 24px;
        --body-font: 13px;
        --total-font: 18px;
        --btn-font: 13px;
        --img-size: 60px;
        --img-radius: 8px;
        --counter-width: 100px;
        --counter-height: 36px;
        --gap-title-items: 20px;
        --gap-row: 10px;
        --gap-total: 16px;
        --row-padding-y: 10px;
    }

    .cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
        gap: 10px;
    }
}
/* /Components/Shared/ClienteSwitcher.razor.rz.scp.css */
/* ============================================
   ClienteSwitcher — Header inline dropdown
   Positioning: fixed under header (like GlobalSearch)
   Design tokens: Nunito Sans, #3CAA36, #2D2E2E, #9E9E9E
   ============================================ */

.cs-wrapper[b-wiuqfsf7dx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
    margin-left: -12px; /* Closer to profile icon */
}

/* ============================================
   TRIGGER — borderless, matching header font
   ============================================ */
.cs-trigger[b-wiuqfsf7dx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.8vw, 13px);
    line-height: 1.3;
    color: #3CAA36;
    white-space: nowrap;
    transition: font-weight 0.15s ease;
    outline: none;
}

.cs-trigger:hover[b-wiuqfsf7dx] {
    text-shadow: 0.4px 0 0 currentColor;
}

.cs-trigger:hover .cs-chevron[b-wiuqfsf7dx] {
    color: #2D8B2A;
}

.cs-trigger:disabled[b-wiuqfsf7dx] {
    opacity: 0.6;
    cursor: wait;
}

/* Company name */
.cs-empresa-name[b-wiuqfsf7dx] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron */
.cs-chevron[b-wiuqfsf7dx] {
    flex-shrink: 0;
    color: #3CAA36;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-chevron--open[b-wiuqfsf7dx] {
    transform: rotate(180deg);
}

/* Spinner */
.cs-spinner[b-wiuqfsf7dx] {
    width: 12px;
    height: 12px;
    border: 2px solid #E0E0E0;
    border-top-color: #3CAA36;
    border-radius: 50%;
    animation: cs-spin-b-wiuqfsf7dx 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes cs-spin-b-wiuqfsf7dx {
    to { transform: rotate(360deg); }
}

/* ============================================
   DROPDOWN — fixed under header (like GlobalSearch)
   ============================================ */
.cs-dropdown[b-wiuqfsf7dx] {
    position: fixed;
    top: var(--header-height, clamp(90px, 8vw, 153px));
    right: clamp(16px, 6vw, 115px);
    width: 320px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow: hidden;
    animation: cs-slideIn-b-wiuqfsf7dx 0.2s ease-out;
}

@keyframes cs-slideIn-b-wiuqfsf7dx {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header label */
.cs-dropdown-header[b-wiuqfsf7dx] {
    padding: 12px 16px 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #9E9E9E;
    border-bottom: 1px solid #F0F0F0;
    background: #FFFFFF;
}

/* Scrollable item list */
.cs-dropdown-list[b-wiuqfsf7dx] {
    max-height: min(50vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Custom scrollbar */
.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar {
    width: 4px;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-track {
    background: transparent;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 4px;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-thumb:hover {
    background: #AAAAAA;
}

/* ============================================
   ITEMS
   ============================================ */
.cs-dropdown-item[b-wiuqfsf7dx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F8F8F8;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
    font-family: 'Nunito Sans', sans-serif;
}

.cs-dropdown-item:last-child[b-wiuqfsf7dx] {
    border-bottom: none;
}

.cs-dropdown-item:hover[b-wiuqfsf7dx] {
    background-color: #F5FAF5;
}

.cs-dropdown-item--active[b-wiuqfsf7dx] {
    background-color: #EBF6EB;
}

.cs-dropdown-item--active:hover[b-wiuqfsf7dx] {
    background-color: #E0F2E0;
}

.cs-dropdown-item:disabled[b-wiuqfsf7dx] {
    opacity: 0.5;
    cursor: wait;
}

.cs-dropdown-item-left[b-wiuqfsf7dx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cs-dropdown-item-name[b-wiuqfsf7dx] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: #2D2E2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-dropdown-item--active .cs-dropdown-item-name[b-wiuqfsf7dx] {
    color: #2D7A2A;
}

.cs-dropdown-item-code[b-wiuqfsf7dx] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.3;
    color: #9E9E9E;
    letter-spacing: 0.2px;
}

.cs-check[b-wiuqfsf7dx] {
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .cs-empresa-name[b-wiuqfsf7dx] {
        max-width: 140px;
    }

    .cs-dropdown[b-wiuqfsf7dx] {
        width: 280px;
    }
}

/* Below desktop breakpoint: hide in header */
@media (max-width: 991px) {
    .cs-wrapper[b-wiuqfsf7dx] {
        display: none;
    }
}
/* /Components/Shared/CrearListaModal.razor.rz.scp.css */
/* ============================================= */
/* CREAR LISTA MODAL - Pixel-perfect Figma       */
/* Node: 4828:38319                               */
/* ============================================= */

/* ============================================= */
/* OVERLAY (fondo oscuro)                        */
/* ============================================= */
.crear-lista-overlay[b-3ugqkdy17n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

/* ============================================= */
/* MODAL (caja blanca)                           */
/* Figma: w-703px, rounded-15px, shadow,         */
/* pt-50 pb-75 px-100                            */
/* ============================================= */
.crear-lista-modal[b-3ugqkdy17n] {
    position: relative;
    width: clamp(300px, 36.62vw, 703px);
    background-color: #FFFFFF;
    border-radius: clamp(10px, 0.78vw, 15px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: clamp(30px, 2.60vw, 50px) clamp(24px, 5.21vw, 100px) clamp(40px, 3.91vw, 75px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    animation: crearListaFadeIn-b-3ugqkdy17n 0.2s ease-out;
}

@keyframes crearListaFadeIn-b-3ugqkdy17n {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================= */
/* CLOSE BUTTON (X)                              */
/* Figma: absolute, top-30, right-30, 24x24      */
/* ============================================= */
.crear-lista-close[b-3ugqkdy17n] {
    position: absolute;
    top: clamp(16px, 1.56vw, 30px);
    right: clamp(16px, 1.56vw, 30px);
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.crear-lista-close:hover[b-3ugqkdy17n] {
    opacity: 0.6;
}

/* ============================================= */
/* CONTENT CONTAINER                             */
/* Figma: flex-col, gap-45                       */
/* ============================================= */
.crear-lista-content[b-3ugqkdy17n] {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.34vw, 45px);
    align-items: flex-start;
    width: 100%;
}

/* ============================================= */
/* TITLE                                         */
/* Figma: 28px, Regular, center, black           */
/* ============================================= */
.crear-lista-title[b-3ugqkdy17n] {
    width: 100%;
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: clamp(20px, 1.46vw, 28px);
    line-height: clamp(28px, 1.88vw, 36px);
    text-align: center;
}

/* ============================================= */
/* INPUT FIELD                                   */
/* Figma: bg #F5F5F5, rounded-6, px-16 py-17,   */
/* placeholder 18px Light #9E9E9E                */
/* ============================================= */
.crear-lista-field[b-3ugqkdy17n] {
    width: 100%;
}

.crear-lista-input[b-3ugqkdy17n] {
    width: 100%;
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: clamp(12px, 0.89vw, 17px) 16px;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 0.94vw, 18px);
    color: #212121;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.15s ease;
}

.crear-lista-input[b-3ugqkdy17n]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.crear-lista-input:focus[b-3ugqkdy17n] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* ============================================= */
/* ALERTS                                        */
/* ============================================= */
.crear-lista-alert[b-3ugqkdy17n] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    margin-top: -20px;
}

.crear-lista-alert-danger[b-3ugqkdy17n] {
    background-color: #fef2f2;
    color: #dc3545;
    border: 1px solid #f5c6cb;
}

.crear-lista-alert-success[b-3ugqkdy17n] {
    background-color: #f0fdf4;
    color: #3caa36;
    border: 1px solid #bbf7d0;
}

/* ============================================= */
/* CREAR BUTTON                                  */
/* Figma: h-54, green bg, rounded-6, full-width  */
/* text: 16px SemiBold white, tracking 0.15px    */
/* ============================================= */
.crear-lista-btn-wrapper[b-3ugqkdy17n] {
    width: 100%;
}

.crear-lista-btn[b-3ugqkdy17n] {
    width: 100%;
    height: clamp(44px, 2.81vw, 54px);
    background-color: #3CAA36;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.crear-lista-btn:hover[b-3ugqkdy17n] {
    background-color: #80C87C;
}

.crear-lista-btn-layer[b-3ugqkdy17n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    width: 100%;
    height: 100%;
}

.crear-lista-btn-text[b-3ugqkdy17n] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: clamp(14px, 0.83vw, 16px);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

/* ============================================= */
/* SPINNER                                       */
/* ============================================= */
.crear-lista-btn .spinner-border[b-3ugqkdy17n] {
    color: #FFFFFF;
    width: 18px;
    height: 18px;
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
@media (max-width: 768px) {
    .crear-lista-modal[b-3ugqkdy17n] {
        width: 100%;
        max-width: 500px;
        padding: 30px 24px 40px;
        border-radius: 12px;
    }

    .crear-lista-close[b-3ugqkdy17n] {
        top: 16px;
        right: 16px;
    }

    .crear-lista-content[b-3ugqkdy17n] {
        gap: 24px;
    }

    .crear-lista-title[b-3ugqkdy17n] {
        font-size: 22px;
        line-height: 30px;
    }

    .crear-lista-input[b-3ugqkdy17n] {
        font-size: 16px;
        padding: 14px 16px;
    }

    .crear-lista-btn[b-3ugqkdy17n] {
        height: 48px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .crear-lista-overlay[b-3ugqkdy17n] {
        padding: 12px;
    }

    .crear-lista-modal[b-3ugqkdy17n] {
        padding: 24px 16px 32px;
        border-radius: 10px;
    }

    .crear-lista-close[b-3ugqkdy17n] {
        top: 12px;
        right: 12px;
    }

    .crear-lista-content[b-3ugqkdy17n] {
        gap: 20px;
    }

    .crear-lista-title[b-3ugqkdy17n] {
        font-size: 20px;
        line-height: 28px;
    }

    .crear-lista-btn[b-3ugqkdy17n] {
        height: 46px;
    }
}
/* /Components/Shared/CustomDatePicker.razor.rz.scp.css */
/* ====================================================================
   CustomDatePicker — Scoped CSS
   Diseño basado en Figma node 389:15892
   Colores: Primario #3CAA36, Fondo #EBF6EB, Negro #212121, Blanco #FFF
   Tipografía: Nunito Sans
   ==================================================================== */

/* --- Wrapper --- */
.cdp-wrapper[b-itivid4d63] {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* --- Input --- */
.cdp-input-wrapper[b-itivid4d63] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.cdp-input[b-itivid4d63] {
    width: 100%;
    cursor: pointer;
    caret-color: transparent;
    padding-right: 40px !important;
}

.cdp-calendar-icon[b-itivid4d63] {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* --- Popup --- */
.cdp-popup[b-itivid4d63] {
    position: absolute;
    left: 0;
    z-index: 1000;
    min-width: 320px;
}

/* Abajo del input (por defecto) */
.cdp-popup.cdp-popup-below[b-itivid4d63] {
    top: calc(100% + 8px);
    bottom: auto;
    animation: cdp-fadeInDown-b-itivid4d63 0.15s ease-out;
}

/* Arriba del input */
.cdp-popup.cdp-popup-above[b-itivid4d63] {
    bottom: calc(100% + 8px);
    top: auto;
    animation: cdp-fadeInUp-b-itivid4d63 0.15s ease-out;
}

@keyframes cdp-fadeInDown-b-itivid4d63 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cdp-fadeInUp-b-itivid4d63 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Calendar container --- */
.cdp-calendar[b-itivid4d63] {
    background-color: #EBF6EB;
    border-radius: 15px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-family: 'Nunito Sans', sans-serif;
    color: #212121;
}

/* --- Header (Mes Año + flechas) --- */
.cdp-header[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 4px 16px;
}

.cdp-month-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 10px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #212121;
    letter-spacing: 0.25px;
    line-height: 20px;
    transition: background-color 0.15s ease;
}

.cdp-month-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.08);
}

.cdp-dropdown-arrow[b-itivid4d63] {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.cdp-arrow-up[b-itivid4d63] {
    transform: rotate(180deg);
}

.cdp-nav-buttons[b-itivid4d63] {
    display: flex;
    align-items: center;
    gap: 0;
}

.cdp-nav-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    padding: 8px;
    transition: background-color 0.15s ease;
}

.cdp-nav-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.08);
}

.cdp-nav-btn svg[b-itivid4d63] {
    width: 8px;
    height: 14px;
    flex-shrink: 0;
}

/* --- Weekday headers --- */
.cdp-weekdays[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px;
    height: 48px;
}

.cdp-weekday[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    letter-spacing: 0.5px;
    line-height: 24px;
}

/* --- Days grid --- */
.cdp-days-grid[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px 8px 12px;
}

.cdp-day[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-width: 48px;
    max-height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    letter-spacing: 0.5px;
    line-height: 24px;
    border-radius: 100px;
    transition: background-color 0.15s ease;
    padding: 0;
    margin: 0 auto;
}

.cdp-day:hover:not(.cdp-day-selected):not(.cdp-day-empty)[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-day-empty[b-itivid4d63] {
    cursor: default;
}

.cdp-day-selected[b-itivid4d63] {
    background-color: #3CAA36;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    line-height: 20px;
}

.cdp-day-today[b-itivid4d63] {
    border: 1px solid #3CAA36;
    color: #3CAA36;
    font-weight: 600;
}

/* --- Month selector grid --- */
.cdp-month-grid[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 12px 8px 12px;
}

.cdp-month-item[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #212121;
    letter-spacing: 0.25px;
    line-height: 20px;
    border-radius: 100px;
    transition: background-color 0.15s ease;
}

.cdp-month-item:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-month-item-active[b-itivid4d63] {
    background-color: #3CAA36;
    color: #FFFFFF;
    font-weight: 700;
}

.cdp-year-nav[b-itivid4d63] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px 0;
}

.cdp-year-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    transition: background-color 0.15s ease;
}

.cdp-year-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-year-btn svg[b-itivid4d63] {
    width: 8px;
    height: 14px;
}

.cdp-year-label[b-itivid4d63] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #212121;
    min-width: 50px;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .cdp-popup[b-itivid4d63] {
        min-width: 280px;
    }


    .cdp-day[b-itivid4d63] {
        font-size: 14px;
    }

    .cdp-weekday[b-itivid4d63] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cdp-popup[b-itivid4d63] {
        min-width: 260px;
    }

    .cdp-nav-btn[b-itivid4d63] {
        width: 40px;
        height: 40px;
    }
}
/* /Components/Shared/DuplicateArticleModal.razor.rz.scp.css */
/* ============================================= */
/* DUPLICATE ARTICLE MODAL (Figma 4560:37310)    */
/* Grouped selection of duplicate references     */
/* ============================================= */

.duplicate-modal-overlay[b-lmxnxv9s5p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dupOverlayIn-b-lmxnxv9s5p 0.2s ease;
}

@keyframes dupOverlayIn-b-lmxnxv9s5p {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.duplicate-modal[b-lmxnxv9s5p] {
    position: relative;
    width: 479px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    padding: 30px 60px;
    animation: dupSlideIn-b-lmxnxv9s5p 0.25s ease;
}

@keyframes dupSlideIn-b-lmxnxv9s5p {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.duplicate-modal-body[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.duplicate-modal-text[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.duplicate-modal-ref[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.duplicate-modal-question[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== GRID DE PRODUCTOS ===== */
.duplicate-modal-grid[b-lmxnxv9s5p] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ===== ITEM DE PRODUCTO ===== */
.dup-item[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dup-item:hover[b-lmxnxv9s5p] {
    transform: scale(1.03);
}

/* Wrapper de la imagen */
.dup-item-img-wrapper[b-lmxnxv9s5p] {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

/* Estado seleccionado: borde verde */
.dup-item--selected .dup-item-img-wrapper[b-lmxnxv9s5p] {
    border-color: #3CAA36;
}

.dup-item-img[b-lmxnxv9s5p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    mix-blend-mode: multiply;
    display: block;
}

/* Overlay verde semitransparente (solo cuando seleccionado) */
.dup-item-overlay[b-lmxnxv9s5p] {
    position: absolute;
    inset: 0;
    background: rgba(60, 170, 54, 0.5);
    border-radius: 12px;
    pointer-events: none;
}

/* Check icon (solo cuando seleccionado) */
.dup-item-check[b-lmxnxv9s5p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 28px;
    pointer-events: none;
}

/* Referencia debajo */
.dup-item-ref[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #000000;
    text-align: center;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== ACTIONS ===== */
.duplicate-modal-actions[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.duplicate-modal-btn-add[b-lmxnxv9s5p] {
    width: 100%;
    height: 40px;
    background: #3CAA36;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.duplicate-modal-btn-add:hover[b-lmxnxv9s5p] {
    background: #2E8A2A;
}

.duplicate-modal-btn-add:disabled[b-lmxnxv9s5p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.duplicate-modal-btn-cancel[b-lmxnxv9s5p] {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #212121;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
    width: 100%;
}

.duplicate-modal-btn-cancel:hover[b-lmxnxv9s5p] {
    color: #666666;
}

.duplicate-modal-btn-cancel:disabled[b-lmxnxv9s5p] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== CLOSE ===== */
.duplicate-modal-close[b-lmxnxv9s5p] {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
}

.duplicate-modal-close:hover[b-lmxnxv9s5p] {
    opacity: 0.6;
}

/* ============================================= */
/* RESPONSIVE                                    */
/* ============================================= */
@media (max-width: 540px) {
    .duplicate-modal[b-lmxnxv9s5p] {
        padding: 24px 24px;
        width: calc(100vw - 32px);
    }

    .duplicate-modal-close[b-lmxnxv9s5p] {
        right: 16px;
        top: 16px;
    }

    .dup-item-img-wrapper[b-lmxnxv9s5p] {
        width: 60px;
        height: 60px;
    }

    .dup-item-ref[b-lmxnxv9s5p] {
        font-size: 12px;
    }

    .duplicate-modal-grid[b-lmxnxv9s5p] {
        padding: 0;
    }
}
/* /Components/Shared/FavoritosDropdown.razor.rz.scp.css */
/* ============================================= */
/* FAVORITOS DROPDOWN - 100% Responsive (Figma match) */
/* ============================================= */

/* --- CSS Variables (sistema fluido con clamp) --- */
.favoritos.modal-overlay[b-auzze9x471] {
    /* Panel */
    --panel-width: min(756px, 100vw);
    --panel-padding-x: clamp(20px, 4.69vw, 90px);
    --panel-padding-top: clamp(20px, 2.08vw, 40px);
    --panel-padding-bottom: clamp(32px, 3.65vw, 70px);
    --panel-radius: 15px;
    /* Tipografía */
    --title-font: clamp(26px, 2.5vw, 48px);
    --body-font: clamp(13px, 0.83vw, 16px);
    --total-font: clamp(18px, 1.25vw, 24px);
    --btn-font: clamp(13px, 0.83vw, 16px);
    /* Espaciado */
    --gap-title-items: clamp(28px, 2.86vw, 55px);
    --gap-items: 0px;
    --gap-row: clamp(12px, 1.04vw, 20px);
    --gap-total: clamp(20px, 2.08vw, 40px);
    /* Producto */
    --img-size: clamp(60px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);
    --row-padding-y: clamp(4px, 0.312vw, 6px);
    /* Contador */
    --counter-width: clamp(100px, 6.68vw, 128px);
    --counter-height: clamp(36px, 2.4vw, 46px);
    --counter-radius: 8px;
    --counter-btn-size: clamp(16px, 1.08vw, 20px);
    /* Botones */
    --cart-btn-width: clamp(44px, 3vw, 57.5px);
    --cart-btn-height: clamp(36px, 2.4vw, 46px);
    --heart-btn-size: clamp(26px, 1.67vw, 32px);
    --close-btn-size: clamp(18px, 1.25vw, 24px);
    --cta-height: clamp(44px, 2.81vw, 54px);
    --cta-radius: 6px;
}

/* ============================================= */
/* OVERLAY */
/* ============================================= */
.favoritos.modal-overlay[b-auzze9x471] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    animation: favOverlayFadeIn-b-auzze9x471 0.25s ease;
}

@keyframes favOverlayFadeIn-b-auzze9x471 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================= */
/* PANEL PRINCIPAL */
/* ============================================= */
.favorites-panel[b-auzze9x471] {
    position: relative;
    width: var(--panel-width);
    height: 100%;
    background: #FFFFFF;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: favPanelSlideIn-b-auzze9x471 0.3s ease;
}

@keyframes favPanelSlideIn-b-auzze9x471 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.favorites-panel .dropdown-content[b-auzze9x471] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--panel-padding-top) var(--panel-padding-x) var(--panel-padding-bottom);
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    /* Reset master.css overrides */
    inset: unset;
    right: unset;
    top: unset;
    box-shadow: none;
}

/* ============================================= */
/* CABECERA (Título + Cerrar) */
/* ============================================= */
.favorites-panel .carritohead[b-auzze9x471] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.favorites-panel .carritohead h2[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--title-font);
    color: #2D2E2E;
    margin: 0;
    line-height: 1.1;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: block;
}

.favorites-panel #close[b-auzze9x471] {
    width: var(--close-btn-size);
    height: var(--close-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2D2E2E;
    font-size: var(--close-btn-size);
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
    margin: 0;
}

.favorites-panel #close:hover[b-auzze9x471] {
    opacity: 0.6;
}

/* ============================================= */
/* LISTA DE PRODUCTOS */
/* ============================================= */
.favorites-panel .cart-items[b-auzze9x471] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: var(--gap-title-items) 0 0 0;
    padding: 0;
    max-height: none;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar {
    width: 4px;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

.favorites-panel .cart-items-list[b-auzze9x471] {
    display: flex;
    flex-direction: column;
}

.favorites-panel #labelFavoritesEmpty[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--body-font);
    color: #9E9E9E;
    text-align: center;
    padding: clamp(30px, 3vw, 60px) 0;
    margin: 0;
}

/* ============================================= */
/* FILA DE PRODUCTO */
/* ============================================= */
.favorites-panel .cart-item[b-auzze9x471] {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: var(--row-padding-y) 0;
    border-bottom: 1px dashed #EEEEEE;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
}

.favorites-panel .cart-item:last-child[b-auzze9x471] {
    border-bottom: 1px dashed #EEEEEE;
}

/* Imagen */
.favorites-panel .cart-item-image[b-auzze9x471] {
    flex-shrink: 0;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: var(--img-radius);
    overflow: hidden;
}

.favorites-panel .cart-item-image img[b-auzze9x471] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-radius);
    mix-blend-mode: multiply;
}

/* Info (nombre + código) */
.favorites-panel .cart-item-info[b-auzze9x471] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: left;
}

.favorites-panel .product-name[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.favorites-panel .product-name:hover[b-auzze9x471] {
    color: #3CAA36;
}

.favorites-panel .product-code[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador de cantidad */
.favorites-panel .quantity-control[b-auzze9x471] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F5F5;
    border-radius: var(--counter-radius);
    width: var(--counter-width);
    height: var(--counter-height);
    padding: 0 clamp(8px, 0.64vw, 12px);
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
}

.favorites-panel .qty-btn[b-auzze9x471] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: var(--counter-btn-size);
    width: var(--counter-btn-size);
    height: var(--counter-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

    .favorites-panel .qty-btn:hover:not(:disabled)[b-auzze9x471] {
        color: #3CAA36;
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.favorites-panel .qty-btn:disabled[b-auzze9x471] {
    opacity: 0.3;
    cursor: not-allowed;
}

.favorites-panel .qty-number[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--body-font);
    color: #121212;
    text-align: center;
    min-width: 20px;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Botón añadir al carrito (borde verde) - Figma style */
.favorites-panel .cart-item > .qty-btn[b-auzze9x471] {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    width: var(--cart-btn-width);
    height: var(--cart-btn-height);
    cursor: pointer;
    color: #3CAA36;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: clamp(16px, 1.15vw, 22px);
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

/* CartIcon (svg, fill=currentColor): tamaño del icono dentro del botón de añadir */
.favorites-panel .cart-item > .qty-btn[b-auzze9x471]  svg {
    width: clamp(16px, 1.15vw, 22px);
    height: clamp(16px, 1.15vw, 22px);
}

.favorites-panel .cart-item > .qty-btn:hover:not(:disabled)[b-auzze9x471] {
    background: #3CAA36;
    color: #FFFFFF;
}

.favorites-panel .cart-item > .qty-btn:disabled[b-auzze9x471] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

/* Botón favorito (corazón rojo con sombra) - Figma style */
.favorites-panel .delete-btn[b-auzze9x471] {
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: var(--heart-btn-size);
    height: var(--heart-btn-size);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

.favorites-panel .delete-btn i[b-auzze9x471] {
    font-size: clamp(12px, 0.83vw, 16px);
}

.favorites-panel .delete-btn:hover[b-auzze9x471] {
    background: #f8f8f8;
    transform: scale(1.1);
}

/* ============================================= */
/* ZONA INFERIOR: BOTONES CTA (Figma match) */
/* ============================================= */

/* Ocultar el hr redundante del master */
.favorites-panel .dropdown-content > div[style*="margin-left: 10%"][b-auzze9x471] {
    display: none !important;
}

/* Contenedor de los dos botones CTA */
.favorites-panel .cta-buttons[b-auzze9x471] {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.3vw, 25px);
    width: 100%;
    flex-shrink: 0;
    padding: clamp(16px, 2.34vw, 45px) 0 0 0;
    margin: 0;
}

/* Estilo base compartido por ambos botones */
.favorites-panel .cta-btn[b-auzze9x471] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--cta-height);
    border-radius: var(--cta-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--btn-font);
    letter-spacing: 0.15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    box-sizing: border-box;
}

/* Botón "Ver Listas" — borde amarillo, fondo blanco */
.favorites-panel .cta-ver-listas[b-auzze9x471] {
    background: #FFFFFF;
    border: 1px solid #ECC61B;
    color: #212121;
}

    .favorites-panel .cta-ver-listas:hover[b-auzze9x471] {
        background: #FDD623;
        border-color: #FDD623;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "Crear Lista" — fondo verde */
.favorites-panel .cta-crear-lista[b-auzze9x471] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
}

    .favorites-panel .cta-crear-lista:hover[b-auzze9x471] {
        background: #80C87C;
        border-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================= */
@media (max-width: 1024px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-width: min(600px, 100vw);
        --panel-padding-x: clamp(20px, 5vw, 50px);
        --panel-padding-top: clamp(20px, 3vw, 30px);
        --panel-padding-bottom: clamp(28px, 4vw, 50px);
        --title-font: clamp(28px, 4vw, 36px);
        --body-font: clamp(13px, 1.5vw, 15px);
        --total-font: clamp(18px, 2.5vw, 22px);
        --img-size: clamp(60px, 10vw, 80px);
        --counter-width: clamp(100px, 14vw, 120px);
        --counter-height: clamp(36px, 5vw, 42px);
        --cart-btn-width: clamp(40px, 6vw, 50px);
        --cart-btn-height: clamp(36px, 5vw, 42px);
        --heart-btn-size: clamp(24px, 3.5vw, 30px);
        --gap-title-items: clamp(24px, 4vw, 40px);
        --gap-row: clamp(12px, 2vw, 16px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
@media (max-width: 768px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-width: 100vw;
        --panel-padding-x: 20px;
        --panel-padding-top: 20px;
        --panel-padding-bottom: 24px;
        --panel-radius: 0px;
        --title-font: 28px;
        --body-font: 14px;
        --total-font: 20px;
        --btn-font: 14px;
        --img-size: 70px;
        --img-radius: 10px;
        --counter-width: 110px;
        --counter-height: 40px;
        --cart-btn-width: 46px;
        --cart-btn-height: 40px;
        --heart-btn-size: 28px;
        --gap-title-items: 24px;
        --gap-row: 12px;
        --gap-total: 20px;
        --close-btn-size: 22px;
        --cta-height: 48px;
    }

    .favorites-panel[b-auzze9x471] {
        border-radius: 0;
    }

    .favorites-panel .cart-item[b-auzze9x471] {
        flex-wrap: wrap;
    }

    .favorites-panel .cart-item-info[b-auzze9x471] {
        flex: 1;
        min-width: calc(100% - var(--img-size) - var(--gap-row) - 80px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-padding-x: 16px;
        --panel-padding-top: 16px;
        --panel-padding-bottom: 20px;
        --title-font: 24px;
        --body-font: 13px;
        --total-font: 18px;
        --btn-font: 13px;
        --img-size: 60px;
        --img-radius: 8px;
        --counter-width: 100px;
        --counter-height: 36px;
        --cart-btn-width: 42px;
        --cart-btn-height: 36px;
        --heart-btn-size: 26px;
        --gap-title-items: 20px;
        --gap-row: 10px;
        --gap-total: 16px;
        --row-padding-y: 10px;
    }

    .favorites-panel .cart-item[b-auzze9x471] {
        gap: 10px;
    }
}
/* /Components/Shared/ListArticlesModal.razor.rz.scp.css */
/* ============================================= */
/* LIST ARTICLES MODAL (Figma 4523:36529)        */
/* ============================================= */

.list-articles-overlay[b-ipyfmzjvzk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lamOverlayIn-b-ipyfmzjvzk 0.2s ease;
}

@keyframes lamOverlayIn-b-ipyfmzjvzk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.list-articles-modal[b-ipyfmzjvzk] {
    position: relative;
    width: 703px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 50px 100px 75px;
    animation: lamSlideIn-b-ipyfmzjvzk 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

@keyframes lamSlideIn-b-ipyfmzjvzk {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar {
    width: 4px;
}

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar-track {
    background: transparent;
}

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* ===== CLOSE BUTTON ===== */
.lam-close[b-ipyfmzjvzk] {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.lam-close:hover[b-ipyfmzjvzk] {
    opacity: 0.6;
}

/* ===== CONTENT ===== */
.lam-content[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 45px;
    width: 100%;
}

/* ===== TITLE ===== */
.lam-title[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #000000;
    text-align: center;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== FIELDS GROUP ===== */
.lam-fields[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* ===== INPUT ===== */
.lam-input-wrapper[b-ipyfmzjvzk] {
    width: 100%;
}

.lam-input[b-ipyfmzjvzk] {
    width: 100%;
    background: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #212121;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-input[b-ipyfmzjvzk]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.lam-input:focus[b-ipyfmzjvzk] {
    box-shadow: 0 0 0 2px #3CAA36;
}

.lam-input:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
}

/* ===== ARTICLES BOX ===== */
.lam-articles-box[b-ipyfmzjvzk] {
    border: 1px solid #212121;
    border-radius: 15px;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}

.lam-articles-list[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar {
    width: 4px;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar-track {
    background: transparent;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* ===== ARTICLE ROW ===== */
.lam-article-row[b-ipyfmzjvzk] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #E0E0E0;
    width: 100%;
}

.lam-article-row--last[b-ipyfmzjvzk] {
    border-bottom: none;
}

/* Imagen */
.lam-article-img[b-ipyfmzjvzk] {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 14px;
    overflow: hidden;
}

.lam-article-img img[b-ipyfmzjvzk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    mix-blend-mode: multiply;
}

/* Info */
.lam-article-info[b-ipyfmzjvzk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lam-article-name[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-article-ref[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #000000;
    margin: 0;
    line-height: normal;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador */
.lam-article-counter[b-ipyfmzjvzk] {
    position: relative;
    flex-shrink: 0;
    width: 128px;
    height: 46px;
}

.lam-counter-bg[b-ipyfmzjvzk] {
    position: absolute;
    inset: 0;
    background: #F5F5F5;
    border-radius: 8px;
}

.lam-counter-controls[b-ipyfmzjvzk] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 1;
}

.lam-counter-btn[b-ipyfmzjvzk] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.lam-counter-btn:hover:not(:disabled)[b-ipyfmzjvzk] {
    color: #3CAA36;
}

.lam-counter-btn:disabled[b-ipyfmzjvzk] {
    opacity: 0.3;
    cursor: not-allowed;
}

.lam-counter-value[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #121212;
    text-align: center;
    min-width: 20px;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Botón eliminar */
.lam-delete-btn[b-ipyfmzjvzk] {
    background: none;
    border: none;
    cursor: pointer;
    color: #666666;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: 18px;
    transition: color 0.2s ease;
}

.lam-delete-btn:hover[b-ipyfmzjvzk] {
    color: #dc3545;
}

/* Empty message */
.lam-empty[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #9E9E9E;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

/* ===== BUTTONS ===== */
.lam-buttons[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.lam-btn-create[b-ipyfmzjvzk] {
    width: 100%;
    height: 54px;
    background: #3CAA36;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lam-btn-create:hover[b-ipyfmzjvzk] {
    background: #2E8A2A;
}

.lam-btn-create:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.lam-btn-existing[b-ipyfmzjvzk] {
    width: 100%;
    height: 53px;
    background: var(--buttons-white);
    border: 1px solid var(--buttons-border-yellow);
    border-radius: var(--buttons-border-radius);
    color: var(--buttons-text-black);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-weight: var(--buttons-font-weight-medium);
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lam-btn-existing:hover[b-ipyfmzjvzk] {
    background: var(--buttons-background-yellow);
    border-color: var(--buttons-border-yellow-hover);
}

.lam-btn-existing:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Cancelar button */
.lam-btn-cancel[b-ipyfmzjvzk] {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #212121;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
    width: 100%;
}

.lam-btn-cancel:hover[b-ipyfmzjvzk] {
    color: #666666;
}

.lam-btn-cancel:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== EXISTING LISTS PANEL ===== */
.lam-existing-panel[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.lam-existing-lists[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.lam-list-option[b-ipyfmzjvzk] {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 4px 0;
}

.lam-list-option:hover[b-ipyfmzjvzk] {
    opacity: 0.8;
}

/* Radio button custom */
.lam-radio[b-ipyfmzjvzk] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #9E9E9E;
    background: #FFFFFF;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.lam-radio--selected[b-ipyfmzjvzk] {
    border-color: #3CAA36;
    background: #3CAA36;
}

.lam-list-name[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-loading[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #9E9E9E;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 768px)        */
/* ============================================= */
@media (max-width: 768px) {
    .list-articles-modal[b-ipyfmzjvzk] {
        padding: 30px 24px 40px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .lam-close[b-ipyfmzjvzk] {
        right: 16px;
        top: 16px;
    }

    .lam-title[b-ipyfmzjvzk] {
        font-size: 22px;
        line-height: 28px;
    }

    .lam-content[b-ipyfmzjvzk] {
        gap: 30px;
    }

    .lam-articles-box[b-ipyfmzjvzk] {
        padding: 16px;
    }

    .lam-article-row[b-ipyfmzjvzk] {
        gap: 10px;
    }

    .lam-article-img[b-ipyfmzjvzk] {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }

    .lam-article-img img[b-ipyfmzjvzk] {
        border-radius: 10px;
    }

    .lam-article-name[b-ipyfmzjvzk],
    .lam-article-ref[b-ipyfmzjvzk] {
        font-size: 14px;
    }

    .lam-article-counter[b-ipyfmzjvzk] {
        width: 100px;
        height: 38px;
    }

    .lam-counter-btn[b-ipyfmzjvzk] {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }

    .lam-counter-value[b-ipyfmzjvzk] {
        font-size: 14px;
    }

    .lam-btn-create[b-ipyfmzjvzk] {
        height: 48px;
    }

    .lam-btn-existing[b-ipyfmzjvzk] {
        height: 46px;
    }

    .lam-input[b-ipyfmzjvzk] {
        font-size: 16px;
        padding: 14px 14px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .list-articles-modal[b-ipyfmzjvzk] {
        padding: 24px 16px 32px;
    }

    .lam-title[b-ipyfmzjvzk] {
        font-size: 20px;
        line-height: 26px;
    }

    .lam-content[b-ipyfmzjvzk] {
        gap: 24px;
    }

    .lam-article-img[b-ipyfmzjvzk] {
        width: 44px;
        height: 44px;
    }

    .lam-article-counter[b-ipyfmzjvzk] {
        width: 90px;
        height: 34px;
    }

    .lam-counter-controls[b-ipyfmzjvzk] {
        padding: 0 8px;
    }
}
/* /Components/Shared/Migas.razor.rz.scp.css */
/* Migas de pan de las páginas de contenido (Fase L8.5-8).
   Discretas a propósito: sirven para saber dónde estás y subir un nivel, no para
   competir con el título de la página. */

.migas[b-nk05vqgl6k] {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(10px, 1.04vw, 20px) clamp(16px, 3.33vw, 64px) 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.migas-lista[b-nk05vqgl6k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.migas-paso[b-nk05vqgl6k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.migas a[b-nk05vqgl6k] {
    color: #414a45;
    text-decoration: none;
}

/* Subrayado solo al pasar por encima o al llegar con el teclado: el enlace se distingue
   por el contexto, y cinco subrayados seguidos ensucian. */
.migas a:hover[b-nk05vqgl6k],
.migas a:focus-visible[b-nk05vqgl6k] {
    color: #2c7527;
    text-decoration: underline;
}

.migas a:focus-visible[b-nk05vqgl6k] {
    outline: 2px solid #3caa36;
    outline-offset: 2px;
    border-radius: 3px;
}

.migas-separador[b-nk05vqgl6k] {
    color: #8a938d;
}

/* La página actual: se lee, pero no invita a pulsar. */
.migas-actual[b-nk05vqgl6k] {
    color: #1d2420;
    font-weight: 600;
}

/* En el móvil las migas largas se van a varias líneas en vez de desbordar. */
@media (max-width: 640px) {
    .migas[b-nk05vqgl6k] {
        font-size: 12px;
    }
}
/* /Components/Shared/NewListModal.razor.rz.scp.css */
.new-list.modal-overlay[b-rfji4ixf6j] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.new-list .modal-results[b-rfji4ixf6j] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.new-list .modal-title[b-rfji4ixf6j] {
    margin-bottom: 40px;
}

.new-list .modal-close[b-rfji4ixf6j] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.new-list .modal-newlist-body[b-rfji4ixf6j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-list .modal-actions[b-rfji4ixf6j] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.new-list .boton[b-rfji4ixf6j] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.new-list .boton:hover[b-rfji4ixf6j] {
    background-color: #80C87C;
}

.new-list .state-layer[b-rfji4ixf6j], .new-list .state-layer-2[b-rfji4ixf6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.new-list .label-text[b-rfji4ixf6j] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.new-list .boton-2[b-rfji4ixf6j] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.new-list .boton-2:hover[b-rfji4ixf6j] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.new-list .boton-2:hover .label-text-2[b-rfji4ixf6j] {
    color: var(--blanco);
}

.new-list .label-text-2[b-rfji4ixf6j] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.new-list .alert-success[b-rfji4ixf6j], .new-list .alert-danger[b-rfji4ixf6j] {
    text-align: center;
}
/* /Components/Shared/NotificationComponent.razor.rz.scp.css */
.notification-container[b-5rp61e7yy5] {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideIn-b-5rp61e7yy5 0.3s ease-out;
}

.notification-content[b-5rp61e7yy5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notification-title[b-5rp61e7yy5] {
    font-weight: 600;
    margin-bottom: 4px;
}

.notification-message[b-5rp61e7yy5] {
    margin: 0;
}

.notification-close[b-5rp61e7yy5] {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    transition: opacity 0.2s ease;
}

.notification-close:hover[b-5rp61e7yy5] {
    opacity: 1;
}

.notification-success[b-5rp61e7yy5] {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.notification-error[b-5rp61e7yy5] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.notification-warning[b-5rp61e7yy5] {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.notification-info[b-5rp61e7yy5] {
    color: #0c5460;
    background-color: #bee5eb;
    border-color: #abdde5;
}

@keyframes slideIn-b-5rp61e7yy5 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .notification-container[b-5rp61e7yy5] {
        padding: 12px 15px;
        font-size: 13px;
    }

    .notification-close[b-5rp61e7yy5] {
        margin-left: 10px;
    }
}
/* /Components/Shared/PedidoArticulosRegalo.razor.rz.scp.css */
.articulos-regalo.modal-overlay[b-f0h4j7vbtg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.articulos-regalo .modal-results[b-f0h4j7vbtg] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.articulos-regalo .modal-close[b-f0h4j7vbtg] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.articulos-regalo .modal-regalos-body[b-f0h4j7vbtg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 8px; 
}

.articulos-regalo .producto-modal[b-f0h4j7vbtg] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.articulos-regalo .producto-modal:last-child[b-f0h4j7vbtg] {
    border-bottom: none;
}

.articulos-regalo .producto-modal .product-image[b-f0h4j7vbtg] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.articulos-regalo .producto-modal .product-img[b-f0h4j7vbtg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.articulos-regalo .producto-modal .producto-info[b-f0h4j7vbtg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.articulos-regalo .producto-modal .descripcion[b-f0h4j7vbtg] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.articulos-regalo .producto-modal .referencia[b-f0h4j7vbtg] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* --- Skeleton de carga (mismo layout que .producto-modal, evita el flash de "No se han encontrado regalos") --- */
.articulos-regalo .regalo-skeleton .product-image .skeleton[b-f0h4j7vbtg] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line[b-f0h4j7vbtg] {
    margin-bottom: 0; /* el gap de .producto-info separa las líneas */
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.desc[b-f0h4j7vbtg] {
    width: 65%;
    height: 18px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.ref[b-f0h4j7vbtg] {
    width: 45%;
    height: 16px;
}

.articulos-regalo .label-text[b-f0h4j7vbtg] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.articulos-regalo .label-text-2[b-f0h4j7vbtg] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}
/* /Components/Shared/PopupAyudaOnline.razor.rz.scp.css */
.ao-overlay[b-f0vdlin30w] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1060;
    padding: 24px 16px;
    overflow-y: auto;
}

.ao-card[b-f0vdlin30w] {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    position: relative;
}

.ao-close[b-f0vdlin30w] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    color: #2D2E2E;
    cursor: pointer;
    line-height: 1;
}

.ao-title[b-f0vdlin30w] {
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #2D2E2E;
    margin: 0 0 16px;
}

.ao-contacts[b-f0vdlin30w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 20px;
}

.ao-contact[b-f0vdlin30w] {
    color: #5FB246;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
}

.ao-contact:hover[b-f0vdlin30w] {
    text-decoration: underline;
}

.ao-grid[b-f0vdlin30w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.ao-item[b-f0vdlin30w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid #F0F0F0;
    padding-top: 16px;
}

.ao-grid .ao-item:nth-child(1)[b-f0vdlin30w],
.ao-grid .ao-item:nth-child(2)[b-f0vdlin30w] {
    border-top: none;
    padding-top: 0;
}

.ao-item-head[b-f0vdlin30w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #2D2E2E;
    margin-bottom: 8px;
}

.ao-item-head i[b-f0vdlin30w] {
    color: #5FB246;
    font-size: 1.15rem;
}

.ao-item-desc[b-f0vdlin30w] {
    color: #555;
    font-size: .85rem;
    line-height: 1.4;
    margin: 0 0 12px;
}

.ao-btn[b-f0vdlin30w] {
    margin-top: auto;
    background: #fff;
    color: #5FB246;
    border: 1px solid #5FB246;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ao-btn:hover[b-f0vdlin30w] {
    background: #5FB246;
    color: #fff;
}

.ao-btn:disabled[b-f0vdlin30w] {
    opacity: .6;
    cursor: not-allowed;
}

.ao-btn-full[b-f0vdlin30w] {
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Sub-vista "Te llamamos" */
.ao-volver[b-f0vdlin30w] {
    background: none;
    border: none;
    color: #5FB246;
    font-weight: 700;
    cursor: pointer;
    padding: 0 0 12px;
}

.ao-llamada-head[b-f0vdlin30w] {
    font-size: 1.1rem;
}

.ao-llamada-fields[b-f0vdlin30w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}

.ao-input[b-f0vdlin30w] {
    padding: 10px 12px;
    border: 1px solid #CCC;
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.ao-input:focus[b-f0vdlin30w] {
    outline: none;
    border-color: #5FB246;
}

.ao-ok[b-f0vdlin30w] {
    color: #5FB246;
    font-weight: 700;
}

.ao-error[b-f0vdlin30w] {
    color: #d33;
    font-size: .9rem;
    margin: 0;
}

.ao-spinner[b-f0vdlin30w] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ao-spin-b-f0vdlin30w .8s linear infinite;
}

@keyframes ao-spin-b-f0vdlin30w {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .ao-grid[b-f0vdlin30w] {
        grid-template-columns: 1fr;
    }

    .ao-grid .ao-item:nth-child(2)[b-f0vdlin30w] {
        border-top: 1px solid #F0F0F0;
        padding-top: 16px;
    }

    .ao-card[b-f0vdlin30w] {
        padding: 20px;
    }

    .ao-contacts[b-f0vdlin30w] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
}
/* /Components/Shared/PopupBloqueoZona.razor.rz.scp.css */
/* ============================================================
   PopupBloqueoZona — modal multi-opción "artículo bloqueado por zona".
   Usa los tokens del sistema (variables.css) y los patrones del checkout
   (botones boton-1/boton-2, radios custom) para encajar con el estilo del sitio.
   ============================================================ */

.pbz-overlay[b-p1o7j37lkt] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pbz-fade-in-b-p1o7j37lkt 0.2s ease;
}

@keyframes pbz-fade-in-b-p1o7j37lkt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pbz-modal[b-p1o7j37lkt] {
    position: relative;
    background: var(--blanco);
    border-radius: 12px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px 40px 36px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pbz-slide-up-b-p1o7j37lkt 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Nunito Sans", Helvetica, sans-serif;
}

@keyframes pbz-slide-up-b-p1o7j37lkt {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pbz-close[b-p1o7j37lkt] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pbz-close:hover[b-p1o7j37lkt] { background: var(--grisgris-10); }
.pbz-close svg path[b-p1o7j37lkt] { transition: stroke 0.15s ease; }
.pbz-close:hover svg path[b-p1o7j37lkt] { stroke: var(--primario); }

.pbz-body[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
}

.pbz-title[b-p1o7j37lkt] {
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: var(--black-fonts-headings);
    margin: 0;
    text-align: center;
}

.pbz-message[b-p1o7j37lkt] {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--negro);
    text-align: center;
    margin: 0;
}

/* ---- Lista de artículos bloqueados ---- */
.pbz-articulos[b-p1o7j37lkt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.pbz-articulo[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--grisgris-10);
    border-radius: 8px;
    padding: 12px 16px;
}

.pbz-ref[b-p1o7j37lkt] {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--negro);
}

.pbz-accion[b-p1o7j37lkt] {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
}

.pbz-accion--sustituir[b-p1o7j37lkt] { color: var(--primaryprimary-60); }
.pbz-accion--eliminar[b-p1o7j37lkt] { color: var(--ofertaoferta-60); }

/* ---- Sub-vista: cambiar dirección ---- */
.pbz-direcciones[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.pbz-direccion[b-p1o7j37lkt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--grisgris-30);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pbz-direccion:hover[b-p1o7j37lkt] { border-color: var(--primario); }
.pbz-direccion.selected[b-p1o7j37lkt] { border-color: var(--primario); background: var(--primaryprimary-10); }

/* Radio custom, mismo criterio que el checkout (appearance:none, verde al marcar) */
.pbz-direccion input[type="radio"][b-p1o7j37lkt] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    border: 1px solid var(--negro);
    border-radius: 50%;
    background: var(--blanco);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pbz-direccion input[type="radio"]:checked[b-p1o7j37lkt] {
    border-color: var(--primario);
    background: var(--primario);
    box-shadow: inset 0 0 0 3px var(--blanco);
}

.pbz-direccion-texto[b-p1o7j37lkt] {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--negro);
    overflow-wrap: break-word;
    min-width: 0;
}

/* ---- Botones (mismo estilo que boton-1/boton-2 del checkout) ---- */
.pbz-actions[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.pbz-btn[b-p1o7j37lkt] {
    width: 100%;
    height: 52px;
    border-radius: 6px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}

/* Primario = boton-2 (verde sólido) */
.pbz-btn-primary[b-p1o7j37lkt] {
    background-color: var(--primario);
    border: 1px solid var(--primario);
    color: var(--blanco);
}

.pbz-btn-primary:hover[b-p1o7j37lkt] {
    background-color: var(--primaryprimary-40);
    border-color: var(--primaryprimary-40);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.pbz-btn-primary:active[b-p1o7j37lkt] { background-color: var(--primaryprimary-60); border-color: var(--primaryprimary-60); }

.pbz-btn-primary:disabled[b-p1o7j37lkt],
.pbz-btn-primary:disabled:hover[b-p1o7j37lkt] {
    background-color: var(--grisgris-30);
    border-color: var(--grisgris-30);
    color: var(--grisgris-50);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Secundario = boton-1 (blanco, borde verde; hover relleno verde) */
.pbz-btn-secondary[b-p1o7j37lkt] {
    background: var(--blanco);
    border: 1px solid var(--primario);
    color: var(--primario);
}

.pbz-btn-secondary:hover[b-p1o7j37lkt] {
    background: var(--primario);
    color: var(--blanco);
}

/* Cancelar/Volver = neutro (mismo criterio que PopupConfirmar) */
.pbz-btn-cancel[b-p1o7j37lkt] {
    background: var(--blanco);
    border: 1px solid var(--grisgris-30);
    color: var(--black-fonts-headings);
}

.pbz-btn-cancel:hover[b-p1o7j37lkt] { background: var(--grisgris-10); border-color: var(--grisgris-50); }

@media (max-width: 480px) {
    .pbz-modal[b-p1o7j37lkt] { padding: 26px 22px 30px 22px; }
    .pbz-title[b-p1o7j37lkt] { font-size: 20px; }
    .pbz-message[b-p1o7j37lkt] { font-size: 15px; line-height: 22px; }
}
/* /Components/Shared/PopupCompletarAlta.razor.rz.scp.css */
/* CSS for PopupCompletarAlta component */
/* ============================================================
   PopupCompletarAlta — la página de alta (modo «completar») dentro de una ventana, con la
   estética común de los popups (overlay oscuro + modal blanco redondeado + X).
   Por encima de PopupLoginPrecios (10000), que también la abre.
   ============================================================ */

.pca-overlay[b-dkm4sr5dfj] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.pca-modal[b-dkm4sr5dfj] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 640px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px 30px 34px 30px;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.pca-close[b-dkm4sr5dfj] {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pca-close:hover[b-dkm4sr5dfj] {
    background: #F5F5F5;
}

/* Móvil: menos margen dentro de la ventana, que el formulario va a dos columnas. */
@media (max-width: 480px) {
    .pca-overlay[b-dkm4sr5dfj] {
        padding: 10px;
    }

    .pca-modal[b-dkm4sr5dfj] {
        max-height: calc(100vh - 20px);
        padding: 22px 16px 24px 16px;
    }

    .pca-close[b-dkm4sr5dfj] {
        top: 14px;
        right: 10px;
    }
}
/* /Components/Shared/PopupConfirmar.razor.rz.scp.css */
/* ============================================================
   PopupConfirmar — confirmación sí/no con la estética común de los popups
   de la web (overlay oscuro + modal blanco redondeado, igual que PopupOlvidoContrasena).
   ============================================================ */

.pc-overlay[b-oa0i6755yh] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pc-fade-in-b-oa0i6755yh 0.2s ease;
}

@keyframes pc-fade-in-b-oa0i6755yh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pc-modal[b-oa0i6755yh] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 30px 40px 40px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pc-slide-up-b-oa0i6755yh 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pc-slide-up-b-oa0i6755yh {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-close[b-oa0i6755yh] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pc-close:hover[b-oa0i6755yh] {
    background: #F5F5F5;
}

.pc-close svg path[b-oa0i6755yh] {
    transition: stroke 0.15s ease;
}

.pc-close:hover svg path[b-oa0i6755yh] {
    stroke: #3CAA36;
}

.pc-body[b-oa0i6755yh] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 28px;
}

.pc-title[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
}

.pc-message[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

.pc-actions[b-oa0i6755yh] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.pc-btn[b-oa0i6755yh] {
    flex: 1;
    height: 52px;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pc-btn-cancel[b-oa0i6755yh] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #2D2E2E;
}

.pc-btn-cancel:hover[b-oa0i6755yh] {
    background: #F5F5F5;
    border-color: #9E9E9E;
}

.pc-btn-confirm[b-oa0i6755yh] {
    background-color: #3CAA36;
    border: none;
    color: #FFFFFF;
}

.pc-btn-confirm:hover[b-oa0i6755yh] {
    background-color: #80C87C;
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pc-btn-confirm:active[b-oa0i6755yh] {
    background-color: #246F20;
}

/* Variante peligro (eliminar y otras acciones destructivas): botón confirmar en rojo */
.pc-modal--peligro .pc-btn-confirm[b-oa0i6755yh] {
    background-color: #DE3730;
}

.pc-modal--peligro .pc-btn-confirm:hover[b-oa0i6755yh] {
    background-color: #E8645E;
}

.pc-modal--peligro .pc-btn-confirm:active[b-oa0i6755yh] {
    background-color: #B91C1C;
}

/* ---- Modo "escribe para confirmar" (type-to-confirm) ---- */
.pc-confirmacion[b-oa0i6755yh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.pc-confirmacion-label[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #555555;
    text-align: center;
    margin: 0;
}

/* Valor a teclear, resaltado para que se vea sin cerrar el popup */
.pc-confirmacion-valor[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #2D2E2E;
    text-align: center;
    letter-spacing: 1px;
    background: #F5F5F5;
    border-radius: 6px;
    padding: 8px 12px;
    user-select: all;
}

.pc-confirmacion-input[b-oa0i6755yh] {
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #212121;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-confirmacion-input:focus[b-oa0i6755yh] {
    outline: none;
    border-color: #3CAA36;
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

.pc-modal--peligro .pc-confirmacion-input:focus[b-oa0i6755yh] {
    border-color: #DE3730;
    box-shadow: 0 0 0 3px rgba(222, 55, 48, 0.15);
}

/* Botón confirmar deshabilitado hasta que el texto coincida */
.pc-btn-confirm:disabled[b-oa0i6755yh],
.pc-btn-confirm:disabled:hover[b-oa0i6755yh],
.pc-modal--peligro .pc-btn-confirm:disabled[b-oa0i6755yh],
.pc-modal--peligro .pc-btn-confirm:disabled:hover[b-oa0i6755yh] {
    background-color: #E0E0E0;
    color: #9E9E9E;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 480px) {
    .pc-modal[b-oa0i6755yh] {
        padding: 26px 22px 30px 22px;
    }

    .pc-message[b-oa0i6755yh] {
        font-size: 16px;
        line-height: 24px;
    }

    .pc-actions[b-oa0i6755yh] {
        flex-direction: column-reverse;
    }
}
/* /Components/Shared/PopupLogin.razor.rz.scp.css */
/* ============================================================
   PopupConfirmar — confirmación sí/no con la estética común de los popups
   de la web (overlay oscuro + modal blanco redondeado, igual que PopupOlvidoContrasena).
   ============================================================ */

.pc-overlay[b-y1v1cp9l54] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pc-fade-in-b-y1v1cp9l54 0.2s ease;
}

@keyframes pc-fade-in-b-y1v1cp9l54 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pc-modal[b-y1v1cp9l54] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 30px 40px 40px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pc-slide-up-b-y1v1cp9l54 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pc-slide-up-b-y1v1cp9l54 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-close[b-y1v1cp9l54] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pc-close:hover[b-y1v1cp9l54] {
    background: #F5F5F5;
}

.pc-close svg path[b-y1v1cp9l54] {
    transition: stroke 0.15s ease;
}

.pc-close:hover svg path[b-y1v1cp9l54] {
    stroke: #3CAA36;
}

.pc-body[b-y1v1cp9l54] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 28px;
}

.pc-title[b-y1v1cp9l54] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
}

.pc-message[b-y1v1cp9l54] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

.pc-actions[b-y1v1cp9l54] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.pc-btn[b-y1v1cp9l54] {
    flex: 1;
    height: 52px;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pc-btn-cancel[b-y1v1cp9l54] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #2D2E2E;
}

.pc-btn-cancel:hover[b-y1v1cp9l54] {
    background: #F5F5F5;
    border-color: #9E9E9E;
}

.pc-btn-confirm[b-y1v1cp9l54] {
    background-color: #3CAA36;
    border: none;
    color: #FFFFFF;
}

.pc-btn-confirm:hover[b-y1v1cp9l54] {
    background-color: #80C87C;
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pc-btn-confirm:active[b-y1v1cp9l54] {
    background-color: #246F20;
}

/* Variante peligro (eliminar y otras acciones destructivas): botón confirmar en rojo */
.pc-modal--peligro .pc-btn-confirm[b-y1v1cp9l54] {
    background-color: #DE3730;
}

.pc-modal--peligro .pc-btn-confirm:hover[b-y1v1cp9l54] {
    background-color: #E8645E;
}

.pc-modal--peligro .pc-btn-confirm:active[b-y1v1cp9l54] {
    background-color: #B91C1C;
}

/* ---- Modo "escribe para confirmar" (type-to-confirm) ---- */
.pc-confirmacion[b-y1v1cp9l54] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.pc-confirmacion-label[b-y1v1cp9l54] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #555555;
    text-align: center;
    margin: 0;
}

/* Valor a teclear, resaltado para que se vea sin cerrar el popup */
.pc-confirmacion-valor[b-y1v1cp9l54] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #2D2E2E;
    text-align: center;
    letter-spacing: 1px;
    background: #F5F5F5;
    border-radius: 6px;
    padding: 8px 12px;
    user-select: all;
}

.pc-confirmacion-input[b-y1v1cp9l54] {
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #212121;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-confirmacion-input:focus[b-y1v1cp9l54] {
    outline: none;
    border-color: #3CAA36;
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

.pc-modal--peligro .pc-confirmacion-input:focus[b-y1v1cp9l54] {
    border-color: #DE3730;
    box-shadow: 0 0 0 3px rgba(222, 55, 48, 0.15);
}

/* Botón confirmar deshabilitado hasta que el texto coincida */
.pc-btn-confirm:disabled[b-y1v1cp9l54],
.pc-btn-confirm:disabled:hover[b-y1v1cp9l54],
.pc-modal--peligro .pc-btn-confirm:disabled[b-y1v1cp9l54],
.pc-modal--peligro .pc-btn-confirm:disabled:hover[b-y1v1cp9l54] {
    background-color: #E0E0E0;
    color: #9E9E9E;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 480px) {
    .pc-modal[b-y1v1cp9l54] {
        padding: 26px 22px 30px 22px;
    }

    .pc-message[b-y1v1cp9l54] {
        font-size: 16px;
        line-height: 24px;
    }

    .pc-actions[b-y1v1cp9l54] {
        flex-direction: column-reverse;
    }
}
/* /Components/Shared/PopupLoginPrecios.razor.rz.scp.css */
/* ============================================
   PopupLoginPrecios — Figma node 3122:6694
   "PopUp login mobles"
   Pixel-perfect implementation
   ============================================ */

/* ── Overlay ── */
.popup-overlay[b-twgvrlfthc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: popupFadeIn-b-twgvrlfthc 0.2s ease;
}

/* ── Modal container ──
   Figma: 510px wide, bg white, rounded 15px, padding 50px,
   gap 10px between children, shadow 0px 4px 4px rgba(0,0,0,0.25),
   overflow clip */
.popup-login-precios[b-twgvrlfthc] {
    background: #FFFFFF;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 510px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    animation: popupSlideUp-b-twgvrlfthc 0.3s ease;
    position: relative;
}

/* ── Close button row ──
   Figma: flex, items-start, justify-end, full width */
.popup-close-row[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

/* ── Close button ──
   Figma: 24×24, icon X, color #2D2E2E */
.popup-close-btn[b-twgvrlfthc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.popup-close-btn:hover[b-twgvrlfthc] {
    opacity: 0.6;
}

.popup-close-btn svg[b-twgvrlfthc] {
    display: block;
}

/* ── Content wrapper ──
   Figma: flex, items-start, justify-center, full width */
.popup-login-content[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* ── Inner container ──
   Figma: 410px wide, flex column, gap 24px */
.popup-login-inner[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 410px;
    max-width: 100%;
    align-items: center;
}

/* ── Header row ──
   Figma: flex, space-between, full width, items-start */
.popup-login-header[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

/* ── Login titles block ──
   Figma: flex column, gap 10px */
.popup-login-titles[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* ── Login title ──
   Figma: Nunito Sans Regular 32px/40px, color #2D2E2E */
.popup-login-title[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* ── Subtitle ──
   Figma: Nunito Sans Regular 16px/24px, letter-spacing 0.5px, color #000000, text-center */
.popup-login-subtitle[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #000000;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ── PMC logo ──
   Figma: 100×40.078px, flex-shrink 0 */
.popup-login-logo[b-twgvrlfthc] {
    width: 100px;
    height: 40px;
    flex-shrink: 0;
}

.popup-login-logo img[b-twgvrlfthc] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Input field wrapper ──
   Figma: full width */
.popup-login-field[b-twgvrlfthc] {
    width: 100%;
    position: relative;
}

/* Ojito para ver la contraseña (solo el campo password lleva padding extra) */
.popup-input--pwd[b-twgvrlfthc] {
    padding-right: 48px;
}

.popup-eye-btn[b-twgvrlfthc] {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.popup-eye-btn:hover[b-twgvrlfthc] {
    opacity: 1;
}

/* ── Input ──
   Figma: bg #F5F5F5, rounded 6px, px 16px py 17px,
   Nunito Sans Light 18px, color #212121, placeholder #9E9E9E */
.popup-input[b-twgvrlfthc] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.popup-input[b-twgvrlfthc]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
}

.popup-input:focus[b-twgvrlfthc] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

.popup-input:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Remember me ──
   Figma: flex, gap 12px, items-center, full width */
.popup-login-remember[b-twgvrlfthc] {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Hide native checkbox */
.popup-remember-hidden[b-twgvrlfthc] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Check icon ──
   Figma: 19×19px, flex-shrink 0 */
.popup-remember-check[b-twgvrlfthc] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-remember-check svg[b-twgvrlfthc] {
    display: block;
}

/* ── Remember me label ──
   Figma: Nunito Sans Regular 16px, color #323332 */
.popup-login-remember span:not(.popup-remember-check)[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #323332;
}

/* ── Actions section ──
   Figma: flex column, gap 24px, items-start, justify-center, full width */
.popup-login-actions[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* ── Button row ──
   Figma: flex, gap 16px, full width */
.popup-login-buttons[b-twgvrlfthc] {
    display: flex;
    gap: 16px;
    width: 100%;
}

/* ── Login button (filled) ──
   Figma: flex 1, bg #3CAA36, h 38px, rounded 6px,
   px 24px py 7px, Nunito Sans SemiBold 16px/24px, white,
   letter-spacing 0.15px, overflow clip */
.popup-btn-login-filled[b-twgvrlfthc] {
    flex: 1;
    min-width: 0;
    height: 38px;
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 7px 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-btn-login-filled:hover:not(:disabled)[b-twgvrlfthc] {
    background-color: #2D8C2B;
}

.popup-btn-login-filled:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Create account button (outlined) ──
   Figma: flex 1, bg white, border 1px #3CAA36, rounded 6px,
   same font/sizing as filled button, text color #3CAA36 */
.popup-btn-login-outlined[b-twgvrlfthc] {
    flex: 1;
    min-width: 0;
    height: 38px;
    background-color: #FFFFFF;
    color: #3CAA36;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 7px 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-btn-login-outlined:hover:not(:disabled)[b-twgvrlfthc] {
    background-color: #EBF6EB;
}

.popup-btn-login-outlined:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Forgot password ──
   Figma: Nunito Sans Regular 16px, color #2D2E2E,
   text-center, full width */
.popup-forgot-password[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #2D2E2E;
    text-align: center;
    width: 100%;
    margin: 0;
    cursor: pointer;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: center 100%;
    background-repeat: no-repeat;
    transition: color 0.2s ease, background-size 0.3s ease-in-out;
}

.popup-forgot-password:hover[b-twgvrlfthc] {
    color: #3CAA36;
    text-decoration: none;
    background-size: 100% 2px;
}

/* ── Error message ── */
.popup-error[b-twgvrlfthc] {
    color: #D32F2F;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    padding: 8px 12px;
    background: #FFEBEE;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    animation: popupShake-b-twgvrlfthc 0.4s ease;
}

/* ── Loading spinner ── */
.popup-spinner[b-twgvrlfthc] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: popupSpin-b-twgvrlfthc 0.6s linear infinite;
}

/* ── Animations ── */
@keyframes popupFadeIn-b-twgvrlfthc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupSlideUp-b-twgvrlfthc {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes popupSpin-b-twgvrlfthc {
    to { transform: rotate(360deg); }
}

@keyframes popupShake-b-twgvrlfthc {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── Responsive ──
   Below 550px: reduce padding, full-width inner, stack buttons vertically */
@media (max-width: 550px) {
    .popup-login-precios[b-twgvrlfthc] {
        padding: 32px 24px;
        width: calc(100vw - 32px);
    }

    .popup-login-inner[b-twgvrlfthc] {
        width: 100%;
    }

    .popup-login-title[b-twgvrlfthc] {
        font-size: 26px;
        line-height: 34px;
    }

    .popup-login-subtitle[b-twgvrlfthc] {
        font-size: 14px;
        line-height: 20px;
    }

    .popup-login-logo[b-twgvrlfthc] {
        width: 80px;
        height: 32px;
    }

    .popup-input[b-twgvrlfthc] {
        font-size: 16px;
        padding: 14px 14px;
    }

    .popup-input[b-twgvrlfthc]::placeholder {
        font-size: 16px;
    }

    .popup-login-buttons[b-twgvrlfthc] {
        flex-direction: column;
    }

    .popup-btn-login-filled[b-twgvrlfthc],
    .popup-btn-login-outlined[b-twgvrlfthc] {
        width: 100%;
    }
}
/* /Components/Shared/PopupMasInformacion.razor.rz.scp.css */
/* ============================================
   PopupMasInformacion — modal compacto y centrado,
   coherente con los popups de login (PopupOlvidoContrasena / PopupConfirmar).
   ============================================ */

/* Overlay oscuro */
.popup-overlay[b-1bzl0dbmno] {
    position: fixed;
    inset: 0;
    background: rgba(33, 33, 33, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 16px;
    animation: fadeIn-b-1bzl0dbmno 0.2s ease;
}

/* Modal — compacto (mismo lenguaje que el popup de login) */
.popup-mas-informacion[b-1bzl0dbmno] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 460px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: slideUp-b-1bzl0dbmno 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Botón cerrar — esquina superior derecha (como .poc-close del login) */
.popup-close-row[b-1bzl0dbmno] {
    position: absolute;
    top: 16px;
    right: 16px;
}

.popup-close-btn[b-1bzl0dbmno] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.popup-close-btn:hover[b-1bzl0dbmno] {
    background: #F5F5F5;
}

.popup-close-btn svg path[b-1bzl0dbmno] {
    transition: stroke 0.15s ease;
}

.popup-close-btn:hover svg path[b-1bzl0dbmno] {
    stroke: #3CAA36;
}

/* Cabecera (título + texto) */
.popup-content[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-text-block[b-1bzl0dbmno] {
    display: block;
}

.popup-title[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #2D2E2E;
    margin: 0;
}

.popup-subtitle[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #6B7280;
    margin: 6px 0 0 0;
}

/* Formulario — el <form> de EditForm NO recibe el atributo de CSS aislada (b-xxx),
   así que el espaciado entre campos se aplica en este wrapper propio, que sí está scoped. */
.popup-fields[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-form-row[b-1bzl0dbmno] {
    display: flex;
    gap: 12px;
}

.popup-form-col[b-1bzl0dbmno] {
    flex: 1;
    min-width: 0;
}

/* Inputs — mismo estilo que el popup de login (#F5F5F5, radius 6px, foco verde) */
.popup-input[b-1bzl0dbmno] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.popup-input[b-1bzl0dbmno]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.popup-input:focus[b-1bzl0dbmno] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

.popup-textarea[b-1bzl0dbmno] {
    resize: vertical;
    min-height: 96px;
}

/* Aceptación de privacidad */
.popup-policies[b-1bzl0dbmno] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #323332;
    cursor: pointer;
}

.popup-policies input[type="checkbox"][b-1bzl0dbmno] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #3CAA36;
    cursor: pointer;
}

/* Botón ENVIAR — verde, ancho completo (como .poc-btn-confirm) */
.popup-btn-enviar[b-1bzl0dbmno] {
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    height: 52px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.popup-btn-enviar:hover[b-1bzl0dbmno] {
    background-color: #80C87C;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.popup-btn-enviar:active[b-1bzl0dbmno] {
    background-color: #246F20;
    transform: none;
}

.popup-btn-enviar:disabled[b-1bzl0dbmno] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Estado de éxito */
.popup-success[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
    text-align: center;
}

.popup-success h3[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #2D2E2E;
    margin: 0;
}

.popup-success p[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #6B7280;
    margin: 0;
}

/* Spinner del botón */
.spinner-small[b-1bzl0dbmno] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-1bzl0dbmno 0.8s linear infinite;
}

/* Animaciones */
@keyframes fadeIn-b-1bzl0dbmno {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-1bzl0dbmno {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin-b-1bzl0dbmno {
    to { transform: rotate(360deg); }
}

/* Responsive — móvil: una sola columna */
@media (max-width: 520px) {
    .popup-mas-informacion[b-1bzl0dbmno] {
        padding: 32px 20px;
        gap: 20px;
    }

    .popup-title[b-1bzl0dbmno] {
        font-size: 20px;
        line-height: 28px;
    }

    .popup-form-row[b-1bzl0dbmno] {
        flex-direction: column;
        gap: 14px;
    }
}
/* /Components/Shared/PopupMensaje.razor.rz.scp.css */
/* ============================================================
   PopupMensaje — aviso/error del checkout con la MISMA estética que
   PopupConfirmar (overlay oscuro + modal blanco redondeado + X). Un solo
   botón "Aceptar". El mensaje admite HTML (p, a). Sin línea superior ni icono.
   ============================================================ */

.pm-overlay[b-oqn3llhw9v] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pm-fade-in-b-oqn3llhw9v 0.2s ease;
}

@keyframes pm-fade-in-b-oqn3llhw9v {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pm-modal[b-oqn3llhw9v] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 30px 40px 40px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pm-slide-up-b-oqn3llhw9v 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pm-slide-up-b-oqn3llhw9v {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-close[b-oqn3llhw9v] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pm-close:hover[b-oqn3llhw9v] { background: #F5F5F5; }
.pm-close svg path[b-oqn3llhw9v] { transition: stroke 0.15s ease; }
.pm-close:hover svg path[b-oqn3llhw9v] { stroke: #3CAA36; }

.pm-body[b-oqn3llhw9v] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 28px;
}

.pm-title[b-oqn3llhw9v] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
}

.pm-message[b-oqn3llhw9v] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

/* El mensaje admite HTML desde MapErrores (<p>, <a> mailto, etc.) */
.pm-message[b-oqn3llhw9v]  p { margin: 0 0 8px 0; }
.pm-message[b-oqn3llhw9v]  p:last-child { margin-bottom: 0; }
.pm-message[b-oqn3llhw9v]  a {
    color: #3CAA36;
    text-decoration: underline;
}
.pm-message[b-oqn3llhw9v]  a:hover { color: #246F20; }

.pm-btn[b-oqn3llhw9v] {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: none;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    background-color: #3CAA36;
    color: #FFFFFF;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pm-btn:hover[b-oqn3llhw9v] {
    background-color: #80C87C;
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pm-btn:active[b-oqn3llhw9v] {
    background-color: #246F20;
}

@media (max-width: 480px) {
    .pm-modal[b-oqn3llhw9v] {
        padding: 26px 22px 30px 22px;
    }

    .pm-message[b-oqn3llhw9v] {
        font-size: 16px;
        line-height: 24px;
    }
}
/* /Components/Shared/PopupModificacionDatos.razor.rz.scp.css */
.pmd-overlay[b-d6jpf1rrsw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 16px;
}

.pmd-card[b-d6jpf1rrsw] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    max-height: 90vh;
    overflow-y: auto;
}

.pmd-close-row[b-d6jpf1rrsw] {
    display: flex;
    justify-content: flex-end;
}

.pmd-close-btn[b-d6jpf1rrsw] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.pmd-title[b-d6jpf1rrsw] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2D2E2E;
    margin: 0 0 8px;
}

.pmd-subtitle[b-d6jpf1rrsw] {
    color: #555;
    margin: 0 0 16px;
    font-size: .95rem;
}

.pmd-fields[b-d6jpf1rrsw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmd-row[b-d6jpf1rrsw] {
    display: flex;
    gap: 12px;
}

.pmd-row .pmd-input[b-d6jpf1rrsw] {
    flex: 1;
    min-width: 0;
}

.pmd-input[b-d6jpf1rrsw] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #CCC;
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.pmd-input:focus[b-d6jpf1rrsw] {
    outline: none;
    border-color: #5FB246;
}

.pmd-textarea[b-d6jpf1rrsw] {
    resize: vertical;
    min-height: 72px;
}

.pmd-btn[b-d6jpf1rrsw] {
    background: #5FB246;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pmd-btn:disabled[b-d6jpf1rrsw] {
    opacity: .6;
    cursor: not-allowed;
}

.pmd-spinner[b-d6jpf1rrsw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pmd-spin-b-d6jpf1rrsw .8s linear infinite;
}

@keyframes pmd-spin-b-d6jpf1rrsw {
    to {
        transform: rotate(360deg);
    }
}

.pmd-error[b-d6jpf1rrsw] {
    color: #d33;
    font-size: .9rem;
    margin: 0;
}

.pmd-success[b-d6jpf1rrsw] {
    text-align: center;
    padding: 16px 0;
}

.pmd-success h3[b-d6jpf1rrsw] {
    color: #5FB246;
    margin: 0 0 8px;
}

@media (max-width: 480px) {
    .pmd-row[b-d6jpf1rrsw] {
        flex-direction: column;
    }
}
/* /Components/Shared/PopupOlvidoContrasena.razor.rz.scp.css */
/* ============================================================
   PopupOlvidoContrasena — Diseño fiel a Figma 84:1393
   ============================================================ */

/* Overlay oscuro */
.poc-overlay[b-wngy269cmb] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: poc-fade-in-b-wngy269cmb 0.2s ease;
}

@keyframes poc-fade-in-b-wngy269cmb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal — 393px ancho, bordes redondeados, fondo blanco */
.poc-modal[b-wngy269cmb] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 393px;
    max-width: calc(100vw - 32px);
    /* Figma: content empieza en top:64px, padding horizontal 54px */
    padding: 30px 54px 54px 54px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: poc-slide-up-b-wngy269cmb 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes poc-slide-up-b-wngy269cmb {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Botón cerrar — Figma: top:30px, right:30px */
.poc-close[b-wngy269cmb] {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.poc-close:hover[b-wngy269cmb] {
    background: #F5F5F5;
}

.poc-close svg path[b-wngy269cmb] {
    transition: stroke 0.15s ease;
}

.poc-close:hover svg path[b-wngy269cmb] {
    stroke: #3CAA36;
}

/* Cuerpo: contenido + botón
   margin-top: 34px → total desde top del modal: 30px padding + 34px = 64px (Figma) */
.poc-body[b-wngy269cmb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    margin-top: 34px;
}

/* Título de la fase 1 */
.poc-title[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

/* Input de email — hereda .popup-input pero lo sobreescribimos
   para adaptarlo al tamaño de este modal más estrecho */
.poc-email-input[b-wngy269cmb] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

.poc-email-input[b-wngy269cmb]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
}

.poc-email-input:focus[b-wngy269cmb] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* Texto de confirmación — Figma: Nunito Sans Regular 24px / 32px */
.poc-message[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
    animation: poc-fade-in-b-wngy269cmb 0.25s ease;
}

/* Botón confirmar — Figma: #3CAA36, height 54px, border-radius 6px */
.poc-btn-confirm[b-wngy269cmb] {
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    height: 54px;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .poc-btn-confirm:hover[b-wngy269cmb] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

.poc-btn-confirm:active[b-wngy269cmb] {
    background-color: #246f20;
}

.poc-btn-confirm:disabled[b-wngy269cmb] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Error message */
.poc-error[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #b91c1c;
    margin: -24px 0 0 0;
    text-align: center;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

/* Input error state */
.input-error[b-wngy269cmb] {
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.3) !important;
}

/* /Components/Shared/Prefooter.razor.rz.scp.css */
/* ============================================= */
/* PREFOOTER COMPONENT                           */
/* Figma node: 3627:35660                        */
/* Responsive: clamp() fluid + breakpoints       */
/* ============================================= */

.prefooter-section[b-hmsy47mmx9] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --prefooter-py: clamp(25px, 2.6vw, 50px);
    --prefooter-item-h: clamp(45px, 3.65vw, 70px);
    --prefooter-font: clamp(14px, 1.15vw, 22px);
    --prefooter-icon-size: clamp(16px, 1.25vw, 24px);
    --prefooter-gap: clamp(6px, 0.52vw, 10px);
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--prefooter-py) var(--padding-lateral);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.prefooter-grid[b-hmsy47mmx9] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.prefooter-row[b-hmsy47mmx9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.prefooter-item[b-hmsy47mmx9] {
    display: flex;
    flex: 1 0 0;
    gap: var(--prefooter-gap);
    height: var(--prefooter-item-h);
    align-items: center;
    justify-content: center;
    padding: 0 clamp(6px, 0.52vw, 10px);
    border-left: 1px dashed var(--gris-30);
    box-sizing: border-box;
}

.prefooter-icon[b-hmsy47mmx9] {
    width: var(--prefooter-icon-size);
    height: var(--prefooter-icon-size);
    flex-shrink: 0;
}

.prefooter-text[b-hmsy47mmx9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--prefooter-font);
    line-height: clamp(18px, 1.46vw, 28px);
    color: var(--gris-50);
    text-align: center;
    white-space: nowrap;
}

/* ============================================= */
/* TABLET                                        */
/* ============================================= */
@media (max-width: 1024px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 30px;
    }

    .prefooter-row[b-hmsy47mmx9] {
        flex-wrap: wrap;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 calc(33.333% - 1px);
        min-width: 0;
    }
}

/* ============================================= */
/* MÓVIL                                         */
/* ============================================= */
@media (max-width: 768px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 16px;
        --prefooter-py: 30px;
    }

    .prefooter-grid[b-hmsy47mmx9] {
        gap: 0;
    }

    .prefooter-row[b-hmsy47mmx9] {
        flex-wrap: wrap;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 50%;
        max-width: 50%;
        height: 55px;
    }
}

/* ============================================= */
/* MÓVIL PEQUEÑO                                 */
/* ============================================= */
@media (max-width: 480px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 12px;
        --prefooter-py: 24px;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 50%;
        max-width: 50%;
        height: 50px;
        gap: 6px;
    }

    .prefooter-text[b-hmsy47mmx9] {
        font-size: 13px;
    }
}
/* /Components/Shared/ProductBadge.razor.rz.scp.css */
/* =================================================================
   ProductBadge — 1:1 con Figma "Grupo" (Web-PMC-Productos)
   Pill: padding 2px 7px, radius 2px, sombra 0 1px 3px rgba(0,0,0,.2)
   Texto: Nunito Sans Bold 10px (9px en pantallas pequeñas)
   ================================================================= */

.grupo[b-393qz2ddaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.badge-text[b-393qz2ddaz] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(9px, 0.52vw, 10px);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: inherit;
    white-space: nowrap;
}

/* ---- Tipos (fondo + color de texto/icono) ---- */
.grupo-nuevo[b-393qz2ddaz]      { background-color: #FFFFFF; color: #121212; }
.grupo-regalo[b-393qz2ddaz]     { background-color: #52B0AD; color: #FFFFFF; }
.grupo-reembolso[b-393qz2ddaz]  { background-color: #FDD623; color: #141414; }
.grupo-porcentaje[b-393qz2ddaz] { background-color: #686AAD; color: #FFFFFF; }
.grupo-oferta[b-393qz2ddaz]     { background-color: #FF5449; color: #FFFFFF; }
.grupo-eco[b-393qz2ddaz]        { background-color: #3CAA36; color: #FFFFFF; }
.grupo-homologado[b-393qz2ddaz] { background-color: #FF9500; color: #FFFFFF; }

/* ---- Variante "peque" ---- */
/* Las peque de letra mantienen el padding normal (Figma 174→475 mismo px).
   Solo regalo-peque cambia: icono centrado con padding 4px. */
.grupo-peque.grupo-regalo[b-393qz2ddaz] {
    padding: clamp(2px, 0.1vw, 2px) 4px;
    justify-content: center;
}

.badge-icon[b-393qz2ddaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 11px;
    color: inherit;
}

.badge-icon svg[b-393qz2ddaz] {
    display: block;
    width: 100%;
    height: 100%;
}
/* /Components/Shared/ProductCard.razor.rz.scp.css */
/* ============================================================
   ProductCard — tarjeta de producto unificada (grid del catálogo + ProductSlider).
   CSS copiado VERBATIM desde Productos.razor.css (la card del grid es la referencia 1:1).
   Las variables de diseño (--producto-img-size, --radius-card, --font-*, --btn-*, colores)
   las aporta el CONTENEDOR: .product-grid (catálogo) o .product-slider-section (slider),
   y cascadean a esta card aunque viva en otro componente.
   ============================================================ */

/* =================================
   CARD DE PRODUCTO
   Figma: fixed 300px width, border-l #e0e0e0, pl 20px, pb 10px, gap 8px
   ================================= */
.card-producto[b-a4zy5fac07] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 10px 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
}

.card-producto[b-a4zy5fac07]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:hover[b-a4zy5fac07]::before {
    background-color: var(--primario);
    width: 2px;
}

.card-producto:hover[b-a4zy5fac07] {
    transform: translateY(-5px);
}

/* Vista solo imágenes */
.card-producto.images-only-card[b-a4zy5fac07] {
    padding: 0 0 0 20px;
    gap: 0;
    flex: 0 0 190px;
    width: 190px;
}

.card-producto.images-only-card .frame-wrapper[b-a4zy5fac07] {
    /* Figma: imagen exactamente 170×170px, border-radius 14px */
    width: 170px;
    height: 170px;
    border-radius: 14px;
}

/* Hide badges in image-only view (Figma shows clean images) */
.card-producto.images-only-card .frame-8[b-a4zy5fac07] {
    display: none;
}

.frame-wrapper[b-a4zy5fac07] {
    /* Figma: 300px × 300px square image, border-radius 14px */
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    flex-shrink: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image-wrapper[b-a4zy5fac07] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-card);
    position: relative;
}

/* =================================
   BADGES FIGMA
   ================================= */
.frame-8[b-a4zy5fac07] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Las badges de producto (descuento, oferta, eco, homologado…) están en el componente
   reutilizable Components/Shared/ProductBadge.razor (CSS aislado). Aquí solo queda el badge
   de stock (.grupo-stock). */

.grupo-stock[b-a4zy5fac07] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-a4zy5fac07] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

/* === REGALO: miniatura del artículo de regalo (esquina inferior derecha, cuadrada — no choca con badges/stock) === */
.card-regalo[b-a4zy5fac07] {
    position: absolute;
    bottom: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    width: clamp(40px, 3.4vw, 52px);
    height: clamp(40px, 3.4vw, 52px);
    background: var(--blanco, #ffffff);
    border: 1.5px solid var(--primario);
    border-radius: 10px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-regalo__img[b-a4zy5fac07] {
    width: 82%;
    height: 82%;
    object-fit: contain;
    border-radius: 6px;
}

.card-regalo__icon[b-a4zy5fac07] {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: clamp(16px, 1.4vw, 20px);
    height: clamp(16px, 1.4vw, 20px);
    padding: 3px;
    background: var(--primario);
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}

/* =================================
   CONTENIDO DE PRODUCTO
   ================================= */
/* Contenido bajo la imagen (Figma node 5835:38330): columna con gap 8px y px 20px,
   con el MISMO ancho que la imagen para que ambos queden alineados. */
.product-content[b-a4zy5fac07] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: var(--producto-img-size);
    box-sizing: border-box;
    padding: 0 clamp(8px, 1.04vw, 20px);
    flex-shrink: 0;
}

/* Fila 1 — precio (izq) + swatches (der). Figma node 5851:38816 */
.price-row[b-a4zy5fac07] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

/* Fila 2 — título (izq, flexible) + botón carrito (der). Figma node 5851:38824 */
.title-row[b-a4zy5fac07] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.04vw, 20px);
    min-width: 0;
    box-sizing: border-box;
}

/* Referencia del producto cuando NO hay variantes de color (Figma node 5867:6065, body/large) */
.product-ref[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #757575;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-wrapper-5[b-a4zy5fac07] {
    /* Figma body/medium: 3 líneas máximo con ellipsis, altura reservada para alinear las cards */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0.25px; /* Figma body/medium */
    line-height: 1.43;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price[b-a4zy5fac07] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-a4zy5fac07] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    min-width: var(--btn-cart-size);
    min-height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .boton:hover[b-a4zy5fac07] {
        background-color: var(--primario);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.boton:hover[b-a4zy5fac07]  .iconos-2 {
    color: var(--blanco);
}

/* ::deep porque el icono lo renderiza el componente hijo <CartIcon> (otro scope) */
.boton[b-a4zy5fac07]  .iconos-2 {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-a4zy5fac07 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-a4zy5fac07] {
    animation: addedToCart-b-a4zy5fac07 0.5s ease;
    background-color: var(--primario);
}

.boton.added[b-a4zy5fac07]  .iconos-2 {
    color: var(--blanco);
}

/* === Botón "Más Información" — Figma node 3086:8274 (Property 1=deliniado)
   Outlined: white bg, border #3CAA36, rounded 6px, px 24px py 10px, h ~53px
   Font: Nunito Sans SemiBold 16px, color #3CAA36, letter-spacing 0.15px === */
.boton-mas-info[b-a4zy5fac07] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-mas-info span[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-mas-info:hover[b-a4zy5fac07] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}

/* === Botón "Consultar precio" — Same outlined style
   For SubFamilia con PrecioNoVisibleSinLogin y usuario no logueado === */
.boton-consultar[b-a4zy5fac07] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-consultar span[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
    transition: color 0.3s ease;
}

/* Hover igual que el botón de carrito (.boton): se rellena de verde,
el texto pasa a blanco y la misma sombra. Sin desplazamiento vertical. */
.boton-consultar:hover[b-a4zy5fac07] {
    background-color: var(--primario);
    box-shadow: 0px 2px 4px 0px #00000040;
}

.boton-consultar:hover span[b-a4zy5fac07] {
    color: var(--blanco);
}

/* =================================
   CONTROL DE CANTIDAD (cuando el producto ya está en el carrito)
   Mismo look que el control del carrito (CartDropdown): fondo gris #F5F5F5, SIN borde,
   botones planos con hover verde, input transparente centrado, radio 8px.
   Altura = la del botón (--btn-cart-size) para no desplazar el layout al alternar.
   El <input> lo renderiza InputNumero (sin scope) → se estiliza con ::deep.
   ================================= */
.card-qty[b-a4zy5fac07] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--btn-cart-size);
    background: #F5F5F5;
    border-radius: 8px;
    padding: 0 clamp(6px, 0.5vw, 10px);
    box-sizing: border-box;
    /* Entrada al pasar del botón de añadir al control de cantidad */
    animation: card-qty-in-b-a4zy5fac07 0.22s ease both;
}

.card-qty-btn[b-a4zy5fac07] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    width: clamp(18px, 1.45vw, 24px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.card-qty-btn:hover:not(:disabled)[b-a4zy5fac07] {
    color: var(--primario);
}

/* Cuando el "−" es papelera (cantidad en el mínimo): hover ROJO para dejar claro que ese clic borra */
.card-qty-btn--remove:hover:not(:disabled)[b-a4zy5fac07] {
    color: var(--oferta-60);
}

.card-qty-btn:disabled[b-a4zy5fac07] {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-a4zy5fac07] .card-qty-input {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-body);
    color: #121212;
    text-align: center;
    width: clamp(24px, 2vw, 36px);
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
}

@keyframes card-qty-in-b-a4zy5fac07 {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* =================================
   RESPONSIVE (mismos breakpoints y valores que el grid)
   ================================= */
@media (max-width: 1400px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 240px;
        width: 240px;
    }
}

@media (max-width: 1100px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 220px;
        width: 220px;
        padding: 0 0 8px 12px;
        gap: 6px;
    }

    .boton[b-a4zy5fac07] {
        border-radius: 5px;
    }
}

@media (max-width: 768px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 180px;
        width: 180px;
        padding: 0 0 6px 10px;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 150px;
        width: 150px;
    }
}

/* images-only grid responsive: escalar imagen y card a la vez */
@media (max-width: 1400px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 130px + pl 20px = 150px */
        flex: 0 0 150px;
        width: 150px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 1100px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 110px + pl 20px = 130px */
        flex: 0 0 130px;
        width: 130px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 90px + pl 12px = 102px */
        flex: 0 0 102px;
        width: 102px;
        padding-left: 12px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 90px;
        height: 90px;
        border-radius: 8px;
    }
}
/* /Components/Shared/ProductSlider.razor.rz.scp.css */
/* ============================================= */
/* PRODUCT SLIDER COMPONENT */
/* ============================================= */
.product-slider-section[b-vmd31682p7] {
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --ad-primario-40: #80C87C;
    /* Tokens de card alineados 1:1 con el grid del catálogo (.product-grid en Productos.razor.css)
       para que ProductCard se vea idéntica en el slider y en el grid. Responsive (mismos breakpoints
       y valores que el grid) al final del archivo. */
    --producto-img-size: 260px;
    --producto-card-padding: 20px;
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-title-md: clamp(14px, 1.25vw, 24px);
    --font-body: 14px;
    --font-price: 17px;
    --font-badge: 9px;
    --radius-card: 14px;
    --btn-cart-size: 56px;
    --btn-icon-size: 21px;
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --oferta-60: #DE3730;
    --primary-10: #EBF6EB;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: var(--blanco);
}

.section-header[b-vmd31682p7] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.section-title[b-vmd31682p7] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
}

.vector-3[b-vmd31682p7] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.slider-container-products[b-vmd31682p7] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.carousel-btn[b-vmd31682p7] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.carousel-btn:hover[b-vmd31682p7] {
    opacity: 0.6;
}

.carousel-btn svg[b-vmd31682p7] {
    width: 100%;
    height: 100%;
}

.carousel-container-products[b-vmd31682p7] {
    flex: 1;
    overflow: hidden;
}

.carousel-track[b-vmd31682p7] {
    display: flex;
    gap: var(--gap-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track[b-vmd31682p7]::-webkit-scrollbar {
    display: none;
}

.no-products-msg[b-vmd31682p7] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    color: var(--gris-50);
    text-align: center;
    padding: clamp(20px, 2.08vw, 40px);
}

/* TABLET */
@media (max-width: 1024px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        padding: 30px var(--padding-lateral) 40px;
    }

    .slider-container-products[b-vmd31682p7] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .carousel-btn[b-vmd31682p7] {
        display: none;
    }

    .carousel-track[b-vmd31682p7] {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 0;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        padding: 24px var(--padding-lateral) 30px;
    }

    .slider-container-products[b-vmd31682p7] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .carousel-track[b-vmd31682p7] {
        padding: 0 var(--padding-lateral);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 12px;
    }

    .slider-container-products[b-vmd31682p7] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }
}

/* ============================================================
   Tamaño de la ProductCard alineado 1:1 con el grid del catálogo
   (mismos breakpoints y valores que .product-grid en Productos.razor.css),
   para que la tarjeta se vea idéntica en el slider y en el grid.
   ============================================================ */
@media (max-width: 1400px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 240px;
        --btn-cart-size: 52px;
        --font-body: 14px;
        --font-price: 17px;
    }
}

@media (max-width: 1100px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 220px;
        --btn-cart-size: 48px;
        --radius-card: 10px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
    }
}

@media (max-width: 768px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 180px;
        --btn-cart-size: 44px;
        --radius-card: 9px;
        --font-body: 12px;
        --font-price: 14px;
    }
}

@media (max-width: 520px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 150px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --radius-card: 8px;
        --font-price: 13px;
    }
}
/* /Components/Shared/ProductSwatches.razor.rz.scp.css */
/* ============================================================
   SWATCHES DE VARIANTES (Figma "Redondas" — node 171:2128)
   Círculos de color 23px, gap 4px, activo con anillo,
   overflow "+N" en Nunito Sans Bold 14px #141718.
   ============================================================ */
.agrupacion-swatches[b-n87mbo3u9g] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-height: 23px;
    /* No desbordar la tarjeta ni pisar la vecina: ocupar solo el espacio disponible y recortar. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Cada swatch (Figma "Redonda", node 171:2018): área de 23px con un punto de color
   de 15px centrado. El borde discontinuo se reserva transparente y aparece (oscuro)
   sólo en el estado seleccionado — así no hay salto de layout. */
.swatch-color[b-n87mbo3u9g] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px dashed transparent;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.swatch-color[b-n87mbo3u9g]::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--swatch-color, #CCCCCC);
    border: 1px solid rgba(0, 0, 0, 0.12); /* borde sutil para que el blanco se distinga */
    box-sizing: border-box;
}

.swatch-color:hover:not(.swatch-active)[b-n87mbo3u9g] {
    border-color: #BDBDBD;
}

/* Seleccionado: anillo discontinuo oscuro alrededor del punto de color. */
.swatch-color.swatch-active[b-n87mbo3u9g] {
    border-color: #141718;
}

/* Variante sin color (talla, medida…): chip de texto. */
.swatch-text[b-n87mbo3u9g] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(10px, 0.73vw, 12px);
    line-height: 1.4;
    color: #757575;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    /* Valores largos ("A5 C5 160 hojas") no deben ensanchar la fila: recortar con elipsis. */
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.swatch-text:hover[b-n87mbo3u9g] {
    border-color: #999999;
    color: #333333;
}

.swatch-text.swatch-active[b-n87mbo3u9g] {
    border-color: #141718;
    color: #141718;
    font-weight: 700;
}

/* Contador de variantes ocultas "+N" — Figma N Body 2 (Nunito Sans Bold 14). */
.swatch-more[b-n87mbo3u9g] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 0.93vw, 14px);
    line-height: 1;
    color: #141718;
    padding: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Shared/SkeletonBrandSlider.razor.rz.scp.css */
/* ==============================================
   SKELETON BRAND SLIDER - Replica exacta del BrandSlider.razor.css
   ============================================== */
.skel-brand-slider-section[b-3oc002wmlq] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --brand-height: clamp(25px, 2.6vw, 50px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: #FFFFFF;
}

/* Section header */
.skel-brand-section-header[b-3oc002wmlq] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.skel-brand-section-title[b-3oc002wmlq] {
    width: clamp(160px, 16vw, 320px);
    height: var(--font-title-xl);
    border-radius: 6px;
}

.skel-brand-vector-3[b-3oc002wmlq] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #E0E0E0;
    border-radius: 0.5px;
}

/* Slider wrapper */
.skel-brands-slider-wrapper[b-3oc002wmlq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.skel-brands-nav-btn[b-3oc002wmlq] {
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skel-brands-nav-btn svg[b-3oc002wmlq] {
    width: 100%;
    height: 100%;
}

.skel-brands-slider-container[b-3oc002wmlq] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.skel-brands-track-infinite[b-3oc002wmlq] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
}

.skel-brand-item[b-3oc002wmlq] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skel-brand-logo[b-3oc002wmlq] {
    width: clamp(60px, 6vw, 120px);
    height: var(--brand-height);
    border-radius: 4px;
}

/* ======== RESPONSIVE — replica exacta del BrandSlider ======== */

@media (max-width: 1024px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --brand-height: 30px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .skel-brands-nav-btn[b-3oc002wmlq] {
        display: none;
    }
}

@media (max-width: 768px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --brand-height: 24px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 12px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}
/* /Components/Shared/SkeletonProductDetail.razor.rz.scp.css */
/* ==============================================
   SKELETON PRODUCT DETAIL — réplica del layout de ArticuloDetalle.razor.css
   (.articulo-detalle-page / .articulo-detalle-row): galería | divisor | info | rail
   ============================================== */
.skel-detail-page[b-yhltkqmxjr] {
    --ad-pad-x: clamp(16px, 6vw, 115px);
    --ad-max-w: 1690px;

    width: 100%;
    margin: 0 auto;
    padding: clamp(12px, 1.5vw, 24px) var(--ad-pad-x);
    box-sizing: border-box;
}

.skel-detail-breadcrumb[b-yhltkqmxjr] {
    width: clamp(180px, 30vw, 420px);
    height: 16px;
    border-radius: 4px;
    margin-bottom: clamp(12px, 1.5vw, 24px);
}

/* Mismo grid que .articulo-detalle-row: gallery | 1px | info | rail */
.skel-detail-row[b-yhltkqmxjr] {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr) minmax(0, 0.46fr);
    gap: clamp(16px, 2.5vw, 44px);
    max-width: var(--ad-max-w);
    margin: 0 auto;
}

.skel-detail-divider[b-yhltkqmxjr] {
    width: 1px;
    align-self: stretch;
    background-color: #E0E0E0;
}

/* Columna galería */
.skel-detail-gallery[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.skel-detail-main-image[b-yhltkqmxjr] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.skel-detail-thumbs[b-yhltkqmxjr] {
    display: flex;
    gap: 12px;
}

.skel-detail-thumb[b-yhltkqmxjr] {
    width: clamp(56px, 5vw, 88px);
    height: clamp(56px, 5vw, 88px);
    border-radius: 8px;
    flex-shrink: 0;
}

/* Columna info */
.skel-detail-info[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.skel-detail-badges[b-yhltkqmxjr] {
    display: flex;
    gap: 8px;
}

.skel-detail-badge[b-yhltkqmxjr] {
    width: 80px;
    height: 26px;
    border-radius: 13px;
}

.skel-detail-ref[b-yhltkqmxjr] {
    width: 120px;
    height: 14px;
    border-radius: 4px;
}

.skel-detail-title[b-yhltkqmxjr] {
    width: 90%;
    height: 40px;
    border-radius: 6px;
}

.skel-detail-desc[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-line[b-yhltkqmxjr] {
    width: 100%;
    height: 14px;
    border-radius: 4px;
}

.skel-line.w-75[b-yhltkqmxjr] { width: 75%; }
.skel-line.w-50[b-yhltkqmxjr] { width: 50%; }
.skel-line.w-25[b-yhltkqmxjr] { width: 25%; }

.skel-detail-price[b-yhltkqmxjr] {
    width: 140px;
    height: 36px;
    border-radius: 6px;
}

.skel-detail-actions[b-yhltkqmxjr] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.skel-detail-qty[b-yhltkqmxjr] {
    width: 120px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}

.skel-detail-cart[b-yhltkqmxjr] {
    flex: 1;
    height: 48px;
    border-radius: 8px;
}

/* Columna rail (especificaciones / documentos) */
.skel-detail-rail[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.skel-rail-header[b-yhltkqmxjr] {
    width: 70%;
    height: 24px;
    border-radius: 6px;
}

.skel-rail-item[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEEEEE;
}

/* ======== RESPONSIVE — replica el comportamiento del layout real ======== */

/* El rail se apila debajo en pantallas medianas */
@media (max-width: 1200px) {
    .skel-detail-row[b-yhltkqmxjr] {
        grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1fr);
    }
    .skel-detail-rail[b-yhltkqmxjr] {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 32px;
    }
    .skel-rail-item[b-yhltkqmxjr] {
        flex: 1 1 280px;
    }
}

/* Una sola columna en móvil/tablet (igual que el layout real) */
@media (max-width: 768px) {
    .skel-detail-row[b-yhltkqmxjr] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .skel-detail-divider[b-yhltkqmxjr] {
        display: none;
    }
    .skel-detail-rail[b-yhltkqmxjr] {
        flex-direction: column;
    }
}
/* /Components/Shared/SkeletonProductSlider.razor.rz.scp.css */
/* ==============================================
   SKELETON PRODUCT SLIDER - Replica exacta del ProductSlider.razor.css
   ============================================== */
.skel-product-slider-section[b-vv30qtcp2i] {
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --producto-img-size: clamp(140px, 15.63vw, 300px);
    --producto-card-padding: clamp(10px, 1.04vw, 20px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-price: clamp(14px, 1.04vw, 20px);
    --radius-card: clamp(7px, 0.73vw, 14px);
    --btn-cart-size: clamp(36px, 3.39vw, 65px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: #FFFFFF;
}

/* Section header */
.skel-section-header[b-vv30qtcp2i] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.skel-section-title[b-vv30qtcp2i] {
    width: clamp(180px, 18vw, 350px);
    height: var(--font-title-xl);
    border-radius: 6px;
}

.skel-vector-3[b-vv30qtcp2i] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #E0E0E0;
    border-radius: 0.5px;
}

/* Slider container */
.skel-slider-container-products[b-vv30qtcp2i] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.skel-carousel-btn[b-vv30qtcp2i] {
    background: transparent;
    border: none;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skel-carousel-btn svg[b-vv30qtcp2i] {
    width: 100%;
    height: 100%;
}

.skel-carousel-container-products[b-vv30qtcp2i] {
    flex: 1;
    overflow: hidden;
}

.skel-carousel-track[b-vv30qtcp2i] {
    display: flex;
    gap: var(--gap-md);
    overflow: hidden;
}

/* Card producto skeleton */
.skel-card-producto[b-vv30qtcp2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    padding: 0 0 clamp(5px, 0.52vw, 10px) var(--producto-card-padding);
    flex: 0 0 auto;
    position: relative;
}

.skel-card-producto[b-vv30qtcp2i]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #E0E0E0;
}

.skel-card-producto:first-child[b-vv30qtcp2i] {
    padding-left: var(--producto-card-padding);
}

/* Imagen */
.skel-frame-wrapper[b-vv30qtcp2i] {
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
}

.skel-product-image[b-vv30qtcp2i] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
}

/* Info */
.skel-pack-info-text[b-vv30qtcp2i] {
    display: flex;
    width: calc(var(--producto-img-size) - clamp(10px, 1.04vw, 20px) * 2);
    margin: 0 auto;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 0.78vw, 15px);
    flex-shrink: 0;
}

.skel-info-producto[b-vv30qtcp2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(3px, 0.31vw, 6px);
    flex: 1;
    min-width: 0;
    max-width: calc(100% - var(--btn-cart-size) - clamp(8px, 0.78vw, 15px));
}

.skel-product-title[b-vv30qtcp2i] {
    width: clamp(80px, 8vw, 150px);
    height: var(--font-body);
    border-radius: 4px;
}

.skel-product-price[b-vv30qtcp2i] {
    width: clamp(50px, 5vw, 80px);
    height: var(--font-price);
    border-radius: 4px;
}

.skel-cart-btn[b-vv30qtcp2i] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    border-radius: clamp(4px, 0.31vw, 6px);
    flex-shrink: 0;
}

/* ======== RESPONSIVE — replica exacta del ProductSlider ======== */

/* TABLET */
@media (max-width: 1024px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --producto-img-size: 160px;
        --producto-card-padding: 14px;
        padding: 30px var(--padding-lateral) 40px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .skel-carousel-btn[b-vv30qtcp2i] {
        display: none;
    }

    .skel-card-producto[b-vv30qtcp2i]::before {
        display: none;
    }

    .skel-card-producto:first-child[b-vv30qtcp2i] {
        padding-left: 0;
    }

    .skel-pack-info-text[b-vv30qtcp2i] {
        width: var(--producto-img-size);
    }

    .skel-info-producto[b-vv30qtcp2i] {
        max-width: 100%;
    }

    .skel-product-title[b-vv30qtcp2i] {
        width: 100%;
    }

    .skel-cart-btn[b-vv30qtcp2i] {
        display: none;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --producto-img-size: 140px;
        --producto-card-padding: 12px;
        padding: 24px var(--padding-lateral) 30px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .skel-carousel-track[b-vv30qtcp2i] {
        padding: 0 var(--padding-lateral);
    }

    .skel-card-producto[b-vv30qtcp2i] {
        padding-left: var(--producto-card-padding);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 12px;
        --producto-img-size: 120px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }
}
/* /Components/Shared/UserAccountMenu.razor.rz.scp.css */
/* ============================================
   USER ACCOUNT MENU - Diseño basado en Figma
   ============================================ */

/* Overlay oscuro de fondo */
.user-menu-overlay[b-kb2j99nqwf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Mostrar overlay cuando el menú está visible */
.user-account-menu.show~.user-menu-overlay[b-kb2j99nqwf],
.user-menu-overlay:has(+ .user-account-menu.show)[b-kb2j99nqwf] {
    opacity: 1;
    pointer-events: auto;
}

/* Contenedor principal del menú */
.user-account-menu[b-kb2j99nqwf] {
    position: fixed;
    top: 0;
    right: -700px;
    /* Oculto fuera de la pantalla a la derecha */
    height: 100vh;
    width: 629px;
    /* 381px contenido + 124px padding horizontal x2 */
    background-color: #FFFFFF;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px 0 0 15px;
    /* ✅ Border radius en IZQUIERDA (top-left, bottom-left) */
    padding: 40px 124px 80px 124px;
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 61px;
}

/* Estado visible del menú */
.user-account-menu.show[b-kb2j99nqwf] {
    right: 0;
}

/* ============================================
   HEADER DEL MENÚ
   ============================================ */

.user-menu-header[b-kb2j99nqwf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 381px;
    flex-shrink: 0;
}

/* Bloque título + nombre de usuario (columna a la izquierda del botón cerrar) */
.user-menu-titles[b-kb2j99nqwf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Título "Mi Cuenta" */
.user-menu-title[b-kb2j99nqwf] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: normal;
    color: #2D2E2E;
    margin: 0;
    white-space: nowrap;
}

/* Nombre del usuario — claramente más pequeño que el título */
.user-menu-username[b-kb2j99nqwf] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #757575;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón cerrar (X) */
.user-menu-close[b-kb2j99nqwf] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-menu-close span[b-kb2j99nqwf] {
    font-size: 32px;
    line-height: 1;
    color: #2D2E2E;
    font-weight: 300;
}

.user-menu-close:hover span[b-kb2j99nqwf] {
    color: #000000;
}

/* ============================================
   LISTA DE OPCIONES
   ============================================ */

.user-menu-list[b-kb2j99nqwf] {
    display: flex;
    flex-direction: column;
    width: 381px;
    flex-shrink: 0;
}

/* Items del menú */
.user-menu-item[b-kb2j99nqwf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0 15px 10px;
    border-bottom: 1px solid #E0E0E0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    transition: all 0.15s ease;
    position: relative;
}

/* Hover effect — mirrors megamenu/services sidebar */
.user-menu-item:hover[b-kb2j99nqwf] {
    background-color: #F5F5F5;
    font-weight: 700;
    border-left: 3px solid #3CAA36;
    color: #2D2E2E;
}

/* Botón de Cerrar Sesión (último item, sin border-bottom) */
.user-menu-logout[b-kb2j99nqwf] {
    border-bottom: none;
    color: #dc3545;
    font-weight: 600;
}

.user-menu-logout:hover[b-kb2j99nqwf] {
    color: #dc3545;
    background-color: #F5F5F5;
    border-left: 3px solid #dc3545;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet (< 900px) */
@media (max-width: 900px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 500px;
        padding: 30px 60px 60px 60px;
    }

    .user-menu-header[b-kb2j99nqwf],
    .user-menu-list[b-kb2j99nqwf] {
        width: 100%;
    }

    .user-menu-title[b-kb2j99nqwf] {
        font-size: 36px;
    }
}

/* Mobile (< 600px) */
@media (max-width: 600px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 100%;
        max-width: 400px;
        padding: 30px 30px 60px 30px;
        border-radius: 15px 0 0 15px;
    }

    .user-menu-header[b-kb2j99nqwf],
    .user-menu-list[b-kb2j99nqwf] {
        width: 100%;
    }

    .user-menu-title[b-kb2j99nqwf] {
        font-size: 32px;
    }

    .user-menu-item[b-kb2j99nqwf] {
        font-size: 14px;
    }
}

/* Mobile muy pequeño (< 400px) */
@media (max-width: 400px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 100vw;
        border-radius: 0;
    }
}
/* /Components/Shared/VariantSelector.razor.rz.scp.css */
.variant-selector[b-plzyfrp5id] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 8px 0 4px;
}

.variant-axis[b-plzyfrp5id] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-axis-label[b-plzyfrp5id] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
}

.variant-axis-name[b-plzyfrp5id] {
    font-weight: 700;
    font-size: 14px;
    color: #2D2E2E;
}

.variant-axis-current[b-plzyfrp5id] {
    font-weight: 400;
    font-size: 13px;
    color: #6b6b6b;
}

.variant-axis-options[b-plzyfrp5id] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ---- Chips de color ---- */
.variant-swatch[b-plzyfrp5id] {
    --swatch-color: #e0e0e0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    border-radius: 50%;
    background-color: var(--swatch-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cfcfcf;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

.variant-swatch:hover[b-plzyfrp5id] {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px #9b9b9b;
}

.variant-swatch.variant-active[b-plzyfrp5id] {
    box-shadow: 0 0 0 2px #3CAA36;
}

.variant-swatch-txt[b-plzyfrp5id] {
    font-size: 11px;
    font-weight: 600;
    color: #2D2E2E;
    padding: 0 4px;
    white-space: nowrap;
}

/* Chips de texto (talla, capacidad, etc.) reutilizan forma de "pastilla" */
.variant-btn[b-plzyfrp5id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2D2E2E;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.variant-btn:hover[b-plzyfrp5id] {
    border-color: #3CAA36;
    color: #3CAA36;
}

.variant-btn.variant-active[b-plzyfrp5id] {
    border-color: #3CAA36;
    color: #3CAA36;
    background: #f2fbf1;
    font-weight: 700;
}

/* Sin SKU visible para esa combinación */
.variant-disabled[b-plzyfrp5id] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

.variant-swatch.variant-disabled[b-plzyfrp5id] {
    text-decoration: none;
}
/* /Components/Shared/WelcomeModal.razor.rz.scp.css */
/* ============================================
   WelcomeModal Component Styles
   ============================================ */

.welcome-modal-overlay[b-d8me73q3qw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-d8me73q3qw 0.2s ease-out;
}

.welcome-modal[b-d8me73q3qw] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    padding: 32px;
    position: relative;
    animation: slideIn-b-d8me73q3qw 0.3s ease-out;
}

.welcome-modal-close[b-d8me73q3qw] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.welcome-modal-close:hover[b-d8me73q3qw] {
    background-color: #f0f0f0;
    color: #333;
}

.welcome-modal-header[b-d8me73q3qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.welcome-modal-logo[b-d8me73q3qw] {
    height: 50px;
    width: auto;
}

.welcome-modal-title[b-d8me73q3qw] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
}

.welcome-modal-body[b-d8me73q3qw] {
    margin-bottom: 24px;
}

.welcome-modal-message[b-d8me73q3qw] {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 16px;
    border-radius: 8px;
}

.welcome-modal-footer[b-d8me73q3qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.welcome-modal-timer[b-d8me73q3qw] {
    font-size: 13px;
    color: #888;
}

/* Animations */
@keyframes fadeIn-b-d8me73q3qw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-d8me73q3qw {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 576px) {
    .welcome-modal[b-d8me73q3qw] {
        padding: 24px;
        margin: 16px;
    }

    .welcome-modal-title[b-d8me73q3qw] {
        font-size: 20px;
    }

    .welcome-modal-message[b-d8me73q3qw] {
        font-size: 14px;
        padding: 12px;
    }
}