@charset "UTF-8";
/* tokens.core.css */
/* Fuente base (puedes cambiar Inter por Roboto si quieres ser 100% M3) */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* tokens.colors.dark.css */
:root {
  /* ============================================================
   * PRIMARY — Azul (dark)
   * ============================================================ */
  --cssnt-color-primary: #90CAF9; /* azul claro sobre fondo oscuro */
  --cssnt-color-primary-on: #0B1F36; /* texto/icono sobre primary */
  --cssnt-color-primary-container: #0D2A55; /* container oscuro */
  --cssnt-color-primary-container-on: #D6E6FF; /* texto sobre container */
  /* ============================================================
   * SECONDARY — Azul secundario (dark)
   * ============================================================ */
  --cssnt-color-secondary: #A9C7FF;
  --cssnt-color-secondary-on: #0E1C33;
  --cssnt-color-secondary-container: #1A355E;
  --cssnt-color-secondary-container-on: #D9E2FF;
  /* ============================================================
   * TERTIARY — Turquesa (dark)
   * ============================================================ */
  --cssnt-color-tertiary: #5EEAD4;
  --cssnt-color-tertiary-on: #062822;
  --cssnt-color-tertiary-container: #0A3B36;
  --cssnt-color-tertiary-container-on: #B7FFF1;
  /* ============================================================
   * SUCCESS (dark)
   * ============================================================ */
  --cssnt-color-success: #7EE081;
  --cssnt-color-success-on: #0A2A10;
  --cssnt-color-success-container: #12361A;
  --cssnt-color-success-container-on: #CFFAD2;
  /* ============================================================
   * WARNING (dark)
   * ============================================================ */
  --cssnt-color-warning: #FFD27A;
  --cssnt-color-warning-on: #2B1E00;
  --cssnt-color-warning-container: #3A2A00;
  --cssnt-color-warning-container-on: #FFE9B8;
  /* ============================================================
   * DANGER (dark)
   * ============================================================ */
  --cssnt-color-danger: #FFB4AB;
  --cssnt-color-danger-on: #3A0A0A;
  --cssnt-color-danger-container: #4A1212;
  --cssnt-color-danger-container-on: #FFDAD6;
  /* ============================================================
   * INFO (dark)
   * ============================================================ */
  --cssnt-color-info: #8CD3FF;
  --cssnt-color-info-on: #062437;
  --cssnt-color-info-container: #0B354B;
  --cssnt-color-info-container-on: #CDEEFF;
  /* ============================================================
   * TEXTO BASE NEUTRO (dark)
   * ============================================================ */
  --cssnt-color-white-text: #0B0F14;
  --cssnt-color-black-text: #FAFCFF;
  /* ============================================================
   * SURFACE & STRUCTURE (dark)
   * ============================================================ */
  --cssnt-color-background: #0B1220;
  --cssnt-color-background-on: #E6EAF2;
  --cssnt-color-surface: #0F172A;
  --cssnt-color-surface-on: #E6EAF2;
  --cssnt-color-surface-variant: #1E293B;
  --cssnt-color-surface-variant-on: #CBD5E1;
  --cssnt-color-outline: #94A3B8;
  --cssnt-color-outline-variant: #334155;
  /* “inverse” para chip/barras claras en contexto dark */
  --cssnt-color-surface-inverse: #E2E8F0;
  --cssnt-color-surface-inverse-on: #0B1220;
}

/* ================================
   MATERIAL SYMBOLS VARIABLE FONTS
   ================================ */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/icons/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
}
@font-face {
  font-family: "Material Symbols Rounded";
  src: url("/icons/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
}
@font-face {
  font-family: "Material Symbols Sharp";
  src: url("/icons/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
}
:root {
  /* ============================================================
   * TYPOGRAPHY – MATERIAL 3 TYPE SCALE
   * ============================================================ */
  --cssnt-font-brand: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cssnt-font-plain: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Display */
  --cssnt-type-display-lg-family: var(--cssnt-font-brand);
  --cssnt-type-display-lg-size: 57px;
  --cssnt-type-display-lg-line: 64px;
  --cssnt-type-display-lg-weight: 400;
  --cssnt-type-display-md-family: var(--cssnt-font-brand);
  --cssnt-type-display-md-size: 45px;
  --cssnt-type-display-md-line: 52px;
  --cssnt-type-display-md-weight: 400;
  --cssnt-type-display-sm-family: var(--cssnt-font-brand);
  --cssnt-type-display-sm-size: 36px;
  --cssnt-type-display-sm-line: 44px;
  --cssnt-type-display-sm-weight: 400;
  /* Headline */
  --cssnt-type-headline-lg-family: var(--cssnt-font-brand);
  --cssnt-type-headline-lg-size: 32px;
  --cssnt-type-headline-lg-line: 40px;
  --cssnt-type-headline-lg-weight: 400;
  --cssnt-type-headline-md-family: var(--cssnt-font-brand);
  --cssnt-type-headline-md-size: 28px;
  --cssnt-type-headline-md-line: 36px;
  --cssnt-type-headline-md-weight: 400;
  --cssnt-type-headline-sm-family: var(--cssnt-font-brand);
  --cssnt-type-headline-sm-size: 24px;
  --cssnt-type-headline-sm-line: 32px;
  --cssnt-type-headline-sm-weight: 400;
  /* Title */
  --cssnt-type-title-lg-family: var(--cssnt-font-plain);
  --cssnt-type-title-lg-size: 22px;
  --cssnt-type-title-lg-line: 28px;
  --cssnt-type-title-lg-weight: 400;
  --cssnt-type-title-md-family: var(--cssnt-font-plain);
  --cssnt-type-title-md-size: 16px;
  --cssnt-type-title-md-line: 24px;
  --cssnt-type-title-md-weight: 500;
  --cssnt-type-title-sm-family: var(--cssnt-font-plain);
  --cssnt-type-title-sm-size: 14px;
  --cssnt-type-title-sm-line: 20px;
  --cssnt-type-title-sm-weight: 500;
  /* Body */
  --cssnt-type-body-lg-family: var(--cssnt-font-plain);
  --cssnt-type-body-lg-size: 16px;
  --cssnt-type-body-lg-line: 24px;
  --cssnt-type-body-lg-weight: 400;
  --cssnt-type-body-md-family: var(--cssnt-font-plain);
  --cssnt-type-body-md-size: 14px;
  --cssnt-type-body-md-line: 20px;
  --cssnt-type-body-md-weight: 400;
  --cssnt-type-body-sm-family: var(--cssnt-font-plain);
  --cssnt-type-body-sm-size: 12px;
  --cssnt-type-body-sm-line: 16px;
  --cssnt-type-body-sm-weight: 400;
  /* Label */
  --cssnt-type-label-lg-family: var(--cssnt-font-plain);
  --cssnt-type-label-lg-size: 14px;
  --cssnt-type-label-lg-line: 20px;
  --cssnt-type-label-lg-weight: 500;
  --cssnt-type-label-md-family: var(--cssnt-font-plain);
  --cssnt-type-label-md-size: 12px;
  --cssnt-type-label-md-line: 16px;
  --cssnt-type-label-md-weight: 500;
  --cssnt-type-label-sm-family: var(--cssnt-font-plain);
  --cssnt-type-label-sm-size: 11px;
  --cssnt-type-label-sm-line: 16px;
  --cssnt-type-label-sm-weight: 500;
  /* ============================================================
   * SHAPE – RADIOS
   * ============================================================ */
  --cssnt-radius-none: 0px;
  --cssnt-radius-xs: 4px;
  --cssnt-radius-sm: 8px;
  --cssnt-radius-md: 12px;
  --cssnt-radius-lg: 16px;
  --cssnt-radius-xl: 28px;
  --cssnt-radius-full: 9999px;
  /* ============================================================
   * SPACING – ESCALA
   * ============================================================ */
  --cssnt-space-0: 0px;
  --cssnt-space-1: 4px;
  --cssnt-space-2: 8px;
  --cssnt-space-3: 12px;
  --cssnt-space-4: 16px;
  --cssnt-space-5: 24px;
  --cssnt-space-6: 32px;
  --cssnt-space-7: 40px;
  --cssnt-space-8: 48px;
  --cssnt-space-9: 56px;
  --cssnt-space-10: 64px;
  /* ============================================================
   * STATE – OPACITIES
   * ============================================================ */
  --cssnt-state-hover-layer: 0.08;
  --cssnt-state-focus-layer: 0.12;
  --cssnt-state-pressed-layer: 0.12;
  --cssnt-state-drag-layer: 0.16;
  --cssnt-state-disabled-container: 0.12;
  --cssnt-state-disabled-content: 0.38;
  /* ============================================================
   * MOTION – DURATIONS + EASING
   * ============================================================ */
  --cssnt-motion-dur-short-1: 100ms;
  --cssnt-motion-dur-short-2: 150ms;
  --cssnt-motion-dur-med-1: 200ms;
  --cssnt-motion-dur-med-2: 250ms;
  --cssnt-motion-dur-long-1: 300ms;
  --cssnt-motion-dur-long-2: 400ms;
  --cssnt-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cssnt-motion-ease-accel: cubic-bezier(0.3, 0, 1, 1);
  --cssnt-motion-ease-decel: cubic-bezier(0, 0, 0, 1);
  /* Spring */
  --cssnt-motion-dur-spring: 220ms;
  --cssnt-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ============================================================
   * ELEVATION – SHADOWS (LEVEL 0–5)
   * ============================================================ */
  --cssnt-elev-0-shadow: none;
  --cssnt-elev-1-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  --cssnt-elev-2-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.15);
  --cssnt-elev-3-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.15);
  --cssnt-elev-4-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 12px 24px rgba(0, 0, 0, 0.15);
  --cssnt-elev-5-shadow: 0 12px 20px rgba(0, 0, 0, 0.3), 0 18px 36px rgba(0, 0, 0, 0.2);
  /* Overlay de elevación */
  --cssnt-elev-overlay-color: var(--cssnt-color-primary);
  --cssnt-elev-overlay-opacity-1: 0.05;
  --cssnt-elev-overlay-opacity-2: 0.08;
  --cssnt-elev-overlay-opacity-3: 0.11;
  --cssnt-elev-overlay-opacity-4: 0.12;
  --cssnt-elev-overlay-opacity-5: 0.14;
  /* ============================================================
   * SWITCH TOKENS
   * ============================================================ */
  --cssnt-switch-track-w: 52px;
  --cssnt-switch-track-h: 32px;
  --cssnt-switch-outline: 2px;
  --cssnt-switch-pad: 4px;
  --cssnt-switch-thumb-off: 16px;
  --cssnt-switch-thumb-on: 24px;
  --cssnt-switch-track-off: var(--cssnt-color-surface-variant);
  --cssnt-switch-outline-off: var(--cssnt-color-outline);
  --cssnt-switch-thumb-off-color: var(--cssnt-color-outline);
  --cssnt-switch-track-on: var(--cssnt-color-primary);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-primary-on);
  --cssnt-switch-state-color: var(--cssnt-color-outline);
  --cssnt-switch-focus-ring-opacity: 30%;
  --cssnt-switch-hover-ring-opacity: 12%;
  --cssnt-switch-pressed-ring-opacity: 16%;
  --cssnt-switch-focus-ring-size: 3px;
  --cssnt-switch-hover-ring-size: 10px;
  --cssnt-switch-pressed-ring-size: 12px;
  /* Switch sizes */
  --cssnt-switch-sm-track-w: 44px;
  --cssnt-switch-sm-track-h: 28px;
  --cssnt-switch-sm-outline: 2px;
  --cssnt-switch-sm-pad: 4px;
  --cssnt-switch-sm-thumb-off: 14px;
  --cssnt-switch-sm-thumb-on: 20px;
  --cssnt-switch-md-track-w: 52px;
  --cssnt-switch-md-track-h: 32px;
  --cssnt-switch-md-outline: 2px;
  --cssnt-switch-md-pad: 4px;
  --cssnt-switch-md-thumb-off: 16px;
  --cssnt-switch-md-thumb-on: 24px;
  --cssnt-switch-lg-track-w: 64px;
  --cssnt-switch-lg-track-h: 40px;
  --cssnt-switch-lg-outline: 2px;
  --cssnt-switch-lg-pad: 6px;
  --cssnt-switch-lg-thumb-off: 18px;
  --cssnt-switch-lg-thumb-on: 28px;
  /* ============================================================
   * RADIO TOKENS (M3)
   * ============================================================ */
  --cssnt-radio-control-size: 20px;
  --cssnt-radio-dot-size: 10px;
  --cssnt-radio-stroke: 2px;
  --cssnt-radio-state-layer-size: 40px;
  --cssnt-radio-off-border: var(--cssnt-color-outline);
  --cssnt-radio-on: var(--cssnt-color-primary);
  --cssnt-radio-state-color: var(--cssnt-color-outline);
  --cssnt-radio-hover-opacity: 12%;
  --cssnt-radio-focus-opacity: 30%;
  --cssnt-radio-pressed-opacity: 16%;
  --cssnt-radio-focus-ring-size: 3px;
  --cssnt-radio-disabled-opacity: var(--cssnt-state-disabled-content);
  --cssnt-radio-disabled-border: var(--cssnt-color-outline-variant);
  /* Radio sizes */
  --cssnt-radio-sm-control-size: 18px;
  --cssnt-radio-sm-dot-size: 9px;
  --cssnt-radio-sm-stroke: 2px;
  --cssnt-radio-sm-state-layer-size: 36px;
  --cssnt-radio-md-control-size: 20px;
  --cssnt-radio-md-dot-size: 10px;
  --cssnt-radio-md-stroke: 2px;
  --cssnt-radio-md-state-layer-size: 40px;
  --cssnt-radio-lg-control-size: 24px;
  --cssnt-radio-lg-dot-size: 12px;
  --cssnt-radio-lg-stroke: 2px;
  --cssnt-radio-lg-state-layer-size: 48px;
  /* ============================================================
   * CHECKBOX TOKENS
   * ============================================================ */
  --cssnt-checkbox-touch: 40px;
  --cssnt-checkbox-box: 18px;
  --cssnt-checkbox-radius: 4px;
  --cssnt-checkbox-stroke: 2px;
  --cssnt-checkbox-off-border: var(--cssnt-color-outline);
  --cssnt-checkbox-off-bg: transparent;
  --cssnt-checkbox-on-bg: var(--cssnt-color-primary);
  --cssnt-checkbox-on-check: var(--cssnt-color-primary-on);
  --cssnt-checkbox-state-color: var(--cssnt-color-outline);
  --cssnt-checkbox-hover-opacity: 12%;
  --cssnt-checkbox-focus-opacity: 30%;
  --cssnt-checkbox-pressed-opacity: 16%;
  --cssnt-checkbox-focus-ring: 3px;
  --cssnt-checkbox-disabled-opacity: var(--cssnt-state-disabled-content);
  --cssnt-checkbox-disabled-border: var(--cssnt-color-outline-variant);
  /* Checkbox sizes */
  --cssnt-checkbox-sm-touch: 36px;
  --cssnt-checkbox-sm-box: 16px;
  --cssnt-checkbox-sm-radius: 4px;
  --cssnt-checkbox-sm-stroke: 2px;
  --cssnt-checkbox-md-touch: 40px;
  --cssnt-checkbox-md-box: 18px;
  --cssnt-checkbox-md-radius: 4px;
  --cssnt-checkbox-md-stroke: 2px;
  --cssnt-checkbox-lg-touch: 48px;
  --cssnt-checkbox-lg-box: 20px;
  --cssnt-checkbox-lg-radius: 6px;
  --cssnt-checkbox-lg-stroke: 2px;
  /* Check / indeterminate sizing */
  --cssnt-checkbox-check-w: 6px;
  --cssnt-checkbox-check-h: 10px;
  --cssnt-checkbox-check-stroke: 2px;
  --cssnt-checkbox-check-offset-y: -60%;
  --cssnt-checkbox-ind-w: 10px;
  --cssnt-checkbox-ind-h: 2px;
  /* ============================================================
   * AVATAR TOKENS
   * ============================================================ */
  --cssnt-avatar-size-sm: 32px;
  --cssnt-avatar-size-md: 40px;
  --cssnt-avatar-size-lg: 56px;
  --cssnt-avatar-radius: var(--cssnt-radius-full);
  --cssnt-avatar-radius-square: var(--cssnt-radius-md);
  --cssnt-avatar-outline: var(--cssnt-color-outline-variant);
  --cssnt-avatar-outline-w: 1px;
  --cssnt-avatar-elev: var(--cssnt-elev-1-shadow);
  --cssnt-avatar-bg: var(--cssnt-color-primary-container);
  --cssnt-avatar-on: var(--cssnt-color-primary-container-on);
  --cssnt-avatar-border: var(--cssnt-color-primary);
  --cssnt-avatar-state-color: var(--cssnt-color-surface-on);
  --cssnt-avatar-hover-opacity: 12%;
  --cssnt-avatar-focus-opacity: 30%;
  --cssnt-avatar-pressed-opacity: 16%;
  --cssnt-avatar-ring: 3px;
  --cssnt-avatar-ring-opacity: 45%;
  /* ============================================================
   * SLIDER TOKENS
   * ============================================================ */
  --cssnt-slider-thumb-w: 4px;
  --cssnt-slider-thumb-r: 999px;
  --cssnt-slider-active: var(--cssnt-color-primary);
  --cssnt-slider-inactive: var(--cssnt-color-surface-variant);
  --cssnt-slider-hover-ring-size: 10px;
  --cssnt-slider-pressed-ring-size: 12px;
  --cssnt-slider-focus-ring-size: 3px;
  --cssnt-slider-hover-opacity: 12%;
  --cssnt-slider-pressed-opacity: 16%;
  --cssnt-slider-focus-opacity: 45%;
  --cssnt-slider-sm-track-h: 20px;
  --cssnt-slider-sm-track-r: 6px;
  --cssnt-slider-sm-thumb-h: 40px;
  --cssnt-slider-md-track-h: 36px;
  --cssnt-slider-md-track-r: 10px;
  --cssnt-slider-md-thumb-h: 48px;
  --cssnt-slider-lg-track-h: 52px;
  --cssnt-slider-lg-track-r: 14px;
  --cssnt-slider-lg-thumb-h: 64px;
  --cssnt-slider-label-gap: var(--cssnt-space-2);
  --cssnt-slider-label-icon: 20px;
  --cssnt-slider-label-family: var(--cssnt-type-label-md-family);
  --cssnt-slider-label-size: var(--cssnt-type-label-md-size);
  --cssnt-slider-label-line: var(--cssnt-type-label-md-line);
  --cssnt-slider-label-weight: var(--cssnt-type-label-md-weight);
}

:root {
  /* Ajustes globales (brillo + “glass”) */
  --cssnt-glass-opacity: 94%;
  --cssnt-glass-sheen-a: 22%;
  --cssnt-glass-sheen-b: 10%;
  /* Sheen (2 highlights) */
  --cssnt-glass-sheen-layer: radial-gradient(140% 160% at 18% 8%,
          color-mix(in srgb, var(--cssnt-color-white-text) var(--cssnt-glass-sheen-a), transparent) 0%,
          transparent 58%
  ),
  radial-gradient(140% 160% at 88% 92%,
                  color-mix(in srgb, var(--cssnt-color-white-text) var(--cssnt-glass-sheen-b), transparent) 0%,
                  transparent 62%
  );
  /* ===== Hues base (familias “similares”) ===== */
  /* Blues */
  --cssnt-blue-1: color-mix(in srgb, var(--cssnt-color-primary) 82%, var(--cssnt-color-surface-inverse));
  --cssnt-blue-2: color-mix(in srgb, var(--cssnt-color-info) 82%, var(--cssnt-color-surface-inverse));
  --cssnt-blue-3: color-mix(in srgb, var(--cssnt-color-secondary) 84%, var(--cssnt-color-surface-inverse));
  --cssnt-blue-mid: color-mix(in srgb, var(--cssnt-blue-1) 60%, var(--cssnt-blue-2));
  /* Cyans / Teals */
  --cssnt-cyan-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-info) 72%, var(--cssnt-color-tertiary)) 84%, var(--cssnt-color-surface-inverse));
  --cssnt-teal-1: color-mix(in srgb, var(--cssnt-color-tertiary) 84%, var(--cssnt-color-surface-inverse));
  --cssnt-teal-mid: color-mix(in srgb, var(--cssnt-teal-1) 65%, var(--cssnt-cyan-1));
  /* Greens (adyacentes) */
  --cssnt-green-1: color-mix(in srgb, var(--cssnt-color-success) 86%, var(--cssnt-color-surface-inverse));
  --cssnt-green-mint: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-success) 78%, var(--cssnt-color-tertiary)) 86%, var(--cssnt-color-surface-inverse));
  --cssnt-olive-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-success) 70%, var(--cssnt-color-warning)) 88%, var(--cssnt-color-surface-inverse));
  /* Warm (amarillos/naranjas) */
  --cssnt-amber-1: color-mix(in srgb, var(--cssnt-color-warning) 92%, var(--cssnt-color-surface-inverse));
  --cssnt-orange-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-warning) 68%, var(--cssnt-color-danger)) 92%, var(--cssnt-color-surface-inverse));
  --cssnt-orange-mid: color-mix(in srgb, var(--cssnt-amber-1) 55%, var(--cssnt-orange-1));
  /* Reds */
  --cssnt-red-1: color-mix(in srgb, var(--cssnt-color-danger) 92%, var(--cssnt-color-surface-inverse));
  --cssnt-rose-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-danger) 82%, var(--cssnt-color-warning)) 92%, var(--cssnt-color-surface-inverse));
  /* Purples (derivados: rojo+azul, pero el gradiente queda dentro de “morado”) */
  --cssnt-purple-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-color-primary) 58%, var(--cssnt-color-danger)) 90%, var(--cssnt-color-surface-inverse));
  --cssnt-violet-1: color-mix(in srgb, color-mix(in srgb, var(--cssnt-purple-1) 62%, var(--cssnt-blue-3)) 90%, var(--cssnt-color-surface-inverse));
  /* ===== 15 gradients (radial, suaves, afines, con brillo) ===== */
  /* 01–04 Blues */
  --cssnt-grad-01: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 18% 18%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-1) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-blue-1) var(--cssnt-glass-opacity), transparent) 32%,
                  color-mix(in srgb, var(--cssnt-blue-mid) var(--cssnt-glass-opacity), transparent) 62%,
                  color-mix(in srgb, var(--cssnt-blue-2) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-02: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 82% 20%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-2) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-blue-2) var(--cssnt-glass-opacity), transparent) 36%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-2) 62%, var(--cssnt-blue-1)) var(--cssnt-glass-opacity), transparent) 70%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-1) 74%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-03: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 24% 78%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-3) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-blue-3) var(--cssnt-glass-opacity), transparent) 38%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-3) 62%, var(--cssnt-blue-1)) var(--cssnt-glass-opacity), transparent) 72%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-1) 74%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-04: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 78% 78%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-mid) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-blue-mid) var(--cssnt-glass-opacity), transparent) 34%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-blue-1) 58%, var(--cssnt-blue-3)) var(--cssnt-glass-opacity), transparent) 68%,
                  color-mix(in srgb, var(--cssnt-blue-3) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* 05–06 Cyans/Teals */
  --cssnt-grad-05: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 18% 22%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-cyan-1) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-cyan-1) var(--cssnt-glass-opacity), transparent) 36%,
                  color-mix(in srgb, var(--cssnt-teal-mid) var(--cssnt-glass-opacity), transparent) 70%,
                  color-mix(in srgb, var(--cssnt-teal-1) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-06: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 84% 26%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-teal-1) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-teal-1) var(--cssnt-glass-opacity), transparent) 34%,
                  color-mix(in srgb, var(--cssnt-teal-mid) var(--cssnt-glass-opacity), transparent) 68%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-teal-1) 70%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* 07–09 Greens (adyacentes) */
  --cssnt-grad-07: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 18% 18%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-green-1) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-green-1) var(--cssnt-glass-opacity), transparent) 40%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-green-1) 78%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-08: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 78% 22%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-green-mint) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-green-mint) var(--cssnt-glass-opacity), transparent) 36%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-green-mint) 60%, var(--cssnt-teal-1)) var(--cssnt-glass-opacity), transparent) 72%,
                  color-mix(in srgb, var(--cssnt-teal-1) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-09: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 24% 78%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-olive-1) 86%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-olive-1) var(--cssnt-glass-opacity), transparent) 38%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-olive-1) 62%, var(--cssnt-amber-1)) var(--cssnt-glass-opacity), transparent) 74%,
                  color-mix(in srgb, var(--cssnt-amber-1) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* 10–12 Warm (amarillo/naranja) */
  --cssnt-grad-10: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 18% 22%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-amber-1) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-amber-1) var(--cssnt-glass-opacity), transparent) 42%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-amber-1) 70%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-11: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 82% 26%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-orange-1) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-orange-1) var(--cssnt-glass-opacity), transparent) 38%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-orange-1) 70%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-12: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 22% 78%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-orange-mid) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-orange-mid) var(--cssnt-glass-opacity), transparent) 34%,
                  color-mix(in srgb, var(--cssnt-orange-1) var(--cssnt-glass-opacity), transparent) 70%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-orange-1) 72%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* 13–14 Reds (rojo/rosado) */
  --cssnt-grad-13: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 18% 18%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-red-1) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-red-1) var(--cssnt-glass-opacity), transparent) 40%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-red-1) 72%, var(--cssnt-color-surface-inverse)) var(--cssnt-glass-opacity), transparent) 100%
  );
  --cssnt-grad-14: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 82% 26%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-rose-1) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-rose-1) var(--cssnt-glass-opacity), transparent) 36%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-rose-1) 68%, var(--cssnt-red-1)) var(--cssnt-glass-opacity), transparent) 72%,
                  color-mix(in srgb, var(--cssnt-red-1) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* 15 Purple/Violet (morado con morado) */
  --cssnt-grad-15: var(--cssnt-glass-sheen-layer),
  radial-gradient(140% 160% at 22% 22%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-purple-1) 84%, var(--cssnt-color-white-text)) var(--cssnt-glass-opacity), transparent) 0%,
                  color-mix(in srgb, var(--cssnt-purple-1) var(--cssnt-glass-opacity), transparent) 34%,
                  color-mix(in srgb, color-mix(in srgb, var(--cssnt-purple-1) 58%, var(--cssnt-violet-1)) var(--cssnt-glass-opacity), transparent) 68%,
                  color-mix(in srgb, var(--cssnt-violet-1) var(--cssnt-glass-opacity), transparent) 100%
  );
  /* ===== Animated gradients (drop-in) ===== */
}
:root .cssnt-anim-gradient {
  background-repeat: no-repeat;
  background-size: 220% 220%;
  background-position: 20% 20%;
  animation: cssnt-grad-shift 1s ease-in-out infinite;
  will-change: background-position;
}
@keyframes cssnt-grad-shift {
  0% {
    background-position: 18% 18%;
  }
  50% {
    background-position: 82% 78%;
  }
  100% {
    background-position: 18% 18%;
  }
}
:root {
  /* opcional: un “glow” muy ligero sin cambiar el gradiente */
}
:root .cssnt-anim-gradient--glow {
  filter: saturate(1.06) contrast(1.03);
}
:root {
  /* accesibilidad */
}
@media (prefers-reduced-motion: reduce) {
  :root .cssnt-anim-gradient {
    animation: none;
  }
}

/* ============================================================
   STACK (layout utility) — base sólida + preparada para variants
   ============================================================ */
.cssnt-stack {
  /* internos (overrideables por modifier/inline style) */
  --_dir: column;
  --_gap: var(--cssnt-space-2);
  --_align: stretch; /* align-items */
  --_justify: flex-start; /* justify-content */
  --_wrap: nowrap; /* flex-wrap */
  --_inline: flex; /* flex | inline-flex */
  --_w: auto; /* auto | 100% */
  box-sizing: border-box;
  display: var(--_inline);
  flex-direction: var(--_dir);
  flex-wrap: var(--_wrap);
  align-items: var(--_align);
  justify-content: var(--_justify);
  gap: var(--_gap);
  width: var(--_w);
}

/* ---------- direction ---------- */
.cssnt-stack.is-row {
  --_dir: row;
}

.cssnt-stack.is-col {
  --_dir: column;
}

/* ---------- wrap ---------- */
.cssnt-stack.is-wrap {
  --_wrap: wrap;
}

.cssnt-stack.is-nowrap {
  --_wrap: nowrap;
}

/* ---------- inline / block ---------- */
.cssnt-stack.is-inline {
  --_inline: inline-flex;
}

.cssnt-stack.is-block {
  --_inline: flex;
}

/* ---------- width ---------- */
.cssnt-stack.is-full {
  --_w: 100%;
}

/* ---------- align-items ---------- */
.cssnt-stack.is-align-start {
  --_align: flex-start;
}

.cssnt-stack.is-align-center {
  --_align: center;
}

.cssnt-stack.is-align-end {
  --_align: flex-end;
}

.cssnt-stack.is-align-stretch {
  --_align: stretch;
}

.cssnt-stack.is-align-baseline {
  --_align: baseline;
}

/* ---------- justify-content ---------- */
.cssnt-stack.is-justify-start {
  --_justify: flex-start;
}

.cssnt-stack.is-justify-center {
  --_justify: center;
}

.cssnt-stack.is-justify-end {
  --_justify: flex-end;
}

.cssnt-stack.is-justify-between {
  --_justify: space-between;
}

.cssnt-stack.is-justify-around {
  --_justify: space-around;
}

.cssnt-stack.is-justify-evenly {
  --_justify: space-evenly;
}

/* ---------- gap scale (tokens) ---------- */
.cssnt-stack.is-gap-0 {
  --_gap: var(--cssnt-space-0);
}

.cssnt-stack.is-gap-1 {
  --_gap: var(--cssnt-space-1);
}

.cssnt-stack.is-gap-2 {
  --_gap: var(--cssnt-space-2);
}

.cssnt-stack.is-gap-3 {
  --_gap: var(--cssnt-space-3);
}

.cssnt-stack.is-gap-4 {
  --_gap: var(--cssnt-space-4);
}

.cssnt-stack.is-gap-5 {
  --_gap: var(--cssnt-space-5);
}

.cssnt-stack.is-gap-6 {
  --_gap: var(--cssnt-space-6);
}

.cssnt-stack.is-gap-7 {
  --_gap: var(--cssnt-space-7);
}

.cssnt-stack.is-gap-8 {
  --_gap: var(--cssnt-space-8);
}

.cssnt-stack.is-gap-9 {
  --_gap: var(--cssnt-space-9);
}

.cssnt-stack.is-gap-10 {
  --_gap: var(--cssnt-space-10);
}

/* ---------- “variants” preparados (opcional, sin lógica aún) ----------
   Tú después mapearás variant/size a estas clases.
*/
.cssnt-stack--dense {
  --_gap: var(--cssnt-space-1);
}

.cssnt-stack--normal {
  --_gap: var(--cssnt-space-2);
}

.cssnt-stack--spacious {
  --_gap: var(--cssnt-space-4);
}

/* ============================================================
   GRID (layout utility) — base sólida + preparada para variants
   ============================================================ */
.cssnt-grid {
  /* internos (overrideables por modifier/inline style) */
  --_cols: 12; /* cantidad de columnas */
  --_gap: var(--cssnt-space-2); /* gap general */
  --_gap-x: var(--_gap); /* column-gap */
  --_gap-y: var(--_gap); /* row-gap */
  --_align: stretch; /* align-items */
  --_justify: stretch; /* justify-items */
  --_auto-flow: row; /* grid-auto-flow */
  --_auto-cols: auto; /* grid-auto-columns */
  --_auto-rows: auto; /* grid-auto-rows */
  --_w: auto; /* auto | 100% */
  box-sizing: border-box;
  display: grid;
  width: var(--_w);
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  column-gap: var(--_gap-x);
  row-gap: var(--_gap-y);
  align-items: var(--_align);
  justify-items: var(--_justify);
  grid-auto-flow: var(--_auto-flow);
  grid-auto-columns: var(--_auto-cols);
  grid-auto-rows: var(--_auto-rows);
}

/* ---------- width ---------- */
.cssnt-grid.is-full {
  --_w: 100%;
}

/* ---------- cols presets (1..12) ---------- */
.cssnt-grid.is-cols-1 {
  --_cols: 1;
}

.cssnt-grid.is-cols-2 {
  --_cols: 2;
}

.cssnt-grid.is-cols-3 {
  --_cols: 3;
}

.cssnt-grid.is-cols-4 {
  --_cols: 4;
}

.cssnt-grid.is-cols-5 {
  --_cols: 5;
}

.cssnt-grid.is-cols-6 {
  --_cols: 6;
}

.cssnt-grid.is-cols-7 {
  --_cols: 7;
}

.cssnt-grid.is-cols-8 {
  --_cols: 8;
}

.cssnt-grid.is-cols-9 {
  --_cols: 9;
}

.cssnt-grid.is-cols-10 {
  --_cols: 10;
}

.cssnt-grid.is-cols-11 {
  --_cols: 11;
}

.cssnt-grid.is-cols-12 {
  --_cols: 12;
}

/* ---------- gap scale (tokens) ---------- */
.cssnt-grid.is-gap-0 {
  --_gap: var(--cssnt-space-0);
}

.cssnt-grid.is-gap-1 {
  --_gap: var(--cssnt-space-1);
}

.cssnt-grid.is-gap-2 {
  --_gap: var(--cssnt-space-2);
}

.cssnt-grid.is-gap-3 {
  --_gap: var(--cssnt-space-3);
}

.cssnt-grid.is-gap-4 {
  --_gap: var(--cssnt-space-4);
}

.cssnt-grid.is-gap-5 {
  --_gap: var(--cssnt-space-5);
}

.cssnt-grid.is-gap-6 {
  --_gap: var(--cssnt-space-6);
}

.cssnt-grid.is-gap-7 {
  --_gap: var(--cssnt-space-7);
}

.cssnt-grid.is-gap-8 {
  --_gap: var(--cssnt-space-8);
}

.cssnt-grid.is-gap-9 {
  --_gap: var(--cssnt-space-9);
}

.cssnt-grid.is-gap-10 {
  --_gap: var(--cssnt-space-10);
}

/* ---------- gap axis split (opcional) ---------- */
.cssnt-grid.is-gapx-0 {
  --_gap-x: var(--cssnt-space-0);
}

.cssnt-grid.is-gapx-1 {
  --_gap-x: var(--cssnt-space-1);
}

.cssnt-grid.is-gapx-2 {
  --_gap-x: var(--cssnt-space-2);
}

.cssnt-grid.is-gapx-3 {
  --_gap-x: var(--cssnt-space-3);
}

.cssnt-grid.is-gapx-4 {
  --_gap-x: var(--cssnt-space-4);
}

.cssnt-grid.is-gapx-5 {
  --_gap-x: var(--cssnt-space-5);
}

.cssnt-grid.is-gapx-6 {
  --_gap-x: var(--cssnt-space-6);
}

.cssnt-grid.is-gapx-7 {
  --_gap-x: var(--cssnt-space-7);
}

.cssnt-grid.is-gapx-8 {
  --_gap-x: var(--cssnt-space-8);
}

.cssnt-grid.is-gapx-9 {
  --_gap-x: var(--cssnt-space-9);
}

.cssnt-grid.is-gapx-10 {
  --_gap-x: var(--cssnt-space-10);
}

.cssnt-grid.is-gapy-0 {
  --_gap-y: var(--cssnt-space-0);
}

.cssnt-grid.is-gapy-1 {
  --_gap-y: var(--cssnt-space-1);
}

.cssnt-grid.is-gapy-2 {
  --_gap-y: var(--cssnt-space-2);
}

.cssnt-grid.is-gapy-3 {
  --_gap-y: var(--cssnt-space-3);
}

.cssnt-grid.is-gapy-4 {
  --_gap-y: var(--cssnt-space-4);
}

.cssnt-grid.is-gapy-5 {
  --_gap-y: var(--cssnt-space-5);
}

.cssnt-grid.is-gapy-6 {
  --_gap-y: var(--cssnt-space-6);
}

.cssnt-grid.is-gapy-7 {
  --_gap-y: var(--cssnt-space-7);
}

.cssnt-grid.is-gapy-8 {
  --_gap-y: var(--cssnt-space-8);
}

.cssnt-grid.is-gapy-9 {
  --_gap-y: var(--cssnt-space-9);
}

.cssnt-grid.is-gapy-10 {
  --_gap-y: var(--cssnt-space-10);
}

/* ---------- align-items (vertical dentro de cada celda) ---------- */
.cssnt-grid.is-align-start {
  --_align: start;
}

.cssnt-grid.is-align-center {
  --_align: center;
}

.cssnt-grid.is-align-end {
  --_align: end;
}

.cssnt-grid.is-align-stretch {
  --_align: stretch;
}

/* ---------- justify-items (horizontal dentro de cada celda) ---------- */
.cssnt-grid.is-justify-start {
  --_justify: start;
}

.cssnt-grid.is-justify-center {
  --_justify: center;
}

.cssnt-grid.is-justify-end {
  --_justify: end;
}

.cssnt-grid.is-justify-stretch {
  --_justify: stretch;
}

/* ---------- auto-flow ---------- */
.cssnt-grid.is-flow-row {
  --_auto-flow: row;
}

.cssnt-grid.is-flow-col {
  --_auto-flow: column;
}

.cssnt-grid.is-flow-dense {
  --_auto-flow: dense;
} /* útil si luego lo combinas con row/column desde lógica */
/* ---------- “variants” preparados ---------- */
.cssnt-grid--dense {
  --_gap: var(--cssnt-space-1);
}

.cssnt-grid--normal {
  --_gap: var(--cssnt-space-2);
}

.cssnt-grid--spacious {
  --_gap: var(--cssnt-space-4);
}

/* ============================================================
   GRID ITEM helpers (opcionales pero MUY útiles)
   Puedes aplicarlos en los children con className.
   ============================================================ */
.cssnt-grid__item {
  box-sizing: border-box;
  min-width: 0; /* evita overflow por contenido */
}

/* spans (1..12) */
.cssnt-grid__item.is-span-1 {
  grid-column: span 1;
}

.cssnt-grid__item.is-span-2 {
  grid-column: span 2;
}

.cssnt-grid__item.is-span-3 {
  grid-column: span 3;
}

.cssnt-grid__item.is-span-4 {
  grid-column: span 4;
}

.cssnt-grid__item.is-span-5 {
  grid-column: span 5;
}

.cssnt-grid__item.is-span-6 {
  grid-column: span 6;
}

.cssnt-grid__item.is-span-7 {
  grid-column: span 7;
}

.cssnt-grid__item.is-span-8 {
  grid-column: span 8;
}

.cssnt-grid__item.is-span-9 {
  grid-column: span 9;
}

.cssnt-grid__item.is-span-10 {
  grid-column: span 10;
}

.cssnt-grid__item.is-span-11 {
  grid-column: span 11;
}

.cssnt-grid__item.is-span-12 {
  grid-column: span 12;
}

/* start (1..12) */
.cssnt-grid__item.is-start-1 {
  grid-column-start: 1;
}

.cssnt-grid__item.is-start-2 {
  grid-column-start: 2;
}

.cssnt-grid__item.is-start-3 {
  grid-column-start: 3;
}

.cssnt-grid__item.is-start-4 {
  grid-column-start: 4;
}

.cssnt-grid__item.is-start-5 {
  grid-column-start: 5;
}

.cssnt-grid__item.is-start-6 {
  grid-column-start: 6;
}

.cssnt-grid__item.is-start-7 {
  grid-column-start: 7;
}

.cssnt-grid__item.is-start-8 {
  grid-column-start: 8;
}

.cssnt-grid__item.is-start-9 {
  grid-column-start: 9;
}

.cssnt-grid__item.is-start-10 {
  grid-column-start: 10;
}

.cssnt-grid__item.is-start-11 {
  grid-column-start: 11;
}

.cssnt-grid__item.is-start-12 {
  grid-column-start: 12;
}

/* row spans (1..6) (suficiente para la mayoría; amplías cuando quieras) */
.cssnt-grid__item.is-rowspan-1 {
  grid-row: span 1;
}

.cssnt-grid__item.is-rowspan-2 {
  grid-row: span 2;
}

.cssnt-grid__item.is-rowspan-3 {
  grid-row: span 3;
}

.cssnt-grid__item.is-rowspan-4 {
  grid-row: span 4;
}

.cssnt-grid__item.is-rowspan-5 {
  grid-row: span 5;
}

.cssnt-grid__item.is-rowspan-6 {
  grid-row: span 6;
}

/* List.scss — BASE MINIMAL (M3-ish)
   Update:
   - Alineación vertical garantizada en TODOS los contenedores (row/dnd + slots).
   - Leading: auto + centrado vertical y horizontal.
   - Handle: mantiene centrado + divider inset.
*/
.cssnt-list {
  /* container */
  --_container: transparent;
  --_on: var(--cssnt-color-surface-on);
  --_radius: var(--cssnt-radius-lg);
  --_outline: var(--cssnt-color-outline-variant);
  --_elev: none;
  /* row */
  --_row-min-h: 56px;
  --_row-pad-x: 16px;
  --_row-pad-y: 10px;
  --_row-gap: 12px;
  /* slots */
  --_slot-touch: 40px;
  /* handle / drag */
  --_handle-w: 48px;
  --_handle-touch: 48px;
  --_dnd-divider-inset: 10px;
  /* leading (AUTO) */
  --_leading-min-w: 40px;
  --_leading-gap: 12px;
  /* trailing */
  --_trailing-min-w: 96px;
  --_trailing-max-w: 240px;
  --_trailing-gap: 8px;
  /* colors */
  --_row-container: transparent;
  --_row-on: var(--_on);
  /* selected */
  --_sel-container: var(--cssnt-color-primary-container);
  --_sel-on: var(--cssnt-color-primary-container-on);
  /* state layer */
  --_state-color: var(--cssnt-color-surface-on);
  --_hover-opacity: 12%;
  --_focus-opacity: 30%;
  --_pressed-opacity: 16%;
  /* focus ring */
  --_ring-size: 3px;
  --_ring-color: var(--cssnt-color-primary);
  --_ring-opacity: 45%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--_container);
  color: var(--_on);
  border-radius: var(--_radius);
  box-shadow: var(--_elev);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cssnt-list--outlined {
  --_container: var(--cssnt-color-surface);
  border: 1px solid var(--_outline);
}

.cssnt-list--tonal {
  --_container: var(--cssnt-color-surface-variant);
}

.cssnt-list--elevated {
  --_container: var(--cssnt-color-surface);
  --_elev: var(--cssnt-elev-1-shadow);
}

.cssnt-list--dividers > .cssnt-list__item:not(:last-child) {
  border-block-end: 1px solid var(--_outline);
}

.cssnt-list__item {
  box-sizing: border-box;
}

/* ===== Row (horizontal) ===== */
.cssnt-list__row--default {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.cssnt-list__row,
.cssnt-list__dnd {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center; /* ✅ alineación vertical global */
  gap: var(--_row-gap);
  min-block-size: var(--_row-min-h);
  padding-inline: var(--_row-pad-x);
  padding-block: var(--_row-pad-y);
  border-radius: calc(var(--_radius) - 4px);
  background: var(--_row-container);
  color: var(--_row-on);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* state layer */
.cssnt-list__row::before,
.cssnt-list__dnd::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: color-mix(in srgb, var(--_state-color) 0%, transparent);
  transition: background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* focus ring */
.cssnt-list__row::after,
.cssnt-list__dnd::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--_ring-size));
  border-radius: calc(inherit + var(--_ring-size));
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 var(--_ring-size) color-mix(in srgb, var(--_ring-color) var(--_ring-opacity), transparent);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

.cssnt-list__row:hover::before,
.cssnt-list__dnd:hover::before {
  background: color-mix(in srgb, var(--_state-color) var(--_hover-opacity), transparent);
}

.cssnt-list__row:active::before,
.cssnt-list__dnd:active::before {
  background: color-mix(in srgb, var(--_state-color) var(--_pressed-opacity), transparent);
}

.cssnt-list__row:focus-visible::before,
.cssnt-list__dnd:focus-visible::before {
  background: color-mix(in srgb, var(--_state-color) var(--_focus-opacity), transparent);
}

.cssnt-list__row:focus-visible::after,
.cssnt-list__dnd:focus-visible::after {
  opacity: 1;
}

/* Selected */
.cssnt-list__item.is-selected > .cssnt-list__row,
.cssnt-list__item[aria-selected=true] > .cssnt-list__row,
.cssnt-list__item.is-selected > .cssnt-list__dnd,
.cssnt-list__item[aria-selected=true] > .cssnt-list__dnd {
  --_row-container: var(--_sel-container);
  --_row-on: var(--_sel-on);
  --_state-color: var(--_sel-on);
}

/* Disabled */
.cssnt-list__item.is-disabled > .cssnt-list__row,
.cssnt-list__item[aria-disabled=true] > .cssnt-list__row,
.cssnt-list__row:disabled,
.cssnt-list__item.is-disabled > .cssnt-list__dnd,
.cssnt-list__item[aria-disabled=true] > .cssnt-list__dnd {
  cursor: default;
  pointer-events: none;
  opacity: var(--cssnt-state-disabled-content);
}

/* ===== Slots ===== */
/* Garantiza alineación vertical en cada slot. */
.cssnt-list__leading,
.cssnt-list__trailing {
  flex: 0 0 auto;
  min-block-size: var(--_slot-touch);
  display: inline-flex;
  align-items: center; /* ✅ vertical */
  justify-content: center; /* ✅ centro */
}

/* leading AUTO + aire */
.cssnt-list__leading {
  inline-size: auto;
  min-inline-size: var(--_leading-min-w);
  margin-inline-end: var(--_leading-gap);
}

/* content */
.cssnt-list__content {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: block;
}

/* trailing */
.cssnt-list__trailing {
  flex: 0 1 auto;
  justify-content: flex-end; /* ✅ al final */
  gap: var(--_trailing-gap);
  min-inline-size: var(--_trailing-min-w);
  max-inline-size: var(--_trailing-max-w);
}

/* util: si un slot existe pero viene vacío */
.cssnt-list__leading:empty,
.cssnt-list__content:empty,
.cssnt-list__trailing:empty {
  display: none;
}

/* ===== Drag & Drop handle ===== */
/* Se mantiene centrado + divider inset */
.cssnt-list__handle {
  flex: 0 0 auto;
  inline-size: var(--_handle-w);
  min-block-size: var(--_handle-touch);
  display: flex;
  align-items: center; /* ✅ vertical */
  justify-content: center; /* ✅ centro */
  cursor: grab;
  user-select: none;
  background-image: linear-gradient(to bottom, transparent 0, transparent var(--_dnd-divider-inset), var(--_outline) var(--_dnd-divider-inset), var(--_outline) calc(100% - var(--_dnd-divider-inset)), transparent calc(100% - var(--_dnd-divider-inset)), transparent 100%);
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: right center;
}

.cssnt-list__dnd.is-dragging .cssnt-list__handle,
.cssnt-list__item.is-dragging .cssnt-list__handle {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-list__row,
  .cssnt-list__row::before,
  .cssnt-list__row::after,
  .cssnt-list__dnd,
  .cssnt-list__dnd::before,
  .cssnt-list__dnd::after {
    transition: none;
  }
}
/* El handle controla el drag; su contenido NO debe capturar eventos */
.cssnt-list__handle {
  touch-action: none; /* clave para pointer en touch/trackpad */
  user-select: none;
}

.cssnt-list__handle > * {
  pointer-events: none; /* el Button/Icon no intercepta pointer */
}

/* feedback opcional */
.cssnt-list__item.is-dragging {
  z-index: 1;
}

/* opcional: feedback visual del item activo */
.cssnt-list__item.is-dragging > .cssnt-list__dnd {
  box-shadow: var(--cssnt-elev-2-shadow);
}

/* ============================================================
   BASE TITLE
   ============================================================ */
.cssnt-title {
  margin: 0; /* los h1-h6 traen margenes por defecto */
  color: var(--cssnt-color-black-text);
  font-family: var(--cssnt-font-brand), sans-serif;
}

/* ============================================================
   SIZE (prop size: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6')
   Mapeado a la escala de tipo de MD3
   ============================================================ */
/* h1 → headline-large */
.cssnt-title--h1 {
  font-family: var(--cssnt-type-headline-lg-family), sans-serif;
  font-size: var(--cssnt-type-headline-lg-size);
  line-height: var(--cssnt-type-headline-lg-line);
  font-weight: var(--cssnt-type-headline-lg-weight);
}

/* h2 → headline-medium */
.cssnt-title--h2 {
  font-family: var(--cssnt-type-headline-md-family), sans-serif;
  font-size: var(--cssnt-type-headline-md-size);
  line-height: var(--cssnt-type-headline-md-line);
  font-weight: var(--cssnt-type-headline-md-weight);
}

/* h3 → headline-small */
.cssnt-title--h3 {
  font-family: var(--cssnt-type-headline-sm-family), sans-serif;
  font-size: var(--cssnt-type-headline-sm-size);
  line-height: var(--cssnt-type-headline-sm-line);
  font-weight: var(--cssnt-type-headline-sm-weight);
}

/* h4 → text-large */
.cssnt-title--h4 {
  font-family: var(--cssnt-type-title-lg-family), sans-serif;
  font-size: var(--cssnt-type-title-lg-size);
  line-height: var(--cssnt-type-title-lg-line);
  font-weight: var(--cssnt-type-title-lg-weight);
}

/* h5 → text-medium */
.cssnt-title--h5 {
  font-family: var(--cssnt-type-title-md-family), sans-serif;
  font-size: var(--cssnt-type-title-md-size);
  line-height: var(--cssnt-type-title-md-line);
  font-weight: var(--cssnt-type-title-md-weight);
}

/* h6 → text-small */
.cssnt-title--h6 {
  font-family: var(--cssnt-type-title-sm-family), sans-serif;
  font-size: var(--cssnt-type-title-sm-size);
  line-height: var(--cssnt-type-title-sm-line);
  font-weight: var(--cssnt-type-title-sm-weight);
}

/* ============================================================
   TEXT DECORATION (bold, italic, underline)
   ============================================================ */
.cssnt-title--bold {
  font-weight: 700;
}

.cssnt-title--italic {
  font-style: italic;
}

.cssnt-title--underline {
  text-decoration: underline;
}

.cssnt-title--white {
  color: var(--cssnt-color-white-text);
}

.cssnt-title--black {
  color: var(--cssnt-color-black-text);
}

/* ============================================================
   TRUNCATE (prop truncate)
   ============================================================ */
.cssnt-title--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   BASE PARAGRAPH
   ============================================================ */
.cssnt-paragraph {
  margin: 0;
  color: var(--cssnt-color-black-text);
  font-family: var(--cssnt-type-body-md-family), sans-serif;
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: var(--cssnt-type-body-md-weight);
}

/* ============================================================
   SIZE
   Aliases opcionales: p1/p2/p3 (por si quieres)
   ============================================================ */
/* lg → body-large */
.cssnt-paragraph--lg {
  font-family: var(--cssnt-type-body-lg-family), sans-serif;
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  font-weight: var(--cssnt-type-body-lg-weight);
}

/* md → body-medium (default) */
.cssnt-paragraph--md {
  font-family: var(--cssnt-type-body-md-family), sans-serif;
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: var(--cssnt-type-body-md-weight);
}

/* sm → body-small */
.cssnt-paragraph--sm {
  font-family: var(--cssnt-type-body-sm-family), sans-serif;
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  font-weight: var(--cssnt-type-body-sm-weight);
}

/* ============================================================
   TEXT DECORATION (bold, italic, underline)
   ============================================================ */
.cssnt-paragraph--bold {
  font-weight: 700;
}

.cssnt-paragraph--italic {
  font-style: italic;
}

.cssnt-paragraph--underline {
  text-decoration: underline;
}

.cssnt-paragraph--white {
  color: var(--cssnt-color-white-text);
}

.cssnt-paragraph--black {
  color: var(--cssnt-color-black-text);
}

/* ============================================================
   TRUNCATE (single-line)
   ============================================================ */
.cssnt-paragraph--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   BUTTON — Material Design 3 (drop-in, compatible)
   Mantiene nombres de clases existentes.
   ============================================================ */
/* Reset básico para <button> */
.cssnt-button--default {
  all: unset !important;
}

/* ============================================================
   BASE BUTTON (M3)
   ============================================================ */
.cssnt-button {
  /* Compatibilidad: conserva restricciones actuales */
  width: auto !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-2);
  cursor: pointer;
  min-inline-size: 64px;
  padding-inline: var(--cssnt-space-4);
  min-block-size: 40px;
  /* Tipografía */
  font-family: var(--cssnt-font-brand), sans-serif;
  font-size: var(--cssnt-type-label-lg-size);
  font-weight: var(--cssnt-type-label-lg-weight);
  line-height: 1;
  /* ==========================================================
     Tokens internos (M3)
     ========================================================== */
  --_radius: var(--cssnt-button-radius, var(--cssnt-radius-full));
  /* default = filled primary */
  --_container: var(--cssnt-color-primary, #6750a4);
  --_on-container: var(--cssnt-color-primary-on, #ffffff);
  /* IMPORTANTE: fuerza que iconos hereden el color del texto */
  --_content-color: var(--_on-container); /* texto + iconos */
  --_icon-color: currentColor;
  /* state-layer usa color "on" */
  --_state-layer-color: var(--_on-container);
  --_hover-opacity: var(--cssnt-state-hover-opacity, 0.08);
  --_pressed-opacity: var(--cssnt-state-pressed-opacity, 0.12);
  /* Elevaciones (usa tus tokens actuales) */
  --_elev-rest: var(--cssnt-elev-1-shadow);
  --_elev-hover: var(--cssnt-elev-2-shadow);
  --_elev-pressed: var(--cssnt-elev-1-shadow);
  /* Presentación */
  border: none;
  border-radius: var(--_radius);
  text-decoration: none;
  background-color: var(--_container);
  color: var(--_content-color); /* <- esto es clave */
  box-shadow: var(--_elev-rest);
  position: relative;
  overflow: hidden; /* ripple + state-layer */
  isolation: isolate; /* z-index seguro */
  /* Transiciones M3 (no filter/transform “brinco”) */
  transition: background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* Asegura alineación interna perfecta */
.cssnt-button > * {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ============================================================
   FORZAR ICONOS A "currentColor" (Material Symbols / SVG)
   - Si tu componente Icon trae un color fijo (negro), esto lo pisa.
   ============================================================ */
.cssnt-button .material-symbols-outlined,
.cssnt-button .material-symbols-rounded,
.cssnt-button .material-symbols-sharp {
  color: currentColor !important; /* hereda del botón */
}

.cssnt-button svg,
.cssnt-button svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* ============================================================
   M3 STATE LAYER
   ============================================================ */
.cssnt-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_state-layer-color);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* ============================================================
   SIZES
   ============================================================ */
.cssnt-button--size-small {
  min-block-size: 32px;
  padding-inline: var(--cssnt-space-3);
  font-size: var(--cssnt-type-label-md-size);
  line-height: 1;
}

.cssnt-button--size-medium {
  min-block-size: 40px;
}

.cssnt-button--size-large {
  min-block-size: 48px;
  padding-inline: var(--cssnt-space-5);
}

/* Full width */
.cssnt-button--full-width {
  width: 100% !important;
  display: flex;
}

/* ============================================================
   VARIANTS (solo mapean tokens internos)
   ============================================================ */
.cssnt-button--variant-primary {
  --_container: var(--cssnt-color-primary);
  --_on-container: var(--cssnt-color-primary-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-secondary {
  --_container: var(--cssnt-color-secondary);
  --_on-container: var(--cssnt-color-secondary-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-tertiary {
  --_container: var(--cssnt-color-tertiary);
  --_on-container: var(--cssnt-color-tertiary-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-success {
  --_container: var(--cssnt-color-success-container);
  --_on-container: var(--cssnt-color-success-container-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-warning {
  --_container: var(--cssnt-color-warning-container);
  --_on-container: var(--cssnt-color-warning-container-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-danger {
  --_container: var(--cssnt-color-danger-container);
  --_on-container: var(--cssnt-color-danger-container-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-info {
  --_container: var(--cssnt-color-info-container);
  --_on-container: var(--cssnt-color-info-container-on);
  --_content-color: var(--_on-container);
}

.cssnt-button--variant-transparent {
  --_container: transparent;
  --_on-container: var(--cssnt-color-black-text);
  --_content-color: var(--_on-container);
  box-shadow: none;
}

.cssnt-button--variant-transparent:hover {
  box-shadow: none !important;
}

/* ============================================================
   STATES (M3)
   ============================================================ */
.cssnt-button:not(.cssnt-button--disabled):hover {
  box-shadow: var(--_elev-hover);
}

.cssnt-button:not(.cssnt-button--disabled):hover::before {
  opacity: var(--_hover-opacity);
}

.cssnt-button:not(.cssnt-button--disabled):active {
  box-shadow: var(--_elev-pressed);
}

.cssnt-button:not(.cssnt-button--disabled):active::before {
  opacity: var(--_pressed-opacity);
}

/* Focus visible (anillo consistente) */
.cssnt-button:focus-visible {
  outline: none;
  box-shadow: var(--_elev-rest), 0 0 0 3px var(--cssnt-color-primary, #6750a4);
}

/* ============================================================
   DISABLED
   ============================================================ */
.cssnt-button--disabled {
  cursor: default;
  pointer-events: none;
  /* M3-ish disabled */
  background-color: var(--cssnt-color-surface-variant);
  color: var(--cssnt-color-surface-variant-on);
  opacity: var(--cssnt-state-disabled-content, 0.38);
  box-shadow: var(--cssnt-elev-0-shadow);
}

.cssnt-button--disabled::before {
  opacity: 0;
}

/* ============================================================
   ICONS — alineación perfecta según M3
   ============================================================ */
.cssnt-button__icon--large,
.cssnt-button__icon--medium,
.cssnt-button__icon--small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* CLAVE: hereda color del botón (por si tu Icon trae color fijo) */
  color: var(--_icon-color) !important;
}

/* Tamaños reales */
.cssnt-button__icon--large {
  font-size: 22px;
  inline-size: 22px;
  block-size: 22px;
}

.cssnt-button__icon--medium {
  font-size: 16px;
  inline-size: 16px;
  block-size: 16px;
}

.cssnt-button__icon--small {
  font-size: 12px;
  inline-size: 12px;
  block-size: 12px;
}

/* Posición */
.cssnt-button__icon--left {
  margin-inline-end: var(--cssnt-space-2);
  flex-direction: row-reverse;
}

.cssnt-button__icon--right {
  margin-inline-start: var(--cssnt-space-2);
}

/* Texto */
.cssnt-button__label {
  white-space: nowrap;
  display: flex;
  align-items: center;
  line-height: 1;
}

/* ============================================================
   REAL RIPPLE – SOLO VIA DOM (cssnt-button__ripple)
   ============================================================ */
.cssnt-button--ripple {
  position: relative;
  overflow: hidden;
}

/* contenedor de ripples, no rompe el layout */
.cssnt-button__ripple-container {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* arriba del state-layer */
}

/* cada onda (usa on-container como en M3) */
.cssnt-button__ripple {
  position: absolute;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--_on-container) 45%, transparent);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  pointer-events: none;
  animation: cssnt-button-ripple 550ms ease-out;
}

@keyframes cssnt-button-ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
/* contenido por encima del ripple */
.cssnt-button__label,
.cssnt-button__icon--large,
.cssnt-button__icon--medium,
.cssnt-button__icon--small {
  position: relative;
  z-index: 2;
}

/* ============================================================
   ACTIVE OUTLINE (compatibilidad con tu clase existente)
   ============================================================ */
.cssnt-button--active-outline {
  /* cambia a look “outline” sin afectar el resto del componente */
  --_container: var(--cssnt-color-primary-container);
  --_on-container: var(--cssnt-color-primary-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-primary, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--_outline-color);
  box-shadow: var(--_elev-rest);
}

/* Por variant: fondo claro (container) + borde oscuro (base) */
.cssnt-button--variant-primary.cssnt-button--active-outline {
  --_container: var(--cssnt-color-primary-container);
  --_on-container: var(--cssnt-color-primary-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-primary);
}

.cssnt-button--variant-secondary.cssnt-button--active-outline {
  --_container: var(--cssnt-color-secondary-container);
  --_on-container: var(--cssnt-color-secondary-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-secondary);
}

.cssnt-button--variant-tertiary.cssnt-button--active-outline {
  --_container: var(--cssnt-color-tertiary-container);
  --_on-container: var(--cssnt-color-tertiary-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-tertiary);
}

.cssnt-button--variant-success.cssnt-button--active-outline {
  --_container: var(--cssnt-color-success-container);
  --_on-container: var(--cssnt-color-success-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-success, var(--cssnt-color-success-container-on));
}

.cssnt-button--variant-warning.cssnt-button--active-outline {
  --_container: var(--cssnt-color-warning-container);
  --_on-container: var(--cssnt-color-warning-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-warning, var(--cssnt-color-warning-container-on));
}

.cssnt-button--variant-danger.cssnt-button--active-outline {
  --_container: var(--cssnt-color-danger-container);
  --_on-container: var(--cssnt-color-danger-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-danger, var(--cssnt-color-danger-container-on));
}

.cssnt-button--variant-info.cssnt-button--active-outline {
  --_container: var(--cssnt-color-info-container);
  --_on-container: var(--cssnt-color-info-container-on);
  --_content-color: var(--_on-container);
  --_outline-color: var(--cssnt-color-info, var(--cssnt-color-info-container-on));
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cssnt-button,
  .cssnt-button::before {
    transition: none;
  }
  .cssnt-button__ripple {
    animation: none;
    opacity: 0;
  }
}
/* ============================================================
   BUTTON SHAPE UTILITIES — radios variables
   ============================================================ */
/* Por defecto: respeta tu --cssnt-button-radius o cae a full */
.cssnt-button {
  --_radius: var(--cssnt-button-radius, var(--cssnt-radius-full));
}

/* Niveles */
.cssnt-button--radius-none {
  --cssnt-button-radius: var(--cssnt-radius-none);
}

.cssnt-button--radius-xs {
  --cssnt-button-radius: var(--cssnt-radius-xs);
}

.cssnt-button--radius-sm {
  --cssnt-button-radius: var(--cssnt-radius-sm);
}

.cssnt-button--radius-md {
  --cssnt-button-radius: var(--cssnt-radius-md);
}

.cssnt-button--radius-lg {
  --cssnt-button-radius: var(--cssnt-radius-lg);
}

.cssnt-button--radius-xl {
  --cssnt-button-radius: var(--cssnt-radius-xl);
}

.cssnt-button--radius-full {
  --cssnt-button-radius: var(--cssnt-radius-full);
}

/* Alias “M3-ish” (opcional) */
.cssnt-button--shape-square {
  --cssnt-button-radius: var(--cssnt-radius-sm);
}

.cssnt-button--shape-rounded {
  --cssnt-button-radius: var(--cssnt-radius-lg);
}

.cssnt-button--shape-pill {
  --cssnt-button-radius: var(--cssnt-radius-full);
}

/* ============================================================
   BUTTON MENU (FAB MENU) — TOP / BOTTOM ONLY
   - FIXED en contenedor
   - pos-* ancla el menú
   - dir-top / dir-bottom define dirección
   - open + anim-* controla transición
   - (Se eliminaron dir-left / dir-right y su overlap fix)
   - Asume que dentro de .cssnt-button-menu el ÚLTIMO hijo es el botón ancla
   ============================================================ */
.cssnt-button-menu {
  /* offsets/gap */
  --_x: var(--cssnt-fab-offset-x, var(--cssnt-space-5));
  --_y: var(--cssnt-fab-offset-y, var(--cssnt-space-5));
  --_gap: var(--cssnt-fab-menu-gap, var(--cssnt-space-3));
  /* motion */
  --_dur: var(--cssnt-motion-dur-med-2);
  --_ease: var(--cssnt-motion-ease-standard);
  --_dist: 14px;
  position: fixed;
  z-index: var(--cssnt-z-fab, 1000);
  margin: 60px 0 60px 0;
  display: inline-flex;
  gap: var(--_gap);
  align-items: center;
  pointer-events: none;
}

.cssnt-button-menu > * {
  pointer-events: auto;
}

/* ============================================================
   ANCHOR POSITIONS
   ============================================================ */
.cssnt-button-menu--pos-up-left {
  top: var(--_y);
  left: var(--_x);
}

.cssnt-button-menu--pos-up-right {
  top: var(--_y);
  right: var(--_x);
}

.cssnt-button-menu--pos-down-left {
  bottom: var(--_y);
  left: var(--_x);
}

.cssnt-button-menu--pos-down-right {
  bottom: var(--_y);
  right: var(--_x);
}

/* ============================================================
   DIRECTIONS (solo vertical)
   ============================================================ */
.cssnt-button-menu--dir-top {
  flex-direction: column;
  align-items: center;
}

.cssnt-button-menu--dir-bottom {
  flex-direction: column-reverse;
  align-items: center;
}

/* ============================================================
   ANIM BASE (solo opciones: todos menos el último)
   ============================================================ */
.cssnt-button-menu > :not(:last-child) {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--_dur) var(--_ease), transform var(--_dur) var(--_ease);
  will-change: opacity, transform;
  pointer-events: none;
}

.cssnt-button-menu--open > :not(:last-child) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* cerrado: desde dónde entran/salen (según direction) */
.cssnt-button-menu--dir-top:not(.cssnt-button-menu--open) > :not(:last-child) {
  transform: translate3d(0, var(--_dist), 0);
}

.cssnt-button-menu--dir-bottom:not(.cssnt-button-menu--open) > :not(:last-child) {
  transform: translate3d(0, var(--_dist), 0);
}

/* ============================================================
   STAGGER (cascada) — opcional
   ============================================================ */
.cssnt-button-menu--stagger > :not(:last-child) {
  transition-delay: calc(var(--_i, 0) * 40ms);
}

/* stagger simple (hasta 12 elementos) */
.cssnt-button-menu--stagger > :nth-child(1) {
  --_i: 0;
}

.cssnt-button-menu--stagger > :nth-child(2) {
  --_i: 1;
}

.cssnt-button-menu--stagger > :nth-child(3) {
  --_i: 2;
}

.cssnt-button-menu--stagger > :nth-child(4) {
  --_i: 3;
}

.cssnt-button-menu--stagger > :nth-child(5) {
  --_i: 4;
}

.cssnt-button-menu--stagger > :nth-child(6) {
  --_i: 5;
}

.cssnt-button-menu--stagger > :nth-child(7) {
  --_i: 6;
}

.cssnt-button-menu--stagger > :nth-child(8) {
  --_i: 7;
}

.cssnt-button-menu--stagger > :nth-child(9) {
  --_i: 8;
}

.cssnt-button-menu--stagger > :nth-child(10) {
  --_i: 9;
}

.cssnt-button-menu--stagger > :nth-child(11) {
  --_i: 10;
}

.cssnt-button-menu--stagger > :nth-child(12) {
  --_i: 11;
}

.cssnt-button-menu--stagger > :nth-child(13) {
  --_i: 12;
}

/* ============================================================
   speedAnimation classes
   ============================================================ */
.cssnt-button-menu--anim-fast {
  --_dur: var(--cssnt-motion-dur-short-2);
}

.cssnt-button-menu--anim-slow {
  --_dur: var(--cssnt-motion-dur-long-2);
}

.cssnt-button-menu--anim-ease-in {
  --_ease: var(--cssnt-motion-ease-accel);
}

.cssnt-button-menu--anim-ease-out {
  --_ease: var(--cssnt-motion-ease-decel);
}

.cssnt-button-menu--anim-ease-in-out {
  --_ease: var(--cssnt-motion-ease-standard);
}

.cssnt-button-menu--anim-fade {
  --_dist: 0px;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cssnt-button-menu > :not(:last-child) {
    transition: none;
    transform: none;
  }
}
/* ============================================================
   SPLIT M3 — FINAL + proportional/auto
   - ratios: 50/50 70/30 30/70
   - nuevos: auto/proportional y proportional/auto
   - auto = botón cuadrado (ancho = alto) usando aspect-ratio
   ============================================================ */
.cssnt-split {
  --cssnt-split-a: 1;
  --cssnt-split-b: 1;
  --cssnt-split-gap: 1px;
  --cssnt-split-gap-color: var(--cssnt-color-surface, #fff);
  --cssnt-split-radius-outer: 25px;
  --cssnt-split-radius-inner-rest: 6px;
  --cssnt-split-radius-inner-active: 25px;
  display: inline-flex;
  align-items: stretch;
  gap: var(--cssnt-split-gap);
  vertical-align: middle;
  background: var(--cssnt-split-gap-color);
}

/* Full + ratios */
.cssnt-split--full {
  display: flex;
  width: 100%;
}

.cssnt-split--50-50 {
  --cssnt-split-a:1;
  --cssnt-split-b:1;
}

.cssnt-split--70-30 {
  --cssnt-split-a:7;
  --cssnt-split-b:3;
}

.cssnt-split--30-70 {
  --cssnt-split-a:3;
  --cssnt-split-b:7;
}

/* nuevos ratios */
.cssnt-split--auto-prop {
  --cssnt-split-a: 0;
  --cssnt-split-b: 1;
} /* left auto */
.cssnt-split--prop-auto {
  --cssnt-split-a: 1;
  --cssnt-split-b: 0;
} /* right auto */
/* slots */
.cssnt-split__slot {
  min-width: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  --_inner: var(--cssnt-split-radius-inner-rest);
}

.cssnt-split__slot--first {
  flex: var(--cssnt-split-a) 1 0%;
}

.cssnt-split__slot--second {
  flex: var(--cssnt-split-b) 1 0%;
}

/* target base */
.cssnt-split__slot > :is(button, a, .cssnt-button) {
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  transition: border-radius var(--cssnt-motion-dur-spring) var(--cssnt-motion-ease-spring);
}

/* morph */
.cssnt-split--morph .cssnt-split__slot:is(:hover, :focus-within, :active) {
  --_inner: var(--cssnt-split-radius-inner-active);
}

/* ============================================================
   AUTO (cuadrado)
   - Nota: el Button tiene min-inline-size/padding-inline; se overridea aquí
   ============================================================ */
/* el slot auto NO crece */
.cssnt-split--auto-prop .cssnt-split__slot--first,
.cssnt-split--prop-auto .cssnt-split__slot--second {
  flex: 0 0 auto;
}

/* el botón auto: ancho = alto */
.cssnt-split--auto-prop .cssnt-split__slot--first > :is(button, a, .cssnt-button),
.cssnt-split--prop-auto .cssnt-split__slot--second > :is(button, a, .cssnt-button) {
  width: auto;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  /* overrides necesarios para que sí se haga cuadrado */
  min-inline-size: 0 !important;
  padding-inline: 0 !important;
}

/* el lado proportional sí llena */
.cssnt-split--auto-prop .cssnt-split__slot--second > :is(button, a, .cssnt-button),
.cssnt-split--prop-auto .cssnt-split__slot--first > :is(button, a, .cssnt-button) {
  width: 100%;
  flex: 1 1 0%;
}

/* ============================================================
   Radios (override fuerte) — TL TR BR BL
   ============================================================ */
.cssnt-split__slot--first > :is(button, a, .cssnt-button) {
  border-radius: var(--cssnt-split-radius-outer) var(--_inner) var(--_inner) var(--cssnt-split-radius-outer) !important;
}

.cssnt-split__slot--second > :is(button, a, .cssnt-button) {
  border-radius: var(--_inner) var(--cssnt-split-radius-outer) var(--cssnt-split-radius-outer) var(--_inner) !important;
}

/* z-index */
.cssnt-split__slot > :is(button, a, .cssnt-button):focus-visible {
  z-index: 3;
}

.cssnt-split__slot > :is(button, a, .cssnt-button):active {
  z-index: 2;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-split__slot > :is(button, a, .cssnt-button) {
    transition: none;
  }
}
/* ============================================================
   Segmented — LIGHT (default) vs SOLID
   - LIGHT: igual (selected = container)
   - SOLID: selected = solid más oscuro + morph en selected
   - FIX: alineación vertical + gap icon/label (content/icon/label)
   ============================================================ */
.cssnt-segmented {
  --_h: 40px;
  --_bw: 1px;
  --_radius-outer: 25px;
  --_radius-inner: 6px;
  --_gap: 1px;
  --_gap-color: var(--cssnt-color-surface, #fff);
  --_outline: var(--cssnt-color-outline);
  /* fallbacks light */
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-surface) 92%, transparent);
  --_light-item-on: var(--cssnt-color-surface-on);
  --_light-sel-bg: var(--cssnt-color-primary-container);
  --_light-sel-on: var(--cssnt-color-primary-container-on);
  --_light-focus: var(--cssnt-color-outline);
  /* fallbacks solid */
  --_solid-bg: var(--cssnt-color-primary);
  --_solid-on: var(--cssnt-color-primary-on);
  /* suaviza solid base */
  --_solid-mix: 88%;
  /* oscurece selected vs solid */
  --_solid-selected-darken: 16%;
  /* morph del selected en solid */
  --_solid-inner-rest: var(--_radius-inner);
  --_solid-inner-active: var(--_radius-outer);
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  gap: var(--_gap);
  border-radius: var(--_radius-outer);
  background: var(--_gap-color);
}

/* ===== LIGHT (default) ===== */
.cssnt-segmented:not(.cssnt-segmented--solid) {
  padding: var(--_bw);
  border: var(--_bw) solid var(--_outline);
  --_item-bg: var(--_light-item-bg);
  --_item-on: var(--_light-item-on);
  --_sel-bg: var(--_light-sel-bg);
  --_sel-on: var(--_light-sel-on);
  --_focus: var(--_light-focus);
}

/* ===== SOLID ===== */
.cssnt-segmented.cssnt-segmented--solid {
  border: 0;
  padding: 0;
  /* base unselected */
  --_item-bg: color-mix(in srgb, var(--_solid-bg) var(--_solid-mix), var(--cssnt-color-surface));
  --_item-on: var(--_solid-on);
  /* selected = solid más oscuro (no container) */
  --_sel-bg: color-mix(in srgb, var(--_solid-bg) calc(100% - var(--_solid-selected-darken)), #000);
  --_sel-on: var(--_solid-on);
  --_focus: var(--_solid-on);
}

/* Sizes */
.cssnt-segmented--sm {
  --_h: 32px;
}

.cssnt-segmented--md {
  --_h: 40px;
}

.cssnt-segmented--lg {
  --_h: 48px;
}

/* Full width */
.cssnt-segmented--fullwidth {
  width: 100%;
}

.cssnt-segmented--fullwidth > .cssnt-segmented__item {
  flex: 1 1 0%;
  min-inline-size: 0 !important;
}

/* ============================================================
   ITEM (tu Button)
   - FIX: alineación vertical + evita baseline raro
   ============================================================ */
.cssnt-segmented__item {
  box-shadow: none !important;
  min-inline-size: 0 !important;
  min-block-size: var(--_h) !important;
  /* FIX: centrado real */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* FIX: evita “subida” del texto */
  line-height: 1 !important;
  /* FIX: quita padding vertical del Button para centrar */
  padding-block: 0 !important;
  padding-inline: var(--cssnt-space-4) !important;
  /* FIX: por si el Button mete margin */
  margin: 0 !important;
  /* pinta base */
  --_container: var(--_item-bg);
  --_on-container: var(--_item-on);
  /* state-layer del button */
  --_state-layer-color: currentColor;
  --_hover-opacity: var(--cssnt-state-hover-layer);
  --_pressed-opacity: var(--cssnt-state-pressed-layer);
  border-radius: 0 !important;
  position: relative;
}

/* ============================================================
   Content layout (gap real icon/label)
   ============================================================ */
.cssnt-segmented__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-2);
  min-inline-size: 0;
}

.cssnt-segmented__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
}

.cssnt-segmented__label {
  display: block;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* radios por posición */
.cssnt-segmented__item:first-child {
  border-radius: var(--_radius-outer) var(--_radius-inner) var(--_radius-inner) var(--_radius-outer) !important;
}

.cssnt-segmented__item:last-child {
  border-radius: var(--_radius-inner) var(--_radius-outer) var(--_radius-outer) var(--_radius-inner) !important;
}

.cssnt-segmented__item:not(:first-child):not(:last-child) {
  border-radius: var(--_radius-inner) !important;
}

/* Selected (LIGHT: container, SOLID: darker solid) */
.cssnt-segmented__item.is-selected,
.cssnt-segmented__item[aria-pressed=true],
.cssnt-segmented__item[aria-checked=true] {
  --_container: var(--_sel-bg);
  --_on-container: var(--_sel-on);
}

/* Focus */
.cssnt-segmented__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--_focus) !important;
  z-index: 3;
}

/* Disabled */
.cssnt-segmented__item:disabled {
  opacity: var(--cssnt-state-disabled-content);
}

/* ============================================================
   SOLID morph (solo en selected, como split)
   ============================================================ */
.cssnt-segmented--solid .cssnt-segmented__item {
  --_inner-local: var(--_solid-inner-rest);
  transition: border-radius var(--cssnt-motion-dur-spring, 220ms) var(--cssnt-motion-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.cssnt-segmented--solid .cssnt-segmented__item.is-selected:is(:hover, :focus-visible, :active),
.cssnt-segmented--solid .cssnt-segmented__item[aria-pressed=true]:is(:hover, :focus-visible, :active),
.cssnt-segmented--solid .cssnt-segmented__item[aria-checked=true]:is(:hover, :focus-visible, :active) {
  --_inner-local: var(--_solid-inner-active);
}

.cssnt-segmented--solid .cssnt-segmented__item:first-child {
  border-radius: var(--_radius-outer) var(--_inner-local) var(--_inner-local) var(--_radius-outer) !important;
}

.cssnt-segmented--solid .cssnt-segmented__item:last-child {
  border-radius: var(--_inner-local) var(--_radius-outer) var(--_radius-outer) var(--_inner-local) !important;
}

.cssnt-segmented--solid .cssnt-segmented__item:not(:first-child):not(:last-child) {
  border-radius: var(--_inner-local) !important;
}

/* ============================================================
   Variants — SOLO definen tokens light/solid
   ============================================================ */
.cssnt-segmented--primary {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-primary-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-primary-container-on);
  --_light-sel-bg: var(--cssnt-color-primary-container);
  --_light-sel-on: var(--cssnt-color-primary-container-on);
  --_light-focus: var(--cssnt-color-primary-container-on);
  --_solid-bg: var(--cssnt-color-primary);
  --_solid-on: var(--cssnt-color-primary-on);
}

.cssnt-segmented--secondary {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-secondary-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-secondary-container-on);
  --_light-sel-bg: var(--cssnt-color-secondary-container);
  --_light-sel-on: var(--cssnt-color-secondary-container-on);
  --_light-focus: var(--cssnt-color-secondary-container-on);
  --_solid-bg: var(--cssnt-color-secondary);
  --_solid-on: var(--cssnt-color-secondary-on);
}

.cssnt-segmented--tertiary {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-tertiary-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-tertiary-container-on);
  --_light-sel-bg: var(--cssnt-color-tertiary-container);
  --_light-sel-on: var(--cssnt-color-tertiary-container-on);
  --_light-focus: var(--cssnt-color-tertiary-container-on);
  --_solid-bg: var(--cssnt-color-tertiary);
  --_solid-on: var(--cssnt-color-tertiary-on);
}

.cssnt-segmented--success {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-success-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-success-container-on);
  --_light-sel-bg: var(--cssnt-color-success-container);
  --_light-sel-on: var(--cssnt-color-success-container-on);
  --_light-focus: var(--cssnt-color-success-container-on);
  --_solid-bg: var(--cssnt-color-success);
  --_solid-on: var(--cssnt-color-success-on);
}

.cssnt-segmented--warning {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-warning-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-warning-container-on);
  --_light-sel-bg: var(--cssnt-color-warning-container);
  --_light-sel-on: var(--cssnt-color-warning-container-on);
  --_light-focus: var(--cssnt-color-warning-container-on);
  --_solid-bg: var(--cssnt-color-warning);
  --_solid-on: var(--cssnt-color-warning-on);
}

.cssnt-segmented--danger {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-danger-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-danger-container-on);
  --_light-sel-bg: var(--cssnt-color-danger-container);
  --_light-sel-on: var(--cssnt-color-danger-container-on);
  --_light-focus: var(--cssnt-color-danger-container-on);
  --_solid-bg: var(--cssnt-color-danger);
  --_solid-on: var(--cssnt-color-danger-on);
}

.cssnt-segmented--info {
  --_light-item-bg: color-mix(in srgb, var(--cssnt-color-info-container) 22%, transparent);
  --_light-item-on: var(--cssnt-color-info-container-on);
  --_light-sel-bg: var(--cssnt-color-info-container);
  --_light-sel-on: var(--cssnt-color-info-container-on);
  --_light-focus: var(--cssnt-color-info-container-on);
  --_solid-bg: var(--cssnt-color-info);
  --_solid-on: var(--cssnt-color-info-on);
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-segmented--solid .cssnt-segmented__item {
    transition: none !important;
  }
}
/* NavItem.scss
 * NAV ITEM (M3-ish) — SOLO EL BOTÓN (host) + integración con Badges + Suboptions
 * - expanded vs collapsed en el MISMO botón: .is-collapsed
 * - Estados: hover / focus-visible / pressed / selected / disabled
 * - Subopciones: wrapper .cssnt-navitem-wrap + .cssnt-navitem__sub (NO botones dentro de botones)
 */
/* Reset seguro (sin !important) */
.cssnt-navitem--default {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Base (expanded por defecto) */
.cssnt-navitem {
  /* sizing */
  --_h: 56px;
  --_radius: var(--cssnt-radius-md);
  --_pad-x: var(--cssnt-space-4);
  --_pad-y: var(--cssnt-space-2);
  /* colors */
  --_container: transparent;
  --_on: var(--cssnt-color-surface-on);
  /* selected */
  --_sel-container: var(--cssnt-color-primary-container);
  --_sel-on: var(--cssnt-color-primary-container-on);
  /* state layer */
  --_sl-color: currentColor;
  --_sl-hover: calc(var(--cssnt-state-hover-layer) * 100%);
  --_sl-focus: calc(var(--cssnt-state-focus-layer) * 100%);
  --_sl-pressed: calc(var(--cssnt-state-pressed-layer) * 100%);
  /* focus ring */
  --_focus-ring: 3px;
  --_focus-color: var(--cssnt-color-outline);
  position: relative;
  overflow: hidden; /* recorta state-layer */
  isolation: isolate; /* stacking seguro */
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--_h);
  display: inline-flex;
  align-items: center;
  /* EXPANDED: alineado al inicio */
  justify-content: flex-start;
  text-align: left;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--_radius);
  background: var(--_container);
  color: var(--_on);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease), color var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease), min-block-size var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease), padding var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease), border-radius var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease);
}

/* State-layer */
.cssnt-navitem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--_sl-color) var(--_sl-hover), transparent);
  transition: opacity var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease), border-radius var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease);
}

/* Focus ring */
.cssnt-navitem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  box-shadow: 0 0 0 var(--_focus-ring) color-mix(in srgb, var(--_focus-color) 55%, transparent);
  transition: opacity var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease), border-radius var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease);
}

/* contenido arriba del layer */
.cssnt-navitem > * {
  position: relative;
  z-index: 2;
}

/* Selected */
.cssnt-navitem.is-selected {
  --_container: var(--_sel-container);
  --_on: var(--_sel-on);
}

/* Hover / Pressed / Focus */
@media (hover: hover) {
  .cssnt-navitem:not(.is-disabled):hover::before {
    opacity: 1;
    background: color-mix(in srgb, var(--_sl-color) var(--_sl-hover), transparent);
  }
}
.cssnt-navitem:not(.is-disabled):active::before {
  opacity: 1;
  background: color-mix(in srgb, var(--_sl-color) var(--_sl-pressed), transparent);
}

.cssnt-navitem:focus-visible {
  outline: none;
}

.cssnt-navitem:focus-visible::after {
  opacity: 1;
}

/* Disabled */
.cssnt-navitem.is-disabled {
  cursor: default;
  pointer-events: none;
  opacity: var(--cssnt-state-disabled-content);
}

.cssnt-navitem.is-disabled::before,
.cssnt-navitem.is-disabled::after {
  opacity: 0 !important;
}

/* Collapsed (minimized) */
.cssnt-navitem.is-collapsed {
  --_h: 72px;
  --_radius: var(--cssnt-radius-md);
  /* COLLAPSED: centrado */
  justify-content: center;
  text-align: center;
  padding: var(--cssnt-space-2);
}

/* ============================================================
 * Integración con BADGES dentro del botón
 * ============================================================ */
/* evita doble click / hover dentro del badge */
.cssnt-navitem .cssnt-badge-anchor {
  pointer-events: none;
  transition: transform var(--cssnt-motion-dur-med-1, 240ms) var(--cssnt-motion-ease-emphasized, ease), opacity var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease);
  transform: translateZ(0);
}

/* herencia de color */
.cssnt-navitem .cssnt-badge-anchor__label,
.cssnt-navitem .cssnt-badge-anchor__target {
  color: currentColor;
}

/* siempre ocupa el ancho del botón para que la alineación sea consistente */
.cssnt-navitem > .cssnt-badge-anchor {
  inline-size: 100%;
}

/* EXPANDED: pegado a la izquierda (normal) */
.cssnt-navitem:not(.is-collapsed) > .cssnt-badge-anchor {
  justify-content: flex-start !important;
  transform-origin: center left;
}

/* FIX: si Badges pone label al "end" con row-reverse, flex-start lo manda a la derecha. */
.cssnt-navitem:not(.is-collapsed) > .cssnt-badge-anchor.cssnt-badge-anchor--label-right {
  justify-content: flex-end !important;
}

/* COLLAPSED: centrado */
.cssnt-navitem.is-collapsed > .cssnt-badge-anchor {
  justify-content: center !important;
  transform-origin: center;
}

/* si usas badges verticales en collapsed, dales aire */
.cssnt-navitem.is-collapsed .cssnt-badge-anchor.is-vertical {
  gap: var(--cssnt-space-1);
}

/* ============================================================
 * SUBOPTIONS (NavItem Group)
 * - wrapper: .cssnt-navitem-wrap
 * - sublist: .cssnt-navitem__sub -> .cssnt-navitem__sub-inner
 * ============================================================ */
.cssnt-navitem-wrap {
  box-sizing: border-box;
  /* internos */
  --_level: 0;
  --_indent: 18px;
  /* conector */
  --_line: var(--cssnt-color-outline-variant);
  --_line-w: 2px; /* más grueso */
  --_line-o: 1; /* opacidad del conector */
  --_sub-gap: var(--cssnt-space-1);
  display: grid;
  gap: var(--cssnt-space-1);
}

/* indent del botón según nivel (si lo usas) */
.cssnt-navitem-wrap.has-level > .cssnt-navitem {
  padding-left: calc(var(--_pad-x) + var(--_level) * var(--_indent));
}

/* marca visual de “padre” (opcional) */
.cssnt-navitem.is-parent {
  padding-right: calc(var(--_pad-x) + 8px);
}

/* chevron (Material Symbols) */
.cssnt-navitem__chev {
  margin-left: auto;
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  line-height: 1;
  opacity: 0.85;
  transform: rotate(0deg);
  transition: transform var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease);
}

/* gira al abrir */
.cssnt-navitem-wrap.is-expanded > .cssnt-navitem .cssnt-navitem__chev {
  transform: rotate(-180deg);
}

/* NEW: cuando está expandido, el padre se ve selected */
.cssnt-navitem-wrap.is-expanded > .cssnt-navitem {
  --_container: var(--_sel-container);
  --_on: var(--_sel-on);
}

/* NEW: refuerzo sutil del state-layer para que se sienta “activo” */
.cssnt-navitem-wrap.is-expanded > .cssnt-navitem::before {
  opacity: 1;
  background: color-mix(in srgb, currentColor var(--_sl-hover), transparent);
}

/* sublist animado (0fr -> 1fr) */
.cssnt-navitem__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cssnt-motion-dur-med-2, 250ms) var(--cssnt-motion-ease-standard, ease);
}

.cssnt-navitem-wrap.is-expanded > .cssnt-navitem__sub {
  grid-template-rows: 1fr;
}

.cssnt-navitem__sub-inner {
  overflow: hidden;
  display: grid;
  gap: var(--_sub-gap);
  /* línea guía + indent */
  margin-left: calc(var(--_pad-x) + 10px + var(--_level) * var(--_indent));
  padding-left: calc(var(--_indent) - 6px);
  /* conector más grueso */
  border-left: var(--_line-w) solid color-mix(in srgb, var(--_line) calc(var(--_line-o) * 100%), transparent);
  padding-top: var(--cssnt-space-1);
}

/* subitems más compactos */
.cssnt-navitem__sub-inner .cssnt-navitem {
  --_h: 48px;
  --_radius: var(--cssnt-radius-sm);
}

/* cuando está collapsed, ocultamos sublist */
.cssnt-navitem-wrap.is-collapsed > .cssnt-navitem__sub {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-navitem,
  .cssnt-navitem::before,
  .cssnt-navitem::after,
  .cssnt-navitem .cssnt-badge-anchor,
  .cssnt-navitem__chev,
  .cssnt-navitem__sub {
    transition: none;
  }
}
/* Button_appbar.scss
   ============================================================
   APP BAR BUTTON (host)
   - NO hover/pressed aquí (eso ya lo hace Badges con pills)
   - Solo layout + focus ring + reglas flex
   ============================================================ */
.cssnt-button-appbar--default {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.cssnt-button-appbar {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0; /* MOBILE default = proporcional */
  min-inline-size: 0;
  display: grid;
  place-items: center;
  min-block-size: var(--_h);
  border-radius: var(--cssnt-radius-full);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  /* focus ring */
  --_focus-ring: 3px;
  --_focus-color: var(--cssnt-color-outline);
}

.cssnt-button-appbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 var(--_focus-ring) color-mix(in srgb, var(--_focus-color) 55%, transparent);
  transition: opacity var(--cssnt-motion-dur-short-2, 140ms) var(--cssnt-motion-ease-standard, ease);
}

.cssnt-button-appbar:focus-visible {
  outline: none;
}

.cssnt-button-appbar:focus-visible::after {
  opacity: 1;
}

.cssnt-button-appbar.is-disabled {
  cursor: default;
  pointer-events: none;
  opacity: var(--cssnt-state-disabled-content, 0.38);
}

/* ============================================================
   Ajustes de pill para AppBar (solo sizing/layout)
   ============================================================ */
/* MOBILE: pill SOLO en target y con tamaño fijo (hover solo ahí) */
.cssnt-appbar--mobile .cssnt-button-appbar {
  --_pill-pad-x: 0px;
  --_pill-pad-y: 0px;
}

.cssnt-appbar--mobile .cssnt-button-appbar .cssnt-badge-anchor.is-pill-target .cssnt-badge-anchor__target {
  inline-size: var(--_ind-w);
  block-size: var(--_ind-h);
  padding: 0; /* override pill padding */
  border-radius: var(--cssnt-radius-full);
  display: grid;
  place-items: center;
}

/* FULLSCREEN: pill ALL con padding fijo y altura fija */
.cssnt-appbar--fullscreen .cssnt-button-appbar {
  --_pill-pad-x: var(--_ind-pad-x);
  --_pill-pad-y: 0px;
}

/* ============================================================
   LAYOUT RULES
   - FULLSCREEN: NO proporcional
   - MOBILE ancho: NO proporcional (centrado lo maneja el container)
   ============================================================ */
.cssnt-appbar--fullscreen .cssnt-button-appbar {
  flex: 0 0 auto;
  min-inline-size: 120px;
}

@media (min-width: 520px) {
  .cssnt-appbar--mobile .cssnt-button-appbar {
    flex: 0 0 auto;
    min-inline-size: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cssnt-button-appbar::after {
    transition: none;
  }
}
/* ============================================================
 * CONTAINER (M3-ish) — actualizado con variantes de color
 * ============================================================ */
.cssnt-container {
  /* ===== layout ===== */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cssnt-space-3);
  /* ===== tokens internos (override por variantes) ===== */
  --_bg: var(--cssnt-color-surface-container, var(--cssnt-color-surface));
  --_on: var(--cssnt-color-surface-on);
  --_divider: color-mix(in srgb, var(--_on) 18%, transparent);
  /* ===== superficie ===== */
  background-color: var(--_bg);
  color: var(--_on);
  /* ===== spacing ===== */
  padding: var(--cssnt-space-4);
  /* ===== typography ===== */
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  /* ===== motion ===== */
  transition: box-shadow var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-1) var(--cssnt-motion-ease-standard);
}

/* Header opcional */
.cssnt-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-2);
  margin-bottom: var(--cssnt-space-2);
  padding-bottom: var(--cssnt-space-2);
  border-bottom: 1px solid var(--_divider);
  font-family: var(--cssnt-type-title-md-family);
  font-size: var(--cssnt-type-title-md-size);
  line-height: var(--cssnt-type-title-md-line);
  font-weight: var(--cssnt-type-title-md-weight);
  color: var(--_on);
}

/* Body */
.cssnt-container__body {
  display: block;
}

/* Footer opcional */
.cssnt-container__footer {
  margin-top: var(--cssnt-space-3);
  padding-top: var(--cssnt-space-2);
  border-top: 1px solid var(--_divider);
  display: flex;
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--_on);
}

/* Borderless */
.cssnt-container--borderless .cssnt-container__header,
.cssnt-container--borderless .cssnt-container__footer {
  border: none;
  padding-bottom: 0;
  padding-top: 0;
}

/* ============================================================
 * VARIANTES BASE (white / black)
 * ============================================================ */
.cssnt-container--white {
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
}

.cssnt-container--black {
  --_bg: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
}

/* ============================================================
 * VARIANTES POR COLOR (filled)
 * ============================================================ */
.cssnt-container--primary {
  --_bg: var(--cssnt-color-primary);
  --_on: var(--cssnt-color-primary-on);
}

.cssnt-container--secondary {
  --_bg: var(--cssnt-color-secondary);
  --_on: var(--cssnt-color-secondary-on);
}

.cssnt-container--tertiary {
  --_bg: var(--cssnt-color-tertiary);
  --_on: var(--cssnt-color-tertiary-on);
}

.cssnt-container--success {
  --_bg: var(--cssnt-color-success);
  --_on: var(--cssnt-color-success-on);
}

.cssnt-container--warning {
  --_bg: var(--cssnt-color-warning);
  --_on: var(--cssnt-color-warning-on);
}

.cssnt-container--danger {
  --_bg: var(--cssnt-color-danger);
  --_on: var(--cssnt-color-danger-on);
}

.cssnt-container--info {
  --_bg: var(--cssnt-color-info);
  --_on: var(--cssnt-color-info-on);
}

/* ============================================================
 * VARIANTES POR COLOR (tonal / container)
 * ============================================================ */
.cssnt-container--primary-tonal {
  --_bg: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
}

.cssnt-container--secondary-tonal {
  --_bg: var(--cssnt-color-secondary-container);
  --_on: var(--cssnt-color-secondary-container-on);
}

.cssnt-container--tertiary-tonal {
  --_bg: var(--cssnt-color-tertiary-container);
  --_on: var(--cssnt-color-tertiary-container-on);
}

.cssnt-container--success-tonal {
  --_bg: var(--cssnt-color-success-container);
  --_on: var(--cssnt-color-success-container-on);
}

.cssnt-container--warning-tonal {
  --_bg: var(--cssnt-color-warning-container);
  --_on: var(--cssnt-color-warning-container-on);
}

.cssnt-container--danger-tonal {
  --_bg: var(--cssnt-color-danger-container);
  --_on: var(--cssnt-color-danger-container-on);
}

.cssnt-container--info-tonal {
  --_bg: var(--cssnt-color-info-container);
  --_on: var(--cssnt-color-info-container-on);
}

/* ============================================================
   SPINNER BASE — Material Design 3 (SCSS-Friendly)
   ============================================================ */
.cssnt-spinner {
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 9999px;
  border-width: 3px;
  border-style: solid;
  /* aro base suave */
  border-color: rgba(0, 0, 0, 0.15);
  /* sector activo por defecto */
  border-top-color: var(--cssnt-color-outline);
  animation: cssnt-spinner-rotate 0.8s var(--cssnt-motion-ease-standard) infinite;
}

@keyframes cssnt-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   SIZES
   ============================================================ */
.cssnt-spinner--small {
  inline-size: 14px;
  block-size: 14px;
  border-width: 2px;
}

.cssnt-spinner--medium {
  inline-size: 20px;
  block-size: 20px;
  border-width: 3px;
}

.cssnt-spinner--large {
  inline-size: 28px;
  block-size: 28px;
  border-width: 4px;
}

/* ============================================================
   VARIANTS — Cambian arco activo + color para waves
   ============================================================ */
.cssnt-spinner--primary {
  border-top-color: var(--cssnt-color-primary);
  color: var(--cssnt-color-primary);
}

.cssnt-spinner--secondary {
  border-top-color: var(--cssnt-color-secondary);
  color: var(--cssnt-color-secondary);
}

.cssnt-spinner--success {
  border-top-color: var(--cssnt-color-success);
  color: var(--cssnt-color-success);
}

.cssnt-spinner--warning {
  border-top-color: var(--cssnt-color-warning);
  color: var(--cssnt-color-warning);
}

.cssnt-spinner--danger {
  border-top-color: var(--cssnt-color-danger);
  color: var(--cssnt-color-danger);
}

.cssnt-spinner--info {
  border-top-color: var(--cssnt-color-info);
  color: var(--cssnt-color-info);
}

/* ============================================================
   SPEED CONTROLLERS
   ============================================================ */
.cssnt-spinner--speed-slow {
  animation-duration: 1.4s;
}

.cssnt-spinner--speed-medium {
  animation-duration: 0.8s;
} /* default */
.cssnt-spinner--speed-fast {
  animation-duration: 0.45s;
}

.cssnt-spinner--speed-ultra {
  animation-duration: 0.25s;
}

/* ============================================================
   LINEAR LOADER BASE — Material Design 3 (width: 100%)
   ============================================================ */
.cssnt-loader {
  position: relative;
  display: block;
  /* siempre ocupa el 100% del contenedor padre */
  inline-size: 100%;
  /* grosor base */
  block-size: 4px;
  border-radius: 9999px;
  overflow: hidden;
  /* track */
  background-color: rgba(0, 0, 0, 0.08);
  /* color por defecto del indicador (se usa como currentColor) */
  color: var(--cssnt-color-outline-variant);
}

/* barra animada indeterminada */
.cssnt-loader::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  inline-size: 40%;
  block-size: 100%;
  border-radius: inherit;
  background-color: currentColor;
  animation: cssnt-loader-indeterminate 1.2s var(--cssnt-motion-ease-standard) infinite;
}

@keyframes cssnt-loader-indeterminate {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(280%);
  }
}
/* ============================================================
   LINEAR LOADER SIZES (grosor)
   ============================================================ */
.cssnt-loader--small {
  block-size: 3px;
}

.cssnt-loader--medium {
  block-size: 4px;
} /* default */
.cssnt-loader--large {
  block-size: 6px;
}

/* ============================================================
   LINEAR LOADER VARIANTS (color de la barra)
   ============================================================ */
.cssnt-loader--primary {
  color: var(--cssnt-color-primary);
}

.cssnt-loader--secondary {
  color: var(--cssnt-color-secondary);
}

.cssnt-loader--success {
  color: var(--cssnt-color-success);
}

.cssnt-loader--warning {
  color: var(--cssnt-color-warning);
}

.cssnt-loader--danger {
  color: var(--cssnt-color-danger);
}

.cssnt-loader--info {
  color: var(--cssnt-color-info);
}

/* ============================================================
   LINEAR LOADER SPEED CONTROLLERS
   ============================================================ */
.cssnt-loader--speed-slow::before {
  animation-duration: 1.8s;
}

.cssnt-loader--speed-medium::before {
  animation-duration: 1.2s; /* default */
}

.cssnt-loader--speed-fast::before {
  animation-duration: 0.8s;
}

.cssnt-loader--speed-ultra::before {
  animation-duration: 0.5s;
}

.cssnt-icon {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 24px;
}

/* Tamaños */
.cssnt-icon--small {
  font-size: 18px;
}

.cssnt-icon--medium {
  font-size: 24px;
}

.cssnt-icon--large {
  font-size: 32px;
}

.cssnt-icon--extra-large {
  font-size: 48px;
}

.cssnt-icon--extra-extra-large {
  font-size: 64px;
}

/* Variants → color por defecto basado en tu theme */
.cssnt-icon--primary {
  color: var(--cssnt-color-primary);
}

.cssnt-icon--secondary {
  color: var(--cssnt-color-secondary);
}

.cssnt-color-tertiary {
  color: var(--cssnt-color-tertiary);
}

.cssnt-icon--success {
  color: var(--cssnt-color-success);
}

.cssnt-icon--warning {
  color: var(--cssnt-color-warning);
}

.cssnt-icon--danger {
  color: var(--cssnt-color-danger);
}

.cssnt-icon--info {
  color: var(--cssnt-color-info);
}

.cssnt-icon--black {
  color: var(--cssnt-color-black-text);
}

.cssnt-icon--white {
  color: var(--cssnt-color-white-text);
}

/* FILL controls → m3 expressive */
.cssnt-icon--fill-0 {
  font-variation-settings: "FILL" 0;
}

.cssnt-icon--fill-1 {
  font-variation-settings: "FILL" 1;
}

/* ============================================================
 * CARD – MATERIAL DESIGN 3
 * ============================================================ */
.cssnt-card {
  position: relative;
  display: block;
  width: 100%;
  background-color: var(--cssnt-color-surface);
  color: var(--cssnt-color-surface-on);
  border-radius: var(--cssnt-radius-md);
  box-shadow: var(--cssnt-elev-1-shadow);
  padding: var(--cssnt-space-4);
  transition: box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* Hover (elevación 2 + overlay sutil) */
.cssnt-card:hover {
  box-shadow: var(--cssnt-elev-2-shadow);
  background-color: color-mix(in srgb, var(--cssnt-color-surface) 95%, var(--cssnt-color-primary) 5%);
}

/* Focus visible (accesibilidad) */
.cssnt-card:focus-visible {
  outline: 2px solid var(--cssnt-color-primary);
  outline-offset: 2px;
}

/* Pressed */
.cssnt-card:active {
  box-shadow: var(--cssnt-elev-1-shadow);
  transform: translateY(1px);
}

/* Variante elevada (opcional) */
.cssnt-card.elevated {
  box-shadow: var(--cssnt-elev-2-shadow);
}

/* Variante outlined (opcional M3) */
.cssnt-card.outlined {
  box-shadow: none;
  border: 1px solid var(--cssnt-color-outline-variant);
}

/* Variante tonal (surface-variant) */
.cssnt-card.tonal {
  background-color: var(--cssnt-color-surface-variant);
  color: var(--cssnt-color-surface-variant-on);
}

/* ============================================================
 * IMAGE ROOT
 * ============================================================ */
.cssnt-image {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: none;
}

/* Imagen nativa */
.cssnt-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 🔑 quita “bordes” por antialias/bleed: zoom mínimo */
  transform: scale(1.01);
  transition: filter var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* (opcional) si luego quieres hover-zoom, esto mantiene el base */
.cssnt-image:hover img {
  transform: scale(1.03);
}

/* ============================================================
 * VARIANTES
 * ============================================================ */
.cssnt-image.rect {
  border-radius: var(--cssnt-radius-sm);
}

.cssnt-image.circle {
  border-radius: var(--cssnt-radius-full);
}

.cssnt-image.large {
  border-radius: var(--cssnt-radius-lg);
}

/* ============================================================
 * ELEVATION
 * ============================================================ */
.cssnt-image.elevated {
  box-shadow: var(--cssnt-elev-1-shadow);
}

.cssnt-image.elevated:hover {
  box-shadow: var(--cssnt-elev-2-shadow);
}

/* ============================================================
 * DISABLED
 * ============================================================ */
.cssnt-image.disabled {
  opacity: var(--cssnt-state-disabled-content);
}

/* ============================================================
 * INVERT
 * ============================================================ */
.cssnt-image.is-inverted img {
  filter: invert(1);
}

.cssnt-image.is-inverted.is-inverted--hard img {
  filter: invert(1) contrast(1.15);
}

/* ============================================================
 * SHIMMER / SKELETON LOADING
 * ============================================================ */
.cssnt-shimmer {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cssnt-color-surface-variant);
}

/* Capa animada */
.cssnt-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: cssnt-shimmer 1s infinite;
}

@keyframes cssnt-shimmer {
  to {
    transform: translateX(100%);
  }
}
/* ============================================================
 * ERROR
 * ============================================================ */
.cssnt-error {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cssnt-color-surface-variant);
}
.cssnt-error Icon {
  color: var(--cssnt-color-surface-variant-on);
}

/* ============================================================
 * DIVIDER – MATERIAL DESIGN 3
 * ============================================================ */
.cssnt-divider {
  border: none;
  height: 1px;
  width: 100%;
  margin: var(--cssnt-space-4) 0;
  background-color: var(--cssnt-color-outline-variant);
}

/* Divider vertical */
.cssnt-divider.vertical {
  width: 1px;
  height: 100%;
  margin: 0 var(--cssnt-space-4);
}

/* Variante inset (típica de listas) */
.cssnt-divider.inset {
  margin-left: var(--cssnt-space-6);
  width: calc(100% - var(--cssnt-space-6));
}

/* Tonal (surface-variant) */
.cssnt-divider.tonal {
  background-color: var(--cssnt-color-surface-variant-on);
  opacity: 0.4;
}

/* ============================================================
 * CHIPS (M3) — FIX completo
 * - Alineación vertical icono/texto
 * - Outlined: overlay no “tiñe” el borde
 * - Border radius “cuadrado con curva” (modifiers)
 * ============================================================ */
.cssnt-chip {
  /* defaults */
  --_chip-gap: var(--cssnt-space-2);
  --_chip-h: 32px;
  --_chip-pad-x: 12px;
  /* pill por defecto */
  --_chip-radius: var(--cssnt-radius-full);
  --_chip-outline: 1px;
  --_chip-bg: transparent;
  --_chip-border: var(--cssnt-color-outline-variant);
  --_chip-fg: var(--cssnt-color-surface-on);
  --_chip-state-color: var(--cssnt-color-outline);
  --_chip-hover: 12%;
  --_chip-focus: 30%;
  --_chip-pressed: 16%;
  --_chip-focus-ring: 3px;
  --_chip-bg-selected: color-mix(in srgb, var(--_chip-state-color) 18%, transparent);
  --_chip-border-selected: var(--_chip-border);
  /* icon sizing */
  --_chip-icon: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* ayuda al baseline */
  gap: var(--_chip-gap);
  height: var(--_chip-h);
  padding: 0 var(--_chip-pad-x);
  border-radius: var(--_chip-radius);
  border: var(--_chip-outline) solid var(--_chip-border);
  background: var(--_chip-bg);
  font-family: var(--cssnt-type-label-lg-family);
  font-size: var(--cssnt-type-label-lg-size);
  line-height: var(--cssnt-type-label-lg-line);
  font-weight: var(--cssnt-type-label-lg-weight);
  color: var(--_chip-fg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
  /* state layer overlay (por defecto cubre borde, se ajusta en outlined) */
}
.cssnt-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--_chip-focus-ring) color-mix(in srgb, var(--_chip-state-color) var(--_chip-focus), transparent);
}
@media (hover: hover) {
  .cssnt-chip:not(.is-disabled):hover::before {
    opacity: 1;
    background: color-mix(in srgb, var(--_chip-state-color) var(--_chip-hover), transparent);
  }
}
.cssnt-chip:not(.is-disabled):active::before {
  opacity: 1;
  background: color-mix(in srgb, var(--_chip-state-color) var(--_chip-pressed), transparent);
}
.cssnt-chip:not(.is-disabled):active {
  transform: scale(0.99);
}

/* ---------- partes internas (alineación) ---------- */
.cssnt-chip__label {
  display: inline-flex;
  align-items: center;
  line-height: 1; /* evita desbalance vertical */
  white-space: nowrap;
}

.cssnt-chip__leading,
.cssnt-chip__trailing {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-1);
}

.cssnt-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
  color: currentColor;
  width: var(--_chip-icon);
  height: var(--_chip-icon);
}

/* evita baseline raro si Icon renderiza svg */
.cssnt-chip__icon > * {
  display: block;
}

/* ---------- styles ---------- */
.cssnt-chip--outlined {
  --_chip-bg: transparent;
  --_chip-border: var(--cssnt-color-outline-variant);
  /* importante: overlay NO cubre el borde, así no se “tiñe” */
}
.cssnt-chip--outlined::before {
  inset: var(--_chip-outline);
}
.cssnt-chip--outlined {
  /* opcional: borde cuando está selected (más neutro) */
  --_chip-border-selected: var(--cssnt-color-outline);
}

.cssnt-chip--filled {
  --_chip-bg: color-mix(in srgb, var(--cssnt-color-surface-variant) 70%, transparent);
  --_chip-border: transparent;
}

.cssnt-chip--elevated {
  --_chip-bg: color-mix(in srgb, var(--cssnt-color-surface) 92%, transparent);
  --_chip-border: transparent;
  box-shadow: var(--cssnt-elev-1-shadow);
}

/* ---------- selected / dragged ---------- */
.cssnt-chip.is-selected {
  background: var(--_chip-bg-selected);
  border-color: var(--_chip-border-selected);
}

.cssnt-chip.is-dragged {
  box-shadow: var(--cssnt-elev-3-shadow);
  border-color: transparent;
}

/* ---------- disabled ---------- */
.cssnt-chip.is-disabled,
.cssnt-chip:disabled {
  cursor: not-allowed;
  opacity: var(--cssnt-state-disabled-content);
}

.cssnt-chip.is-disabled::before,
.cssnt-chip:disabled::before {
  opacity: 0 !important;
}

/* ---------- sizes ---------- */
.cssnt-chip--sm {
  --_chip-h: 28px;
  --_chip-pad-x: 10px;
  --_chip-icon: 16px;
  --_chip-gap: var(--cssnt-space-1);
}

.cssnt-chip--md {
  --_chip-h: 32px;
  --_chip-pad-x: 12px;
  --_chip-icon: 18px;
}

.cssnt-chip--lg {
  --_chip-h: 36px;
  --_chip-pad-x: 14px;
  --_chip-icon: 20px;
}

/* ---------- variants ---------- */
.cssnt-chip--primary {
  --_chip-state-color: var(--cssnt-color-primary);
}

.cssnt-chip--secondary {
  --_chip-state-color: var(--cssnt-color-secondary);
}

.cssnt-chip--tertiary {
  --_chip-state-color: var(--cssnt-color-tertiary);
}

.cssnt-chip--success {
  --_chip-state-color: var(--cssnt-color-success);
}

.cssnt-chip--warning {
  --_chip-state-color: var(--cssnt-color-warning);
}

.cssnt-chip--danger {
  --_chip-state-color: var(--cssnt-color-danger);
}

.cssnt-chip--info {
  --_chip-state-color: var(--cssnt-color-info);
}

/* ---------- radius modifiers (cuadrado con curva) ---------- */
.cssnt-chip--rounded-sm {
  --_chip-radius: var(--cssnt-radius-sm);
} /* 8px */
.cssnt-chip--rounded-md {
  --_chip-radius: var(--cssnt-radius-md);
} /* 12px */
.cssnt-chip--rounded-lg {
  --_chip-radius: var(--cssnt-radius-lg);
} /* 16px */
/* ============================================================
 * BADGES (M3) — anchor + target + badge
 * + FIX overlay sin calc() en translate()
 * + SOLID variants (badge counter)
 * + Vertical label: más pequeño + truncate
 * + NUEVO: PILL nativo (selected/hover/pressed) como Button_appbar
 *   - .is-pill-target : pill SOLO en __target (área del icon)
 *   - .is-pill-all    : pill en TODO el anchor (icon + label)
 *   - .is-selected    : activa el pill base
 *   - Hover/Pressed: SOLO oscurece el pill si está selected (NO pill en hover si no selected)
 * + NUEVO: Variants de pill vía variables (--_pill-*)
 * ============================================================ */
.cssnt-badge-anchor {
  /* --- tokens badge (counter) --- */
  --_badge-bg: var(--cssnt-color-danger-container);
  --_badge-fg: var(--cssnt-color-danger-container-on);
  --_badge-cutout: var(--cssnt-color-surface);
  --_badge-cutout-w: 2px;
  /* offsets base (overlay) */
  --_badge-tx: 45%;
  --_badge-ty: -45%;
  /* FIX: valor final (sin calc) */
  --_badge-tx-final: var(--_badge-tx);
  /* inline spacing */
  --_badge-inline-gap: var(--cssnt-space-2);
  /* state-layer (legacy) */
  --_badge-state-color: var(--cssnt-color-outline);
  --_badge-hover: calc(var(--cssnt-state-hover-layer) * 100%);
  --_badge-focus: calc(var(--cssnt-state-focus-layer) * 100%);
  --_badge-pressed: calc(var(--cssnt-state-pressed-layer) * 100%);
  --_badge-label-gap: var(--cssnt-space-2);
  /* vertical label constraints */
  --_badge-vertical-label-max: 72px;
  /* ==========================
     PILL tokens (NUEVO)
     ========================== */
  /* base (selected) */
  --_pill-bg: var(--cssnt-color-secondary-container);
  --_pill-on: var(--cssnt-color-secondary-container-on);
  /* por si quieres diferenciar selected del token base */
  --_pill-selected: var(--_pill-bg);
  /* hover/pressed = selected más oscuro */
  --_pill-hover: color-mix(in srgb, var(--_pill-selected) 88%, var(--cssnt-color-surface-on));
  --_pill-pressed: color-mix(in srgb, var(--_pill-selected) 78%, var(--cssnt-color-surface-on));
  /* padding pill */
  --_pill-pad-x: 12px;
  --_pill-pad-y: 6px;
  /* focus ring pill */
  --_pill-focus-ring: 3px;
  --_pill-focus-color: var(--cssnt-color-outline);
  color: var(--cssnt-color-black-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_badge-label-gap);
  vertical-align: middle;
  overflow: visible;
  line-height: normal;
  transition: gap var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* ===== layout vertical opcional ===== */
.cssnt-badge-anchor.is-vertical {
  flex-direction: column;
  gap: 0;
}

.cssnt-badge-anchor.is-vertical.is-label-top {
  flex-direction: column-reverse;
}

/* label opcional */
.cssnt-badge-anchor__label {
  display: inline-flex;
  align-items: center;
  font-family: var(--cssnt-type-label-lg-family);
  font-size: var(--cssnt-type-label-lg-size);
  line-height: var(--cssnt-type-label-lg-line);
  font-weight: var(--cssnt-type-label-lg-weight);
  color: var(--cssnt-color-black-text);
  white-space: nowrap;
  transition: color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* ===== vertical label: más pequeño + truncate ===== */
.cssnt-badge-anchor.is-vertical .cssnt-badge-anchor__label {
  font-family: var(--cssnt-type-label-md-family, var(--cssnt-type-label-lg-family));
  font-size: var(--cssnt-type-label-md-size, 12px);
  line-height: var(--cssnt-type-label-md-line, 16px);
  font-weight: var(--cssnt-type-label-md-weight, 500);
  opacity: 0.92;
  max-inline-size: var(--_badge-vertical-label-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* label lado izq/der (si NO usas is-vertical) */
.cssnt-badge-anchor--label-left {
  flex-direction: row;
}

.cssnt-badge-anchor--label-right {
  flex-direction: row-reverse;
}

/* target (genérico): icon o texto */
.cssnt-badge-anchor__target {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  min-inline-size: 0;
  transition: color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* target tipo icono (evita baseline shifts) */
.cssnt-badge-anchor.is-icon .cssnt-badge-anchor__target {
  line-height: 0;
  font-size: 0;
}

/* target tipo texto (hereda tipografía normal) */
.cssnt-badge-anchor.is-textTarget .cssnt-badge-anchor__target {
  line-height: inherit;
  font-size: inherit;
}

/* ============================================================
 * DISABLED (host)
 * ============================================================ */
.cssnt-badge-anchor.is-disabled {
  cursor: default;
  pointer-events: none;
  opacity: var(--cssnt-state-disabled-content, 0.38);
}

.cssnt-badge-anchor.is-disabled.is-interactive::after {
  opacity: 0 !important;
  background: transparent !important;
}

.cssnt-badge-anchor.is-disabled .cssnt-badge {
  filter: saturate(0.85);
}

/* ============================================================
 * HOST state layer (legacy) (solo interactivo y NO disabled)
 * ============================================================ */
.cssnt-badge-anchor.is-interactive:not(.is-disabled) {
  border-radius: var(--cssnt-radius-full);
  -webkit-tap-highlight-color: transparent;
}

.cssnt-badge-anchor.is-interactive:not(.is-disabled),
.cssnt-badge-anchor.is-interactive:not(.is-disabled) .cssnt-badge-anchor__label {
  cursor: pointer;
}

.cssnt-badge-anchor.is-interactive:not(.is-disabled)::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

@media (hover: hover) {
  .cssnt-badge-anchor.is-interactive:not(.is-disabled):hover::after {
    opacity: 1;
    background: color-mix(in srgb, var(--_badge-state-color) var(--_badge-hover), transparent);
  }
}
.cssnt-badge-anchor.is-interactive:not(.is-disabled):active::after {
  opacity: 1;
  background: color-mix(in srgb, var(--_badge-state-color) var(--_badge-pressed), transparent);
}

.cssnt-badge-anchor.is-interactive:not(.is-disabled):focus-visible {
  outline: none;
}

.cssnt-badge-anchor.is-interactive:not(.is-disabled):focus-visible::after {
  opacity: 1;
  background: color-mix(in srgb, var(--_badge-state-color) var(--_badge-focus), transparent);
}

/* ============================================================
 * PILL NATIVO (como Button_appbar)
 * ============================================================ */
/* si hay pill, el label hereda (no fijo a surface-on) */
.cssnt-badge-anchor.is-pill-target .cssnt-badge-anchor__label,
.cssnt-badge-anchor.is-pill-all .cssnt-badge-anchor__label {
  color: currentColor;
}

/* apaga el layer grande para que NO exista hover gigante */
.cssnt-badge-anchor.is-interactive.is-pill-target::after,
.cssnt-badge-anchor.is-interactive.is-pill-all::after {
  opacity: 0 !important;
  background: transparent !important;
}

/* ---------- pill SOLO en target (ideal para vertical/mobile) ---------- */
.cssnt-badge-anchor.is-pill-target .cssnt-badge-anchor__target {
  border-radius: var(--cssnt-radius-full);
  padding: var(--_pill-pad-y) var(--_pill-pad-x);
  background: transparent;
}

/* selected */
.cssnt-badge-anchor.is-pill-target.is-selected .cssnt-badge-anchor__target {
  background: var(--_pill-selected);
  color: var(--_pill-on);
}

/* hover/pressed SOLO si selected (hover solo en la parte azul) */
@media (hover: hover) {
  .cssnt-badge-anchor.is-interactive.is-pill-target.is-selected:not(.is-disabled):hover .cssnt-badge-anchor__target {
    background: var(--_pill-hover);
    color: var(--_pill-on);
  }
}
.cssnt-badge-anchor.is-interactive.is-pill-target.is-selected:not(.is-disabled):active .cssnt-badge-anchor__target {
  background: var(--_pill-pressed);
  color: var(--_pill-on);
}

/* focus ring (en el mismo shape) */
.cssnt-badge-anchor.is-interactive.is-pill-target:focus-visible .cssnt-badge-anchor__target {
  box-shadow: 0 0 0 var(--_pill-focus-ring) color-mix(in srgb, var(--_pill-focus-color) 55%, transparent);
}

/* ---------- pill en TODO el anchor (ideal para horizontal/full) ---------- */
.cssnt-badge-anchor.is-pill-all {
  border-radius: var(--cssnt-radius-full);
  padding: var(--_pill-pad-y) var(--_pill-pad-x);
  background: transparent;
  transition: background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* selected */
.cssnt-badge-anchor.is-pill-all.is-selected {
  background: var(--_pill-selected);
  color: var(--_pill-on);
}

/* hover/pressed SOLO si selected (hover solo en la parte azul) */
@media (hover: hover) {
  .cssnt-badge-anchor.is-interactive.is-pill-all.is-selected:not(.is-disabled):hover {
    background: var(--_pill-hover);
    color: var(--_pill-on);
  }
}
.cssnt-badge-anchor.is-interactive.is-pill-all.is-selected:not(.is-disabled):active {
  background: var(--_pill-pressed);
  color: var(--_pill-on);
}

/* focus ring */
.cssnt-badge-anchor.is-interactive.is-pill-all:focus-visible {
  box-shadow: 0 0 0 var(--_pill-focus-ring) color-mix(in srgb, var(--_pill-focus-color) 55%, transparent);
}

/* ============================================================
 * PILL VARIANTS (NUEVO)
 * - solo setean variables del pill, NO afectan el counter
 * - usa container si existe, si no cae a color sólido
 * ============================================================ */
.cssnt-badge-anchor--pill-primary {
  --_pill-bg: var(--cssnt-color-primary-container, var(--cssnt-color-primary));
  --_pill-on: var(--cssnt-color-primary-container-on, var(--cssnt-color-primary-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-secondary {
  --_pill-bg: var(--cssnt-color-secondary-container, var(--cssnt-color-secondary));
  --_pill-on: var(--cssnt-color-secondary-container-on, var(--cssnt-color-secondary-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-tertiary {
  --_pill-bg: var(--cssnt-color-tertiary-container, var(--cssnt-color-tertiary));
  --_pill-on: var(--cssnt-color-tertiary-container-on, var(--cssnt-color-tertiary-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-success {
  --_pill-bg: var(--cssnt-color-success-container, var(--cssnt-color-success));
  --_pill-on: var(--cssnt-color-success-container-on, var(--cssnt-color-success-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-warning {
  --_pill-bg: var(--cssnt-color-warning-container, var(--cssnt-color-warning));
  --_pill-on: var(--cssnt-color-warning-container-on, var(--cssnt-color-warning-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-danger {
  --_pill-bg: var(--cssnt-color-danger-container, var(--cssnt-color-danger));
  --_pill-on: var(--cssnt-color-danger-container-on, var(--cssnt-color-danger-on));
  --_pill-selected: var(--_pill-bg);
}

.cssnt-badge-anchor--pill-info {
  --_pill-bg: var(--cssnt-color-info-container, var(--cssnt-color-info));
  --_pill-on: var(--cssnt-color-info-container-on, var(--cssnt-color-info-on));
  --_pill-selected: var(--_pill-bg);
}

/* ============================================================
 * BADGE base (counter)
 * ============================================================ */
.cssnt-badge {
  --_badge-dot: 12px;
  --_badge-h: 16px;
  --_badge-minw: 16px;
  --_badge-pad-x: 6px;
  --_badge-radius: var(--cssnt-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--_badge-bg);
  color: var(--_badge-fg) !important;
  border-radius: var(--_badge-radius);
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
  transition: transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), border-color var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
  will-change: transform;
}

/* ============================================================
 * OVERLAY (default) — ANCLADO AL __target (sin calc)
 * ============================================================ */
.cssnt-badge-anchor:not(.cssnt-badge-anchor--inline) .cssnt-badge-anchor__target > .cssnt-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(var(--_badge-tx-final), var(--_badge-ty));
  transform-origin: top right;
  border: var(--_badge-cutout-w) solid var(--_badge-cutout);
}

/* Hard-stop: si alguien pone el badge directo como hijo del anchor */
.cssnt-badge-anchor:not(.cssnt-badge-anchor--inline) > .cssnt-badge {
  position: static;
  transform: none;
  border: 0;
}

/* ===== INLINE (texto) ===== */
.cssnt-badge-anchor.cssnt-badge-anchor--inline .cssnt-badge {
  position: static;
  transform: none;
  border: 0;
  margin-inline-start: var(--_badge-inline-gap);
}

/* DOT */
.cssnt-badge--small {
  width: var(--_badge-dot);
  height: var(--_badge-dot);
  min-width: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* COUNT/TEXT */
.cssnt-badge--large {
  height: var(--_badge-h);
  min-width: var(--_badge-minw);
  padding: 0 var(--_badge-pad-x);
  font-family: var(--cssnt-type-label-sm-family);
  font-size: var(--cssnt-type-label-sm-size);
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.cssnt-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: currentColor;
  width: 12px;
  height: 12px;
}

/* ============================================================
 * Presets de offset (overlay) según target size (icon 18/24/32)
 * ============================================================ */
.cssnt-badge-anchor.is-sm {
  --_badge-tx: 58%;
  --_badge-ty: -58%;
  --_badge-tx-final: 76%;
}

.cssnt-badge-anchor.is-md {
  --_badge-tx: 46%;
  --_badge-ty: -46%;
  --_badge-tx-final: 64%;
}

.cssnt-badge-anchor.is-lg {
  --_badge-tx: 38%;
  --_badge-ty: -38%;
  --_badge-tx-final: 56%;
}

/* cuando el badge es texto (large) en overlay */
.cssnt-badge-anchor.is-text .cssnt-badge {
  --_badge-ty: -40%;
  --_badge-tx-final: 50%;
}

/* ============================================================
 * Variants (SOLID) del counter
 * ============================================================ */
.cssnt-badge--primary {
  --_badge-bg: var(--cssnt-color-primary);
  --_badge-fg: var(--cssnt-color-primary-on);
}

.cssnt-badge--secondary {
  --_badge-bg: var(--cssnt-color-secondary);
  --_badge-fg: var(--cssnt-color-secondary-on);
}

.cssnt-badge--tertiary {
  --_badge-bg: var(--cssnt-color-tertiary);
  --_badge-fg: var(--cssnt-color-tertiary-on);
}

.cssnt-badge--success {
  --_badge-bg: var(--cssnt-color-success);
  --_badge-fg: var(--cssnt-color-success-on);
}

.cssnt-badge--warning {
  --_badge-bg: var(--cssnt-color-warning);
  --_badge-fg: var(--cssnt-color-warning-on);
}

.cssnt-badge--danger {
  --_badge-bg: var(--cssnt-color-danger);
  --_badge-fg: var(--cssnt-color-danger-on);
}

.cssnt-badge--info {
  --_badge-bg: var(--cssnt-color-info);
  --_badge-fg: var(--cssnt-color-info-on);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-badge-anchor,
  .cssnt-badge-anchor__label,
  .cssnt-badge-anchor__target,
  .cssnt-badge-anchor.is-interactive:not(.is-disabled)::after,
  .cssnt-badge {
    transition: none;
  }
}
/* ============================================================
   DIALOG (M3-ish)
   Estructura (slots):
   .cssnt-dialog
     __scrim
     __surface
       __header (opcional)
         __title (opcional)
         __close (opcional)  <-- (sin estilos aquí; lo manejará tu <Button>)
       __body
       __footer (opcional)
   Variants (contrato):
   - layout : --full | (basic=default)
   - size   : --sm | (md=default) | --lg
   - header : --noHeader | --header-basic | --header-full
   - footer : --noFooter | --footer-actions
   - close  : --noClose | --close-overlay | --close-button | --close-both
   - divider: --divider
   State:
   - .is-open (o [data-open="true"]) => abre/cierra SOLO via CSS (animación/visibility)
   ============================================================ */
.cssnt-dialog {
  /* tokens */
  --cssnt-dialog-z: 1000;
  --cssnt-dialog-scrim: color-mix(in srgb, #000 32%, transparent);
  --cssnt-dialog-container: var(--cssnt-color-surface, #fff);
  --cssnt-dialog-on: var(--cssnt-color-surface-on, #111);
  --cssnt-dialog-outline: var(--cssnt-color-outline-variant, #cbd5e1);
  --cssnt-dialog-primary: var(--cssnt-color-primary, #1976d2);
  --cssnt-dialog-radius: var(--cssnt-radius-xl, 28px);
  --cssnt-dialog-elev: var(--cssnt-elev-3-shadow);
  --cssnt-dialog-inset: var(--cssnt-space-5, 24px);
  --cssnt-dialog-w: 560px;
  --cssnt-dialog-minw: 280px;
  --cssnt-dialog-pad: var(--cssnt-space-5, 24px);
  --cssnt-dialog-gap: var(--cssnt-space-3, 12px);
  --cssnt-dialog-header-h: 64px;
  --cssnt-dialog-action-gap: var(--cssnt-space-2, 8px);
  --cssnt-dialog-focus-ring: 3px;
  --cssnt-dialog-dur: var(--cssnt-motion-dur-med-2, 250ms);
  --cssnt-dialog-ease: var(--cssnt-motion-ease-standard, cubic-bezier(0.2, 0.0, 0.0, 1.0));
  /* overlay */
  position: fixed;
  inset: 0;
  z-index: var(--cssnt-dialog-z);
  display: grid;
  place-items: center;
  padding: var(--cssnt-dialog-inset);
  box-sizing: border-box;
  /* CLOSED (default) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--cssnt-dialog-dur) var(--cssnt-dialog-ease), visibility 0s linear var(--cssnt-dialog-dur);
}

.cssnt-dialog.is-open,
.cssnt-dialog[data-open=true] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--cssnt-dialog-dur) var(--cssnt-dialog-ease);
}

/* scrim */
.cssnt-dialog__scrim {
  position: absolute;
  inset: 0;
  background: var(--cssnt-dialog-scrim);
  opacity: 0;
  transition: opacity var(--cssnt-dialog-dur) var(--cssnt-dialog-ease);
}

.cssnt-dialog.is-open .cssnt-dialog__scrim,
.cssnt-dialog[data-open=true] .cssnt-dialog__scrim {
  opacity: 1;
}

/* surface */
.cssnt-dialog__surface {
  position: relative;
  z-index: 1;
  inline-size: min(var(--cssnt-dialog-w), 100vw - var(--cssnt-dialog-inset) * 2);
  min-inline-size: min(var(--cssnt-dialog-minw), 100%);
  max-inline-size: 100%;
  max-block-size: calc(100vh - var(--cssnt-dialog-inset) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--cssnt-dialog-gap);
  background: var(--cssnt-dialog-container);
  color: var(--cssnt-dialog-on);
  border-radius: var(--cssnt-dialog-radius);
  box-shadow: var(--cssnt-dialog-elev);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform var(--cssnt-dialog-dur) var(--cssnt-dialog-ease), opacity var(--cssnt-dialog-dur) var(--cssnt-dialog-ease);
}

.cssnt-dialog.is-open .cssnt-dialog__surface,
.cssnt-dialog[data-open=true] .cssnt-dialog__surface {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-dialog,
  .cssnt-dialog__scrim,
  .cssnt-dialog__surface {
    transition: none;
  }
  .cssnt-dialog__surface {
    transform: none;
  }
}
/* ============================================================
   Slots
   ============================================================ */
.cssnt-dialog__header {
  min-block-size: var(--cssnt-dialog-header-h);
  padding: var(--cssnt-dialog-pad);
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-3, 12px);
}

/* (opcional) icon slot */
.cssnt-dialog__hero {
  display: grid;
  place-items: center;
}

.cssnt-dialog__title {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--cssnt-type-title-lg-family);
  font-size: var(--cssnt-type-title-lg-size);
  line-height: var(--cssnt-type-title-lg-line);
  font-weight: var(--cssnt-type-title-lg-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cssnt-dialog__body {
  padding: var(--cssnt-dialog-pad);
  padding-top: 0;
  display: grid;
  gap: var(--cssnt-dialog-gap);
  overflow: auto;
}

.cssnt-dialog__footer {
  padding: var(--cssnt-dialog-pad);
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--cssnt-dialog-action-gap);
  flex-wrap: wrap;
}

/* ============================================================
   Core variants
   ============================================================ */
/* full screen */
.cssnt-dialog--full {
  padding: 0;
  place-items: stretch;
}

.cssnt-dialog--full .cssnt-dialog__surface {
  inline-size: 100vw;
  block-size: 100vh;
  max-block-size: 100vh;
  border-radius: 0;
  box-shadow: none;
}

/* sizes */
.cssnt-dialog--sm {
  --cssnt-dialog-w: 360px;
}

.cssnt-dialog--lg {
  --cssnt-dialog-w: 720px;
}

/* divider */
.cssnt-dialog--divider .cssnt-dialog__header {
  padding-bottom: var(--cssnt-dialog-pad);
  border-bottom: 1px solid var(--cssnt-dialog-outline);
}

.cssnt-dialog--divider .cssnt-dialog__footer {
  padding-top: var(--cssnt-dialog-pad);
  border-top: 1px solid var(--cssnt-dialog-outline);
}

/* ============================================================
   Contract variants: header
   ============================================================ */
.cssnt-dialog--noHeader .cssnt-dialog__header {
  display: none;
}

/* basic: header normal (default) */
.cssnt-dialog--header-basic .cssnt-dialog__header {
  display: flex;
}

/* full: header tipo appbar */
.cssnt-dialog--header-full .cssnt-dialog__header {
  padding: 0 var(--cssnt-dialog-pad);
  min-block-size: var(--cssnt-dialog-header-h);
}

/* ============================================================
   Contract variants: footer
   ============================================================ */
.cssnt-dialog--noFooter .cssnt-dialog__footer {
  display: none;
}

.cssnt-dialog--footer-actions .cssnt-dialog__footer {
  display: flex;
}

/* ============================================================
   Contract variants: close behavior
   (CSS solo controla visibilidad / pointer-events)
   NOTA: Se removieron TODOS los estilos visuales de .cssnt-dialog__close
   para que tu <Button> sea el responsable.
   ============================================================ */
.cssnt-dialog--noClose .cssnt-dialog__close {
  display: none;
}

.cssnt-dialog--noClose .cssnt-dialog__scrim {
  pointer-events: none;
}

.cssnt-dialog--close-overlay .cssnt-dialog__close {
  display: none;
} /* solo scrim */
.cssnt-dialog--close-button .cssnt-dialog__scrim {
  pointer-events: none;
} /* solo botón */
/* default */
/* ============================================================
   Mobile: basic se pega abajo (M3-ish)
   ============================================================ */
@media (max-width: 480px) {
  .cssnt-dialog:not(.cssnt-dialog--full) {
    place-items: end center;
    padding: var(--cssnt-space-5, 24px);
  }
}
/* ============================================================
 * BREADCRUMB (Material Design 3 – Chip-based)
 * BEM:
 * .cssnt-breadcrumb
 *   └─ __item
 *   └─ __divider
 * ============================================================ */
.cssnt-breadcrumb {
  display: flex;
  align-items: center;
  font-family: var(--cssnt-type-label-md-family);
  font-size: var(--cssnt-type-label-md-size);
  line-height: var(--cssnt-type-label-md-line);
  list-style: none;
  padding: 0;
  margin: 0;
  /* Cada paso (chip + divider) */
}
.cssnt-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.cssnt-breadcrumb {
  /* Separador entre chip */
}
.cssnt-breadcrumb__divider {
  display: inline-flex;
  align-items: center;
  margin-inline: var(--cssnt-space-2); /* espaciado simétrico */
  color: var(--cssnt-color-outline);
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

/* ============================================================
   Alert.css (solo ITEM / look & feel / swipe hooks / controls)
   - NO position fixed, NO placement (eso va en AlertsStack.css)
   - Corrección: outlined + inverse-neutral debe usar “container” oscuro
     (no texto blanco sobre fondo transparente)
   ============================================================ */
.cssnt-alert {
  /* filled defaults */
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_border: var(--cssnt-color-outline-variant);
  /* outline defaults (se redefinen por tono si hace falta) */
  --_bg-outline: transparent;
  --_on-outline: var(--cssnt-color-surface-on);
  --_border-outline: var(--cssnt-color-outline-variant);
  /* controls color (dark-mode safe) */
  --_controls-on: var(--_on);
  --_controls-on-outline: var(--_on-outline);
  /* shape/elevation */
  --_radius: var(--cssnt-radius-sm);
  --_elev: var(--cssnt-elev-2-shadow);
  /* sizing */
  --_min-h: 48px;
  --_max-w: 560px;
  /* swipe */
  --_swipe-x: 0px;
  --_swipe-y: 0px; /* por si luego soportas axis "y" */
  box-sizing: border-box;
  min-block-size: var(--_min-h);
  max-inline-size: min(var(--_max-w), 100vw - var(--cssnt-space-4) * 2);
  inline-size: min(var(--_max-w), 100vw - var(--cssnt-space-4) * 2);
  background: var(--_bg);
  color: var(--_on);
  border: 0 solid transparent;
  border-radius: var(--_radius);
  box-shadow: var(--_elev);
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-3);
  padding-inline: var(--cssnt-space-4);
  padding-block: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(var(--_swipe-x), var(--_swipe-y), 0);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .cssnt-alert {
    transition: none;
  }
}

/* open/close */
.cssnt-alert[data-state=open] {
  opacity: 1;
}

.cssnt-alert[data-state=closed] {
  opacity: 0;
  pointer-events: none;
}

/* content */
.cssnt-alert__message {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: var(--cssnt-type-body-md-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* two lines */
.cssnt-alert--two-lines {
  align-items: flex-start;
  padding-block: var(--cssnt-space-3);
}

.cssnt-alert--two-lines .cssnt-alert__message {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* controls wrapper */
.cssnt-alert__controls {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cssnt-space-1);
}

/* controles heredan currentColor */
.cssnt-alert__action,
.cssnt-alert__close {
  color: var(--_controls-on);
}

.cssnt-alert--outline .cssnt-alert__action,
.cssnt-alert--outline .cssnt-alert__close {
  color: var(--_controls-on-outline);
}

/* neutraliza tu Button SOLO dentro del alert */
.cssnt-alert__action .cssnt-button,
.cssnt-alert__close .cssnt-button {
  min-width: 0 !important;
  min-inline-size: 0 !important;
  color: inherit !important;
}

/* iconos dentro del Button: forzar currentColor */
.cssnt-alert__action .cssnt-button svg,
.cssnt-alert__close .cssnt-button svg,
.cssnt-alert__action .cssnt-button [class*=material-symbol],
.cssnt-alert__close .cssnt-button [class*=material-symbol] {
  color: inherit !important;
  fill: currentColor !important;
}

/* action: compacto */
.cssnt-alert__action .cssnt-button {
  padding-inline: var(--cssnt-space-2) !important;
}

/* close: icon-button 40x40 */
.cssnt-alert__close .cssnt-button {
  inline-size: 40px !important;
  block-size: 40px !important;
  padding: 0 !important;
}

/* outlined (base) */
.cssnt-alert--outline {
  background: var(--_bg-outline);
  color: var(--_on-outline);
  border-width: 1px;
  border-style: solid;
  border-color: var(--_border-outline);
  box-shadow: var(--cssnt-elev-0-shadow);
}

/* ============================================================
   Swipe hooks (CSS-only; JS controla data-swipe y vars)
   ============================================================ */
.cssnt-alert[data-swipe=move] {
  transition: none;
}

.cssnt-alert[data-swipe=cancel] {
  transition: transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
  transform: translate3d(0, 0, 0);
}

.cssnt-alert[data-swipe=end] {
  transition: transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
  opacity: 0;
}

/* ============================================================
   Tones (solo variables)
   Nota M3-ish:
   - filled usa (tone) + on(tone)
   - outlined usa *container* como fondo (más suave),
     para que NO parezca “blanco puro” en inverse.
   ============================================================ */
/* Neutral (CLARO) */
.cssnt-alert--neutral {
  --_bg: var(--cssnt-color-surface-variant);
  --_on: var(--cssnt-color-surface-variant-on);
  --_border: var(--cssnt-color-outline-variant);
  /* outlined: surface clara + texto oscuro */
  --_bg-outline: var(--cssnt-color-surface);
  --_on-outline: var(--cssnt-color-surface-on);
  --_border-outline: var(--cssnt-color-outline-variant);
  --_controls-on: var(--cssnt-color-surface-on);
  --_controls-on-outline: var(--cssnt-color-surface-on);
}

/* Inverse neutral (OSCURO) */
.cssnt-alert--inverse-neutral {
  /* filled: snackbar oscuro */
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_border: var(--cssnt-color-outline-variant);
  /* FIX: outlined inverse NO debe ser transparente con texto blanco.
     Usamos surface-inverse como “container” (oscuro) + texto claro,
     y borde outline-variant para separar del fondo. */
  --_bg-outline: var(--cssnt-color-surface-inverse);
  --_on-outline: var(--cssnt-color-surface-inverse-on);
  --_border-outline: var(--cssnt-color-outline-variant);
  --_controls-on: var(--cssnt-color-surface-inverse-on);
  --_controls-on-outline: var(--cssnt-color-surface-inverse-on);
}

/* Primary */
.cssnt-alert--primary {
  --_bg: var(--cssnt-color-primary);
  --_on: var(--cssnt-color-primary-on);
  --_border: var(--cssnt-color-primary);
  /* outlined: container claro + texto oscuro */
  --_bg-outline: var(--cssnt-color-primary-container);
  --_on-outline: var(--cssnt-color-primary-container-on);
  --_border-outline: var(--cssnt-color-primary);
  --_controls-on: var(--cssnt-color-primary-on);
  --_controls-on-outline: var(--cssnt-color-primary-container-on);
}

/* Secondary */
.cssnt-alert--secondary {
  --_bg: var(--cssnt-color-secondary);
  --_on: var(--cssnt-color-secondary-on);
  --_border: var(--cssnt-color-secondary);
  --_bg-outline: var(--cssnt-color-secondary-container);
  --_on-outline: var(--cssnt-color-secondary-container-on);
  --_border-outline: var(--cssnt-color-secondary);
  --_controls-on: var(--cssnt-color-secondary-on);
  --_controls-on-outline: var(--cssnt-color-secondary-container-on);
}

/* Tertiary */
.cssnt-alert--tertiary {
  --_bg: var(--cssnt-color-tertiary);
  --_on: var(--cssnt-color-tertiary-on);
  --_border: var(--cssnt-color-tertiary);
  --_bg-outline: var(--cssnt-color-tertiary-container);
  --_on-outline: var(--cssnt-color-tertiary-container-on);
  --_border-outline: var(--cssnt-color-tertiary);
  --_controls-on: var(--cssnt-color-tertiary-on);
  --_controls-on-outline: var(--cssnt-color-tertiary-container-on);
}

/* Success */
.cssnt-alert--success {
  --_bg: var(--cssnt-color-success);
  --_on: var(--cssnt-color-success-on);
  --_border: var(--cssnt-color-success);
  --_bg-outline: var(--cssnt-color-success-container);
  --_on-outline: var(--cssnt-color-success-container-on);
  --_border-outline: var(--cssnt-color-success);
  --_controls-on: var(--cssnt-color-success-on);
  --_controls-on-outline: var(--cssnt-color-success-container-on);
}

/* Warning */
.cssnt-alert--warning {
  --_bg: var(--cssnt-color-warning);
  --_on: var(--cssnt-color-warning-on);
  --_border: var(--cssnt-color-warning);
  --_bg-outline: var(--cssnt-color-warning-container);
  --_on-outline: var(--cssnt-color-warning-container-on);
  --_border-outline: var(--cssnt-color-warning);
  --_controls-on: var(--cssnt-color-warning-on);
  --_controls-on-outline: var(--cssnt-color-warning-container-on);
}

/* Danger */
.cssnt-alert--danger {
  --_bg: var(--cssnt-color-danger);
  --_on: var(--cssnt-color-danger-on);
  --_border: var(--cssnt-color-danger);
  --_bg-outline: var(--cssnt-color-danger-container);
  --_on-outline: var(--cssnt-color-danger-container-on);
  --_border-outline: var(--cssnt-color-danger);
  --_controls-on: var(--cssnt-color-danger-on);
  --_controls-on-outline: var(--cssnt-color-danger-container-on);
}

/* Info */
.cssnt-alert--info {
  --_bg: var(--cssnt-color-info);
  --_on: var(--cssnt-color-info-on);
  --_border: var(--cssnt-color-info);
  --_bg-outline: var(--cssnt-color-info-container);
  --_on-outline: var(--cssnt-color-info-container-on);
  --_border-outline: var(--cssnt-color-info);
  --_controls-on: var(--cssnt-color-info-on);
  --_controls-on-outline: var(--cssnt-color-info-container-on);
}

/* ============================================================
   AlertsStack.css (solo STACK / placement / layout) — 5 puntos
   Placements:
   - top-left | top-right
   - bottom-left | bottom-center | bottom-right
   ============================================================ */
.cssnt-alerts {
  --_gap: var(--cssnt-space-2);
  --_pad: var(--cssnt-space-4);
  position: fixed;
  z-index: 60;
  /* stacking vertical */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--_gap);
  /* opcional: scroll si se acumulan muchas */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 300px;
  padding: var(--_gap);
  pointer-events: none; /* solo items reciben clicks */
}

/* cada item debe poder clickear */
.cssnt-alerts > * {
  pointer-events: auto;
}

/* ============================
   5 placements
   ============================ */
/* TOP */
.cssnt-alerts--top-left {
  top: var(--_pad);
  left: var(--_pad);
  right: auto;
  bottom: auto;
  justify-items: start; /* alinea items hacia la izquierda */
}

.cssnt-alerts--top-right {
  top: var(--_pad);
  right: var(--_pad);
  left: auto;
  bottom: auto;
  justify-items: end; /* alinea items hacia la derecha */
}

/* BOTTOM */
.cssnt-alerts--bottom-left {
  bottom: var(--_pad);
  left: var(--_pad);
  right: auto;
  top: auto;
  justify-items: start;
}

.cssnt-alerts--bottom-center {
  bottom: var(--_pad);
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  top: auto;
  justify-items: center;
}

.cssnt-alerts--bottom-right {
  bottom: var(--_pad);
  right: var(--_pad);
  left: auto;
  top: auto;
  justify-items: end;
}

/* Full width (stack) */
.cssnt-alerts--fullwidth {
  left: var(--_pad);
  right: var(--_pad);
  transform: none; /* importante si vienes de bottom-center */
  max-inline-size: none;
  justify-items: stretch;
}

/* ============================================================
   TOOLTIP (M3-ish) — full (anchored)
   Wrapper:
   .cssnt-tooltip__anchor (relative, inline-flex)
   Menu:
   .cssnt-tooltip (absolute, positioned by data-side)
   ============================================================ */
.cssnt-tooltip__anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.cssnt-tooltip {
  /* ---------- filled palette defaults (inverse neutral) ---------- */
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_border: var(--cssnt-color-outline-variant);
  /* ---------- outline palette defaults ---------- */
  --_bg-outline: transparent;
  --_on-outline: var(--cssnt-color-surface-on);
  --_border-outline: var(--cssnt-color-outline-variant);
  /* ---------- shape/elevation ---------- */
  --_radius: var(--cssnt-radius-md);
  --_elev: var(--cssnt-elev-2-shadow);
  /* ---------- layout ---------- */
  --_max: 320px;
  --_pad-x: var(--cssnt-space-4);
  --_pad-y: var(--cssnt-space-3);
  --_gap: var(--cssnt-space-2);
  --_offset: var(--cssnt-space-2);
  /* ---------- typography (rich defaults) ---------- */
  --_title-family: var(--cssnt-type-title-sm-family);
  --_title-size: var(--cssnt-type-title-sm-size);
  --_title-line: var(--cssnt-type-title-sm-line);
  --_title-weight: var(--cssnt-type-title-sm-weight);
  --_body-family: var(--cssnt-type-body-sm-family);
  --_body-size: var(--cssnt-type-body-sm-size);
  --_body-line: var(--cssnt-type-body-sm-line);
  --_body-weight: var(--cssnt-type-body-sm-weight);
  /* ---------- motion internals ---------- */
  --_scale: 0.98;
  --_dx: 0px;
  --_dy: 2px;
  /* base */
  box-sizing: border-box;
  max-inline-size: var(--_max);
  background: var(--_bg);
  color: var(--_on);
  border: 0 solid transparent;
  border-radius: var(--_radius);
  box-shadow: var(--_elev);
  padding: var(--_pad-y) var(--_pad-x);
  z-index: 50;
  display: grid;
  gap: var(--_gap);
  /* anchor positioning */
  position: absolute;
  /* visibility */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .cssnt-tooltip {
    transition: none;
  }
}

.cssnt-tooltip[data-state=open] {
  opacity: 1;
  pointer-events: auto;
  --_scale: 1;
  --_dx: 0px;
  --_dy: 0px;
}

/* ============================================================
   POSITIONING (relative to .cssnt-tooltip__anchor)
   ============================================================ */
.cssnt-tooltip[data-side=top] {
  left: 50%;
  bottom: calc(100% + var(--_offset));
  transform: translate3d(-50%, var(--_dy), 0) scale(var(--_scale));
}

.cssnt-tooltip[data-side=bottom] {
  left: 50%;
  top: calc(100% + var(--_offset));
  /* en cerrado sube un poco */
  --_dy: -2px;
  transform: translate3d(-50%, var(--_dy), 0) scale(var(--_scale));
}

.cssnt-tooltip[data-side=left] {
  right: calc(100% + var(--_offset));
  top: 50%;
  /* en cerrado empuja hacia el trigger */
  --_dx: 2px;
  transform: translate3d(var(--_dx), -50%, 0) scale(var(--_scale));
}

.cssnt-tooltip[data-side=right] {
  left: calc(100% + var(--_offset));
  top: 50%;
  /* en cerrado empuja hacia el trigger */
  --_dx: -2px;
  transform: translate3d(var(--_dx), -50%, 0) scale(var(--_scale));
}

/* ============================================================
   Sections
   ============================================================ */
.cssnt-tooltip__header {
  display: grid;
  gap: var(--cssnt-space-1);
}

.cssnt-tooltip__title {
  margin: 0;
  font-family: var(--_title-family);
  font-size: var(--_title-size);
  line-height: var(--_title-line);
  font-weight: var(--_title-weight);
  letter-spacing: 0.1px;
}

.cssnt-tooltip__body {
  margin: 0;
  font-family: var(--_body-family);
  font-size: var(--_body-size);
  line-height: var(--_body-line);
  font-weight: var(--_body-weight);
  letter-spacing: 0.2px;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cssnt-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cssnt-space-4);
  flex-wrap: wrap;
  margin-top: var(--cssnt-space-1);
}

/* ============================================================
   Size: plain (auto width + cap)
   ============================================================ */
.cssnt-tooltip--plain {
  inline-size: max-content;
  max-inline-size: 220px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --_radius: var(--cssnt-radius-sm);
  --_elev: var(--cssnt-elev-1-shadow);
  --_pad-x: var(--cssnt-space-2);
  --_pad-y: var(--cssnt-space-1);
  --_body-family: var(--cssnt-type-label-md-family);
  --_body-size: var(--cssnt-type-label-md-size);
  --_body-line: var(--cssnt-type-label-md-line);
  --_body-weight: var(--cssnt-type-label-md-weight);
  gap: 0;
}
.cssnt-tooltip--plain .cssnt-tooltip__header,
.cssnt-tooltip--plain .cssnt-tooltip__footer {
  display: none;
}

/* Rich queda como default */
/* ============================================================
   Surface: outline
   ============================================================ */
.cssnt-tooltip--outline {
  background: var(--_bg-outline);
  color: var(--_on-outline);
  border-width: 1px;
  border-color: var(--_border-outline);
  box-shadow: var(--cssnt-elev-0-shadow);
}

/* ============================================================
   Tones
   ============================================================ */
/* Neutral (CLARO) */
.cssnt-tooltip--neutral {
  --_bg: var(--cssnt-color-surface-variant);
  --_on: var(--cssnt-color-surface-variant-on);
  --_border: var(--cssnt-color-outline-variant);
  --_bg-outline: var(--cssnt-color-surface);
  --_on-outline: var(--cssnt-color-surface-on);
  --_border-outline: var(--cssnt-color-outline-variant);
}

/* Inverse neutral (OSCURO) */
.cssnt-tooltip--inverse-neutral {
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_border: var(--cssnt-color-outline-variant);
  --_bg-outline: transparent;
  --_on-outline: var(--cssnt-color-surface-inverse-on);
  --_border-outline: var(--cssnt-color-outline-variant);
}

/* Primary */
.cssnt-tooltip--primary {
  --_bg: var(--cssnt-color-primary);
  --_on: var(--cssnt-color-primary-on);
  --_border: var(--cssnt-color-primary);
  --_bg-outline: var(--cssnt-color-primary-container);
  --_on-outline: var(--cssnt-color-primary-container-on);
  --_border-outline: var(--cssnt-color-primary);
}

/* Secondary */
.cssnt-tooltip--secondary {
  --_bg: var(--cssnt-color-secondary);
  --_on: var(--cssnt-color-secondary-on);
  --_border: var(--cssnt-color-secondary);
  --_bg-outline: var(--cssnt-color-secondary-container);
  --_on-outline: var(--cssnt-color-secondary-container-on);
  --_border-outline: var(--cssnt-color-secondary);
}

/* Tertiary */
.cssnt-tooltip--tertiary {
  --_bg: var(--cssnt-color-tertiary);
  --_on: var(--cssnt-color-tertiary-on);
  --_border: var(--cssnt-color-tertiary);
  --_bg-outline: var(--cssnt-color-tertiary-container);
  --_on-outline: var(--cssnt-color-tertiary-container-on);
  --_border-outline: var(--cssnt-color-tertiary);
}

/* Success */
.cssnt-tooltip--success {
  --_bg: var(--cssnt-color-success);
  --_on: var(--cssnt-color-success-on);
  --_border: var(--cssnt-color-success);
  --_bg-outline: var(--cssnt-color-success-container);
  --_on-outline: var(--cssnt-color-success-container-on);
  --_border-outline: var(--cssnt-color-success);
}

/* Warning */
.cssnt-tooltip--warning {
  --_bg: var(--cssnt-color-warning);
  --_on: var(--cssnt-color-warning-on);
  --_border: var(--cssnt-color-warning);
  --_bg-outline: var(--cssnt-color-warning-container);
  --_on-outline: var(--cssnt-color-warning-container-on);
  --_border-outline: var(--cssnt-color-warning);
}

/* Danger */
.cssnt-tooltip--danger {
  --_bg: var(--cssnt-color-danger);
  --_on: var(--cssnt-color-danger-on);
  --_border: var(--cssnt-color-danger);
  --_bg-outline: var(--cssnt-color-danger-container);
  --_on-outline: var(--cssnt-color-danger-container-on);
  --_border-outline: var(--cssnt-color-danger);
}

/* Info */
.cssnt-tooltip--info {
  --_bg: var(--cssnt-color-info);
  --_on: var(--cssnt-color-info-on);
  --_border: var(--cssnt-color-info);
  --_bg-outline: var(--cssnt-color-info-container);
  --_on-outline: var(--cssnt-color-info-container-on);
  --_border-outline: var(--cssnt-color-info);
}

/* ============================================================
   Helpers
   ============================================================ */
.cssnt-tooltip__muted {
  opacity: 0.85;
}

.cssnt-tooltip__nowrap {
  white-space: nowrap;
}

/* ============================================================
 * TABS — default (única variante) con indicador GLOBAL ABAJO (smooth)
 * - NO cambia color de icon/text al seleccionar
 * - Selección: label más bold (y el indicador se desliza)
 * - Divider abajo
 * - Items clickeables (NO button)
 * - Badge sin hover propio y sin capturar clicks
 * - Requiere JS mínimo para setear: --_ind-x y --_ind-w en .cssnt-tabs__list
 * ============================================================ */
.cssnt-tabs {
  --cssnt-tabs-accent: var(--cssnt-color-primary);
  --cssnt-tabs-on: var(--cssnt-color-surface-on);
  --cssnt-tabs-divider: var(--cssnt-color-outline-variant);
  /* sizing */
  --_h: 56px;
  --_pad-x: 12px; /* ojo: si cambias esto, tu JS debe sumar lo mismo */
  --_gap: 8px;
  /* states */
  --_state-color: var(--cssnt-tabs-on);
  --_hover: var(--cssnt-state-hover-layer);
  --_focus: var(--cssnt-state-focus-layer);
  --_pressed: var(--cssnt-state-pressed-layer);
  /* indicator */
  --_ind-h: 3px;
  --_ind-minw: 16px;
  --_ind-x: 0px; /* JS */
  --_ind-w: 0px; /* JS */
  /* motion */
  --_dur: var(--cssnt-motion-dur-med-1);
  --_ease: var(--cssnt-motion-ease-standard);
  position: relative;
  display: block;
  background: var(--cssnt-color-surface);
  color: var(--cssnt-tabs-on);
}

.cssnt-tabs__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-block-size: var(--_h);
  padding-inline: var(--_pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.cssnt-tabs__list::-webkit-scrollbar {
  display: none;
}
.cssnt-tabs__list {
  /* divider abajo */
}
.cssnt-tabs__list::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--cssnt-tabs-divider);
  pointer-events: none;
  z-index: 1;
}
.cssnt-tabs__list {
  /* indicador GLOBAL deslizante (sobre el divider) */
}
.cssnt-tabs__list::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  block-size: var(--_ind-h);
  inline-size: max(var(--_ind-w), var(--_ind-minw));
  /* JS setea --_ind-x relativo al contenido (SIN padding);
     aquí sumamos el padding del list para que caiga bien */
  transform: translate3d(calc(var(--_pad-x) + var(--_ind-x)), 0, 0);
  border-radius: 2px 2px 0 0;
  background: var(--cssnt-tabs-accent);
  pointer-events: none;
  z-index: 2;
  height: 3.5px;
  transition: transform var(--_dur) var(--_ease), inline-size var(--_dur) var(--_ease);
}

/* item clickeable */
.cssnt-tabs__item {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: var(--_h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  padding: 8px 0 8px 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* SIEMPRE mismo color */
  color: var(--cssnt-tabs-on);
  /* herencia de color dentro del badge */
}
.cssnt-tabs__item .cssnt-badge-anchor,
.cssnt-tabs__item .cssnt-badge-anchor__label,
.cssnt-tabs__item .cssnt-badge-anchor__target {
  color: inherit;
}
.cssnt-tabs__item {
  /* Badge: sin hover propio y sin capturar clicks */
}
.cssnt-tabs__item .cssnt-badge-anchor {
  pointer-events: none;
}
.cssnt-tabs__item .cssnt-badge-anchor.is-interactive::after {
  display: none !important;
}
.cssnt-tabs__item .cssnt-badge-anchor.is-interactive,
.cssnt-tabs__item .cssnt-badge-anchor.is-interactive .cssnt-badge-anchor__label {
  cursor: inherit !important;
}
.cssnt-tabs__item {
  /* state layer del item */
}
.cssnt-tabs__item::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  transition: background var(--_dur) var(--_ease);
}
.cssnt-tabs__item {
  /* Hover / Pressed / Focus */
}
@media (hover: hover) {
  .cssnt-tabs__item:not(.is-disabled):not([aria-disabled=true]):hover::before {
    background: color-mix(in srgb, var(--_state-color) calc(var(--_hover) * 100%), transparent);
  }
}
.cssnt-tabs__item:not(.is-disabled):not([aria-disabled=true]):active::before {
  background: color-mix(in srgb, var(--_state-color) calc(var(--_pressed) * 100%), transparent);
}
.cssnt-tabs__item:focus {
  outline: none;
}
.cssnt-tabs__item:focus-visible::before {
  background: color-mix(in srgb, var(--_state-color) calc(var(--_focus) * 100%), transparent);
}
.cssnt-tabs__item {
  /* Disabled */
}
.cssnt-tabs__item.is-disabled, .cssnt-tabs__item[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--cssnt-state-disabled-content);
}
.cssnt-tabs__item {
  /* Seleccionado: SOLO label más bold (sin cambiar color) */
}
.cssnt-tabs__item.is-active .cssnt-badge-anchor__label, .cssnt-tabs__item[aria-selected=true] .cssnt-badge-anchor__label {
  font-size: 15px;
  font-weight: 600;
}

/* opcional: ocultar indicador global */
.cssnt-tabs--no-indicator .cssnt-tabs__list::after {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-tabs__list::after,
  .cssnt-tabs__item::before {
    transition: none;
  }
}
/* ============================================================
   Bottom Sheet (M3-ish) — simple + robust
   ============================================================ */
.cssnt-bottomsheet {
  /* ===== Internas ===== */
  --_scrim-opacity: 0.45;
  --_scrim-color: rgb(0 0 0 / var(--_scrim-opacity));
  --_sheet-bg: var(--cssnt-color-surface);
  --_sheet-fg: var(--cssnt-color-surface-on);
  /* radius (solo superiores) */
  --_radius-top: var(--cssnt-radius-xl);
  --_shadow: var(--cssnt-elev-4-shadow);
  --_w: 100%;
  --_max-w: 720px;
  --_min-h: 120px;
  --_max-h: 90vh;
  --_pad-x: var(--cssnt-space-5);
  --_pad-y: var(--cssnt-space-5);
  --_handle-w: 44px;
  --_handle-h: 5px;
  --_handle-r: var(--cssnt-radius-full);
  --_handle-color: var(--cssnt-color-outline-variant);
  --_dur-in: var(--cssnt-motion-dur-med-2);
  --_dur-out: var(--cssnt-motion-dur-med-1);
  --_ease: var(--cssnt-motion-ease-standard);
  /* ===== Root ===== */
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  display: grid;
  place-items: end center;
  color: var(--_sheet-fg);
}
.cssnt-bottomsheet.is-open {
  pointer-events: auto;
}
.cssnt-bottomsheet {
  /* ===== Scrim ===== */
}
.cssnt-bottomsheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--_scrim-color);
  opacity: 0;
  transition: opacity var(--_dur-out) var(--_ease);
}
.cssnt-bottomsheet {
  /* ===== Sheet ===== */
}
.cssnt-bottomsheet__sheet {
  position: relative;
  inline-size: min(var(--_w), var(--_max-w));
  min-block-size: var(--_min-h);
  max-block-size: var(--_max-h);
  background: var(--_sheet-bg);
  border-radius: var(--_radius-top) var(--_radius-top) 0 0;
  box-shadow: var(--_shadow);
  transform: translateY(110%);
  transition: transform var(--_dur-out) var(--_ease);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  overflow: hidden;
}
.cssnt-bottomsheet {
  /* ===== Open ===== */
}
.cssnt-bottomsheet.is-open .cssnt-bottomsheet__scrim {
  opacity: 1;
  transition-duration: var(--_dur-in);
}
.cssnt-bottomsheet.is-open .cssnt-bottomsheet__sheet {
  transform: translateY(0);
  transition-duration: var(--_dur-in);
}
.cssnt-bottomsheet {
  /* ===== Dragging ===== */
}
.cssnt-bottomsheet.is-dragging .cssnt-bottomsheet__scrim,
.cssnt-bottomsheet.is-dragging .cssnt-bottomsheet__sheet {
  transition: none;
}
.cssnt-bottomsheet {
  /* ===== Handle ===== */
}
.cssnt-bottomsheet__handle {
  display: grid;
  place-items: center;
  padding: var(--cssnt-space-3) 0 var(--cssnt-space-2);
}
.cssnt-bottomsheet__handle::before {
  content: "";
  inline-size: var(--_handle-w);
  block-size: var(--_handle-h);
  border-radius: var(--_handle-r);
  background: var(--_handle-color);
}
.cssnt-bottomsheet {
  /* ===== Header ===== */
}
.cssnt-bottomsheet__header {
  padding: 0 var(--_pad-x) var(--cssnt-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-3);
}
.cssnt-bottomsheet__title {
  margin: 0;
  font-family: var(--cssnt-type-title-lg-family);
  font-size: var(--cssnt-type-title-lg-size);
  line-height: var(--cssnt-type-title-lg-line);
  font-weight: var(--cssnt-type-title-lg-weight);
}
.cssnt-bottomsheet__subtitle {
  margin: 0;
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: var(--cssnt-type-body-md-weight);
  color: color-mix(in srgb, var(--_sheet-fg) 72%, transparent);
}
.cssnt-bottomsheet {
  /* ===== Content ===== */
}
.cssnt-bottomsheet__content {
  padding: 0 var(--_pad-x) var(--_pad-y);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cssnt-bottomsheet {
  /* ===== Footer ===== */
}
.cssnt-bottomsheet__footer {
  padding: var(--cssnt-space-3) var(--_pad-x) var(--cssnt-space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
  border-top: 1px solid color-mix(in srgb, var(--cssnt-color-outline-variant) 70%, transparent);
}
.cssnt-bottomsheet {
  /* ===== Sizes (WIDTH) ===== */
}
.cssnt-bottomsheet--sm {
  --_max-w: 420px;
}
.cssnt-bottomsheet--md {
  --_max-w: 720px;
}
.cssnt-bottomsheet--lg {
  --_max-w: 960px;
}
.cssnt-bottomsheet--full {
  --_max-w: 100vw;
  --_radius-top: 0px;
}
.cssnt-bottomsheet {
  /* ===== Radius variants (TOP ONLY) ===== */
}
.cssnt-bottomsheet--radius-none {
  --_radius-top: 0px;
}
.cssnt-bottomsheet--radius-sm {
  --_radius-top: var(--cssnt-radius-sm);
}
.cssnt-bottomsheet--radius-md {
  --_radius-top: var(--cssnt-radius-md);
}
.cssnt-bottomsheet--radius-lg {
  --_radius-top: var(--cssnt-radius-lg);
}
.cssnt-bottomsheet--radius-xl {
  --_radius-top: var(--cssnt-radius-xl);
}
.cssnt-bottomsheet--radius-full {
  --_radius-top: var(--cssnt-radius-full);
}
.cssnt-bottomsheet {
  /* ===== Reduced motion ===== */
}
@media (prefers-reduced-motion: reduce) {
  .cssnt-bottomsheet__scrim, .cssnt-bottomsheet__sheet {
    transition: none !important;
  }
}

/* Evitar scroll de fondo */
body:has(.cssnt-bottomsheet.is-open) {
  overflow: hidden;
}

/* ============================================================
   Side Sheet (M3-ish) — left / right
   ============================================================ */
/* vars globales para push */
:root {
  --cssnt-sidesheet-push-left: 0px;
  --cssnt-sidesheet-push-right: 0px;
}

/* empuja layout (por default al body); si tu app usa wrapper, aquí es donde lo cambias */
body {
  padding-inline-start: var(--cssnt-sidesheet-push-left);
  padding-inline-end: var(--cssnt-sidesheet-push-right);
  transition: padding-inline-start var(--cssnt-motion-dur-med-2) var(--cssnt-motion-ease-standard), padding-inline-end var(--cssnt-motion-dur-med-2) var(--cssnt-motion-ease-standard);
}

.cssnt-sidesheet {
  /* ===== Internas ===== */
  --_scrim-opacity: 0.45;
  --_scrim-color: rgb(0 0 0 / var(--_scrim-opacity));
  --_sheet-bg: var(--cssnt-color-surface);
  --_sheet-fg: var(--cssnt-color-surface-on);
  /* radius */
  --_radius-inner: var(--cssnt-radius-xl);
  /* elevation (modal por default) */
  --_shadow: var(--cssnt-elev-4-shadow);
  /* divider (off por default) */
  --_divider-w: 0px;
  --_divider-color: var(--cssnt-color-outline-variant);
  /* width */
  --_w: 360px;
  --_max-w: 90vw;
  /* offsets */
  --_offset-top: 0px;
  --_offset-bottom: 0px;
  --_pad-x: var(--cssnt-space-5);
  --_pad-y: var(--cssnt-space-5);
  --_dur-in: var(--cssnt-motion-dur-med-2);
  --_dur-out: var(--cssnt-motion-dur-med-1);
  --_ease: var(--cssnt-motion-ease-standard);
  /* ===== Root ===== */
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  color: var(--_sheet-fg);
}
.cssnt-sidesheet.is-open {
  pointer-events: auto;
  touch-action: pan-y;
}
.cssnt-sidesheet {
  /* ===== Scrim ===== */
}
.cssnt-sidesheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--_scrim-color);
  opacity: 0;
  transition: opacity var(--_dur-out) var(--_ease);
}
.cssnt-sidesheet {
  /* ===== Sheet ===== */
}
.cssnt-sidesheet__sheet {
  position: absolute;
  inset-block-start: var(--_offset-top);
  inset-block-end: var(--_offset-bottom);
  inline-size: min(var(--_w), var(--_max-w));
  background: var(--_sheet-bg);
  box-shadow: var(--_shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transition: transform var(--_dur-out) var(--_ease);
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.cssnt-sidesheet {
  /* ===== Positions ===== */
}
.cssnt-sidesheet--right .cssnt-sidesheet__sheet {
  inset-inline-end: 0;
  border-radius: var(--_radius-inner) 0 0 var(--_radius-inner);
  border-left: var(--_divider-w) solid var(--_divider-color);
  transform: translateX(110%);
}
.cssnt-sidesheet--left .cssnt-sidesheet__sheet {
  inset-inline-start: 0;
  border-radius: 0 var(--_radius-inner) var(--_radius-inner) 0;
  border-right: var(--_divider-w) solid var(--_divider-color);
  transform: translateX(-110%);
}
.cssnt-sidesheet {
  /* ===== Open ===== */
}
.cssnt-sidesheet.is-open .cssnt-sidesheet__scrim {
  opacity: 1;
  transition-duration: var(--_dur-in);
}
.cssnt-sidesheet.is-open.cssnt-sidesheet--right .cssnt-sidesheet__sheet, .cssnt-sidesheet.is-open.cssnt-sidesheet--left .cssnt-sidesheet__sheet {
  transform: translateX(0);
}
.cssnt-sidesheet {
  /* ===== Dragging ===== */
}
.cssnt-sidesheet.is-dragging .cssnt-sidesheet__sheet,
.cssnt-sidesheet.is-dragging .cssnt-sidesheet__scrim {
  transition: none;
}
.cssnt-sidesheet {
  /* ===== Header ===== */
}
.cssnt-sidesheet__header {
  padding: var(--_pad-y) 10px var(--_pad-y) var(--_pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-3);
}
.cssnt-sidesheet__title {
  margin: 0;
  font-family: var(--cssnt-type-title-lg-family);
  font-size: var(--cssnt-type-title-lg-size);
  line-height: var(--cssnt-type-title-lg-line);
  font-weight: var(--cssnt-type-title-lg-weight);
}
.cssnt-sidesheet {
  /* ===== Content ===== */
}
.cssnt-sidesheet__content {
  padding: 0 var(--_pad-x) var(--_pad-y);
  overflow: auto;
}
.cssnt-sidesheet {
  /* ===== Footer ===== */
}
.cssnt-sidesheet__footer {
  padding: var(--cssnt-space-3) var(--_pad-x) var(--cssnt-space-4);
  border-top: 1px solid color-mix(in srgb, var(--cssnt-color-outline-variant) 70%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
}
.cssnt-sidesheet {
  /* ===== Sizes ===== */
}
.cssnt-sidesheet--minimized {
  --_w: 70px;
  --_pad-y: var(--cssnt-space-5);
  --_pad-x: var(--cssnt-space-2);
}
.cssnt-sidesheet--sm {
  --_w: 280px;
}
.cssnt-sidesheet--md {
  --_w: 360px;
}
.cssnt-sidesheet--lg {
  --_w: 480px;
}
.cssnt-sidesheet--full {
  --_w: 100vw;
  --_radius-inner: 0px;
}
.cssnt-sidesheet {
  /* ===== Standard ===== */
}
.cssnt-sidesheet--standard {
  --_shadow: var(--cssnt-elev-1-shadow);
  --_divider-w: 1px;
  --_radius-inner: var(--cssnt-radius-lg);
}
.cssnt-sidesheet {
  /* ===== Offset variants ===== */
}
.cssnt-sidesheet--offset-sm {
  --_offset-top: var(--cssnt-space-6);
  --_offset-bottom: var(--cssnt-space-6);
}
.cssnt-sidesheet--offset-md {
  --_offset-top: var(--cssnt-space-8);
  --_offset-bottom: var(--cssnt-space-8);
}
.cssnt-sidesheet--offset-lg {
  --_offset-top: var(--cssnt-space-10);
  --_offset-bottom: var(--cssnt-space-10);
}
.cssnt-sidesheet {
  /* ===== Radius variants ===== */
}
.cssnt-sidesheet--radius-none {
  --_radius-inner: 0px;
}
.cssnt-sidesheet--radius-sm {
  --_radius-inner: var(--cssnt-radius-sm);
}
.cssnt-sidesheet--radius-md {
  --_radius-inner: var(--cssnt-radius-md);
}
.cssnt-sidesheet--radius-lg {
  --_radius-inner: var(--cssnt-radius-lg);
}
.cssnt-sidesheet--radius-xl {
  --_radius-inner: var(--cssnt-radius-xl);
}
.cssnt-sidesheet--radius-full {
  --_radius-inner: var(--cssnt-radius-full);
}
.cssnt-sidesheet {
  /* ============================================================
     PUSH MODE (no modal): no scrim, no bloqueo, no overlay click
     ============================================================ */
}
.cssnt-sidesheet--push {
  /* no queremos que el root bloquee el resto del documento */
  pointer-events: none;
}
.cssnt-sidesheet--push.is-open {
  pointer-events: none; /* mantiene “passthrough” aunque esté abierto */
}
.cssnt-sidesheet--push .cssnt-sidesheet__sheet {
  pointer-events: auto; /* solo el panel captura clicks */
}
.cssnt-sidesheet--push .cssnt-sidesheet__scrim {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .cssnt-sidesheet__scrim, .cssnt-sidesheet__sheet {
    transition: none !important;
  }
}

/* Evitar scroll de fondo SOLO cuando es modal (no push) */
body:has(.cssnt-sidesheet.is-open):not(:has(.cssnt-sidesheet--push.is-open)) {
  overflow: hidden;
}

/* ============================================================
 * AVATAR (M3-ish)
 * + Stack opcional con label inferior
 * ============================================================ */
/* ============================================================
 * STACK (wrapper opcional)
 * ============================================================ */
.cssnt-avatar-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cssnt-space-2);
}

/* Texto inferior (nombre) */
.cssnt-avatar__label {
  font-family: var(--cssnt-type-label-sm-family);
  font-size: var(--cssnt-type-label-sm-size);
  line-height: var(--cssnt-type-label-sm-line);
  font-weight: var(--cssnt-type-label-sm-weight);
  color: var(--cssnt-color-on-surface-variant);
  text-align: center;
  max-width: calc(var(--_size) * 1.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
 * AVATAR CORE
 * ============================================================ */
.cssnt-avatar {
  /* Internas */
  --_size: var(--cssnt-avatar-size-md);
  --_font-size: 14px;
  --_font-weight: var(--cssnt-type-label-lg-weight);
  --_bg: var(--cssnt-avatar-bg);
  --_on: var(--cssnt-avatar-on);
  --_border: var(--cssnt-avatar-border);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--_size);
  height: var(--_size);
  border-radius: var(--cssnt-avatar-radius);
  overflow: hidden;
  user-select: none;
  background: var(--_bg);
  color: var(--_on);
  border: var(--cssnt-avatar-outline-w) solid transparent;
  box-shadow: none;
  font-family: var(--cssnt-type-label-lg-family), sans-serif;
  font-size: var(--_font-size);
  line-height: 1;
  font-weight: var(--_font-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* State layer */
}
.cssnt-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-avatar {
  /* Ring */
}
.cssnt-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 var(--cssnt-avatar-ring) color-mix(in srgb, var(--_border) var(--cssnt-avatar-ring-opacity), transparent);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-avatar:focus-visible {
  outline: none;
}

/* ============================================================
 * SIZES
 * ============================================================ */
.cssnt-avatar--sm {
  --_size: var(--cssnt-avatar-size-sm);
  --_font-size: 12px;
}

.cssnt-avatar--md {
  --_size: var(--cssnt-avatar-size-md);
  --_font-size: 14px;
}

.cssnt-avatar--lg {
  --_size: var(--cssnt-avatar-size-lg);
  --_font-size: 18px;
}

/* ============================================================
 * SHAPE
 * ============================================================ */
.cssnt-avatar--square {
  border-radius: var(--cssnt-avatar-radius-square);
}
.cssnt-avatar--square::after, .cssnt-avatar--square::before {
  border-radius: inherit;
}

/* ============================================================
 * STYLE
 * ============================================================ */
.cssnt-avatar--filled {
  background: var(--_bg);
  color: var(--_on);
}

.cssnt-avatar--outlined {
  background: var(--cssnt-color-surface);
  color: var(--_border);
  border-color: var(--cssnt-avatar-outline);
}

.cssnt-avatar--tonal {
  background: var(--_bg);
  color: var(--_on);
}

.cssnt-avatar--elevated {
  background: var(--_bg);
  color: var(--_on);
  box-shadow: var(--cssnt-avatar-elev);
}

/* ============================================================
 * COLOR VARIANTS
 * ============================================================ */
.cssnt-avatar--primary {
  --_bg: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
  --_border: var(--cssnt-color-primary);
}

.cssnt-avatar--secondary {
  --_bg: var(--cssnt-color-secondary-container);
  --_on: var(--cssnt-color-secondary-container-on);
  --_border: var(--cssnt-color-secondary);
}

.cssnt-avatar--tertiary {
  --_bg: var(--cssnt-color-tertiary-container);
  --_on: var(--cssnt-color-tertiary-container-on);
  --_border: var(--cssnt-color-tertiary);
}

.cssnt-avatar--success {
  --_bg: var(--cssnt-color-success-container);
  --_on: var(--cssnt-color-success-container-on);
  --_border: var(--cssnt-color-success);
}

.cssnt-avatar--warning {
  --_bg: var(--cssnt-color-warning-container);
  --_on: var(--cssnt-color-warning-container-on);
  --_border: var(--cssnt-color-warning);
}

.cssnt-avatar--danger {
  --_bg: var(--cssnt-color-danger-container);
  --_on: var(--cssnt-color-danger-container-on);
  --_border: var(--cssnt-color-danger);
}

.cssnt-avatar--info {
  --_bg: var(--cssnt-color-info-container);
  --_on: var(--cssnt-color-info-container-on);
  --_border: var(--cssnt-color-info);
}

/* ============================================================
 * CONTENT
 * ============================================================ */
.cssnt-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

.cssnt-avatar__text,
.cssnt-avatar__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.cssnt-avatar__icon {
  font-family: "Material Symbols Outlined";
  font-size: calc(var(--_size) * 0.5);
  line-height: 1;
}

/* ============================================================
 * INTERACTIONS
 * ============================================================ */
.cssnt-avatar--interactive {
  cursor: pointer;
}
.cssnt-avatar--interactive:hover::after {
  background: color-mix(in srgb, var(--cssnt-avatar-state-color) var(--cssnt-avatar-hover-opacity), transparent);
}
.cssnt-avatar--interactive:active::after {
  background: color-mix(in srgb, var(--cssnt-avatar-state-color) var(--cssnt-avatar-pressed-opacity), transparent);
}
.cssnt-avatar--interactive:active::before, .cssnt-avatar--interactive:focus-visible::before {
  opacity: 1;
}

/* ============================================================
 * DISABLED
 * ============================================================ */
.cssnt-avatar--disabled {
  cursor: not-allowed;
  opacity: var(--cssnt-state-disabled-content);
}
.cssnt-avatar--disabled::after, .cssnt-avatar--disabled::before {
  opacity: 0;
  background: transparent;
}

/* ============================================================
 * AVATAR STACK (M3-ish)
 * BEM:
 *  .cssnt-avatar-stack
 *    .cssnt-avatar-stack__item  (wrapper de cada Avatar)
 *    .cssnt-avatar-stack__more  (wrapper del "N+")
 *
 * Modifiers:
 *  .cssnt-avatar-stack--horizontal | --vertical
 *  .cssnt-avatar-stack--sm | --md | --lg
 *  .cssnt-avatar-stack--dense      (más overlap)
 *  .cssnt-avatar-stack--spaced     (menos overlap)
 * ============================================================ */
:root {
  /* Spacing/overlap */
  --cssnt-avatar-stack-gap: 8px; /* separación si no hay overlap */
  --cssnt-avatar-stack-overlap: 10px; /* overlap default */
  --cssnt-avatar-stack-overlap-dense: 14px;
  --cssnt-avatar-stack-overlap-spaced: 6px;
  /* Outline entre avatares (para que se lean bien apilados) */
  --cssnt-avatar-stack-outline-w: 2px;
  --cssnt-avatar-stack-outline: var(--cssnt-color-surface);
  /* More ("N+") */
  --cssnt-avatar-stack-more-bg: var(--cssnt-color-surface-variant);
  --cssnt-avatar-stack-more-on: var(--cssnt-color-surface-variant-on);
  --cssnt-avatar-stack-more-outline: var(--cssnt-color-outline-variant);
  /* State layer */
  --cssnt-avatar-stack-state-color: var(--cssnt-color-surface-on);
  --cssnt-avatar-stack-hover-opacity: 12%;
  --cssnt-avatar-stack-focus-opacity: 30%;
  --cssnt-avatar-stack-pressed-opacity: 16%;
  --cssnt-avatar-stack-ring: 3px;
}

.cssnt-avatar-stack {
  /* Internas */
  --_overlap: var(--cssnt-avatar-stack-overlap);
  --_size: var(--cssnt-avatar-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* si quisieras modo sin overlap: usa gap + quita márgenes negativos */
  gap: 0;
}

/* ============================================================
 * DIRECTION
 * ============================================================ */
.cssnt-avatar-stack--horizontal {
  flex-direction: row;
}

.cssnt-avatar-stack--vertical {
  flex-direction: column;
}

/* ============================================================
 * SIZE (alineado a tus tokens de Avatar)
 * ============================================================ */
.cssnt-avatar-stack--sm {
  --_size: var(--cssnt-avatar-size-sm);
  --_overlap: var(--cssnt-avatar-stack-overlap); /* puedes tunear por size */
}

.cssnt-avatar-stack--md {
  --_size: var(--cssnt-avatar-size-md);
}

.cssnt-avatar-stack--lg {
  --_size: var(--cssnt-avatar-size-lg);
}

/* ============================================================
 * DENSITY
 * ============================================================ */
.cssnt-avatar-stack--dense {
  --_overlap: var(--cssnt-avatar-stack-overlap-dense);
}

.cssnt-avatar-stack--spaced {
  --_overlap: var(--cssnt-avatar-stack-overlap-spaced);
}

/* ============================================================
 * ITEMS
 * ============================================================ */
.cssnt-avatar-stack__item,
.cssnt-avatar-stack__more {
  position: relative;
  flex: 0 0 auto;
  /* Para que todos midan igual aunque el Avatar interno cambie */
  width: var(--_size);
  height: var(--_size);
}

/* Overlap horizontal */
.cssnt-avatar-stack--horizontal .cssnt-avatar-stack__item,
.cssnt-avatar-stack--horizontal .cssnt-avatar-stack__more {
  margin-left: calc(var(--_overlap) * -1);
}

.cssnt-avatar-stack--horizontal .cssnt-avatar-stack__item:first-child,
.cssnt-avatar-stack--horizontal .cssnt-avatar-stack__more:first-child {
  margin-left: 0;
}

/* Overlap vertical */
.cssnt-avatar-stack--vertical .cssnt-avatar-stack__item,
.cssnt-avatar-stack--vertical .cssnt-avatar-stack__more {
  margin-top: calc(var(--_overlap) * -1);
}

.cssnt-avatar-stack--vertical .cssnt-avatar-stack__item:first-child,
.cssnt-avatar-stack--vertical .cssnt-avatar-stack__more:first-child {
  margin-top: 0;
}

/* ============================================================
 * Asegurar legibilidad: borde/outline entre avatares
 * (se aplica al avatar interno)
 * ============================================================ */
.cssnt-avatar-stack__item > .cssnt-avatar,
.cssnt-avatar-stack__more > .cssnt-avatar {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* “Separador” entre avatares apilados */
  box-shadow: 0 0 0 var(--cssnt-avatar-stack-outline-w) var(--cssnt-avatar-stack-outline);
}

/* Orden visual: el último encima (típico en stacks) */
.cssnt-avatar-stack__item {
  z-index: 1;
}

.cssnt-avatar-stack__item:nth-child(2) {
  z-index: 2;
}

.cssnt-avatar-stack__item:nth-child(3) {
  z-index: 3;
}

.cssnt-avatar-stack__item:nth-child(4) {
  z-index: 4;
}

.cssnt-avatar-stack__item:nth-child(5) {
  z-index: 5;
}

.cssnt-avatar-stack__item:nth-child(6) {
  z-index: 6;
}

.cssnt-avatar-stack__item:nth-child(7) {
  z-index: 7;
}

.cssnt-avatar-stack__item:nth-child(8) {
  z-index: 8;
}

.cssnt-avatar-stack__item:nth-child(9) {
  z-index: 9;
}

.cssnt-avatar-stack__item:nth-child(10) {
  z-index: 10;
}

/* El "more" al final, encima del resto */
.cssnt-avatar-stack__more {
  z-index: 999;
}

/* ============================================================
 * MORE ("N+") – estilo M3
 * Puedes renderizarlo con tu Avatar (typeOfContent="text") o como un span propio.
 * Aquí lo dejo como contenedor neutral.
 * ============================================================ */
.cssnt-avatar-stack__more {
  border-radius: var(--cssnt-avatar-radius);
  overflow: hidden;
  background: var(--cssnt-avatar-stack-more-bg);
  color: var(--cssnt-avatar-stack-more-on);
  border: 1px solid var(--cssnt-avatar-stack-more-outline);
  display: inline-grid;
  place-items: center;
  font-family: var(--cssnt-type-label-lg-family), sans-serif;
  font-weight: var(--cssnt-type-label-lg-weight);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Respeta squared si lo aplicas al stack */
.cssnt-avatar-stack--square .cssnt-avatar-stack__item,
.cssnt-avatar-stack--square .cssnt-avatar-stack__more {
  border-radius: var(--cssnt-avatar-radius-square);
}

.cssnt-avatar-stack--square .cssnt-avatar-stack__more {
  border-radius: var(--cssnt-avatar-radius-square);
}

/* ============================================================
 * INTERACTIONS (opcional)
 * - Si el stack completo es clickable, agrega state-layer y ring
 * ============================================================ */
.cssnt-avatar-stack--interactive {
  cursor: pointer;
  position: relative;
}
.cssnt-avatar-stack--interactive::after, .cssnt-avatar-stack--interactive::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--cssnt-radius-xl);
  pointer-events: none;
}
.cssnt-avatar-stack--interactive::after {
  background: transparent;
  transition: background var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-avatar-stack--interactive::before {
  opacity: 0;
  box-shadow: 0 0 0 var(--cssnt-avatar-stack-ring) color-mix(in srgb, var(--cssnt-avatar-stack-state-color) var(--cssnt-avatar-stack-focus-opacity), transparent);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-avatar-stack--interactive:hover::after {
  background: color-mix(in srgb, var(--cssnt-avatar-stack-state-color) var(--cssnt-avatar-stack-hover-opacity), transparent);
}
.cssnt-avatar-stack--interactive:active::after {
  background: color-mix(in srgb, var(--cssnt-avatar-stack-state-color) var(--cssnt-avatar-stack-pressed-opacity), transparent);
}
.cssnt-avatar-stack--interactive:focus-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-avatar-stack--interactive::after,
  .cssnt-avatar-stack--interactive::before {
    transition: none;
  }
}
/* ============================================================
 * A11y / Disabled (opcional)
 * ============================================================ */
.cssnt-avatar-stack--disabled {
  cursor: not-allowed;
  opacity: var(--cssnt-state-disabled-content);
}

/* App_bar.scss
   ============================================================
   APP BAR (M3-ish) — SOLO CONTAINER (delgado)
   + MOBILE proporcional hasta cierto ancho
   + MOBILE ancho => centrado (no proporcional)
   + FULLSCREEN => centrado (no proporcional)
   ============================================================ */
.cssnt-appbar {
  --_bg: var(--cssnt-color-surface-container, var(--cssnt-color-surface));
  --_on: var(--cssnt-color-surface-on);
  --_shadow: var(--cssnt-elev-2-shadow, none);
  --_divider: color-mix(in srgb, var(--cssnt-color-outline-variant) 60%, transparent);
  /* alto real del bar (SIN sumar padding extra) */
  --_h: 80px; /* default */
  --_pad-x: var(--cssnt-space-4); /* ~16 */
  --_safe-b: env(safe-area-inset-bottom, 0px);
  /* indicator tokens (los usa el button) */
  --_indicator-bg: var(--cssnt-color-secondary-container);
  --_indicator-on: var(--cssnt-color-secondary-container-on);
  /* medidas según diseño */
  --_ind-w: 64px;
  --_ind-h: 32px;
  --_ind-pad-x: 20px;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 900;
  background: var(--_bg);
  color: var(--_on);
  box-shadow: var(--_shadow);
  border-top: 1px solid var(--_divider);
  /* delgado: NO padding vertical */
  padding-inline: var(--_pad-x);
  padding-block: 0 var(--_safe-b);
}

/* List */
.cssnt-appbar__list {
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-2);
  /* el alto real lo manda el bar */
  min-block-size: var(--_h);
  /* centra el bloque en pantallas grandes sin forzar centrado de items */
  inline-size: 100%;
  max-inline-size: 720px; /* ajusta si quieres */
  margin-inline: auto;
  /* default: comportamiento mobile (espaciado) */
  justify-content: space-between;
}

/* ============================================================
   MODOS
   ============================================================ */
.cssnt-appbar--mobile {
  --_h: 66px;
  --_ind-w: 64px;
  --_ind-h: 32px;
}

.cssnt-appbar--fullscreen {
  --_h: 64px;
  --_ind-h: 40px;
  --_ind-pad-x: 20px;
}

/* ============================================================
   FULLSCREEN: items centrados (NO proporcional)
   ============================================================ */
.cssnt-appbar--fullscreen .cssnt-appbar__list {
  justify-content: center;
  gap: var(--cssnt-space-3);
}

/* ============================================================
   MOBILE ANCHO: deja de ser proporcional y se centra
   (cuando ya hay suficiente ancho)
   ============================================================ */
@media (min-width: 520px) {
  .cssnt-appbar--mobile .cssnt-appbar__list {
    justify-content: center;
    gap: var(--cssnt-space-3);
  }
}
/* ============================================================
   CODEBOX (Docs) — Minimal M3 (solo lo que usa tu contrato)
   Contract:
   - text?
   - metaLang?
   - variant?: outlined | elevated | dark
   - size?: small | medium | large
   - showCopy?
   ============================================================ */
.cssnt-codebox {
  /* shape + spacing */
  --_r: var(--cssnt-radius-md, 12px);
  --_pad: var(--cssnt-space-4, 16px);
  --_btn: 36px;
  /* type */
  --_mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --_fs: 13px;
  --_lh: 1.55;
  /* motion */
  --_dur: var(--cssnt-motion-dur-short-2, 150ms);
  --_ease: var(--cssnt-motion-ease-standard, cubic-bezier(.2,0,0,1));
  /* colors (default: outlined / light) */
  --_container: var(--cssnt-color-surface, #fff);
  --_on: var(--cssnt-color-surface-on, #1C1C1C);
  --_outline: var(--cssnt-color-outline-variant, #CBD5E1);
  --_header: color-mix(in srgb, var(--_container) 92%, var(--cssnt-color-surface-variant, #E2E8F0));
  --_codebg: color-mix(in srgb, var(--_container) 92%, var(--cssnt-color-surface-variant, #E2E8F0));
  box-sizing: border-box;
  border-radius: var(--_r);
  background: var(--_container);
  color: var(--_on);
  border: 1px solid var(--_outline);
  overflow: hidden;
  isolation: isolate;
}

/* ============================================================
   VARIANTS
   ============================================================ */
.cssnt-codebox--elevated {
  box-shadow: var(--cssnt-elev-1-shadow);
  border-color: color-mix(in srgb, var(--_outline) 70%, transparent);
}

.cssnt-codebox--dark {
  --_container: var(--cssnt-color-surface-inverse, #1E293B);
  --_on: var(--cssnt-color-surface-inverse-on, #F1F5F9);
  --_outline: color-mix(in srgb, var(--cssnt-color-outline, #64748B) 65%, transparent);
  --_header: color-mix(in srgb, var(--_container) 88%, #000);
  --_codebg: color-mix(in srgb, var(--_container) 92%, #000);
}

/* ============================================================
   SIZES (mapeo a tu contrato small/medium/large)
   ============================================================ */
.cssnt-codebox--size-small {
  --_pad: var(--cssnt-space-3, 12px);
  --_btn: 32px;
  --_fs: 12px;
}

.cssnt-codebox--size-medium {
  --_pad: var(--cssnt-space-4, 16px);
  --_btn: 36px;
  --_fs: 13px;
}

.cssnt-codebox--size-large {
  --_pad: var(--cssnt-space-5, 24px);
  --_btn: 40px;
  --_fs: 14px;
}

/* ============================================================
   HEADER
   ============================================================ */
.cssnt-codebox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-3, 12px);
  padding: var(--_pad);
  background: var(--_header);
  border-bottom: 1px solid color-mix(in srgb, var(--_outline) 85%, transparent);
}

.cssnt-codebox__titleInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: var(--_pad);
}

.cssnt-codebox__title {
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-2, 8px);
  min-inline-size: 0;
}

/* text text */
.cssnt-codebox__heading {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--cssnt-type-title-sm-family, var(--cssnt-font-plain, system-ui));
  font-size: var(--cssnt-type-title-sm-size, 14px);
  font-weight: var(--cssnt-type-title-sm-weight, 500);
  line-height: var(--cssnt-type-title-sm-line, 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cssnt-codebox__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-2, 8px);
  flex: 0 0 auto;
}

/* ============================================================
   COPY BUTTON (si showCopy=true)
   ============================================================ */
.cssnt-codebox__btn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  inline-size: var(--_btn);
  block-size: var(--_btn);
  border-radius: var(--cssnt-radius-full, 9999px);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: currentColor;
  position: relative;
  isolation: isolate;
}

.cssnt-codebox__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--_dur) var(--_ease);
  pointer-events: none;
}

.cssnt-codebox__btn:hover::before {
  opacity: var(--cssnt-state-hover-layer, 0.08);
}

.cssnt-codebox__btn:active::before {
  opacity: var(--cssnt-state-pressed-layer, 0.12);
}

.cssnt-codebox__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssnt-color-primary, #1976D2) 45%, transparent);
}

/* ============================================================
   BODY / CODE
   ============================================================ */
.cssnt-codebox__body {
  background: var(--_codebg);
}

.cssnt-codebox__pre {
  margin: 0;
  padding: var(--_pad);
  overflow: auto;
  font-family: var(--_mono);
  font-size: var(--_fs);
  line-height: var(--_lh);
  tab-size: 2;
  white-space: pre;
  word-break: normal;
  scrollbar-width: thin;
}

.cssnt-codebox__code {
  font-family: inherit;
  color: inherit;
  display: block;
  min-inline-size: max-content;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-codebox__btn::before {
    transition: none;
  }
}
.cssnt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-1);
}

.cssnt-pagination__dots {
  display: grid;
  place-items: center;
  min-inline-size: var(--cssnt-space-6);
  min-block-size: var(--cssnt-space-6);
}

.cssnt-pagination__buttonJump {
  filter: brightness(0.92); /* 1 = normal, <1 oscurece, >1 aclara */
}

.cssnt-pagination__buttonJump:hover {
  filter: brightness(0.88);
}

.cssnt-pagination__buttonJump:active {
  filter: brightness(0.84);
}

/* Search.scss (FLAT + smooth transitions, más M3-ish)
 * - Sin elevation/shadows
 * - State-layer suave (hover/pressed)
 * - Transición bar <-> view con expansión de content (max-height + fade)
 * - Scroll interno en results
 */
.cssnt-search {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--cssnt-color-surface-on);
  /* sizing / shape */
  --_h: 56px;
  --_radius: var(--cssnt-radius-xl);
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_gap: var(--cssnt-space-3); /* 12 */
  /* colors */
  --_bg: var(--cssnt-color-surface-variant);
  --_on: var(--cssnt-color-surface-on);
  --_border: transparent;
  /* state-layer (opacity number, usa tus tokens 0.08 / 0.12) */
  --_sl-o: 0;
  /* divider + content anim */
  --_divider-o: 0;
  --_content-max: 0px;
  --_content-o: 0;
  --_content-y: -4px;
}

/* ================================
   HEADER
   ================================ */
.cssnt-search__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--_gap);
  min-block-size: var(--_h);
  padding-inline: var(--_pad-x);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_on);
  border: 1px solid var(--_border);
  transition: background-color var(--cssnt-motion-dur-long-1) var(--cssnt-motion-ease-standard), border-radius var(--cssnt-motion-dur-long-1) var(--cssnt-motion-ease-standard), padding-inline var(--cssnt-motion-dur-long-1) var(--cssnt-motion-ease-standard);
}

/* State layer (flat) */
.cssnt-search__header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--cssnt-color-surface-on);
  opacity: var(--_sl-o);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* Sin focus ring (ni borde azul) */
.cssnt-search__header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 0;
}

/* Interactions */
.cssnt-search__header:hover {
  --_sl-o: var(--cssnt-state-hover-layer);
}

.cssnt-search__header:active {
  --_sl-o: var(--cssnt-state-pressed-layer);
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-search__header,
  .cssnt-search__header::before {
    transition: none;
  }
}
/* ================================
   SLOTS
   ================================ */
.cssnt-search__leading,
.cssnt-search__trailing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-2);
  min-inline-size: 48px;
  min-block-size: 48px;
}

/* ================================
   FIELD + INPUT
   ================================ */
.cssnt-search__field {
  min-inline-size: 0;
  display: flex;
  align-items: center;
}

.cssnt-search__input {
  inline-size: 100%;
  min-inline-size: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  font-weight: var(--cssnt-type-body-lg-weight);
  color: currentColor;
  caret-color: var(--cssnt-color-primary);
}

.cssnt-search__input:focus {
  outline: 0;
  box-shadow: none;
}

.cssnt-search__input::placeholder {
  color: var(--cssnt-color-surface-variant-on);
  opacity: 1;
}

/* type="search" extras */
.cssnt-search__input[type=search]::-webkit-search-decoration,
.cssnt-search__input[type=search]::-webkit-search-cancel-button,
.cssnt-search__input[type=search]::-webkit-search-results-button,
.cssnt-search__input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Firefox */
.cssnt-search__input::-moz-focus-inner {
  border: 0;
}

/* ================================
   DIVIDER (fade-in)
   ================================ */
.cssnt-search__divider {
  block-size: 1px;
  background: var(--cssnt-color-outline-variant);
  opacity: var(--_divider-o);
  transition: opacity var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* ================================
   CONTENT + RESULTS (transición suave + scroll interno)
   ================================ */
/* Siempre presente para poder animar (en vez de display:none) */
.cssnt-search__content {
  min-block-size: 0;
  overflow: hidden;
  max-block-size: var(--_content-max);
  max-height: var(--_content-max); /* fallback */
  opacity: var(--_content-o);
  transform: translateY(var(--_content-y));
  transition: max-height var(--cssnt-motion-dur-long-2) var(--cssnt-motion-ease-standard), opacity var(--cssnt-motion-dur-med-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-long-2) var(--cssnt-motion-ease-standard);
  /* evita clicks cuando está cerrado */
  pointer-events: none;
}

/* results con scroll interno */
.cssnt-search__results {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  grid-template-columns: 1fr;
  overflow: auto;
  max-block-size: 100%;
  max-height: 100%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cssnt-search__row {
  min-inline-size: 0;
}

/* ================================
   VIEW (open) — appbar flat + content expand
   ================================ */
.cssnt-search.is-view {
  /* appbar */
  --_radius: var(--cssnt-radius-none);
  --_pad-x: var(--cssnt-space-3); /* 12 */
  --_bg: var(--cssnt-color-surface);
  --_border: transparent;
  /* divider + content */
  --_divider-o: 1;
  --_content-max: 60vh; /* ajusta si quieres */
  --_content-o: 1;
  --_content-y: 0px;
}

.cssnt-search.is-view .cssnt-search__content {
  pointer-events: auto;
}

/* ================================
   Docked (FLAT): panel con hairline, sin sombra
   ================================ */
.cssnt-search--docked.is-view {
  border: 1px solid var(--cssnt-color-outline-variant);
  border-radius: var(--cssnt-radius-xl);
  overflow: hidden;
  background: var(--cssnt-color-surface);
  /* header “pega” al panel */
  --_radius: var(--cssnt-radius-none);
}

/* Full: ocupa todo el contenedor padre */
.cssnt-search--full {
  inline-size: 100%;
  block-size: 100%;
}

/* Full + view: content toma el alto disponible (header + divider) */
.cssnt-search--full.is-view {
  --_content-max: calc(100% - var(--_h) - 1px);
}

/* Toolbar.scss (M3-ish)
 * - docked / floating
 * - floating: horizontal / vertical
 * - modo “solo main”: oculta wrappers .cssnt-toolbar__item excepto .cssnt-toolbar__item--main
 * - slot extra:
 *   - floating: .cssnt-toolbar__aux (derecha / abajo via shell)
 *   - docked: .cssnt-toolbar__fab (fixed arriba del docked)
 *
 * Importante: Toolbar.tsx debe envolver cada child en:
 * <div class="cssnt-toolbar__item ...">...</div>
 * y marcar el main con: .cssnt-toolbar__item--main
 */
.cssnt-toolbar {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  /* ===== defaults ===== */
  --_h: 56px;
  --_pad-x: var(--cssnt-space-1); /* 4 */
  --_pad-y: var(--cssnt-space-1); /* 4 */
  --_gap: var(--cssnt-space-1); /* 4 */
  --_radius: calc(var(--_h) / 2);
  --_container: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_shadow: var(--cssnt-elev-2-shadow);
  --_z: 50;
  /* posición configurable */
  --_inset: var(--cssnt-toolbar-inset, var(--cssnt-space-4)); /* 16 */
  --_tx: 0px;
  --_ty: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-items: center;
  gap: var(--_gap);
  inline-size: max-content;
  min-inline-size: 0;
  block-size: var(--_h);
  padding: var(--_pad-y) var(--_pad-x);
  background-color: var(--_container);
  border-radius: var(--_radius);
  box-shadow: var(--_shadow);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), border-radius var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), padding var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), gap var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-toolbar {
    transition: none;
  }
}
/* ============================================================
 * COLOR SCHEMES
 * ============================================================ */
.cssnt-toolbar--vibrant {
  --_container: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
}

/* ============================================================
 * FLOATING (horizontal)
 * ============================================================ */
.cssnt-toolbar--floating {
  position: fixed;
  z-index: var(--_z);
  inset-block-end: var(--_inset);
  inset-inline-start: 50%;
  padding: 5px 10px;
  --_tx: -50%;
  --_ty: 0px;
  transform: translate3d(var(--_tx), var(--_ty), 0);
}

/* ============================================================
 * FLOATING (vertical)
 * ============================================================ */
.cssnt-toolbar--floating.cssnt-toolbar--vertical {
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  inline-size: auto;
  block-size: auto;
  /* tus ajustes */
  padding: 10px 6px;
  /* nudge a la izquierda (más “inset” = más a la izquierda) */
  --_nudge-x: var(--cssnt-toolbar-vertical-nudge, var(--cssnt-space-2)); /* 8 */
  inset-inline-start: auto;
  inset-inline-end: calc(var(--_inset) + var(--_nudge-x));
  inset-block-end: auto;
  inset-block-start: 50%;
  --_tx: 0px;
  --_ty: -50%;
  transform: translate3d(var(--_tx), var(--_ty), 0);
}

/* ============================================================
 * ITEMS (wrappers) + colapso suave (solo floating)
 * ============================================================ */
.cssnt-toolbar__item {
  /* wrapper neutro */
  display: grid;
  place-items: center;
}

.cssnt-toolbar--floating > .cssnt-toolbar__item {
  min-inline-size: 0;
  min-block-size: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  max-inline-size: var(--cssnt-toolbar-item-max, 96px);
  max-block-size: var(--cssnt-toolbar-item-max, 96px);
  transition: opacity var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), max-inline-size var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), max-block-size var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* estado colapsado (solo floating) */
.cssnt-toolbar--floating.cssnt-toolbar--only-main {
  gap: 0;
  padding: 10px;
  overflow: visible;
  border-radius: var(--cssnt-radius-full);
}

.cssnt-toolbar--floating.cssnt-toolbar--only-main > .cssnt-toolbar__item:not(.cssnt-toolbar__item--main) {
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.92);
  pointer-events: none;
  max-inline-size: 0px;
  max-block-size: 0px;
}

/* ============================================================
 * SHELL (para colocar aux al lado/abajo sin hacks)
 * ============================================================ */
.cssnt-toolbar-shell {
  position: fixed;
  z-index: 60;
  --_inset: var(--cssnt-toolbar-inset, var(--cssnt-space-4));
  --_gap: var(--cssnt-toolbar-shell-gap, var(--cssnt-space-3)); /* 12 */
  display: flex;
  gap: var(--_gap);
  align-items: center;
}

/* floating horizontal shell (centro-abajo) */
.cssnt-toolbar-shell--floating-h {
  inset-block-end: var(--_inset);
  inset-inline-start: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* floating vertical shell (derecha-centro) */
.cssnt-toolbar-shell--floating-v {
  inset-inline-end: var(--_inset);
  inset-block-start: 50%;
  transform: translate3d(0, -50%, 0);
  flex-direction: column; /* aux abajo */
}

/* dentro del shell, el toolbar NO debe ser fixed */
.cssnt-toolbar-shell > .cssnt-toolbar--floating {
  position: static;
  inset: auto;
  transform: none;
}

/* slot del botón extra (solo layout) */
.cssnt-toolbar__aux {
  display: grid;
  place-items: center;
}

/* ============================================================
 * DOCKED (full width, bottom)
 * ============================================================ */
.cssnt-toolbar--docked {
  position: fixed;
  z-index: var(--_z);
  inset-inline: 0;
  inset-block-end: 0;
  --_h: 30px;
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_pad-y: var(--cssnt-space-3); /* 12 */
  --_gap: 0px;
  --_radius: 0px;
  --_shadow: var(--cssnt-elev-0-shadow);
  inline-size: 100%;
  block-size: auto;
  min-block-size: var(--_h);
  grid-auto-columns: 1fr;
  justify-items: center;
  padding-inline: var(--_pad-x);
  padding-block-start: var(--_pad-y);
  padding-block-end: calc(var(--_pad-y) + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  overflow: visible;
  border: none;
  border-block-start: 1px solid var(--cssnt-color-outline-variant);
  transform: none;
}

/* FAB flotante para docked (solo posicionamiento) */
.cssnt-toolbar__fab {
  position: fixed;
  z-index: 70;
  --_inset: var(--cssnt-toolbar-inset, var(--cssnt-space-4));
  --_dock-h: var(--cssnt-toolbar-docked-h, 80px);
  inset-inline-end: var(--_inset);
  inset-block-end: calc(var(--_inset) + var(--_dock-h) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
}

.cssnt-appbar {
  /* ===== base ===== */
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  background: var(--_container);
  inline-size: 100%;
  position: relative;
  inset: auto;
  z-index: auto;
  /* safe-area (solo se activa en .is-fixed-top) */
  --_safe-top: 0px;
  /* layout */
  display: grid;
  grid-template-rows: var(--_top-h) auto;
  min-block-size: var(--_min-h);
  /* shape / divider / elevation */
  border-radius: var(--_radius);
  box-shadow: var(--_elev);
  border-bottom: 1px solid var(--_divider);
  /* motion */
  --_collapse-dur: var(--cssnt-motion-dur-long-2); /* 400ms */
  --_collapse-ease: var(--cssnt-motion-ease-spring);
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), min-block-size var(--_collapse-dur) var(--_collapse-ease);
  /* tokens internos (defaults) */
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_gap: var(--cssnt-space-2); /* 8 */
  --_touch: 48px;
  --_radius: var(--cssnt-radius-none);
  --_container: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_divider: transparent;
  --_elev: var(--cssnt-elev-0-shadow);
  --_top-h: 64px;
  --_min-h: var(--_top-h);
  /* tipografía por defecto */
  --_title-family: var(--cssnt-type-title-lg-family);
  --_title-size: var(--cssnt-type-title-lg-size);
  --_title-line: var(--cssnt-type-title-lg-line);
  --_title-weight: var(--cssnt-type-title-lg-weight);
  --_subtitle-family: var(--cssnt-type-label-md-family);
  --_subtitle-size: var(--cssnt-type-label-md-size);
  --_subtitle-line: var(--cssnt-type-label-md-line);
  --_subtitle-weight: var(--cssnt-type-label-md-weight);
  /* bottom paddings (md/lg) */
  --_bottom-pad-b: var(--cssnt-space-5); /* 24 */
  --_bottom-gap: 4px;
}
.cssnt-appbar,
.cssnt-appbar * {
  box-sizing: border-box;
}

/* ===== opcional: fixed top ===== */
.cssnt-appbar.is-fixed-top {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  --_safe-top: env(safe-area-inset-top, 0px);
  grid-template-rows: calc(var(--_top-h) + var(--_safe-top)) auto;
  min-block-size: calc(var(--_min-h) + var(--_safe-top));
}

.cssnt-appbar.is-fixed-top .cssnt-appbar__top {
  min-block-size: calc(var(--_top-h) + var(--_safe-top));
  padding-block-start: var(--_safe-top);
}

/* ===== themes ===== */
.cssnt-appbar--surface {
  --_container: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
}

.cssnt-appbar--inverse {
  --_container: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
}

.cssnt-appbar--transparent {
  --_container: transparent;
}

/* ===== inverse: asegura texto+icons blancos =====
 * - Idealmente Icon respeta currentColor. Si tu Icon usa color propio, esto lo sobreescribe.
 */
.cssnt-appbar--inverse,
.cssnt-appbar--inverse * {
  color: var(--_on);
}

.cssnt-appbar--inverse button,
.cssnt-appbar--inverse [role=button] {
  color: var(--_on);
}

/* Si tu Icon usa una clase interna conocida, puedes reforzar aquí (opcional)
.cssnt-appbar--inverse .cssnt-icon { color: var(--_on); }
*/
/* ===== states ===== */
.cssnt-appbar.is-elevated {
  --_elev: var(--cssnt-elev-2-shadow);
}

.cssnt-appbar.is-outlined {
  --_divider: var(--cssnt-color-outline-variant);
}

.cssnt-appbar.is-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ===== top row ===== */
.cssnt-appbar__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--_gap);
  padding-inline: var(--_pad-x);
  min-block-size: var(--_top-h);
  padding-block-start: 0;
}

.cssnt-appbar__leading,
.cssnt-appbar__actions {
  display: flex;
  align-items: center;
  min-block-size: var(--_touch);
}

.cssnt-appbar__leading {
  justify-content: flex-start;
  min-inline-size: var(--_touch);
}

.cssnt-appbar__actions {
  justify-content: flex-end;
  gap: var(--_gap);
  min-inline-size: var(--_touch);
}

/* text stack (top) */
.cssnt-appbar__topTitle {
  min-inline-size: 0;
  display: grid;
  align-content: center;
  row-gap: 2px;
}

/* ===== bottom area (md/lg flexible) ===== */
.cssnt-appbar__bottom {
  padding-inline: var(--_pad-x);
  padding-block: 0 var(--_bottom-pad-b);
  display: grid;
  align-content: end;
  /* para collapse */
  overflow: clip;
  will-change: max-height, opacity, transform, padding;
}

.cssnt-appbar__bottomTitle {
  min-inline-size: 0;
  display: grid;
  row-gap: var(--_bottom-gap);
  align-items: end;
}

/* ===== typography helpers ===== */
.cssnt-appbar__title,
.cssnt-appbar__subtitle {
  margin: 0;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cssnt-appbar__title {
  font-family: var(--_title-family);
  font-size: var(--_title-size);
  line-height: var(--_title-line);
  font-weight: var(--_title-weight);
  letter-spacing: 0;
}

.cssnt-appbar__subtitle {
  font-family: var(--_subtitle-family);
  font-size: var(--_subtitle-size);
  line-height: var(--_subtitle-line);
  font-weight: var(--_subtitle-weight);
  letter-spacing: 0;
  opacity: 0.9;
}

/* ===== sizes ===== */
.cssnt-appbar--size-sm {
  --_top-h: 64px;
  --_min-h: var(--_top-h);
  --_title-family: var(--cssnt-type-title-lg-family);
  --_title-size: var(--cssnt-type-title-lg-size);
  --_title-line: var(--cssnt-type-title-lg-line);
  --_title-weight: var(--cssnt-type-title-lg-weight);
  --_subtitle-family: var(--cssnt-type-label-md-family);
  --_subtitle-size: var(--cssnt-type-label-md-size);
  --_subtitle-line: var(--cssnt-type-label-md-line);
  --_subtitle-weight: var(--cssnt-type-label-md-weight);
}

.cssnt-appbar--size-sm.has-subtitle {
  --_top-h: 80px;
  --_min-h: var(--_top-h);
}

.cssnt-appbar--size-md {
  --_top-h: 64px;
  --_min-h: 112px;
  --_min-h-sub: 128px;
  --_title-family: var(--cssnt-type-headline-md-family);
  --_title-size: var(--cssnt-type-headline-md-size);
  --_title-line: var(--cssnt-type-headline-md-line);
  --_title-weight: var(--cssnt-type-headline-md-weight);
  --_subtitle-family: var(--cssnt-type-label-lg-family);
  --_subtitle-size: var(--cssnt-type-label-lg-size);
  --_subtitle-line: var(--cssnt-type-label-lg-line);
  --_subtitle-weight: var(--cssnt-type-label-lg-weight);
  --_bottom-pad-b: var(--cssnt-space-5);
}

.cssnt-appbar--size-md.has-subtitle {
  --_min-h: var(--_min-h-sub);
}

.cssnt-appbar--size-lg {
  --_top-h: 64px;
  --_min-h: 152px;
  --_min-h-sub: 168px;
  --_title-family: var(--cssnt-type-display-sm-family);
  --_title-size: var(--cssnt-type-display-sm-size);
  --_title-line: var(--cssnt-type-display-sm-line);
  --_title-weight: var(--cssnt-type-display-sm-weight);
  --_subtitle-family: var(--cssnt-type-title-md-family);
  --_subtitle-size: var(--cssnt-type-title-md-size);
  --_subtitle-line: var(--cssnt-type-title-md-line);
  --_subtitle-weight: var(--cssnt-type-title-md-weight);
  --_bottom-pad-b: var(--cssnt-space-6);
}

.cssnt-appbar--size-lg.has-subtitle {
  --_min-h: var(--_min-h-sub);
}

/* ===== show/hide text regions por size ===== */
.cssnt-appbar--size-sm .cssnt-appbar__bottom {
  display: none;
}
.cssnt-appbar--size-sm .cssnt-appbar__topTitle {
  display: grid;
}

.cssnt-appbar--size-md .cssnt-appbar__topTitle,
.cssnt-appbar--size-lg .cssnt-appbar__topTitle {
  display: none;
}
.cssnt-appbar--size-md .cssnt-appbar__bottom,
.cssnt-appbar--size-lg .cssnt-appbar__bottom {
  display: grid;
}

/* subtitle visible solo si hay class */
.cssnt-appbar:not(.has-subtitle) .cssnt-appbar__subtitle {
  display: none;
}

/* ===== alignment ===== */
.cssnt-appbar--align-start .cssnt-appbar__topTitle,
.cssnt-appbar--align-start .cssnt-appbar__bottomTitle {
  justify-items: start;
  text-align: start;
}

.cssnt-appbar--align-center .cssnt-appbar__topTitle {
  justify-items: center;
  text-align: center;
}
.cssnt-appbar--align-center .cssnt-appbar__bottomTitle {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
  --_center-inset: calc(var(--_pad-x) + (var(--_touch) * 2) + (var(--_gap) * 2));
  max-inline-size: max(0px, 100% - var(--_center-inset) * 2);
}

/* ===== collapse (más suave) =====
 * Usamos: max-height + opacity + transform + padding-bottom con dur más larga y easing spring-ish.
 * Nota: max-height no es “perfecto” pero se siente MUCHO más suave con transform+opacity.
 */
.cssnt-appbar__bottom {
  max-height: 420px; /* suficiente para md/lg */
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: max-height var(--_collapse-dur) var(--_collapse-ease), opacity var(--_collapse-dur) var(--_collapse-ease), transform var(--_collapse-dur) var(--_collapse-ease), padding-bottom var(--_collapse-dur) var(--_collapse-ease);
}

.cssnt-appbar.is-collapsed {
  --_min-h: var(--_top-h);
}
.cssnt-appbar.is-collapsed .cssnt-appbar__bottom {
  max-height: 0px;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  padding-bottom: 0px;
  pointer-events: none; /* evita focus/click en contenido colapsado */
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .cssnt-appbar,
  .cssnt-appbar__bottom {
    transition: none;
  }
}
/* Menu.scss (CORREGIDO / COMBINADO)
 * - .cssnt-menu--bar  => barra floating/docked (wrappers .cssnt-menu__item)
 * - .cssnt-menu--list => popover/menu-items (items reales como botón .cssnt-menu__item)
 * - Soporta: data-state="open|closed" + data-side="top|bottom|left|right"
 */
/* =========================
   BASE (shared)
   ========================= */
.cssnt-menu {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  -webkit-tap-highlight-color: transparent;
  /* colors */
  --_container: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_outline: var(--cssnt-color-outline-variant);
  /* elevation + z */
  --_elev: var(--cssnt-elev-2-shadow);
  --_z: 50;
  /* motion */
  --_t: var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* anchor para popover */
.cssnt-menu__anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* variants */
.cssnt-menu--vibrant {
  --_container: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
}

.cssnt-menu--inverse {
  --_container: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_outline: color-mix(in oklab, var(--_on) 18%, transparent);
}

/* semantic variants */
.cssnt-menu--primary {
  --_container: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
}

.cssnt-menu--secondary {
  --_container: var(--cssnt-color-secondary-container);
  --_on: var(--cssnt-color-secondary-container-on);
}

.cssnt-menu--tertiary {
  --_container: var(--cssnt-color-tertiary-container);
  --_on: var(--cssnt-color-tertiary-container-on);
}

.cssnt-menu--info {
  --_container: var(--cssnt-color-info-container);
  --_on: var(--cssnt-color-info-container-on);
}

.cssnt-menu--success {
  --_container: var(--cssnt-color-success-container);
  --_on: var(--cssnt-color-success-container-on);
}

.cssnt-menu--warning {
  --_container: var(--cssnt-color-warning-container);
  --_on: var(--cssnt-color-warning-container-on);
}

.cssnt-menu--danger {
  --_container: var(--cssnt-color-danger-container);
  --_on: var(--cssnt-color-danger-container-on);
}

/* outlined (aplica a bar y list) */
.cssnt-menu--outline {
  box-shadow: var(--cssnt-elev-0-shadow);
  border: 1px solid var(--cssnt-color-outline);
}

/* helpers */
.cssnt-menu__muted {
  color: color-mix(in oklab, var(--_on) 70%, transparent);
}

.cssnt-menu__nowrap {
  white-space: nowrap;
}

/* =========================
   MODE: BAR
   ========================= */
.cssnt-menu--bar {
  --_h: 56px;
  --_pad-x: var(--cssnt-space-1); /* 4 */
  --_pad-y: var(--cssnt-space-2); /* 8 */
  --_gap: var(--cssnt-space-1); /* 4 */
  --_radius: calc(var(--_h) / 2);
  --_shadow: var(--_elev);
  --_inset: var(--cssnt-menu-inset, var(--cssnt-space-4)); /* 16 */
  --_tx: 0px;
  --_ty: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-items: center;
  gap: var(--_gap);
  inline-size: max-content;
  min-inline-size: 0;
  block-size: var(--_h);
  padding: var(--_pad-y) var(--_pad-x);
  background-color: var(--_container);
  border-radius: var(--_radius);
  box-shadow: var(--_shadow);
  overflow: hidden;
  transition: background-color var(--_t), box-shadow var(--_t), border-radius var(--_t), padding var(--_t), gap var(--_t), transform var(--_t);
}

/* FLOATING (horizontal) */
.cssnt-menu--bar.cssnt-menu--floating {
  position: fixed;
  z-index: var(--_z);
  inset-block-end: var(--_inset);
  inset-inline-start: 50%;
  padding: 5px 10px;
  --_tx: -50%;
  --_ty: 0px;
  transform: translate3d(var(--_tx), var(--_ty), 0);
}

/* FLOATING (vertical) */
.cssnt-menu--bar.cssnt-menu--floating.cssnt-menu--vertical {
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  inline-size: auto;
  block-size: auto;
  padding: 10px 6px;
  --_nudge-x: var(--cssnt-menu-vertical-nudge, var(--cssnt-space-2)); /* 8 */
  inset-inline-start: auto;
  inset-inline-end: calc(var(--_inset) + var(--_nudge-x));
  inset-block-end: auto;
  inset-block-start: 50%;
  --_tx: 0px;
  --_ty: -50%;
  transform: translate3d(var(--_tx), var(--_ty), 0);
}

/* wrappers en BAR */
.cssnt-menu--bar > .cssnt-menu__item {
  display: grid;
  place-items: center;
}

.cssnt-menu--bar.cssnt-menu--floating > .cssnt-menu__item {
  min-inline-size: 0;
  min-block-size: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  max-inline-size: var(--cssnt-menu-item-max, 96px);
  max-block-size: var(--cssnt-menu-item-max, 96px);
  transition: opacity var(--_t), transform var(--_t), max-inline-size var(--_t), max-block-size var(--_t);
}

/* colapsado (solo floating) */
.cssnt-menu--bar.cssnt-menu--floating.cssnt-menu--only-main {
  gap: 0;
  padding: 10px;
  overflow: visible;
  border-radius: var(--cssnt-radius-full);
}

.cssnt-menu--bar.cssnt-menu--floating.cssnt-menu--only-main > .cssnt-menu__item:not(.cssnt-menu__item--main) {
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.92);
  pointer-events: none;
  max-inline-size: 0px;
  max-block-size: 0px;
}

/* SHELL */
.cssnt-menu-shell {
  position: fixed;
  z-index: 60;
  --_inset: var(--cssnt-menu-inset, var(--cssnt-space-4));
  --_gap: var(--cssnt-menu-shell-gap, var(--cssnt-space-3)); /* 12 */
  display: flex;
  gap: var(--_gap);
  align-items: center;
}

.cssnt-menu-shell--floating-h {
  inset-block-end: var(--_inset);
  inset-inline-start: 50%;
  transform: translate3d(-50%, 0, 0);
}

.cssnt-menu-shell--floating-v {
  inset-inline-end: var(--_inset);
  inset-block-start: 50%;
  transform: translate3d(0, -50%, 0);
  flex-direction: column;
}

.cssnt-menu-shell > .cssnt-menu--bar.cssnt-menu--floating {
  position: static;
  inset: auto;
  transform: none;
}

.cssnt-menu__aux {
  display: grid;
  place-items: center;
}

/* DOCKED */
.cssnt-menu--bar.cssnt-menu--docked {
  position: fixed;
  z-index: var(--_z);
  inset-inline: 0;
  inset-block-end: 0;
  --_h: 30px;
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_pad-y: var(--cssnt-space-3); /* 12 */
  --_gap: 0px;
  --_radius: 0px;
  --_shadow: var(--cssnt-elev-0-shadow);
  inline-size: 100%;
  block-size: auto;
  min-block-size: var(--_h);
  grid-auto-columns: 1fr;
  justify-items: center;
  padding-inline: var(--_pad-x);
  padding-block-start: var(--_pad-y);
  padding-block-end: calc(var(--_pad-y) + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  overflow: visible;
  border: none;
  border-block-start: 1px solid var(--cssnt-color-outline-variant);
  transform: none;
}

/* FAB docked */
.cssnt-menu__fab {
  position: fixed;
  z-index: 70;
  --_inset: var(--cssnt-menu-inset, var(--cssnt-space-4));
  --_dock-h: var(--cssnt-menu-docked-h, 80px);
  inset-inline-end: var(--_inset);
  inset-block-end: calc(var(--_inset) + var(--_dock-h) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
}

/* =========================
   MODE: LIST (POPOVER)
   ========================= */
.cssnt-menu--list {
  position: absolute;
  z-index: var(--_z);
  --_offset: var(--cssnt-menu-offset, 8px);
  --_tx: 0px;
  --_ty: 0px;
  --_dx: 0px;
  --_dy: 0px;
  --_scale: 1;
  --_o: 1;
  --_radius: var(--cssnt-radius-md);
  --_shadow: var(--_elev);
  --_pad-y: var(--cssnt-space-2); /* 8 */
  --_pad-x: var(--cssnt-space-2); /* 8 */
  --_item-h: 48px;
  --_item-radius: var(--cssnt-radius-sm);
  --_item-pad-x: var(--cssnt-space-3);
  --_item-gap: var(--cssnt-space-3);
  --_slot: 40px;
  --_icon: 20px;
  --_sl-color: var(--_on);
  --_ring-w: 2px;
  --_ring-color: var(--cssnt-color-outline);
  --_disabled-o: var(--cssnt-state-disabled-content);
  inline-size: max-content;
  min-inline-size: 200px;
  max-inline-size: var(--cssnt-menu-max-w, 360px);
  max-block-size: var(--cssnt-menu-max-h, 360px);
  display: grid;
  gap: 0;
  border-radius: var(--_radius);
  background: var(--_container);
  box-shadow: var(--_shadow);
  border: 1px solid color-mix(in oklab, var(--_outline) 55%, transparent);
  padding: var(--_pad-y) var(--_pad-x);
  overflow: auto;
  opacity: var(--_o);
  transform: translate3d(calc(var(--_tx) + var(--_dx)), calc(var(--_ty) + var(--_dy)), 0) scale(var(--_scale));
  transform-origin: var(--_origin, 50% 50%);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), background-color var(--_t), box-shadow var(--_t), border-color var(--_t);
}

/* ===== HOVER BRIDGE (tolerancia para hover) ===== */
.cssnt-menu--list {
  --_hover-bridge: calc(var(--_offset) + var(--cssnt-menu-hover-buffer, 12px));
}

.cssnt-menu--list::before {
  content: "";
  position: absolute;
  pointer-events: auto;
  background: transparent;
}

/* puente según side */
.cssnt-menu--list[data-side=top]::before {
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--_hover-bridge);
}

.cssnt-menu--list[data-side=bottom]::before {
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--_hover-bridge);
}

.cssnt-menu--list[data-side=left]::before {
  inset-block: 0;
  inset-inline-start: 100%;
  inline-size: var(--_hover-bridge);
}

.cssnt-menu--list[data-side=right]::before {
  inset-block: 0;
  inset-inline-end: 100%;
  inline-size: var(--_hover-bridge);
}

/* positioning by side */
.cssnt-menu--list[data-side=top] {
  inset-inline-start: 50%;
  inset-block-end: calc(100% + var(--_offset));
  --_tx: -50%;
  --_ty: 0px;
  --_origin: 50% 100%;
  --_closed-dx: 0px;
  --_closed-dy: 6px;
}

.cssnt-menu--list[data-side=bottom] {
  inset-inline-start: 50%;
  inset-block-start: calc(100% + var(--_offset));
  --_tx: -50%;
  --_ty: 0px;
  --_origin: 50% 0%;
  --_closed-dx: 0px;
  --_closed-dy: -6px;
}

.cssnt-menu--list[data-side=left] {
  inset-inline-end: calc(100% + var(--_offset));
  inset-block-start: 50%;
  --_tx: 0px;
  --_ty: -50%;
  --_origin: 100% 50%;
  --_closed-dx: 6px;
  --_closed-dy: 0px;
}

.cssnt-menu--list[data-side=right] {
  inset-inline-start: calc(100% + var(--_offset));
  inset-block-start: 50%;
  --_tx: 0px;
  --_ty: -50%;
  --_origin: 0% 50%;
  --_closed-dx: -6px;
  --_closed-dy: 0px;
}

/* open/closed */
.cssnt-menu--list[data-state=open] {
  --_o: 1;
  --_scale: 1;
  --_dx: 0px;
  --_dy: 0px;
  pointer-events: auto;
}

.cssnt-menu--list[data-state=closed] {
  --_o: 0;
  --_scale: 0.98;
  --_dx: var(--_closed-dx, 0px);
  --_dy: var(--_closed-dy, -6px);
  pointer-events: none;
}

/* Density (0 a -3) */
.cssnt-menu--list.cssnt-menu--d0 {
  --_pad-y: var(--cssnt-space-2);
}

.cssnt-menu--list.cssnt-menu--d-1 {
  --_pad-y: 6px;
}

.cssnt-menu--list.cssnt-menu--d-2 {
  --_pad-y: 4px;
}

.cssnt-menu--list.cssnt-menu--d-3 {
  --_pad-y: 2px;
}

/* item helpers */
.cssnt-menu--list .cssnt-menu__item--sm {
  --_item-h: 40px;
}

.cssnt-menu--list .cssnt-menu__item--lg {
  --_item-h: 56px;
}

.cssnt-menu--list .cssnt-menu__item--danger {
  color: var(--cssnt-color-danger-container-on);
}

.cssnt-menu--list .cssnt-menu__item--danger.is-selected::before {
  background: var(--cssnt-color-danger-container);
}

/* type: plain / rich */
.cssnt-menu--plain {
  min-inline-size: 0;
  max-inline-size: var(--cssnt-menu-plain-max-w, 320px);
  padding: var(--cssnt-space-2) var(--cssnt-space-3);
}

.cssnt-menu--rich {
  min-inline-size: 260px;
  max-inline-size: var(--cssnt-menu-rich-max-w, 380px);
  padding: 0;
  overflow: hidden;
}

/* content blocks (Menu component) */
.cssnt-menu__header {
  padding: var(--cssnt-space-3) var(--cssnt-space-4);
  border-block-end: 1px solid color-mix(in oklab, var(--_outline) 75%, transparent);
}

.cssnt-menu__title {
  display: block;
  font-size: var(--cssnt-type-title-sm-size);
  line-height: var(--cssnt-type-title-sm-line);
  font-weight: var(--cssnt-type-title-sm-weight);
  color: var(--_on);
}

.cssnt-menu__content {
  display: grid;
  gap: var(--cssnt-space-1);
  padding: var(--cssnt-space-3) var(--cssnt-space-4);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  font-weight: var(--cssnt-type-body-sm-weight);
  color: var(--_on);
}

.cssnt-menu--plain .cssnt-menu__content {
  padding: 0;
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
}

.cssnt-menu__footer {
  padding: var(--cssnt-space-2) var(--cssnt-space-2);
  border-block-start: 1px solid color-mix(in oklab, var(--_outline) 75%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
  flex-wrap: wrap;
}

/* =========================
   MENU-ITEMS (dentro de list)
   ========================= */
.cssnt-menu--list .cssnt-menu__panel {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0;
}

.cssnt-menu--list .cssnt-menu__divider {
  block-size: 1px;
  margin: var(--cssnt-space-2) 0;
  background: color-mix(in oklab, var(--_outline) 80%, transparent);
  border-radius: 999px;
}

.cssnt-menu--list .cssnt-menu__label {
  box-sizing: border-box;
  padding: var(--cssnt-space-2) var(--_item-pad-x);
  color: color-mix(in oklab, var(--_on) 72%, transparent);
  font-size: var(--cssnt-type-label-md-size);
  line-height: var(--cssnt-type-label-md-line);
  font-weight: var(--cssnt-type-label-md-weight);
}

/* reset para item clickable */
.cssnt-menu--list .cssnt-menu__item--default {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* item */
.cssnt-menu--list .cssnt-menu__item {
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--_item-h);
  display: grid;
  grid-template-columns: var(--_slot) 1fr var(--_slot);
  align-items: center;
  column-gap: var(--_item-gap);
  padding-inline: var(--_item-pad-x);
  border-radius: var(--_item-radius);
  color: var(--_on);
  cursor: pointer;
  user-select: none;
  --_sl-o: 0;
  --_ring-o: 0;
}

.cssnt-menu--list .cssnt-menu__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_sl-color);
  opacity: var(--_sl-o);
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

.cssnt-menu--list .cssnt-menu__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--_ring-w) var(--_ring-color) inset;
  opacity: var(--_ring-o);
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

.cssnt-menu--list .cssnt-menu__leading,
.cssnt-menu--list .cssnt-menu__trailing {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

.cssnt-menu--list .cssnt-menu__leading {
  justify-content: flex-start;
}

.cssnt-menu--list .cssnt-menu__trailing {
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
}

.cssnt-menu--list .cssnt-menu__body {
  min-inline-size: 0;
  display: grid;
  grid-auto-rows: min-content;
  gap: 2px;
}

.cssnt-menu--list .cssnt-menu__text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: 500;
}

.cssnt-menu--list .cssnt-menu__supporting {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  font-weight: var(--cssnt-type-body-sm-weight);
  color: color-mix(in oklab, var(--_on) 70%, transparent);
}

.cssnt-menu--list .cssnt-menu__trailtext {
  font-size: var(--cssnt-type-label-md-size);
  line-height: var(--cssnt-type-label-md-line);
  font-weight: var(--cssnt-type-label-md-weight);
  color: color-mix(in oklab, var(--_on) 72%, transparent);
}

.cssnt-menu--list .cssnt-menu__badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--cssnt-type-label-sm-size);
  line-height: var(--cssnt-type-label-sm-line);
  font-weight: var(--cssnt-type-label-sm-weight);
  color: var(--cssnt-color-primary-container-on);
  background: var(--cssnt-color-primary-container);
}

.cssnt-menu--list .cssnt-menu__icon {
  inline-size: var(--_icon);
  block-size: var(--_icon);
  display: inline-grid;
  place-items: center;
}

/* states item */
.cssnt-menu--list .cssnt-menu__item:hover:not([disabled]):not([aria-disabled=true]) {
  --_sl-o: var(--cssnt-state-hover-layer);
}

.cssnt-menu--list .cssnt-menu__item:focus-visible:not([disabled]):not([aria-disabled=true]) {
  --_sl-o: var(--cssnt-state-focus-layer);
  --_ring-o: 1;
}

.cssnt-menu--list .cssnt-menu__item:active:not([disabled]):not([aria-disabled=true]),
.cssnt-menu--list .cssnt-menu__item.is-pressed:not([disabled]):not([aria-disabled=true]) {
  --_sl-o: var(--cssnt-state-pressed-layer);
}

.cssnt-menu--list .cssnt-menu__item.is-active,
.cssnt-menu--list .cssnt-menu__item[aria-expanded=true] {
  --_sl-o: var(--cssnt-state-focus-layer);
}

.cssnt-menu--list .cssnt-menu__item[disabled],
.cssnt-menu--list .cssnt-menu__item[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
  opacity: var(--_disabled-o);
}

.cssnt-menu--list .cssnt-menu__item.is-selected {
  color: var(--cssnt-color-primary-container-on);
}

.cssnt-menu--list .cssnt-menu__item.is-selected::before {
  background: var(--cssnt-color-primary-container);
  opacity: 1;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-menu--list {
    transition: none;
  }
  .cssnt-menu--list .cssnt-menu__item::before,
  .cssnt-menu--list .cssnt-menu__item::after {
    transition: none;
  }
  .cssnt-menu--bar {
    transition: none;
  }
}
/* Carousel.scss (M3-ish) — COMPLETO + listo para “morph” por swipe
 * - Contenedores + items vacíos (tu lógica inyecta contenido/imagenes).
 * - Soporta hook que setea: --carousel-w (ancho dinámico por item).
 * - Drag: .cssnt-carousel__viewport.is-dragging desactiva snap mientras arrastras.
 */
.cssnt-carousel {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--cssnt-color-surface-on);
  /* ===== tokens internos (defaults basados en M3) ===== */
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_pad-y: var(--cssnt-space-2); /* 8  */
  --_gap: var(--cssnt-space-2); /* 8  */
  --_radius: var(--cssnt-radius-xl); /* 28 */
  /* Dimensiones base (aprox doc) */
  --_item-h: clamp(160px, 26vw, 205px);
  --_item-w: 186px;
  /* Small bounds (doc: 40–56dp) */
  --_small-min: 40px;
  --_small-max: 56px;
  /* Large: max width configurable */
  --_large-max: 520px;
  /* Visual */
  --_outline: var(--cssnt-color-outline-variant);
  --_placeholder: var(--cssnt-color-surface-variant);
  /* State-layer */
  --_sl-color: var(--cssnt-color-surface-on);
  --_sl-o: 0;
  /* Focus ring */
  --_ring: 3px;
  --_ring-color: color-mix(in srgb, var(--cssnt-color-primary) 70%, transparent);
  /* Motion */
  --_dur: var(--cssnt-motion-dur-med-2);
  --_dur-short: var(--cssnt-motion-dur-short-2);
  --_ease: var(--cssnt-motion-ease-standard);
  --_ease-spatial: var(--cssnt-motion-ease-spring);
  /* Edge fade */
  --_edge-fade: 16px;
  /* container queries */
  container-type: inline-size;
}

/* ===== viewport ===== */
.cssnt-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* swipe natural */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  /* snap (se desactiva al arrastrar) */
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  /* para que snap respete padding */
  scroll-padding-inline: var(--_pad-x);
  /* UX drag */
  cursor: grab;
  /* Fade sutil en bordes (tipo docs) */
  mask-image: linear-gradient(to right, transparent, #000 var(--_edge-fade), #000 calc(100% - var(--_edge-fade)), transparent);
}

.cssnt-carousel__viewport::-webkit-scrollbar {
  display: none;
}

/* estado drag (tu hook lo puede togglear) */
.cssnt-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* ===== track ===== */
.cssnt-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--_gap);
  padding: var(--_pad-y) var(--_pad-x);
  width: max-content;
  min-width: 100%;
}

/* ===== item (vacío) ===== */
.cssnt-carousel__item {
  position: relative;
  /* ancho dinámico (hook setea --carousel-w) */
  width: var(--carousel-w, var(--_item-w));
  flex: 0 0 var(--carousel-w, var(--_item-w));
  height: var(--_item-h);
  border-radius: var(--_radius);
  overflow: clip;
  background: var(--_placeholder);
  outline: 1px solid color-mix(in srgb, var(--_outline) 80%, transparent);
  scroll-snap-align: start;
  /* perf/feel */
  transform: translateZ(0);
  will-change: width, flex-basis, transform, opacity;
  contain: layout paint;
  user-select: none;
  /* morph suave */
  transition: width var(--_dur) var(--_ease-spatial), flex-basis var(--_dur) var(--_ease-spatial);
  /* capa de estado */
}
.cssnt-carousel__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--_sl-color) 100%, transparent);
  opacity: var(--_sl-o);
  pointer-events: none;
  transition: opacity var(--_dur-short) var(--_ease);
}
.cssnt-carousel__item {
  /* focus ring */
}
.cssnt-carousel__item::after {
  content: "";
  position: absolute;
  inset: calc(var(--_ring) * -1);
  border-radius: calc(var(--_radius) + var(--_ring));
  border: var(--_ring) solid transparent;
  pointer-events: none;
  transition: border-color var(--_dur-short) var(--_ease);
}
.cssnt-carousel__item {
  /* si inyectas <img/> o cualquier wrapper, se adapta sin estilos extra */
}
.cssnt-carousel__item > * {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== sizes (preferible setear --carousel-w para que el hook/variants convivan) ===== */
.cssnt-carousel__item.is-large {
  --carousel-w: min(var(--_large-max), 100cqi);
}

.cssnt-carousel__item.is-medium {
  --carousel-w: clamp(140px, 22vw, var(--_item-w));
}

.cssnt-carousel__item.is-small {
  --carousel-w: clamp(var(--_small-min), 8vw, var(--_small-max));
}

/* ===== aspect helpers (multi-aspect ratio) ===== */
.cssnt-carousel__item.ar-16-9 {
  aspect-ratio: 16/9;
  width: auto;
  flex-basis: auto;
}

.cssnt-carousel__item.ar-9-16 {
  aspect-ratio: 9/16;
  width: auto;
  flex-basis: auto;
}

.cssnt-carousel__item.ar-1-1 {
  aspect-ratio: 1/1;
  width: auto;
  flex-basis: auto;
}

.cssnt-carousel__item.ar-3-4 {
  aspect-ratio: 3/4;
  width: auto;
  flex-basis: auto;
}

/* si usas aspect-ratio, el ancho lo define el ratio; mantenemos height */
.cssnt-carousel--multi-aspect .cssnt-carousel__item {
  width: auto;
  flex-basis: auto;
}

/* ===== states (M3-ish) ===== */
.cssnt-carousel__item:hover {
  --_sl-o: var(--cssnt-state-hover-layer);
}

.cssnt-carousel__item:active {
  --_sl-o: var(--cssnt-state-pressed-layer);
}

.cssnt-carousel__item:focus-visible {
  --_sl-o: var(--cssnt-state-focus-layer);
}
.cssnt-carousel__item:focus-visible::after {
  border-color: var(--_ring-color);
}

/* Disabled */
.cssnt-carousel__item.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  pointer-events: none;
  filter: grayscale(0.15);
}

/* helpers visuales opcionales */
.cssnt-carousel__item.is-muted {
  opacity: 0.6;
}

.cssnt-carousel__item.is-hidden {
  opacity: 0.25;
}

/* squeeze (si lo quieres usar aparte del hook) */
.cssnt-carousel__item.is-squeezed {
  --_sx: 0.82;
  transform-origin: left center;
  transform: scaleX(var(--_sx));
  transition: transform var(--_dur) var(--_ease-spatial), opacity var(--_dur) var(--_ease);
}

/* ===== VARIANTS ===== */
/* Uncontained: items hasta el borde */
.cssnt-carousel--uncontained {
  --_pad-x: 0px;
}
.cssnt-carousel--uncontained .cssnt-carousel__viewport {
  mask-image: none;
  scroll-padding-inline: 0px;
}
.cssnt-carousel--uncontained .cssnt-carousel__track {
  padding-inline: 0;
}

/* Multi (default) — nada extra */
/* Hero: 1 large + 1 small peek */
.cssnt-carousel--hero {
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_pad-y: var(--cssnt-space-2); /* 8 */
  --_gap: var(--cssnt-space-2); /* 8 */
  --_item-h: clamp(150px, 28vw, 205px);
}
.cssnt-carousel--hero .cssnt-carousel__item {
  scroll-snap-align: start;
}
.cssnt-carousel--hero .cssnt-carousel__item.is-large {
  aspect-ratio: 16/9;
  width: auto;
  flex-basis: auto;
}
.cssnt-carousel--hero .cssnt-carousel__item.is-small {
  aspect-ratio: 9/16;
  --carousel-w: clamp(var(--_small-min), 10vw, var(--_small-max));
  width: var(--carousel-w);
  flex-basis: var(--carousel-w);
}

/* Center hero: centra el grupo (1 large + 2 small) */
.cssnt-carousel--hero-center {
  --_pad-x: var(--cssnt-space-4); /* 16 */
  --_pad-y: var(--cssnt-space-2); /* 8 */
  --_gap: var(--cssnt-space-2); /* 8 */
  --_item-h: clamp(150px, 28vw, 205px);
}
.cssnt-carousel--hero-center .cssnt-carousel__track {
  justify-content: center;
}
.cssnt-carousel--hero-center .cssnt-carousel__item {
  scroll-snap-align: center;
}
.cssnt-carousel--hero-center .cssnt-carousel__item.is-large {
  aspect-ratio: 16/9;
  width: auto;
  flex-basis: auto;
}
.cssnt-carousel--hero-center .cssnt-carousel__item.is-small {
  aspect-ratio: 9/16;
  --carousel-w: clamp(var(--_small-min), 10vw, var(--_small-max));
  width: var(--carousel-w);
  flex-basis: var(--carousel-w);
}

/* Contained: surface alrededor */
.cssnt-carousel--contained {
  background: var(--cssnt-color-surface);
  border-radius: var(--cssnt-radius-xl);
  outline: 1px solid color-mix(in srgb, var(--_outline) 70%, transparent);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .cssnt-carousel__viewport {
    scroll-behavior: auto;
  }
  .cssnt-carousel__item,
  .cssnt-carousel__item::before,
  .cssnt-carousel__item::after {
    transition: none !important;
  }
}
/* Stepper.scss — M3-ish (FIX horizontal compacto + conectores visibles)
 * - Horizontal: step compacto (max-content), sin “capsulas” gigantes
 * - Conectores: siempre visibles detrás, alineados al centro del indicador
 * - Layout: indicator arriba, content abajo (icon + label + support)
 * - Usa wrappers: __badge / __texts / __label / __support
 */
.cssnt-stepper {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  width: 100%;
  /* ===== tokens internos ===== */
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 70%, transparent);
  /* accent (variant) */
  --_accent: var(--cssnt-color-primary);
  --_accent-on: var(--cssnt-color-primary-on);
  --_accent-container: var(--cssnt-color-primary-container);
  --_accent-container-on: var(--cssnt-color-primary-container-on);
  /* error */
  --_error: var(--cssnt-color-danger);
  --_error-on: var(--cssnt-color-danger-on);
  /* surfaces */
  --_surface: var(--cssnt-color-surface);
  --_surface-variant: var(--cssnt-color-surface-variant);
  --_outline: var(--cssnt-color-outline-variant);
  /* lines */
  --_line: var(--_outline);
  --_line-active: var(--_accent);
  /* sizing (md default) */
  --_gap: var(--cssnt-space-2);
  --_pad-x: var(--cssnt-space-3);
  --_pad-y: var(--cssnt-space-2);
  --_radius: var(--cssnt-radius-xl);
  --_touch-h: 48px;
  --_indicator: 24px;
  --_indicator-font: 12px;
  --_line-w: 2px;
  /* horizontal connector y = centro del indicador (según padding del step) */
  --_line-y: calc(var(--_pad-y) + (var(--_indicator) / 2));
  /* state-layer */
  --_sl-o: 0;
  --_sl-c: color-mix(in srgb, var(--_on) 14%, transparent);
  /* focus ring */
  --_ring: 3px;
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
  /* step bg */
  --_step-bg: transparent;
  /* clamp labels (horizontal) */
  --_label-max: 22ch;
}

/* =========================
   LIST + ITEMS
   ========================= */
.cssnt-stepper__list {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  align-items: stretch;
}

.cssnt-stepper__item {
  position: relative;
  box-sizing: border-box;
  padding: 0 var(--_gap);
  /* default (vertical): centro del indicador relativo al step */
  --_icx: calc(var(--_pad-x) + (var(--_indicator) / 2));
  /* line colors per-item */
  --_line-left: var(--_line);
  --_line-right: var(--_line);
}
.cssnt-stepper__item.is-active, .cssnt-stepper__item.is-complete {
  --_line-left: var(--_line-active);
}
.cssnt-stepper__item.is-complete {
  --_line-right: var(--_line-active);
}
.cssnt-stepper__item.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
}
.cssnt-stepper__item {
  /* conectores siempre detrás */
}
.cssnt-stepper__item::before, .cssnt-stepper__item::after {
  z-index: 0;
}

/* =========================
   STEP (button)
   ========================= */
.cssnt-stepper__step {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--_indicator) 1fr;
  align-items: center;
  gap: var(--cssnt-space-3);
  min-height: var(--_touch-h);
  width: 100%;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--_radius);
  cursor: pointer;
  color: var(--_on);
  background: var(--_step-bg);
}
.cssnt-stepper__step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_sl-c);
  opacity: var(--_sl-o);
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}
.cssnt-stepper__step:hover {
  --_sl-o: var(--cssnt-state-hover-layer);
}
.cssnt-stepper__step:active {
  --_sl-o: var(--cssnt-state-pressed-layer);
}
.cssnt-stepper__step:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--_ring) var(--_ring-c);
  --_sl-o: var(--cssnt-state-focus-layer);
}
.cssnt-stepper__step[aria-disabled=true], .cssnt-stepper__step:disabled {
  cursor: not-allowed;
  --_sl-o: 0;
}

/* ===== (vertical OK) tonal suave solo para active (no cambia horizontal) */
.cssnt-stepper--vertical .cssnt-stepper__item.is-active .cssnt-stepper__step {
  --_step-bg: color-mix(in srgb, var(--_accent-container) 55%, transparent);
  --_sl-c: color-mix(in srgb, var(--_accent) 16%, transparent);
}

/* =========================
   INDICATOR + CONTENT WRAPPERS
   ========================= */
.cssnt-stepper__indicator {
  box-sizing: border-box;
  width: var(--_indicator);
  height: var(--_indicator);
  border-radius: var(--cssnt-radius-full);
  display: grid;
  place-items: center;
  background: var(--_surface-variant);
  color: var(--_muted);
  border: 1px solid var(--_outline);
  font-size: var(--_indicator-font);
  line-height: 1;
  font-weight: 600;
  user-select: none;
  position: relative;
  z-index: 2; /* por encima del conector */
}

.cssnt-stepper__content {
  box-sizing: border-box;
  min-width: 0;
}

.cssnt-stepper__badge {
  display: inline-grid;
  place-items: center;
}

.cssnt-stepper__texts {
  min-width: 0;
  display: grid;
  row-gap: 2px;
}

.cssnt-stepper__label {
  font-family: var(--cssnt-type-label-lg-family);
  font-size: var(--cssnt-type-label-lg-size);
  line-height: var(--cssnt-type-label-lg-line);
  font-weight: var(--cssnt-type-label-lg-weight);
}

.cssnt-stepper__support {
  font-family: var(--cssnt-type-label-md-family);
  font-size: var(--cssnt-type-label-md-size);
  line-height: var(--cssnt-type-label-md-line);
  font-weight: var(--cssnt-type-label-md-weight);
  color: var(--_muted);
}

/* =========================
   STATES (item colors)
   ========================= */
.cssnt-stepper__item.is-active .cssnt-stepper__indicator,
.cssnt-stepper__item.is-complete .cssnt-stepper__indicator {
  background: var(--_accent);
  color: var(--_accent-on);
  border-color: var(--_accent);
}

.cssnt-stepper__item.is-error .cssnt-stepper__indicator {
  background: var(--_error);
  color: var(--_error-on);
  border-color: var(--_error);
}

/* opcional: conector rojo en error */
.cssnt-stepper__item.is-error {
  --_line-left: var(--_error);
  --_line-right: var(--_error);
}

/* =========================
   ORIENTATION: HORIZONTAL (compact stepper)
   ========================= */
.cssnt-stepper--horizontal .cssnt-stepper__list {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* centro del indicador en el cell */
.cssnt-stepper--horizontal .cssnt-stepper__item {
  --_icx: 50%;
  padding: 0; /* evita padding que “infla” el cell */
}

/* STEP compacto: NO 100% */
.cssnt-stepper--horizontal .cssnt-stepper__step {
  grid-template-columns: 1fr;
  grid-template-rows: var(--_indicator) auto;
  justify-items: center;
  align-content: start;
  gap: var(--cssnt-space-2);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  /* no cápsula gigante */
  background: transparent;
  border-radius: var(--cssnt-radius-full);
}

/* active: highlight sutil SOLO por state-layer, no bg */
.cssnt-stepper--horizontal .cssnt-stepper__item.is-active .cssnt-stepper__step {
  --_sl-c: color-mix(in srgb, var(--_accent) 16%, transparent);
}

/* content debajo: icon + texts centrados */
.cssnt-stepper--horizontal .cssnt-stepper__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-2);
  min-width: 0;
}

/* textos: clamp en horizontal */
.cssnt-stepper--horizontal .cssnt-stepper__texts {
  justify-items: start;
}

.cssnt-stepper--horizontal .cssnt-stepper__label,
.cssnt-stepper--horizontal .cssnt-stepper__support {
  max-width: var(--_label-max);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Conectores horizontales (siempre visibles detrás)
   - se “cortan” para no pasar debajo del círculo */
.cssnt-stepper--horizontal .cssnt-stepper__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(50% + var(--_indicator) / 2);
  top: var(--_line-y);
  height: var(--_line-w);
  transform: translateY(-50%);
  background: var(--_line-left);
  border-radius: var(--cssnt-radius-full);
  pointer-events: none;
}
.cssnt-stepper--horizontal .cssnt-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--_indicator) / 2);
  right: 0;
  top: var(--_line-y);
  height: var(--_line-w);
  transform: translateY(-50%);
  background: var(--_line-right);
  border-radius: var(--cssnt-radius-full);
  pointer-events: none;
}

/* =========================
   FLOW: SCROLL (horizontal)
   ========================= */
.cssnt-stepper--scroll .cssnt-stepper__list {
  grid-auto-columns: max-content;
  justify-content: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: var(--cssnt-space-1);
}

/* en scroll, cada item respeta su contenido */
.cssnt-stepper--scroll .cssnt-stepper__item {
  padding: 0 var(--cssnt-space-2);
}

/* =========================
   ORIENTATION: VERTICAL (se queda como ya te gustó)
   ========================= */
.cssnt-stepper--vertical .cssnt-stepper__list {
  grid-auto-flow: row;
  grid-auto-rows: max-content;
}

.cssnt-stepper--vertical .cssnt-stepper__item {
  padding: var(--_gap) 0;
  --_icx: calc(var(--_pad-x) + (var(--_indicator) / 2));
}
.cssnt-stepper--vertical .cssnt-stepper__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: var(--_icx);
  top: 0;
  bottom: 50%;
  width: var(--_line-w);
  transform: translateX(-50%);
  background: var(--_line-left);
  border-radius: var(--cssnt-radius-full);
  pointer-events: none;
  z-index: 0;
}
.cssnt-stepper--vertical .cssnt-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--_icx);
  top: 50%;
  bottom: 0;
  width: var(--_line-w);
  transform: translateX(-50%);
  background: var(--_line-right);
  border-radius: var(--cssnt-radius-full);
  pointer-events: none;
  z-index: 0;
}

.cssnt-stepper--vertical .cssnt-stepper__content {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-2);
}

/* =========================
   SIZE MODIFIERS
   ========================= */
.cssnt-stepper--sm {
  --_touch-h: 44px;
  --_indicator: 20px;
  --_indicator-font: 11px;
  --_pad-x: var(--cssnt-space-2);
  --_pad-y: var(--cssnt-space-1);
  --_radius: var(--cssnt-radius-lg);
  --_line-y: calc(var(--_pad-y) + (var(--_indicator) / 2));
  --_label-max: 18ch;
}

.cssnt-stepper--md { /* defaults */ }

.cssnt-stepper--lg {
  --_touch-h: 56px;
  --_indicator: 28px;
  --_indicator-font: 13px;
  --_pad-x: var(--cssnt-space-4);
  --_pad-y: var(--cssnt-space-2);
  --_radius: var(--cssnt-radius-xl);
  --_line-y: calc(var(--_pad-y) + (var(--_indicator) / 2));
  --_label-max: 26ch;
}

/* =========================
   VARIANTS (accent)
   ========================= */
.cssnt-stepper--primary {
  --_accent: var(--cssnt-color-primary);
  --_accent-on: var(--cssnt-color-primary-on);
  --_accent-container: var(--cssnt-color-primary-container);
  --_accent-container-on: var(--cssnt-color-primary-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--secondary {
  --_accent: var(--cssnt-color-secondary);
  --_accent-on: var(--cssnt-color-secondary-on);
  --_accent-container: var(--cssnt-color-secondary-container);
  --_accent-container-on: var(--cssnt-color-secondary-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--tertiary {
  --_accent: var(--cssnt-color-tertiary);
  --_accent-on: var(--cssnt-color-tertiary-on);
  --_accent-container: var(--cssnt-color-tertiary-container);
  --_accent-container-on: var(--cssnt-color-tertiary-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--success {
  --_accent: var(--cssnt-color-success);
  --_accent-on: var(--cssnt-color-success-on);
  --_accent-container: var(--cssnt-color-success-container);
  --_accent-container-on: var(--cssnt-color-success-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--warning {
  --_accent: var(--cssnt-color-warning);
  --_accent-on: var(--cssnt-color-warning-on);
  --_accent-container: var(--cssnt-color-warning-container);
  --_accent-container-on: var(--cssnt-color-warning-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--danger {
  --_accent: var(--cssnt-color-danger);
  --_accent-on: var(--cssnt-color-danger-on);
  --_accent-container: var(--cssnt-color-danger-container);
  --_accent-container-on: var(--cssnt-color-danger-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

.cssnt-stepper--info {
  --_accent: var(--cssnt-color-info);
  --_accent-on: var(--cssnt-color-info-on);
  --_accent-container: var(--cssnt-color-info-container);
  --_accent-container-on: var(--cssnt-color-info-container-on);
  --_ring-c: color-mix(in srgb, var(--_accent) 45%, transparent);
}

/* =========================
   INTERACTION: STATIC
   ========================= */
.cssnt-stepper--static .cssnt-stepper__step {
  cursor: default;
}

.cssnt-stepper--static .cssnt-stepper__step::after {
  opacity: 0;
}

.cssnt-stepper--static .cssnt-stepper__step:hover,
.cssnt-stepper--static .cssnt-stepper__step:active {
  --_sl-o: 0;
}

/* =========================
   CONTENT (panels)
   ========================= */
.cssnt-stepper__panels {
  box-sizing: border-box;
  margin-top: var(--cssnt-space-3);
}

.cssnt-stepper__panel {
  box-sizing: border-box;
}

.cssnt-stepper--content-none .cssnt-stepper__panels {
  display: none;
}

.cssnt-stepper--content-active .cssnt-stepper__panel {
  display: none;
}

.cssnt-stepper--content-active .cssnt-stepper__panel.is-active {
  display: block;
}

.cssnt-stepper--content-all .cssnt-stepper__panel {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-stepper__step::after {
    transition: none;
  }
}
/* Footer.scss (M3-ish)
 * Markup esperado (desde Footer.tsx):
 * - .cssnt-footer
 * - .cssnt-footer__brand
 * - .cssnt-footer__links
 * - .cssnt-footer__actions
 * - .cssnt-footer__bottom
 * Modifiers:
 * - .cssnt-footer--standard | .cssnt-footer--minimal
 * - .cssnt-footer--start | .cssnt-footer--center
 */
.cssnt-footer {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  /* ===== tokens internos ===== */
  --_bg: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 75%, transparent);
  --_divider: var(--cssnt-color-outline-variant);
  --_pad-x: var(--cssnt-space-6); /* 32 */
  --_pad-y: var(--cssnt-space-6); /* 32 */
  --_gap: var(--cssnt-space-8); /* 48 */
  --_logo: 72px;
  --_link-r: var(--cssnt-radius-full);
  --_focus: color-mix(in srgb, var(--cssnt-color-primary) 55%, transparent);
  --_sl-o: 0; /* state-layer opacity */
  width: 100%;
  background: var(--_bg);
  border-top: 1px solid var(--_divider);
}

.cssnt-footer--standard {
  /* reservado para ajustes futuros */
}

.cssnt-footer--minimal {
  --_gap: var(--cssnt-space-6); /* 32 */
}

/* Align modifiers */
.cssnt-footer--start {
  text-align: left;
}

.cssnt-footer--center {
  text-align: center;
}

/* ===== Brand ===== */
.cssnt-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-4); /* 16 */
}

/* si tu <Image> renderiza <img> */
.cssnt-footer__brand img {
  width: var(--_logo);
  height: var(--_logo);
  object-fit: contain;
}

/* ===== Links ===== */
.cssnt-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-2);
  padding: var(--cssnt-space-2) var(--cssnt-space-3);
  border-radius: var(--_link-r);
  color: inherit;
  text-decoration: none;
  position: relative;
  outline: none;
  transition: background var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* state-layer */
.cssnt-footer__links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: var(--_sl-o);
  pointer-events: none;
}

.cssnt-footer__links a:hover {
  --_sl-o: var(--cssnt-state-hover-layer);
}

.cssnt-footer__links a:active {
  --_sl-o: var(--cssnt-state-pressed-layer);
  transform: translateY(0.5px);
}

.cssnt-footer__links a:focus-visible {
  --_sl-o: var(--cssnt-state-focus-layer);
  box-shadow: 0 0 0 3px var(--_focus);
}

/* ===== Actions (botones) ===== */
.cssnt-footer__actions > * {
  display: inline-flex;
}

/* Cuando recibes <a><Button/></a>, asegúrate de que el anchor no meta estilos raros */
.cssnt-footer__actions a {
  text-decoration: none;
}

/* ===== Bottom bar ===== */
.cssnt-footer__bottom {
  margin-top: var(--cssnt-space-5); /* 24 */
  padding-top: var(--cssnt-space-4); /* 16 */
  border-top: 1px solid var(--_divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-3); /* 12 */
  flex-wrap: wrap;
  color: var(--_muted);
}

/* center mode: bottom bar centrada */
.cssnt-footer--center .cssnt-footer__bottom {
  justify-content: center;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .cssnt-footer {
    --_pad-x: var(--cssnt-space-5); /* 24 */
    --_pad-y: var(--cssnt-space-5); /* 24 */
    --_gap: var(--cssnt-space-6); /* 32 */
    --_logo: 64px;
  }
  .cssnt-footer__bottom {
    justify-content: flex-start;
  }
  .cssnt-footer--center .cssnt-footer__bottom {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .cssnt-footer {
    --_pad-x: var(--cssnt-space-4); /* 16 */
    --_pad-y: var(--cssnt-space-4); /* 16 */
    --_logo: 56px;
  }
  .cssnt-footer__brand {
    gap: var(--cssnt-space-3); /* 12 */
  }
  .cssnt-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .cssnt-footer--center .cssnt-footer__bottom {
    align-items: center;
  }
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .cssnt-footer__links a {
    transition: none;
  }
}
/* @/_components/header/Header.scss */
.cssnt-header {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  /* ===== internos ===== */
  --_h: 64px;
  --_pad-x: var(--cssnt-space-5); /* 24 */
  --_pad-y: var(--cssnt-space-3); /* 12 */
  --_gap: var(--cssnt-space-2); /* 8 */
  --_bg: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_divider: var(--cssnt-color-outline-variant);
  --_shadow: var(--cssnt-elev-1-shadow);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--_bg);
  color: var(--_on);
  border-bottom: 1px solid var(--_divider);
  box-shadow: var(--_shadow);
  /* height + safe-area */
  min-height: calc(var(--_h) + env(safe-area-inset-top));
  padding: calc(var(--_pad-y) + env(safe-area-inset-top)) var(--_pad-x) var(--_pad-y);
  /* útil para que el layout se pueda offsetear */
  --cssnt-header-h: var(--_h);
}

.cssnt-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--_gap);
  min-height: var(--_h);
}

.cssnt-header__side {
  display: inline-flex;
  align-items: center;
}

.cssnt-header__brand {
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-3); /* 12 */
  min-width: 0;
}

/* ===== variants (colores) ===== */
.cssnt-header--white {
  --_bg: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_divider: var(--cssnt-color-outline-variant);
}

.cssnt-header--black {
  --_bg: var(--cssnt-color-surface-inverse);
  --_on: var(--cssnt-color-surface-inverse-on);
  --_divider: color-mix(in srgb, var(--_on) 20%, transparent);
}

.cssnt-header--primary {
  --_bg: var(--cssnt-color-primary);
  --_on: var(--cssnt-color-primary-on);
}

.cssnt-header--secondary {
  --_bg: var(--cssnt-color-secondary);
  --_on: var(--cssnt-color-secondary-on);
}

.cssnt-header--tertiary {
  --_bg: var(--cssnt-color-tertiary);
  --_on: var(--cssnt-color-tertiary-on);
}

.cssnt-header--success {
  --_bg: var(--cssnt-color-success);
  --_on: var(--cssnt-color-success-on);
}

.cssnt-header--warning {
  --_bg: var(--cssnt-color-warning);
  --_on: var(--cssnt-color-warning-on);
}

.cssnt-header--danger {
  --_bg: var(--cssnt-color-danger);
  --_on: var(--cssnt-color-danger-on);
}

.cssnt-header--info {
  --_bg: var(--cssnt-color-info);
  --_on: var(--cssnt-color-info-on);
}

.cssnt-header--primary-tonal {
  --_bg: var(--cssnt-color-primary-container);
  --_on: var(--cssnt-color-primary-container-on);
}

.cssnt-header--secondary-tonal {
  --_bg: var(--cssnt-color-secondary-container);
  --_on: var(--cssnt-color-secondary-container-on);
}

.cssnt-header--tertiary-tonal {
  --_bg: var(--cssnt-color-tertiary-container);
  --_on: var(--cssnt-color-tertiary-container-on);
}

.cssnt-header--success-tonal {
  --_bg: var(--cssnt-color-success-container);
  --_on: var(--cssnt-color-success-container-on);
}

.cssnt-header--warning-tonal {
  --_bg: var(--cssnt-color-warning-container);
  --_on: var(--cssnt-color-warning-container-on);
}

.cssnt-header--danger-tonal {
  --_bg: var(--cssnt-color-danger-container);
  --_on: var(--cssnt-color-danger-container-on);
}

.cssnt-header--info-tonal {
  --_bg: var(--cssnt-color-info-container);
  --_on: var(--cssnt-color-info-container-on);
}

/* ===== responsive ===== */
@media (max-width: 900px) {
  .cssnt-header {
    --_pad-x: var(--cssnt-space-4);
  }
}
/* @/_components/landing_banner/Landing_banner.scss
 * - Variants: solid / tonal / gradients (--cssnt-grad-01..15)
 * - Auto text contrast: --_on (white/black) según variant
 * - Optional animation: .is-animated (respetando prefers-reduced-motion)
 */
.cssnt-landingbanner {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  /* ===== internos ===== */
  --_mw: 1200px;
  --_pad-x: var(--cssnt-space-6); /* 32 */
  --_pad-y: var(--cssnt-space-9); /* 56 */
  --_gap: var(--cssnt-space-8); /* 48 */
  /* bg */
  --_bg: var(--cssnt-color-surface);
  --_border: var(--cssnt-color-outline-variant);
  /* text */
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
  /* gradient plumbing */
  --_bg-img: none;
  --_bg-size: auto;
  --_bg-pos: center;
  --_bg-repeat: no-repeat;
  --_anim: none;
  /* media */
  --_media-bg: var(--cssnt-color-surface-variant);
  --_media-border: var(--cssnt-color-outline-variant);
  --_media-r: var(--cssnt-radius-xl);
  --_media-pad: var(--cssnt-space-5);
  width: 100%;
  background-color: var(--_bg);
  background-image: var(--_bg-img);
  background-size: var(--_bg-size);
  background-position: var(--_bg-pos);
  background-repeat: var(--_bg-repeat);
  animation: var(--_anim);
  border-bottom: 1px solid var(--_border);
  color: var(--_on);
}

.cssnt-landingbanner__inner {
  max-width: var(--_mw);
  margin: 0 auto;
  padding: var(--_pad-y) var(--_pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_gap);
}

.cssnt-landingbanner__copy {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--cssnt-space-3);
  color: inherit;
}

/* asegura herencia para Title/Paragraph custom */
.cssnt-landingbanner__copy :is(h1, h2, h3, h4, h5, h6, p, span) {
  color: inherit;
}

.cssnt-landingbanner__copy .is-muted {
  color: var(--_muted);
}

.cssnt-landingbanner__cta {
  margin-top: var(--cssnt-space-4);
  display: flex;
  gap: var(--cssnt-space-3);
  flex-wrap: wrap;
}

.cssnt-landingbanner__cta-item {
  display: inline-flex;
}

.cssnt-landingbanner__media {
  flex: 0 0 auto;
  padding: var(--_media-pad);
  border-radius: var(--_media-r);
}

.cssnt-landingbanner--reverse .cssnt-landingbanner__inner {
  flex-direction: row-reverse;
}

/* align */
.cssnt-landingbanner--center .cssnt-landingbanner__inner {
  flex-direction: column;
  text-align: center;
}

.cssnt-landingbanner--center .cssnt-landingbanner__cta {
  justify-content: center;
}

/* =========================
 * TEXT COLOR FORCERS (optional)
 * ========================= */
.cssnt-landingbanner.is-on-white {
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
}

.cssnt-landingbanner.is-on-black {
  --_on: var(--cssnt-color-surface-inverse-on);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
  --_border: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 18%, transparent);
  --_media-bg: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 10%, transparent);
  --_media-border: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 18%, transparent);
}

/* =========================
 * SOLID / TONAL VARIANTS
 * ========================= */
.cssnt-landingbanner--white {
  --_bg: var(--cssnt-color-surface);
}

.cssnt-landingbanner--black {
  --_bg: var(--cssnt-color-surface-inverse);
  --_border: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 18%, transparent);
  --_media-bg: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 10%, transparent);
  --_media-border: color-mix(in srgb, var(--cssnt-color-surface-inverse-on) 18%, transparent);
}

.cssnt-landingbanner--primary {
  --_bg: var(--cssnt-color-primary);
}

.cssnt-landingbanner--secondary {
  --_bg: var(--cssnt-color-secondary);
}

.cssnt-landingbanner--tertiary {
  --_bg: var(--cssnt-color-tertiary);
}

.cssnt-landingbanner--success {
  --_bg: var(--cssnt-color-success);
}

.cssnt-landingbanner--warning {
  --_bg: var(--cssnt-color-warning);
}

.cssnt-landingbanner--danger {
  --_bg: var(--cssnt-color-danger);
}

.cssnt-landingbanner--info {
  --_bg: var(--cssnt-color-info);
}

.cssnt-landingbanner--primary-tonal {
  --_bg: var(--cssnt-color-primary-container);
}

.cssnt-landingbanner--secondary-tonal {
  --_bg: var(--cssnt-color-secondary-container);
}

.cssnt-landingbanner--tertiary-tonal {
  --_bg: var(--cssnt-color-tertiary-container);
}

.cssnt-landingbanner--success-tonal {
  --_bg: var(--cssnt-color-success-container);
}

.cssnt-landingbanner--warning-tonal {
  --_bg: var(--cssnt-color-warning-container);
}

.cssnt-landingbanner--danger-tonal {
  --_bg: var(--cssnt-color-danger-container);
}

.cssnt-landingbanner--info-tonal {
  --_bg: var(--cssnt-color-info-container);
}

/* =========================
 * AUTO CONTRAST (texto)
 * - fondos “oscuros” -> blanco
 * - fondos “claros” -> negro
 * ========================= */
.cssnt-landingbanner--black,
.cssnt-landingbanner--primary,
.cssnt-landingbanner--secondary,
.cssnt-landingbanner--tertiary,
.cssnt-landingbanner--success,
.cssnt-landingbanner--danger,
.cssnt-landingbanner--info {
  --_on: var(--cssnt-color-white-text, #fff);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
}

.cssnt-landingbanner--white,
.cssnt-landingbanner--primary-tonal,
.cssnt-landingbanner--secondary-tonal,
.cssnt-landingbanner--tertiary-tonal,
.cssnt-landingbanner--success-tonal,
.cssnt-landingbanner--warning,
.cssnt-landingbanner--warning-tonal,
.cssnt-landingbanner--danger-tonal,
.cssnt-landingbanner--info-tonal {
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
}

/* =========================
 * GRADIENT VARIANTS
 * ========================= */
.cssnt-landingbanner--grad-01 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-01);
}

.cssnt-landingbanner--grad-02 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-02);
}

.cssnt-landingbanner--grad-03 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-03);
}

.cssnt-landingbanner--grad-04 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-04);
}

.cssnt-landingbanner--grad-05 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-05);
}

.cssnt-landingbanner--grad-06 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-06);
}

.cssnt-landingbanner--grad-07 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-07);
}

.cssnt-landingbanner--grad-08 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-08);
}

.cssnt-landingbanner--grad-09 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-09);
}

.cssnt-landingbanner--grad-10 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-10);
}

.cssnt-landingbanner--grad-11 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-11);
}

.cssnt-landingbanner--grad-12 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-12);
}

.cssnt-landingbanner--grad-13 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-13);
}

.cssnt-landingbanner--grad-14 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-14);
}

.cssnt-landingbanner--grad-15 {
  --_bg: transparent;
  --_bg-img: var(--cssnt-grad-15);
}

.cssnt-landingbanner[class*=cssnt-landingbanner--grad-] {
  --_bg-size: 220% 220%;
  --_bg-pos: 18% 18%;
  --_bg-repeat: no-repeat;
  /* sobre gradiente, border/media más sutiles */
  --_border: color-mix(in srgb, var(--_on) 18%, transparent);
  --_media-bg: color-mix(in srgb, var(--_on) 10%, transparent);
  --_media-border: color-mix(in srgb, var(--_on) 18%, transparent);
  /* gradiente suele ir mejor con texto blanco */
  --_on: var(--cssnt-color-white-text, #fff);
  --_muted: color-mix(in srgb, var(--_on) 82%, transparent);
}

/* =========================
 * ANIMATION (opt-in)
 * ========================= */
@keyframes cssnt-landingbanner-grad-shift {
  0% {
    background-position: 18% 18%;
  }
  50% {
    background-position: 82% 78%;
  }
  100% {
    background-position: 18% 18%;
  }
}
.cssnt-landingbanner.is-animated {
  --_anim: cssnt-landingbanner-grad-shift 12s ease-in-out infinite;
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
  .cssnt-landingbanner.is-animated {
    --_anim: none;
  }
}
/* =========================
 * RESPONSIVE
 * ========================= */
@media (max-width: 900px) {
  .cssnt-landingbanner {
    --_pad-x: var(--cssnt-space-5);
    --_pad-y: var(--cssnt-space-7);
  }
  .cssnt-landingbanner__inner {
    flex-direction: column;
    text-align: center;
  }
  .cssnt-landingbanner__cta {
    justify-content: center;
  }
}
.cssnt-masonry {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  width: 100%;
  /* ===== internals ===== */
  --_cols: 4;
  --_gap: var(--cssnt-space-4); /* 16 */
  column-count: var(--_cols);
  column-gap: var(--_gap);
  column-fill: balance;
}

.cssnt-masonry.is-full {
  width: 100%;
}

/* items (works even if user doesn't wrap with .cssnt-masonry__item) */
.cssnt-masonry__item,
.cssnt-masonry > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  /* vertical "gap" for CSS columns */
  margin: 0 0 var(--_gap);
}

/* last item: avoid extra bottom spacing in some layouts */
.cssnt-masonry__item:last-child,
.cssnt-masonry > *:last-child {
  margin-bottom: 0;
}

/* if inner content uses overflow/transform, helps to avoid weird cuts */
.cssnt-masonry__item > *,
.cssnt-masonry > * > * {
  width: 100%;
}

/* gaps (by classes) */
.cssnt-masonry--gap-0 {
  --_gap: 0px;
}

.cssnt-masonry--gap-1 {
  --_gap: var(--cssnt-space-1);
}

.cssnt-masonry--gap-2 {
  --_gap: var(--cssnt-space-2);
}

.cssnt-masonry--gap-3 {
  --_gap: var(--cssnt-space-3);
}

.cssnt-masonry--gap-4 {
  --_gap: var(--cssnt-space-4);
}

.cssnt-masonry--gap-5 {
  --_gap: var(--cssnt-space-5);
}

.cssnt-masonry--gap-6 {
  --_gap: var(--cssnt-space-6);
}

.cssnt-masonry--gap-7 {
  --_gap: var(--cssnt-space-7);
}

.cssnt-masonry--gap-8 {
  --_gap: var(--cssnt-space-8);
}

/* variants (presets) */
.cssnt-masonry--dense {
  --_gap: var(--cssnt-space-2);
}

.cssnt-masonry--normal {
  --_gap: var(--cssnt-space-4);
}

.cssnt-masonry--spacious {
  --_gap: var(--cssnt-space-6);
}

/* cols (by classes) */
.cssnt-masonry--cols-1 {
  --_cols: 1;
}

.cssnt-masonry--cols-2 {
  --_cols: 2;
}

.cssnt-masonry--cols-3 {
  --_cols: 3;
}

.cssnt-masonry--cols-4 {
  --_cols: 4;
}

.cssnt-masonry--cols-5 {
  --_cols: 5;
}

/* responsive default */
@media (max-width: 1200px) {
  .cssnt-masonry {
    --_cols: 3;
  }
}
@media (max-width: 900px) {
  .cssnt-masonry {
    --_cols: 2;
  }
}
@media (max-width: 600px) {
  .cssnt-masonry {
    --_cols: 1;
  }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-masonry,
  .cssnt-masonry__item,
  .cssnt-masonry > * {
    transition: none;
  }
}
/* Empty_state.scss */
.cssnt-emptystate {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  /* ===== tokens internos ===== */
  --_max-w: 560px;
  --_pad: clamp(var(--cssnt-space-4), 3vw, var(--cssnt-space-7));
  --_gap: clamp(var(--cssnt-space-3), 2vw, var(--cssnt-space-5));
  --_img-w: clamp(180px, 40vw, 320px);
  --_text-family: var(--cssnt-type-body-lg-family);
  --_text-size: var(--cssnt-type-body-lg-size);
  --_text-line: var(--cssnt-type-body-lg-line);
  --_text-weight: var(--cssnt-type-body-lg-weight);
  --_text-color: color-mix(in srgb, var(--cssnt-color-surface-on) 85%, transparent);
  width: min(100%, var(--_max-w));
  margin-inline: auto;
  padding: var(--_pad);
  background: transparent;
  text-align: center;
  color: var(--cssnt-color-surface-on);
}

.cssnt-emptystate__media {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
}

.cssnt-emptystate__img {
  display: block;
  width: var(--_img-w);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== variants: size ===== */
.cssnt-emptystate--sm {
  --_max-w: 420px;
  --_pad: clamp(var(--cssnt-space-3), 2.4vw, var(--cssnt-space-6));
  --_gap: clamp(var(--cssnt-space-2), 1.8vw, var(--cssnt-space-4));
  --_img-w: clamp(150px, 34vw, 260px);
}

.cssnt-emptystate--md {
  /* usa defaults */
}

.cssnt-emptystate--lg {
  --_max-w: 680px;
  --_pad: clamp(var(--cssnt-space-5), 3.5vw, var(--cssnt-space-8));
  --_gap: clamp(var(--cssnt-space-1), 2vw, var(--cssnt-space-2));
  --_img-w: clamp(220px, 44vw, 380px);
  --_text-family: var(--cssnt-type-body-lg-family);
  --_text-size: var(--cssnt-type-body-lg-size);
  --_text-line: var(--cssnt-type-body-lg-line);
  --_text-weight: var(--cssnt-type-body-lg-weight);
}

/* Table.scss — cssnt_components (M3-ish)
   BEM:
   .cssnt-table
     .cssnt-table__scroll
       table.cssnt-table__table
         thead.cssnt-table__thead
           tr.cssnt-table__tr
             th.cssnt-table__th
         tbody.cssnt-table__tbody
           tr.cssnt-table__tr
             td.cssnt-table__td
*/
.cssnt-table {
  /* =========================
     Internas (theme)
     ========================= */
  --_bg: var(--cssnt-color-surface);
  --_fg: var(--cssnt-color-surface-on);
  --_border: var(--cssnt-color-outline-variant);
  --_radius: var(--cssnt-radius-md);
  --_shadow: var(--cssnt-elev-1-shadow);
  --_head-bg: var(--cssnt-color-surface-variant);
  --_head-fg: var(--cssnt-color-surface-variant-on);
  --_row-h: 48px;
  --_pad-x: var(--cssnt-space-4);
  --_pad-y: var(--cssnt-space-3);
  --_hover-opacity: var(--cssnt-state-hover-layer);
  --_pressed-opacity: var(--cssnt-state-pressed-layer);
  /* state-layer base (se mezcla con opacity) */
  --_state-layer-color: var(--cssnt-color-surface-on);
  /* selected row (default = primary container) */
  --_selected-bg: var(--cssnt-color-primary-container);
  --_selected-fg: var(--cssnt-color-primary-container-on);
  display: block;
  width: 100%;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  background: var(--_bg);
  box-shadow: var(--_shadow);
  overflow: hidden;
}

/* =========================
   Scroll container
   ========================= */
.cssnt-table__scroll {
  display: block;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   Table element
   ========================= */
.cssnt-table__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
  color: var(--_fg);
}

.cssnt-table__caption {
  text-align: left;
  padding: var(--cssnt-space-4);
  border-bottom: 1px solid var(--_border);
  font-family: var(--cssnt-type-title-sm-family);
  font-size: var(--cssnt-type-title-sm-size);
  line-height: var(--cssnt-type-title-sm-line);
  font-weight: var(--cssnt-type-title-sm-weight);
  color: var(--cssnt-color-outline);
  background: var(--_bg);
}

/* =========================
   Cells
   ========================= */
.cssnt-table :where(th, td) {
  padding: var(--_pad-y) var(--_pad-x);
  height: var(--_row-h);
  vertical-align: middle;
  border-bottom: 1px solid var(--_border);
  background: transparent;
}

.cssnt-table__th {
  font-family: var(--cssnt-type-label-md-family);
  font-size: var(--cssnt-type-label-md-size);
  line-height: var(--cssnt-type-label-md-line);
  font-weight: var(--cssnt-type-label-md-weight);
  color: var(--_head-fg);
  background: var(--_head-bg);
  text-align: left;
  white-space: nowrap;
}

.cssnt-table__td {
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  font-weight: var(--cssnt-type-body-md-weight);
  color: var(--_fg);
}

/* última fila sin borde */
.cssnt-table__tbody > tr:last-child > :where(th, td) {
  border-bottom: 0;
}

/* =========================
   Column dividers (opt)
   ========================= */
.cssnt-table--col-dividers :where(th, td) {
  border-right: 1px solid var(--_border);
}

.cssnt-table--col-dividers :where(th, td):last-child {
  border-right: 0;
}

/* =========================
   Row state-layer (hover/pressed)
   Nota: el overlay vive en el TR y no tapa el texto por z-index.
   ========================= */
.cssnt-table__tr {
  position: relative;
}

.cssnt-table__tr > :where(th, td) {
  position: relative;
  z-index: 1;
}

.cssnt-table__tr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_state-layer-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

.cssnt-table__tbody .cssnt-table__tr:hover::after {
  opacity: var(--_hover-opacity);
}

.cssnt-table__tbody .cssnt-table__tr:active::after {
  opacity: var(--_pressed-opacity);
}

/* =========================
   Striped rows (opt)
   ========================= */
.cssnt-table--striped .cssnt-table__tbody .cssnt-table__tr:nth-child(even) > :where(th, td) {
  background: var(--cssnt-color-background);
}

/* =========================
   Selected row (opt)
   ========================= */
.cssnt-table__tr.is-selected > :where(th, td) {
  background: var(--_selected-bg);
  color: var(--_selected-fg);
}

.cssnt-table__tr.is-selected::after {
  opacity: 0;
}

/* =========================
   Density
   ========================= */
.cssnt-table--dense {
  --_row-h: 40px;
  --_pad-y: var(--cssnt-space-2);
  --_pad-x: var(--cssnt-space-3);
}

/* =========================
   Sticky header (opt)
   ========================= */
.cssnt-table--sticky .cssnt-table__thead .cssnt-table__th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* =========================
   Align utils
   ========================= */
.cssnt-table__cell--right {
  text-align: right;
}

.cssnt-table__cell--center {
  text-align: center;
}

.cssnt-table__cell--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--cssnt-type-body-sm-size);
}

/* =========================
   Content inside cells
   ========================= */
.cssnt-table__td :where(a, button) {
  color: inherit;
}

.cssnt-table__td :where(a):focus-visible,
.cssnt-table__td :where(button):focus-visible {
  outline: 2px solid var(--cssnt-color-primary);
  outline-offset: 2px;
  border-radius: var(--cssnt-radius-sm);
}

/* =========================
   Variants (semantic)
   - neutral (default) = surface (sin clase)
   - neutral-inverse
   - primary/secondary/tertiary
   - success/warning/danger/info
   ========================= */
/* Neutral inverse */
.cssnt-table--inverse {
  --_bg: var(--cssnt-color-surface-inverse);
  --_fg: var(--cssnt-color-surface-inverse-on);
  --_border: rgba(255, 255, 255, 0.16);
  --_head-bg: rgba(255, 255, 255, 0.08);
  --_head-fg: var(--cssnt-color-surface-inverse-on);
  --_state-layer-color: var(--cssnt-color-surface-inverse-on);
}

/* Primary */
.cssnt-table--primary {
  --_head-bg: var(--cssnt-color-primary-container);
  --_head-fg: var(--cssnt-color-primary-container-on);
  --_border: rgba(25, 118, 210, 0.18);
  --_state-layer-color: var(--cssnt-color-primary);
  --_selected-bg: var(--cssnt-color-primary-container);
  --_selected-fg: var(--cssnt-color-primary-container-on);
}

/* Secondary */
.cssnt-table--secondary {
  --_head-bg: var(--cssnt-color-secondary-container);
  --_head-fg: var(--cssnt-color-secondary-container-on);
  --_border: rgba(30, 90, 168, 0.18);
  --_state-layer-color: var(--cssnt-color-secondary);
  --_selected-bg: var(--cssnt-color-secondary-container);
  --_selected-fg: var(--cssnt-color-secondary-container-on);
}

/* Tertiary */
.cssnt-table--tertiary {
  --_head-bg: var(--cssnt-color-tertiary-container);
  --_head-fg: var(--cssnt-color-tertiary-container-on);
  --_border: rgba(0, 150, 136, 0.18);
  --_state-layer-color: var(--cssnt-color-tertiary);
  --_selected-bg: var(--cssnt-color-tertiary-container);
  --_selected-fg: var(--cssnt-color-tertiary-container-on);
}

/* Success */
.cssnt-table--success {
  --_head-bg: var(--cssnt-color-success-container);
  --_head-fg: var(--cssnt-color-success-container-on);
  --_border: rgba(46, 125, 50, 0.18);
  --_state-layer-color: var(--cssnt-color-success);
  --_selected-bg: var(--cssnt-color-success-container);
  --_selected-fg: var(--cssnt-color-success-container-on);
}

/* Warning */
.cssnt-table--warning {
  --_head-bg: var(--cssnt-color-warning-container);
  --_head-fg: var(--cssnt-color-warning-container-on);
  --_border: rgba(249, 168, 37, 0.22);
  --_state-layer-color: var(--cssnt-color-warning);
  --_selected-bg: var(--cssnt-color-warning-container);
  --_selected-fg: var(--cssnt-color-warning-container-on);
}

/* Danger */
.cssnt-table--danger {
  --_head-bg: var(--cssnt-color-danger-container);
  --_head-fg: var(--cssnt-color-danger-container-on);
  --_border: rgba(211, 47, 47, 0.18);
  --_state-layer-color: var(--cssnt-color-danger);
  --_selected-bg: var(--cssnt-color-danger-container);
  --_selected-fg: var(--cssnt-color-danger-container-on);
}

/* Info */
.cssnt-table--info {
  --_head-bg: var(--cssnt-color-info-container);
  --_head-fg: var(--cssnt-color-info-container-on);
  --_border: rgba(2, 136, 209, 0.18);
  --_state-layer-color: var(--cssnt-color-info);
  --_selected-bg: var(--cssnt-color-info-container);
  --_selected-fg: var(--cssnt-color-info-container-on);
}

/* =========================
   Tone (pure)
   ========================= */
/* white on white (limpio para docs) */
.cssnt-table--pure-white {
  --_bg: #ffffff;
  --_fg: #1c1c1c;
  --_border: rgba(0, 0, 0, 0.12);
  --_head-bg: #ffffff;
  --_head-fg: #1c1c1c;
  --_shadow: none; /* look “flat” */
  --_state-layer-color: #1c1c1c;
}

/* black on black */
.cssnt-table--pure-black {
  --_bg: #000000;
  --_fg: #ffffff;
  --_border: rgba(255, 255, 255, 0.18);
  --_head-bg: #000000;
  --_head-fg: #ffffff;
  --_shadow: none;
  --_state-layer-color: #ffffff;
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .cssnt-table__tr::after {
    transition: none;
  }
}
/* ============================================================
   Accordion (M3-ish) — smooth open/close (sin trompicones)
   ============================================================ */
.cssnt-accordion {
  /* ===== Internas ===== */
  --_bg: var(--cssnt-color-surface);
  --_fg: var(--cssnt-color-surface-on);
  --_outline: var(--cssnt-color-outline-variant);
  --_divider: var(--cssnt-color-outline-variant);
  --_radius: var(--cssnt-radius-lg);
  --_pad-x: var(--cssnt-space-4);
  --_pad-y: var(--cssnt-space-3);
  --_content-pad-y: var(--cssnt-space-3);
  --_gap: var(--cssnt-space-2);
  --_title-size: var(--cssnt-type-title-md-size);
  --_title-line: var(--cssnt-type-title-md-line);
  --_title-weight: var(--cssnt-type-title-md-weight);
  --_desc-size: var(--cssnt-type-body-sm-size);
  --_desc-line: var(--cssnt-type-body-sm-line);
  --_desc-weight: var(--cssnt-type-body-sm-weight);
  --_content-size: var(--cssnt-type-body-md-size);
  --_content-line: var(--cssnt-type-body-md-line);
  --_content-weight: var(--cssnt-type-body-md-weight);
  --_icon-size: 22px;
  --_state: var(--cssnt-color-primary);
  /* duraciones (se sienten más fluidas) */
  --_dur: var(--cssnt-motion-dur-med-3);
  --_dur-fast: var(--cssnt-motion-dur-med-2);
  --_ease: var(--cssnt-motion-ease-emphasized);
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_outline);
  border-radius: var(--_radius);
  overflow: clip;
}

/* ============================================================
   Variants (setean tokens)
   ============================================================ */
.cssnt-accordion--neutral {
  --_bg: var(--cssnt-color-surface);
  --_fg: var(--cssnt-color-surface-on);
  --_outline: var(--cssnt-color-outline-variant);
  --_divider: var(--cssnt-color-outline-variant);
  --_state: var(--cssnt-color-primary);
}

.cssnt-accordion--neutral-inverse {
  --_bg: var(--cssnt-color-surface-inverse);
  --_fg: var(--cssnt-color-surface-inverse-on);
  --_outline: rgb(255 255 255 / 0.18);
  --_divider: rgb(255 255 255 / 0.14);
  --_state: var(--cssnt-color-primary);
}

.cssnt-accordion--primary {
  --_state: var(--cssnt-color-primary);
}

.cssnt-accordion--secondary {
  --_state: var(--cssnt-color-secondary);
}

.cssnt-accordion--tertiary {
  --_state: var(--cssnt-color-tertiary);
}

.cssnt-accordion--success {
  --_state: var(--cssnt-color-success);
}

.cssnt-accordion--warning {
  --_state: var(--cssnt-color-warning);
}

.cssnt-accordion--danger {
  --_state: var(--cssnt-color-danger);
}

.cssnt-accordion--info {
  --_state: var(--cssnt-color-info);
}

/* ============================================================
   Size
   ============================================================ */
.cssnt-accordion.is-sm {
  --_pad-x: var(--cssnt-space-3);
  --_pad-y: var(--cssnt-space-2);
  --_content-pad-y: var(--cssnt-space-2);
  --_icon-size: 20px;
  --_title-size: var(--cssnt-type-title-sm-size);
  --_title-line: var(--cssnt-type-title-sm-line);
  --_title-weight: var(--cssnt-type-title-sm-weight);
}

.cssnt-accordion.is-md {
  /* defaults */
}

.cssnt-accordion.is-lg {
  --_pad-x: var(--cssnt-space-5);
  --_pad-y: var(--cssnt-space-4);
  --_content-pad-y: var(--cssnt-space-4);
  --_icon-size: 24px;
  --_title-size: var(--cssnt-type-title-lg-size);
  --_title-line: var(--cssnt-type-title-lg-line);
  --_title-weight: var(--cssnt-type-title-lg-weight);
}

/* ============================================================
   Item / Trigger
   ============================================================ */
.cssnt-accordion__item {
  border-top: 1px solid var(--_divider);
}

.cssnt-accordion__item:first-child {
  border-top: 0;
}

.cssnt-accordion__header {
  margin: 0;
}

.cssnt-accordion__trigger {
  appearance: none;
  border: 0;
  width: 100%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_gap);
  padding: var(--_pad-y) var(--_pad-x);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* state-layer */
.cssnt-accordion__trigger::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--_radius) - 8px);
  background: var(--_state);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--_dur-fast) var(--_ease);
}

.cssnt-accordion__trigger:hover::before {
  opacity: var(--cssnt-state-hover-layer);
}

.cssnt-accordion__trigger:active::before {
  opacity: var(--cssnt-state-pressed-layer);
}

.cssnt-accordion__trigger:focus-visible::before {
  opacity: var(--cssnt-state-focus-layer);
}

.cssnt-accordion__trigger:focus-visible {
  outline: 2px solid var(--_state);
  outline-offset: 2px;
}

/* ============================================================
   Layout blocks
   ============================================================ */
.cssnt-accordion__left {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  min-width: 0;
}

.cssnt-accordion__texts {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cssnt-accordion__right {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  flex: 0 0 auto;
}

/* ============================================================
   Icons alignment (Material Symbols fix)
   ============================================================ */
.cssnt-accordion__leadingIcon,
.cssnt-accordion__chevron {
  flex: 0 0 auto;
  width: var(--_icon-size);
  height: var(--_icon-size);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cssnt-accordion__leadingIcon > *,
.cssnt-accordion__chevron > * {
  display: block;
  line-height: 1;
}

.cssnt-accordion__chevron {
  transform: rotate(0deg);
  transition: transform var(--_dur) var(--_ease);
}

/* ============================================================
   Typography
   ============================================================ */
.cssnt-accordion__title {
  margin: 0;
  font-family: var(--cssnt-type-title-md-family);
  font-size: var(--_title-size);
  line-height: var(--_title-line);
  font-weight: var(--_title-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cssnt-accordion__description {
  margin: 0;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--_desc-size);
  line-height: var(--_desc-line);
  font-weight: var(--_desc-weight);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Content (smooth): grid 0fr/1fr + padding/opacity en wrapper
   - Evita "trompicones" de max-height (saltos)
   ============================================================ */
.cssnt-accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--_dur) var(--_ease);
}

.cssnt-accordion__contentInner {
  min-height: 0;
  overflow: hidden;
  /* padding animable, pero separado del contenido real */
  padding: 0 var(--_pad-x);
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--_content-size);
  line-height: var(--_content-line);
  font-weight: var(--_content-weight);
}

.cssnt-accordion__contentBody {
  overflow: hidden;
  padding: 0 0 0 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--_dur-fast) var(--_ease), transform var(--_dur-fast) var(--_ease), padding var(--_dur-fast) var(--_ease);
  will-change: opacity, transform, padding;
}

/* elimina márgenes típicos que "se asoman" */
.cssnt-accordion__contentBody > :first-child {
  margin-top: 0;
}

.cssnt-accordion__contentBody > :last-child {
  margin-bottom: 0;
}

.cssnt-accordion__item[data-state=open] .cssnt-accordion__content {
  grid-template-rows: 1fr;
}

.cssnt-accordion__item[data-state=open] .cssnt-accordion__contentBody {
  padding: var(--_content-pad-y) 0 var(--_content-pad-y) 0;
  opacity: 1;
  transform: translateY(0);
}

.cssnt-accordion__item[data-state=open] .cssnt-accordion__chevron {
  transform: rotate(180deg);
}

/* ============================================================
   Disabled
   ============================================================ */
.cssnt-accordion__item.is-disabled .cssnt-accordion__trigger {
  cursor: not-allowed;
  opacity: var(--cssnt-state-disabled-content);
}

.cssnt-accordion__item.is-disabled .cssnt-accordion__trigger::before {
  opacity: 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cssnt-accordion__trigger::before,
  .cssnt-accordion__chevron,
  .cssnt-accordion__content,
  .cssnt-accordion__contentBody {
    transition: none !important;
  }
}
/* ============================================================
 * CONTENEDOR BASE (ROOT) – OUTLINED
 * ============================================================ */
.cssnt-input-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding-inline: var(--cssnt-space-3);
  border-radius: var(--cssnt-radius-sm);
  border: 1px solid var(--cssnt-color-outline-variant);
  background-color: var(--cssnt-color-surface);
  color: var(--cssnt-color-black-text);
  box-shadow: var(--cssnt-elev-0-shadow);
  transition: border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Hover del contenedor */
.cssnt-input-root:hover {
  border-color: var(--cssnt-color-outline);
}

/* Focus desde cualquier hijo (input) */
.cssnt-input-root:focus-within {
  border-color: var(--cssnt-color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cssnt-color-primary) 40%, transparent);
}

/* ============================================================
 * VARIANTE FILLED
 * ============================================================ */
.cssnt-input-root.cssnt-input--filled {
  border-radius: 0;
  border-width: 0 0 2px 0;
  background-color: var(--cssnt-color-surface-variant);
}

.cssnt-input-root.cssnt-input--filled:hover {
  background-color: color-mix(in srgb, var(--cssnt-color-surface-variant) 90%, #000 10%);
}

.cssnt-input-root.cssnt-input--filled:focus-within {
  border-color: var(--cssnt-color-primary);
}

/* ============================================================
 * INPUT NATIVO
 * ============================================================ */
.cssnt-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding-block: var(--cssnt-space-2);
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-on);
}

/* Placeholder transparente para no competir con label flotante */
.cssnt-input::placeholder {
  color: var(--cssnt-color-surface-variant-on);
}

/* Estado deshabilitado */
.cssnt-input:disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

/* Estado readonly */
.cssnt-input:read-only {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

/* Ajuste por iconos opcionales dentro del contenedor */
.cssnt-input-root.has-icon-start .cssnt-input {
  padding-left: calc(var(--cssnt-space-3) + 24px);
}

/* ============================================================
 * LABEL FLOTANTE
 * ============================================================ */
.cssnt-input-label {
  position: absolute;
  left: var(--cssnt-space-3);
  /* Centrado vertical por defecto (cuando el input está vacío) */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  padding-inline: 4px;
  background-color: var(--cssnt-color-surface);
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-variant-on);
  transition: top var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), font-size var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), line-height var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Variante filled: el fondo del label debe seguir al container */
.cssnt-input-root.cssnt-input--filled .cssnt-input-label {
  background-color: var(--cssnt-color-surface-variant);
}

/* Label flotante cuando hay foco o valor (placeholder hack) */
.cssnt-input-label.label-elevated {
  top: 0;
  transform: translateY(-50%);
  font-family: var(--cssnt-type-label-sm-family);
  font-size: var(--cssnt-type-label-sm-size);
  line-height: var(--cssnt-type-label-sm-line);
  color: var(--cssnt-color-primary);
}

/* Requerido (asterisco) */
.cssnt-input-label.required::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * TEXTOS INFERIORES: support, error, success
 * ============================================================ */
.cssnt-input-extra-text-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  max-height: 0;
  position: relative;
  bottom: var(--cssnt-space-4);
}

.cssnt-input-support {
  margin-top: 0;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-surface-variant-on);
  padding-inline: var(--cssnt-space-1);
}

.cssnt-input-error {
  margin-top: 0;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-danger);
  padding-inline: var(--cssnt-space-1);
}

.cssnt-input-success {
  margin-top: 0;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-success);
  padding-inline: var(--cssnt-space-1);
}

/* ============================================================
 * SWITCH (M3) — soporte: label izquierda/derecha + icon en thumb
 * (tokens ya definidos en tu archivo de variables)
 * ============================================================ */
.cssnt-switch--container {
  display: grid;
  grid: "0px";
}

.cssnt-switch {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cssnt-space-3);
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  color: var(--cssnt-color-surface-on);
}

/* label a la izquierda / derecha */
.cssnt-switch.label-left {
  flex-direction: row-reverse;
}

.cssnt-switch.label-right {
  flex-direction: row;
}

/* input accesible, visualmente oculto */
.cssnt-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Track */
.cssnt-switch__control {
  position: relative;
  width: var(--cssnt-switch-track-w);
  height: var(--cssnt-switch-track-h);
  border-radius: var(--cssnt-radius-full);
  box-sizing: border-box;
  background: var(--cssnt-switch-track-off);
  border: var(--cssnt-switch-outline) solid var(--cssnt-switch-outline-off);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--cssnt-switch-pad);
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
  cursor: pointer;
}

/* Thumb (handle) */
.cssnt-switch__thumb {
  position: absolute;
  left: var(--cssnt-switch-pad);
  top: 50%;
  transform: translateY(-50%);
  width: var(--cssnt-switch-thumb-off);
  height: var(--cssnt-switch-thumb-off);
  border-radius: var(--cssnt-radius-full);
  background: var(--cssnt-switch-thumb-off-color);
  box-shadow: var(--cssnt-elev-1-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), height var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), left var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Icon dentro del thumb: oculto por defecto, visible SOLO en ON */
.cssnt-switch__thumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

.cssnt-switch__input:checked + .cssnt-switch__control .cssnt-switch__thumb-icon {
  opacity: 1;
  transform: scale(1);
}

/* Label */
.cssnt-switch__label {
  user-select: none;
}

/* Required */
.cssnt-switch.required .cssnt-switch__label::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * CHECKED
 * ============================================================ */
.cssnt-switch__input:checked + .cssnt-switch__control {
  background: var(--cssnt-switch-track-on);
  border-color: transparent;
  --cssnt-switch-state-color: var(--cssnt-switch-track-on);
}

.cssnt-switch__input:checked + .cssnt-switch__control .cssnt-switch__thumb {
  width: var(--cssnt-switch-thumb-on);
  height: var(--cssnt-switch-thumb-on);
  background: var(--cssnt-switch-thumb-on-color);
  left: calc(var(--cssnt-switch-track-w) - var(--cssnt-switch-thumb-on) - var(--cssnt-switch-pad));
}

/* Color del icon según estado */
.cssnt-switch__control .cssnt-switch__thumb-icon {
  color: var(--cssnt-switch-thumb-on-color);
}

.cssnt-switch__input:not(:checked) + .cssnt-switch__control .cssnt-switch__thumb-icon {
  color: var(--cssnt-switch-thumb-off-color);
}

/* ============================================================
 * INTERACTION STATES
 * ============================================================ */
.cssnt-switch__input:focus-visible + .cssnt-switch__control {
  box-shadow: 0 0 0 var(--cssnt-switch-focus-ring-size) color-mix(in srgb, var(--cssnt-switch-state-color) var(--cssnt-switch-focus-ring-opacity), transparent);
}

@media (hover: hover) {
  .cssnt-switch__input:not(:disabled) + .cssnt-switch__control:hover {
    box-shadow: 0 0 0 var(--cssnt-switch-hover-ring-size) color-mix(in srgb, var(--cssnt-switch-state-color) var(--cssnt-switch-hover-ring-opacity), transparent);
  }
}
.cssnt-switch__input:not(:disabled) + .cssnt-switch__control:active {
  box-shadow: 0 0 0 var(--cssnt-switch-pressed-ring-size) color-mix(in srgb, var(--cssnt-switch-state-color) var(--cssnt-switch-pressed-ring-opacity), transparent);
}

/* ============================================================
 * DISABLED
 * ============================================================ */
.cssnt-switch__input:disabled + .cssnt-switch__control {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

.cssnt-switch__input:disabled + .cssnt-switch__control .cssnt-switch__thumb {
  box-shadow: none;
}

/* ============================================================
 * SIZES (setean tokens)
 * ============================================================ */
.cssnt-switch--sm {
  --cssnt-switch-track-w: var(--cssnt-switch-sm-track-w);
  --cssnt-switch-track-h: var(--cssnt-switch-sm-track-h);
  --cssnt-switch-outline: var(--cssnt-switch-sm-outline);
  --cssnt-switch-pad: var(--cssnt-switch-sm-pad);
  --cssnt-switch-thumb-off: var(--cssnt-switch-sm-thumb-off);
  --cssnt-switch-thumb-on: var(--cssnt-switch-sm-thumb-on);
}

.cssnt-switch--md {
  --cssnt-switch-track-w: var(--cssnt-switch-md-track-w);
  --cssnt-switch-track-h: var(--cssnt-switch-md-track-h);
  --cssnt-switch-outline: var(--cssnt-switch-md-outline);
  --cssnt-switch-pad: var(--cssnt-switch-md-pad);
  --cssnt-switch-thumb-off: var(--cssnt-switch-md-thumb-off);
  --cssnt-switch-thumb-on: var(--cssnt-switch-md-thumb-on);
}

.cssnt-switch--lg {
  --cssnt-switch-track-w: var(--cssnt-switch-lg-track-w);
  --cssnt-switch-track-h: var(--cssnt-switch-lg-track-h);
  --cssnt-switch-outline: var(--cssnt-switch-lg-outline);
  --cssnt-switch-pad: var(--cssnt-switch-lg-pad);
  --cssnt-switch-thumb-off: var(--cssnt-switch-lg-thumb-off);
  --cssnt-switch-thumb-on: var(--cssnt-switch-lg-thumb-on);
}

/* ============================================================
 * COLORS (selected) — setean tokens
 * ============================================================ */
.cssnt-switch--primary {
  --cssnt-switch-track-on: var(--cssnt-color-primary);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-primary-on);
}

.cssnt-switch--secondary {
  --cssnt-switch-track-on: var(--cssnt-color-secondary);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-secondary-on);
}

.cssnt-switch--ternary {
  --cssnt-switch-track-on: var(--cssnt-color-tertiary);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-tertiary-on);
}

.cssnt-switch--success {
  --cssnt-switch-track-on: var(--cssnt-color-success);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-success-on);
}

.cssnt-switch--warning {
  --cssnt-switch-track-on: var(--cssnt-color-warning);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-warning-on);
}

.cssnt-switch--danger {
  --cssnt-switch-track-on: var(--cssnt-color-danger);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-danger-on);
}

.cssnt-switch--info {
  --cssnt-switch-track-on: var(--cssnt-color-info);
  --cssnt-switch-thumb-on-color: var(--cssnt-color-info-on);
}

/* ============================================================
 * HELPER TEXT
 * ============================================================ */
.cssnt-switch__helper {
  margin: 0;
  padding-inline: var(--cssnt-space-1);
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-surface-variant-on);
}

.cssnt-switch__helper.success {
  color: var(--cssnt-color-success);
}

.cssnt-switch__helper.error {
  color: var(--cssnt-color-danger);
}

/* ============================================================
 * radio.scss (ESTILOS — usa tokens ya definidos)
 *
 * Markup esperado:
 * <label class="cssnt-radio cssnt-radio--md cssnt-radio--primary label-right">
 *   <input class="cssnt-radio__input" type="radio" name="g" />
 *   <span class="cssnt-radio__control">
 *     <span class="cssnt-radio__dot"></span>
 *   </span>
 *   <span class="cssnt-radio__label">Opción</span>
 * </label>
 * <p class="cssnt-radio__helper">Helper</p>
 * ============================================================ */
.cssnt-radio__container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cssnt-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-3);
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  color: var(--cssnt-color-surface-on);
}

/* label izquierda / derecha */
.cssnt-radio.label-left {
  flex-direction: row-reverse;
}

.cssnt-radio.label-right {
  flex-direction: row;
}

/* input accesible, visualmente oculto */
.cssnt-radio__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Control (círculo) */
.cssnt-radio__control {
  position: relative;
  width: var(--cssnt-radio-control-size);
  height: var(--cssnt-radio-control-size);
  border-radius: var(--cssnt-radius-full);
  box-sizing: border-box;
  border: var(--cssnt-radio-stroke) solid var(--cssnt-radio-off-border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* State layer (halo) */
.cssnt-radio__control::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cssnt-radio-state-layer-size);
  height: var(--cssnt-radio-state-layer-size);
  transform: translate(-50%, -50%);
  border-radius: var(--cssnt-radius-full);
  background: transparent;
  pointer-events: none;
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Dot */
.cssnt-radio__dot {
  width: var(--cssnt-radio-dot-size);
  height: var(--cssnt-radio-dot-size);
  border-radius: var(--cssnt-radius-full);
  background: var(--cssnt-radio-on);
  transform: scale(0);
  transition: transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Label */
.cssnt-radio__label {
  user-select: none;
}

/* Required (si añades class "required" al root) */
.cssnt-radio.required .cssnt-radio__label::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * CHECKED
 * ============================================================ */
.cssnt-radio__input:checked + .cssnt-radio__control {
  border-color: var(--cssnt-radio-on);
  --cssnt-radio-state-color: var(--cssnt-radio-on);
}

.cssnt-radio__input:checked + .cssnt-radio__control .cssnt-radio__dot {
  transform: scale(1);
}

/* ============================================================
 * INTERACTION STATES (hover/focus/pressed)
 * ============================================================ */
/* Hover */
@media (hover: hover) {
  .cssnt-radio__input:not(:disabled) + .cssnt-radio__control:hover::before {
    background: color-mix(in srgb, var(--cssnt-radio-state-color) var(--cssnt-radio-hover-opacity), transparent);
  }
}
/* Focus */
.cssnt-radio__input:focus-visible + .cssnt-radio__control {
  box-shadow: 0 0 0 var(--cssnt-radio-focus-ring-size) color-mix(in srgb, var(--cssnt-radio-state-color) var(--cssnt-radio-focus-opacity), transparent);
}

.cssnt-radio__input:focus-visible + .cssnt-radio__control::before {
  background: color-mix(in srgb, var(--cssnt-radio-state-color) var(--cssnt-radio-focus-opacity), transparent);
}

/* Pressed */
.cssnt-radio__input:not(:disabled) + .cssnt-radio__control:active::before {
  background: color-mix(in srgb, var(--cssnt-radio-state-color) var(--cssnt-radio-pressed-opacity), transparent);
}

/* ============================================================
 * DISABLED
 * ============================================================ */
.cssnt-radio__input:disabled + .cssnt-radio__control {
  opacity: var(--cssnt-radio-disabled-opacity);
  border-color: var(--cssnt-radio-disabled-border);
  cursor: not-allowed;
}

.cssnt-radio__input:disabled + .cssnt-radio__control::before {
  background: transparent;
}

/* ============================================================
 * SIZES
 * ============================================================ */
.cssnt-radio--sm {
  --cssnt-radio-control-size: var(--cssnt-radio-sm-control-size);
  --cssnt-radio-dot-size: var(--cssnt-radio-sm-dot-size);
  --cssnt-radio-stroke: var(--cssnt-radio-sm-stroke);
  --cssnt-radio-state-layer-size: var(--cssnt-radio-sm-state-layer-size);
}

.cssnt-radio--md {
  --cssnt-radio-control-size: var(--cssnt-radio-md-control-size);
  --cssnt-radio-dot-size: var(--cssnt-radio-md-dot-size);
  --cssnt-radio-stroke: var(--cssnt-radio-md-stroke);
  --cssnt-radio-state-layer-size: var(--cssnt-radio-md-state-layer-size);
}

.cssnt-radio--lg {
  --cssnt-radio-control-size: var(--cssnt-radio-lg-control-size);
  --cssnt-radio-dot-size: var(--cssnt-radio-lg-dot-size);
  --cssnt-radio-stroke: var(--cssnt-radio-lg-stroke);
  --cssnt-radio-state-layer-size: var(--cssnt-radio-lg-state-layer-size);
}

/* ============================================================
 * VARIANTS (setean --cssnt-radio-on)
 * ============================================================ */
.cssnt-radio--primary {
  --cssnt-radio-on: var(--cssnt-color-primary);
}

.cssnt-radio--secondary {
  --cssnt-radio-on: var(--cssnt-color-secondary);
}

.cssnt-radio--tertiary {
  --cssnt-radio-on: var(--cssnt-color-tertiary);
}

.cssnt-radio--success {
  --cssnt-radio-on: var(--cssnt-color-success);
}

.cssnt-radio--warning {
  --cssnt-radio-on: var(--cssnt-color-warning);
}

.cssnt-radio--danger {
  --cssnt-radio-on: var(--cssnt-color-danger);
}

.cssnt-radio--info {
  --cssnt-radio-on: var(--cssnt-color-info);
}

/* ============================================================
 * HELPER
 * ============================================================ */
.cssnt-radio__helper {
  margin: 0;
  padding-inline: var(--cssnt-space-1);
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-surface-variant-on);
}

.cssnt-radio__helper.success {
  color: var(--cssnt-color-success);
}

.cssnt-radio__helper.error {
  color: var(--cssnt-color-danger);
}

/* ============================================================
   FAB / FIXED POSITION UTILITIES (compatibles con .cssnt-button)
   Uso:
   class="cssnt-button cssnt-button--is-fixed cssnt-button--fixed-br"
   ============================================================ */
/* Activa modo fixed */
.cssnt-button--is-fixed {
  position: fixed;
  z-index: var(--cssnt-z-fab, 1000);
  /* separaciones configurables */
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  /* offsets por defecto */
  --_fixed-x: var(--cssnt-fab-offset-x, var(--cssnt-space-5));
  --_fixed-y: var(--cssnt-fab-offset-y, var(--cssnt-space-5));
}

/* Posiciones */
.cssnt-button--fixed-top-left {
  top: var(--_fixed-y);
  left: var(--_fixed-x);
}

.cssnt-button--fixed-top-right {
  top: var(--_fixed-y);
  right: var(--_fixed-x);
}

.cssnt-button--fixed-bottom-left {
  bottom: var(--_fixed-y);
  left: var(--_fixed-x);
}

.cssnt-button--fixed-bottom-right {
  bottom: var(--_fixed-y);
  right: var(--_fixed-x);
}

/* ============================================================
 * CHECKBOX (M3) — FIX: icon dentro del box (no se sale)
 * ============================================================ */
.cssnt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-3);
  font-family: var(--cssnt-type-body-md-family);
  font-size: var(--cssnt-type-body-md-size);
  line-height: var(--cssnt-type-body-md-line);
  color: var(--cssnt-color-surface-on);
}

/* label a la izquierda / derecha */
.cssnt-checkbox.label-left {
  flex-direction: row-reverse;
}

.cssnt-checkbox.label-right {
  flex-direction: row;
}

/* input accesible, visualmente oculto */
.cssnt-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Control (touch target + state layer) */
.cssnt-checkbox__control {
  position: relative;
  width: var(--cssnt-checkbox-touch);
  height: var(--cssnt-checkbox-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cssnt-radius-full);
  cursor: pointer;
}

/* Caja visible */
.cssnt-checkbox__mark {
  width: var(--cssnt-checkbox-box);
  height: var(--cssnt-checkbox-box);
  border-radius: var(--cssnt-checkbox-radius);
  box-sizing: border-box;
  background: var(--cssnt-checkbox-off-bg);
  border: var(--cssnt-checkbox-stroke) solid var(--cssnt-checkbox-off-border);
  position: relative;
  /* clave: nada se sale */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* Icon wrapper (tu <Icon /> adentro) */
.cssnt-checkbox__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* que siempre quepa (ajústalo si tu Icon es muy grande) */
  width: 100%;
  height: 100%;
  line-height: 0;
  transform: scale(0.9);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
}

/* Colorea cualquier svg/ícono heredando color */
.cssnt-checkbox__icon,
.cssnt-checkbox__icon * {
  color: var(--cssnt-checkbox-on-check);
  fill: currentColor;
}

/* Oculto por defecto (solo visible en checked / indeterminate) */
.cssnt-checkbox__icon {
  opacity: 0;
}

/* Si NO vas a usar pseudo-check, apágalo para evitar doble render */
.cssnt-checkbox__mark::after {
  content: none;
}

/* Label */
.cssnt-checkbox__label {
  user-select: none;
}

/* Required */
.cssnt-checkbox.required .cssnt-checkbox__label::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * CHECKED / INDETERMINATE
 * ============================================================ */
.cssnt-checkbox__input:checked + .cssnt-checkbox__control .cssnt-checkbox__mark,
.cssnt-checkbox.indeterminate .cssnt-checkbox__mark {
  background: var(--cssnt-checkbox-on-bg);
  border-color: transparent;
}

.cssnt-checkbox__input:checked + .cssnt-checkbox__control .cssnt-checkbox__icon,
.cssnt-checkbox.indeterminate .cssnt-checkbox__icon {
  opacity: 1;
  transform: scale(1);
}

/* State color (para hover/focus/pressed) */
.cssnt-checkbox__input:checked + .cssnt-checkbox__control,
.cssnt-checkbox.indeterminate .cssnt-checkbox__control {
  --cssnt-checkbox-state-color: var(--cssnt-checkbox-on-bg);
}

/* ============================================================
 * INTERACTION STATES (M3-like)
 * ============================================================ */
.cssnt-checkbox__input:focus-visible + .cssnt-checkbox__control {
  box-shadow: 0 0 0 var(--cssnt-checkbox-focus-ring) color-mix(in srgb, var(--cssnt-checkbox-state-color) var(--cssnt-checkbox-focus-opacity), transparent);
}

@media (hover: hover) {
  .cssnt-checkbox__input:not(:disabled) + .cssnt-checkbox__control:hover {
    box-shadow: 0 0 0 calc(var(--cssnt-checkbox-touch) / 3) color-mix(in srgb, var(--cssnt-checkbox-state-color) var(--cssnt-checkbox-hover-opacity), transparent);
  }
}
.cssnt-checkbox__input:not(:disabled) + .cssnt-checkbox__control:active {
  box-shadow: 0 0 0 calc(var(--cssnt-checkbox-touch) / 3) color-mix(in srgb, var(--cssnt-checkbox-state-color) var(--cssnt-checkbox-pressed-opacity), transparent);
}

.cssnt-checkbox__input:not(:disabled) + .cssnt-checkbox__control:active .cssnt-checkbox__mark {
  transform: scale(0.98);
}

/* ============================================================
 * DISABLED
 * ============================================================ */
.cssnt-checkbox__input:disabled + .cssnt-checkbox__control {
  opacity: var(--cssnt-checkbox-disabled-opacity);
  cursor: not-allowed;
}

.cssnt-checkbox__input:disabled + .cssnt-checkbox__control .cssnt-checkbox__mark {
  border-color: var(--cssnt-checkbox-disabled-border);
}

/* ============================================================
 * SIZES (setean tokens)
 * ============================================================ */
.cssnt-checkbox--small {
  --cssnt-checkbox-touch: var(--cssnt-checkbox-sm-touch);
  --cssnt-checkbox-box: var(--cssnt-checkbox-sm-box);
  --cssnt-checkbox-radius: var(--cssnt-checkbox-sm-radius);
  --cssnt-checkbox-stroke: var(--cssnt-checkbox-sm-stroke);
}

.cssnt-checkbox--medium {
  --cssnt-checkbox-touch: var(--cssnt-checkbox-md-touch);
  --cssnt-checkbox-box: var(--cssnt-checkbox-md-box);
  --cssnt-checkbox-radius: var(--cssnt-checkbox-md-radius);
  --cssnt-checkbox-stroke: var(--cssnt-checkbox-md-stroke);
}

.cssnt-checkbox--large {
  --cssnt-checkbox-touch: var(--cssnt-checkbox-lg-touch);
  --cssnt-checkbox-box: var(--cssnt-checkbox-lg-box);
  --cssnt-checkbox-radius: var(--cssnt-checkbox-lg-radius);
  --cssnt-checkbox-stroke: var(--cssnt-checkbox-lg-stroke);
}

/* ============================================================
 * COLORS (selected) — setean tokens
 * ============================================================ */
.cssnt-checkbox--primary {
  --cssnt-checkbox-on-bg: var(--cssnt-color-primary);
  --cssnt-checkbox-on-check: var(--cssnt-color-primary-on);
}

.cssnt-checkbox--secondary {
  --cssnt-checkbox-on-bg: var(--cssnt-color-secondary);
  --cssnt-checkbox-on-check: var(--cssnt-color-secondary-on);
}

.cssnt-checkbox--tertiary {
  --cssnt-checkbox-on-bg: var(--cssnt-color-tertiary);
  --cssnt-checkbox-on-check: var(--cssnt-color-tertiary-on);
}

.cssnt-checkbox--success {
  --cssnt-checkbox-on-bg: var(--cssnt-color-success);
  --cssnt-checkbox-on-check: var(--cssnt-color-success-on);
}

.cssnt-checkbox--warning {
  --cssnt-checkbox-on-bg: var(--cssnt-color-warning);
  --cssnt-checkbox-on-check: var(--cssnt-color-warning-on);
}

.cssnt-checkbox--danger {
  --cssnt-checkbox-on-bg: var(--cssnt-color-danger);
  --cssnt-checkbox-on-check: var(--cssnt-color-danger-on);
}

.cssnt-checkbox--info {
  --cssnt-checkbox-on-bg: var(--cssnt-color-info);
  --cssnt-checkbox-on-check: var(--cssnt-color-info-on);
}

/* ============================================================
 * HELPER TEXT
 * ============================================================ */
.cssnt-checkbox__helper {
  margin: 0;
  padding-inline: var(--cssnt-space-1);
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-surface-variant-on);
}

.cssnt-checkbox__helper.success {
  color: var(--cssnt-color-success);
}

.cssnt-checkbox__helper.error {
  color: var(--cssnt-color-danger);
}

.cssnt-slider {
  --_track-h: var(--cssnt-slider-md-track-h);
  --_track-r: var(--cssnt-slider-md-track-r);
  --_thumb-w: var(--cssnt-slider-thumb-w);
  --_thumb-h: var(--cssnt-slider-md-thumb-h);
  --_thumb-r: var(--cssnt-slider-thumb-r);
  --_active: var(--cssnt-slider-active);
  --_inactive: var(--cssnt-slider-inactive);
  --_ring-hover: var(--cssnt-slider-hover-ring-size);
  --_ring-pressed: var(--cssnt-slider-pressed-ring-size);
  --_ring-focus: var(--cssnt-slider-focus-ring-size);
  --_gap: var(--cssnt-space-2);
  /* label/icon siempre “negro” (on background) */
  --_label-color: var(--cssnt-color-background-on);
  /* dot final */
  --_end-dot-size: 4px;
  --_end-dot-inset: 10px;
  --_end-dot-color: color-mix(in srgb, var(--cssnt-color-surface-on) 55%, transparent);
  /* outlined handle */
  --_handle-w-outlined: 12px;
  --_handle-border: 2px;
  /* IMPORTANTE: evita el “parche blanco” */
  --_handle-fill: var(--_active);
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: var(--_gap);
  min-height: max(44px, var(--_thumb-h));
  /* Dot final (como en la imagen) */
}
.cssnt-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--_end-dot-inset);
  width: var(--_end-dot-size);
  height: var(--_end-dot-size);
  border-radius: 999px;
  background: var(--_end-dot-color);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ============================================================
 * DISABLED (gris real en barras)
 * Soporta:
 *  - class="cssnt-slider cssnt-slider--disabled"
 *  - o <input disabled> dentro del slider
 * ============================================================ */
.cssnt-slider:has(.cssnt-slider__input:disabled),
.cssnt-slider--disabled {
  /* neutraliza colores del variant (track + fill + thumb) */
  --_active: color-mix(in srgb, var(--cssnt-color-surface-on) 5%, transparent);
  --_inactive: color-mix(in srgb, var(--cssnt-color-surface-on) 6%, transparent);
  --_handle-fill: var(--_inactive);
  --_end-dot-color: var(--_active);
  /* sin halos */
  --_ring-hover: 0px;
  --_ring-pressed: 0px;
  --_ring-focus: 0px;
  cursor: not-allowed;
}

.cssnt-slider--disabled .cssnt-slider__input {
  cursor: not-allowed;
  pointer-events: none; /* bloquea interacción si no usas disabled */
}

.cssnt-slider--disabled .cssnt-slider__label,
.cssnt-slider--disabled::after {
  opacity: var(--cssnt-state-disabled-content);
}

/* LABEL */
.cssnt-slider__label {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-1);
  flex: 0 0 auto;
  color: var(--_label-color);
  user-select: none;
}

.cssnt-slider__labelIcon,
.cssnt-slider__labelText {
  color: currentColor;
}

/* INPUT */
.cssnt-slider__input {
  width: 100%;
  height: var(--_track-h);
  margin: 0;
  background: transparent;
  cursor: pointer;
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
}
.cssnt-slider__input:focus-visible {
  outline: none;
}

/* SIZES */
.cssnt-slider--sm {
  --_track-h: var(--cssnt-slider-sm-track-h);
  --_track-r: var(--cssnt-slider-sm-track-r);
  --_thumb-h: var(--cssnt-slider-sm-thumb-h);
  --_handle-w-outlined: 10px;
}

.cssnt-slider--md {
  --_track-h: var(--cssnt-slider-md-track-h);
  --_track-r: var(--cssnt-slider-md-track-r);
  --_thumb-h: var(--cssnt-slider-md-thumb-h);
  --_handle-w-outlined: 12px;
}

.cssnt-slider--lg {
  --_track-h: var(--cssnt-slider-lg-track-h);
  --_track-r: var(--cssnt-slider-lg-track-r);
  --_thumb-h: var(--cssnt-slider-lg-thumb-h);
  --_handle-w-outlined: 14px;
}

/* VARIANTS */
.cssnt-slider--primary {
  --_active: var(--cssnt-color-primary);
}

.cssnt-slider--secondary {
  --_active: var(--cssnt-color-secondary);
}

.cssnt-slider--tertiary {
  --_active: var(--cssnt-color-tertiary);
}

.cssnt-slider--success {
  --_active: var(--cssnt-color-success);
}

.cssnt-slider--warning {
  --_active: var(--cssnt-color-warning);
}

.cssnt-slider--danger {
  --_active: var(--cssnt-color-danger);
}

.cssnt-slider--info {
  --_active: var(--cssnt-color-info);
}

/* WEBKIT */
.cssnt-slider__input::-webkit-slider-runnable-track {
  height: var(--_track-h);
  border-radius: var(--_track-r);
  background: var(--_inactive);
}

.cssnt-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--_thumb-w);
  height: var(--_thumb-h);
  border-radius: var(--_thumb-r);
  background: var(--_active);
  box-shadow: -100vmax 0 0 100vmax var(--_active);
  margin-top: calc((var(--_track-h) - var(--_thumb-h)) / 2);
}

/* Hover */
.cssnt-slider__input:hover::-webkit-slider-thumb {
  box-shadow: -100vmax 0 0 100vmax var(--_active), 0 0 0 var(--_ring-hover) color-mix(in srgb, var(--_active) 12%, transparent);
}

/* Focus / Pressed: outlined handle SIN “relleno blanco” */
.cssnt-slider__input:focus-visible::-webkit-slider-thumb,
.cssnt-slider__input:active::-webkit-slider-thumb {
  width: var(--_handle-w-outlined);
  background: var(--_handle-fill);
  box-shadow: -100vmax 0 0 100vmax var(--_active), inset 0 0 0 var(--_handle-border) var(--_active);
}

/* rings separados (para que focus/pressed cambien solo el halo) */
.cssnt-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: -100vmax 0 0 100vmax var(--_active), inset 0 0 0 var(--_handle-border) var(--_active), 0 0 0 var(--_ring-focus) color-mix(in srgb, var(--_active) 45%, transparent);
}

.cssnt-slider__input:active::-webkit-slider-thumb {
  box-shadow: -100vmax 0 0 100vmax var(--_active), inset 0 0 0 var(--_handle-border) var(--_active), 0 0 0 var(--_ring-pressed) color-mix(in srgb, var(--_active) 16%, transparent);
}

/* FIREFOX */
.cssnt-slider__input::-moz-range-track {
  height: var(--_track-h);
  border-radius: var(--_track-r);
  background: var(--_inactive);
}

.cssnt-slider__input::-moz-range-progress {
  height: var(--_track-h);
  border-radius: var(--_track-r);
  background: var(--_active);
}

.cssnt-slider__input::-moz-range-thumb {
  width: var(--_thumb-w);
  height: var(--_thumb-h);
  border-radius: var(--_thumb-r);
  background: var(--_active);
  border: none;
}

.cssnt-slider__input:hover::-moz-range-thumb {
  box-shadow: 0 0 0 var(--_ring-hover) color-mix(in srgb, var(--_active) 12%, transparent);
}

.cssnt-slider__input:focus-visible::-moz-range-thumb,
.cssnt-slider__input:active::-moz-range-thumb {
  width: var(--_handle-w-outlined);
  background: var(--_handle-fill);
  box-shadow: inset 0 0 0 var(--_handle-border) var(--_active);
}

.cssnt-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 var(--_handle-border) var(--_active), 0 0 0 var(--_ring-focus) color-mix(in srgb, var(--_active) 45%, transparent);
}

.cssnt-slider__input:active::-moz-range-thumb {
  box-shadow: inset 0 0 0 var(--_handle-border) var(--_active), 0 0 0 var(--_ring-pressed) color-mix(in srgb, var(--_active) 16%, transparent);
}

/* DISABLED (por atributo) */
.cssnt-slider__input:disabled {
  cursor: not-allowed;
}

.cssnt-slider:has(.cssnt-slider__input:disabled) .cssnt-slider__label,
.cssnt-slider:has(.cssnt-slider__input:disabled)::after {
  opacity: var(--cssnt-state-disabled-content);
}

/* ============================================================
 * VERTICAL (label abajo)
 * Uso: class="cssnt-slider cssnt-slider--vertical"
 * ============================================================ */
.cssnt-slider--vertical {
  --_vertical-l: 220px;
  /* invierte orden visual: input arriba, label abajo */
  flex-direction: column-reverse;
  align-items: center;
  width: max-content;
  min-height: auto;
}

/* label centrado abajo */
.cssnt-slider--vertical .cssnt-slider__label {
  justify-content: center;
}

/* antes lo tenías en bottom */
.cssnt-slider--vertical::after {
  top: var(--_end-dot-inset);
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

.cssnt-slider--vertical .cssnt-slider__input {
  width: var(--_vertical-l);
  height: var(--_track-h);
  transform: rotate(-90deg);
  transform-origin: center;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
 * TEXTAREA (M3-ish) — basado en tu Input
 * ============================================================ */
/* ============================================================
 * CONTENEDOR BASE (ROOT) – OUTLINED
 * ============================================================ */
.cssnt-textarea-root {
  position: relative;
  display: inline-flex;
  align-items: flex-start; /* importante: multilinea */
  width: 100%;
  min-height: 120px;
  padding-inline: var(--cssnt-space-3);
  padding-block: var(--cssnt-space-3);
  border-radius: var(--cssnt-radius-sm);
  border: 1px solid var(--cssnt-color-outline-variant);
  background-color: var(--cssnt-color-surface);
  box-shadow: var(--cssnt-elev-0-shadow);
  transition: border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Hover del contenedor */
.cssnt-textarea-root:hover {
  border-color: var(--cssnt-color-outline);
}

/* Focus desde cualquier hijo (textarea) */
.cssnt-textarea-root:focus-within {
  border-color: var(--cssnt-color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cssnt-color-primary) 40%, transparent);
}

/* ============================================================
 * VARIANTE FILLED
 * ============================================================ */
.cssnt-textarea-root.cssnt-textarea--filled {
  border-radius: 0;
  border-width: 0 0 2px 0;
  background-color: var(--cssnt-color-surface-variant);
}

.cssnt-textarea-root.cssnt-textarea--filled:hover {
  background-color: color-mix(in srgb, var(--cssnt-color-surface-variant) 90%, #000 10%);
}

.cssnt-textarea-root.cssnt-textarea--filled:focus-within {
  border-color: var(--cssnt-color-primary);
}

/* ============================================================
 * TEXTAREA NATIVO
 * ============================================================ */
.cssnt-textarea {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  /* deja espacio arriba para el label (cuando no está elevado) */
  padding-top: calc(var(--cssnt-space-3) + 10px);
  padding-bottom: var(--cssnt-space-2);
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-on);
  resize: vertical;
  min-height: 84px; /* área útil */
}

/* Placeholder */
.cssnt-textarea::placeholder {
  color: var(--cssnt-color-surface-variant-on);
}

/* Estado deshabilitado */
.cssnt-textarea:disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
  resize: none;
}

/* Estado readonly */
.cssnt-textarea:read-only {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

/* Ajuste por iconos opcionales dentro del contenedor */
.cssnt-textarea-root.has-icon-start .cssnt-textarea {
  padding-left: calc(var(--cssnt-space-3) + 24px);
}

/* ============================================================
 * LABEL FLOTANTE (multilinea)
 * ============================================================ */
.cssnt-textarea-label {
  position: absolute;
  left: var(--cssnt-space-3);
  /* en textarea NO va centrado; va arriba dentro del campo */
  top: var(--cssnt-space-3);
  transform: translateY(0);
  pointer-events: none;
  padding-inline: 4px;
  background-color: var(--cssnt-color-surface);
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-variant-on);
  transition: top var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), font-size var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), line-height var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Variante filled: el fondo del label debe seguir al container */
.cssnt-textarea-root.cssnt-textarea--filled .cssnt-textarea-label {
  background-color: var(--cssnt-color-surface-variant);
}

/* Label “elevado” cuando hay foco o valor */
.cssnt-textarea-label.label-elevated {
  top: 0;
  transform: translateY(-50%);
  font-family: var(--cssnt-type-label-sm-family);
  font-size: var(--cssnt-type-label-sm-size);
  line-height: var(--cssnt-type-label-sm-line);
  color: var(--cssnt-color-primary);
}

/* Requerido (asterisco) */
.cssnt-textarea-label.required::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * TEXTOS INFERIORES: support, error, success
 * ============================================================ */
.cssnt-textarea-extra-text-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  max-height: 0;
  position: relative;
  bottom: var(--cssnt-space-4);
}

.cssnt-textarea-support,
.cssnt-textarea-error,
.cssnt-textarea-success {
  margin-top: 0;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  padding-inline: var(--cssnt-space-1);
}

.cssnt-textarea-support {
  color: var(--cssnt-color-surface-variant-on);
}

.cssnt-textarea-error {
  color: var(--cssnt-color-danger);
}

.cssnt-textarea-success {
  color: var(--cssnt-color-success);
}

/* ============================================================
 * SELECT – estilo tipo Input (Outlined / Filled) + label flotante
 * + MENÚ CUSTOM (opcional) + HELPERS (support/success/error)
 * ============================================================ */
/* Markup sugerido:
<div class="cssnt-select__container">
  <div class="cssnt-select-root [cssnt-select--filled] [is-open]">
    <label class="cssnt-select-label [label-elevated] [required]">Label</label>

    <select class="cssnt-select" aria-label="Label">
      <option value="" disabled selected>Selecciona…</option>
      <option>Item 1</option>
    </select>

    <div class="cssnt-select-menu">
      <button class="cssnt-select-option">Item 1</button>
      <button class="cssnt-select-option is-selected">Item 2</button>
      <button class="cssnt-select-option">Item 3</button>
    </div>
  </div>

  <div class="cssnt-select-extra-text-container">
    <p class="cssnt-select__helper">Helper</p>
    <p class="cssnt-select__helper success">Success</p>
    <p class="cssnt-select__helper error">Error</p>
  </div>
</div>
*/
/* ============================================================
 * CONTENEDOR EXTERNO (para helper spacing)
 * ============================================================ */
.cssnt-select__container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ============================================================
 * CONTENEDOR BASE (ROOT) – OUTLINED
 * ============================================================ */
.cssnt-select-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding-inline: var(--cssnt-space-3);
  border-radius: var(--cssnt-radius-sm);
  border: 1px solid var(--cssnt-color-outline-variant);
  background-color: var(--cssnt-color-surface);
  box-shadow: var(--cssnt-elev-0-shadow);
  overflow: visible;
  transition: border-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), box-shadow var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Chevron (icon end) */
.cssnt-select-root::after {
  content: "expand_more";
  position: absolute;
  right: var(--cssnt-space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  color: var(--cssnt-color-surface-on);
  opacity: 0.9;
  transition: transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* abierto (si usas menú custom) */
.cssnt-select-root.is-open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Hover del contenedor */
.cssnt-select-root:hover {
  border-color: var(--cssnt-color-outline);
}

/* Focus desde cualquier hijo (select) */
.cssnt-select-root:focus-within {
  border-color: var(--cssnt-color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cssnt-color-primary) 40%, transparent);
}

/* Disabled (en root, para que mate interacciones visuales) */
.cssnt-select-root.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  pointer-events: none;
}

/* ============================================================
 * VARIANTE FILLED
 * ============================================================ */
.cssnt-select-root.cssnt-select--filled {
  border-radius: 0;
  border-width: 0 0 2px 0;
  background-color: var(--cssnt-color-surface-variant);
}

.cssnt-select-root.cssnt-select--filled:hover {
  background-color: color-mix(in srgb, var(--cssnt-color-surface-variant) 90%, #000 10%);
}

.cssnt-select-root.cssnt-select--filled:focus-within {
  border-color: var(--cssnt-color-primary);
}

/* ============================================================
 * SELECT NATIVO
 * ============================================================ */
.cssnt-select {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  /* si usas menú custom visual: evita que abra el nativo */
  pointer-events: none;
  padding-block: var(--cssnt-space-2);
  padding-inline: 0;
  padding-right: calc(var(--cssnt-space-3) + 24px); /* espacio para chevron */
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-on);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Estado deshabilitado */
.cssnt-select:disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

/* ============================================================
 * LABEL FLOTANTE
 * ============================================================ */
.cssnt-select-label {
  position: absolute;
  left: var(--cssnt-space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  padding-inline: 4px;
  background-color: var(--cssnt-color-surface);
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-variant-on);
  transition: top var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), transform var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), font-size var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), line-height var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard), background-color var(--cssnt-motion-dur-med-1) var(--cssnt-motion-ease-standard);
}

/* Variante filled: el fondo del label debe seguir al container */
.cssnt-select-root.cssnt-select--filled .cssnt-select-label {
  background-color: var(--cssnt-color-surface-variant);
}

/* Label flotante cuando hay foco o valor */
.cssnt-select-label.label-elevated {
  top: 0;
  transform: translateY(-50%);
  font-family: var(--cssnt-type-label-sm-family);
  font-size: var(--cssnt-type-label-sm-size);
  line-height: var(--cssnt-type-label-sm-line);
  color: var(--cssnt-color-primary);
}

/* En foco, fuerza color primario */
.cssnt-select-root:focus-within .cssnt-select-label {
  color: var(--cssnt-color-primary);
}

/* Requerido (asterisco) */
.cssnt-select-label.required::after {
  content: "*";
  margin-left: 3px;
  color: var(--cssnt-color-danger);
  font-weight: 600;
}

/* ============================================================
 * MENÚ CUSTOM (opcional) — “la lista” como en la imagen
 * ============================================================ */
.cssnt-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--cssnt-space-1));
  z-index: 30;
  display: none;
  overflow: hidden;
  background: var(--cssnt-color-surface);
  border-radius: var(--cssnt-radius-sm);
  box-shadow: var(--cssnt-elev-2-shadow);
}

.cssnt-select-root.is-open .cssnt-select-menu {
  display: block;
}

.cssnt-select-option {
  all: unset;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--cssnt-space-4) var(--cssnt-space-5); /* 16 / 24 */
  font-family: var(--cssnt-type-body-lg-family);
  font-size: var(--cssnt-type-body-lg-size);
  line-height: var(--cssnt-type-body-lg-line);
  color: var(--cssnt-color-surface-on);
  cursor: pointer;
}

.cssnt-select-option:hover {
  background: color-mix(in srgb, var(--cssnt-color-surface-on) 8%, transparent);
}

.cssnt-select-option:active {
  background: color-mix(in srgb, var(--cssnt-color-surface-on) 12%, transparent);
}

.cssnt-select-option.is-selected {
  background: color-mix(in srgb, var(--cssnt-color-surface-on) 10%, transparent);
}

/* ============================================================
 * HELPERS (support / success / error) — igual que Input
 * ============================================================ */
.cssnt-select-extra-text-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  max-height: 0;
  position: relative;
  bottom: var(--cssnt-space-4);
}

.cssnt-select__helper {
  margin-top: 20px;
  font-family: var(--cssnt-type-body-sm-family);
  font-size: var(--cssnt-type-body-sm-size);
  line-height: var(--cssnt-type-body-sm-line);
  color: var(--cssnt-color-surface-variant-on);
  padding-inline: var(--cssnt-space-1);
}

.cssnt-select__helper.success {
  color: var(--cssnt-color-success);
}

.cssnt-select__helper.error {
  color: var(--cssnt-color-danger);
}

.cssnt-select-trigger {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.cssnt-select-option.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: not-allowed;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-select-root,
  .cssnt-select-label,
  .cssnt-select-root::after {
    transition: none;
  }
}
/* DatePicker.scss (M3-ish)
 * Updates:
 * - Más fiel a la 5ta imagen (tipografía header + paddings).
 * - Grid y weekdays ya no pegan al borde derecho (padding del body + sin space-between).
 * - Menús Month/Year SIN fondo azulado (mismo surface / transparente).
 * - Hook opcional para mover el icon del Input a la derecha (si el trigger usa .cssnt-date-picker__trigger).
 */
.cssnt-date-picker {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  /* ===== component tokens (overrideables) ===== */
  --_w: 328px;
  /* paddings M3 (muy importante para que NO pegue al borde derecho) */
  --_pad: var(--cssnt-space-5); /* 24 */
  --_pad-y: var(--cssnt-space-4); /* 16 */
  --_radius: var(--cssnt-radius-xl); /* 28 */
  --_divider: var(--cssnt-color-outline-variant);
  --_surface: var(--cssnt-color-surface);
  --_on: var(--cssnt-color-surface-on);
  --_muted: var(--cssnt-color-surface-variant-on);
  /* calendar sizing (M3: 7*40 = 280; 328 - 24*2 = 280) */
  --_cell: 40px;
  --_gap-x: 0px; /* columnas sin gap (como M3) */
  --_gap-y: 4px; /* separación vertical suave */
  /* state layers */
  --_sl: var(--cssnt-color-surface-on);
  --_sl-hover: 12%;
  --_sl-focus: 30%;
  --_sl-pressed: 16%;
  /* selection */
  --_sel-bg: var(--cssnt-color-primary);
  --_sel-on: var(--cssnt-color-primary-on);
  /* today ring */
  --_today-ring: var(--cssnt-color-primary);
  --_today-ring-w: 2px;
  /* header typography (más fiel a la 5ta imagen) */
  --_support-size: 14px;
  --_support-line: 20px;
  --_support-weight: 500;
  --_headline-size: 40px;
  --_headline-line: 48px;
  --_headline-weight: 400;
  width: min(var(--_w), 100%);
  border-radius: var(--_radius);
  background: var(--_surface);
  overflow: hidden;
}

/* Compact: pensado para popover debajo del input */
.cssnt-date-picker.is-compact .cssnt-date-picker__header,
.cssnt-date-picker.is-compact .cssnt-date-picker__divider--header {
  display: none;
}

/* ===== header (dialog style) ===== */
.cssnt-date-picker__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cssnt-space-3);
  padding: var(--_pad);
  padding-bottom: var(--cssnt-space-4);
}

.cssnt-date-picker__supporting {
  color: var(--_muted);
  font: var(--_support-weight) var(--_support-size)/var(--_support-line) var(--cssnt-font-plain);
}

/* Si metes <Paragraph/> adentro, forzamos que herede esta tipografía */
.cssnt-date-picker__supporting > * {
  font: inherit;
  color: inherit;
}

.cssnt-date-picker__headline {
  margin-top: var(--cssnt-space-2);
  color: var(--_on);
  font: var(--_headline-weight) var(--_headline-size)/var(--_headline-line) var(--cssnt-font-plain);
  letter-spacing: -0.01em;
}

.cssnt-date-picker__headline > * {
  font: inherit;
  color: inherit;
}

.cssnt-date-picker__editBtn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cssnt-radius-full);
  cursor: pointer;
  position: relative;
}

.cssnt-date-picker__divider {
  height: 1px;
  background: var(--_divider);
}

.cssnt-date-picker__divider--header {
  opacity: 1;
}

/* ===== body ===== */
.cssnt-date-picker__body {
  /* clave: padding inline 24 para que el lado derecho NO quede pegado */
  padding: var(--_pad-y) var(--_pad);
  display: grid;
  gap: var(--cssnt-space-3);
}

/* ===== controls row (month/year + arrows) ===== */
.cssnt-date-picker__controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cssnt-space-3);
}

.cssnt-date-picker__monthyear {
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-2);
  min-width: 0;
}

.cssnt-date-picker__menuBtn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--cssnt-space-2);
  height: 32px;
  padding: 0 var(--cssnt-space-2);
  border-radius: var(--cssnt-radius-full);
  cursor: pointer;
  position: relative;
  user-select: none;
  min-width: 0;
  font: 500 16px/24px var(--cssnt-font-plain);
  color: var(--_on);
}

.cssnt-date-picker__menuBtn[aria-disabled=true],
.cssnt-date-picker__menuBtn.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: default;
  pointer-events: none;
}

.cssnt-date-picker__caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.7;
  margin-left: 5px;
}

.cssnt-date-picker__nav {
  display: inline-flex;
  gap: var(--cssnt-space-1);
  align-items: center;
}

.cssnt-date-picker__iconBtn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  width: 40px;
  height: 40px;
  border-radius: var(--cssnt-radius-full);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--_on);
}

.cssnt-date-picker__iconBtn[aria-disabled=true],
.cssnt-date-picker__iconBtn.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: default;
  pointer-events: none;
}

/* ===== shared state-layer (menuBtn/iconBtn/editBtn/day/menuItem) ===== */
.cssnt-date-picker__menuBtn::before,
.cssnt-date-picker__iconBtn::before,
.cssnt-date-picker__editBtn::before,
.cssnt-date-picker__day::before,
.cssnt-date-picker__menuItem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: color-mix(in srgb, var(--_sl) var(--_sl-hover), transparent);
  transition: opacity var(--cssnt-motion-dur-short-2) var(--cssnt-motion-ease-standard);
  pointer-events: none;
}

.cssnt-date-picker__menuBtn:hover::before,
.cssnt-date-picker__iconBtn:hover::before,
.cssnt-date-picker__editBtn:hover::before,
.cssnt-date-picker__day:hover::before,
.cssnt-date-picker__menuItem:hover::before {
  opacity: 1;
}

.cssnt-date-picker__menuBtn:active::before,
.cssnt-date-picker__iconBtn:active::before,
.cssnt-date-picker__editBtn:active::before,
.cssnt-date-picker__day:active::before,
.cssnt-date-picker__menuItem:active::before {
  background: color-mix(in srgb, var(--_sl) var(--_sl-pressed), transparent);
  opacity: 1;
}

.cssnt-date-picker__menuBtn:focus-visible,
.cssnt-date-picker__iconBtn:focus-visible,
.cssnt-date-picker__editBtn:focus-visible,
.cssnt-date-picker__day:focus-visible,
.cssnt-date-picker__menuItem:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cssnt-color-primary) 60%, transparent);
  outline-offset: 2px;
}

.cssnt-date-picker__menuBtn:focus-visible::before,
.cssnt-date-picker__iconBtn:focus-visible::before,
.cssnt-date-picker__editBtn:focus-visible::before,
.cssnt-date-picker__day:focus-visible::before,
.cssnt-date-picker__menuItem:focus-visible::before {
  background: color-mix(in srgb, var(--_sl) var(--_sl-focus), transparent);
  opacity: 1;
}

/* ===== weekdays ===== */
.cssnt-date-picker__calendarView {
  display: grid;
  gap: var(--cssnt-space-2);
}

.cssnt-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, var(--_cell));
  justify-content: start;
  column-gap: var(--_gap-x);
  padding: 0; /* body ya tiene padding-inline 24 */
}

.cssnt-date-picker__weekday {
  height: 28px;
  display: grid;
  place-items: center;
  font: 500 12px/16px var(--cssnt-font-plain);
  color: color-mix(in srgb, var(--_on) 70%, transparent);
  user-select: none;
}

/* ===== grid ===== */
.cssnt-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, var(--_cell));
  justify-content: start;
  column-gap: var(--_gap-x);
  row-gap: var(--_gap-y);
  padding: 0; /* body ya tiene padding-inline 24 */
}

/* ===== day cell ===== */
.cssnt-date-picker__day {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  width: var(--_cell);
  height: var(--_cell);
  border-radius: var(--cssnt-radius-full);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
  font: 400 14px/20px var(--cssnt-font-plain);
  color: var(--_on);
}

/* Outside-month */
.cssnt-date-picker__day.is-outside {
  opacity: 0.45;
}

/* Disabled */
.cssnt-date-picker__day[aria-disabled=true],
.cssnt-date-picker__day.is-disabled {
  opacity: var(--cssnt-state-disabled-content);
  cursor: default;
  pointer-events: none;
}

/* Today ring (no seleccionado) */
.cssnt-date-picker__day.is-today:not(.is-selected)::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: var(--_today-ring-w) solid var(--_today-ring);
  pointer-events: none;
}

/* Selected */
.cssnt-date-picker__day.is-selected {
  background: var(--_sel-bg);
  color: var(--_sel-on);
}

.cssnt-date-picker__day.is-selected::before {
  background: color-mix(in srgb, var(--_sel-on) var(--_sl-hover), transparent);
}

/* ===== menus (month/year) ===== */
.cssnt-date-picker__menuView {
  display: none;
  border-radius: var(--cssnt-radius-lg);
  overflow: hidden;
  /* NO azul: igual al calendario */
  background: transparent; /* o var(--_surface) */
  border: none;
}

/* Toggle views */
.cssnt-date-picker.is-month-open .cssnt-date-picker__calendarView,
.cssnt-date-picker.is-year-open .cssnt-date-picker__calendarView {
  display: none;
}

.cssnt-date-picker.is-month-open .cssnt-date-picker__menuView--month {
  display: block;
}

.cssnt-date-picker.is-year-open .cssnt-date-picker__menuView--year {
  display: block;
}

/* menu header row */
.cssnt-date-picker__menuHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cssnt-space-2);
  padding: var(--cssnt-space-3) var(--cssnt-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--_divider) 80%, transparent);
}

.cssnt-date-picker__menuTitle {
  color: var(--_on);
}

.cssnt-date-picker__menuList {
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* list item */
.cssnt-date-picker__menuItem {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--cssnt-space-2);
  padding: 0 var(--cssnt-space-4);
  height: 48px;
  cursor: pointer;
  position: relative;
  color: var(--_on);
}

.cssnt-date-picker__menuItem .cssnt-date-picker__check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  opacity: 0;
  margin-right: 5px;
  position: relative;
  top: -10px;
  right: 15px;
}

/* selected row (sin azul) */
.cssnt-date-picker__menuItem.is-selected {
  background: color-mix(in srgb, var(--cssnt-color-surface-variant) 65%, transparent);
}

.cssnt-date-picker__menuItem.is-selected .cssnt-date-picker__check {
  opacity: 1;
}

/* ===== footer (solo layout; botones ya son tu componente) ===== */
.cssnt-date-picker__footer {
  padding: var(--cssnt-space-3) var(--_pad) var(--_pad);
  display: grid;
}

.cssnt-date-picker__actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--cssnt-space-2);
}

/* ===== trigger helpers (Input icon a la derecha) =====
 * Esto aplica SOLO si tu DatePickerTrigger envuelve el Input con:
 * <div class="cssnt-date-picker__trigger"> ... <Input/> ... </div>
 * y tu Input usa alguna de estas clases internas comunes.
 */
.cssnt-date-picker__trigger {
  cursor: pointer;
}

/* Caso flex (común) */
.cssnt-date-picker__trigger :is(.cssnt-input__content, .cssnt-input__field, .cssnt-input__inner) {
  display: flex;
  align-items: center;
}

/* Mueve icon a la derecha */
.cssnt-date-picker__trigger :is(.cssnt-input__icon, .cssnt-input__iconContent, .cssnt-input__leadingIcon) {
  order: 2;
  margin-left: var(--cssnt-space-2);
}

.cssnt-date-picker__trigger :is(input, .cssnt-input__control, .cssnt-input__input) {
  order: 1;
}

/* ===== motion safety ===== */
@media (prefers-reduced-motion: reduce) {
  .cssnt-date-picker__menuBtn::before,
  .cssnt-date-picker__iconBtn::before,
  .cssnt-date-picker__editBtn::before,
  .cssnt-date-picker__day::before,
  .cssnt-date-picker__menuItem::before {
    transition: none;
  }
}
/* ===== icon helper (Material Symbols Rounded) ===== */
.cssnt-date-picker__ms {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-size: 20px;
  user-select: none;
  padding: 10px;
}

/* timepicker/TimePicker.scss (ACTUALIZADO v2)
 * Fixes:
 * - Support: debajo de Hour/Minute + micro-offsets (sin position hacks)
 * - Dial: label activo siempre visible (z-index + sin state-layer encima)
 * - 24h: asegura número activo en blanco (contraste)
 * - Mantiene markup actual
 */
.cssnt-timepicker {
  box-sizing: border-box;
  font-family: var(--cssnt-font-plain);
  color: var(--_on);
  /* ===== tokens internos ===== */
  --_on: var(--cssnt-color-surface-on);
  --_muted: color-mix(in srgb, var(--_on) 70%, transparent);
  --_container: var(--cssnt-color-surface);
  --_container-variant: var(--cssnt-color-surface-variant);
  --_outline: var(--cssnt-color-outline-variant);
  --_accent: var(--cssnt-color-primary);
  --_accent-on: var(--cssnt-color-primary-on);
  --_accent-container: var(--cssnt-color-primary-container);
  --_accent-container-on: var(--cssnt-color-primary-container-on);
  --_r: var(--cssnt-radius-xl);
  --_pad: var(--cssnt-space-5); /* 24 */
  --_gap: var(--cssnt-space-4); /* 16 */
  /* Selector (hour/minute) */
  --_field-h: 72px;
  --_field-w: 96px;
  --_field-r: var(--cssnt-radius-md);
  --_field-bg: color-mix(in srgb, var(--_container-variant) 70%, transparent);
  --_field-on: var(--_on);
  --_field-outline: transparent;
  --_field-active-bg: var(--_accent-container);
  --_field-active-on: var(--_accent-container-on);
  --_field-active-outline: color-mix(in srgb, var(--_accent) 55%, transparent);
  --_sep-size: 44px;
  /* Period (AM/PM) */
  --_period-w: 52px;
  --_period-h: 72px;
  --_period-bg: color-mix(in srgb, var(--_container-variant) 55%, transparent);
  --_period-outline: color-mix(in srgb, var(--cssnt-color-outline) 45%, transparent);
  --_period-item-h: 36px;
  --_period-sel-bg: color-mix(in srgb, var(--_accent) 22%, var(--_period-bg));
  --_period-sel-on: var(--_on);
  /* Dial */
  --_dial-size: 256px;
  --_dial-bg: color-mix(in srgb, var(--_container-variant) 55%, transparent);
  --_dial-label: color-mix(in srgb, var(--_on) 78%, transparent);
  --_dial-label-active-bg: var(--_accent);
  --_dial-label-active-on: var(--_accent-on);
  --_hand: 0deg; /* setea JS */
  --_hand-w: 2px;
  --_hand-l: calc((var(--_dial-size) / 2) - 28px);
  --_thumb: 44px;
  /* Support micro offsets (ajusta si quieres) */
  --_support-hour-x: 10px;
  --_support-minute-x: -10px;
  /* Motion */
  --_dur: var(--cssnt-motion-dur-med-1);
  --_ease: var(--cssnt-motion-ease-standard);
  width: min(100%, 700px);
  margin: 0 auto;
  background: var(--_container);
  border-radius: var(--_r);
  padding: var(--_pad);
  display: grid;
  gap: var(--_gap);
  overflow: hidden;
}

/* ===== layout modes ===== */
.cssnt-timepicker.is-vertical {
  grid-template-columns: 1fr;
  grid-template-areas: "headline" "selector" "support" "dial" "footer";
}

.cssnt-timepicker.is-horizontal {
  grid-template-columns: 1fr auto;
  align-items: start;
  grid-template-areas: "headline headline" "selector dial" "support  dial" "footer   footer";
  --_dial-size: 280px;
}

@media (max-width: 520px) {
  .cssnt-timepicker {
    --_pad: var(--cssnt-space-4);
  }
  .cssnt-timepicker.is-horizontal {
    grid-template-columns: 1fr;
    grid-template-areas: "headline" "selector" "support" "dial" "footer";
    --_dial-size: 256px;
  }
}
/* ===== headline ===== */
.cssnt-timepicker__headline {
  grid-area: headline;
  margin: 0;
  font: var(--cssnt-type-title-md-weight) var(--cssnt-type-title-md-size)/var(--cssnt-type-title-md-line) var(--cssnt-type-title-md-family);
  color: var(--_muted);
}

/* ===== selector row ===== */
.cssnt-timepicker__selector {
  grid-area: selector;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: var(--cssnt-space-3);
}

.cssnt-timepicker__sep {
  font-size: var(--_sep-size);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Field button (hour/minute) */
.cssnt-timepicker__field {
  all: unset;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  width: var(--_field-w);
  height: var(--_field-h);
  border-radius: var(--_field-r);
  background: var(--_field-bg);
  color: var(--_field-on);
  border: 1px solid var(--_field-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 48px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  position: relative;
  cursor: pointer;
  transition: background var(--_dur) var(--_ease), border-color var(--_dur) var(--_ease), transform var(--_dur) var(--_ease);
}

.cssnt-timepicker__fieldText {
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px);
}

/* input centrado perfecto */
.cssnt-timepicker__fieldInput {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  text-align: center;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  font-variant-numeric: inherit;
  caret-color: var(--_accent);
}

/* state-layer */
.cssnt-timepicker__field::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--_on) calc(var(--_sl, 0) * 100%), transparent);
  opacity: 1;
  pointer-events: none;
}

.cssnt-timepicker__field:hover {
  --_sl: var(--cssnt-state-hover-layer);
}

.cssnt-timepicker__field:active {
  --_sl: var(--cssnt-state-pressed-layer);
  transform: scale(0.99);
}

.cssnt-timepicker__field:focus-visible {
  outline: none;
  border-color: var(--_field-active-outline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

.cssnt-timepicker__field.is-active {
  background: var(--_field-active-bg);
  color: var(--_field-active-on);
  border-color: var(--_field-active-outline);
}

/* ===== period ===== */
.cssnt-timepicker__period {
  margin-left: var(--cssnt-space-2);
  width: var(--_period-w);
  height: var(--_period-h);
  background: var(--_period-bg);
  border: 1px solid var(--_period-outline);
  border-radius: var(--cssnt-radius-sm);
  overflow: hidden;
  display: grid;
  grid-auto-rows: 1fr;
}

.cssnt-timepicker.is-horizontal .cssnt-timepicker__period {
  width: auto;
  height: 40px;
  border-radius: var(--cssnt-radius-full);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.cssnt-timepicker__period-btn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  height: var(--_period-item-h);
  padding: 0 var(--cssnt-space-3);
  font: var(--cssnt-type-label-md-weight) var(--cssnt-type-label-md-size)/var(--cssnt-type-label-md-line) var(--cssnt-type-label-md-family);
  color: var(--_muted);
  position: relative;
}

.cssnt-timepicker__period-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--_on) calc(var(--_sl, 0) * 100%), transparent);
  pointer-events: none;
}

.cssnt-timepicker__period-btn:hover {
  --_sl: var(--cssnt-state-hover-layer);
}

.cssnt-timepicker__period-btn:active {
  --_sl: var(--cssnt-state-pressed-layer);
}

.cssnt-timepicker__period-btn.is-active {
  background: var(--_period-sel-bg);
  color: var(--_period-sel-on);
}

.cssnt-timepicker__period-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

/* 24h: oculta period */
.cssnt-timepicker.is-24h .cssnt-timepicker__period {
  display: none;
}

/* ===== supporting labels ===== */
.cssnt-timepicker__support {
  grid-area: support;
  display: none;
  gap: var(--cssnt-space-3);
  grid-template-columns: var(--_field-w) var(--_sep-size) var(--_field-w) max-content;
  align-items: start;
  justify-content: center;
  justify-items: center;
  color: var(--_muted);
  font: var(--cssnt-type-body-sm-weight) var(--cssnt-type-body-sm-size)/var(--cssnt-type-body-sm-line) var(--cssnt-type-body-sm-family);
}

.cssnt-timepicker.is-input .cssnt-timepicker__support {
  display: grid;
}

.cssnt-timepicker__support > span {
  padding-left: 0;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
}

/* debajo de Hour y Minute (con micro-ajuste) */
.cssnt-timepicker__support .is-hour {
  grid-column: 1;
  transform: translateX(var(--_support-hour-x));
}

.cssnt-timepicker__support .is-minute {
  grid-column: 3;
  transform: translateX(var(--_support-minute-x));
}

/* ===== dial ===== */
.cssnt-timepicker__dial {
  grid-area: dial;
  width: 100%;
  display: grid;
  place-items: center;
  justify-self: center;
}

.cssnt-timepicker.is-input .cssnt-timepicker__dial {
  display: none;
}

.cssnt-timepicker__dial-face {
  width: var(--_dial-size);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--_dial-bg);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  touch-action: none;
  isolation: isolate;
}

.cssnt-timepicker__dial-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cssnt-timepicker__dial-label {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  --a: 0deg;
  --r: calc((var(--_dial-size) / 2) - 26px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font: 500 14px/1 var(--cssnt-font-plain);
  color: var(--_dial-label);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  cursor: pointer;
  z-index: 2;
}

.cssnt-timepicker__dial-label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--_on) calc(var(--_sl, 0) * 100%), transparent);
  pointer-events: none;
}

.cssnt-timepicker__dial-label:hover {
  --_sl: var(--cssnt-state-hover-layer);
}

.cssnt-timepicker__dial-label:active {
  --_sl: var(--cssnt-state-pressed-layer);
}

.cssnt-timepicker__dial-label:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

/* Activo: texto siempre legible + sin state-layer encima */
.cssnt-timepicker__dial-label.is-active {
  background: var(--_dial-label-active-bg);
  color: var(--_dial-label-active-on);
  z-index: 4;
}

.cssnt-timepicker__dial-label.is-active::before {
  background: transparent;
}

/* 24h: inner label sizing + fuerza contraste del activo */
.cssnt-timepicker.is-24h .cssnt-timepicker__dial-label.is-inner {
  width: 40px;
  height: 40px;
  font-size: 12px;
  --r: calc((var(--_dial-size) / 2) - 58px);
}

.cssnt-timepicker.is-24h .cssnt-timepicker__dial-label.is-active {
  color: var(--_accent-on);
}

/* hand */
.cssnt-timepicker__hand {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--_hand) - 90deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 1;
}

.cssnt-timepicker__hand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--_hand-l);
  height: var(--_hand-w);
  background: var(--_accent);
  border-radius: 999px;
  transform: translateY(-50%);
  transform-origin: 0 50%;
}

.cssnt-timepicker__hand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--_thumb);
  height: var(--_thumb);
  border-radius: 999px;
  background: var(--_accent);
  transform: translate(-50%, -50%) translateX(var(--_hand-l));
}

.cssnt-timepicker__dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--_accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

/* ===== footer ===== */
.cssnt-timepicker__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cssnt-space-3);
  padding-top: var(--cssnt-space-2);
}

.cssnt-timepicker__actions {
  display: flex;
  align-items: center;
  gap: var(--cssnt-space-3);
}

.cssnt-timepicker__textbtn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--cssnt-radius-full);
  color: var(--_accent);
  font: var(--cssnt-type-label-lg-weight) var(--cssnt-type-label-lg-size)/var(--cssnt-type-label-lg-line) var(--cssnt-type-label-lg-family);
  position: relative;
}

.cssnt-timepicker__textbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--_accent) calc(var(--_sl, 0) * 100%), transparent);
  pointer-events: none;
}

.cssnt-timepicker__textbtn:hover {
  --_sl: var(--cssnt-state-hover-layer);
}

.cssnt-timepicker__textbtn:active {
  --_sl: var(--cssnt-state-pressed-layer);
}

.cssnt-timepicker__textbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

.cssnt-timepicker__iconbtn {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--_muted);
  position: relative;
}

.cssnt-timepicker__iconbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--_on) calc(var(--_sl, 0) * 100%), transparent);
  pointer-events: none;
}

.cssnt-timepicker__iconbtn:hover {
  --_sl: var(--cssnt-state-hover-layer);
}

.cssnt-timepicker__iconbtn:active {
  --_sl: var(--cssnt-state-pressed-layer);
}

.cssnt-timepicker__iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 35%, transparent);
}

/* Material Symbols helper */
.cssnt-timepicker__ms {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-size: 22px;
  user-select: none;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cssnt-timepicker,
  .cssnt-timepicker * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--cssnt-font-brand), serif;
}

body {
  height: 100vh;
  width: 100vw;
  background: var(--cssnt-color-background);
}

/*# sourceMappingURL=main_dark.css.map */