/* ── uds-kit.css — la copia scoped del design system real de uDocz ──
   Tokens y componentes de uds-v2, con los selectores encerrados en
   .uds-scope para que convivan con el lenguaje del portafolio sin
   pisarlo. Compartido por los casos que muestran producto de uDocz.

   Se desvía del DS real solo donde está comentado como "corrección AA"
   (contrastes que el sistema todavía no corrige) y en los bloques
   dark × producto, que el DS real no tiene.

   Consumido por: casos/design-system.html · casos/dashboard-instituciones.html
*/

/* ═══════════════════════════════════════════════════════════════
   uds-v2 — TOKENS REALES (tokens/globals.css, scoped)
   Primitivos → semánticos; dark y productos re-apuntan solo la
   capa semántica. Subconjunto: lo que consume la escena.
═══════════════════════════════════════════════════════════════ */
.uds-scope{

  /* 1. Paletas de escala — 7 paletas Crayola, 9 stops. ★500 = base */
  --color-blue-100:#F1F6FF; --color-blue-200:#BED4FF; --color-blue-300:#8BB2FF;
  --color-blue-400:#5890FF; --color-blue-500:#256EFF; --color-blue-600:#0A45DD;
  --color-blue-700:#0322C9; --color-blue-800:#14008D; --color-blue-900:#10003F;

  --color-aquamarine-100:#EAFBF4; --color-aquamarine-200:#BFF3DC; --color-aquamarine-300:#93ECC5;
  --color-aquamarine-400:#68E4AE; --color-aquamarine-500:#3DDC97; --color-aquamarine-600:#1FB073;
  --color-aquamarine-700:#188766; --color-aquamarine-800:#0F5447; --color-aquamarine-900:#072526;

  --color-dpink-100:#FFD6EE; --color-dpink-200:#FFB6E2; --color-dpink-300:#FF6CC4;
  --color-dpink-400:#FF3BB1; --color-dpink-500:#FF0A9D; --color-dpink-600:#E3097C;
  --color-dpink-700:#C7085B; --color-dpink-800:#820537; --color-dpink-900:#3B0213;

  --color-indigo-100:#E8D6FF; --color-indigo-200:#CBA3FF; --color-indigo-300:#AE70FF;
  --color-indigo-400:#913DFF; --color-indigo-500:#740AFF; --color-indigo-600:#4E08CF;
  --color-indigo-700:#370691; --color-indigo-800:#250466; --color-indigo-900:#060026;

  --color-orange-peel-100:#FFECCC; --color-orange-peel-200:#FFDA99; --color-orange-peel-300:#FFC766;
  --color-orange-peel-400:#FFB533; --color-orange-peel-500:#FFA200; --color-orange-peel-600:#F08000;
  --color-orange-peel-700:#CC6600; --color-orange-peel-800:#974306; --color-orange-peel-900:#571700;

  --color-red-100:#FFE5EA; --color-red-200:#FFB8C4; --color-red-300:#FF8B9E;
  --color-red-400:#F45E78; --color-red-500:#EE204D; --color-red-600:#C71839;
  --color-red-700:#A0122B; --color-red-800:#6B0C1D; --color-red-900:#2E050D;

  --color-capri-100:#CCF3FF; --color-capri-200:#99E7FF; --color-capri-300:#66DBFF;
  --color-capri-400:#33CFFF; --color-capri-500:#00C3FF; --color-capri-600:#007FC7;
  --color-capri-700:#0055A3; --color-capri-800:#00316A; --color-capri-900:#00173A;

  /* 2. Color semántico
     Corrección AA del portafolio: el DS real ancla brand en blue-500,
     pero blanco sobre #256EFF da 4.42:1 (AA pide 4.5). Aquí los roles
     con texto encima descansan un stop más abajo; blue-500 conserva
     los roles no-textuales (foco, info). */
  --color-brand-primary:var(--color-blue-600);
  --color-brand-primary-hover:var(--color-blue-700);
  --color-brand-primary-active:var(--color-blue-800);
  --color-brand-primary-subtle:var(--color-blue-100);
  --color-brand-primary-border:var(--color-blue-200);
  --color-brand-primary-border-hover:var(--color-blue-400);
  --color-brand-primary-text-strong:var(--color-blue-700);
  --color-brand-on-primary:#FFFFFF;

  --color-accent-primary:var(--color-dpink-500);
  --color-accent-primary-hover:var(--color-dpink-600);
  --color-accent-primary-active:var(--color-dpink-700);
  --color-accent-subtle:var(--color-dpink-100);
  --color-accent-border:var(--color-dpink-600);
  --color-accent-text:var(--color-dpink-700);
  --color-text-on-accent-solid:var(--color-dpink-900);

  --color-text-primary:#0F172A;
  --color-text-secondary:#475569;
  --color-text-tertiary:#94A3B8;
  --color-text-disabled:#CBD5E1;
  --color-text-brand:var(--color-blue-600); /* corrección AA (real: blue-500) */
  --color-text-inverse:#FFFFFF;

  --color-bg-page:#F8FAFC;
  --color-bg-default:#FFFFFF;
  --color-bg-subtle:#F1F5F9;
  --color-bg-muted:#E2E8F0;
  --color-bg-brand-subtle:var(--color-blue-100);
  --color-bg-brand:var(--color-blue-600); /* corrección AA (real: blue-500) */
  --color-bg-inverse:#0F172A;
  --color-bg-hover:var(--color-bg-subtle);
  --color-bg-pressed:var(--color-bg-muted);
  --color-bg-disabled:var(--color-bg-subtle);

  --color-border-default:#E2E8F0;
  --color-border-strong:#CBD5E1;
  --color-border-focus:var(--color-blue-500);
  --color-border-brand-subtle:var(--color-blue-200);
  --color-border-default-hover:var(--color-border-strong);

  --color-focus-ring:var(--color-border-focus);
  --color-focus-ring-offset:var(--color-bg-default);

  --color-feedback-success:var(--color-aquamarine-500);
  --color-feedback-success-subtle:var(--color-aquamarine-100);
  --color-feedback-success-border:var(--color-aquamarine-300);
  --color-feedback-success-text:var(--color-aquamarine-800); /* corrección AA (real: 700 → 4.2:1 sobre subtle) */

  --color-feedback-warning:var(--color-orange-peel-500);
  --color-feedback-warning-subtle:var(--color-orange-peel-100);
  --color-feedback-warning-border:var(--color-orange-peel-300);
  --color-feedback-warning-text:var(--color-orange-peel-800); /* corrección AA (real: 700 → 3.3:1 sobre subtle) */

  --color-feedback-error:var(--color-red-500);
  --color-feedback-error-subtle:var(--color-red-100);
  --color-feedback-error-border:var(--color-red-300);
  --color-feedback-error-text:var(--color-red-700);

  --color-feedback-info:var(--color-blue-500);
  --color-feedback-info-subtle:var(--color-blue-100);
  --color-feedback-info-border:var(--color-blue-200);
  --color-feedback-info-text:var(--color-blue-600); /* fix WCAG v0.3: era blue-400 */

  /* 3. Elevaciones */
  --shadow-e1:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.10);
  --shadow-sm:var(--shadow-e1);

  /* 4. Tipografía */
  --font-family-sans:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-family-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-size-11:11px; --font-size-12:12px; --font-size-13:13px;
  --font-size-15:15px; --font-size-24:24px;
  --font-weight-regular:400; --font-weight-medium:500;
  --font-weight-semibold:600; --font-weight-bold:700;
  --line-height-tight:1.1; --line-height-normal:1.5;

  /* 5. Spacing — base 2px · 6. Radius · 7. Motion */
  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:10px;
  --space-6:12px; --space-7:14px; --space-8:16px; --space-10:20px; --space-12:24px;
  --radius-6:6px; --radius-8:8px; --radius-10:10px; --radius-pill:999px;
  --motion-duration-fast:120ms;
  --motion-ease-out:cubic-bezier(.2,.8,.2,1);
}

