/* ============================================================================
   METOD WEB MAKER · Design System
   01 · PRIMITIVOS — Color
   ----------------------------------------------------------------------------
   Capa base: valores crudos, sin modo (mode-agnostic).
   Regla: los componentes NO usan estos tokens directo.
          Solo los referencian los semánticos (02-semantics.css).
   Taxonomía: --color-{familia}-{step}
   ============================================================================ */

:root {

  /* --- Neutral --------------------------------------------- 0 = white → 1000 = black --- */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9F9F9;
  --color-neutral-100:  #F3F3F3;
  --color-neutral-200:  #E8E8E8;
  --color-neutral-300:  #CDCDCD;
  --color-neutral-400:  #AFAFAF;
  --color-neutral-500:  #8F8F8F;
  --color-neutral-600:  #5D5D5D;
  --color-neutral-700:  #424242;
  --color-neutral-800:  #303030;
  --color-neutral-900:  #212121;
  --color-neutral-950:  #0D0D0D;
  --color-neutral-1000: #000000;

  /* --- Red ------------------------------------------------------------------------------- */
  --color-red-50:  #FFF0F0;
  --color-red-100: #FFE1E0;
  --color-red-200: #FF8583;
  --color-red-300: #FF6764;
  --color-red-400: #FA423E;
  --color-red-500: #E02E2A;
  --color-red-600: #BA2623;
  --color-red-700: #4D100E;

  /* --- Orange ---------------------------------------------------------------------------- */
  --color-orange-50:  #FFF7ED;
  --color-orange-100: #FFDFB5;
  --color-orange-200: #FFC182;
  --color-orange-300: #EC9455;
  --color-orange-400: #F76B15;
  --color-orange-500: #EF5F00;
  --color-orange-600: #CC4E00;
  --color-orange-700: #582D1D;

  /* --- Yellow ---------------------------------------------------------------------------- */
  --color-yellow-50:  #FEFCE9;
  --color-yellow-100: #FFF394;
  --color-yellow-200: #F3D768;
  --color-yellow-300: #D5AE39;
  --color-yellow-400: #FFE629;
  --color-yellow-500: #FFDC00;
  --color-yellow-600: #9E6C00;
  --color-yellow-700: #473B1F;

  /* --- Green ----------------------------------------------------------------------------- */
  --color-green-50:  #F4FBF6;
  --color-green-100: #D6F1DF;
  --color-green-200: #ADDDC0;
  --color-green-300: #5BB98B;
  --color-green-400: #46A758;
  --color-green-500: #3E9B4F;
  --color-green-600: #218358;
  --color-green-700: #193B2D;

  /* --- Alpha Black ----------------------------------- base #0D0D0D · step = opacidad % --- */
  --color-alpha-black-0:   rgb(13 13 13 / 0%);
  --color-alpha-black-2:   rgb(13 13 13 / 2%);
  --color-alpha-black-4:   rgb(13 13 13 / 4%);
  --color-alpha-black-5:   rgb(13 13 13 / 5%);
  --color-alpha-black-8:   rgb(13 13 13 / 8%);
  --color-alpha-black-10:  rgb(13 13 13 / 10%);
  --color-alpha-black-12:  rgb(13 13 13 / 12%);
  --color-alpha-black-15:  rgb(13 13 13 / 15%);
  --color-alpha-black-16:  rgb(13 13 13 / 16%);
  --color-alpha-black-20:  rgb(13 13 13 / 20%);
  --color-alpha-black-22:  rgb(13 13 13 / 22%);
  --color-alpha-black-25:  rgb(13 13 13 / 25%);
  --color-alpha-black-30:  rgb(13 13 13 / 30%);
  --color-alpha-black-35:  rgb(13 13 13 / 35%);
  --color-alpha-black-40:  rgb(13 13 13 / 40%);
  --color-alpha-black-50:  rgb(13 13 13 / 50%);
  --color-alpha-black-60:  rgb(13 13 13 / 60%);
  --color-alpha-black-80:  rgb(13 13 13 / 80%);
  --color-alpha-black-90:  rgb(13 13 13 / 90%);
  --color-alpha-black-100: rgb(13 13 13 / 100%);

  /* --- Alpha White ----------------------------------- base #FFFFFF · step = opacidad % --- */
  --color-alpha-white-0:   rgb(255 255 255 / 0%);
  --color-alpha-white-2:   rgb(255 255 255 / 2%);
  --color-alpha-white-4:   rgb(255 255 255 / 4%);
  --color-alpha-white-5:   rgb(255 255 255 / 5%);
  --color-alpha-white-8:   rgb(255 255 255 / 8%);
  --color-alpha-white-10:  rgb(255 255 255 / 10%);
  --color-alpha-white-12:  rgb(255 255 255 / 12%);
  --color-alpha-white-15:  rgb(255 255 255 / 15%);
  --color-alpha-white-16:  rgb(255 255 255 / 16%);
  --color-alpha-white-20:  rgb(255 255 255 / 20%);
  --color-alpha-white-22:  rgb(255 255 255 / 22%);
  --color-alpha-white-25:  rgb(255 255 255 / 25%);
  --color-alpha-white-30:  rgb(255 255 255 / 30%);
  --color-alpha-white-35:  rgb(255 255 255 / 35%);
  --color-alpha-white-40:  rgb(255 255 255 / 40%);
  --color-alpha-white-50:  rgb(255 255 255 / 50%);
  --color-alpha-white-60:  rgb(255 255 255 / 60%);
  --color-alpha-white-80:  rgb(255 255 255 / 80%);
  --color-alpha-white-90:  rgb(255 255 255 / 90%);
  --color-alpha-white-100: rgb(255 255 255 / 100%);

}
/* ============================================================================
   METOD WEB MAKER · Design System
   02 · SEMÁNTICOS — Color
   ----------------------------------------------------------------------------
   Roles. Referencian primitivos (01-primitives.css) vía var().
   2 modos: light = default (:root) · dark = [data-theme="dark"].
   Estado default → sin sufijo de estado en el nombre.
   Categorías: text ✓ · background ✓ · icon ✓ · stroke ✓ · interactive ✓
   interactive: roles para todo lo interactivo (button bg/label/icon/stroke) en sus
   variantes (primary/secondary/ghost/glass/danger-*) y estados (default/hover/press/
   selected/inactive). default = sin sufijo de estado.
   ============================================================================ */

