/* ==========================================================================
   Alphinus Layout CSS — Estilos base Infoempresa
   
   ⚠️  Este archivo NO declara colores, fuentes ni espaciados hardcoded.
       Todos los valores vienen de skin.css (Design Tokens Figma 2026).
       Para modificar valores visuales → editar alphinus/common/layout/skin.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIABLES CSS — Aliases para compatibilidad con código existente
   Mapean los nombres legacy (--ie-color-*) a los tokens de skin.css
   -------------------------------------------------------------------------- */
:root {
    /* Colores IE — mapeados a skin tokens */
    --ie-color-navy:            var(--skin-darkblue-500);
    --ie-color-navy-dark:       var(--skin-darkblue-700);
    --ie-color-navy-light:      var(--skin-darkblue-400);
    --ie-color-blue:            var(--skin-brand-primary);
    --ie-color-blue-hover:      var(--skin-brand-primary-hover);
    --ie-color-blue-light:      var(--skin-bg-brand-light);
    --ie-color-white:           var(--skin-gray-0);
    --ie-color-gray-100:        var(--skin-gray-50);
    --ie-color-gray-200:        var(--skin-gray-200);
    --ie-color-gray-400:        var(--skin-gray-500);
    --ie-color-gray-600:        var(--skin-gray-600);
    --ie-color-gray-800:        var(--skin-gray-800);
    --ie-color-text:            var(--skin-text-primary);
    --ie-color-text-light:      var(--skin-darkblue-100);
    --ie-color-footer-bg:       var(--skin-bg-inverse);
    --ie-color-footer-legal-bg: var(--skin-footer-legal-bg);
    --ie-color-header-bg:       #F9FAFB;
    --ie-color-cart-badge:      var(--skin-badge-cart);

    /* Tipografía */
    --ie-font-family:           var(--skin-font-primary);
    --ie-font-size-xs:          var(--skin-text-caption);
    --ie-font-size-sm:          var(--skin-text-sm);
    --ie-font-size-base:        var(--skin-text-base);
    --ie-font-size-md:          var(--skin-text-md);
    --ie-font-size-lg:          var(--skin-text-lg);
    --ie-font-size-xl:          var(--skin-text-xl);

    /* Espaciado */
    --ie-header-height:         var(--skin-header-height);
    --ie-container-max:         var(--skin-container-max);
    --ie-container-pad:         var(--skin-container-pad);

    /* Transiciones */
    --ie-transition:            var(--skin-transition-base);

    /* Sombras */
    --ie-shadow-header:         var(--skin-shadow-sm);
    --ie-shadow-dropdown:       var(--skin-shadow-lg);
}

/* --------------------------------------------------------------------------
   RESET Y BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}



body {
    margin: 0;
    padding: 0;
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-base);
    color: var(--ie-color-text);
    background-color: #F9FAFB;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--ie-color-blue);
    text-decoration: none;
    transition: color var(--ie-transition);
}

a:hover {
    color: var(--ie-color-blue-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   CONTENEDOR GLOBAL
   -------------------------------------------------------------------------- */
.alphinus-engine .ie-container,
.ie-container {
    max-width: var(--ie-container-max);
    margin: 0 auto;
    padding: 0 var(--ie-container-pad);
    width: 100%;
}

/* --------------------------------------------------------------------------
   MAIN — contenido de sección
   -------------------------------------------------------------------------- */
.alphinus-main {
    min-height: calc(100vh - var(--ie-header-height) - 400px);
    padding-top: 0;
    padding-bottom: 0;
}

body.has-hero-header .alphinus-main {
    padding-top: 0;
}

.alphinus-container {
    max-width: var(--ie-container-max);
    margin: 0 auto;
    padding: 0 var(--ie-container-pad);
    width: 100%;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.ie-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--ie-color-header-bg);
    height: var(--ie-header-height);
}

.ie-header__container {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    max-width: var(--ie-container-max);
    margin: 0 auto;
    padding: 0 var(--ie-container-pad);
}

/* --- Logo --- */
.ie-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 40px;
    text-decoration: none;
}

.ie-header__logo img {
    height: 36px;
    width: auto;
    display: block;
}

/* Logo bicolor: por defecto solo muestra el logo normal; logo-white solo sobre hero */
.ie-header__logo .ie-header__logo-img--white {
    display: none;
}

/* --- Nav links --- */
.ie-header__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.ie-header__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 10px;
    color: var(--ie-color-navy);
    font-family: var(--skin-font-secondary);
    font-size: var(--ie-font-size-md);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ie-transition), color var(--ie-transition);
}

.ie-header__link:hover {
    background-color: var(--ie-color-gray-100);
    color: var(--ie-color-navy);
}

/* Nav item activo — semibold */
.ie-header__links .ie-header__link.is-active {
    font-weight: 600;
}

.ie-header__link-chevron {
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ie-header__link-chevron.is-open {
    transform: rotate(180deg);
}

/* --- Dropdown Empresas (Figma node 705:29168) --- */
/* Wrapper: posición relativa para anclar el dropdown */
.ie-header__nav-dropdown-wrap {
    position: relative;
}

/* Reset button UA styles para el trigger del dropdown */
.ie-header__link--has-dropdown {
    background: none;
    border: none;
    cursor: pointer;
}

/* Panel del dropdown */
.ie-companies-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 500;
    width: fit-content;
    background: #ffffff;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    white-space: nowrap;
}

/* Item del dropdown — Figma 705:29168: padding 4px 12px, border-radius 8px, Inter 16px/500, #0f111e. Sin iconos (visible:false en Figma) */
.ie-companies-dropdown__item {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    color: #0f111e;
    font-family: var(--skin-font-secondary);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.ie-companies-dropdown__item:hover {
    background-color: var(--ie-color-gray-100);
    color: #0f111e;
}

/* Transiciones de apertura/cierre */
.ie-companies-dropdown--enter,
.ie-companies-dropdown--leave {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.ie-companies-dropdown--enter-start,
.ie-companies-dropdown--leave-end {
    opacity: 0;
    transform: translateY(-6px);
}
.ie-companies-dropdown--enter-end,
.ie-companies-dropdown--leave-start {
    opacity: 1;
    transform: translateY(0);
}

/* Modo hero transparente — botón sobre fondo oscuro */
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__link--has-dropdown.is-active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- Buscador --- */
.ie-header__search {
    display: flex;
    align-items: center;
    margin-right: 8px;
    position: relative; /* Necesario para el dropdown de autocompletado */
}

.ie-header__search-form {
    display: flex;
    align-items: center;
    gap: 0;
}

.ie-header__search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--ie-color-navy);
    display: flex;
    align-items: center;
    transition: color var(--ie-transition);
}