/* Dark — override de la capa SEMÁNTICA. Los primitivos no cambian. */
.uds-scope[data-uds-theme="dark"]{
  --color-bg-page:#0B0F19;
  --color-bg-default:#131826;
  --color-bg-subtle:#1B2233;
  --color-bg-muted:#232B40;
  --color-bg-brand-subtle:rgba(88,144,255,0.12);
  --color-bg-brand:var(--color-blue-400);
  --color-bg-inverse:#F8FAFC;
  --color-bg-disabled:#1A1F2E;

  --color-text-primary:#F1F5F9;
  --color-text-secondary:#CBD5E1;
  --color-text-tertiary:#94A3B8;
  --color-text-disabled:#475569;
  --color-text-brand:var(--color-blue-300);
  --color-text-inverse:#0F172A;

  --color-border-default:#2A3349;
  --color-border-strong:#3D4866;
  --color-border-focus:var(--color-blue-400);
  --color-border-brand-subtle:rgba(88,144,255,0.32);

  --color-focus-ring:var(--color-blue-400);
  --color-focus-ring-offset:var(--color-bg-default);

  /* brand y accent suben un stop para sostener contraste */
  --color-brand-primary:var(--color-blue-400);
  --color-brand-primary-hover:var(--color-blue-300);
  --color-brand-primary-active:var(--color-blue-200);
  --color-brand-primary-subtle:rgba(88,144,255,0.12);
  --color-brand-primary-border:rgba(88,144,255,0.32);
  --color-brand-primary-border-hover:var(--color-blue-300);
  --color-brand-primary-text-strong:var(--color-blue-300);
  --color-brand-on-primary:#0A1A3D;

  --color-accent-primary:var(--color-dpink-400);
  --color-accent-subtle:rgba(255,59,177,0.12);
  --color-accent-border:rgba(255,59,177,0.40);
  --color-accent-text:var(--color-dpink-300);

  --color-feedback-success:var(--color-aquamarine-400);
  --color-feedback-success-subtle:rgba(61,220,151,0.12);
  --color-feedback-success-border:rgba(61,220,151,0.40);
  --color-feedback-success-text:var(--color-aquamarine-300);

  --color-feedback-warning:var(--color-orange-peel-400);
  --color-feedback-warning-subtle:rgba(255,162,0,0.14);
  --color-feedback-warning-border:rgba(255,162,0,0.40);
  --color-feedback-warning-text:var(--color-orange-peel-300);

  --color-feedback-error:var(--color-red-400);
  --color-feedback-error-subtle:rgba(244,94,120,0.14);
  --color-feedback-error-border:rgba(244,94,120,0.40);
  --color-feedback-error-text:var(--color-red-300);

  --color-feedback-info:var(--color-blue-400);
  --color-feedback-info-subtle:rgba(88,144,255,0.14);
  --color-feedback-info-border:rgba(88,144,255,0.40);
  --color-feedback-info-text:var(--color-blue-300);
}