/* ===== LIGHT · default ===================================================== */
:root,
[data-theme="light"] {

  /* --- Text --- */
  --color-text-primary:         var(--color-alpha-black-100);
  --color-text-secondary:       var(--color-neutral-700);
  --color-text-tertiary:        var(--color-neutral-400);
  --color-text-inverted:        var(--color-neutral-0);
  --color-text-inverted-static: var(--color-neutral-0);
  --color-text-transparent:     var(--color-alpha-black-0);
  --color-text-error:           var(--color-red-500);
  --color-text-warning:         var(--color-orange-500);
  --color-text-success:         var(--color-green-500);

  /* --- Background --- */
  --color-bg-primary:            var(--color-neutral-0);
  --color-bg-secondary:          var(--color-neutral-50);
  --color-bg-tertiary:           var(--color-neutral-200);
  --color-bg-scrim:              var(--color-alpha-black-80);
  --color-bg-elevated:           var(--color-neutral-0);
  --color-bg-elevated-secondary: var(--color-neutral-100);
  --color-bg-error:              var(--color-red-50);
  --color-bg-warning:            var(--color-orange-50);
  --color-bg-tooltip:            var(--color-alpha-black-100);

  /* --- Icon --- */
  --color-icon-primary:         var(--color-alpha-black-100);
  --color-icon-secondary:       var(--color-neutral-700);
  --color-icon-tertiary:        var(--color-neutral-400);
  --color-icon-inverted:        var(--color-neutral-0);
  --color-icon-inverted-hover:  var(--color-neutral-0);
  --color-icon-transparent:     var(--color-alpha-black-0);
  --color-icon-error:           var(--color-red-500);
  --color-icon-warning:         var(--color-orange-500);
  --color-icon-success:         var(--color-green-500);

  /* --- Stroke --- */
  --color-stroke-primary:       var(--color-alpha-black-15);
  --color-stroke-secondary:     var(--color-alpha-black-10);
  --color-stroke-tertiary:      var(--color-alpha-black-5);
  --color-stroke-solid-inverse: var(--color-alpha-white-100);

  /* --- Interactive --- */
  --color-interactive-stroke-focus: var(--color-alpha-black-100);

  /* primary */
  --color-interactive-label: var(--color-alpha-white-100);
  --color-interactive-icon: var(--color-alpha-white-100);
  --color-interactive-bg: var(--color-alpha-black-100);
  --color-interactive-bg-hover: var(--color-alpha-black-80);
  --color-interactive-bg-press: var(--color-alpha-black-90);
  --color-interactive-bg-selected: var(--color-alpha-black-100);
  --color-interactive-bg-inactive: var(--color-alpha-black-30);

  /* secondary */
  --color-interactive-label-secondary: var(--color-alpha-black-100);
  --color-interactive-icon-secondary: var(--color-alpha-black-100);
  --color-interactive-bg-secondary: var(--color-alpha-black-0);
  --color-interactive-bg-secondary-hover: var(--color-alpha-black-10);
  --color-interactive-bg-secondary-press: var(--color-alpha-black-5);
  --color-interactive-bg-secondary-selected: var(--color-alpha-black-10);
  --color-interactive-bg-secondary-inactive: var(--color-alpha-black-0);
  --color-interactive-stroke-secondary: var(--color-alpha-black-15);
  --color-interactive-stroke-secondary-hover: var(--color-alpha-black-15);
  --color-interactive-stroke-secondary-press: var(--color-alpha-black-25);
  --color-interactive-stroke-secondary-selected: var(--color-alpha-black-25);
  --color-interactive-stroke-secondary-inactive: var(--color-alpha-black-10);

  /* ghost */
  --color-interactive-label-ghost: var(--color-neutral-700);
  --color-interactive-icon-ghost: var(--color-neutral-700);
  --color-interactive-bg-ghost: var(--color-alpha-black-0);
  --color-interactive-bg-ghost-hover: var(--color-alpha-black-10);
  --color-interactive-bg-ghost-press: var(--color-alpha-black-5);
  --color-interactive-bg-ghost-selected: var(--color-alpha-black-10);
  --color-interactive-bg-ghost-inactive: var(--color-alpha-black-0);

  /* glass */
  --color-interactive-label-glass: var(--color-alpha-black-100);
  --color-interactive-icon-glass: var(--color-alpha-black-100);
  --color-interactive-bg-glass-overlay: var(--color-alpha-white-0);
  --color-interactive-bg-glass-overlay-hover: var(--color-alpha-white-16);
  --color-interactive-bg-glass-overlay-press: var(--color-alpha-white-25);
  --color-interactive-bg-glass-overlay-selected: var(--color-alpha-white-16);
  --color-interactive-bg-glass-overlay-inactive: var(--color-alpha-black-30);

  /* danger-primary */
  --color-interactive-bg-danger-primary: var(--color-red-600);
  --color-interactive-bg-danger-primary-hover: var(--color-red-500);
  --color-interactive-bg-danger-primary-press: var(--color-red-700);
  --color-interactive-bg-danger-primary-selected: var(--color-red-600);
  --color-interactive-bg-danger-primary-inactive: var(--color-alpha-black-30);
  --color-interactive-label-danger-primary: var(--color-alpha-white-100);
  --color-interactive-icon-danger-primary: var(--color-alpha-white-100);

  /* danger-secondary */
  --color-interactive-bg-danger-secondary: var(--color-alpha-black-0);
  --color-interactive-stroke-danger-secondary: var(--color-red-600);
  --color-interactive-stroke-danger-secondary-hover: var(--color-red-400);
  --color-interactive-stroke-danger-secondary-press: var(--color-red-500);
  --color-interactive-stroke-danger-secondary-selected: var(--color-red-600);
  --color-interactive-stroke-danger-secondary-inactive: var(--color-alpha-black-10);
  --color-interactive-label-danger-secondary: var(--color-red-600);
  --color-interactive-label-danger-secondary-hover: var(--color-red-400);
  --color-interactive-label-danger-secondary-press: var(--color-red-500);
  --color-interactive-label-danger-secondary-selected: var(--color-red-600);
  --color-interactive-label-danger-secondary-inactive: var(--color-alpha-black-40);
  --color-interactive-icon-danger-secondary: var(--color-red-600);
  --color-interactive-icon-danger-secondary-hover: var(--color-red-400);
  --color-interactive-icon-danger-secondary-press: var(--color-red-500);
  --color-interactive-icon-danger-secondary-selected: var(--color-red-600);
  --color-interactive-icon-danger-secondary-inactive: var(--color-alpha-black-40);

  /* trigger */
  --color-interactive-bg-trigger: var(--color-alpha-white-100);

}