.ie-header__search-btn:hover {
    color: var(--ie-color-blue);
}

.ie-header__search-input {
    display: none;    /* Oculto por defecto — se muestra con .is-open (click en lupa) */
    border: 1px solid var(--ie-color-gray-200);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: var(--ie-font-size-sm);
    font-family: var(--ie-font-family);
    outline: none;
    width: 0;
    color: var(--ie-color-navy);
    background-color: var(--ie-color-white);
    transition: width 0.25s ease, border-color var(--ie-transition), box-shadow var(--ie-transition);
}

/* Input visible al hacer click en la lupa */
.ie-header__search-input.is-open {
    display: block;
    width: 220px;
}

.ie-header__search-input::placeholder {
    color: var(--ie-color-gray-400);
}

.ie-header__search-input.is-open:focus {
    border-color: var(--ie-color-blue);
    width: 280px;
    box-shadow: 0 0 0 2px rgba(59, 90, 245, 0.10);
}

/* ==========================================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   Figma ref: 102:1814 (con resultados), 102:1881 (sin resultados)
   ========================================================================== */

/* Dropdown container — posición absoluta bajo el buscador */
.ie-header__autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 560px;
    max-width: calc(100vw - 24px);
    background: var(--skin-bg-surface);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 12px;
    box-shadow: var(--skin-shadow-lg);
    z-index: 200;
    overflow: hidden;
}

/* --- ESTADO LOADING --- */
.ie-header__autocomplete-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    color: var(--skin-text-muted);
}

/* Spinner — anillo giratorio */
.ie-header__autocomplete-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--skin-border-subtle-strong);
    border-top-color: var(--skin-brand-navy);
    border-radius: 50%;
    animation: ie-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ie-spin {
    to { transform: rotate(360deg); }
}

/* --- ESTADO ERROR --- */
.ie-header__autocomplete-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #feefef;
    border-radius: 8px;
    margin: 8px;
}

.ie-header__autocomplete-error__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbe9ea;
    color: #c61b24;
    flex-shrink: 0;
}

.ie-header__autocomplete-error__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ie-header__autocomplete-error__title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: #c61b24;
    line-height: 1.214em;
}

.ie-header__autocomplete-error__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
}

.ie-header__autocomplete-error__retry {
    background: var(--skin-bg-surface);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 600;
    color: var(--skin-dark-900);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--ie-transition);
}

.ie-header__autocomplete-error__retry:hover {
    background: var(--ie-color-gray-100);
}

/* --- ESTADO SIN RESULTADOS — Figma 102:1881 --- */
.ie-header__autocomplete-noresults {
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ie-header__autocomplete-noresults__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    text-align: center;
}

.ie-header__autocomplete-noresults__icon-wrap {
    width: 48px;
    height: 48px;
    background: #f9fafb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ie-header__autocomplete-noresults__title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 600;
    color: var(--skin-dark-900);
    line-height: 1.25em;
}

.ie-header__autocomplete-noresults__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.25em;
}

/* Sugerencias — separadas por borde superior */
.ie-header__autocomplete-noresults__suggestions {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ie-header__autocomplete-noresults__suggestions-label {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
}

.ie-header__autocomplete-noresults__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chips de sugerencia — Figma: #f3f3f3 bg, padding 8px 12px, radius 6px, Inter 14px/500 */
.ie-header__autocomplete-noresults__chip {
    background: #f3f3f3;
    border: none;
    border-radius: 6px;
    padding: 7px 12px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    color: var(--skin-dark-900);
    cursor: pointer;
    transition: background-color var(--ie-transition);
    line-height: 1.214em;
}

.ie-header__autocomplete-noresults__chip:hover {
    background: var(--skin-border-subtle-strong);
}

/* --- ESTADO CON RESULTADOS — Figma 102:1814 --- */
.ie-header__autocomplete-results {
    display: flex;
    flex-direction: column;
}

/* Recuento — Figma: Inter 12px/400, var(--skin-text-muted), padding 8px 16px 1px */
.ie-header__autocomplete-count {
    padding: 8px 16px 4px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
}

/* Bloque de grupo (empresas o dirigentes) */
.ie-header__autocomplete-group-block {
    display: flex;
    flex-direction: column;
}

/* Separador entre grupos (entre empresas y dirigentes) */
.ie-header__autocomplete-group-block--border {
    border-top: 1px solid var(--skin-border-subtle-strong);
    margin-top: 4px;
    padding-top: 4px;
}

/* Cada ítem de resultado — Figma: row, gap 12px, padding 12px 44px 12px 16px */
.ie-header__autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background-color var(--ie-transition);
    cursor: pointer;
    border-radius: 0;
}

.ie-header__autocomplete-item:hover,
.ie-header__autocomplete-item--focused {
    background-color: var(--skin-white-300);
}

/* Icono de ítem — 40×40, border-radius 8px */
.ie-header__autocomplete-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--skin-brand-navy);
}

/* Empresa: fondo azul claro Figma #e7efff */
.ie-header__autocomplete-item__icon--empresa {
    background: var(--skin-brand-navy-light);
    color: var(--skin-brand-navy);
}

/* Dirigente: fondo gris azulado Figma #e9eaf2 */
.ie-header__autocomplete-item__icon--dirigente {
    background: var(--skin-darkblue-50);
    color: var(--skin-darkblue-400);
}

/* Cuerpo del ítem */
.ie-header__autocomplete-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Fila con nombre + badge tipo */
.ie-header__autocomplete-item__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Nombre — Figma: Inter 14px/500, var(--skin-dark-900) */
.ie-header__autocomplete-item__name {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    color: var(--skin-dark-900);
    line-height: 1.214em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Badge tipo (empresa/directivo) — Figma: radius 6px, padding 2px 8px, 12px/400 */
.ie-header__autocomplete-item__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    line-height: 1.333em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ie-header__autocomplete-item__badge--empresa {
    background: var(--skin-brand-navy-light);
    color: var(--skin-brand-navy);
}

.ie-header__autocomplete-item__badge--dirigente {
    background: var(--skin-darkblue-50);
    color: var(--skin-darkblue-500);
}

/* Fila meta (ciudad, CIF, empresas asociadas) — Figma: Inter 12px/400, var(--skin-text-muted) */
.ie-header__autocomplete-item__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
}