/* Productos — re-apuntan brand/accent; los componentes no se enteran. */
.uds-scope[data-uds-product="profesores"]{
  --color-brand-primary:var(--color-blue-900);
  --color-brand-primary-hover:var(--color-blue-800);
  --color-brand-primary-active:var(--color-blue-700);
  --color-brand-primary-subtle:var(--color-blue-100);
  --color-brand-primary-border:var(--color-blue-200);
  --color-brand-primary-border-hover:var(--color-blue-400);
  --color-brand-primary-text-strong:var(--color-blue-900);
  --color-brand-on-primary:#FFFFFF;
  --color-accent-primary:var(--color-blue-500);
  --color-accent-subtle:var(--color-blue-100);
  --color-accent-border:var(--color-blue-500);
  --color-accent-text:var(--color-blue-700);
  --color-text-on-accent-solid:#FFFFFF;
  --color-bg-brand:var(--color-blue-900);
  --color-border-focus:var(--color-blue-500);
  --color-text-brand:var(--color-blue-900);
  --color-focus-ring:var(--color-blue-500);
}
.uds-scope[data-uds-product="profesores-premium"]{
  --color-brand-primary:var(--color-blue-900);
  --color-brand-primary-hover:var(--color-blue-800);
  --color-brand-primary-active:var(--color-blue-700);
  --color-brand-primary-subtle:var(--color-blue-100);
  --color-brand-primary-border:var(--color-blue-200);
  --color-brand-primary-border-hover:var(--color-blue-400);
  --color-brand-primary-text-strong:var(--color-blue-900);
  --color-brand-on-primary:#FFFFFF;
  --color-accent-primary:var(--color-aquamarine-600);
  --color-accent-primary-hover:var(--color-aquamarine-700);
  --color-accent-primary-active:var(--color-aquamarine-800);
  --color-accent-subtle:var(--color-aquamarine-100);
  --color-accent-border:var(--color-aquamarine-600);
  --color-accent-text:var(--color-aquamarine-800); /* corrección AA (real: 700 → 4.48:1) */
  --color-text-on-accent-solid:#FFFFFF;
  --color-bg-brand:var(--color-blue-900);
  --color-border-focus:var(--color-aquamarine-600);
  --color-text-brand:var(--color-blue-900);
  --color-focus-ring:var(--color-aquamarine-600);
}
.uds-scope[data-uds-product="premium"]{
  --color-brand-primary:var(--color-indigo-500);
  --color-brand-primary-hover:var(--color-indigo-600);
  --color-brand-primary-active:var(--color-indigo-700);
  --color-brand-primary-subtle:var(--color-indigo-100);
  --color-brand-primary-border:var(--color-indigo-200);
  --color-brand-primary-border-hover:var(--color-indigo-400);
  --color-brand-primary-text-strong:var(--color-indigo-700);
  --color-brand-on-primary:#FFFFFF;
  --color-accent-primary:var(--color-orange-peel-500);
  --color-accent-primary-hover:var(--color-orange-peel-600);
  --color-accent-primary-active:var(--color-orange-peel-700);
  --color-accent-subtle:var(--color-orange-peel-100);
  --color-accent-border:var(--color-orange-peel-600);
  --color-accent-text:var(--color-orange-peel-800); /* corrección AA (real: 700 → 3.9:1) */
  --color-text-on-accent-solid:var(--color-orange-peel-900);
  --color-bg-brand:var(--color-indigo-500);
  --color-border-focus:var(--color-indigo-500);
  --color-text-brand:var(--color-indigo-500);
  --color-focus-ring:var(--color-indigo-500);
  --color-feedback-info:var(--color-capri-500);
  --color-feedback-info-subtle:var(--color-capri-100);
  --color-feedback-info-border:var(--color-capri-200);
  --color-feedback-info-text:var(--color-capri-700);
}