/* ===== DARK ================================================================ */
[data-theme="dark"] {

  /* --- Text --- */
  --color-text-primary:         var(--color-alpha-white-100);
  --color-text-secondary:       var(--color-neutral-200);
  --color-text-tertiary:        var(--color-neutral-400);
  --color-text-inverted:        var(--color-alpha-black-100);
  --color-text-inverted-static: var(--color-neutral-0);
  --color-text-transparent:     var(--color-alpha-white-0);
  --color-text-error:           var(--color-red-200);
  --color-text-warning:         var(--color-orange-300);
  --color-text-success:         var(--color-green-300);

  /* --- Background --- */
  --color-bg-primary:            var(--color-neutral-1000);
  --color-bg-secondary:          var(--color-neutral-900);
  --color-bg-tertiary:           var(--color-neutral-800);
  --color-bg-scrim:              var(--color-alpha-black-80);
  --color-bg-elevated:           var(--color-neutral-800);
  --color-bg-elevated-secondary: var(--color-neutral-900);
  --color-bg-error:              var(--color-red-700);
  --color-bg-warning:            var(--color-orange-700);
  --color-bg-tooltip:            var(--color-alpha-black-100);

  /* --- Icon --- */
  --color-icon-primary:         var(--color-alpha-white-100);
  --color-icon-secondary:       var(--color-neutral-200);
  --color-icon-tertiary:        var(--color-neutral-400);
  --color-icon-inverted:        var(--color-alpha-black-100);
  --color-icon-inverted-hover:  var(--color-alpha-black-100);
  --color-icon-transparent:     var(--color-alpha-white-0);
  --color-icon-error:           var(--color-red-200);
  --color-icon-warning:         var(--color-orange-300);
  --color-icon-success:         var(--color-green-300);

  /* --- Stroke --- */
  --color-stroke-primary:       var(--color-alpha-white-15);
  --color-stroke-secondary:     var(--color-alpha-white-10);
  --color-stroke-tertiary:      var(--color-alpha-white-5);
  --color-stroke-solid-inverse: var(--color-alpha-black-100);

  /* --- Interactive --- */
  --color-interactive-stroke-focus: var(--color-alpha-white-100);

  /* primary */
  --color-interactive-label: var(--color-alpha-black-100);
  --color-interactive-icon: var(--color-alpha-black-100);
  --color-interactive-bg: var(--color-alpha-white-100);
  --color-interactive-bg-hover: var(--color-alpha-white-80);
  --color-interactive-bg-press: var(--color-alpha-white-90);
  --color-interactive-bg-selected: var(--color-alpha-white-100);
  --color-interactive-bg-inactive: var(--color-alpha-white-30);

  /* secondary */
  --color-interactive-label-secondary: var(--color-alpha-white-100);
  --color-interactive-icon-secondary: var(--color-alpha-white-100);
  --color-interactive-bg-secondary: var(--color-alpha-white-0);
  --color-interactive-bg-secondary-hover: var(--color-alpha-white-10);
  --color-interactive-bg-secondary-press: var(--color-alpha-white-5);
  --color-interactive-bg-secondary-selected: var(--color-alpha-white-10);
  --color-interactive-bg-secondary-inactive: var(--color-alpha-white-0);
  --color-interactive-stroke-secondary: var(--color-alpha-white-15);
  --color-interactive-stroke-secondary-hover: var(--color-alpha-white-15);
  --color-interactive-stroke-secondary-press: var(--color-alpha-white-25);
  --color-interactive-stroke-secondary-selected: var(--color-alpha-white-25);
  --color-interactive-stroke-secondary-inactive: var(--color-alpha-white-10);

  /* ghost */
  --color-interactive-label-ghost: var(--color-neutral-100);
  --color-interactive-icon-ghost: var(--color-neutral-100);
  --color-interactive-bg-ghost: var(--color-alpha-white-0);
  --color-interactive-bg-ghost-hover: var(--color-alpha-white-10);
  --color-interactive-bg-ghost-press: var(--color-alpha-white-5);
  --color-interactive-bg-ghost-selected: var(--color-alpha-white-10);
  --color-interactive-bg-ghost-inactive: var(--color-alpha-white-0);

  /* glass */
  --color-interactive-label-glass: var(--color-alpha-white-100);
  --color-interactive-icon-glass: var(--color-alpha-white-100);
  --color-interactive-bg-glass-overlay: var(--color-alpha-white-0);
  --color-interactive-bg-glass-overlay-hover: var(--color-alpha-white-8);
  --color-interactive-bg-glass-overlay-press: var(--color-alpha-white-25);
  --color-interactive-bg-glass-overlay-selected: var(--color-alpha-white-16);
  --color-interactive-bg-glass-overlay-inactive: var(--color-alpha-white-30);

  /* danger-primary */
  --color-interactive-bg-danger-primary: var(--color-red-600);
  --color-interactive-bg-danger-primary-hover: var(--color-red-500);
  --color-interactive-bg-danger-primary-press: var(--color-red-700);
  --color-interactive-bg-danger-primary-selected: var(--color-red-600);
  --color-interactive-bg-danger-primary-inactive: var(--color-alpha-white-30);
  --color-interactive-label-danger-primary: var(--color-alpha-white-100);
  --color-interactive-icon-danger-primary: var(--color-alpha-white-100);

  /* danger-secondary */
  --color-interactive-bg-danger-secondary: var(--color-alpha-black-0);
  --color-interactive-stroke-danger-secondary: var(--color-red-400);
  --color-interactive-stroke-danger-secondary-hover: var(--color-red-300);
  --color-interactive-stroke-danger-secondary-press: var(--color-red-500);
  --color-interactive-stroke-danger-secondary-selected: var(--color-red-400);
  --color-interactive-stroke-danger-secondary-inactive: var(--color-alpha-white-10);
  --color-interactive-label-danger-secondary: var(--color-red-400);
  --color-interactive-label-danger-secondary-hover: var(--color-red-300);
  --color-interactive-label-danger-secondary-press: var(--color-red-500);
  --color-interactive-label-danger-secondary-selected: var(--color-red-400);
  --color-interactive-label-danger-secondary-inactive: var(--color-alpha-white-40);
  --color-interactive-icon-danger-secondary: var(--color-red-400);
  --color-interactive-icon-danger-secondary-hover: var(--color-red-300);
  --color-interactive-icon-danger-secondary-press: var(--color-red-500);
  --color-interactive-icon-danger-secondary-selected: var(--color-red-400);
  --color-interactive-icon-danger-secondary-inactive: var(--color-alpha-white-40);

  /* trigger */
  --color-interactive-bg-trigger: var(--color-alpha-white-0);

}
/* ============================================================================
   METOD WEB MAKER · Design System
   03 · MATERIALES — Glass (solo COLOR)
   ----------------------------------------------------------------------------
   Los materiales son standalone: valores LITERALES, NO aliasados a primitivos
   (decisión de Bruno — casi nunca cambian por marca). Por eso no usan var().

   Glass = 3 niveles: weak < medium < large. El "espesor" sube con la opacidad
   de bg-1 (12% → 40% → 70% en light). dodge/burn son idénticos en los 3 niveles.

   Cada nivel = 4 capas (replican el componente de Figma):
     bg-1 + bg-2  → capa "Fill"  (blend NORMAL; bg-1 base + bg-2 highlight)
     bg-dodge     → capa "Fill -dodge" (blend COLOR-DODGE)
     bg-burn      → capa "Fill -burn"  (blend COLOR-BURN)

   ⚠ Ensamblaje (otro archivo/momento): las 4 capas SIEMPRE renderizadas
     (nunca display:none); el on/off es la opacidad = alpha del token (0% = off).
     Respetar el ORDEN de capas (burn→dodge→fill) o se rompe el efecto.
     Componente realizado en glass.css. Orden interno de Fill UNIFICADO: bg-2 sobre bg-1.
   ============================================================================ */