/* Punto separador entre ciudad y CIF */
.ie-header__autocomplete-item__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--skin-text-muted);
    flex-shrink: 0;
}

/* Footer del dropdown: "ver todos los resultados" — Figma: Inter 16px/600, var(--skin-text-muted), border-top */
.ie-header__autocomplete-footer {
    border-top: 1px solid var(--skin-border-subtle-strong);
    padding: 10px 16px;
}

.ie-header__autocomplete-showall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 600;
    color: var(--skin-text-muted);
    padding: 4px 0;
    transition: color var(--ie-transition);
    line-height: 1.25em;
}

.ie-header__autocomplete-showall:hover {
    color: var(--skin-dark-900);
}

.ie-header__autocomplete-showall svg {
    flex-shrink: 0;
    transition: transform var(--ie-transition);
}

.ie-header__autocomplete-showall:hover svg {
    transform: translateX(2px);
}

/* --- Acciones (idioma, carrito, perfil) --- */
.ie-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Selector de idioma --- */
.ie-lang-selector {
    position: relative;
}

.ie-lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-sm);
    font-weight: 600;
    color: var(--ie-color-navy);
    padding: 8px 10px;
    border-radius: 4px;
    transition: background-color var(--ie-transition);
    white-space: nowrap;
}

.ie-lang-btn:hover {
    background-color: var(--ie-color-gray-100);
}

/* Chevron inside language selector button — 14×14px per Figma nav-arrow-down */
.ie-lang-btn__chevron {
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform var(--ie-transition);
}

/* Rotate chevron when dropdown is open */
.ie-lang-selector[data-open="true"] .ie-lang-btn__chevron,
.ie-lang-btn[aria-expanded="true"] .ie-lang-btn__chevron {
    transform: rotate(180deg);
}

.ie-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    background-color: var(--ie-color-gray-200);
    /* Banderas con emoji como fallback visual */
}

.ie-flag-ES { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c60b1e'/%3E%3Crect y='.5' width='3' height='1' fill='%23ffc400'/%3E%3C/svg%3E"); }
.ie-flag-GB { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='white' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='white' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.ie-flag-FR { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3Crect x='1' width='1' height='2' fill='white'/%3E%3Crect x='2' width='1' height='2' fill='%23ED2939'/%3E%3C/svg%3E"); }
.ie-flag-DE { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23D00'/%3E%3Crect width='5' height='1' fill='%23000'/%3E%3C/svg%3E"); }

.ie-lang-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--ie-color-white);
    border: 1px solid var(--ie-color-gray-200);
    border-radius: 6px;
    box-shadow: var(--ie-shadow-dropdown);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 80px;
    z-index: 100;
}

.ie-lang-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: var(--ie-font-size-sm);
    color: var(--ie-color-navy);
    font-weight: 600;
    transition: background-color var(--ie-transition);
}

.ie-lang-dropdown li a:hover {
    background-color: var(--ie-color-blue-light);
    color: var(--ie-color-blue);
}

/* --- Carrito --- */
.ie-cart-wrapper {
    position: relative;
}

.ie-cart-btn {
    display: flex;
    align-items: center;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    color: var(--skin-dark-900);
    border-radius: 4px;
    transition: background-color var(--ie-transition);
}

.ie-cart-btn:hover {
    background-color: var(--ie-color-gray-100);
}

.ie-cart-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.ie-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--ie-color-cart-badge);
    color: var(--ie-color-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.ie-cart-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 356px;
    background: var(--ie-color-white);
    border-radius: 12px;
    box-shadow: 0px 8px 8px 0px rgba(10, 13, 18, 0.05), 0px 20px 24px 0px rgba(10, 13, 18, 0.12);
    z-index: 100;
    overflow: hidden;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cart dropdown header row — shared by filled and empty states */
/* Figma: Container layout_WZ3PO7 — padding 8px 0, space-between, border-bottom var(--skin-border-subtle-strong) */
.ie-cart-dropdown-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--skin-border-subtle-strong);
}

/* Left group: title + badge inline — Figma layout_A4EUA3: row, center, no gap */
.ie-cart-dropdown-header__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Title: Inter 14px/600 — Figma inter/body s/semibold */
.ie-cart-dropdown-header__title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: var(--skin-dark-900);
    line-height: 1.214em;
}

/* Badge — default/empty state: grey (Figma: #F3F3F3 bg, var(--skin-text-muted) text, 12px/500) */
.ie-cart-dropdown-header__badge {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 8px;
    background: var(--skin-white-300);
    border-radius: 16px;
}

.ie-cart-dropdown-header__badge span {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 500;
    color: var(--skin-text-muted);
    line-height: 1.5em;
}

/* Badge — filled/blue state: Figma Color=Blue — #EFF8FF bg, #0E59E7 text, 14px/400 */
.ie-cart-dropdown-header__badge--blue {
    background: var(--skin-badge-blue-bg);
}

.ie-cart-dropdown-header__badge--blue span {
    font-size: var(--skin-text-sm);
    font-weight: 400;
    color: var(--skin-badge-blue-text);
}

/* Close button (X) — 16×16 icon, color #303B4F — Figma layout_XNO88O */
.ie-cart-dropdown-header__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--skin-icon-close);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity var(--ie-transition);
}

.ie-cart-dropdown-header__close:hover {
    opacity: 0.7;
}

.ie-cart-items {
    max-height: 260px;
    overflow-y: auto;
}

.ie-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--skin-border-subtle-strong);
}

.ie-cart-item:last-child {
    border-bottom: none;
}