/* Dark × producto — en el cascade plano (producto después de dark) las
   marcas oscuras (blue-900, indigo-500) quedarían sobre superficie oscura
   sin contraste. Estos overrides combinados aplican la misma regla del
   dark base — subir stops hasta sostener AA — por producto. */
.uds-scope[data-uds-theme="dark"][data-uds-product="profesores"],
.uds-scope[data-uds-theme="dark"][data-uds-product="profesores-premium"]{
  --color-brand-primary:var(--color-blue-300);
  --color-brand-primary-hover:var(--color-blue-200);
  --color-brand-primary-active:var(--color-blue-100);
  --color-brand-primary-subtle:rgba(88,144,255,0.12);
  --color-brand-primary-border:rgba(88,144,255,0.32);
  --color-brand-primary-border-hover:var(--color-blue-200);
  --color-brand-primary-text-strong:var(--color-blue-300);
  --color-brand-on-primary:#10003F;
  --color-bg-brand:var(--color-blue-300);
  --color-bg-brand-subtle:rgba(88,144,255,0.12);
  --color-border-brand-subtle:rgba(88,144,255,0.32);
  --color-text-brand:var(--color-blue-300);
}
.uds-scope[data-uds-theme="dark"][data-uds-product="profesores"]{
  --color-accent-primary:var(--color-blue-400);
  --color-accent-primary-hover:var(--color-blue-300);
  --color-accent-primary-active:var(--color-blue-200);
  --color-accent-subtle:rgba(88,144,255,0.12);
  --color-accent-border:rgba(88,144,255,0.40);
  --color-accent-text:var(--color-blue-300);
  --color-text-on-accent-solid:#0A1A3D;
  --color-border-focus:var(--color-blue-400);
  --color-focus-ring:var(--color-blue-400);
}
.uds-scope[data-uds-theme="dark"][data-uds-product="profesores-premium"]{
  --color-accent-primary:var(--color-aquamarine-400);
  --color-accent-primary-hover:var(--color-aquamarine-300);
  --color-accent-primary-active:var(--color-aquamarine-200);
  --color-accent-subtle:rgba(61,220,151,0.12);
  --color-accent-border:rgba(61,220,151,0.40);
  --color-accent-text:var(--color-aquamarine-300);
  --color-text-on-accent-solid:#072526;
  --color-border-focus:var(--color-aquamarine-400);
  --color-focus-ring:var(--color-aquamarine-400);
}
.uds-scope[data-uds-theme="dark"][data-uds-product="premium"]{
  /* indigo es más oscuro que blue: sube dos stops (500→300) para AA */
  --color-brand-primary:var(--color-indigo-300);
  --color-brand-primary-hover:var(--color-indigo-200);
  --color-brand-primary-active:var(--color-indigo-100);
  --color-brand-primary-subtle:rgba(174,112,255,0.14);
  --color-brand-primary-border:rgba(174,112,255,0.40);
  --color-brand-primary-border-hover:var(--color-indigo-200);
  --color-brand-primary-text-strong:var(--color-indigo-300);
  --color-brand-on-primary:#250466;
  --color-bg-brand:var(--color-indigo-300);
  --color-bg-brand-subtle:rgba(174,112,255,0.14);
  --color-border-brand-subtle:rgba(174,112,255,0.40);
  --color-text-brand:var(--color-indigo-300);
  --color-border-focus:var(--color-indigo-300);
  --color-focus-ring:var(--color-indigo-300);
  --color-accent-primary:var(--color-orange-peel-400);
  --color-accent-primary-hover:var(--color-orange-peel-300);
  --color-accent-primary-active:var(--color-orange-peel-200);
  --color-accent-subtle:rgba(255,162,0,0.14);
  --color-accent-border:rgba(255,162,0,0.40);
  --color-accent-text:var(--color-orange-peel-300);
  --color-text-on-accent-solid:#571700;
  --color-feedback-info:var(--color-capri-400);
  --color-feedback-info-subtle:rgba(102,219,255,0.14);
  --color-feedback-info-border:rgba(102,219,255,0.40);
  --color-feedback-info-text:var(--color-capri-300);
}