/* ===== Mode-agnostic (no cambian light/dark) =============================== */
:root {

  /* Blur — por nivel (hoy iguales en 24px; tokenizados para poder divergir).
     Ojo: el "Blur" de Figma (24) ≈ 2× lo que devuelve get_design_context (12px). */
  --glass-weak-blur:   24px;
  --glass-medium-blur: 24px;
  --glass-large-blur:  24px;

  /* Shadow — opcional. Va en el HOST (si se aplica al glass se clipa). */
  --glass-shadow: 0 8px 40px 0 rgb(0 0 0 / 12%);

}

/* ===== LIGHT · default ===================================================== */
:root,
[data-theme="light"] {

  /* Weak */
  --glass-weak-bg-1:       rgb(245 245 245 / 12%);
  --glass-weak-bg-2:       rgb(255 255 255 / 0%);
  --glass-weak-bg-dodge:   rgb(38 38 38 / 100%);
  --glass-weak-bg-burn:    rgb(38 38 38 / 0%);

  /* Medium */
  --glass-medium-bg-1:     rgb(245 245 245 / 40%);
  --glass-medium-bg-2:     rgb(255 255 255 / 0%);
  --glass-medium-bg-dodge: rgb(38 38 38 / 100%);
  --glass-medium-bg-burn:  rgb(38 38 38 / 0%);

  /* Large */
  --glass-large-bg-1:      rgb(250 250 250 / 70%);
  --glass-large-bg-2:      rgb(255 255 255 / 0%);
  --glass-large-bg-dodge:  rgb(38 38 38 / 100%);
  --glass-large-bg-burn:   rgb(38 38 38 / 0%);

}