.ie-cart-item-thumb {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: var(--skin-tag-blue-bg);
    border-radius: var(--skin-radius-xs);
    color: var(--ie-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ie-cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Name + year badge row — Figma layout_KY085R: row, align-items center, gap 4px */
.ie-cart-item-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Item company name — Figma: inter/body s/Medium, 14px/500, var(--skin-dark-900) */
.ie-cart-item-name {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    color: var(--skin-dark-900);
    line-height: 1.214em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Year badge — Figma: Badge Size=sm Color=Blue, inter/body s/Regular 14px/400
   _Badge base: padding 2px 8px, borderRadius 16px, bg Blue/50 (#EFF8FF), text #0E59E7 */
.ie-cart-item-year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 16px;
    background-color: var(--skin-badge-blue-bg);
    color: var(--skin-badge-blue-text);
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    line-height: 1.214em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Item product type — Figma: inter/Caption/Regular, 12px/400, var(--skin-text-muted) */
.ie-cart-item-type {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
}

.ie-cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Item price — Figma: inter/Caption/semibold, 12px/600, var(--skin-dark-900) (fill_BB5D2V) */
.ie-cart-item-price {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 600;
    color: var(--skin-dark-900);
    white-space: nowrap;
}

.ie-cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--skin-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--skin-radius-xxs);
    transition: color var(--ie-transition), background-color var(--ie-transition);
}

.ie-cart-item-remove:hover {
    color: var(--skin-status-error);
    background-color: var(--skin-status-error-bg);
}

.ie-cart-item-remove.is-loading {
    opacity: 0.4;
    cursor: wait;
}

.ie-cart-item-remove svg {
    width: 18px;
    height: 18px;
}

.ie-cart-totals {
    padding: 4px 0;
    border-top: 1px solid var(--skin-border-subtle-strong);
    margin-top: 4px;
}

/* Subtotal + IVA rows — Figma: Manrope 14px, labels var(--skin-text-muted) (muted), values var(--skin-darkblue-500) (navy) */
.ie-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    color: var(--skin-text-muted);
    padding: 6px 0;
}

/* Values (second span) in Subtotal/IVA rows — Figma: Manrope/body s/semibold, var(--skin-darkblue-500) */
.ie-cart-total-row span:last-child {
    font-weight: 600;
    color: var(--skin-brand-navy);
}

/* Total row separator */
.ie-cart-total-row.ie-cart-total-final {
    border-top: 1px solid var(--skin-border-subtle-strong);
    padding-top: 10px;
}

/* Total label — Figma: inter/body M/semibold, 16px/600, var(--skin-dark-900) */
.ie-cart-total-final {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 600;
    color: var(--skin-dark-900);
}

/* Total value — Figma: Manrope/body L/semibold, 20px/600, var(--skin-darkblue-500) */
.ie-cart-total-final span:last-child {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: 600;
    color: var(--skin-brand-navy);
}

.ie-cart-actions {
    padding: 8px 0 4px;
}

/* CTA button inside cart dropdown — Figma: borderRadius 12px, padding 12px 48px,
   fill_SMWG8L = --skin-brand-navy (var(--skin-darkblue-500)), shadow-xs, inter/body s/semibold */
.ie-cart-actions .ie-btn-primary {
    background-color: var(--skin-brand-navy);
    border-radius: 12px;
    padding: 12px 48px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    box-shadow: var(--skin-shadow-xs);
}

.ie-cart-actions .ie-btn-primary:hover {
    background-color: var(--skin-brand-navy-hover);
    color: var(--ie-color-white);
    box-shadow: var(--skin-shadow-sm);
}

.ie-btn--full {
    display: block;
    width: 100%;
    text-align: center;
}

.ie-cart-empty {
    padding: 0 0 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ie-cart-empty__icon {
    width: 64px;
    height: 64px;
    display: block;
    flex-shrink: 0;
}

.ie-cart-empty__title {
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-md);
    font-weight: 600;
    color: var(--skin-dark-900);
    margin: 0;
    line-height: 1.25em;
}

.ie-cart-empty__desc {
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-sm);
    font-weight: 400;
    color: var(--skin-text-muted);
    margin: 0;
    line-height: 1.214em;
}

/* --- Perfil / Login --- */
.ie-profile-wrapper {
    position: relative;
}

.ie-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--skin-bg-surface);
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: var(--skin-dark-900);
    padding: 12px;
    border-radius: 12px;
    box-shadow: var(--skin-shadow-button-lift);
    transition: background-color var(--ie-transition);
    text-decoration: none;
    white-space: nowrap;
}

.ie-profile-btn:hover {
    background-color: var(--skin-gray-50);
    color: var(--skin-dark-900);
}

.ie-profile-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Botón "Iniciar sesión" — estilo secondary (Figma: white bg, var(--skin-border-subtle-strong) border, dark text) */
.ie-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--skin-bg-surface);
    color: var(--skin-dark-900);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 12px;
    padding: 12px 24px;
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-md);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--skin-shadow-button-lift);
    transition: background-color var(--ie-transition), border-color var(--ie-transition);
    cursor: pointer;
}

.ie-login-btn:hover {
    background-color: var(--ie-color-gray-100);
    color: var(--skin-dark-900);
    border-color: var(--skin-border-default);
}

.ie-profile-arrow {
    opacity: 0.6;
    transition: transform var(--ie-transition);
}

/* Profile dropdown — Figma: 317px wide, border-radius 12px, Shadow/lg, white bg */
.ie-profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--skin-bg-surface);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 12px;
    box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08);
    width: 317px;
    z-index: 1000;
    overflow: hidden;
    padding: 8px 0;
    color: var(--skin-dark-900);
}

/* Email row — Figma: Inter 12px/400, var(--skin-text-muted), padding 8px 16px */
.ie-profile-dropdown__email {
    padding: 8px 16px 8px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.333em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu list */
.ie-profile-dropdown__menu {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Menu item — Figma: Content row, gap 16px, padding 12px, border-radius 8px */
.ie-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 500;
    color: var(--skin-dark-900);
    text-decoration: none;
    transition: background-color var(--ie-transition);
    line-height: 1.25em;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.ie-profile-menu-item:hover {
    background-color: #E7EFFF;
    color: var(--skin-dark-900);
}

/* Icon inside menu item — Figma: 20×20px, brand blue */
.ie-profile-menu-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--skin-darkblue-500);
}

/* Separator between items */
.ie-profile-separator {
    height: 1px;
    background: var(--skin-border-subtle-strong);
    margin: 2px 12px;
}

/* ==========================================================================
   LOGOUT MODAL
   ========================================================================== */
.ie-logout-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ie-logout-modal {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    position: relative;
    text-align: center;
}

.ie-logout-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #303B4F;
}

.ie-logout-modal__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 28px;
    background: #FBE9EA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ie-logout-modal__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ie-logout-modal__title {
    font-family: var(--skin-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--skin-dark-900);
    margin: 0;
}

.ie-logout-modal__desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ie-logout-modal__actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.ie-logout-modal__btn {
    flex: 1;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--skin-font-body);
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ie-logout-modal__btn--cancel {
    background: #ffffff;
    color: var(--skin-dark-900);
    font-weight: 600;
    border: 1px solid var(--skin-border-subtle, var(--skin-border-subtle-strong));
    box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}

.ie-logout-modal__btn--cancel:hover {
    background: var(--skin-white-500);
}

.ie-logout-modal__btn--confirm {
    background: #C61B24;
    color: var(--skin-white-500);
    font-weight: 500;
}