/* ═══════════════════════════════════════════════════════════════
   uds-v2 — COMPONENTES REALES (components/*.css, scoped)
   button · card · badge · tag · field/input · alert
═══════════════════════════════════════════════════════════════ */
.uds-scope{font-family:var(--font-family-sans);color:var(--color-text-primary)}
/* guard: los estilos de párrafo y lista del caso (.bloque p / .bloque li)
   no deben filtrarse a las demos — mismo peso, pero esta hoja carga después */
figure.demo p{margin:0;max-width:none;color:inherit}
figure.demo li{margin:0;padding-left:0;max-width:none}
figure.demo li::before{content:none}
.uds-scene{
  display:block;background:var(--color-bg-page);
  border:1px solid var(--color-border-default);border-radius:var(--radius-10);
  padding:var(--space-10);transition:background .25s,border-color .25s;
}
.d1-hoy{display:inline-flex}

/* Button */
.uds-scope .uds-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:36px;padding-inline:var(--space-6);
  border:1px solid transparent;border-radius:var(--radius-8);background:transparent;
  font-family:var(--font-family-sans);font-size:var(--font-size-13);
  font-weight:var(--font-weight-medium);line-height:1;
  color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;
  transition:background var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out);
  outline:none;
}
.uds-scope .uds-button:focus-visible{
  box-shadow:0 0 0 3px var(--color-focus-ring-offset),0 0 0 5px var(--color-focus-ring);
  outline:none;
}
.uds-scope .uds-button--primary{
  background:var(--color-brand-primary);color:var(--color-brand-on-primary);
  border-color:var(--color-brand-primary);
}
.uds-scope .uds-button--primary:hover{
  background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover);
}
.uds-scope .uds-button--primary:active{
  background:var(--color-brand-primary-active);border-color:var(--color-brand-primary-active);
}
.uds-scope .uds-button--outline{
  background:transparent;color:var(--color-text-secondary);
  border-color:var(--color-border-default);
}
.uds-scope .uds-button--outline:hover{
  background:var(--color-brand-primary-subtle);color:var(--color-brand-primary);
  border-color:var(--color-brand-primary-border-hover);
}
.uds-scope .uds-button--ghost{background:transparent;color:var(--color-text-secondary);border-color:transparent}
.uds-scope .uds-button--ghost:hover{background:var(--color-bg-subtle);color:var(--color-text-primary)}
.uds-scope .uds-button:disabled{opacity:.4;cursor:not-allowed}
.uds-scope .uds-button--primary:disabled:hover{background:var(--color-brand-primary);border-color:var(--color-brand-primary)}
.uds-scope .uds-button--sm{height:32px;padding-inline:var(--space-5);font-size:var(--font-size-12)}