/* ===== DARK ================================================================ */
[data-theme="dark"] {

  /* Weak */
  --glass-weak-bg-1:       rgb(13 13 13 / 12%);
  --glass-weak-bg-2:       rgb(255 255 255 / 3%);
  --glass-weak-bg-dodge:   rgb(204 204 204 / 0%);
  --glass-weak-bg-burn:    rgb(204 204 204 / 100%);

  /* Medium */
  --glass-medium-bg-1:     rgb(13 13 13 / 50%);
  --glass-medium-bg-2:     rgb(255 255 255 / 3%);
  --glass-medium-bg-dodge: rgb(204 204 204 / 0%);
  --glass-medium-bg-burn:  rgb(204 204 204 / 100%);

  /* Large */
  --glass-large-bg-1:      rgb(13 13 13 / 72%);
  --glass-large-bg-2:      rgb(255 255 255 / 3%);
  --glass-large-bg-dodge:  rgb(204 204 204 / 0%);
  --glass-large-bg-burn:   rgb(204 204 204 / 100%);

}
/* ============================================================================
   METOD WEB MAKER · Design System
   Glass — componente del material (consume los tokens de 03-materials.css)
   ----------------------------------------------------------------------------
   Va como FONDO absoluto dentro de cualquier superficie (modal, botón, card…).
   El host define forma y tamaño; el glass lo llena y se clipa a su radius.
   NO hardcodeo radius (en Figma el demo usaba 6px, pero eso es del artboard):
   hereda el radius del host con border-radius: inherit.

   Markup (orden de capas SAGRADO, atrás→frente: blur → burn → dodge → fill):

     <div class="surface">                         host: position:relative;
       <div class="glass glass--medium" aria-hidden="true">   overflow:hidden; radius
         <div class="glass__layer glass__layer--blur"></div>
         <div class="glass__layer glass__layer--burn"></div>
         <div class="glass__layer glass__layer--dodge"></div>
         <div class="glass__layer glass__layer--fill"></div>
       </div>
       <div class="surface__content"> … </div>     contenido z-index por encima
     </div>

   NOTA Figma→navegador: en Figma el blur es un EFFECT del frame (background blur).
   En CSS, si se pone backdrop-filter en la raíz se crea un stacking context que
   AÍSLA los mix-blend-mode (los blends se mezclan contra transparente → se ven
   sólidos/oscuros). Solución: el blur va como CAPA propia al fondo y la raíz
   se aísla (isolation), así burn/dodge se mezclan contra el fondo ya borroso.

   · Niveles: .glass--weak · .glass--medium · .glass--large
   · Las 4 capas de color (bg-1, bg-2, dodge, burn) SIEMPRE presentes; el on/off
     es el alpha del token (0% = apagada pero renderizada).
   · Orden interno de Fill UNIFICADO: bg-2 (arriba) sobre bg-1 (abajo).
   · Shadow: opcional, en el HOST (box-shadow: var(--glass-shadow)).
   ============================================================================ */