.ie-logout-modal__btn--confirm:hover {
    background: #a81620;
}

/* Fade transition */
.ie-fade-enter { transition: opacity 0.2s ease; }
.ie-fade-enter-start { opacity: 0; }
.ie-fade-enter-end { opacity: 1; }

/* ==========================================================================
   HEADER — MODO TRANSPARENTE (hero overlay)
   Activado con clase has-hero-header en <body>
   ========================================================================== */
.has-hero-header .ie-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.has-hero-header .ie-header.is-scrolled {
    position: fixed;
    background: var(--skin-bg-surface);
    border-bottom: 1px solid var(--ie-color-gray-200);
    box-shadow: var(--ie-shadow-header);
}

/* Nav links — blanco sobre hero */
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__link {
    color: var(--skin-white-500);
}
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__link:hover {
    background: var(--skin-white-hover-overlay);
    color: var(--skin-text-inverse);
}

/* Iconos header (search, cart, lang) — color blanco sobre hero */
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__search-btn,
.has-hero-header .ie-header:not(.is-scrolled) .ie-cart-btn,
.has-hero-header .ie-header:not(.is-scrolled) .ie-lang-btn {
    color: var(--skin-white-500);
    background: transparent;
    box-shadow: none;
}
.has-hero-header .ie-header:not(.is-scrolled) .ie-cart-btn:hover,
.has-hero-header .ie-header:not(.is-scrolled) .ie-lang-btn:hover {
    background: var(--skin-white-hover-overlay);
    color: var(--skin-text-inverse);
}
/* Botón perfil/login — fondo blanco sobre hero (Figma: fill #FFFFFF, stroke var(--skin-border-subtle-strong)) */
.has-hero-header .ie-header:not(.is-scrolled) .ie-profile-btn,
.has-hero-header .ie-header:not(.is-scrolled) .ie-login-btn {
    background: var(--skin-bg-surface);
    color: var(--skin-dark-900);
    border: 1px solid var(--skin-border-subtle-strong);
    box-shadow: var(--skin-shadow-button-lift);
}
.has-hero-header .ie-header:not(.is-scrolled) .ie-profile-btn:hover,
.has-hero-header .ie-header:not(.is-scrolled) .ie-login-btn:hover {
    background: var(--skin-white-500);
    color: var(--skin-dark-900);
}
/* Icono de perfil usa currentColor — hereda el color del botón automáticamente */

/* Logo — versión bicolor sobre hero:
   símbolo azul #2B1BB5 + blanco (ya correcto en logo-white.svg)
   texto "infoempresa" en blanco (#FFFFFF)
   No se usa filter — se cambia a logo-white.svg con CSS content cuando está sobre el hero */
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__logo .ie-header__logo-img--default {
    display: none;
}
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__logo .ie-header__logo-img--white {
    display: block;
}
/* Cuando está scrolled, revertir al logo normal */
.has-hero-header .ie-header.is-scrolled .ie-header__logo .ie-header__logo-img--default {
    display: block;
}
.has-hero-header .ie-header.is-scrolled .ie-header__logo .ie-header__logo-img--white {
    display: none;
}

/* ==========================================================================
   FOOTER — Figma: Footer component (node I587:12759;434:3378)
   Layout: column, gap 56px, padding 80px, bg var(--skin-darkblue-500), height 455px
   ========================================================================== */
.ie-footer {
    background-color: var(--ie-color-footer-bg);
    color: var(--ie-color-text-light);
    font-family: var(--ie-font-family);
}

/* --- Bloque principal --- */
.ie-footer__main {
    padding: 80px;
}

/* Row: brand (left) + link columns (right) — Figma layout_55U19R */
.ie-footer__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
}

/* --- Brand: logo + description + social icons — Figma layout_F9G8RJ */
.ie-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    max-width: 370px;
}

/* Figma Negativo logo: 169.29 × 40.08px */
.ie-footer__logo {
    height: 40px;
    width: auto;
    opacity: 1;
    transition: opacity var(--ie-transition);
}

.ie-footer__logo:hover {
    opacity: 0.8;
}

/* Figma: inter/body s/Regular, 14px, #B4BDC1 */
.ie-footer__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    line-height: 1.5em;
    color: var(--skin-footer-text-muted);
    margin: 0;
}

/* Social icons row — Figma layout_HGBGVW: row, gap 12px */
.ie-footer__social {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Figma: 36x36, bg #FFFFFF, radius 8px */
.ie-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--skin-bg-surface);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background-color var(--ie-transition);
    text-decoration: none;
}

.ie-footer__social-link:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

.ie-footer__social-link img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0);
}

/* --- Link columns — Figma layout_JVZ7DI: row, gap 32px */
.ie-footer__links {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Each column — Figma layout_ZAHLX4: column, stretch, gap 16px, width ~136px */
.ie-footer__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 136px;
    flex-shrink: 0;
}

/* Column heading — Figma: inter/body s/semibold, 14px fw600, var(--skin-white-500) */
.ie-footer__title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: var(--skin-white-500);
    margin: 0;
    padding: 0;
}

/* Link list — Figma layout_EZXOY0: column, stretch, gap 12px */
.ie-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Figma: inter/body s/Regular, 14px fw400, #B4BDC1 */
.ie-footer__list li a {
    color: var(--skin-footer-text-muted);
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    text-decoration: none;
    line-height: 1.214em;
    transition: color var(--ie-transition);
}

.ie-footer__list li a:hover {
    color: var(--skin-text-inverse);
}