/* Card */
.uds-scope .uds-card{
  display:block;
  background:var(--color-bg-default);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-10);
  padding:var(--space-10) var(--space-12);
  transition:background .25s,border-color .25s;
}
.uds-scope .uds-card-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-6);margin-bottom:var(--space-8);
}
.uds-scope .uds-card-title{
  font-family:var(--font-family-display);font-size:var(--font-size-15);
  font-weight:var(--font-weight-semibold);color:var(--color-text-primary);
  margin:0;letter-spacing:-.005em;
}
.uds-scope .uds-card-subtitle{font-size:var(--font-size-12);color:var(--color-text-secondary);margin:2px 0 0}
.uds-scope .uds-card-body{display:block;font-size:var(--font-size-13);color:var(--color-text-secondary);line-height:var(--line-height-normal)}
.uds-scope .uds-card--featured{
  background:linear-gradient(135deg,var(--color-brand-primary-subtle) 0%,var(--color-bg-default) 60%);
  border:1px solid var(--color-border-brand-subtle);
}
.uds-scope .uds-card--elevated{border-color:transparent;box-shadow:var(--shadow-sm)}
.uds-scope .uds-card-footer{
  display:flex;align-items:center;gap:var(--space-4);
  margin-top:var(--space-8);padding-top:var(--space-8);
  border-top:1px solid var(--color-border-default);
}

/* Stat (KPI primitive) */
.uds-scope .uds-stat{display:flex;flex-direction:column;gap:var(--space-2)}
.uds-scope .uds-stat-value{
  font-family:var(--font-family-display);font-size:var(--font-size-24);
  font-weight:var(--font-weight-bold);color:var(--color-text-primary);
  line-height:var(--line-height-tight);letter-spacing:-.01em;
}
.uds-scope .uds-stat--brand .uds-stat-value{color:var(--color-brand-primary)}
.uds-scope .uds-stat-label{font-size:var(--font-size-12);color:var(--color-text-secondary)}
.uds-scope .uds-stat-delta{
  display:inline-flex;align-items:center;gap:2px;
  font-size:var(--font-size-11);font-weight:var(--font-weight-medium);
}
.uds-scope .uds-stat-delta--up{color:var(--color-feedback-success-text)}
.uds-scope .uds-stat-delta--down{color:var(--color-feedback-error-text)}
.uds-scope .uds-stat-delta--flat{color:var(--color-text-tertiary)}