.glass {
  position: absolute;
  inset: 0;                   /* el contenido del host va DESPUÉS en el DOM, encima */
  border-radius: inherit;     /* matchea la forma del host */
  overflow: clip;             /* clipa las capas a la forma redondeada */
  pointer-events: none;       /* decorativo: no intercepta clicks */
  /* ⚠ NO poner z-index/transform/opacity/filter acá NI en el host/ancestros:
     cualquiera crea un stacking context que aísla los mix-blend-mode y los
     manda a mezclar contra negro-transparente → dodge/burn se ven oscuros. */
}

.glass__layer {
  position: absolute;
  inset: 0;
}

/* Orden sagrado (DOM): blur → burn → dodge → fill (atrás → frente). */

/* Blur: equivalente CSS del background-blur del frame de Figma. */
.glass__layer--blur {
  backdrop-filter: blur(var(--_glass-blur, 24px));
  -webkit-backdrop-filter: blur(var(--_glass-blur, 24px));
}

.glass__layer--burn  { background-color: var(--_glass-bg-burn);  mix-blend-mode: color-burn; }
.glass__layer--dodge { background-color: var(--_glass-bg-dodge); mix-blend-mode: color-dodge; }
.glass__layer--fill  {
  /* Fill = 2 fills normales en una capa. Orden unificado: bg-2 sobre bg-1. */
  background-image:
    linear-gradient(var(--_glass-bg-2), var(--_glass-bg-2)),
    linear-gradient(var(--_glass-bg-1), var(--_glass-bg-1));
}