/* --- Barra legal — mismo fondo azul que footer, separador sutil, padding 24px 0 */
.ie-footer__legal {
    background-color: var(--ie-color-footer-legal-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px 80px;
}

/* Inner: space-between, fill width — Figma layout_U05NY2 */
.ie-footer__legal-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Copyright text — inter/body s/Regular, 14px, muted white */
.ie-footer__copyright {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    color: var(--skin-footer-text-muted);
    margin: 0;
}

/* Legal links row — Figma: row, center, gap 24px, short labels */
.ie-footer__legal-links {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ie-footer__legal-links li a {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    color: var(--skin-footer-text-muted);
    text-decoration: none;
    transition: color var(--ie-transition);
}

.ie-footer__legal-links li a:hover {
    color: var(--skin-text-inverse);
}

/* ==========================================================================
   BANNER DE COOKIES
   ========================================================================== */

.ie-cookies-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 1px solid var(--skin-border-subtle, var(--skin-border-subtle-strong));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    padding: 20px 24px;
}

.ie-cookies-banner__simple {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ie-cookies-banner__text {
    flex: 1;
    min-width: 240px;
    font-family: var(--skin-font-body, 'Inter', sans-serif);
    font-size: var(--skin-text-sm);
    color: var(--skin-text-secondary, var(--skin-text-muted));
    margin: 0;
    line-height: 1.5;
}

.ie-cookies-banner__link {
    color: var(--skin-brand-primary, var(--skin-darkblue-500));
    text-decoration: underline;
}

.ie-cookies-banner__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ie-cookies-banner__btn {
    font-family: var(--skin-font-body, 'Inter', sans-serif);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

.ie-cookies-banner__btn--primary {
    background: var(--skin-brand-primary, var(--skin-darkblue-500));
    color: #ffffff;
    border: 1px solid var(--skin-brand-primary, var(--skin-darkblue-500));
}

.ie-cookies-banner__btn--primary:hover {
    background: var(--skin-brand-primary-hover, var(--skin-navy-hover));
    border-color: var(--skin-brand-primary-hover, var(--skin-navy-hover));
}

.ie-cookies-banner__btn--outline {
    background: transparent;
    color: var(--skin-text-primary, var(--skin-dark-900));
    border: 1px solid var(--skin-border-strong, #D0D5DD);
}

.ie-cookies-banner__btn--outline:hover {
    border-color: var(--skin-text-primary, var(--skin-dark-900));
}

.ie-cookies-banner__btn--ghost {
    background: transparent;
    color: var(--skin-brand-primary, var(--skin-darkblue-500));
    border: 1px solid transparent;
    padding-left: 0;
    padding-right: 0;
}

.ie-cookies-banner__btn--ghost:hover {
    text-decoration: underline;
}

/* Panel de configuración expandido */
.ie-cookies-banner__config {
    max-width: 1280px;
    margin: 0 auto;
}

.ie-cookies-banner__config-title {
    font-family: var(--skin-font-display, 'Manrope', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--skin-text-primary, var(--skin-dark-900));
    margin: 0 0 16px;
}

.ie-cookies-banner__config-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ie-cookies-banner__config-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 12px;
    border: 1px solid var(--skin-border-subtle, var(--skin-border-subtle-strong));
    border-radius: 8px;
}

.ie-cookies-banner__config-item--disabled {
    opacity: 0.6;
    cursor: default;
}

.ie-cookies-banner__config-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ie-cookies-banner__config-label strong {
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: var(--skin-text-primary, var(--skin-dark-900));
}

.ie-cookies-banner__config-label span {
    font-size: 12px;
    color: var(--skin-text-secondary, var(--skin-text-muted));
}

@media (max-width: 768px) {
    .ie-cookies-banner {
        padding: 16px;
    }

    .ie-cookies-banner__simple {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .ie-cookies-banner__actions {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   BOTONES GLOBALES
   ========================================================================== */
.ie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: var(--ie-font-family);
    font-size: var(--ie-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background-color var(--ie-transition), box-shadow var(--ie-transition);
    white-space: nowrap;
    width: 100%;
}

.ie-btn-primary {
    background-color: var(--ie-color-blue);
    color: var(--ie-color-white);
}

.ie-btn-primary:hover {
    background-color: var(--ie-color-blue-hover);
    color: var(--ie-color-white);
    box-shadow: 0 2px 8px rgba(59, 90, 245, 0.35);
}

.ie-btn-secondary {
    background-color: var(--ie-color-white);
    color: var(--skin-dark-900);
    border: 1px solid var(--skin-border-default);
    border-radius: 12px;
    padding: 12px 48px;
    font-size: var(--ie-font-size-sm);
    font-weight: 600;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
}

.ie-btn-secondary:hover {
    background-color: var(--skin-white-300);
    border-color: var(--skin-border-strong);
    color: var(--skin-dark-900);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .ie-header__links {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --ie-header-height: var(--skin-header-height-mob);
    }

    .ie-header__links {
        display: none;
    }

    .ie-header__search-input {
        display: none;
    }

    /* Profile button — solo icono en mobile, sin texto ni flecha */
    .ie-profile-btn span,
    .ie-profile-btn__text,
    .ie-profile-btn .ie-profile-arrow {
        display: none;
    }
    .ie-profile-btn {
        padding: 8px;
        border-radius: 8px;
        min-width: 0;
        gap: 0;
        background: none;
        box-shadow: none;
    }

    /* Actions: compacto, sin desbordamiento */
    .ie-header__actions {
        gap: 2px;
        flex-shrink: 0;
    }

    /* Lang selector: oculto en mobile (disponible en el menú hamburguesa) */
    .ie-lang-selector {
        display: none;
    }

    /* Header container: no overflow (allows dropdowns to escape the header bounds) */
    .ie-header__container {
        padding: 0 12px;
        overflow: visible;
    }

    /* Search icon: completely hidden on mobile (Figma mobile header has no search in the bar) */
    .ie-header__search {
        display: none;
    }

    /* Logo: eliminar margin-right fijo (40px) y permitir flex-shrink en mobile para que
       los iconos de actions quepan sin desbordarse del viewport */
    .ie-header__logo {
        margin-right: 0;
        flex-shrink: 1;
        min-width: 0;
    }

    /* Cart and profile dropdowns: use position:fixed on mobile so they escape the header
       and are not clipped. Anchored just below the header, filling the available width. */
    .ie-cart-dropdown {
        position: fixed;
        top: var(--ie-header-height);
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - var(--ie-header-height) - 16px);
        overflow-y: auto;
    }

    .ie-profile-dropdown {
        position: fixed;
        top: var(--ie-header-height);
        right: 12px;
        left: auto;
        min-width: 240px;
        width: auto;
        max-width: calc(100vw - 24px);
    }

    .ie-footer__main {
        padding: 48px 32px;
    }
    .ie-footer__container {
        flex-direction: column;
        gap: 40px;
    }
    .ie-footer__brand {
        max-width: 100%;
    }
    .ie-footer__links {
        gap: 24px;
    }
    .ie-footer__legal {
        padding: 20px 32px;
    }
    .ie-footer__legal-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ie-footer__main {
        padding: 40px 16px;
    }
    .ie-footer__links {
        gap: 16px;
    }
    .ie-footer__col {
        width: calc(50% - 8px);
    }
    .ie-footer__legal {
        padding: 20px 16px;
    }
    .ie-footer__legal-links {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

}

/* ==========================================================================
   HELP POPUP — Figma node 935:33474
   Overlay: rgba(0,0,0,0.5) fullscreen
   Popup: 821px wide, white, 1px var(--skin-border-subtle-strong) border, border-radius 10px
   ========================================================================== */

/* Botón "Ayuda" en la nav — mismo estilo que .ie-header__link pero tipo button */
.ie-header__link--help {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Overlay fullscreen con fondo semitransparente — Figma fill_S3AK0F = rgba(0,0,0,0.5) */
.ie-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 109px 0 40px;
    overflow-y: auto;
}

/* Popup container — Figma: 821×1137px, white, border 1px var(--skin-border-subtle-strong), border-radius 10px */
.ie-help-popup {
    position: relative;
    background: var(--skin-bg-surface);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 10px;
    width: 821px;
    max-width: calc(100vw - 48px);
    padding: 32px;
}

/* --- Header del popup: column, gap 8px, width 462px — Figma layout_0L5N0F --- */
.ie-help-popup__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    max-width: 462px;
}

/* Heading row: icon + title — Figma layout_B4V4EE: row */
.ie-help-popup__heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ie-help-popup__heading-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Title — Figma inter/H8/semibold: Inter 24px/600 var(--skin-dark-900) (fill_PZ5QX9) */
.ie-help-popup__title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-2xl);
    font-weight: 600;
    line-height: 1.208em;
    color: var(--skin-dark-900);
    margin: 0;
}

/* Subtitle — Figma inter/body s/Regular: Inter 14px/400 var(--skin-text-muted) (fill_RNYVUU) */
.ie-help-popup__subtitle {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    line-height: 1.214em;
    color: var(--skin-text-muted);
    margin: 0;
}

/* Close button — Figma layout_B3WGDC: 16×16px, x:785 y:20, opacity 0.7, border-radius 2px */
.ie-help-popup__close {
    position: absolute;
    top: 20px;
    right: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--skin-dark-900);
    opacity: 0.7;
    border-radius: 2px;
    transition: opacity var(--ie-transition), background-color var(--ie-transition);
}

.ie-help-popup__close:hover {
    opacity: 1;
    background-color: var(--ie-color-gray-100);
}

.ie-help-popup__close:focus-visible {
    outline: 2px solid var(--ie-color-blue);
    outline-offset: 2px;
}

/* Body — Figma Container layout_IKQL5C: column, gap 24px, offset x:32 y:110 */
.ie-help-popup__body {
    /* padding-top accounts for the header already in padding-box */
}

/* Tab Panel — Figma layout_90V4H7: column, gap 10px */
.ie-help-popup__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card — Figma layout_QD13KV: column, gap 12px, padding 16px, fill width
   border 1px var(--skin-border-subtle-strong), border-radius 14px, white bg */
.ie-help-popup__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--skin-bg-surface);
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 14px;
    width: 100%;
}

