/*! dsUIKit v0.1.0 | MIT */
@layer ds.reset, ds.tokens, ds.base, ds.layout, ds.components, ds.utilities;
@layer ds.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }
  img,
  video {
    height: auto;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  textarea {
    resize: vertical;
  }
  table {
    border-collapse: collapse;
  }
  [hidden]:not([hidden=until-found]) {
    display: none !important;
  }
}
@layer ds.tokens {
  :root {
    /* Color de interacción: botones, enlaces y foco. */
    --ds-color-primary: #007cbd;
    /* Primary en hover y estado activo. */
    --ds-color-primary-hover: #025b8b;
    /* Texto sobre primary. */
    --ds-color-primary-contrast: #fff;
    /* Color secundario de acciones. */
    --ds-color-secondary: #ffc107;
    /* Secondary en hover y estado activo. */
    --ds-color-secondary-hover: #c99807;
    /* Texto sobre secondary. */
    --ds-color-secondary-contrast: #000;
    /* Inicio del degradado de marca. */
    --ds-color-brand-start: #932771;
    /* Fin del degradado de marca. */
    --ds-color-brand-end: #662d91;
    /* Degradado de identidad (heros, cabeceras, firmas). */
    --ds-gradient-brand: linear-gradient(41deg, var(--ds-color-brand-start), var(--ds-color-brand-end));
    /* Éxito: color base. */
    --ds-color-success: #529c4e;
    /* Éxito: fondo suave. */
    --ds-color-success-bg: #eaffe9;
    /* Éxito: borde. */
    --ds-color-success-border: #96cf93;
    /* Éxito: tono fuerte (hover, texto sobre fondo suave). */
    --ds-color-success-strong: #3a7d3a;
    /* Texto sobre success. */
    --ds-color-success-contrast: #fff;
    /* Error: color base. */
    --ds-color-danger: #bb4848;
    /* Error: fondo suave. */
    --ds-color-danger-bg: #ffe9e9;
    /* Error: borde. */
    --ds-color-danger-border: #f0baba;
    /* Error: tono fuerte. */
    --ds-color-danger-strong: #920a0a;
    /* Texto sobre danger. */
    --ds-color-danger-contrast: #fff;
    /* Advertencia: color base. */
    --ds-color-warning: #ffc107;
    /* Advertencia: fondo suave. */
    --ds-color-warning-bg: #fffbe9;
    /* Advertencia: borde. */
    --ds-color-warning-border: #eedd91;
    /* Advertencia: tono fuerte. */
    --ds-color-warning-strong: #c99807;
    /* Texto sobre warning. */
    --ds-color-warning-contrast: #000;
    /* Información: color base. */
    --ds-color-info: #95cfe6;
    /* Información: fondo suave. */
    --ds-color-info-bg: #dff6ff;
    /* Información: borde. */
    --ds-color-info-border: #d6eafd;
    /* Información: tono fuerte. */
    --ds-color-info-strong: #4c85b6;
    /* Texto sobre info. */
    --ds-color-info-contrast: #000;
    /* Texto principal. */
    --ds-color-text: #1e1e1e;
    /* Texto secundario (ayudas, fechas, notas). */
    --ds-color-text-muted: #6d6d6d;
    /* Fondo de la página. */
    --ds-color-body-bg: #fff;
    /* Fondo de cards, menús y modales. */
    --ds-color-surface: #fff;
    /* Bordes y separadores. */
    --ds-color-border: #e5e7eb;
  }
}
@layer ds.tokens {
  :root {
    /* Fuente del texto. */
    --ds-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Fuente de los títulos. */
    --ds-font-family-heading: var(--ds-font-family-base);
    /* 12–13 px */
    --ds-font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    /* 14–15 px */
    --ds-font-size-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
    /* 16 px */
    --ds-font-size-base: 1rem;
    /* 18–20 px */
    --ds-font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    /* 24–32 px */
    --ds-font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    /* 32–48 px */
    --ds-font-size-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    /* 40–64 px */
    --ds-font-size-3xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    /* Peso normal. */
    --ds-font-weight-regular: 400;
    /* Peso medio. */
    --ds-font-weight-medium: 500;
    /* Peso seminegrita. */
    --ds-font-weight-semibold: 600;
    /* Peso negrita (títulos). */
    --ds-font-weight-bold: 700;
    /* Interlineado de títulos. */
    --ds-line-height-tight: 1.1;
    /* Interlineado general. */
    --ds-line-height-base: 1.5;
    /* Interlineado de párrafos. */
    --ds-line-height-relaxed: 1.7;
  }
}
@layer ds.tokens {
  :root {
    /* 6 px */
    --ds-radius-sm: 6px;
    /* 8 px */
    --ds-radius-md: 0.5rem;
    /* 16 px (cards) */
    --ds-radius-lg: 1rem;
    /* 32 px */
    --ds-radius-xl: 2rem;
    /* Píldora (botones e inputs). */
    --ds-radius-full: 999px;
    /* 4 px */
    --ds-space-1: 0.25rem;
    /* 8 px */
    --ds-space-2: 0.5rem;
    /* 12 px */
    --ds-space-3: 0.75rem;
    /* 16 px */
    --ds-space-4: 1rem;
    /* 24 px */
    --ds-space-5: 1.5rem;
    /* 32 px */
    --ds-space-6: 2rem;
    /* 48 px */
    --ds-space-7: 3rem;
    /* 64 px */
    --ds-space-8: 4rem;
    /* Cards. */
    --ds-shadow-sm: 0 0.5em 1em -0.125em rgb(10 10 10 / 0.1), 0 0 0 1px rgb(10 10 10 / 0.02);
    /* Menús desplegables. */
    --ds-shadow-md: 0 0.5rem 1rem rgb(0 0 0 / 0.1);
    /* Modales y elementos flotantes. */
    --ds-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.175);
    --ds-z-dropdown: 1000;
    --ds-z-sticky: 1020;
    --ds-z-fixed: 1030;
    --ds-z-overlay: 1040;
    --ds-z-modal: 1050;
    --ds-z-popover: 1070;
    --ds-z-toast: 1090;
    --ds-z-loader: 1100;
    /* Hover, foco y cambios de color. */
    --ds-duration-fast: 0.2s;
    /* Paneles y desplazamientos. */
    --ds-duration-base: 0.35s;
    /* Entradas y salidas grandes. */
    --ds-duration-slow: 0.5s;
    --ds-easing: ease;
  }
}
@layer ds.base {
  body {
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-font-size-base);
    font-weight: var(--ds-font-weight-regular);
    line-height: var(--ds-line-height-base);
    color: var(--ds-color-text);
    background-color: var(--ds-color-body-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: var(--ds-space-2);
    font-family: var(--ds-font-family-heading);
    font-weight: var(--ds-font-weight-bold);
    line-height: var(--ds-line-height-tight);
  }
  p {
    margin-top: 0;
    margin-bottom: var(--ds-space-4);
    line-height: var(--ds-line-height-relaxed);
  }
  a {
    color: var(--ds-color-primary);
    text-underline-offset: 0.15em;
  }
  a:hover {
    color: var(--ds-color-primary-hover);
  }
  hr {
    margin: var(--ds-space-4) 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
  }
  :focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
  }
  ::selection {
    background-color: var(--ds-color-primary);
    color: var(--ds-color-primary-contrast);
  }
}
@layer ds.layout {
  .container {
    /* Ancho máximo. Hasta md es 100 %; desde md: 768, 992, 1200 y 1408 px. */
    --ds-container-max-width: 100%;
    /* Espacio a los lados. */
    --ds-container-padding-x: var(--ds-space-4);
    width: 100%;
    max-width: var(--ds-container-max-width);
    margin-inline: auto;
    padding-inline: var(--ds-container-padding-x);
  }
  @media (min-width: 768px) {
    .container {
      --ds-container-max-width: 768px;
    }
  }
  @media (min-width: 992px) {
    .container {
      --ds-container-max-width: 992px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      --ds-container-max-width: 1200px;
    }
  }
  @media (min-width: 1408px) {
    .container {
      --ds-container-max-width: 1408px;
    }
  }
  .container--fluid {
    --ds-container-max-width: 100%;
  }
}
@layer ds.layout {
  .row {
    /* Espacio horizontal entre columnas. */
    --ds-row-gap-x: var(--ds-space-6);
    /* Espacio vertical entre columnas que bajan de línea y entre filas seguidas. */
    --ds-row-gap-y: var(--ds-space-4);
    /* Alineación vertical de las columnas (align-items). */
    --ds-row-align: stretch;
    /* Alineación horizontal de las columnas (justify-content). */
    --ds-row-justify: flex-start;
    display: flex;
    flex-wrap: wrap;
    align-items: var(--ds-row-align);
    justify-content: var(--ds-row-justify);
    gap: var(--ds-row-gap-y) var(--ds-row-gap-x);
  }
  .row + .row {
    margin-top: var(--ds-row-gap-y);
  }
  :where(.row) > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  .row--gapless {
    --ds-row-gap-x: 0px;
    --ds-row-gap-y: 0px;
  }
  .row--align-start {
    --ds-row-align: flex-start;
  }
  .row--align-center {
    --ds-row-align: center;
  }
  .row--align-end {
    --ds-row-align: flex-end;
  }
  .row--justify-center {
    --ds-row-justify: center;
  }
  .row--justify-end {
    --ds-row-justify: flex-end;
  }
  .row--justify-between {
    --ds-row-justify: space-between;
  }
  .column {
    flex: 1 1 0;
  }
  .column-auto {
    flex: 0 0 auto;
  }
  .column-1 {
    flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
  }
  .column-2 {
    flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
  }
  .column-3 {
    flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
  }
  .column-4 {
    flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
  }
  .column-5 {
    flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
  }
  .column-6 {
    flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
  }
  .column-7 {
    flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
  }
  .column-8 {
    flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
  }
  .column-9 {
    flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
  }
  .column-10 {
    flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
  }
  .column-11 {
    flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
  }
  .column-12 {
    flex: 0 0 100%;
  }
  .order-first {
    order: -1;
  }
  .order-0 {
    order: 0;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-3 {
    order: 3;
  }
  .order-4 {
    order: 4;
  }
  .order-5 {
    order: 5;
  }
  .order-last {
    order: 6;
  }
  @media (min-width: 576px) {
    .column-sm {
      flex: 1 1 0;
    }
    .column-sm-auto {
      flex: 0 0 auto;
    }
    .column-sm-1 {
      flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
    }
    .column-sm-2 {
      flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
    }
    .column-sm-3 {
      flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
    }
    .column-sm-4 {
      flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
    }
    .column-sm-5 {
      flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
    }
    .column-sm-6 {
      flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
    }
    .column-sm-7 {
      flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
    }
    .column-sm-8 {
      flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
    }
    .column-sm-9 {
      flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
    }
    .column-sm-10 {
      flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
    }
    .column-sm-11 {
      flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
    }
    .column-sm-12 {
      flex: 0 0 100%;
    }
    .order-sm-first {
      order: -1;
    }
    .order-sm-0 {
      order: 0;
    }
    .order-sm-1 {
      order: 1;
    }
    .order-sm-2 {
      order: 2;
    }
    .order-sm-3 {
      order: 3;
    }
    .order-sm-4 {
      order: 4;
    }
    .order-sm-5 {
      order: 5;
    }
    .order-sm-last {
      order: 6;
    }
  }
  @media (min-width: 768px) {
    .column-md {
      flex: 1 1 0;
    }
    .column-md-auto {
      flex: 0 0 auto;
    }
    .column-md-1 {
      flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
    }
    .column-md-2 {
      flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
    }
    .column-md-3 {
      flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
    }
    .column-md-4 {
      flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
    }
    .column-md-5 {
      flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
    }
    .column-md-6 {
      flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
    }
    .column-md-7 {
      flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
    }
    .column-md-8 {
      flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
    }
    .column-md-9 {
      flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
    }
    .column-md-10 {
      flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
    }
    .column-md-11 {
      flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
    }
    .column-md-12 {
      flex: 0 0 100%;
    }
    .order-md-first {
      order: -1;
    }
    .order-md-0 {
      order: 0;
    }
    .order-md-1 {
      order: 1;
    }
    .order-md-2 {
      order: 2;
    }
    .order-md-3 {
      order: 3;
    }
    .order-md-4 {
      order: 4;
    }
    .order-md-5 {
      order: 5;
    }
    .order-md-last {
      order: 6;
    }
  }
  @media (min-width: 992px) {
    .column-lg {
      flex: 1 1 0;
    }
    .column-lg-auto {
      flex: 0 0 auto;
    }
    .column-lg-1 {
      flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
    }
    .column-lg-2 {
      flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
    }
    .column-lg-3 {
      flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
    }
    .column-lg-4 {
      flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
    }
    .column-lg-5 {
      flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
    }
    .column-lg-6 {
      flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
    }
    .column-lg-7 {
      flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
    }
    .column-lg-8 {
      flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
    }
    .column-lg-9 {
      flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
    }
    .column-lg-10 {
      flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
    }
    .column-lg-11 {
      flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
    }
    .column-lg-12 {
      flex: 0 0 100%;
    }
    .order-lg-first {
      order: -1;
    }
    .order-lg-0 {
      order: 0;
    }
    .order-lg-1 {
      order: 1;
    }
    .order-lg-2 {
      order: 2;
    }
    .order-lg-3 {
      order: 3;
    }
    .order-lg-4 {
      order: 4;
    }
    .order-lg-5 {
      order: 5;
    }
    .order-lg-last {
      order: 6;
    }
  }
  @media (min-width: 1200px) {
    .column-xl {
      flex: 1 1 0;
    }
    .column-xl-auto {
      flex: 0 0 auto;
    }
    .column-xl-1 {
      flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
    }
    .column-xl-2 {
      flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
    }
    .column-xl-3 {
      flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
    }
    .column-xl-4 {
      flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
    }
    .column-xl-5 {
      flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
    }
    .column-xl-6 {
      flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
    }
    .column-xl-7 {
      flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
    }
    .column-xl-8 {
      flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
    }
    .column-xl-9 {
      flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
    }
    .column-xl-10 {
      flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
    }
    .column-xl-11 {
      flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
    }
    .column-xl-12 {
      flex: 0 0 100%;
    }
    .order-xl-first {
      order: -1;
    }
    .order-xl-0 {
      order: 0;
    }
    .order-xl-1 {
      order: 1;
    }
    .order-xl-2 {
      order: 2;
    }
    .order-xl-3 {
      order: 3;
    }
    .order-xl-4 {
      order: 4;
    }
    .order-xl-5 {
      order: 5;
    }
    .order-xl-last {
      order: 6;
    }
  }
  @media (min-width: 1408px) {
    .column-xxl {
      flex: 1 1 0;
    }
    .column-xxl-auto {
      flex: 0 0 auto;
    }
    .column-xxl-1 {
      flex: 0 0 calc(100% * 1 / 12 - var(--ds-row-gap-x) * 11 / 12);
    }
    .column-xxl-2 {
      flex: 0 0 calc(100% * 2 / 12 - var(--ds-row-gap-x) * 10 / 12);
    }
    .column-xxl-3 {
      flex: 0 0 calc(100% * 3 / 12 - var(--ds-row-gap-x) * 9 / 12);
    }
    .column-xxl-4 {
      flex: 0 0 calc(100% * 4 / 12 - var(--ds-row-gap-x) * 8 / 12);
    }
    .column-xxl-5 {
      flex: 0 0 calc(100% * 5 / 12 - var(--ds-row-gap-x) * 7 / 12);
    }
    .column-xxl-6 {
      flex: 0 0 calc(100% * 6 / 12 - var(--ds-row-gap-x) * 6 / 12);
    }
    .column-xxl-7 {
      flex: 0 0 calc(100% * 7 / 12 - var(--ds-row-gap-x) * 5 / 12);
    }
    .column-xxl-8 {
      flex: 0 0 calc(100% * 8 / 12 - var(--ds-row-gap-x) * 4 / 12);
    }
    .column-xxl-9 {
      flex: 0 0 calc(100% * 9 / 12 - var(--ds-row-gap-x) * 3 / 12);
    }
    .column-xxl-10 {
      flex: 0 0 calc(100% * 10 / 12 - var(--ds-row-gap-x) * 2 / 12);
    }
    .column-xxl-11 {
      flex: 0 0 calc(100% * 11 / 12 - var(--ds-row-gap-x) * 1 / 12);
    }
    .column-xxl-12 {
      flex: 0 0 100%;
    }
    .order-xxl-first {
      order: -1;
    }
    .order-xxl-0 {
      order: 0;
    }
    .order-xxl-1 {
      order: 1;
    }
    .order-xxl-2 {
      order: 2;
    }
    .order-xxl-3 {
      order: 3;
    }
    .order-xxl-4 {
      order: 4;
    }
    .order-xxl-5 {
      order: 5;
    }
    .order-xxl-last {
      order: 6;
    }
  }
}
@layer ds.components {
  .btn {
    /* Fondo. */
    --ds-btn-bg: color-mix(in srgb, var(--ds-color-text) 10%, var(--ds-color-surface));
    /* Color del texto y de los íconos. */
    --ds-btn-color: var(--ds-color-text);
    /* Color del borde. */
    --ds-btn-border-color: transparent;
    /* Fondo en hover y estado activo. */
    --ds-btn-hover-bg: color-mix(in srgb, var(--ds-color-text) 18%, var(--ds-color-surface));
    /* Texto en hover y estado activo. */
    --ds-btn-hover-color: var(--ds-btn-color);
    /* Borde en hover y estado activo. */
    --ds-btn-hover-border-color: var(--ds-btn-border-color);
    /* Espacio vertical interno. */
    --ds-btn-padding-y: 0.375rem;
    /* Espacio horizontal interno. */
    --ds-btn-padding-x: 0.75rem;
    /* Separación entre ícono y texto. */
    --ds-btn-gap: var(--ds-space-2);
    --ds-btn-font-family: var(--ds-font-family-base);
    --ds-btn-font-size: var(--ds-font-size-base);
    --ds-btn-font-weight: var(--ds-font-weight-regular);
    --ds-btn-line-height: var(--ds-line-height-base);
    /* Radio de las esquinas (píldora). */
    --ds-btn-radius: var(--ds-radius-full);
    /* Color del contorno de foco. */
    --ds-btn-focus-color: var(--ds-color-primary);
    /* Opacidad cuando está deshabilitado. */
    --ds-btn-disabled-opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-btn-gap);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    border: 1px solid var(--ds-btn-border-color);
    border-radius: var(--ds-btn-radius);
    background-color: var(--ds-btn-bg);
    color: var(--ds-btn-color);
    font-family: var(--ds-btn-font-family);
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    line-height: var(--ds-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing), border-color var(--ds-duration-fast) var(--ds-easing);
  }
  .btn:hover, .btn:active, .btn.is-active, .btn[aria-expanded=true], .btn[aria-pressed=true] {
    background-color: var(--ds-btn-hover-bg);
    color: var(--ds-btn-hover-color);
    border-color: var(--ds-btn-hover-border-color);
  }
  .btn:focus-visible {
    outline: 2px solid var(--ds-btn-focus-color);
    outline-offset: 2px;
  }
  .btn:disabled, .btn.is-disabled, .btn[aria-disabled=true] {
    opacity: var(--ds-btn-disabled-opacity);
    pointer-events: none;
  }
  .btn :where(svg) {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
  }
  .btn--primary {
    --ds-btn-bg: var(--ds-color-primary);
    --ds-btn-color: var(--ds-color-primary-contrast);
    --ds-btn-border-color: var(--ds-color-primary);
    --ds-btn-hover-bg: var(--ds-color-primary-hover);
    --ds-btn-hover-color: var(--ds-color-primary-contrast);
    --ds-btn-hover-border-color: var(--ds-color-primary-hover);
  }
  .btn--secondary {
    --ds-btn-bg: var(--ds-color-secondary);
    --ds-btn-color: var(--ds-color-secondary-contrast);
    --ds-btn-border-color: var(--ds-color-secondary);
    --ds-btn-hover-bg: var(--ds-color-secondary-hover);
    --ds-btn-hover-color: var(--ds-color-secondary-contrast);
    --ds-btn-hover-border-color: var(--ds-color-secondary-hover);
  }
  .btn--success {
    --ds-btn-bg: var(--ds-color-success);
    --ds-btn-color: var(--ds-color-success-contrast);
    --ds-btn-border-color: var(--ds-color-success);
    --ds-btn-hover-bg: var(--ds-color-success-strong);
    --ds-btn-hover-color: var(--ds-color-success-contrast);
    --ds-btn-hover-border-color: var(--ds-color-success-strong);
  }
  .btn--danger {
    --ds-btn-bg: var(--ds-color-danger);
    --ds-btn-color: var(--ds-color-danger-contrast);
    --ds-btn-border-color: var(--ds-color-danger);
    --ds-btn-hover-bg: var(--ds-color-danger-strong);
    --ds-btn-hover-color: var(--ds-color-danger-contrast);
    --ds-btn-hover-border-color: var(--ds-color-danger-strong);
  }
  .btn--warning {
    --ds-btn-bg: var(--ds-color-warning);
    --ds-btn-color: var(--ds-color-warning-contrast);
    --ds-btn-border-color: var(--ds-color-warning);
    --ds-btn-hover-bg: var(--ds-color-warning-strong);
    --ds-btn-hover-color: var(--ds-color-warning-contrast);
    --ds-btn-hover-border-color: var(--ds-color-warning-strong);
  }
  .btn--info {
    --ds-btn-bg: var(--ds-color-info);
    --ds-btn-color: var(--ds-color-info-contrast);
    --ds-btn-border-color: var(--ds-color-info);
    --ds-btn-hover-bg: var(--ds-color-info-strong);
    --ds-btn-hover-color: var(--ds-color-info-contrast);
    --ds-btn-hover-border-color: var(--ds-color-info-strong);
  }
  .btn--outline-primary {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-primary);
    --ds-btn-border-color: var(--ds-color-primary);
    --ds-btn-hover-bg: var(--ds-color-primary);
    --ds-btn-hover-color: var(--ds-color-primary-contrast);
    --ds-btn-hover-border-color: var(--ds-color-primary);
  }
  .btn--outline-secondary {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-secondary);
    --ds-btn-border-color: var(--ds-color-secondary);
    --ds-btn-hover-bg: var(--ds-color-secondary);
    --ds-btn-hover-color: var(--ds-color-secondary-contrast);
    --ds-btn-hover-border-color: var(--ds-color-secondary);
  }
  .btn--outline-success {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-success);
    --ds-btn-border-color: var(--ds-color-success);
    --ds-btn-hover-bg: var(--ds-color-success);
    --ds-btn-hover-color: var(--ds-color-success-contrast);
    --ds-btn-hover-border-color: var(--ds-color-success);
  }
  .btn--outline-danger {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-danger);
    --ds-btn-border-color: var(--ds-color-danger);
    --ds-btn-hover-bg: var(--ds-color-danger);
    --ds-btn-hover-color: var(--ds-color-danger-contrast);
    --ds-btn-hover-border-color: var(--ds-color-danger);
  }
  .btn--outline-warning {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-warning);
    --ds-btn-border-color: var(--ds-color-warning);
    --ds-btn-hover-bg: var(--ds-color-warning);
    --ds-btn-hover-color: var(--ds-color-warning-contrast);
    --ds-btn-hover-border-color: var(--ds-color-warning);
  }
  .btn--outline-info {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-info);
    --ds-btn-border-color: var(--ds-color-info);
    --ds-btn-hover-bg: var(--ds-color-info);
    --ds-btn-hover-color: var(--ds-color-info-contrast);
    --ds-btn-hover-border-color: var(--ds-color-info);
  }
  .btn--ghost {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-primary);
    --ds-btn-border-color: transparent;
    --ds-btn-hover-bg: color-mix(in srgb, var(--ds-color-primary) 10%, transparent);
    --ds-btn-hover-color: var(--ds-color-primary-hover);
  }
  .btn--link {
    --ds-btn-bg: transparent;
    --ds-btn-color: var(--ds-color-primary);
    --ds-btn-border-color: transparent;
    --ds-btn-hover-bg: transparent;
    --ds-btn-hover-color: var(--ds-color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .btn--sm {
    --ds-btn-padding-y: 0.25rem;
    --ds-btn-padding-x: 0.5rem;
    --ds-btn-font-size: var(--ds-font-size-sm);
    --ds-btn-line-height: 1.25;
    --ds-btn-gap: 0.375rem;
  }
  .btn--lg {
    --ds-btn-padding-y: 0.75rem;
    --ds-btn-padding-x: 1.25rem;
    --ds-btn-font-size: var(--ds-font-size-lg);
    --ds-btn-gap: 0.625rem;
  }
  .btn--block {
    display: flex;
    width: 100%;
  }
  .btn--icon {
    --ds-btn-padding-x: var(--ds-btn-padding-y);
  }
  .btn--icon :where(svg) {
    width: calc(var(--ds-btn-line-height) * 1em);
    height: calc(var(--ds-btn-line-height) * 1em);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
  }
}
@layer ds.components {
  .badge {
    /* Fondo. */
    --ds-badge-bg: color-mix(in srgb, var(--ds-color-text) 8%, var(--ds-color-surface));
    /* Color del texto. */
    --ds-badge-color: var(--ds-color-text);
    /* Color del borde. */
    --ds-badge-border-color: transparent;
    /* Fondo de la versión sólida (badge--solid). */
    --ds-badge-solid-bg: var(--ds-color-text);
    /* Texto de la versión sólida. */
    --ds-badge-solid-color: var(--ds-color-surface);
    /* Espacio vertical interno. */
    --ds-badge-padding-y: 0.3rem;
    /* Espacio horizontal interno. */
    --ds-badge-padding-x: 1rem;
    /* Separación entre ícono y texto. */
    --ds-badge-gap: 0.375rem;
    --ds-badge-font-size: var(--ds-font-size-sm);
    --ds-badge-font-weight: var(--ds-font-weight-regular);
    --ds-badge-line-height: var(--ds-line-height-base);
    /* Radio de las esquinas (píldora). */
    --ds-badge-radius: var(--ds-radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--ds-badge-gap);
    padding: var(--ds-badge-padding-y) var(--ds-badge-padding-x);
    border: 1px solid var(--ds-badge-border-color);
    border-radius: var(--ds-badge-radius);
    background-color: var(--ds-badge-bg);
    color: var(--ds-badge-color);
    font-size: var(--ds-badge-font-size);
    font-weight: var(--ds-badge-font-weight);
    line-height: var(--ds-badge-line-height);
    white-space: nowrap;
    vertical-align: middle;
  }
  .badge :where(svg) {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
  }
  .badge--primary {
    --ds-badge-bg: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
    --ds-badge-border-color: color-mix(in srgb, var(--ds-color-primary) 35%, var(--ds-color-surface));
    --ds-badge-color: var(--ds-color-primary-hover);
    --ds-badge-solid-bg: var(--ds-color-primary);
    --ds-badge-solid-color: var(--ds-color-primary-contrast);
  }
  .badge--secondary {
    --ds-badge-bg: color-mix(in srgb, var(--ds-color-secondary) 12%, var(--ds-color-surface));
    --ds-badge-border-color: color-mix(in srgb, var(--ds-color-secondary) 35%, var(--ds-color-surface));
    --ds-badge-color: var(--ds-color-secondary-hover);
    --ds-badge-solid-bg: var(--ds-color-secondary);
    --ds-badge-solid-color: var(--ds-color-secondary-contrast);
  }
  .badge--success {
    --ds-badge-bg: var(--ds-color-success-bg);
    --ds-badge-border-color: var(--ds-color-success-border);
    --ds-badge-color: var(--ds-color-success-strong);
    --ds-badge-solid-bg: var(--ds-color-success);
    --ds-badge-solid-color: var(--ds-color-success-contrast);
  }
  .badge--danger {
    --ds-badge-bg: var(--ds-color-danger-bg);
    --ds-badge-border-color: var(--ds-color-danger-border);
    --ds-badge-color: var(--ds-color-danger-strong);
    --ds-badge-solid-bg: var(--ds-color-danger);
    --ds-badge-solid-color: var(--ds-color-danger-contrast);
  }
  .badge--warning {
    --ds-badge-bg: var(--ds-color-warning-bg);
    --ds-badge-border-color: var(--ds-color-warning-border);
    --ds-badge-color: var(--ds-color-warning-strong);
    --ds-badge-solid-bg: var(--ds-color-warning);
    --ds-badge-solid-color: var(--ds-color-warning-contrast);
  }
  .badge--info {
    --ds-badge-bg: var(--ds-color-info-bg);
    --ds-badge-border-color: var(--ds-color-info-border);
    --ds-badge-color: var(--ds-color-info-strong);
    --ds-badge-solid-bg: var(--ds-color-info);
    --ds-badge-solid-color: var(--ds-color-info-contrast);
  }
  .badge--solid {
    --ds-badge-bg: var(--ds-badge-solid-bg);
    --ds-badge-color: var(--ds-badge-solid-color);
    --ds-badge-border-color: var(--ds-badge-solid-bg);
  }
  .badge--sm {
    --ds-badge-padding-y: 0.2rem;
    --ds-badge-padding-x: 0.5rem;
    --ds-badge-font-size: var(--ds-font-size-xs);
    --ds-badge-gap: 0.25rem;
  }
}
@layer ds.components {
  .message {
    /* Fondo. */
    --ds-message-bg: color-mix(in srgb, var(--ds-color-text) 8%, var(--ds-color-surface));
    /* Color del texto y de los íconos. */
    --ds-message-color: var(--ds-color-text);
    /* Color del borde. */
    --ds-message-border-color: transparent;
    /* Espacio vertical interno. */
    --ds-message-padding-y: 0.75rem;
    /* Espacio horizontal interno. */
    --ds-message-padding-x: 1rem;
    /* Separación entre ícono y contenido. */
    --ds-message-gap: 0.75rem;
    /* Margen inferior (separa mensajes seguidos). */
    --ds-message-margin-bottom: var(--ds-space-2);
    --ds-message-font-size: var(--ds-font-size-sm);
    --ds-message-radius: var(--ds-radius-md);
    /* Tamaño del botón para cerrar (message__close). */
    --ds-message-close-size: 2rem;
    /* Duración del fundido al cerrar o mostrar con JS. */
    --ds-message-transition-duration: var(--ds-duration-fast);
    position: relative;
    margin-bottom: var(--ds-message-margin-bottom);
    padding: var(--ds-message-padding-y) var(--ds-message-padding-x);
    border: 1px solid var(--ds-message-border-color);
    border-radius: var(--ds-message-radius);
    background-color: var(--ds-message-bg);
    color: var(--ds-message-color);
    font-size: var(--ds-message-font-size);
    line-height: var(--ds-line-height-base);
    transition: opacity var(--ds-message-transition-duration) var(--ds-easing);
  }
  .message[hidden] {
    display: none;
  }
  .message.is-opening, .message.is-closing {
    opacity: 0;
  }
  .message > :first-child, .message .message__content > :first-child {
    margin-top: 0;
  }
  .message > :last-child, .message .message__content > :last-child {
    margin-bottom: 0;
  }
  .message a {
    color: inherit;
    font-weight: var(--ds-font-weight-semibold);
    text-decoration: underline;
  }
  .message > :nth-child(1 of :not(.message__close)) {
    margin-top: 0;
  }
  .message > :nth-last-child(1 of :not(.message__close)) {
    margin-bottom: 0;
  }
  .message--dismissible {
    padding-right: calc(var(--ds-message-padding-x) + var(--ds-message-close-size));
  }
  .message__close {
    position: absolute;
    top: calc(var(--ds-message-padding-y) / 2);
    right: calc(var(--ds-message-padding-x) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-message-close-size);
    height: var(--ds-message-close-size);
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .message__close::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.75' d='m1.5 1.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .message__close:hover {
    opacity: 1;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .message__close:focus-visible {
    opacity: 1;
  }
  .message__title {
    display: block;
    margin: 0 0 var(--ds-space-1);
    font-size: inherit;
    font-weight: var(--ds-font-weight-semibold);
    line-height: inherit;
  }
  .message--icon {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-message-gap);
  }
  .message__icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.125em;
  }
  .message__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .message--primary {
    --ds-message-bg: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
    --ds-message-border-color: color-mix(in srgb, var(--ds-color-primary) 35%, var(--ds-color-surface));
    --ds-message-color: var(--ds-color-primary-hover);
  }
  .message--secondary {
    --ds-message-bg: color-mix(in srgb, var(--ds-color-secondary) 12%, var(--ds-color-surface));
    --ds-message-border-color: color-mix(in srgb, var(--ds-color-secondary) 35%, var(--ds-color-surface));
    --ds-message-color: var(--ds-color-secondary-hover);
  }
  .message--success {
    --ds-message-bg: var(--ds-color-success-bg);
    --ds-message-border-color: var(--ds-color-success-border);
    --ds-message-color: var(--ds-color-success-strong);
  }
  .message--danger {
    --ds-message-bg: var(--ds-color-danger-bg);
    --ds-message-border-color: var(--ds-color-danger-border);
    --ds-message-color: var(--ds-color-danger-strong);
  }
  .message--warning {
    --ds-message-bg: var(--ds-color-warning-bg);
    --ds-message-border-color: var(--ds-color-warning-border);
    --ds-message-color: var(--ds-color-warning-strong);
  }
  .message--info {
    --ds-message-bg: var(--ds-color-info-bg);
    --ds-message-border-color: var(--ds-color-info-border);
    --ds-message-color: var(--ds-color-info-strong);
  }
  @media (prefers-reduced-motion: reduce) {
    .message,
    .message__close {
      transition: none;
    }
  }
}
@layer ds.components {
  .card {
    /* Fondo. */
    --ds-card-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-card-color: inherit;
    /* Color del borde. */
    --ds-card-border-color: var(--ds-color-border);
    /* Grosor del borde. */
    --ds-card-border-width: 1px;
    /* Radio de las esquinas. */
    --ds-card-radius: var(--ds-radius-lg);
    /* Sombra. */
    --ds-card-shadow: none;
    /* Espacio interno de cuerpo, cabecera y pie. */
    --ds-card-padding: var(--ds-space-4);
    /* Separación entre las partes de la card. */
    --ds-card-gap: 0;
    /* Fondo de cabecera y pie. */
    --ds-card-cap-bg: color-mix(in srgb, var(--ds-color-text) 6%, var(--ds-color-surface));
    /* Alto de la imagen (auto = proporción original). */
    --ds-card-image-height: auto;
    /* Radio de la imagen. */
    --ds-card-image-radius: 0;
    /* Tamaño del ícono destacado. */
    --ds-card-icon-size: 3.5rem;
    /* Fondo del ícono destacado. */
    --ds-card-icon-bg: var(--ds-color-primary);
    /* Color del ícono destacado. */
    --ds-card-icon-color: var(--ds-color-primary-contrast);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ds-card-gap);
    min-width: 0;
    border: var(--ds-card-border-width) solid var(--ds-card-border-color);
    border-radius: var(--ds-card-radius);
    background-color: var(--ds-card-bg);
    color: var(--ds-card-color);
    box-shadow: var(--ds-card-shadow);
    overflow: hidden;
  }
  .card__header {
    padding: var(--ds-space-2) var(--ds-card-padding);
    background-color: var(--ds-card-cap-bg);
  }
  .card__image {
    position: relative;
    border-radius: var(--ds-card-image-radius);
    overflow: hidden;
  }
  .card__image img {
    display: block;
    width: 100%;
    height: var(--ds-card-image-height);
    object-fit: cover;
    transition: transform var(--ds-duration-slow) var(--ds-easing);
  }
  .card__image > .badge {
    position: absolute;
    top: var(--ds-space-3);
    left: var(--ds-space-3);
    z-index: 1;
  }
  .card__body {
    flex: 1 1 auto;
    padding: var(--ds-card-padding);
  }
  .card__body > :last-child {
    margin-bottom: 0;
  }
  .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ds-card-icon-size);
    height: var(--ds-card-icon-size);
    margin-bottom: var(--ds-space-3);
    border-radius: 50%;
    background-color: var(--ds-card-icon-bg);
    color: var(--ds-card-icon-color);
  }
  .card__icon :where(svg) {
    width: 50%;
    height: 50%;
  }
  .card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-2);
    color: var(--ds-color-text-muted);
    font-size: var(--ds-font-size-sm);
  }
  .card__meta :where(svg) {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
  }
  .card__title {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-font-size-lg);
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-tight);
    transition: color var(--ds-duration-fast) var(--ds-easing);
  }
  .card__description {
    margin: 0 0 var(--ds-space-2);
  }
  .card__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .card__list > li {
    padding: var(--ds-space-3) var(--ds-card-padding);
    border-bottom: 1px solid var(--ds-color-border);
  }
  .card__price {
    margin: 0;
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-bold);
    line-height: var(--ds-line-height-tight);
  }
  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    margin-top: auto;
    padding: var(--ds-card-padding);
    background-color: var(--ds-card-cap-bg);
  }
  .card--plain {
    --ds-card-bg: transparent;
    --ds-card-border-color: transparent;
    --ds-card-padding: 0;
    --ds-card-gap: var(--ds-space-2);
    --ds-card-image-radius: 0.875rem;
  }
  .card--elevated {
    --ds-card-border-color: transparent;
    --ds-card-shadow: var(--ds-shadow-sm);
  }
  .card--link {
    color: inherit;
    text-decoration: none;
  }
  .card--link:hover {
    color: inherit;
  }
  .card--link:hover .card__title {
    color: var(--ds-color-primary);
  }
  .card--link:hover .card__image img {
    transform: scale(1.05);
  }
  .card--link:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
  }
  .card--soft {
    --ds-card-bg: var(--ds-color-info-bg);
    --ds-card-border-color: var(--ds-color-info-border);
    --ds-card-border-width: 2px;
    overflow: visible;
    text-align: center;
  }
  .card--soft .card__icon {
    position: absolute;
    top: -15px;
    left: -15px;
    margin: 0;
  }
  .card--soft .card__title {
    color: var(--ds-color-primary);
  }
  .card--pricing .card__header {
    text-align: center;
  }
  .card--pricing .card__footer {
    flex-direction: column;
    justify-content: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .card__image img,
    .card__title {
      transition: none;
    }
  }
}
@layer ds.components {
  .nav {
    /* Dirección de la lista (row o column). */
    --ds-nav-direction: row;
    /* Alineación de los enlaces. */
    --ds-nav-justify: flex-start;
    /* Separación entre enlaces. */
    --ds-nav-gap: var(--ds-space-1);
    /* Espacio vertical interno del enlace. */
    --ds-nav-link-padding-y: var(--ds-space-2);
    /* Espacio horizontal interno del enlace. */
    --ds-nav-link-padding-x: var(--ds-space-3);
    /* Separación entre ícono y texto. */
    --ds-nav-link-gap: var(--ds-space-2);
    --ds-nav-link-font-size: var(--ds-font-size-base);
    --ds-nav-link-font-weight: var(--ds-font-weight-regular);
    /* Peso del enlace actual. */
    --ds-nav-link-active-font-weight: var(--ds-font-weight-semibold);
    /* Color del enlace. */
    --ds-nav-link-color: var(--ds-color-text);
    /* Fondo del enlace (acepta degradados). */
    --ds-nav-link-bg: transparent;
    /* Grosor del borde del enlace. */
    --ds-nav-link-border-width: 0;
    /* Color del borde del enlace. */
    --ds-nav-link-border-color: transparent;
    /* Radio de las esquinas del enlace. */
    --ds-nav-link-radius: var(--ds-radius-md);
    /* Color en hover. */
    --ds-nav-link-hover-color: var(--ds-color-primary);
    /* Fondo en hover. */
    --ds-nav-link-hover-bg: var(--ds-nav-link-bg);
    /* Color del enlace actual. */
    --ds-nav-link-active-color: var(--ds-color-primary);
    /* Fondo del enlace actual. */
    --ds-nav-link-active-bg: var(--ds-nav-link-bg);
    /* Tamaño de los íconos. */
    --ds-nav-icon-size: 1.25em;
    /* Grosor de la línea bajo el enlace (nav--underline). */
    --ds-nav-indicator-height: 3px;
    /* Color de la línea bajo el enlace (nav--underline). */
    --ds-nav-indicator-color: currentColor;
    /* Color del contorno de foco. */
    --ds-nav-focus-color: var(--ds-color-primary);
    /* Opacidad de un enlace deshabilitado. */
    --ds-nav-disabled-opacity: 0.5;
  }
  .nav__list {
    display: flex;
    flex-direction: var(--ds-nav-direction);
    flex-wrap: wrap;
    justify-content: var(--ds-nav-justify);
    gap: var(--ds-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ds-nav-link-gap);
    padding: var(--ds-nav-link-padding-y) var(--ds-nav-link-padding-x);
    border: var(--ds-nav-link-border-width) solid var(--ds-nav-link-border-color);
    border-radius: var(--ds-nav-link-radius);
    background: var(--ds-nav-link-bg);
    color: var(--ds-nav-link-color);
    font-size: var(--ds-nav-link-font-size);
    font-weight: var(--ds-nav-link-font-weight);
    line-height: var(--ds-line-height-base);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing), border-color var(--ds-duration-fast) var(--ds-easing);
  }
  .nav__link:hover {
    background: var(--ds-nav-link-hover-bg);
    color: var(--ds-nav-link-hover-color);
  }
  .nav__link.is-active, .nav__link[aria-current]:not([aria-current=false]) {
    background: var(--ds-nav-link-active-bg);
    color: var(--ds-nav-link-active-color);
    font-weight: var(--ds-nav-link-active-font-weight);
  }
  .nav__link:focus-visible {
    outline: 2px solid var(--ds-nav-focus-color);
    outline-offset: 2px;
  }
  .nav__link.is-disabled, .nav__link[aria-disabled=true] {
    opacity: var(--ds-nav-disabled-opacity);
    pointer-events: none;
  }
  .nav__link :where(svg) {
    flex-shrink: 0;
    width: var(--ds-nav-icon-size);
    height: var(--ds-nav-icon-size);
  }
  .nav--vertical {
    --ds-nav-direction: column;
  }
  .nav--pills {
    --ds-nav-link-radius: var(--ds-radius-full);
    --ds-nav-link-hover-color: var(--ds-color-primary-hover);
    --ds-nav-link-hover-bg: color-mix(in srgb, var(--ds-color-primary) 10%, transparent);
    --ds-nav-link-active-color: var(--ds-color-primary-contrast);
    --ds-nav-link-active-bg: var(--ds-color-primary);
  }
  .nav--underline {
    --ds-nav-gap: var(--ds-space-6);
    --ds-nav-link-padding-x: 0;
    --ds-nav-link-radius: 0;
    --ds-nav-link-hover-color: var(--ds-nav-link-color);
  }
  .nav--underline .nav__link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: var(--ds-nav-indicator-height);
    border-radius: var(--ds-radius-full);
    background-color: var(--ds-nav-indicator-color);
    transition: width var(--ds-duration-fast) var(--ds-easing);
  }
  .nav--underline .nav__link:hover::after {
    width: 60%;
  }
  .nav--underline .nav__link:is(.is-active, [aria-current]:not([aria-current=false]))::after {
    width: 100%;
  }
  .nav--social {
    --ds-nav-gap: var(--ds-space-4);
    --ds-nav-link-padding-y: var(--ds-space-2);
    --ds-nav-link-padding-x: var(--ds-space-2);
    --ds-nav-link-border-width: 2px;
    --ds-nav-link-border-color: var(--ds-color-primary);
    --ds-nav-link-radius: 50%;
    --ds-nav-link-color: var(--ds-color-primary);
    --ds-nav-link-hover-color: var(--ds-color-primary-contrast);
    --ds-nav-link-hover-bg: linear-gradient(41deg, var(--ds-color-primary), var(--ds-color-primary-hover));
    --ds-nav-icon-size: 1.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav__link,
    .nav__link::after {
      transition: none;
    }
  }
}
@layer ds.components {
  .pagination {
    /* Alineación de los enlaces. */
    --ds-pagination-justify: flex-start;
    /* Separación entre enlaces. */
    --ds-pagination-gap: 0.375rem;
    /* Alto y ancho mínimo del enlace. */
    --ds-pagination-link-size: 2.5rem;
    /* Espacio horizontal interno del enlace. */
    --ds-pagination-link-padding-x: var(--ds-space-3);
    /* Separación entre ícono y texto. */
    --ds-pagination-link-gap: var(--ds-space-1);
    --ds-pagination-link-font-size: var(--ds-font-size-sm);
    --ds-pagination-link-font-weight: var(--ds-font-weight-regular);
    /* Color del texto. */
    --ds-pagination-link-color: var(--ds-color-text);
    /* Fondo del enlace. */
    --ds-pagination-link-bg: var(--ds-color-surface);
    /* Color del borde. */
    --ds-pagination-link-border-color: var(--ds-color-border);
    /* Radio de las esquinas. */
    --ds-pagination-link-radius: var(--ds-radius-md);
    /* Texto en hover. */
    --ds-pagination-link-hover-color: var(--ds-color-primary-contrast);
    /* Fondo en hover. */
    --ds-pagination-link-hover-bg: var(--ds-color-primary);
    /* Borde en hover. */
    --ds-pagination-link-hover-border-color: var(--ds-color-primary);
    /* Texto de la página actual. */
    --ds-pagination-link-active-color: var(--ds-color-primary-contrast);
    /* Fondo de la página actual. */
    --ds-pagination-link-active-bg: var(--ds-color-primary);
    /* Borde de la página actual. */
    --ds-pagination-link-active-border-color: var(--ds-color-primary);
    /* Peso de la página actual. */
    --ds-pagination-link-active-font-weight: var(--ds-font-weight-semibold);
    /* Tamaño de los íconos. */
    --ds-pagination-icon-size: 1.25em;
    /* Color de los puntos suspensivos. */
    --ds-pagination-ellipsis-color: var(--ds-color-text-muted);
    /* Color del contorno de foco. */
    --ds-pagination-focus-color: var(--ds-color-primary);
    /* Opacidad de un enlace deshabilitado. */
    --ds-pagination-disabled-opacity: 0.5;
  }
  .pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--ds-pagination-justify);
    gap: var(--ds-pagination-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pagination__link,
  .pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ds-pagination-link-size);
    min-height: var(--ds-pagination-link-size);
    font-size: var(--ds-pagination-link-font-size);
    line-height: var(--ds-line-height-base);
  }
  .pagination__link {
    gap: var(--ds-pagination-link-gap);
    padding: 0 var(--ds-pagination-link-padding-x);
    border: 1px solid var(--ds-pagination-link-border-color);
    border-radius: var(--ds-pagination-link-radius);
    background-color: var(--ds-pagination-link-bg);
    color: var(--ds-pagination-link-color);
    font-family: inherit;
    font-weight: var(--ds-pagination-link-font-weight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing), border-color var(--ds-duration-fast) var(--ds-easing);
  }
  .pagination__link:hover {
    border-color: var(--ds-pagination-link-hover-border-color);
    background-color: var(--ds-pagination-link-hover-bg);
    color: var(--ds-pagination-link-hover-color);
  }
  .pagination__link.is-active, .pagination__link[aria-current]:not([aria-current=false]) {
    border-color: var(--ds-pagination-link-active-border-color);
    background-color: var(--ds-pagination-link-active-bg);
    color: var(--ds-pagination-link-active-color);
    font-weight: var(--ds-pagination-link-active-font-weight);
    cursor: default;
  }
  .pagination__link:focus-visible {
    outline: 2px solid var(--ds-pagination-focus-color);
    outline-offset: 2px;
  }
  .pagination__link:disabled, .pagination__link.is-disabled, .pagination__link[aria-disabled=true] {
    opacity: var(--ds-pagination-disabled-opacity);
    pointer-events: none;
  }
  .pagination__link :where(svg) {
    flex-shrink: 0;
    width: var(--ds-pagination-icon-size);
    height: var(--ds-pagination-icon-size);
  }
  .pagination__link--icon {
    --ds-pagination-link-padding-x: 0;
  }
  .pagination__ellipsis {
    color: var(--ds-pagination-ellipsis-color);
  }
  .pagination--sm {
    --ds-pagination-gap: var(--ds-space-1);
    --ds-pagination-link-size: 2rem;
    --ds-pagination-link-padding-x: var(--ds-space-2);
    --ds-pagination-link-font-size: var(--ds-font-size-xs);
  }
  .pagination--lg {
    --ds-pagination-gap: var(--ds-space-2);
    --ds-pagination-link-size: 3rem;
    --ds-pagination-link-padding-x: var(--ds-space-4);
    --ds-pagination-link-font-size: var(--ds-font-size-base);
  }
  @media (prefers-reduced-motion: reduce) {
    .pagination__link {
      transition: none;
    }
  }
}
@layer ds.components {
  .loader {
    /* Color del arco que gira. */
    --ds-loader-color: var(--ds-color-primary);
    /* Color del anillo de fondo. */
    --ds-loader-track-color: color-mix(in srgb, var(--ds-loader-color) 15%, transparent);
    /* Diámetro del spinner. */
    --ds-loader-size: 3rem;
    /* Grosor del anillo. */
    --ds-loader-thickness: 3px;
    /* Duración de una vuelta. */
    --ds-loader-speed: 0.85s;
    /* Separación entre spinner y texto. */
    --ds-loader-gap: var(--ds-space-4);
    /* Color del texto. */
    --ds-loader-text-color: var(--ds-color-text);
    --ds-loader-font-size: var(--ds-font-size-sm);
    --ds-loader-font-weight: var(--ds-font-weight-medium);
    /* Espacio interno. */
    --ds-loader-padding: var(--ds-space-6);
    /* Velo que cubre la página (pantalla completa). */
    --ds-loader-overlay-bg: color-mix(in srgb, var(--ds-color-surface) 55%, transparent);
    /* Desenfoque de la página bajo el velo. */
    --ds-loader-blur: 8px;
    /* Espera antes de aparecer (evita parpadeos en cargas rápidas). */
    --ds-loader-delay: 150ms;
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-loader-padding);
    background: var(--ds-loader-overlay-bg);
    -webkit-backdrop-filter: blur(var(--ds-loader-blur));
    backdrop-filter: blur(var(--ds-loader-blur));
    animation: ds-loader-fade-in var(--ds-duration-fast) var(--ds-easing) var(--ds-loader-delay) both;
  }
  .loader[hidden] {
    display: none;
  }
  .loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-loader-gap);
  }
  .loader__spinner {
    display: block;
    flex-shrink: 0;
    width: var(--ds-loader-size);
    height: var(--ds-loader-size);
    border: var(--ds-loader-thickness) solid var(--ds-loader-track-color);
    border-top-color: var(--ds-loader-color);
    border-radius: 50%;
    animation: ds-loader-spin var(--ds-loader-speed) linear infinite;
  }
  .loader__text {
    margin: 0;
    color: var(--ds-loader-text-color);
    font-size: var(--ds-loader-font-size);
    font-weight: var(--ds-loader-font-weight);
    line-height: var(--ds-line-height-base);
    letter-spacing: 0.02em;
    text-align: center;
  }
  .loader--inline {
    --ds-loader-padding: var(--ds-space-4);
    position: relative;
    inset: auto;
    z-index: auto;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .loader--instant {
    animation: none;
  }
  .loader--sm {
    --ds-loader-size: 1.75rem;
    --ds-loader-thickness: 2px;
  }
  .loader--lg {
    --ds-loader-size: 4rem;
    --ds-loader-thickness: 4px;
  }
  @keyframes ds-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ds-loader-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .loader {
      animation: none;
    }
    .loader__spinner {
      animation-duration: calc(var(--ds-loader-speed) * 2);
    }
  }
}
@layer ds.components {
  .skeleton {
    /* Color del bloque (gris calculado del texto sobre la superficie). */
    --ds-skeleton-bg: color-mix(in srgb, var(--ds-color-text) 8%, var(--ds-color-surface));
    /* Duración de un pulso. */
    --ds-skeleton-duration: 1.4s;
    /* Ancho. Cada tipo trae el suyo; cámbialo para variar el largo de las líneas. */
    --ds-skeleton-width: 100%;
    /* Alto. */
    --ds-skeleton-height: 1rem;
    /* Proporción cuando el alto es automático (imagen sin tamaño). */
    --ds-skeleton-aspect-ratio: auto;
    /* Radio de las esquinas. */
    --ds-skeleton-radius: var(--ds-radius-sm);
    /* Separación bajo títulos y líneas de texto. */
    --ds-skeleton-spacing: var(--ds-space-2);
    display: block;
    flex-shrink: 0;
    width: var(--ds-skeleton-width);
    max-width: 100%;
    height: var(--ds-skeleton-height);
    aspect-ratio: var(--ds-skeleton-aspect-ratio);
    border-radius: var(--ds-skeleton-radius);
    background-color: var(--ds-skeleton-bg);
    animation: ds-skeleton-pulse var(--ds-skeleton-duration) ease-in-out infinite;
  }
  .skeleton--text {
    --ds-skeleton-height: 0.625rem;
  }
  .skeleton--title {
    --ds-skeleton-width: 60%;
    --ds-skeleton-height: 0.75rem;
  }
  .skeleton--text,
  .skeleton--title {
    margin-bottom: var(--ds-skeleton-spacing);
  }
  .skeleton--text:last-child,
  .skeleton--title:last-child {
    margin-bottom: 0;
  }
  .skeleton--label {
    --ds-skeleton-width: 40%;
    --ds-skeleton-height: 0.9375rem;
  }
  .skeleton--input {
    --ds-skeleton-height: calc(var(--ds-font-size-base) * var(--ds-line-height-base) + 0.75rem + 2px);
    --ds-skeleton-radius: var(--ds-radius-full);
  }
  .skeleton--textarea {
    --ds-skeleton-height: 7.5rem;
    --ds-skeleton-radius: var(--ds-radius-lg);
  }
  .skeleton--image {
    --ds-skeleton-height: auto;
    --ds-skeleton-aspect-ratio: 16 / 10;
    --ds-skeleton-radius: 0;
  }
  .skeleton--sm {
    --ds-skeleton-width: 3.125rem;
    --ds-skeleton-height: 3.125rem;
  }
  .skeleton--md {
    --ds-skeleton-width: 6.25rem;
    --ds-skeleton-height: 6.25rem;
  }
  .skeleton--lg {
    --ds-skeleton-width: 9.375rem;
    --ds-skeleton-height: 9.375rem;
  }
  .skeleton--rounded {
    --ds-skeleton-radius: var(--ds-radius-md);
  }
  .skeleton--circle {
    --ds-skeleton-aspect-ratio: 1;
    --ds-skeleton-radius: 50%;
  }
  @keyframes ds-skeleton-pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      animation: none;
    }
  }
}
@layer ds.components {
  .modal {
    /* Ancho máximo de la ventana. */
    --ds-modal-width: 32rem;
    /* Separación mínima entre la ventana y el borde de la pantalla. */
    --ds-modal-margin: clamp(1rem, 5vw, 2rem);
    /* Fondo de la ventana. */
    --ds-modal-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-modal-color: var(--ds-color-text);
    /* Color del borde de la ventana. */
    --ds-modal-border-color: transparent;
    --ds-modal-radius: var(--ds-radius-lg);
    --ds-modal-shadow: var(--ds-shadow-lg);
    /* Espacio vertical interno de cabecera, cuerpo y pie. */
    --ds-modal-padding-y: 1rem;
    /* Espacio horizontal interno de cabecera, cuerpo y pie. */
    --ds-modal-padding-x: 1.25rem;
    /* Línea bajo la cabecera y sobre el pie. */
    --ds-modal-divider-color: var(--ds-color-border);
    /* Tamaño del título (modal__title). */
    --ds-modal-title-font-size: var(--ds-font-size-lg);
    /* Tamaño del botón para cerrar (modal__close). */
    --ds-modal-close-size: 2rem;
    /* Color del fondo oscuro (modal__backdrop). */
    --ds-modal-backdrop-bg: rgb(0 0 0 / 0.6);
    /* Desenfoque de la página detrás del fondo. */
    --ds-modal-backdrop-blur: 4px;
    /* Desplazamiento vertical de la ventana al abrir y cerrar. */
    --ds-modal-offset: -0.75rem;
    /* Duración del fundido al abrir y cerrar. */
    --ds-modal-transition-duration: var(--ds-duration-fast);
    /* Capa del modal (z-index). */
    --ds-modal-z-index: var(--ds-z-modal);
    position: fixed;
    inset: 0;
    z-index: var(--ds-modal-z-index);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--ds-modal-margin);
    outline: 0;
  }
  .modal[hidden] {
    display: none;
  }
  .modal.is-opening .modal__backdrop, .modal.is-closing .modal__backdrop {
    opacity: 0;
  }
  .modal.is-opening .modal__dialog, .modal.is-closing .modal__dialog {
    opacity: 0;
    transform: translateY(var(--ds-modal-offset));
  }
  .modal--centered {
    align-items: center;
  }
  .modal--sm {
    --ds-modal-width: 20rem;
  }
  .modal--lg {
    --ds-modal-width: 50rem;
  }
  .modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--ds-modal-backdrop-bg);
    backdrop-filter: blur(var(--ds-modal-backdrop-blur));
    transition: opacity var(--ds-modal-transition-duration) var(--ds-easing);
  }
  .modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ds-modal-width);
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ds-modal-border-color);
    border-radius: var(--ds-modal-radius);
    background-color: var(--ds-modal-bg);
    color: var(--ds-modal-color);
    box-shadow: var(--ds-modal-shadow);
    transition: opacity var(--ds-modal-transition-duration) var(--ds-easing), transform var(--ds-modal-transition-duration) var(--ds-easing);
  }
  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-shrink: 0;
    padding: var(--ds-modal-padding-y) var(--ds-modal-padding-x);
    border-bottom: 1px solid var(--ds-modal-divider-color);
  }
  .modal__title {
    margin: 0;
    font-family: var(--ds-font-family-heading);
    font-size: var(--ds-modal-title-font-size);
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-tight);
  }
  .modal__close {
    flex-shrink: 0;
    margin: -0.375rem -0.5rem -0.375rem auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-modal-close-size);
    height: var(--ds-modal-close-size);
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .modal__close::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.75' d='m1.5 1.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .modal__close:hover {
    opacity: 1;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .modal__close:focus-visible {
    opacity: 1;
  }
  .modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--ds-modal-padding-y) var(--ds-modal-padding-x);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal__body > :first-child {
    margin-top: 0;
  }
  .modal__body > :last-child {
    margin-bottom: 0;
  }
  .modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-2);
    flex-shrink: 0;
    padding: var(--ds-modal-padding-y) var(--ds-modal-padding-x);
    border-top: 1px solid var(--ds-modal-divider-color);
  }
  @media (prefers-reduced-motion: reduce) {
    .modal__backdrop,
    .modal__dialog,
    .modal__close {
      transition: none;
    }
  }
}
@layer ds.components {
  .dropdown {
    /* Ancho mínimo del menú (si el botón es más ancho, toma su ancho). */
    --ds-dropdown-min-width: 10rem;
    /* Separación entre el botón y el menú. */
    --ds-dropdown-gap: var(--ds-space-1);
    /* Espacio vertical interno del menú. */
    --ds-dropdown-padding-y: var(--ds-space-2);
    /* Fondo del menú. */
    --ds-dropdown-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-dropdown-color: var(--ds-color-text);
    /* Color del borde del menú. */
    --ds-dropdown-border-color: var(--ds-color-border);
    --ds-dropdown-radius: var(--ds-radius-md);
    --ds-dropdown-shadow: var(--ds-shadow-md);
    --ds-dropdown-font-size: var(--ds-font-size-sm);
    /* Espacio vertical interno del ítem. */
    --ds-dropdown-item-padding-y: var(--ds-space-2);
    /* Espacio horizontal interno de ítems y encabezados. */
    --ds-dropdown-item-padding-x: var(--ds-space-4);
    /* Separación entre ícono y texto. */
    --ds-dropdown-item-gap: var(--ds-space-2);
    /* Color del ítem en hover y con foco. */
    --ds-dropdown-item-hover-color: var(--ds-dropdown-color);
    /* Fondo del ítem en hover y con foco. */
    --ds-dropdown-item-hover-bg: color-mix(in srgb, var(--ds-color-text) 6%, var(--ds-color-surface));
    /* Color del ítem actual. */
    --ds-dropdown-item-active-color: var(--ds-color-primary-hover);
    /* Fondo del ítem actual. */
    --ds-dropdown-item-active-bg: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
    /* Peso del ítem actual. */
    --ds-dropdown-item-active-font-weight: var(--ds-font-weight-semibold);
    /* Opacidad de un ítem deshabilitado. */
    --ds-dropdown-item-disabled-opacity: 0.5;
    /* Tamaño de los íconos de los ítems. */
    --ds-dropdown-icon-size: 1.25em;
    /* Color del encabezado (dropdown__header). */
    --ds-dropdown-header-color: var(--ds-color-text-muted);
    /* Tamaño del encabezado. */
    --ds-dropdown-header-font-size: var(--ds-font-size-xs);
    /* Color del separador (dropdown__divider). */
    --ds-dropdown-divider-color: var(--ds-color-border);
    /* Color del contorno de foco. */
    --ds-dropdown-focus-color: var(--ds-color-primary);
    /* Desplazamiento del menú hacia el botón al abrir y cerrar. */
    --ds-dropdown-offset: 0.5rem;
    /* Duración del fundido al abrir y cerrar. */
    --ds-dropdown-transition-duration: var(--ds-duration-fast);
    /* Capa del menú (z-index). */
    --ds-dropdown-z-index: var(--ds-z-dropdown);
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }
  .dropdown__toggle::after {
    content: "";
    flex-shrink: 0;
    width: 0.75em;
    height: 0.75em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--ds-dropdown-transition-duration) var(--ds-easing);
  }
  .dropdown__toggle[aria-expanded=true]::after,
  .dropdown--up .dropdown__toggle::after {
    transform: rotate(180deg);
  }
  .dropdown--up .dropdown__toggle[aria-expanded=true]::after {
    transform: none;
  }
  .dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--ds-dropdown-z-index);
    width: max-content;
    min-width: max(100%, var(--ds-dropdown-min-width));
    max-width: calc(100vw - 1rem);
    margin: var(--ds-dropdown-gap) 0 0;
    padding: var(--ds-dropdown-padding-y) 0;
    border: 1px solid var(--ds-dropdown-border-color);
    border-radius: var(--ds-dropdown-radius);
    background-color: var(--ds-dropdown-bg);
    color: var(--ds-dropdown-color);
    box-shadow: var(--ds-dropdown-shadow);
    font-size: var(--ds-dropdown-font-size);
    line-height: var(--ds-line-height-base);
    text-align: start;
    transition: opacity var(--ds-dropdown-transition-duration) var(--ds-easing), transform var(--ds-dropdown-transition-duration) var(--ds-easing);
  }
  .dropdown__menu[hidden] {
    display: none;
  }
  .dropdown__menu.is-opening, .dropdown__menu.is-closing {
    opacity: 0;
    transform: translateY(calc(-1 * var(--ds-dropdown-offset)));
  }
  .dropdown__menu--end {
    right: 0;
    left: auto;
  }
  .dropdown--up > .dropdown__menu,
  .dropdown.is-flipped > .dropdown__menu {
    top: auto;
    bottom: 100%;
    margin: 0 0 var(--ds-dropdown-gap);
  }
  .dropdown--up > .dropdown__menu.is-opening, .dropdown--up > .dropdown__menu.is-closing,
  .dropdown.is-flipped > .dropdown__menu.is-opening,
  .dropdown.is-flipped > .dropdown__menu.is-closing {
    transform: translateY(var(--ds-dropdown-offset));
  }
  .dropdown--up.is-flipped > .dropdown__menu {
    top: 100%;
    bottom: auto;
    margin: var(--ds-dropdown-gap) 0 0;
  }
  .dropdown--up.is-flipped > .dropdown__menu.is-opening, .dropdown--up.is-flipped > .dropdown__menu.is-closing {
    transform: translateY(calc(-1 * var(--ds-dropdown-offset)));
  }
  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--ds-dropdown-item-gap);
    width: 100%;
    margin: 0;
    padding: var(--ds-dropdown-item-padding-y) var(--ds-dropdown-item-padding-x);
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .dropdown__item:hover, .dropdown__item:focus-visible {
    background-color: var(--ds-dropdown-item-hover-bg);
    color: var(--ds-dropdown-item-hover-color);
  }
  .dropdown__item:focus-visible {
    outline: 2px solid var(--ds-dropdown-focus-color);
    outline-offset: -2px;
  }
  .dropdown__item.is-active, .dropdown__item[aria-current]:not([aria-current=false]) {
    background-color: var(--ds-dropdown-item-active-bg);
    color: var(--ds-dropdown-item-active-color);
    font-weight: var(--ds-dropdown-item-active-font-weight);
  }
  .dropdown__item:disabled, .dropdown__item.is-disabled, .dropdown__item[aria-disabled=true] {
    opacity: var(--ds-dropdown-item-disabled-opacity);
    pointer-events: none;
    cursor: default;
  }
  .dropdown__item :where(svg) {
    flex-shrink: 0;
    width: var(--ds-dropdown-icon-size);
    height: var(--ds-dropdown-icon-size);
  }
  .dropdown__header {
    display: block;
    margin: 0;
    padding: var(--ds-space-2) var(--ds-dropdown-item-padding-x) var(--ds-space-1);
    color: var(--ds-dropdown-header-color);
    font-size: var(--ds-dropdown-header-font-size);
    font-weight: var(--ds-font-weight-semibold);
  }
  .dropdown__divider {
    height: 0;
    margin: var(--ds-space-2) 0;
    border: 0;
    border-top: 1px solid var(--ds-dropdown-divider-color);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .dropdown__menu,
    .dropdown__item,
    .dropdown__toggle::after {
      transition: none;
    }
  }
}
@layer ds.components {
  .collapse {
    /* Duración de la transición de alto al abrir y cerrar. */
    --ds-collapse-transition-duration: var(--ds-duration-base);
    display: flow-root;
  }
  .collapse[hidden] {
    display: none;
  }
  .collapse.is-opening, .collapse.is-closing {
    overflow: hidden;
    transition: height var(--ds-collapse-transition-duration) var(--ds-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .collapse.is-opening,
    .collapse.is-closing {
      transition: none;
    }
  }
}
@layer ds.components {
  .accordion {
    /* Fondo. */
    --ds-accordion-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-accordion-color: var(--ds-color-text);
    /* Color del borde exterior y de los separadores. */
    --ds-accordion-border-color: var(--ds-color-border);
    --ds-accordion-radius: var(--ds-radius-md);
    /* Espacio horizontal interno de botones y contenido. */
    --ds-accordion-padding-x: var(--ds-space-4);
    /* Espacio vertical interno del botón. */
    --ds-accordion-button-padding-y: var(--ds-space-4);
    --ds-accordion-button-font-size: var(--ds-font-size-base);
    --ds-accordion-button-font-weight: var(--ds-font-weight-semibold);
    /* Fondo del botón en hover. */
    --ds-accordion-button-hover-bg: color-mix(in srgb, var(--ds-color-text) 4%, var(--ds-color-surface));
    /* Color del botón de una sección abierta. */
    --ds-accordion-button-active-color: var(--ds-color-primary-hover);
    /* Fondo del botón de una sección abierta. */
    --ds-accordion-button-active-bg: color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface));
    /* Tamaño de la flecha. */
    --ds-accordion-icon-size: 1rem;
    /* Espacio vertical interno del contenido. */
    --ds-accordion-body-padding-y: var(--ds-space-4);
    /* Color del contorno de foco. */
    --ds-accordion-focus-color: var(--ds-color-primary);
    /* Duración del cambio de color y del giro de la flecha. */
    --ds-accordion-transition-duration: var(--ds-duration-fast);
    border: 1px solid var(--ds-accordion-border-color);
    border-radius: var(--ds-accordion-radius);
    background-color: var(--ds-accordion-bg);
    color: var(--ds-accordion-color);
  }
  .accordion__item + .accordion__item {
    border-top: 1px solid var(--ds-accordion-border-color);
  }
  .accordion__header {
    margin: 0;
    font-family: inherit;
    font-size: var(--ds-accordion-button-font-size);
    font-weight: var(--ds-accordion-button-font-weight);
    line-height: var(--ds-line-height-tight);
  }
  .accordion__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    width: 100%;
    margin: 0;
    padding: var(--ds-accordion-button-padding-y) var(--ds-accordion-padding-x);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-accordion-transition-duration) var(--ds-easing), background-color var(--ds-accordion-transition-duration) var(--ds-easing);
  }
  .accordion__button::after {
    content: "";
    flex-shrink: 0;
    width: var(--ds-accordion-icon-size);
    height: var(--ds-accordion-icon-size);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--ds-accordion-transition-duration) var(--ds-easing);
  }
  .accordion__button:hover {
    background-color: var(--ds-accordion-button-hover-bg);
  }
  .accordion__button:focus-visible {
    outline: 2px solid var(--ds-accordion-focus-color);
    outline-offset: -2px;
  }
  .accordion__button[aria-expanded=true] {
    background-color: var(--ds-accordion-button-active-bg);
    color: var(--ds-accordion-button-active-color);
  }
  .accordion__button[aria-expanded=true]::after {
    transform: rotate(180deg);
  }
  .accordion__button:disabled, .accordion__button[aria-disabled=true] {
    opacity: 0.5;
    cursor: default;
  }
  .accordion__item:first-child .accordion__button {
    border-start-start-radius: calc(var(--ds-accordion-radius) - 1px);
    border-start-end-radius: calc(var(--ds-accordion-radius) - 1px);
  }
  .accordion__item:last-child .accordion__button:not([aria-expanded=true]) {
    border-end-start-radius: calc(var(--ds-accordion-radius) - 1px);
    border-end-end-radius: calc(var(--ds-accordion-radius) - 1px);
  }
  .accordion__body {
    padding: var(--ds-accordion-body-padding-y) var(--ds-accordion-padding-x);
  }
  .accordion__body > :first-child {
    margin-top: 0;
  }
  .accordion__body > :last-child {
    margin-bottom: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .accordion__button,
    .accordion__button::after {
      transition: none;
    }
  }
}
@layer ds.components {
  .tabs {
    /* Separación entre las pestañas y el panel. */
    --ds-tabs-gap: var(--ds-space-4);
    /* Separación entre pestañas. */
    --ds-tabs-list-gap: var(--ds-space-6);
    /* Grosor de la línea bajo las pestañas. */
    --ds-tabs-list-border-width: 1px;
    /* Color de la línea bajo las pestañas. */
    --ds-tabs-list-border-color: var(--ds-color-border);
    /* Espacio vertical interno de la pestaña. */
    --ds-tabs-tab-padding-y: var(--ds-space-2);
    /* Espacio horizontal interno de la pestaña. */
    --ds-tabs-tab-padding-x: 0;
    /* Separación entre ícono y texto. */
    --ds-tabs-tab-gap: var(--ds-space-2);
    --ds-tabs-tab-font-size: var(--ds-font-size-base);
    --ds-tabs-tab-font-weight: var(--ds-font-weight-medium);
    /* Color de la pestaña. */
    --ds-tabs-tab-color: var(--ds-color-text-muted);
    /* Fondo de la pestaña. */
    --ds-tabs-tab-bg: transparent;
    /* Radio de las esquinas de la pestaña. */
    --ds-tabs-tab-radius: 0;
    /* Color en hover. */
    --ds-tabs-tab-hover-color: var(--ds-color-text);
    /* Fondo en hover. */
    --ds-tabs-tab-hover-bg: var(--ds-tabs-tab-bg);
    /* Color de la pestaña activa. */
    --ds-tabs-tab-active-color: var(--ds-color-primary);
    /* Fondo de la pestaña activa. */
    --ds-tabs-tab-active-bg: var(--ds-tabs-tab-bg);
    /* Tamaño de los íconos. */
    --ds-tabs-icon-size: 1.25em;
    /* Grosor de la línea de la pestaña activa. */
    --ds-tabs-indicator-size: 3px;
    /* Color de la línea de la pestaña activa. */
    --ds-tabs-indicator-color: currentColor;
    /* Color del contorno de foco. */
    --ds-tabs-focus-color: var(--ds-color-primary);
    /* Opacidad de una pestaña deshabilitada. */
    --ds-tabs-disabled-opacity: 0.5;
    /* Duración de cada fundido al cambiar de panel (sale el anterior y entra el nuevo). */
    --ds-tabs-transition-duration: calc(var(--ds-duration-fast) * 0.75);
    display: flex;
    flex-direction: column;
    gap: var(--ds-tabs-gap);
  }
  .tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-tabs-list-gap);
    border-bottom: var(--ds-tabs-list-border-width) solid var(--ds-tabs-list-border-color);
  }
  .tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-tabs-tab-gap);
    margin: 0;
    padding: var(--ds-tabs-tab-padding-y) var(--ds-tabs-tab-padding-x);
    border: 0;
    border-radius: var(--ds-tabs-tab-radius);
    background: var(--ds-tabs-tab-bg);
    color: var(--ds-tabs-tab-color);
    font: inherit;
    font-size: var(--ds-tabs-tab-font-size);
    font-weight: var(--ds-tabs-tab-font-weight);
    line-height: var(--ds-line-height-base);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .tabs__tab::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * var(--ds-tabs-list-border-width));
    inset-inline-start: 0;
    width: 0;
    height: var(--ds-tabs-indicator-size);
    border-radius: var(--ds-radius-full);
    background-color: var(--ds-tabs-indicator-color);
    transition: width var(--ds-duration-fast) var(--ds-easing);
  }
  .tabs__tab:hover {
    background: var(--ds-tabs-tab-hover-bg);
    color: var(--ds-tabs-tab-hover-color);
  }
  .tabs__tab:hover::after {
    width: 60%;
  }
  .tabs__tab[aria-selected=true] {
    background: var(--ds-tabs-tab-active-bg);
    color: var(--ds-tabs-tab-active-color);
  }
  .tabs__tab[aria-selected=true]::after {
    width: 100%;
  }
  .tabs__tab:focus-visible {
    outline: 2px solid var(--ds-tabs-focus-color);
    outline-offset: 2px;
  }
  .tabs__tab:disabled, .tabs__tab[aria-disabled=true] {
    opacity: var(--ds-tabs-disabled-opacity);
    pointer-events: none;
  }
  .tabs__tab :where(svg) {
    flex-shrink: 0;
    width: var(--ds-tabs-icon-size);
    height: var(--ds-tabs-icon-size);
  }
  .tabs__panel {
    border-radius: var(--ds-radius-sm);
    transition: opacity var(--ds-tabs-transition-duration) var(--ds-easing);
  }
  .tabs__panel[hidden] {
    display: none;
  }
  .tabs__panel > :first-child {
    margin-top: 0;
  }
  .tabs__panel > :last-child {
    margin-bottom: 0;
  }
  .tabs__panel:focus-visible {
    outline: 2px solid var(--ds-tabs-focus-color);
    outline-offset: 2px;
  }
  .tabs__panel.is-opening, .tabs__panel.is-closing {
    opacity: 0;
  }
  .tabs--pills {
    --ds-tabs-list-gap: var(--ds-space-1);
    --ds-tabs-list-border-width: 0;
    --ds-tabs-tab-padding-x: var(--ds-space-4);
    --ds-tabs-tab-radius: var(--ds-radius-full);
    --ds-tabs-tab-hover-color: var(--ds-color-primary-hover);
    --ds-tabs-tab-hover-bg: color-mix(in srgb, var(--ds-color-primary) 10%, transparent);
    --ds-tabs-tab-active-color: var(--ds-color-primary-contrast);
    --ds-tabs-tab-active-bg: var(--ds-color-primary);
  }
  .tabs--pills .tabs__tab::after {
    display: none;
  }
  .tabs--vertical {
    --ds-tabs-gap: var(--ds-space-6);
    --ds-tabs-list-gap: var(--ds-space-1);
    --ds-tabs-tab-padding-x: var(--ds-space-4);
    flex-direction: row;
  }
  .tabs--vertical .tabs__list {
    flex-direction: column;
    flex-wrap: nowrap;
    flex-shrink: 0;
    border-bottom: 0;
    border-inline-end: var(--ds-tabs-list-border-width) solid var(--ds-tabs-list-border-color);
  }
  .tabs--vertical .tabs__tab::after {
    top: 0;
    bottom: auto;
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * var(--ds-tabs-list-border-width));
    width: var(--ds-tabs-indicator-size);
    height: 0;
    transition-property: height;
  }
  .tabs--vertical .tabs__tab:hover::after {
    width: var(--ds-tabs-indicator-size);
    height: 60%;
  }
  .tabs--vertical .tabs__tab[aria-selected=true]::after {
    width: var(--ds-tabs-indicator-size);
    height: 100%;
  }
  .tabs--vertical .tabs__panel {
    flex: 1;
    min-width: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .tabs__tab,
    .tabs__tab::after,
    .tabs__panel {
      transition: none;
    }
  }
}
@layer ds.components {
  .toast-container {
    /* Ancho máximo de los toasts. */
    --ds-toast-container-width: 26.25rem;
    /* Separación con los bordes de la pantalla. */
    --ds-toast-container-margin: var(--ds-space-4);
    /* Separación entre toasts. */
    --ds-toast-container-gap: var(--ds-space-2);
    /* Capa de los toasts (z-index). */
    --ds-toast-container-z-index: var(--ds-z-toast);
    position: fixed;
    inset-block-start: var(--ds-toast-container-margin);
    inset-inline-end: var(--ds-toast-container-margin);
    z-index: var(--ds-toast-container-z-index);
    display: flex;
    flex-direction: column;
    gap: var(--ds-toast-container-gap);
    width: min(100% - 2 * var(--ds-toast-container-margin), var(--ds-toast-container-width));
    pointer-events: none;
  }
  .toast-container > * {
    pointer-events: auto;
  }
  .toast-container--top-start,
  .toast-container--bottom-start {
    inset-inline: var(--ds-toast-container-margin) auto;
  }
  .toast-container--top-center,
  .toast-container--bottom-center {
    inset-inline: 0;
    margin-inline: auto;
  }
  .toast-container--bottom-start,
  .toast-container--bottom-center,
  .toast-container--bottom-end {
    inset-block: auto var(--ds-toast-container-margin);
  }
  .toast-container--bottom-start .toast,
  .toast-container--bottom-center .toast,
  .toast-container--bottom-end .toast {
    --ds-toast-offset: 0.5rem;
  }
  .toast {
    /* Fondo. */
    --ds-toast-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-toast-color: var(--ds-color-text);
    /* Color del borde. */
    --ds-toast-border-color: var(--ds-color-border);
    /* Franja a la izquierda: color (en las variantes, el del rol). */
    --ds-toast-accent-color: var(--ds-toast-border-color);
    /* Franja a la izquierda: grosor. */
    --ds-toast-accent-width: 0.25rem;
    /* Color del ícono (toast__icon). */
    --ds-toast-icon-color: currentColor;
    /* Espacio vertical interno. */
    --ds-toast-padding-y: 0.875rem;
    /* Espacio horizontal interno. */
    --ds-toast-padding-x: 1rem;
    /* Separación entre ícono, texto y botón para cerrar. */
    --ds-toast-gap: 0.75rem;
    --ds-toast-font-size: var(--ds-font-size-sm);
    --ds-toast-radius: var(--ds-radius-md);
    --ds-toast-shadow: var(--ds-shadow-lg);
    /* Tamaño del botón para cerrar (toast__close). */
    --ds-toast-close-size: 2rem;
    /* Desplazamiento vertical al aparecer y al cerrarse (abajo, 0.5rem). */
    --ds-toast-offset: -0.5rem;
    /* Duración del fundido. */
    --ds-toast-transition-duration: var(--ds-duration-fast);
    display: flex;
    align-items: flex-start;
    gap: var(--ds-toast-gap);
    padding: var(--ds-toast-padding-y) var(--ds-toast-padding-x);
    border: 1px solid var(--ds-toast-border-color);
    border-inline-start: var(--ds-toast-accent-width) solid var(--ds-toast-accent-color);
    border-radius: var(--ds-toast-radius);
    background-color: var(--ds-toast-bg);
    color: var(--ds-toast-color);
    box-shadow: var(--ds-toast-shadow);
    font-size: var(--ds-toast-font-size);
    line-height: var(--ds-line-height-base);
    transition: opacity var(--ds-toast-transition-duration) var(--ds-easing), transform var(--ds-toast-transition-duration) var(--ds-easing);
  }
  .toast[hidden] {
    display: none;
  }
  .toast.is-opening, .toast.is-closing {
    opacity: 0;
    transform: translateY(var(--ds-toast-offset));
  }
  .toast__icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.125em;
    color: var(--ds-toast-icon-color);
  }
  .toast__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .toast__body > :first-child {
    margin-top: 0;
  }
  .toast__body > :last-child {
    margin-bottom: 0;
  }
  .toast__title {
    display: block;
    margin: 0 0 var(--ds-space-1);
    font-size: inherit;
    font-weight: var(--ds-font-weight-semibold);
    line-height: inherit;
  }
  .toast__close {
    flex-shrink: 0;
    margin: -0.3125rem -0.5rem -0.3125rem auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-toast-close-size);
    height: var(--ds-toast-close-size);
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .toast__close::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.75' d='m1.5 1.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .toast__close:hover {
    opacity: 1;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .toast__close:focus-visible {
    opacity: 1;
  }
  .toast--success {
    --ds-toast-accent-color: var(--ds-color-success);
    --ds-toast-icon-color: var(--ds-color-success-strong);
  }
  .toast--danger {
    --ds-toast-accent-color: var(--ds-color-danger);
    --ds-toast-icon-color: var(--ds-color-danger-strong);
  }
  .toast--warning {
    --ds-toast-accent-color: var(--ds-color-warning);
    --ds-toast-icon-color: var(--ds-color-warning-strong);
  }
  .toast--info {
    --ds-toast-accent-color: var(--ds-color-info);
    --ds-toast-icon-color: var(--ds-color-info-strong);
  }
  @media (prefers-reduced-motion: reduce) {
    .toast,
    .toast__close {
      transition: none;
    }
  }
}
@layer ds.components {
  .form-field {
    /* Separación entre label, control y mensajes. */
    --ds-form-field-gap: var(--ds-space-2);
    /* Margen inferior (separa campos seguidos). */
    --ds-form-field-margin-bottom: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-form-field-gap);
    min-width: 0;
    margin: 0 0 var(--ds-form-field-margin-bottom);
    padding: 0;
    border: 0;
  }
  .form-field > legend {
    float: left;
    width: 100%;
    padding: 0;
  }
  .form-field--inline {
    flex-flow: row wrap;
    column-gap: var(--ds-space-5);
  }
  .form-field--inline > :where(legend, .form-label, .form-helper, .form-feedback) {
    flex-basis: 100%;
  }
  .form-label {
    /* Color del texto. */
    --ds-form-label-color: var(--ds-color-text);
    --ds-form-label-font-size: var(--ds-font-size-sm);
    --ds-form-label-font-weight: var(--ds-font-weight-regular);
    /* Color del asterisco de campo obligatorio. */
    --ds-form-label-required-color: var(--ds-color-danger);
    display: inline-block;
    color: var(--ds-form-label-color);
    font-size: var(--ds-form-label-font-size);
    font-weight: var(--ds-form-label-font-weight);
    line-height: var(--ds-line-height-base);
  }
  .form-label__required {
    color: var(--ds-form-label-required-color);
  }
  .form-helper {
    /* Color del texto. */
    --ds-form-helper-color: var(--ds-color-text-muted);
    --ds-form-helper-font-size: var(--ds-font-size-sm);
    margin: 0;
    color: var(--ds-form-helper-color);
    font-size: var(--ds-form-helper-font-size);
    line-height: var(--ds-line-height-base);
  }
  .form-feedback {
    /* Color del texto y del ícono. */
    --ds-form-feedback-color: var(--ds-color-danger);
    --ds-form-feedback-font-size: var(--ds-font-size-sm);
    /* Separación entre ícono y texto. */
    --ds-form-feedback-gap: 0.375rem;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-form-feedback-gap);
    margin: 0;
    color: var(--ds-form-feedback-color);
    font-size: var(--ds-form-feedback-font-size);
    line-height: var(--ds-line-height-base);
  }
  .form-feedback :where(svg) {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    margin-top: calc((var(--ds-line-height-base) * 1em - 1.15em) / 2);
  }
  .form-feedback--error {
    --ds-form-feedback-color: var(--ds-color-danger);
  }
  .form-feedback--success {
    --ds-form-feedback-color: var(--ds-color-success-strong);
  }
}
@layer ds.components {
  .form-input,
  .form-select {
    /* Fondo. */
    --ds-form-input-bg: var(--ds-color-surface);
    /* Color del texto. */
    --ds-form-input-color: var(--ds-color-text);
    /* Color del borde. */
    --ds-form-input-border-color: var(--ds-color-border);
    /* Color del texto de ejemplo (placeholder). */
    --ds-form-input-placeholder-color: var(--ds-color-text-muted);
    /* Espacio vertical interno. */
    --ds-form-input-padding-y: 0.375rem;
    /* Espacio horizontal interno. */
    --ds-form-input-padding-x: 0.75rem;
    --ds-form-input-font-size: var(--ds-font-size-base);
    --ds-form-input-line-height: var(--ds-line-height-base);
    /* Radio de las esquinas (píldora). */
    --ds-form-input-radius: var(--ds-radius-full);
    /* Radio del textarea y del select múltiple. */
    --ds-form-input-multiline-radius: var(--ds-radius-lg);
    /* Alto mínimo del textarea. */
    --ds-form-input-textarea-min-height: 7.5rem;
    /* Borde con foco. */
    --ds-form-input-focus-border-color: var(--ds-color-primary);
    /* Anillo de foco. */
    --ds-form-input-focus-ring-color: color-mix(in srgb, var(--ds-color-primary) 15%, transparent);
    /* Grosor del anillo de foco. */
    --ds-form-input-focus-ring-width: 4px;
    /* Borde y anillo con error (is-invalid o aria-invalid). */
    --ds-form-input-invalid-color: var(--ds-color-danger);
    /* Borde y anillo de un campo válido (is-valid). */
    --ds-form-input-valid-color: var(--ds-color-success);
    /* Opacidad cuando está deshabilitado. */
    --ds-form-input-disabled-opacity: 0.6;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--ds-form-input-padding-y) var(--ds-form-input-padding-x);
    border: 1px solid var(--ds-form-input-border-color);
    border-radius: var(--ds-form-input-radius);
    background-color: var(--ds-form-input-bg);
    color: var(--ds-form-input-color);
    font-family: inherit;
    font-size: var(--ds-form-input-font-size);
    line-height: var(--ds-form-input-line-height);
    appearance: none;
    transition: border-color var(--ds-duration-fast) var(--ds-easing);
  }
  .form-input::placeholder,
  .form-select::placeholder {
    color: var(--ds-form-input-placeholder-color);
    opacity: 1;
  }
  .form-input:focus,
  .form-select:focus {
    border-color: var(--ds-form-input-focus-border-color);
    outline: var(--ds-form-input-focus-ring-width) solid var(--ds-form-input-focus-ring-color);
    outline-offset: 0;
  }
  .form-input:disabled,
  .form-select:disabled {
    opacity: var(--ds-form-input-disabled-opacity);
    cursor: not-allowed;
  }
  .form-input:where(textarea) {
    min-height: var(--ds-form-input-textarea-min-height);
    border-radius: var(--ds-form-input-multiline-radius);
  }
  .form-select {
    padding-right: calc(var(--ds-form-input-padding-x) * 2 + 0.75em);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--ds-form-input-padding-x) center;
    background-repeat: no-repeat;
    background-size: 0.75em;
    cursor: pointer;
  }
  .form-select:is([multiple], [size]:not([size="1"])) {
    padding-right: var(--ds-form-input-padding-x);
    border-radius: var(--ds-form-input-multiline-radius);
    background-image: none;
    cursor: default;
  }
  .form-input--sm,
  .form-select--sm {
    --ds-form-input-padding-y: 0.25rem;
    --ds-form-input-padding-x: 0.5rem;
    --ds-form-input-font-size: var(--ds-font-size-sm);
    --ds-form-input-line-height: 1.25;
  }
  .form-input--lg,
  .form-select--lg {
    --ds-form-input-padding-y: 0.75rem;
    --ds-form-input-padding-x: 1.25rem;
    --ds-form-input-font-size: var(--ds-font-size-lg);
  }
  :is(.form-input, .form-select):is(.is-invalid, [aria-invalid=true]) {
    --ds-form-input-border-color: var(--ds-form-input-invalid-color);
    --ds-form-input-focus-border-color: var(--ds-form-input-invalid-color);
    --ds-form-input-focus-ring-color: color-mix(in srgb, var(--ds-form-input-invalid-color) 15%, transparent);
  }
  :is(.form-input, .form-select).is-valid {
    --ds-form-input-border-color: var(--ds-form-input-valid-color);
    --ds-form-input-focus-border-color: var(--ds-form-input-valid-color);
    --ds-form-input-focus-ring-color: color-mix(in srgb, var(--ds-form-input-valid-color) 15%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .form-input,
    .form-select {
      transition: none;
    }
  }
}
@layer ds.components {
  .form-check {
    /* Tamaño de la casilla y del radio. */
    --ds-form-check-size: 1.25em;
    /* Separación entre el control y el texto. */
    --ds-form-check-gap: var(--ds-space-2);
    /* Fondo sin marcar. */
    --ds-form-check-bg: var(--ds-color-surface);
    /* Borde sin marcar (y perilla del switch apagado). */
    --ds-form-check-border-color: color-mix(in srgb, var(--ds-color-text) 50%, var(--ds-color-surface));
    /* Grosor del borde. */
    --ds-form-check-border-width: 1px;
    /* Radio de la casilla del checkbox. */
    --ds-form-check-radius: var(--ds-radius-sm);
    /* Borde en hover. */
    --ds-form-check-hover-border-color: var(--ds-color-primary);
    /* Fondo y borde cuando está marcado. */
    --ds-form-check-checked-bg: var(--ds-color-primary);
    /* Marca, punto del radio y perilla del switch encendido. */
    --ds-form-check-checked-color: var(--ds-color-primary-contrast);
    /* Borde con error (is-invalid o aria-invalid). */
    --ds-form-check-invalid-color: var(--ds-color-danger);
    /* Ancho del switch. */
    --ds-form-check-switch-width: 2.25em;
    /* Opacidad cuando está deshabilitado. */
    --ds-form-check-disabled-opacity: 0.5;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-form-check-gap);
    line-height: var(--ds-line-height-base);
  }
  .form-check__input {
    display: inline-grid;
    flex-shrink: 0;
    place-content: center;
    width: var(--ds-form-check-size);
    height: var(--ds-form-check-size);
    margin: calc((var(--ds-line-height-base) * 1em - var(--ds-form-check-size)) / 2) 0 0;
    border: var(--ds-form-check-border-width) solid var(--ds-form-check-border-color);
    border-radius: var(--ds-form-check-radius);
    background-color: var(--ds-form-check-bg);
    color: var(--ds-form-check-checked-color);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--ds-duration-fast) var(--ds-easing), border-color var(--ds-duration-fast) var(--ds-easing);
  }
  .form-check__input::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3 8.5 3.5 3.5 6.5-8'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: scale(0);
    transition: transform var(--ds-duration-fast) var(--ds-easing);
  }
  .form-check__input:hover:not(:checked, :disabled) {
    border-color: var(--ds-form-check-hover-border-color);
  }
  .form-check__input:checked, .form-check__input[type=checkbox]:indeterminate {
    border-color: var(--ds-form-check-checked-bg);
    background-color: var(--ds-form-check-checked-bg);
  }
  .form-check__input:checked::before, .form-check__input[type=checkbox]:indeterminate::before {
    transform: scale(1);
  }
  .form-check__input[type=checkbox]:indeterminate::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.5' d='M3.5 8h9'/%3E%3C/svg%3E");
  }
  .form-check__input:disabled {
    opacity: var(--ds-form-check-disabled-opacity);
    cursor: not-allowed;
  }
  .form-check__input:is(.is-invalid, [aria-invalid=true]) {
    --ds-form-check-border-color: var(--ds-form-check-invalid-color);
    --ds-form-check-hover-border-color: var(--ds-form-check-invalid-color);
    --ds-form-check-checked-bg: var(--ds-form-check-invalid-color);
  }
  .form-check__input[type=radio] {
    border-radius: 50%;
  }
  .form-check__input[type=radio]::before {
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    mask: none;
  }
  .form-check__label {
    cursor: pointer;
  }
  .form-check__input:disabled ~ .form-check__label {
    opacity: var(--ds-form-check-disabled-opacity);
    cursor: not-allowed;
  }
  .form-check--switch .form-check__input {
    width: var(--ds-form-check-switch-width);
    padding: 0 2px;
    border-radius: var(--ds-radius-full);
    place-content: center start;
  }
  .form-check--switch .form-check__input::before {
    width: calc(var(--ds-form-check-size) - 2 * var(--ds-form-check-border-width) - 4px);
    height: calc(var(--ds-form-check-size) - 2 * var(--ds-form-check-border-width) - 4px);
    border-radius: 50%;
    background-color: var(--ds-form-check-border-color);
    mask: none;
    transform: none;
    transition: transform var(--ds-duration-fast) var(--ds-easing), background-color var(--ds-duration-fast) var(--ds-easing);
  }
  .form-check--switch .form-check__input:checked::before {
    background-color: currentColor;
    transform: translateX(calc(var(--ds-form-check-switch-width) - var(--ds-form-check-size)));
  }
  @media (forced-colors: active) {
    .form-check__input {
      forced-color-adjust: none;
      border-color: CanvasText;
      background-color: Canvas;
      color: HighlightText;
    }
    .form-check__input:checked, .form-check__input[type=checkbox]:indeterminate {
      border-color: Highlight;
      background-color: Highlight;
    }
    .form-check__input:disabled {
      border-color: GrayText;
    }
    .form-check--switch .form-check__input:not(:checked)::before {
      background-color: CanvasText;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-check__input,
    .form-check__input::before {
      transition: none;
    }
  }
}
@layer ds.utilities {
  .text-start {
    text-align: start;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  @media (min-width: 576px) {
    .text-sm-start {
      text-align: start;
    }
    .text-sm-center {
      text-align: center;
    }
    .text-sm-end {
      text-align: end;
    }
  }
  @media (min-width: 768px) {
    .text-md-start {
      text-align: start;
    }
    .text-md-center {
      text-align: center;
    }
    .text-md-end {
      text-align: end;
    }
  }
  @media (min-width: 992px) {
    .text-lg-start {
      text-align: start;
    }
    .text-lg-center {
      text-align: center;
    }
    .text-lg-end {
      text-align: end;
    }
  }
  @media (min-width: 1200px) {
    .text-xl-start {
      text-align: start;
    }
    .text-xl-center {
      text-align: center;
    }
    .text-xl-end {
      text-align: end;
    }
  }
  @media (min-width: 1408px) {
    .text-xxl-start {
      text-align: start;
    }
    .text-xxl-center {
      text-align: center;
    }
    .text-xxl-end {
      text-align: end;
    }
  }
  .text-primary {
    color: var(--ds-color-primary);
  }
  .text-secondary {
    color: var(--ds-color-secondary);
  }
  .text-success {
    color: var(--ds-color-success);
  }
  .text-danger {
    color: var(--ds-color-danger);
  }
  .text-warning {
    color: var(--ds-color-warning);
  }
  .text-info {
    color: var(--ds-color-info);
  }
  .text-muted {
    color: var(--ds-color-text-muted);
  }
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@layer ds.utilities {
  .m-0 {
    margin: 0;
  }
  .m-1 {
    margin: var(--ds-space-1);
  }
  .m-2 {
    margin: var(--ds-space-2);
  }
  .m-3 {
    margin: var(--ds-space-3);
  }
  .m-4 {
    margin: var(--ds-space-4);
  }
  .m-5 {
    margin: var(--ds-space-5);
  }
  .m-6 {
    margin: var(--ds-space-6);
  }
  .m-7 {
    margin: var(--ds-space-7);
  }
  .m-8 {
    margin: var(--ds-space-8);
  }
  .m-auto {
    margin: auto;
  }
  .mx-0 {
    margin-inline: 0;
  }
  .mx-1 {
    margin-inline: var(--ds-space-1);
  }
  .mx-2 {
    margin-inline: var(--ds-space-2);
  }
  .mx-3 {
    margin-inline: var(--ds-space-3);
  }
  .mx-4 {
    margin-inline: var(--ds-space-4);
  }
  .mx-5 {
    margin-inline: var(--ds-space-5);
  }
  .mx-6 {
    margin-inline: var(--ds-space-6);
  }
  .mx-7 {
    margin-inline: var(--ds-space-7);
  }
  .mx-8 {
    margin-inline: var(--ds-space-8);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: 0;
  }
  .my-1 {
    margin-block: var(--ds-space-1);
  }
  .my-2 {
    margin-block: var(--ds-space-2);
  }
  .my-3 {
    margin-block: var(--ds-space-3);
  }
  .my-4 {
    margin-block: var(--ds-space-4);
  }
  .my-5 {
    margin-block: var(--ds-space-5);
  }
  .my-6 {
    margin-block: var(--ds-space-6);
  }
  .my-7 {
    margin-block: var(--ds-space-7);
  }
  .my-8 {
    margin-block: var(--ds-space-8);
  }
  .my-auto {
    margin-block: auto;
  }
  .mt-0 {
    margin-block-start: 0;
  }
  .mt-1 {
    margin-block-start: var(--ds-space-1);
  }
  .mt-2 {
    margin-block-start: var(--ds-space-2);
  }
  .mt-3 {
    margin-block-start: var(--ds-space-3);
  }
  .mt-4 {
    margin-block-start: var(--ds-space-4);
  }
  .mt-5 {
    margin-block-start: var(--ds-space-5);
  }
  .mt-6 {
    margin-block-start: var(--ds-space-6);
  }
  .mt-7 {
    margin-block-start: var(--ds-space-7);
  }
  .mt-8 {
    margin-block-start: var(--ds-space-8);
  }
  .mt-auto {
    margin-block-start: auto;
  }
  .mb-0 {
    margin-block-end: 0;
  }
  .mb-1 {
    margin-block-end: var(--ds-space-1);
  }
  .mb-2 {
    margin-block-end: var(--ds-space-2);
  }
  .mb-3 {
    margin-block-end: var(--ds-space-3);
  }
  .mb-4 {
    margin-block-end: var(--ds-space-4);
  }
  .mb-5 {
    margin-block-end: var(--ds-space-5);
  }
  .mb-6 {
    margin-block-end: var(--ds-space-6);
  }
  .mb-7 {
    margin-block-end: var(--ds-space-7);
  }
  .mb-8 {
    margin-block-end: var(--ds-space-8);
  }
  .mb-auto {
    margin-block-end: auto;
  }
  .ms-0 {
    margin-inline-start: 0;
  }
  .ms-1 {
    margin-inline-start: var(--ds-space-1);
  }
  .ms-2 {
    margin-inline-start: var(--ds-space-2);
  }
  .ms-3 {
    margin-inline-start: var(--ds-space-3);
  }
  .ms-4 {
    margin-inline-start: var(--ds-space-4);
  }
  .ms-5 {
    margin-inline-start: var(--ds-space-5);
  }
  .ms-6 {
    margin-inline-start: var(--ds-space-6);
  }
  .ms-7 {
    margin-inline-start: var(--ds-space-7);
  }
  .ms-8 {
    margin-inline-start: var(--ds-space-8);
  }
  .ms-auto {
    margin-inline-start: auto;
  }
  .me-0 {
    margin-inline-end: 0;
  }
  .me-1 {
    margin-inline-end: var(--ds-space-1);
  }
  .me-2 {
    margin-inline-end: var(--ds-space-2);
  }
  .me-3 {
    margin-inline-end: var(--ds-space-3);
  }
  .me-4 {
    margin-inline-end: var(--ds-space-4);
  }
  .me-5 {
    margin-inline-end: var(--ds-space-5);
  }
  .me-6 {
    margin-inline-end: var(--ds-space-6);
  }
  .me-7 {
    margin-inline-end: var(--ds-space-7);
  }
  .me-8 {
    margin-inline-end: var(--ds-space-8);
  }
  .me-auto {
    margin-inline-end: auto;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--ds-space-1);
  }
  .p-2 {
    padding: var(--ds-space-2);
  }
  .p-3 {
    padding: var(--ds-space-3);
  }
  .p-4 {
    padding: var(--ds-space-4);
  }
  .p-5 {
    padding: var(--ds-space-5);
  }
  .p-6 {
    padding: var(--ds-space-6);
  }
  .p-7 {
    padding: var(--ds-space-7);
  }
  .p-8 {
    padding: var(--ds-space-8);
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-1 {
    padding-inline: var(--ds-space-1);
  }
  .px-2 {
    padding-inline: var(--ds-space-2);
  }
  .px-3 {
    padding-inline: var(--ds-space-3);
  }
  .px-4 {
    padding-inline: var(--ds-space-4);
  }
  .px-5 {
    padding-inline: var(--ds-space-5);
  }
  .px-6 {
    padding-inline: var(--ds-space-6);
  }
  .px-7 {
    padding-inline: var(--ds-space-7);
  }
  .px-8 {
    padding-inline: var(--ds-space-8);
  }
  .py-0 {
    padding-block: 0;
  }
  .py-1 {
    padding-block: var(--ds-space-1);
  }
  .py-2 {
    padding-block: var(--ds-space-2);
  }
  .py-3 {
    padding-block: var(--ds-space-3);
  }
  .py-4 {
    padding-block: var(--ds-space-4);
  }
  .py-5 {
    padding-block: var(--ds-space-5);
  }
  .py-6 {
    padding-block: var(--ds-space-6);
  }
  .py-7 {
    padding-block: var(--ds-space-7);
  }
  .py-8 {
    padding-block: var(--ds-space-8);
  }
  .pt-0 {
    padding-block-start: 0;
  }
  .pt-1 {
    padding-block-start: var(--ds-space-1);
  }
  .pt-2 {
    padding-block-start: var(--ds-space-2);
  }
  .pt-3 {
    padding-block-start: var(--ds-space-3);
  }
  .pt-4 {
    padding-block-start: var(--ds-space-4);
  }
  .pt-5 {
    padding-block-start: var(--ds-space-5);
  }
  .pt-6 {
    padding-block-start: var(--ds-space-6);
  }
  .pt-7 {
    padding-block-start: var(--ds-space-7);
  }
  .pt-8 {
    padding-block-start: var(--ds-space-8);
  }
  .pb-0 {
    padding-block-end: 0;
  }
  .pb-1 {
    padding-block-end: var(--ds-space-1);
  }
  .pb-2 {
    padding-block-end: var(--ds-space-2);
  }
  .pb-3 {
    padding-block-end: var(--ds-space-3);
  }
  .pb-4 {
    padding-block-end: var(--ds-space-4);
  }
  .pb-5 {
    padding-block-end: var(--ds-space-5);
  }
  .pb-6 {
    padding-block-end: var(--ds-space-6);
  }
  .pb-7 {
    padding-block-end: var(--ds-space-7);
  }
  .pb-8 {
    padding-block-end: var(--ds-space-8);
  }
  .ps-0 {
    padding-inline-start: 0;
  }
  .ps-1 {
    padding-inline-start: var(--ds-space-1);
  }
  .ps-2 {
    padding-inline-start: var(--ds-space-2);
  }
  .ps-3 {
    padding-inline-start: var(--ds-space-3);
  }
  .ps-4 {
    padding-inline-start: var(--ds-space-4);
  }
  .ps-5 {
    padding-inline-start: var(--ds-space-5);
  }
  .ps-6 {
    padding-inline-start: var(--ds-space-6);
  }
  .ps-7 {
    padding-inline-start: var(--ds-space-7);
  }
  .ps-8 {
    padding-inline-start: var(--ds-space-8);
  }
  .pe-0 {
    padding-inline-end: 0;
  }
  .pe-1 {
    padding-inline-end: var(--ds-space-1);
  }
  .pe-2 {
    padding-inline-end: var(--ds-space-2);
  }
  .pe-3 {
    padding-inline-end: var(--ds-space-3);
  }
  .pe-4 {
    padding-inline-end: var(--ds-space-4);
  }
  .pe-5 {
    padding-inline-end: var(--ds-space-5);
  }
  .pe-6 {
    padding-inline-end: var(--ds-space-6);
  }
  .pe-7 {
    padding-inline-end: var(--ds-space-7);
  }
  .pe-8 {
    padding-inline-end: var(--ds-space-8);
  }
}
@layer ds.utilities {
  .d-none {
    display: none;
  }
  .d-inline {
    display: inline;
  }
  .d-inline-block {
    display: inline-block;
  }
  .d-block {
    display: block;
  }
  .d-flex {
    display: flex;
  }
  .d-inline-flex {
    display: inline-flex;
  }
  .d-grid {
    display: grid;
  }
  @media (min-width: 576px) {
    .d-sm-none {
      display: none;
    }
    .d-sm-inline {
      display: inline;
    }
    .d-sm-inline-block {
      display: inline-block;
    }
    .d-sm-block {
      display: block;
    }
    .d-sm-flex {
      display: flex;
    }
    .d-sm-inline-flex {
      display: inline-flex;
    }
    .d-sm-grid {
      display: grid;
    }
  }
  @media (min-width: 768px) {
    .d-md-none {
      display: none;
    }
    .d-md-inline {
      display: inline;
    }
    .d-md-inline-block {
      display: inline-block;
    }
    .d-md-block {
      display: block;
    }
    .d-md-flex {
      display: flex;
    }
    .d-md-inline-flex {
      display: inline-flex;
    }
    .d-md-grid {
      display: grid;
    }
  }
  @media (min-width: 992px) {
    .d-lg-none {
      display: none;
    }
    .d-lg-inline {
      display: inline;
    }
    .d-lg-inline-block {
      display: inline-block;
    }
    .d-lg-block {
      display: block;
    }
    .d-lg-flex {
      display: flex;
    }
    .d-lg-inline-flex {
      display: inline-flex;
    }
    .d-lg-grid {
      display: grid;
    }
  }
  @media (min-width: 1200px) {
    .d-xl-none {
      display: none;
    }
    .d-xl-inline {
      display: inline;
    }
    .d-xl-inline-block {
      display: inline-block;
    }
    .d-xl-block {
      display: block;
    }
    .d-xl-flex {
      display: flex;
    }
    .d-xl-inline-flex {
      display: inline-flex;
    }
    .d-xl-grid {
      display: grid;
    }
  }
  @media (min-width: 1408px) {
    .d-xxl-none {
      display: none;
    }
    .d-xxl-inline {
      display: inline;
    }
    .d-xxl-inline-block {
      display: inline-block;
    }
    .d-xxl-block {
      display: block;
    }
    .d-xxl-flex {
      display: flex;
    }
    .d-xxl-inline-flex {
      display: inline-flex;
    }
    .d-xxl-grid {
      display: grid;
    }
  }
}
@layer ds.utilities {
  .visually-hidden,
  .visually-hidden-focusable:not(:focus, :focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .visually-hidden:not(caption),
  .visually-hidden-focusable:not(:focus, :focus-within):not(caption) {
    position: absolute !important;
  }
}