/* Variantes → mapean los tokens públicos a las vars privadas del componente. */
.glass--weak {
  --_glass-blur:     var(--glass-weak-blur);
  --_glass-bg-1:     var(--glass-weak-bg-1);
  --_glass-bg-2:     var(--glass-weak-bg-2);
  --_glass-bg-dodge: var(--glass-weak-bg-dodge);
  --_glass-bg-burn:  var(--glass-weak-bg-burn);
}

.glass--medium {
  --_glass-blur:     var(--glass-medium-blur);
  --_glass-bg-1:     var(--glass-medium-bg-1);
  --_glass-bg-2:     var(--glass-medium-bg-2);
  --_glass-bg-dodge: var(--glass-medium-bg-dodge);
  --_glass-bg-burn:  var(--glass-medium-bg-burn);
}

.glass--large {
  --_glass-blur:     var(--glass-large-blur);
  --_glass-bg-1:     var(--glass-large-bg-1);
  --_glass-bg-2:     var(--glass-large-bg-2);
  --_glass-bg-dodge: var(--glass-large-bg-dodge);
  --_glass-bg-burn:  var(--glass-large-bg-burn);
}
/* ============================================================================
   METOD WEB MAKER · Design System
   Button — componente paramétrico (consume tokens --color-interactive-*)
   ----------------------------------------------------------------------------
   Ejes de Figma: hierarchy · size · style · state (+ motionEntry/sense → luego).
   AHORA: hierarchy = primary; sizes xs/sm/md/lg; styles text/icon-left/
   icon-right/icon-only; states default/hover/press/selected/inactive/loading.

   Markup:
     <button class="btn btn--primary btn--md">
       <span class="btn__label">Button</span>
     </button>
     <button class="btn btn--primary btn--md btn--icon-right">
       <span class="btn__label">Button</span><span class="btn__icon">{svg}</span>
     </button>
     <button class="btn btn--primary btn--md btn--icon-only" aria-label="Add">
       <span class="btn__icon">{svg}</span>
     </button>

   Estados: :hover / :active automáticos · .is-selected · :disabled / .is-inactive
            · .is-loading (oculta contenido y muestra spinner).

   NOTA: medidas (alto/padding/font/icon) extraídas exactas del Figma. Cuando
   transcribamos los primitivos de spacing/radius, se reemplazan los px literales.
   Fuente: PP Neue Montreal (aún no está en Assets → fallback a system-ui).
   ============================================================================ */