/* Term title — Figma inter/body M/semibold: Inter 16px/600, var(--skin-darkblue-500) (fill_W3FITM) */
.ie-help-popup__term {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: 600;
    line-height: 1.25em;
    color: var(--skin-darkblue-500);
}

/* Term description — Figma inter/body s/Regular: Inter 14px/400, var(--skin-text-muted) (fill_RNYVUU) */
.ie-help-popup__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    line-height: 1.214em;
    color: var(--skin-text-muted);
    margin: 0;
    white-space: pre-line;
}

/* --- Transitions --- */
/* Overlay fade */
.ie-help-overlay--enter,
.ie-help-overlay--leave {
    transition: opacity 0.2s ease;
}
.ie-help-overlay--enter-start,
.ie-help-overlay--leave-end {
    opacity: 0;
}
.ie-help-overlay--enter-end,
.ie-help-overlay--leave-start {
    opacity: 1;
}

/* Popup scale+fade */
.ie-help-popup--enter,
.ie-help-popup--leave {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ie-help-popup--enter-start,
.ie-help-popup--leave-end {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
}
.ie-help-popup--enter-end,
.ie-help-popup--leave-start {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .ie-help-overlay {
        padding: 80px 0 40px;
        align-items: flex-start;
    }
    .ie-help-popup {
        width: calc(100vw - 32px);
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .ie-help-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .ie-help-popup {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh; /* fallback para browsers sin soporte dvh */
        max-height: 85dvh; /* dvh = dynamic viewport height, corrige el bug de iOS Safari */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Espacio para el notch inferior en iPhone X+ */
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
    .ie-help-popup__header {
        max-width: 100%;
    }
}

/* ==========================================================================
   HEADER MÓVIL — Hamburguesa + nav drawer
   ========================================================================== */

/* Botón hamburguesa — oculto en desktop, visible en mobile */
.ie-header__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--ie-color-navy);
    border-radius: 8px;
    transition: background-color var(--ie-transition);
    flex-shrink: 0;
}

.ie-header__hamburger:hover {
    background-color: var(--ie-color-gray-100);
}

/* Sobre hero — icono blanco */
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__hamburger {
    color: var(--skin-white-500);
}
.has-hero-header .ie-header:not(.is-scrolled) .ie-header__hamburger:hover {
    background: var(--skin-white-hover-overlay);
}

/* Login btn — icono de usuario en mobile (solo el icono, sin texto) */
.ie-login-btn__icon {
    display: none; /* Oculto en desktop */
    flex-shrink: 0;
}
.ie-login-btn__text {
    /* Visible en desktop */
}

/* ==========================================================================
   MOBILE NAV OVERLAY + DRAWER — Figma: hamburger-menu-open 613:40384
   Overlay: fullscreen rgba(0,0,0,0.5)
   Panel: 288px wide (Figma), slide desde la derecha, bg #FFFFFF
   ========================================================================== */
.ie-mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
}

.ie-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 288px;
    max-width: calc(100vw - 48px);
    background: var(--skin-bg-surface);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(10, 13, 18, 0.12);
}

/* Header del nav: logo + close button */
.ie-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid var(--ie-color-gray-200);
    flex-shrink: 0;
}

/* Bloque de usuario autenticado en el drawer */
.ie-mobile-nav__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--skin-bg-subtle, #F9FAFB);
    border-bottom: 1px solid var(--ie-color-gray-200);
    color: var(--skin-dark-900);
    flex-shrink: 0;
}

.ie-mobile-nav__user svg {
    flex-shrink: 0;
    color: var(--skin-darkblue-500);
}