/* Badge & Tag */
.uds-scope .uds-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:20px;padding-inline:var(--space-4);
  border-radius:var(--radius-6);border:1px solid transparent;
  font-family:var(--font-family-sans);font-size:var(--font-size-11);
  font-weight:var(--font-weight-semibold);line-height:1;white-space:nowrap;letter-spacing:.01em;
}
.uds-scope .uds-badge--neutral{background:var(--color-bg-subtle);color:var(--color-text-secondary)}
.uds-scope .uds-badge--info{background:var(--color-feedback-info-subtle);color:var(--color-feedback-info-text)}
.uds-scope .uds-badge--success{background:var(--color-feedback-success-subtle);color:var(--color-feedback-success-text)}
.uds-scope .uds-badge--warning{background:var(--color-feedback-warning-subtle);color:var(--color-feedback-warning-text)}
.uds-scope .uds-badge--danger{background:var(--color-feedback-error-subtle);color:var(--color-feedback-error-text)}
.uds-scope .uds-badge--accent{background:var(--color-accent-subtle);color:var(--color-accent-text)}
.uds-scope .uds-badge-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex-shrink:0}
.uds-scope .uds-tag{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:22px;padding-inline:var(--space-4);
  border-radius:var(--radius-6);border:1px solid transparent;
  background:var(--color-bg-subtle);color:var(--color-text-secondary);
  font-family:var(--font-family-sans);font-size:var(--font-size-11);
  font-weight:var(--font-weight-regular);line-height:1;white-space:nowrap;
}
.uds-scope .uds-tag--bordered{background:var(--color-bg-default);border-color:var(--color-border-default)}

/* Field + Input */
.uds-scope .uds-field{display:flex;flex-direction:column;gap:var(--space-2)}
.uds-scope .uds-field-label{
  font-family:var(--font-family-sans);font-size:var(--font-size-12);
  font-weight:var(--font-weight-medium);color:var(--color-text-primary);
}
.uds-scope .uds-input{
  width:100%;height:36px;padding:0 var(--space-6);
  border:1px solid var(--color-border-default);border-radius:var(--radius-8);
  background:var(--color-bg-default);
  font-family:var(--font-family-sans);font-size:var(--font-size-13);
  color:var(--color-text-primary);
  transition:border-color var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
  appearance:none;-webkit-appearance:none;
}
.uds-scope .uds-input--sm{height:32px;padding:0 var(--space-5);font-size:var(--font-size-12)}
.uds-scope .uds-input::placeholder{color:var(--color-text-tertiary)}
.uds-scope .uds-input:hover{border-color:var(--color-border-default-hover)}
.uds-scope .uds-input:focus-visible{
  border-color:var(--color-border-focus);
  box-shadow:0 0 0 3px var(--color-brand-primary-subtle);outline:none;
}
.uds-scope .uds-input:disabled{
  background:var(--color-bg-disabled);color:var(--color-text-disabled);
  cursor:not-allowed;opacity:1;
}
.uds-scope .uds-input.is-invalid{border-color:var(--color-feedback-error)}
.uds-scope .uds-field-error{
  font-size:var(--font-size-11);color:var(--color-feedback-error-text);
  line-height:var(--line-height-normal);
}

/* Alert */
.uds-scope .uds-alert{
  display:flex;align-items:flex-start;gap:var(--space-5);
  padding:var(--space-6) var(--space-8);
  border:1px solid;border-radius:var(--radius-8);
  font-size:var(--font-size-13);line-height:var(--line-height-normal);
}
.uds-scope .uds-alert-icon{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-top:1px;
}
.uds-scope .uds-alert-content{flex:1;min-width:0}
.uds-scope .uds-alert-title{
  font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 2px;
}
.uds-scope .uds-alert-text{font-size:var(--font-size-13);line-height:var(--line-height-normal);margin:0}
.uds-scope .uds-alert--warning{
  background:var(--color-feedback-warning-subtle);
  border-color:var(--color-feedback-warning-border);
  color:var(--color-feedback-warning-text);
}
.uds-scope .uds-alert--info{
  background:var(--color-feedback-info-subtle);
  border-color:var(--color-feedback-info-border);
  color:var(--color-feedback-info-text);
}
.uds-scope .uds-alert--danger{
  background:var(--color-feedback-error-subtle);
  border-color:var(--color-feedback-error-border);
  color:var(--color-feedback-error-text);
}