@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700&family=DM+Sans:ital,wght@0,400;0,600&family=DM+Mono&display=swap');

/* ==========================================================================
   Alphinus Skin CSS — Design Tokens Oficiales Infoempresa 2026
   Fuente de verdad: Figma "Infoempresa-Redesign-2026" (nodes 50-7362 / 72-8766)

   ⚠️  REGLA CRÍTICA: Este archivo es la ÚNICA fuente de tokens de diseño.
       - Ningún otro CSS debe declarar colores, fuentes o espaciados hardcoded.
       - Todo el sistema Alphinus referencia SOLO variables de este archivo.
       - Al actualizar un valor de Figma, cambiar AQUÍ y solo aquí.
   ========================================================================== */

:root {

    /* ========================================================================
       PALETA DE COLORES — darkblue
       Figma: Color palette / Primary → darkblue
       ======================================================================== */
    --skin-darkblue-50:    #e9eaf2;
    --skin-darkblue-100:   #b9bed6;
    --skin-darkblue-200:   #989ec3;
    --skin-darkblue-300:   #6872a7;
    --skin-darkblue-400:   #4b5696;
    --skin-darkblue-500:   #1e2c7c;   /* Texto principal, footer background */
    --skin-darkblue-600:   #1b2871;
    --skin-darkblue-700:   #151f58;
    --skin-darkblue-800:   #111844;
    --skin-darkblue-900:   #0d1234;

    /* ========================================================================
       PALETA DE COLORES — blue (brand symbol — #2B1BB5)
       Figma: Color palette / Primary → blue
       ======================================================================== */
    --skin-blue-50:        #eae8f8;
    --skin-blue-100:       #bdb8e8;
    --skin-blue-200:       #9d96dd;
    --skin-blue-300:       #7166cd;
    --skin-blue-400:       #5549c4;
    --skin-blue-500:       #2b1bb5;   /* ★ Color símbolo logo */
    --skin-blue-600:       #2719a5;
    --skin-blue-700:       #1f1381;
    --skin-blue-800:       #180f64;
    --skin-blue-900:       #120b4c;

    /* ========================================================================
       PALETA DE COLORES — lightblue
       Figma: Color palette / Secondary → lightblue
       ======================================================================== */
    --skin-lightblue-50:   #f2f9ff;
    --skin-lightblue-100:  #d6ebff;
    --skin-lightblue-200:  #c3e2ff;
    --skin-lightblue-300:  #a7d5ff;
    --skin-lightblue-400:  #96cdff;
    --skin-lightblue-500:  #7cc0ff;
    --skin-lightblue-600:  #71afe8;
    --skin-lightblue-700:  #5888b5;
    --skin-lightblue-800:  #446a8c;
    --skin-lightblue-900:  #34516b;

    /* ========================================================================
       PALETA DE COLORES — dark (texto, UI neutral oscuro)
       Figma: Color palette / Primary → dark
       ======================================================================== */
    --skin-dark-50:        #e9eaed;
    --skin-dark-100:       #bbbdc6;
    --skin-dark-200:       #9a9daa;
    --skin-dark-300:       #6c7084;
    --skin-dark-400:       #50546c;
    --skin-dark-500:       #242947;   /* Principal texto body */
    --skin-dark-600:       #212541;
    --skin-dark-700:       #1a1d32;
    --skin-dark-800:       #141727;
    --skin-dark-900:       #0f111e;

    /* ========================================================================
       PALETA DE COLORES — upload (BRAND PRIMARY — CTA, botones principales)
       Figma: Color palette / Secondary → upload
       ======================================================================== */
    --skin-upload-50:      #e8edfb;
    --skin-upload-100:     #b7c7f2;
    --skin-upload-200:     #95abec;
    --skin-upload-300:     #6485e4;
    --skin-upload-400:     #466dde;
    --skin-upload-500:     #1849d6;   /* ★ Brand primary — botones CTA */
    --skin-upload-600:     #1642c3;   /* ★ Brand hover */
    --skin-upload-700:     #113498;
    --skin-upload-800:     #0d2876;
    --skin-upload-900:     #0a1f5a;

    /* ========================================================================
       PALETA DE COLORES — orange
       Figma: Color palette / Secondary → orange
       ======================================================================== */
    --skin-orange-50:      #fff5f1;
    --skin-orange-100:     #ffe1d5;
    --skin-orange-200:     #ffd2c0;
    --skin-orange-300:     #ffbea4;
    --skin-orange-400:     #ffb192;
    --skin-orange-500:     #ff9e77;
    --skin-orange-600:     #e8906c;
    --skin-orange-700:     #b57054;
    --skin-orange-800:     #8c5741;
    --skin-orange-900:     #6b4232;

    /* ========================================================================
       PALETA DE COLORES — yellow
       Figma: Color palette / Secondary → yellow
       ======================================================================== */
    --skin-yellow-50:      #fef9ef;
    --skin-yellow-100:     #fcedcc;
    --skin-yellow-200:     #fbe5b4;
    --skin-yellow-300:     #f9d991;
    --skin-yellow-400:     #f8d17c;
    --skin-yellow-500:     #f6c65b;
    --skin-yellow-600:     #e0b453;
    --skin-yellow-700:     #af8d41;
    --skin-yellow-800:     #876d32;
    --skin-yellow-900:     #675326;

    /* ========================================================================
       PALETA DE COLORES — success / error / warning (semánticos)
       Figma: Color palette / Secondary → success / error / warning
       ======================================================================== */
    --skin-success-50:     #edf8f3;
    --skin-success-100:    #c6eada;
    --skin-success-200:    #aadfc8;
    --skin-success-300:    #84d1af;
    --skin-success-400:    #6cc89f;
    --skin-success-500:    #47ba87;   /* Success principal */
    --skin-success-600:    #41a97b;
    --skin-success-700:    #328460;
    --skin-success-800:    #27664a;
    --skin-success-900:    #1e4e39;

    --skin-error-50:       #fae9e8;
    --skin-error-100:      #eebbb8;
    --skin-error-200:      #e69b95;
    --skin-error-300:      #db6d65;
    --skin-error-400:      #d45147;
    --skin-error-500:      #c92519;   /* Error principal */
    --skin-error-600:      #b72217;
    --skin-error-700:      #8f1a12;
    --skin-error-800:      #6f140e;
    --skin-error-900:      #54100b;

    --skin-warning-50:     #fef6e6;
    --skin-warning-100:    #fde3b1;
    --skin-warning-200:    #fcd68c;
    --skin-warning-300:    #fac357;
    --skin-warning-400:    #f9b736;
    --skin-warning-500:    #f8a504;   /* Warning principal */
    --skin-warning-600:    #e29604;
    --skin-warning-700:    #b07503;
    --skin-warning-800:    #885b02;
    --skin-warning-900:    #684502;

    /* ========================================================================
       PALETA DE COLORES — white / neutrals
       Figma: Color palette / Secondary → white (escala de grises neutros)
       ======================================================================== */
    --skin-white-50:       #fefefe;
    --skin-white-100:      #fcfcfc;
    --skin-white-200:      #fafafa;
    --skin-white-300:      #f8f8f8;
    --skin-white-400:      #f7f7f7;
    --skin-white-500:      #f5f5f5;
    --skin-white-600:      #dfdfdf;
    --skin-white-700:      #aeaeae;
    --skin-white-800:      #878787;
    --skin-white-900:      #676767;

    /* ========================================================================
       PALETA DE COLORES — grays / neutrals (custom - no en Figma)
       Mantenidos para compatibilidad con componentes legacy Alphinus.
       ======================================================================== */
    /* custom - no en Figma */
    --skin-gray-0:         #ffffff;
    --skin-gray-50:        #f8f9fa;
    --skin-gray-100:       #f1f3f5;
    --skin-gray-200:       #e9ecef;
    --skin-gray-300:       #dee2e6;
    --skin-gray-400:       #ced4da;
    --skin-gray-500:       #adb5bd;
    --skin-gray-600:       #868e96;
    --skin-gray-700:       #495057;
    --skin-gray-800:       #343a40;
    --skin-gray-900:       #212529;

    /* ========================================================================
       SEMÁNTICOS — alias para uso en componentes
       (Estos son los tokens que deben usarse en todos los CSS de componentes)
       ======================================================================== */

    /* Brand */
    --skin-brand-primary:       var(--skin-upload-500);    /* #1849d6 */
    --skin-brand-primary-hover: var(--skin-upload-600);    /* #1642c3 */
    --skin-brand-primary-light: var(--skin-upload-50);     /* #e8edfb */
    --skin-brand-secondary:     var(--skin-dark-500);      /* #242947 */

    /* Textos */
    --skin-text-primary:        var(--skin-dark-500);      /* #242947 — texto body */
    --skin-text-secondary:      var(--skin-white-800);     /* #878787 — texto secundario */
    --skin-text-disabled:       var(--skin-white-700);     /* #aeaeae */
    --skin-text-inverse:        #ffffff;
    --skin-text-link:           var(--skin-upload-500);    /* #1849d6 */
    --skin-text-link-hover:     var(--skin-upload-600);    /* #1642c3 */

    /* Fondos */
    --skin-bg-page:             var(--skin-white-200);     /* #fafafa */
    --skin-bg-surface:          #ffffff;
    --skin-bg-surface-raised:   #ffffff;
    --skin-bg-muted:            var(--skin-white-300);     /* #f8f8f8 */
    --skin-bg-subtle:           var(--skin-white-200);     /* #fafafa */
    --skin-bg-inverse:          var(--skin-darkblue-500);  /* #1e2c7c — footer */
    --skin-bg-brand:            var(--skin-upload-500);    /* #1849d6 */
    --skin-bg-brand-light:      var(--skin-upload-50);     /* #e8edfb */

    /* Bordes */
    --skin-border-default:      var(--skin-white-600);     /* #dfdfdf */
    --skin-border-strong:       var(--skin-white-700);     /* #aeaeae */
    --skin-border-subtle:       var(--skin-white-500);     /* #f5f5f5 */
    --skin-border-brand:        var(--skin-upload-500);    /* #1849d6 */
    --skin-border-focus:        var(--skin-upload-500);    /* #1849d6 */
    --skin-border-error:        var(--skin-error-500);     /* #c92519 */
    --skin-border-success:      var(--skin-success-500);   /* #47ba87 */

    /* Estados semánticos */
    --skin-status-success:      var(--skin-success-500);   /* #47ba87 */
    --skin-status-success-bg:   var(--skin-success-50);    /* #edf8f3 */
    --skin-status-error:        var(--skin-error-500);     /* #c92519 */
    --skin-status-error-bg:     var(--skin-error-50);      /* #fae9e8 */
    --skin-status-warning:      var(--skin-warning-500);   /* #f8a504 */
    --skin-status-warning-bg:   var(--skin-warning-50);    /* #fef6e6 */

    /* UI especiales — custom, no en Figma */
    /* custom - no en Figma */
    --skin-badge-cart:          #e8335a;                   /* Badge rojo carrito (diseño legacy) */
    --skin-footer-legal-bg:     var(--skin-darkblue-500);  /* Barra legal footer — mismo azul que footer */

    /* Navy — color corporativo home/datasources (#1E2C7C = darkblue-500) */
    --skin-brand-navy:          var(--skin-darkblue-500);  /* #1e2c7c */
    --skin-brand-navy-hover:    var(--skin-darkblue-600);  /* #1b2871 */
    --skin-brand-navy-light:    var(--skin-darkblue-50);   /* #e9eaf2 */

    /* Semánticos adicionales — Figma-verified, recurrentes en secciones */
    --skin-text-muted:           #626262;   /* Texto terciario Figma */
    --skin-border-subtle-strong: #e8e8e8;   /* Borde Figma */
    --skin-navy-hover:           #162266;   /* Hover de --skin-brand-navy */
    --skin-active-blue:          #0f62fe;   /* Figma stroke activo (IBM Carbon) */
    --skin-tag-blue-bg:          #e7efff;   /* Badge/icon bg Figma */
    --skin-paypal-blue:          #ccecff;   /* PayPal button bg */
    --skin-disabled-text:        #a5b0b5;   /* Texto deshabilitado */
    --skin-icon-close:           #303b4f;   /* Cart header X icon — Figma fill_2X9I7Q */
    --skin-badge-blue-bg:        #eff8ff;   /* Cart badge Blue/50 — Figma fill item count */
    --skin-badge-blue-text:      #0e59e7;   /* Cart badge Blue text — Figma fill_K3U41N */

    /* Tokens semánticos — estados y colores de UI recurrentes */
    --skin-text-tertiary:        #9ca3af;   /* Texto muy apagado (disabled/placeholder) */
    --skin-error-subtle:         #feefef;   /* Fondo error suave (inputs, banners) */
    --skin-success-subtle:       #edfbf3;   /* Fondo success suave */
    --skin-success-text:         #1a7c4a;   /* Texto sobre fondo success */
    --skin-color-primary:        var(--skin-darkblue-500);   /* alias legacy → --skin-darkblue-500 */
    --skin-primary-500:          var(--skin-badge-blue-text); /* alias legacy → #0e59e7 */

    /* Tokens adicionales — custom, no en Figma */
    --skin-white-hover-overlay:  rgba(255, 255, 255, 0.12);  /* Hover overlay sobre hero (iconos nav) */
    --skin-shadow-button-lift:   0px 2px 0px 0px rgba(16, 24, 40, 0.02);  /* Sombra lift botones */
    --skin-footer-text-muted:    #B4BDC1;   /* Texto secundario en footer */

    /* ========================================================================
       TIPOGRAFÍA — Familias
       Figma: Primary = IBM Plex Sans, Secondary = Inter
       ======================================================================== */
    --skin-font-primary:   "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --skin-font-secondary: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --skin-font-display:   "Manrope", sans-serif;
    --skin-font-base:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --skin-font-body:      var(--skin-font-base);   /* alias de compatibilidad → --skin-font-base */
    --skin-font-mono:      "JetBrains Mono", "Fira Code", "Consolas", monospace; /* custom - no en Figma */
    --skin-font-dm-sans:   'DM Sans', sans-serif;
    --skin-font-dm-mono:   'DM Mono', monospace;

    /* ========================================================================
       TIPOGRAFÍA — Tamaños
       Figma Typography scale: Overline(10) → H1(96)
       ======================================================================== */
    --skin-text-overline:  10px;   /* Overline */
    --skin-text-caption:   12px;   /* Caption / Body 5 */
    --skin-text-xs:        12px;   /* Extra small */
    --skin-text-sm:        14px;   /* Body 4 / Subtitle 2 / Button Md / H8 */
    --skin-text-base:      14px;   /* Body M — texto corriente, inputs */
    --skin-text-md:        16px;   /* Body 3 / Subtitle 1 / Button Lg / H7 */
    --skin-text-lg:        16px;   /* Body XL */
    --skin-text-xl:        20px;   /* H6 / Body 2 */
    --skin-text-2xl:       24px;   /* H5 / Body 1 */
    --skin-text-h7:        28px;   /* Figma H7 */
    --skin-text-3xl:       34px;   /* H4 */
    --skin-text-h6:        32px;   /* Figma H6 */
    --skin-text-h5:        40px;   /* Figma H5 */
    --skin-text-4xl:       48px;   /* H3 */
    --skin-text-5xl:       60px;   /* H2 */
    --skin-text-6xl:       96px;   /* H1 */

    /* ========================================================================
       TIPOGRAFÍA — Pesos
       ======================================================================== */
    --skin-weight-regular:   400;
    --skin-weight-medium:    500;
    --skin-weight-semibold:  600;
    --skin-weight-bold:      700;
    --skin-weight-extrabold: 800; /* custom - no en Figma */

    /* ========================================================================
       TIPOGRAFÍA — Line Heights
       ======================================================================== */
    --skin-leading-tight:   1.25;
    --skin-leading-snug:    1.375;  /* custom - no en Figma */
    --skin-leading-normal:  1.5;
    --skin-leading-relaxed: 1.625;  /* custom - no en Figma */
    --skin-leading-loose:   2;      /* custom - no en Figma */

    /* ========================================================================
       TIPOGRAFÍA — Letter Spacing
       ======================================================================== */
    --skin-tracking-tight:   -0.01em;  /* custom - no en Figma */
    --skin-tracking-normal:   0;
    --skin-tracking-wide:     0.01em;  /* custom - no en Figma */
    --skin-tracking-wider:    0.05em;  /* custom - no en Figma */
    --skin-tracking-widest:   0.10em;  /* custom - no en Figma */

    /* ========================================================================
       ESPACIADO — Escala de padding/margin
       Figma: padding-0 a padding-13
       ======================================================================== */
    --skin-space-0:    0px;
    --skin-space-1:    2px;
    --skin-space-2:    4px;
    --skin-space-3:    8px;
    --skin-space-4:    16px;
    --skin-space-5:    24px;
    --skin-space-6:    32px;
    --skin-space-7:    40px;
    --skin-space-8:    48px;
    --skin-space-9:    56px;
    --skin-space-10:   64px;
    --skin-space-11:   72px;
    --skin-space-12:   80px;
    --skin-space-13:   88px;

    /* Alias semánticos de espaciado */
    --skin-space-xs:   var(--skin-space-2);   /* 4px */
    --skin-space-sm:   var(--skin-space-3);   /* 8px */
    --skin-space-md:   var(--skin-space-4);   /* 16px */
    --skin-space-lg:   var(--skin-space-5);   /* 24px */
    --skin-space-xl:   var(--skin-space-6);   /* 32px */
    --skin-space-2xl:  var(--skin-space-7);   /* 40px */
    --skin-space-3xl:  var(--skin-space-8);   /* 48px */

    /* ========================================================================
       BORDER RADIUS
       Figma: radius-0 → radius-round (valores display escalados, conversión a px reales)
       ======================================================================== */
    --skin-radius-0:     0px;
    --skin-radius-xxs:   4px;    /* Figma: 3.3px escalado → 4px real */
    --skin-radius-xs:    8px;    /* Figma: 6.6px escalado → 8px real */
    --skin-radius-sm:    16px;   /* Figma: 13.2px escalado → 16px real */
    --skin-radius-md:    32px;   /* Figma: 26.4px escalado → 32px real */
    --skin-radius-lg:    48px;   /* Figma: 39.6px escalado → 48px real */
    --skin-radius-round: 9999px; /* Pills, badges redondos, botones CTA */

    /* ========================================================================
       SOMBRAS
       Figma: shadow-xs → shadow-3xl (color base rgba(16, 24, 40, ...))
       ======================================================================== */
    --skin-shadow-xs:   0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --skin-shadow-sm:   0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 3px 0 rgba(16, 24, 40, 0.06);
    --skin-shadow-md:   0 4px 6px -3px rgba(16, 24, 40, 0.06), 0 6px 13px -3px rgba(16, 24, 40, 0.10);
    --skin-shadow-lg:   0 7px 10px -3px rgba(16, 24, 40, 0.03), 0 20px 27px -7px rgba(16, 24, 40, 0.08);
    --skin-shadow-xl:   0 13px 13px -7px rgba(16, 24, 40, 0.03), 0 33px 40px -7px rgba(16, 24, 40, 0.08);
    --skin-shadow-2xl:  0 40px 79px -20px rgba(16, 24, 40, 0.18);
    --skin-shadow-3xl:  0 53px 106px -20px rgba(16, 24, 40, 0.14);

    /* Sombras para focus (accesibilidad) — custom, no en Figma */
    /* custom - no en Figma */
    --skin-shadow-focus-brand: 0 0 0 3px rgba(24, 73, 214, 0.25);
    --skin-shadow-focus-error: 0 0 0 3px rgba(201, 37, 25, 0.20);

    /* ========================================================================
       TRANSICIONES — custom, no en Figma
       ======================================================================== */
    /* custom - no en Figma */
    --skin-transition-fast:   0.1s ease;
    --skin-transition-base:   0.2s ease;
    --skin-transition-slow:   0.3s ease;
    --skin-transition-slower: 0.5s ease;

    /* ========================================================================
       LAYOUT — Estructura de página — custom, no en Figma
       ======================================================================== */
    /* custom - no en Figma */
    --skin-header-height:      80px;
    --skin-header-height-mob:  60px;
    --skin-container-max:      1280px;
    --skin-container-pad:      24px;
    --skin-container-pad-mob:  16px;

    /* ========================================================================
       Z-INDEX — Capas UI — custom, no en Figma
       ======================================================================== */
    /* custom - no en Figma */
    --skin-z-base:      0;
    --skin-z-raised:    10;
    --skin-z-dropdown:  100;
    --skin-z-sticky:    200;
    --skin-z-overlay:   300;
    --skin-z-modal:     400;
    --skin-z-toast:     500;
    --skin-z-max:       9999;

}

/* ==========================================================================
   CARGA DE FUENTES — Google Fonts
   IBM Plex Sans (primaria) + Inter (secundaria)
   Ver línea 1 de este archivo — @import debe ser lo primero por spec CSS.
   ========================================================================== */