.ie-mobile-nav__user-name {
    font-family: var(--skin-font-base, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--skin-dark-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ie-mobile-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ie-mobile-nav__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--ie-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color var(--ie-transition);
}

.ie-mobile-nav__close:hover {
    background-color: var(--ie-color-gray-100);
}

/* Nav links list — Figma: column, gap 8px, padding 16px */
.ie-mobile-nav__links {
    list-style: none;
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Each nav link — Figma: inter/body M/Medium 16px/500, row, space-between, padding 12px 0 */
.ie-mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-medium);
    color: var(--skin-dark-900);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color var(--ie-transition);
    width: 100%;
}

.ie-mobile-nav__link:hover {
    background-color: var(--ie-color-gray-100);
    color: var(--ie-color-navy);
}

.ie-mobile-nav__link--btn {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* Language selector inside mobile nav */
.ie-mobile-nav__lang {
    padding: 16px 16px 0;
    border-top: 1px solid var(--ie-color-gray-200);
    flex-shrink: 0;
}

.ie-mobile-nav__lang-label {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-caption);
    font-weight: var(--skin-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ie-color-gray-600);
    margin: 0 0 10px;
}

.ie-mobile-nav__lang-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ie-mobile-nav__lang-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: var(--skin-weight-semibold);
    color: var(--ie-color-navy);
    text-decoration: none;
    background: var(--ie-color-gray-100);
    transition: background-color var(--ie-transition);
}

.ie-mobile-nav__lang-opt:hover {
    background: var(--ie-color-gray-200);
    color: var(--ie-color-navy);
}

.ie-mobile-nav__lang-opt.is-active {
    background: var(--ie-color-blue-light);
    color: var(--ie-color-blue);
}

/* Footer CTA — bottom of nav panel */
.ie-mobile-nav__footer {
    padding: 16px;
    border-top: 1px solid var(--ie-color-gray-200);
    flex-shrink: 0;
}

.ie-mobile-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    border-radius: 12px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: var(--skin-weight-semibold);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--ie-transition);
}

.ie-mobile-nav__cta--primary {
    background-color: var(--skin-brand-navy);
    color: var(--skin-text-inverse);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.ie-mobile-nav__cta--primary:hover {
    background-color: var(--skin-navy-hover, var(--skin-navy-hover));
    color: var(--skin-text-inverse);
}

.ie-mobile-nav__cta img {
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* --- Nav drawer transitions --- */
.ie-mobile-nav-overlay--enter,
.ie-mobile-nav-overlay--leave {
    transition: opacity 0.25s ease;
}
.ie-mobile-nav-overlay--enter-start,
.ie-mobile-nav-overlay--leave-end {
    opacity: 0;
}
.ie-mobile-nav-overlay--enter-end,
.ie-mobile-nav-overlay--leave-start {
    opacity: 1;
}

.ie-mobile-nav--enter,
.ie-mobile-nav--leave {
    transition: transform 0.25s ease;
}
.ie-mobile-nav--enter-start,
.ie-mobile-nav--leave-end {
    transform: translateX(100%);
}
.ie-mobile-nav--enter-end,
.ie-mobile-nav--leave-start {
    transform: translateX(0);
}

/* ==========================================================================
   RESPONSIVE — Mobile header adjustments
   ========================================================================== */
@media (max-width: 768px) {
    /* Mostrar hamburguesa */
    .ie-header__hamburger {
        display: flex;
    }

    /* Login btn: mostrar solo icono, ocultar texto */
    .ie-login-btn {
        padding: 8px;
        border-radius: 8px;
        min-width: 0;
        border: none;
        background: none;
        box-shadow: none;
    }
    .ie-login-btn__icon {
        display: block;
        width: 22px;
        height: 22px;
    }
    .ie-login-btn__text {
        display: none;
    }
    /* Login icon blanco sobre hero (usa img, no currentColor) */
    .has-hero-header .ie-header:not(.is-scrolled) .ie-login-btn__icon {
        filter: brightness(0) invert(1);
    }
    /* En móvil ambos botones (login y perfil) son solo icono — fondo transparente sobre hero */
    .has-hero-header .ie-header:not(.is-scrolled) .ie-login-btn,
    .has-hero-header .ie-header:not(.is-scrolled) .ie-profile-btn {
        background: transparent;
        border: none;
        box-shadow: none;
        color: var(--skin-white-500);
    }
}

/* ==========================================================================
   CART TOAST — Notificación de ítem eliminado del carrito
   Figma: 1138:88079 Status=Error — Alert component
   Fondo: #feefef, radius 8px, padding 8px 12px, gap 16px
   ========================================================================== */

.ie-cart-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 516px;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    background: #feefef;
    border-radius: 8px;
    font-family: var(--skin-font-primary);
    overflow: hidden;
}

/* Icono alert-circle — stroke #d00417, 24×24px, no fondo */
.ie-cart-toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #d00417;
}

/* Contenido del mensaje — columna con gap 4px */
.ie-cart-toast__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Línea 1: "Item removed from cart" — Inter 16px/600, #c61b24, lh 20px */
.ie-cart-toast__message {
    font-family: var(--skin-font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #c61b24;
}

/* Línea 2: nombre empresa — Inter 12px/400, #c61b24, lh 16px */
.ie-cart-toast__name {
    font-family: var(--skin-font-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #c61b24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón Deshacer */
.ie-cart-toast__undo {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-body, 'Inter', sans-serif);
    font-size: var(--skin-text-sm);
    font-weight: 600;
    color: #c61b24;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.ie-cart-toast__undo:hover { opacity: 0.75; }
.ie-cart-toast__undo:disabled { opacity: 0.5; cursor: not-allowed; }

/* Botón cerrar (Figma: Navigation/close, color fill #da1414) */
.ie-cart-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: #da1414;
    cursor: pointer;
    transition: opacity 0.15s ease;
    align-self: center;
}

.ie-cart-toast__close:hover {
    opacity: 0.7;
}

/* Barra de progreso auto-dismiss — parte inferior */
.ie-cart-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(208, 4, 23, 0.15);
}

.ie-cart-toast__progress-bar {
    height: 100%;
    background: #d00417;
    transition: width 0.05s linear;
}

/* Transiciones Alpine — slide-in desde arriba derecha */
.ie-cart-toast--enter,
.ie-cart-toast--leave {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ie-cart-toast--enter-start,
.ie-cart-toast--leave-end {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
}

.ie-cart-toast--enter-end,
.ie-cart-toast--leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Mobile: full-width en pantallas pequeñas */
@media (max-width: 480px) {
    .ie-cart-toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* [x] Alpine.js transition support */
[x-cloak] { display: none !important; }