.btn {
  /* --- tamaño (lo setea .btn--{size}; default = md) --- */
  --_h: 44px;
  --_px: 16px;          /* padding lado-texto */
  --_px-icon: 12px;     /* padding lado-icono */
  --_gap: 8px;
  --_icon-size: 20px;
  --_fs: 14px;
  --_fw: 500;
  --_lh: 1.4;
  --_tracking: 0.04em;
  /* --- color por estado (lo resuelve la jerarquía + estados) --- */
  --_bg: var(--_bg-default);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  height: var(--_h);
  min-height: var(--_h);
  max-width: 320px;
  padding-inline: var(--_px);
  border: 0;
  border-radius: 9999px;            /* radius full */
  background-color: var(--_bg);
  color: var(--_label);
  font-family: "PP Neue Montreal", system-ui, -apple-system, sans-serif;
  font-size: var(--_fs);
  font-weight: var(--_fw);
  line-height: var(--_lh);
  letter-spacing: var(--_tracking);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn__label { display: inline-block; }

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--_icon-size);
  height: var(--_icon-size);
  color: var(--_icon-color);
}
.btn__icon svg { display: block; width: 100%; height: 100%; }

/* --- Tamaños (medidas exactas de Figma) --- */
.btn--xs { --_h: 28px; --_px: 10px; --_px-icon: 8px;  --_gap: 4px; --_icon-size: 16px; --_fs: 12px; --_fw: 400; --_lh: 1;   }
.btn--sm { --_h: 38px; --_px: 14px; --_px-icon: 10px; --_gap: 8px; --_icon-size: 20px; --_fs: 14px; --_fw: 500; --_lh: 1.4; }
.btn--md { --_h: 44px; --_px: 16px; --_px-icon: 12px; --_gap: 8px; --_icon-size: 20px; --_fs: 14px; --_fw: 500; --_lh: 1.4; }
.btn--lg { --_h: 56px; --_px: 24px; --_px-icon: 16px; --_gap: 8px; --_icon-size: 24px; --_fs: 16px; --_fw: 500; --_lh: 1.4; }

/* --- Estilos: presencia y lado del icono (padding asimétrico) --- */
.btn--icon-left  { padding-left: var(--_px-icon); padding-right: var(--_px); }
.btn--icon-right { padding-left: var(--_px); padding-right: var(--_px-icon); }
.btn--icon-only  { padding-inline: var(--_px); }   /* ancho = icon + 2×px */

/* --- Jerarquía: PRIMARY (las demás se agregan después) --- */
.btn--primary {
  --_bg-default:  var(--color-interactive-bg);
  --_bg-hover:    var(--color-interactive-bg-hover);
  --_bg-press:    var(--color-interactive-bg-press);
  --_bg-selected: var(--color-interactive-bg-selected);
  --_bg-inactive: var(--color-interactive-bg-inactive);
  --_label:       var(--color-interactive-label);
  --_icon-color:  var(--color-interactive-icon);
}

/* --- Estados (genéricos: leen las vars privadas de la jerarquía) --- */
.btn:hover:not(:disabled):not(.is-inactive):not(.is-loading),
.btn.is-hover  { --_bg: var(--_bg-hover); }
.btn:active:not(:disabled):not(.is-inactive):not(.is-loading),
.btn.is-press  { --_bg: var(--_bg-press); }
.btn.is-selected:not(:disabled):not(.is-loading)              { --_bg: var(--_bg-selected); }
.btn:disabled, .btn.is-inactive { --_bg: var(--_bg-inactive); cursor: default; pointer-events: none; }
.btn.is-loading                 { --_bg: var(--_bg-inactive); cursor: default; pointer-events: none; }

/* Foco accesible */
.btn:focus-visible { outline: 2px solid var(--color-interactive-stroke-focus); outline-offset: 2px; }

/* --- Loading: oculta contenido y muestra spinner centrado --- */
.btn.is-loading .btn__label,
.btn.is-loading .btn__icon { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--_icon-size);
  height: var(--_icon-size);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--_label) 30%, transparent);
  border-top-color: var(--_label);
  animation: btn-spin 0.7s linear infinite;
}

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