danielgm-ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,3369 @@
+/* Estilos públicos de danielgm-ui. Importar una sola vez en el layout o entrada de la aplicación. */
+/* Las secciones finales incorporan menús, radios, notificaciones y marcadores de carga. */
+/* Los componentes compuestos usan los mismos tokens, foco y áreas táctiles que los controles básicos. */
+/* 1. Tokens públicos. Se pueden sobrescribir en :root o heredar desde un contenedor. */
+:root {
+  --dgm-primary: #4f46e5;
+  --dgm-primary-hover: #4338ca;
+  --dgm-on-primary: #fff;
+  --dgm-text: #182230;
+  --dgm-muted: #536176;
+  --dgm-surface: #fff;
+  --dgm-subtle: #f3f5f9;
+  /* Fondo y texto se personalizan juntos; el hover neutro no sustituye una selección. */
+  --dgm-hover: #eef1f7;
+  --dgm-on-hover: var(--dgm-text);
+  --dgm-border: #ccd3df;
+  --dgm-control-border: #7c8ba1;
+  --dgm-danger: #b42318;
+  --dgm-danger-surface: #b42318;
+  --dgm-danger-hover: #912018;
+  --dgm-on-danger: #fff;
+  --dgm-radius: 0.625rem;
+  /* Escala pública y roles: la aplicación puede adaptar toda la tipografía desde la raíz. */
+  --dgm-font: inherit;
+  --dgm-font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
+  --dgm-font-size-xs: 0.75rem;
+  --dgm-font-size-sm: 0.875rem;
+  --dgm-font-size-md: 0.9375rem;
+  --dgm-font-size-base: 1rem;
+  --dgm-font-size-lg: 1.125rem;
+  --dgm-font-size-xl: 1.25rem;
+  --dgm-font-size-2xl: 1.5rem;
+  --dgm-font-weight-regular: 400;
+  --dgm-font-weight-medium: 500;
+  --dgm-font-weight-semibold: 600;
+  --dgm-font-weight-bold: 700;
+  --dgm-leading-tight: 1.25;
+  --dgm-leading-normal: 1.5;
+  --dgm-leading-relaxed: 1.65;
+  --dgm-tracking-normal: 0;
+  --dgm-tracking-heading: -0.035em;
+  --dgm-tracking-label: 0.06em;
+  --dgm-text-body: var(--dgm-font-size-base);
+  --dgm-text-control: var(--dgm-font-size-base);
+  --dgm-text-label: var(--dgm-font-size-md);
+  --dgm-text-action: var(--dgm-font-size-md);
+  --dgm-text-help: var(--dgm-font-size-sm);
+  --dgm-text-caption: var(--dgm-font-size-xs);
+  --dgm-text-title: var(--dgm-font-size-xl);
+  /* Geometría común de campos y selectores; permite crecer a los textos largos. */
+  --dgm-control-min-height: 3rem;
+  /* Márgenes simétricos de listas y contenido de sus opciones. */
+  --dgm-list-padding: 0.5rem;
+  --dgm-option-padding-inline: 0.75rem;
+  /* Una capa por panel anidado: el overlay ocupa su base y el contenido la siguiente. */
+  --dgm-layer-base: 1100;
+  --dgm-layer-step: 10;
+  --dgm-layer-toast: 2100;
+  /* Misma respuesta al entrar y salir del hover, con texto o solo con un icono.
+   * No incluye transform ni el contorno de foco: pulsar no cambia el tamaño. */
+  --dgm-hover-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  /* Ritmo común de los paneles; el origen lo determina cada anclaje. */
+  --dgm-panel-duration-in: 180ms;
+  --dgm-panel-duration-out: 140ms;
+  --dgm-panel-scale: 0.96;
+  --dgm-panel-easing-in: cubic-bezier(0.16, 1, 0.3, 1);
+  --dgm-panel-easing-out: ease-in;
+  /* Scrollbars neutras; pueden personalizarse sin cambiar los colores de las acciones. */
+  --dgm-scrollbar-thumb: #7c8ba1;
+  --dgm-scrollbar-thumb-hover: #536176;
+  --dgm-scrollbar-track: transparent;
+}
+
+/* Scroll nativo compartido. El prefijo limita el estilo a nuestros componentes;
+ * dgm-scrollbars permite aplicarlo también a una página o contenedor del consumidor.
+ * La especificidad supera la regla que Radix inyecta para ocultar la barra de Select.
+ * Carousel conserva su navegación por gestos y controles, con la barra oculta.
+ * No imponemos overflow ni altura: cada componente decide cuándo necesita scroll. */
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+  .dgm-carousel-viewport
+) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--dgm-scrollbar-thumb) var(--dgm-scrollbar-track);
+  scrollbar-gutter: auto;
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  ):hover {
+  scrollbar-color: var(--dgm-scrollbar-thumb-hover) var(--dgm-scrollbar-track);
+}
+/* En Chromium y WebKit usamos su geometría personalizable para quitar los botones.
+ * Los valores estándar distintos de auto anulan estos pseudoelementos: por eso se
+ * restablecen aquí, incluido el hover. Firefox conserva su barra nativa fina. */
+@supports selector(::-webkit-scrollbar) {
+  :is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  ),
+  :is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+      .dgm-carousel-viewport
+    ):hover {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar {
+  display: block;
+  width: 10px;
+  height: 10px;
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar-track,
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar-corner {
+  background: var(--dgm-scrollbar-track);
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar-thumb {
+  background: var(--dgm-scrollbar-thumb);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 999px;
+}
+:is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  )::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dgm-scrollbar-thumb-hover);
+}
+@media (forced-colors: active) {
+  :is(.dgm-scrollbars, .dgm-scrollbars *, [class^='dgm-'], [class*=' dgm-']):not(
+    .dgm-carousel-viewport
+  ) {
+    --dgm-scrollbar-thumb: ButtonText;
+    --dgm-scrollbar-thumb-hover: Highlight;
+    --dgm-scrollbar-track: Canvas;
+    /* El modo de contraste del sistema prevalece también durante el hover. */
+    scrollbar-color: auto !important;
+  }
+}
+/* 2. Base acotada al prefijo dgm. No resetea elementos de la aplicación consumidora. */
+.dgm-button,
+.dgm-input,
+.dgm-field,
+.dgm-choice,
+.dgm-badge,
+.dgm-card,
+.dgm-alert,
+.dgm-separator {
+  box-sizing: border-box;
+  font-family: var(--dgm-font, inherit);
+}
+/* Las raíces textuales comparten familia y ritmo, también fuera de la documentación.
+ * La especificidad baja permite personalizar una pieza sin resetear HTML ajeno ni
+ * los bloques pre/code que aporte el consumidor. Los portales leen los tokens de :root. */
+:where(
+  .dgm-button,
+  .dgm-input,
+  .dgm-field,
+  .dgm-choice,
+  .dgm-badge,
+  .dgm-card,
+  .dgm-alert,
+  .dgm-custom-menu,
+  .dgm-modal,
+  .dgm-tooltip,
+  .dgm-tabs,
+  .dgm-accordion,
+  .dgm-dropdown,
+  .dgm-radio-group,
+  .dgm-toast,
+  .dgm-loader,
+  .dgm-popover,
+  .dgm-combobox-panel,
+  .dgm-calendar-panel,
+  .dgm-drawer,
+  .dgm-command,
+  .dgm-pagination,
+  .dgm-breadcrumbs,
+  .dgm-avatar,
+  .dgm-progress,
+  .dgm-choice-group,
+  .dgm-data-table,
+  .dgm-file-upload,
+  .dgm-stepper,
+  .dgm-empty-state,
+  .dgm-toggle-group,
+  .dgm-navigation,
+  .dgm-multi-select,
+  .dgm-resizable,
+  .dgm-tree,
+  .dgm-carousel
+) {
+  font-family: var(--dgm-font, inherit);
+  font-size: var(--dgm-text-body);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  letter-spacing: var(--dgm-tracking-normal);
+}
+/* Typography: la variante visual no impone la jerarquía HTML ni el espaciado del layout. */
+.dgm-typography {
+  margin: 0;
+  min-width: 0;
+  font-family: var(--dgm-font, inherit);
+  font-size: var(--dgm-text-body);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-relaxed);
+  letter-spacing: var(--dgm-tracking-normal);
+  overflow-wrap: anywhere;
+}
+.dgm-typography--title,
+.dgm-typography--subtitle {
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-tight);
+  letter-spacing: var(--dgm-tracking-heading);
+  text-wrap: balance;
+}
+.dgm-typography--title {
+  font-size: var(--dgm-font-size-2xl);
+  font-weight: var(--dgm-font-weight-bold);
+}
+.dgm-typography--subtitle {
+  font-size: var(--dgm-text-title);
+}
+.dgm-typography--lead {
+  font-size: var(--dgm-font-size-lg);
+}
+.dgm-typography--label {
+  font-size: var(--dgm-text-label);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-normal);
+}
+.dgm-typography--caption {
+  font-size: var(--dgm-text-caption);
+  line-height: var(--dgm-leading-normal);
+}
+.dgm-typography--code {
+  font-family: var(--dgm-font-mono);
+  font-size: var(--dgm-text-help);
+  line-height: var(--dgm-leading-normal);
+}
+.dgm-typography--default {
+  color: var(--dgm-text);
+}
+.dgm-typography--muted {
+  color: var(--dgm-muted);
+}
+.dgm-typography--primary {
+  color: var(--dgm-primary);
+}
+.dgm-typography--danger {
+  color: var(--dgm-danger);
+}
+.dgm-typography--inherit {
+  color: inherit;
+}
+
+/* Container: border-box incluye los gutters en el límite; min-inline-size evita mínimos de flex/grid.
+   Las propiedades lógicas sirven también para contenido RTL. No recortamos menús ni tooltips.
+   No se usa una variable heredable para el tamaño: cada Container anidado conserva su propia opción. */
+.dgm-container {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding-inline: clamp(1rem, 3vw, 2rem);
+}
+.dgm-container--sm {
+  max-inline-size: 40rem;
+}
+.dgm-container--md {
+  max-inline-size: 48rem;
+}
+.dgm-container--lg {
+  max-inline-size: 64rem;
+}
+.dgm-container--xl {
+  max-inline-size: 80rem;
+}
+.dgm-container--full {
+  max-inline-size: none;
+}
+.dgm-container--flush {
+  padding-inline: 0;
+}
+
+/* 3. Botones: jerarquías, tamaños y ancho. Se conserva el texto durante la carga. */
+/* Los controles internos (cierre, calendario, contraseña, etc.) comparten el hover
+ * aunque no usen Button. La baja especificidad preserva sus transiciones propias. */
+:where(
+  button[class^='dgm-'],
+  button[class*=' dgm-'],
+  .dgm-calendar button,
+  .dgm-tree-row,
+  .dgm-navigation-link,
+  .dgm-custom-option,
+  .dgm-command-item,
+  .dgm-dropdown-item,
+  .dgm-breadcrumbs a,
+  .dgm-multi-tags button,
+  .dgm-carousel-indicators button
+) {
+  transition: var(--dgm-hover-transition);
+}
+.dgm-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--dgm-radius);
+  min-height: 2.75rem;
+  padding: 0.625rem 1rem;
+  font-size: var(--dgm-text-action);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-tight);
+  cursor: pointer;
+  text-decoration: none;
+  transition: var(--dgm-hover-transition);
+}
+.dgm-button--primary {
+  color: var(--dgm-on-primary);
+  background: var(--dgm-primary);
+}
+.dgm-button--primary:hover:not(:disabled),
+.dgm-toggle-item[data-state='on']:hover:not(:disabled),
+.dgm-tree [aria-selected='true']:not([aria-disabled='true']) > .dgm-tree-row:hover,
+.dgm-calendar .rdp-selected:not(.rdp-range_middle) .rdp-day_button:hover:not(:disabled) {
+  background: var(--dgm-primary-hover);
+  color: var(--dgm-on-primary);
+}
+.dgm-button--secondary {
+  color: var(--dgm-text);
+  background: var(--dgm-subtle);
+}
+.dgm-button--outline {
+  color: var(--dgm-text);
+  background: var(--dgm-surface);
+  border-color: var(--dgm-border);
+}
+.dgm-button--ghost {
+  color: var(--dgm-text);
+  background: transparent;
+}
+.dgm-button--secondary:hover:not(:disabled),
+.dgm-button--outline:hover:not(:disabled),
+.dgm-button--ghost:hover:not(:disabled) {
+  border-color: var(--dgm-border);
+}
+/* Una única pareja neutra para acciones y opciones. Los estados seleccionados
+ * rellenos usan la pareja primaria anterior; los desactivados nunca se resaltan. */
+.dgm-button--secondary:hover:not(:disabled),
+.dgm-button--outline:hover:not(:disabled),
+.dgm-button--ghost:hover:not(:disabled),
+.dgm-icon-close:hover:not(:disabled),
+.dgm-password-toggle:hover:not(:disabled),
+.dgm-multi-tags button:hover:not(:disabled),
+.dgm-carousel-indicators button:hover:not(:disabled),
+button.dgm-step:hover:not(:disabled),
+.dgm-accordion-trigger:hover:not(:disabled),
+.dgm-toggle-item[data-state='off']:hover:not(:disabled),
+.dgm-navigation-trigger:hover:not(:disabled),
+.dgm-navigation-link:hover:not([aria-disabled='true']),
+.dgm-tree
+  [role='treeitem']:not([aria-selected='true']):not([aria-disabled='true'])
+  > .dgm-tree-row:hover,
+.dgm-calendar :is(.rdp-button_previous, .rdp-button_next):hover:not(:disabled),
+.dgm-calendar .rdp-day:not(.rdp-selected) .rdp-day_button:hover:not(:disabled),
+.dgm-calendar .rdp-range_middle .rdp-day_button:hover:not(:disabled),
+.dgm-custom-option[data-highlighted]:not([data-disabled]),
+.dgm-dropdown-item[data-highlighted]:not([data-disabled]),
+.dgm-command:not(.dgm-command--palette)
+  .dgm-command-item[data-selected='true']:not([data-disabled='true']),
+.dgm-command--palette[data-input-mode='keyboard']
+  .dgm-command-item[data-selected='true']:not([data-disabled='true']),
+.dgm-command--palette:not([data-input-mode='keyboard'])
+  .dgm-command-item:hover:not([data-disabled='true']) {
+  background: var(--dgm-hover);
+  color: var(--dgm-interaction-text, var(--dgm-on-hover));
+}
+.dgm-button--danger {
+  color: var(--dgm-on-danger);
+  background: var(--dgm-danger-surface);
+}
+/* Acciones de texto: conserva su jerarquía y utiliza el mismo acento de hover. */
+.dgm-text-action:hover:not(:disabled) {
+  color: var(--dgm-primary-hover);
+}
+.dgm-button--danger:hover:not(:disabled) {
+  background: var(--dgm-danger-hover);
+  color: var(--dgm-on-danger);
+}
+.dgm-button--sm {
+  min-height: 2.25rem;
+  padding: 0.375rem 0.75rem;
+  font-size: var(--dgm-font-size-sm);
+}
+.dgm-button--lg {
+  min-height: 3.125rem;
+  padding: 0.75rem 1.375rem;
+  font-size: var(--dgm-font-size-base);
+}
+.dgm-full {
+  width: 100%;
+}
+/* Un tamaño cuadrado evita que el padding lateral desplace el icono o el indicador. */
+.dgm-button--icon-only {
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  flex-shrink: 0;
+  gap: 0;
+}
+.dgm-button--icon-only.dgm-button--sm {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+.dgm-button--icon-only.dgm-button--lg {
+  width: 3.125rem;
+  height: 3.125rem;
+}
+.dgm-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  height: 1.25em;
+  /* Caja de icono: la unidad geométrica evita añadir una línea de texto al SVG. */
+  line-height: 1;
+}
+.dgm-button-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* 4. Estados compartidos. disabled es nativo; focus-visible distingue el foco de teclado. */
+.dgm-button:disabled,
+.dgm-input:disabled,
+.dgm-checkbox:disabled,
+.dgm-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.dgm-button:focus-visible,
+.dgm-checkbox:focus-visible,
+.dgm-switch:focus-visible {
+  outline: 3px solid var(--dgm-primary);
+  outline-offset: 3px;
+}
+/* Un contorno interior debe contrastar con el relleno primario, incluso en hover. */
+.dgm-tree [role='treeitem'][aria-selected='true']:focus-visible > .dgm-tree-row,
+.dgm-calendar .rdp-selected:not(.rdp-range_middle) .rdp-day_button:focus-visible {
+  outline-color: var(--dgm-on-primary);
+}
+/* Indicador decorativo. El nombre accesible permanece en el texto del botón. */
+.dgm-spinner {
+  width: 0.9em;
+  height: 0.9em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: dgm-spin 0.7s linear infinite;
+}
+@keyframes dgm-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* 5. Campos. min-width: 0 permite encoger dentro de grid/flex; el borde de control tiene su propio token. */
+.dgm-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  width: 100%;
+  min-width: 0;
+  color: var(--dgm-text);
+}
+.dgm-label {
+  font-size: var(--dgm-text-label);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-normal);
+  cursor: pointer;
+}
+.dgm-input {
+  /* Tokens internos: el error cambia la línea y el foco sin duplicar las sombras. */
+  --dgm-field-line: var(--dgm-control-border);
+  --dgm-field-focus: var(--dgm-primary);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--dgm-control-min-height);
+  border: 0;
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  /* Compensa el antiguo borde para conservar el tamaño y la posición del texto. */
+  padding: calc(0.65rem + 1px) calc(0.8rem + 1px);
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  outline: 3px solid transparent;
+  outline-offset: 3px;
+  /* Ambas capas existen en reposo para que el navegador interpole su tamaño y color. */
+  box-shadow:
+    inset 0 0 0 1px var(--dgm-field-line),
+    0 0 0 0 transparent;
+  transition: box-shadow 0.18s ease-out;
+}
+.dgm-input:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--dgm-field-focus),
+    0 0 0 3px color-mix(in srgb, var(--dgm-field-focus) 22%, transparent);
+}
+.dgm-input::placeholder {
+  color: var(--dgm-muted);
+  opacity: 1;
+}
+.dgm-input[aria-invalid='true'] {
+  --dgm-field-line: var(--dgm-danger);
+  --dgm-field-focus: var(--dgm-danger);
+}
+/* El range conserva su pista y thumb nativos, sin la caja de los campos de texto.
+   Mantiene el área táctil del Input y un indicador de foco visible para teclado. */
+.dgm-input[type='range'] {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  accent-color: var(--dgm-primary);
+}
+.dgm-input[type='range']:focus-visible {
+  outline-color: var(--dgm-field-focus);
+}
+.dgm-textarea {
+  resize: vertical;
+}
+.dgm-select {
+  cursor: pointer;
+}
+/* La flecha es decorativa; el select conserva su teclado y selector nativo móvil. */
+.dgm-select-control {
+  position: relative;
+  min-width: 0;
+  color: var(--dgm-text);
+}
+.dgm-select-control--dropdown .dgm-select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-inline-end: 2.5rem;
+}
+.dgm-select-control--dropdown::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: 1rem;
+  top: 50%;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+.dgm-description,
+.dgm-error {
+  display: block;
+  font-size: var(--dgm-text-help);
+  line-height: var(--dgm-leading-normal);
+  overflow-wrap: anywhere;
+}
+.dgm-description {
+  color: var(--dgm-muted);
+}
+.dgm-error {
+  color: var(--dgm-danger);
+}
+/* 6. Opciones booleanas: input nativo, etiqueta clicable y ayuda que puede envolver líneas. */
+.dgm-choice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7rem;
+  min-height: 2.75rem;
+  color: var(--dgm-text);
+}
+.dgm-choice-text {
+  min-width: 0;
+}
+.dgm-choice-text .dgm-label {
+  display: block;
+  padding-bottom: 0.2rem;
+}
+.dgm-checkbox {
+  width: 1.15rem;
+  height: 1.15rem;
+  margin: 0.15rem 0 0;
+  accent-color: var(--dgm-primary);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+/* El checkbox conserva su tamaño durante la interacción. */
+/* El interruptor usa appearance: none solo para la vista; checked y los eventos siguen siendo nativos. */
+.dgm-switch {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 2.75rem;
+  height: 1.5rem;
+  margin: 0.1rem 0 0;
+  border: 1px solid var(--dgm-muted);
+  background: var(--dgm-muted);
+  border-radius: 2rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.15s;
+}
+.dgm-switch::before {
+  content: '';
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  background: #fff;
+  transition: transform 0.15s;
+}
+.dgm-switch:checked {
+  background: var(--dgm-primary);
+  border-color: var(--dgm-primary);
+}
+.dgm-switch:checked::before {
+  transform: translateX(1.25rem);
+}
+/* 7. Tonos semánticos compartidos por Badge y Alert. El texto aporta el significado además del color. */
+.dgm-tone--neutral {
+  --dgm-tone-fg: #3d4b60;
+  --dgm-tone-bg: #f0f3f7;
+  --dgm-tone-border: #d9e0ea;
+}
+.dgm-tone--info {
+  --dgm-tone-fg: #3730a3;
+  --dgm-tone-bg: #eef2ff;
+  --dgm-tone-border: #c7d2fe;
+}
+.dgm-tone--success {
+  --dgm-tone-fg: #166444;
+  --dgm-tone-bg: #edfbf3;
+  --dgm-tone-border: #b9e8cc;
+}
+.dgm-tone--warning {
+  --dgm-tone-fg: #854d0e;
+  --dgm-tone-bg: #fff9e8;
+  --dgm-tone-border: #f1d48a;
+}
+.dgm-tone--danger {
+  --dgm-tone-fg: #a2221a;
+  --dgm-tone-bg: #fff1f0;
+  --dgm-tone-border: #ffc9c5;
+}
+/* 8. Composición: etiquetas, tarjetas y avisos. Las cajas y el texto pueden adaptarse al ancho disponible. */
+.dgm-badge {
+  display: inline-flex;
+  align-items: center;
+  /* Separa iconos y texto sin depender de espacios en blanco dentro de los hijos. */
+  gap: 0.25rem;
+  padding: 0.2rem 0.6rem;
+  border: 1px solid var(--dgm-tone-border);
+  border-radius: 0.4rem;
+  font-size: var(--dgm-text-caption);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-normal);
+  background: var(--dgm-tone-bg);
+  color: var(--dgm-tone-fg);
+}
+.dgm-card {
+  min-width: 0;
+  width: 100%;
+  border: 1px solid var(--dgm-border);
+  border-radius: calc(var(--dgm-radius) + 0.25rem);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  overflow-wrap: anywhere;
+}
+.dgm-card-header,
+.dgm-card-content,
+.dgm-card-footer {
+  padding: 1.25rem;
+}
+.dgm-card-header + .dgm-card-content {
+  padding-top: 0;
+}
+.dgm-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  border-top: 1px solid var(--dgm-border);
+}
+.dgm-alert {
+  position: relative;
+  display: flex;
+  gap: 0.8rem;
+  padding: 1rem;
+  border: 1px solid var(--dgm-tone-border);
+  border-radius: var(--dgm-radius);
+  color: var(--dgm-tone-fg);
+  background: var(--dgm-tone-bg);
+  line-height: var(--dgm-leading-relaxed);
+  overflow-wrap: anywhere;
+}
+
+.dgm-alert > div {
+  min-width: 0;
+}
+.dgm-alert-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.15rem;
+  font-size: var(--dgm-text-caption);
+  font-weight: var(--dgm-font-weight-bold);
+}
+.dgm-alert-title {
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-alert-content {
+  font-size: var(--dgm-text-body);
+}
+.dgm-alert-title + .dgm-alert-content {
+  margin-top: 0.25rem;
+}
+/* 9. Separadores. La variante vertical se estira en un contenedor flex. */
+.dgm-separator {
+  border: 0;
+  margin: 0;
+  background: var(--dgm-border);
+  flex-shrink: 0;
+}
+.dgm-separator--horizontal {
+  height: 1px;
+  width: 100%;
+}
+.dgm-separator--vertical {
+  width: 1px;
+  height: auto;
+  min-height: 1.25rem;
+  align-self: stretch;
+}
+/* 10. Preferencias de accesibilidad: evita movimiento y recupera la apariencia nativa en alto contraste. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dgm-hover-transition: none;
+  }
+  .dgm-button,
+  .dgm-input,
+  .dgm-checkbox,
+  .dgm-switch,
+  .dgm-switch::before {
+    transition: none;
+  }
+  .dgm-spinner,
+  .dgm-alert {
+    animation: none;
+  }
+}
+@media (forced-colors: active) {
+  /* Las sombras se suprimen en este modo: el contorno mantiene visible el control. */
+  .dgm-input {
+    box-shadow: none;
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+  .dgm-input:disabled {
+    outline-color: GrayText;
+  }
+  .dgm-input:focus-visible {
+    box-shadow: none;
+    outline: 3px solid Highlight;
+    outline-offset: 3px;
+  }
+  .dgm-select-control--dropdown .dgm-select {
+    appearance: auto;
+    -webkit-appearance: auto;
+  }
+  .dgm-select-control--dropdown::after {
+    display: none;
+  }
+  .dgm-switch {
+    appearance: auto;
+    -webkit-appearance: auto;
+  }
+  .dgm-switch::before {
+    display: none;
+  }
+}
+
+/* 11. Selector enriquecido: posicionamiento y teclado proceden de Radix; la vista es propia. */
+.dgm-custom-trigger,
+.dgm-custom-menu {
+  /* Evita seleccionar texto con doble clic o arrastre, también en el menú del portal. */
+  -webkit-user-select: none;
+  user-select: none;
+}
+.dgm-custom-trigger,
+.dgm-combobox-trigger,
+.dgm-date-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  cursor: pointer;
+  text-align: start;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.dgm-custom-trigger > span:first-child,
+.dgm-combobox-trigger > span:first-child,
+.dgm-date-trigger > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-custom-trigger[data-placeholder] {
+  color: var(--dgm-muted);
+}
+.dgm-custom-value {
+  /* Radix copia este contenido dentro de Value. Un inline-flex anidado añade
+   * espacio de línea base que no existe en el valor directo de Combobox. */
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-option-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.dgm-option-icon svg {
+  width: 1.1em;
+  height: 1.1em;
+}
+.dgm-custom-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  transform-origin: center;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dgm-chevron-svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.dgm-custom-trigger[data-state='open'] .dgm-custom-chevron {
+  transform: rotate(180deg);
+}
+.dgm-custom-menu {
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  box-sizing: border-box;
+  min-width: var(--radix-select-trigger-width);
+  max-width: calc(100vw - 24px);
+  /* Seis opciones y su padding superaban por pocos píxeles el antiguo límite de
+   * 20rem. Este es solo un máximo: las listas cortas conservan su altura natural
+   * y Radix limita el panel al espacio real disponible, también en móvil. */
+  max-height: min(24rem, var(--radix-select-content-available-height));
+  /* El viewport añade 0.125rem: ambos niveles suman el margen común en cada lado.
+   * La región solo ajusta el lado donde se haya medido una scrollbar real. */
+  padding: max(0px, calc(var(--dgm-list-padding) - 0.125rem));
+  overflow: hidden;
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  box-shadow: 0 12px 32px #0003;
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-scroll-region {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+.dgm-custom-scroll-region {
+  /* Acerca ligeramente la barra al borde sin desequilibrar las listas cortas.
+   * Las medidas del viewport distinguen barras nativas, superpuestas y RTL. */
+  margin-left: calc(-1 * min(0.125rem, var(--dgm-scrollbar-left, 0px)));
+  margin-right: calc(-1 * min(0.125rem, var(--dgm-scrollbar-right, 0px)));
+}
+.dgm-scroll-region > :not(style):not(script) {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.dgm-scroll-region {
+  --dgm-scroll-fade-top: 0px;
+  --dgm-scroll-fade-bottom: 0px;
+}
+.dgm-scroll-region[data-more-above] {
+  --dgm-scroll-fade-top: 1.25rem;
+}
+.dgm-scroll-region[data-more-below] {
+  --dgm-scroll-fade-bottom: 1.25rem;
+}
+.dgm-scroll-region:is([data-more-above], [data-more-below]) > :not(style):not(script) {
+  /* La máscara modifica el alfa del contenido: no pinta un color sobre el fondo.
+     Dos franjas opacas conservan la scrollbar nativa fuera del desvanecimiento. */
+  --dgm-scroll-mask:
+    linear-gradient(
+      to bottom,
+      transparent,
+      #000 var(--dgm-scroll-fade-top),
+      #000 calc(100% - var(--dgm-scroll-fade-bottom)),
+      transparent
+    ),
+    linear-gradient(#000, #000), linear-gradient(#000, #000);
+  -webkit-mask-image: var(--dgm-scroll-mask);
+  mask-image: var(--dgm-scroll-mask);
+  mask-mode: alpha;
+  -webkit-mask-size:
+    100% 100%,
+    var(--dgm-scrollbar-left, 0px) 100%,
+    var(--dgm-scrollbar-right, 0px) 100%;
+  mask-size:
+    100% 100%,
+    var(--dgm-scrollbar-left, 0px) 100%,
+    var(--dgm-scrollbar-right, 0px) 100%;
+  -webkit-mask-position: center, left, right;
+  mask-position: center, left, right;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-composite: source-over;
+  mask-composite: add;
+}
+@media (forced-colors: active) {
+  .dgm-scroll-region:is([data-more-above], [data-more-below]) > :not(style):not(script) {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+}
+.dgm-custom-viewport[data-radix-select-viewport] {
+  padding: 0.125rem;
+  /* El estilo compartido recupera la barra nativa que Radix oculta por defecto. */
+  min-height: 0;
+}
+.dgm-custom-option {
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem var(--dgm-option-padding-inline);
+  min-height: 2.75rem;
+  box-sizing: border-box;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+.dgm-custom-option[data-highlighted]:not([data-disabled]) {
+  box-shadow: inset 0 0 0 2px var(--dgm-primary);
+}
+.dgm-custom-option[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dgm-custom-check {
+  /* Centrado geométrico del SVG, sin el espacio de línea base de un icono inline. */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-inline-start: auto;
+  color: var(--dgm-primary);
+}
+.dgm-custom-check > svg {
+  display: block;
+}
+
+/* 12. Modal: overlay y contenido comparten la capa, con cuerpo desplazable independiente. */
+.dgm-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step));
+  background: #0008;
+}
+.dgm-modal {
+  position: fixed;
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  /* El centrado es constante: la animación solo modifica la escala alrededor del centro. */
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dgm-border);
+  border-radius: calc(var(--dgm-radius) + 0.25rem);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  box-shadow: 0 24px 80px #0005;
+  font-family: var(--dgm-font, inherit);
+  box-sizing: border-box;
+}
+.dgm-modal-header {
+  position: relative;
+  padding: 1.5rem 4rem 1rem 1.5rem;
+}
+.dgm-modal-title {
+  font-size: var(--dgm-text-title);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-tight);
+  letter-spacing: var(--dgm-tracking-heading);
+  margin: 0 0 0.5rem;
+}
+.dgm-modal-header .dgm-description {
+  margin: 0;
+}
+.dgm-modal-body {
+  padding: 0.5rem 1.5rem 1.5rem;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.dgm-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--dgm-border);
+}
+.dgm-modal-overlay[data-state='open'] {
+  animation: dgm-fade-in var(--dgm-panel-duration-in) var(--dgm-panel-easing-in);
+}
+.dgm-modal-overlay[data-state='closed'] {
+  animation: dgm-fade-out var(--dgm-panel-duration-out) var(--dgm-panel-easing-out) forwards;
+}
+/* Botón compacto de cierre compartido por modal y notificaciones; conserva un área de 40px. */
+.dgm-icon-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  /* Centra el símbolo; no es el interlineado de un contenido textual. */
+  line-height: 1;
+  cursor: pointer;
+}
+/* Caja simétrica centrada por grid, independiente de la línea base y métricas de la fuente. */
+.dgm-icon-close > svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.dgm-icon-close:focus-visible {
+  outline: 3px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+
+@keyframes dgm-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dgm-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-custom-menu[data-state],
+  .dgm-modal[data-state],
+  .dgm-modal-overlay[data-state] {
+    animation: none;
+  }
+  .dgm-custom-chevron {
+    transition: none;
+  }
+}
+
+/* 13. Tooltip: ayuda flotante que hereda la paleta de la aplicación. */
+.dgm-tooltip {
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  max-width: min(20rem, calc(100vw - 1.5rem));
+  box-sizing: border-box;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: 0.5rem;
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  box-shadow: 0 6px 20px #0002;
+  font-family: var(--dgm-font, inherit);
+  font-size: var(--dgm-text-help);
+  line-height: var(--dgm-leading-normal);
+  overflow-wrap: anywhere;
+}
+
+/* 14. Tabs: la orientación visual conserva el contrato de flechas incluso en móvil. */
+.dgm-tabs {
+  min-width: 0;
+  width: 100%;
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-tabs-list {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.35rem;
+  box-sizing: border-box;
+  overflow-x: auto;
+  background: var(--dgm-subtle);
+  border-radius: var(--dgm-radius);
+}
+.dgm-tabs-trigger {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.6rem 1rem;
+  border: 0;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--dgm-muted);
+  font: inherit;
+  font-size: var(--dgm-text-action);
+  line-height: var(--dgm-leading-normal);
+  font-weight: var(--dgm-font-weight-semibold);
+  cursor: pointer;
+  transition: var(--dgm-hover-transition);
+}
+.dgm-tabs-trigger:not([data-state='active']):hover:not(:disabled) {
+  color: var(--dgm-on-hover);
+  background: var(--dgm-hover);
+}
+.dgm-tabs-trigger[data-state='active'] {
+  color: var(--dgm-primary);
+  background: var(--dgm-surface);
+  box-shadow: inset 0 -2px 0 var(--dgm-primary);
+}
+.dgm-tabs-trigger[data-state='active']:hover:not(:disabled) {
+  color: var(--dgm-primary-hover);
+}
+.dgm-tabs-trigger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dgm-tabs-trigger:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-tabs-panel {
+  padding: 1.25rem 0.25rem 0.25rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-tabs-panel:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+  border-radius: 0.4rem;
+}
+.dgm-tabs[data-orientation='vertical'] {
+  display: grid;
+  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
+  gap: 1rem;
+}
+.dgm-tabs-list[data-orientation='vertical'] {
+  flex-direction: column;
+  align-self: start;
+}
+.dgm-tabs-trigger[data-orientation='vertical'] {
+  justify-content: flex-start;
+  text-align: start;
+  overflow-wrap: anywhere;
+}
+.dgm-tabs-panel[data-orientation='vertical'] {
+  padding: 0.5rem 0.25rem;
+}
+@media (max-width: 480px) {
+  .dgm-tabs[data-orientation='vertical'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* 15. Accordion: las alturas medidas animan contenido variable sin límites artificiales. */
+.dgm-accordion {
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.dgm-accordion-item + .dgm-accordion-item {
+  border-top: 1px solid var(--dgm-border);
+}
+.dgm-accordion-heading {
+  margin: 0;
+  font: inherit;
+}
+.dgm-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--dgm-text-action);
+  line-height: var(--dgm-leading-normal);
+  font-weight: var(--dgm-font-weight-semibold);
+  text-align: start;
+  cursor: pointer;
+  transition: var(--dgm-hover-transition);
+  box-sizing: border-box;
+}
+.dgm-accordion-trigger > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-accordion-trigger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dgm-accordion-trigger:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -3px;
+  border-radius: 0.5rem;
+}
+.dgm-accordion-chevron {
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+}
+.dgm-accordion-trigger[data-state='open'] .dgm-accordion-chevron {
+  transform: rotate(180deg);
+}
+.dgm-accordion-content {
+  overflow: hidden;
+}
+.dgm-accordion-content[data-state='open'] {
+  animation: dgm-accordion-open 0.3s ease;
+}
+.dgm-accordion-content[data-state='closed'] {
+  animation: dgm-accordion-close 0.3s ease;
+}
+.dgm-accordion-body {
+  padding: 0.25rem 1rem 1rem;
+  line-height: var(--dgm-leading-relaxed);
+  overflow-wrap: anywhere;
+}
+@keyframes dgm-accordion-open {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes dgm-accordion-close {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* 16. Transition conserva la caja durante la salida; no anima contenido estático al cargar. */
+/* La fila flexible pasa de cero a la altura del contenido y permite invertir el recorrido.
+   min-height: 0 impide que el tamaño mínimo del hijo mantenga abierto el contenedor. */
+.dgm-transition-collapse {
+  display: grid;
+  min-width: 0;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--dgm-transition-duration, 240ms) ease;
+}
+.dgm-transition-collapse[data-expanded] {
+  grid-template-rows: 1fr;
+}
+.dgm-transition-clip {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.dgm-transition-collapse[data-state='closed'] {
+  pointer-events: none;
+}
+.dgm-transition {
+  min-width: 0;
+  animation-duration: var(--dgm-transition-duration, 240ms);
+  animation-timing-function: ease;
+  animation-fill-mode: both;
+  transform-origin: center;
+}
+.dgm-transition[data-state='closed'] {
+  pointer-events: none;
+}
+/* Reservar/recoger espacio conserva la altura natural, pero no reproduce todavía el efecto. */
+.dgm-transition[data-state='hidden'] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.dgm-transition[data-state='open'][data-enter][data-variant='fade'] {
+  animation-name: dgm-transition-fade-in;
+}
+.dgm-transition[data-state='closed'][data-variant='fade'] {
+  animation-name: dgm-transition-fade-out;
+}
+.dgm-transition[data-state='open'][data-enter][data-variant='scale'] {
+  animation-name: dgm-transition-scale-in;
+}
+.dgm-transition[data-state='closed'][data-variant='scale'] {
+  animation-name: dgm-transition-scale-out;
+}
+.dgm-transition[data-state='open'][data-enter][data-variant='slide'] {
+  animation-name: dgm-transition-slide-in;
+}
+.dgm-transition[data-state='closed'][data-variant='slide'] {
+  animation-name: dgm-transition-slide-out;
+}
+@keyframes dgm-transition-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dgm-transition-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes dgm-transition-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes dgm-transition-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+@keyframes dgm-transition-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes dgm-transition-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-transition-collapse {
+    transition: none;
+  }
+  .dgm-transition,
+  .dgm-tooltip[data-state],
+  .dgm-accordion-content[data-state] {
+    animation: none;
+  }
+  .dgm-tabs-trigger,
+  .dgm-accordion-trigger,
+  .dgm-accordion-chevron {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .dgm-tabs-trigger[data-state='active'] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+/* 17. Menú de acciones. El portal limita ancho y altura al espacio disponible. */
+.dgm-dropdown {
+  box-sizing: border-box;
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  min-width: min(12rem, calc(100vw - 1.5rem));
+  max-width: min(24rem, calc(100vw - 1.5rem));
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  overflow-y: auto;
+  padding: var(--dgm-list-padding);
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+  box-shadow: 0 12px 32px #0002;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.dgm-context-menu {
+  max-width: min(24rem, calc(100vw - 1.5rem), var(--radix-context-menu-content-available-width));
+  max-height: var(--radix-context-menu-content-available-height);
+}
+.dgm-context-trigger:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 3px;
+}
+.dgm-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-height: 2.75rem;
+  padding: 0.5rem var(--dgm-option-padding-inline);
+  box-sizing: border-box;
+  border-radius: 0.375rem;
+  outline: none;
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  cursor: pointer;
+  transition: var(--dgm-hover-transition);
+}
+.dgm-dropdown-item[data-highlighted]:not([data-disabled]) {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-dropdown-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dgm-dropdown-item--danger {
+  --dgm-interaction-text: var(--dgm-danger);
+  color: var(--dgm-danger);
+}
+.dgm-dropdown-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-dropdown-shortcut {
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-caption);
+}
+.dgm-dropdown-label {
+  padding: 0.625rem var(--dgm-option-padding-inline);
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-label);
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-dropdown-separator {
+  height: 1px;
+  background: var(--dgm-border);
+  margin: 0.375rem calc(-1 * var(--dgm-list-padding));
+}
+
+/* 18. Radios. Un punto siempre montado transiciona al seleccionar, sin animar SSR. */
+.dgm-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.dgm-radio-group[data-orientation='horizontal'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+}
+.dgm-radio-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 0;
+  box-sizing: border-box;
+  color: var(--dgm-text);
+  cursor: pointer;
+}
+.dgm-radio-option[data-disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.dgm-radio-copy {
+  display: grid;
+  gap: 0.25rem;
+  line-height: var(--dgm-leading-normal);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-radio-control {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0.125rem 0 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--dgm-surface);
+  box-shadow: inset 0 0 0 1px var(--dgm-control-border);
+  color: var(--dgm-primary);
+  cursor: inherit;
+  transition: box-shadow 0.18s ease;
+}
+.dgm-radio-control[data-state='checked'] {
+  box-shadow: inset 0 0 0 2px var(--dgm-primary);
+}
+.dgm-radio-control:focus-visible {
+  outline: 3px solid var(--dgm-primary);
+  outline-offset: 3px;
+}
+.dgm-radio-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+.dgm-radio-control[data-state='checked'] .dgm-radio-dot {
+  opacity: 1;
+}
+.dgm-radio-group[aria-invalid='true'] .dgm-radio-control {
+  box-shadow: inset 0 0 0 1px var(--dgm-danger);
+}
+
+/* 19. Notificaciones. El margen interior contiene el movimiento: no genera scrollbar. */
+.dgm-toast-viewport {
+  position: fixed;
+  z-index: var(--dgm-layer-toast);
+  bottom: max(0.5rem, env(safe-area-inset-bottom));
+  right: max(0.5rem, env(safe-area-inset-right));
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  width: min(26rem, calc(100vw - 1rem));
+  max-height: calc(100dvh - 1rem);
+  margin: 0;
+  padding: 0.5rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  pointer-events: none;
+}
+.dgm-toast-viewport:empty {
+  padding: 0;
+}
+.dgm-toast-viewport:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+  border-radius: var(--dgm-radius);
+}
+.dgm-toast {
+  position: relative;
+  flex-shrink: 0;
+  min-width: 0;
+  outline: none;
+  color: var(--dgm-tone-fg);
+  border-radius: var(--dgm-radius);
+  pointer-events: auto;
+  touch-action: pan-y;
+}
+.dgm-toast > .dgm-alert {
+  padding-inline-end: 3.25rem;
+}
+.dgm-toast[data-state='closed'] {
+  pointer-events: none;
+}
+.dgm-toast[data-swipe='move'] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.dgm-toast[data-swipe='cancel'] {
+  transform: translateX(0);
+  transition: transform 0.2s ease;
+}
+.dgm-toast-action {
+  margin-top: 0.75rem;
+}
+.dgm-toast:focus-visible {
+  outline: 3px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+
+/* 20. Skeleton: reserva dimensiones reales y se mantiene fuera del árbol accesible. */
+/* Loaders: la caja conserva sus dimensiones durante toda la animación.
+   Los efectos solo alteran transform/opacity y nunca desplazan el contenido. */
+.dgm-loader {
+  --dgm-loader-size: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  max-width: 100%;
+  vertical-align: middle;
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-loader--sm {
+  --dgm-loader-size: 1rem;
+}
+.dgm-loader--lg {
+  --dgm-loader-size: 2.5rem;
+}
+.dgm-loader--xl {
+  --dgm-loader-size: 3.5rem;
+}
+.dgm-loader-figure {
+  display: inline-flex;
+  position: relative;
+  width: var(--dgm-loader-size);
+  height: var(--dgm-loader-size);
+  flex: 0 0 var(--dgm-loader-size);
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.dgm-loader-piece {
+  display: block;
+  background: currentColor;
+  animation-delay: calc(var(--dgm-loader-index) * -0.16s);
+}
+.dgm-loader--spinner .dgm-loader-figure {
+  border: max(2px, calc(var(--dgm-loader-size) * 0.085)) solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: dgm-loader-turn 0.9s linear infinite;
+}
+.dgm-loader--dots .dgm-loader-piece {
+  width: 23%;
+  height: 23%;
+  border-radius: 50%;
+  animation-name: dgm-loader-dots;
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+.dgm-loader--bars .dgm-loader-piece {
+  width: 22%;
+  height: 85%;
+  border-radius: 999px;
+  animation-name: dgm-loader-bars;
+  animation-duration: 1s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+.dgm-loader--pulse .dgm-loader-piece {
+  position: absolute;
+  inset: 0;
+  border: 2px solid currentColor;
+  background: none;
+  border-radius: 50%;
+  animation-name: dgm-loader-ripple;
+  animation-duration: 1.8s;
+  animation-delay: calc(var(--dgm-loader-index) * -0.6s);
+  animation-timing-function: ease-out;
+  animation-iteration-count: infinite;
+}
+.dgm-loader-label {
+  color: var(--dgm-text);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--dgm-text-help);
+}
+.dgm-loader-label-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@keyframes dgm-loader-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dgm-loader-dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-35%);
+  }
+}
+@keyframes dgm-loader-bars {
+  0%,
+  80%,
+  100% {
+    transform: scaleY(0.4);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes dgm-loader-ripple {
+  from {
+    transform: scale(0.2);
+    opacity: 0.85;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+/* Un loader inmóvil sigue siendo reconocible y conserva su anuncio textual. */
+.dgm-loader--static .dgm-loader-figure,
+.dgm-loader--static .dgm-loader-piece {
+  animation: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-loader .dgm-loader-figure,
+  .dgm-loader .dgm-loader-piece {
+    animation: none;
+  }
+}
+
+.dgm-skeleton {
+  display: block;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  max-width: 100%;
+  background: var(--dgm-border);
+  border-radius: 0.25rem;
+}
+.dgm-skeleton--rectangular {
+  border-radius: var(--dgm-radius);
+}
+.dgm-skeleton--circular {
+  border-radius: 50%;
+}
+.dgm-skeleton--animated {
+  animation: dgm-skeleton-pulse 1.6s ease infinite;
+}
+@keyframes dgm-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 0.85;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-dropdown[data-state],
+  .dgm-toast[data-state],
+  .dgm-skeleton--animated {
+    animation: none;
+  }
+  .dgm-dropdown-item,
+  .dgm-radio-control,
+  .dgm-radio-dot,
+  .dgm-toast[data-swipe] {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .dgm-radio-control {
+    border: 1px solid ButtonText;
+  }
+  .dgm-radio-dot {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+  .dgm-skeleton {
+    background: GrayText;
+    forced-color-adjust: none;
+  }
+}
+
+/* El botón de contraseña queda dentro del campo; el padding reserva su área completa. */
+.dgm-input-control {
+  position: relative;
+  min-width: 0;
+}
+.dgm-input.dgm-input--password {
+  padding-inline-end: 3.25rem;
+}
+.dgm-password-toggle {
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--dgm-muted);
+  cursor: pointer;
+}
+.dgm-password-toggle:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-password-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+/* Evita duplicar el botón de visibilidad que algunos navegadores añaden por su cuenta. */
+.dgm-input--password::-ms-reveal {
+  display: none;
+}
+
+/* Movimiento compartido de superficies. Las variables de Radix reflejan el lado
+   final tras las colisiones; el zoom no impone una traslación vertical fija. */
+.dgm-custom-menu {
+  --dgm-panel-origin: var(--radix-select-content-transform-origin, center top);
+}
+.dgm-dropdown {
+  --dgm-panel-origin: var(--radix-dropdown-menu-content-transform-origin, center top);
+}
+.dgm-context-menu {
+  --dgm-panel-origin: var(--radix-context-menu-content-transform-origin, left top);
+}
+.dgm-popover,
+.dgm-combobox-panel,
+.dgm-calendar-panel {
+  --dgm-panel-origin: var(--radix-popover-content-transform-origin, center top);
+}
+.dgm-tooltip {
+  --dgm-panel-origin: var(--radix-tooltip-content-transform-origin, center bottom);
+}
+.dgm-navigation-content {
+  --dgm-panel-origin: var(--dgm-navigation-origin-x, 50%) top;
+}
+.dgm-modal,
+.dgm-alert--animated {
+  --dgm-panel-origin: center;
+}
+.dgm-toast {
+  --dgm-panel-origin: right bottom;
+}
+:is(
+  .dgm-custom-menu,
+  .dgm-dropdown,
+  .dgm-popover,
+  .dgm-combobox-panel,
+  .dgm-calendar-panel,
+  .dgm-tooltip,
+  .dgm-navigation-content,
+  .dgm-modal,
+  .dgm-toast,
+  .dgm-alert--animated
+) {
+  transform-origin: var(--dgm-panel-origin);
+}
+:is(
+  .dgm-custom-menu,
+  .dgm-dropdown,
+  .dgm-popover,
+  .dgm-combobox-panel,
+  .dgm-calendar-panel,
+  .dgm-tooltip,
+  .dgm-navigation-content,
+  .dgm-modal,
+  .dgm-toast
+):is([data-state='open'], [data-state='instant-open'], [data-state='delayed-open']),
+.dgm-alert--animated {
+  animation: dgm-panel-in var(--dgm-panel-duration-in) var(--dgm-panel-easing-in);
+}
+:is(
+  .dgm-custom-menu,
+  .dgm-dropdown,
+  .dgm-popover,
+  .dgm-combobox-panel,
+  .dgm-calendar-panel,
+  .dgm-tooltip,
+  .dgm-navigation-content,
+  .dgm-modal,
+  .dgm-toast
+)[data-state='closed'] {
+  animation: dgm-panel-out var(--dgm-panel-duration-out) var(--dgm-panel-easing-out) forwards;
+}
+@keyframes dgm-panel-in {
+  from {
+    opacity: 0;
+    transform: scale(var(--dgm-panel-scale));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes dgm-panel-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--dgm-panel-scale));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(
+    .dgm-custom-menu,
+    .dgm-dropdown,
+    .dgm-popover,
+    .dgm-combobox-panel,
+    .dgm-calendar-panel,
+    .dgm-tooltip,
+    .dgm-navigation-content,
+    .dgm-modal,
+    .dgm-toast
+  )[data-state],
+  .dgm-alert--animated {
+    animation: none;
+  }
+}
+
+/* Componentes compuestos: esta hoja se distribuye unida a styles.css, sin imports adicionales. */
+.dgm-visually-hidden,
+.dgm-form-value {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.dgm-popover,
+.dgm-combobox-panel,
+.dgm-calendar-panel {
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  box-sizing: border-box;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  color: var(--dgm-text);
+  background: var(--dgm-surface);
+  box-shadow: 0 12px 32px #0002;
+  font-family: var(--dgm-font, inherit);
+  max-width: calc(100vw - 1.5rem);
+  max-height: var(--radix-popover-content-available-height);
+  overflow: auto;
+}
+.dgm-popover {
+  position: relative;
+  width: 22rem;
+  padding: 1.25rem;
+}
+.dgm-popover-heading {
+  font-size: var(--dgm-text-title);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-tight);
+  letter-spacing: var(--dgm-tracking-heading);
+  padding-inline-end: 2.5rem;
+  margin-bottom: 1rem;
+  overflow-wrap: anywhere;
+}
+.dgm-popover-body {
+  min-width: 0;
+}
+.dgm-drawer {
+  --dgm-drawer-x: 0;
+  --dgm-drawer-y: 0;
+  position: fixed;
+  /* Un nivel sobre el overlay de su profundidad, igual que Modal. */
+  z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-height: 100dvh;
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+  border: 1px solid var(--dgm-border);
+  box-shadow: 0 0 40px #0003;
+}
+.dgm-drawer--right {
+  --dgm-drawer-x: 100%;
+  inset: 0 0 0 auto;
+  width: min(28rem, calc(100vw - 1rem));
+}
+.dgm-drawer--left {
+  --dgm-drawer-x: -100%;
+  inset: 0 auto 0 0;
+  width: min(28rem, calc(100vw - 1rem));
+}
+.dgm-drawer--bottom {
+  --dgm-drawer-y: 100%;
+  inset: auto 0 0;
+  max-height: 85dvh;
+  border-radius: 1rem 1rem 0 0;
+}
+.dgm-drawer--top {
+  --dgm-drawer-y: -100%;
+  inset: 0 0 auto;
+  max-height: 85dvh;
+  border-radius: 0 0 1rem 1rem;
+}
+.dgm-drawer .dgm-modal-header {
+  position: relative;
+  flex-shrink: 0;
+}
+.dgm-drawer .dgm-modal-body {
+  flex: 1;
+  min-height: 0;
+}
+.dgm-drawer .dgm-modal-footer {
+  flex-shrink: 0;
+}
+.dgm-drawer[data-state='open'] {
+  animation: dgm-drawer-in var(--dgm-panel-duration-in) var(--dgm-panel-easing-in);
+}
+.dgm-drawer[data-state='closed'] {
+  animation: dgm-drawer-out var(--dgm-panel-duration-out) var(--dgm-panel-easing-out) forwards;
+}
+@keyframes dgm-drawer-in {
+  from {
+    transform: translate(var(--dgm-drawer-x), var(--dgm-drawer-y));
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes dgm-drawer-out {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(var(--dgm-drawer-x), var(--dgm-drawer-y));
+  }
+}
+.dgm-combobox-panel {
+  width: max(var(--radix-popover-trigger-width), 16rem);
+}
+.dgm-command {
+  font-family: var(--dgm-font, inherit);
+  color: var(--dgm-text);
+  min-width: 0;
+}
+.dgm-command-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0;
+  border-bottom: 1px solid var(--dgm-border);
+  padding: 0.875rem;
+  border-radius: 0;
+  font: inherit;
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  color: inherit;
+  background: transparent;
+  outline: none;
+}
+.dgm-command-input:focus-visible {
+  box-shadow: inset 0 -2px var(--dgm-primary);
+}
+.dgm-command-list {
+  overflow-y: auto;
+  max-height: min(20rem, 50dvh);
+  padding: var(--dgm-list-padding);
+}
+.dgm-command-item {
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem var(--dgm-option-padding-inline);
+  min-height: 2.75rem;
+  box-sizing: border-box;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  user-select: none;
+  overflow-wrap: anywhere;
+}
+/* Combobox conserva su selección inicial. En la paleta, hover y foco de teclado
+   son estados distintos: la apertura por sí sola no resalta ninguna acción. */
+.dgm-command:not(.dgm-command--palette)
+  .dgm-command-item[data-selected='true']:not([data-disabled='true']),
+.dgm-command--palette[data-input-mode='keyboard']
+  .dgm-command-item[data-selected='true']:not([data-disabled='true']) {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-command-item[data-disabled='true'] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dgm-command-check {
+  margin-inline-start: auto;
+}
+.dgm-command-empty {
+  padding: 1rem;
+  color: var(--dgm-muted);
+}
+.dgm-command [cmdk-group-heading] {
+  padding: 0.75rem var(--dgm-option-padding-inline);
+  font-weight: var(--dgm-font-weight-semibold);
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-label);
+}
+.dgm-text-action {
+  border: 0;
+  padding: 0.375rem 0;
+  min-height: 2.25rem;
+  background: transparent;
+  color: var(--dgm-primary);
+  font: inherit;
+  font-size: var(--dgm-text-action);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  cursor: pointer;
+  align-self: flex-start;
+}
+.dgm-text-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dgm-text-action:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+.dgm-pagination,
+.dgm-pagination-part {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+.dgm-pagination {
+  --dgm-page-size: 2.25rem;
+  font-family: var(--dgm-font, inherit);
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  /* Conserva una fila en espacios pequeños, sin desbordar la página.
+     El margen interior deja espacio para el contorno de foco del teclado. */
+  overflow-x: auto;
+  padding: 0.25rem;
+}
+.dgm-pagination--md {
+  --dgm-page-size: 2.75rem;
+}
+.dgm-pagination--lg {
+  --dgm-page-size: 3.125rem;
+}
+.dgm-pagination > * {
+  flex-shrink: 0;
+}
+.dgm-pagination .dgm-button {
+  min-width: var(--dgm-page-size);
+  padding-inline: 0.5rem;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+.dgm-pagination--full {
+  width: 100%;
+  justify-content: center;
+  /* Celdas estables, incluso al pasar de 9 a 10 o de 99 a 100. La medición
+     utiliza este ancho real para reservar también el espacio de las elipsis. */
+  --dgm-page-cell: max(var(--dgm-page-size), calc(var(--dgm-page-digits) * 1ch + 1rem));
+}
+.dgm-pagination--full .dgm-pagination-part .dgm-button,
+.dgm-pagination--full .dgm-pagination-gap {
+  width: var(--dgm-page-cell);
+  box-sizing: border-box;
+  text-align: center;
+}
+.dgm-pagination-gap {
+  padding: 0.5rem 0.25rem;
+  color: var(--dgm-muted);
+}
+.dgm-breadcrumbs {
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-breadcrumbs ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.dgm-breadcrumbs li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.dgm-breadcrumbs a {
+  color: var(--dgm-muted);
+  text-decoration: none;
+}
+.dgm-breadcrumbs a:hover {
+  color: var(--dgm-primary);
+  text-decoration: underline;
+}
+.dgm-breadcrumbs a:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 3px;
+}
+.dgm-breadcrumbs [aria-current] {
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-breadcrumb-separator {
+  color: var(--dgm-muted);
+}
+.dgm-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  background: var(--dgm-subtle);
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+  font-weight: var(--dgm-font-weight-semibold);
+  border: 1px solid var(--dgm-border);
+  box-sizing: border-box;
+}
+.dgm-avatar--sm {
+  --dgm-avatar-status-size: 0.625rem;
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--dgm-font-size-xs);
+}
+.dgm-avatar--md {
+  --dgm-avatar-status-size: 0.75rem;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: var(--dgm-font-size-base);
+}
+.dgm-avatar--lg {
+  --dgm-avatar-status-size: 1rem;
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--dgm-font-size-2xl);
+}
+.dgm-avatar--circle {
+  border-radius: 50%;
+}
+.dgm-avatar--square {
+  border-radius: var(--dgm-radius);
+}
+.dgm-avatar-content {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.dgm-avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dgm-avatar-fallback {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+}
+/* La presencia conserva su significado aunque cambie el color principal del tema.
+ * El anillo separa el punto de la foto y usa la superficie del contenedor. */
+.dgm-avatar-status {
+  position: absolute;
+  inset-inline-end: 0;
+  bottom: 0;
+  width: var(--dgm-avatar-status-size);
+  height: var(--dgm-avatar-status-size);
+  box-sizing: border-box;
+  border: 2px solid var(--dgm-surface);
+  border-radius: 50%;
+}
+.dgm-avatar-status[data-status='online'] {
+  background: var(--dgm-avatar-online, #15803d);
+}
+.dgm-avatar-status[data-status='busy'] {
+  background: var(--dgm-avatar-busy, #dc2626);
+}
+.dgm-avatar-status[data-status='away'] {
+  background: var(--dgm-avatar-away, #d97706);
+}
+.dgm-avatar-status[data-status='offline'] {
+  background: var(--dgm-avatar-offline, #64748b);
+}
+.dgm-progress {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-progress-label {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: var(--dgm-text-label);
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-progress progress {
+  appearance: none;
+  display: block;
+  border: 0;
+  width: 100%;
+  height: 0.625rem;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--dgm-subtle);
+  color: var(--dgm-primary);
+}
+.dgm-progress--sm progress {
+  height: 0.25rem;
+}
+.dgm-progress--lg progress {
+  height: 1rem;
+}
+.dgm-progress progress::-webkit-progress-bar {
+  background: var(--dgm-subtle);
+  border-radius: 999px;
+}
+.dgm-progress progress::-webkit-progress-value {
+  background: var(--dgm-primary);
+  border-radius: 999px;
+  transition: width 0.2s ease;
+}
+.dgm-progress progress::-moz-progress-bar {
+  background: var(--dgm-primary);
+  border-radius: 999px;
+}
+.dgm-progress progress:indeterminate {
+  animation: dgm-skeleton-pulse 1.4s ease infinite;
+  background: var(--dgm-primary);
+}
+.dgm-progress progress:indeterminate::-webkit-progress-bar {
+  background: linear-gradient(90deg, var(--dgm-subtle), var(--dgm-primary), var(--dgm-subtle));
+}
+.dgm-choice-group {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-choice-group legend {
+  padding: 0;
+  margin-bottom: 0.75rem;
+}
+.dgm-choice-group-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.dgm-choice-group-options[data-orientation='horizontal'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+}
+.dgm-choice-group > p {
+  margin: 0 0 0.75rem;
+}
+.dgm-choice-group > .dgm-error {
+  margin: 0.75rem 0 0;
+}
+/* SwitchGroup se presenta como un panel de ajustes. El fieldset y su legend
+   conservan la semántica del grupo; el borde pertenece únicamente a las opciones.
+   No usamos overflow:hidden para que el foco de los controles no quede recortado. */
+.dgm-choice-group--switch .dgm-choice-group-options {
+  gap: 0;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+}
+.dgm-choice-group--switch .dgm-choice {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 1rem;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 1rem;
+}
+.dgm-choice-group--switch .dgm-choice-text {
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.dgm-choice-group--switch .dgm-switch {
+  margin: 0;
+}
+.dgm-choice-group--switch .dgm-choice:has(.dgm-switch:disabled) .dgm-choice-text {
+  opacity: 0.6;
+}
+.dgm-choice-group--switch
+  .dgm-choice-group-options[data-orientation='vertical']
+  > .dgm-choice
+  + .dgm-choice {
+  border-block-start: 1px solid var(--dgm-border);
+}
+/* La orientación horizontal conserva el wrap: cada opción tiene su propia tarjeta,
+   de modo que al pasar a varias filas no quedan separadores en posiciones arbitrarias. */
+.dgm-choice-group--switch .dgm-choice-group-options[data-orientation='horizontal'] {
+  gap: 1rem;
+  border: 0;
+  background: transparent;
+}
+.dgm-choice-group--switch .dgm-choice-group-options[data-orientation='horizontal'] > .dgm-choice {
+  flex: 1 1 14rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+}
+.dgm-calendar-panel {
+  width: 21rem;
+  padding: 0.75rem;
+}
+.dgm-calendar {
+  position: relative;
+  width: 100%;
+}
+.dgm-calendar .rdp-months,
+.dgm-calendar .rdp-month {
+  width: 100%;
+}
+.dgm-calendar .rdp-nav {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  display: flex;
+}
+.dgm-calendar .rdp-month_caption {
+  min-height: 2.75rem;
+  padding-inline-end: 5.5rem;
+  display: flex;
+  align-items: center;
+  font-weight: var(--dgm-font-weight-semibold);
+  font-size: var(--dgm-text-label);
+}
+.dgm-calendar .rdp-button_previous,
+.dgm-calendar .rdp-button_next {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 0;
+  border-radius: 0.375rem;
+  color: var(--dgm-text);
+  background: transparent;
+  cursor: pointer;
+}
+.dgm-calendar .rdp-chevron {
+  fill: currentColor;
+  width: 1rem;
+  height: 1rem;
+}
+.dgm-calendar .rdp-month_grid {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.dgm-calendar .rdp-weekday {
+  /* Alineación explícita: no depende de los estilos de tablas de la aplicación consumidora. */
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.75rem 0;
+  font-size: var(--dgm-text-caption);
+  font-weight: var(--dgm-font-weight-medium);
+  color: var(--dgm-muted);
+}
+.dgm-calendar .rdp-day {
+  padding: 0.125rem;
+  text-align: center;
+}
+.dgm-calendar .rdp-day_button {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  font: inherit;
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.dgm-calendar button:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-calendar .rdp-selected .rdp-day_button {
+  background: var(--dgm-primary);
+  color: var(--dgm-on-primary);
+}
+.dgm-calendar .rdp-range_middle {
+  background: var(--dgm-subtle);
+}
+.dgm-calendar .rdp-range_middle .rdp-day_button {
+  background: transparent;
+  color: var(--dgm-text);
+}
+.dgm-calendar .rdp-today:not(.rdp-selected) .rdp-day_button {
+  box-shadow: inset 0 0 0 1px var(--dgm-primary);
+}
+.dgm-calendar .rdp-disabled,
+.dgm-calendar button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.dgm-calendar .rdp-outside {
+  color: var(--dgm-muted);
+}
+.dgm-calendar .rdp-hidden {
+  visibility: hidden;
+}
+.dgm-data-table {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+  width: 100%;
+  font-family: var(--dgm-font, inherit);
+  color: var(--dgm-text);
+}
+.dgm-table-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+}
+.dgm-table-scroll:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+.dgm-data-table table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  text-align: start;
+}
+.dgm-data-table caption {
+  text-align: start;
+  padding: 1rem;
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-data-table th,
+.dgm-data-table td {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--dgm-border);
+  overflow-wrap: anywhere;
+}
+.dgm-data-table th {
+  font-weight: var(--dgm-font-weight-semibold);
+  background: var(--dgm-subtle);
+}
+.dgm-data-table th .dgm-button {
+  padding-inline: 0;
+}
+.dgm-data-table tr[data-selected] {
+  background: var(--dgm-subtle);
+}
+.dgm-data-table .dgm-choice {
+  gap: 0;
+}
+.dgm-data-table .dgm-choice-text {
+  width: 0;
+}
+.dgm-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.dgm-table-footer p {
+  margin: 0;
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-help);
+}
+.dgm-table-empty {
+  text-align: center;
+  padding: 2rem !important;
+  color: var(--dgm-muted);
+}
+.dgm-file-upload {
+  display: grid;
+  gap: 0.75rem;
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+  min-width: 0;
+}
+.dgm-file-dropzone {
+  padding: 1.5rem;
+  text-align: center;
+  border: 1px dashed var(--dgm-control-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease;
+}
+.dgm-file-dropzone p {
+  margin: 0 0 1rem;
+}
+.dgm-file-dropzone[data-dragging] {
+  background: var(--dgm-subtle);
+  border-color: var(--dgm-primary);
+}
+.dgm-file-dropzone[data-disabled] {
+  opacity: 0.5;
+}
+.dgm-file-list {
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.dgm-file-list li {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+}
+.dgm-file-preview {
+  object-fit: cover;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.375rem;
+}
+.dgm-file-name {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+  font-size: var(--dgm-text-help);
+}
+.dgm-file-name small {
+  display: block;
+  font-size: var(--dgm-text-caption);
+  line-height: var(--dgm-leading-normal);
+  color: var(--dgm-muted);
+  margin-top: 0.25rem;
+}
+.dgm-file-upload > p {
+  margin: 0;
+}
+.dgm-stepper {
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-stepper ol {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.dgm-stepper li {
+  flex: 1;
+  min-width: 0;
+}
+.dgm-step {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  border: 0;
+  border-radius: var(--dgm-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+}
+button.dgm-step {
+  cursor: pointer;
+}
+button.dgm-step:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.dgm-step:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+.dgm-step-number {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: 50%;
+  color: var(--dgm-muted);
+}
+.dgm-step-copy {
+  display: grid;
+  gap: 0.375rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-top: 0.25rem;
+}
+.dgm-stepper [data-current] .dgm-step-number,
+.dgm-stepper [data-complete] .dgm-step-number {
+  background: var(--dgm-primary);
+  color: var(--dgm-on-primary);
+  border-color: var(--dgm-primary);
+}
+.dgm-step-copy > span:first-child {
+  /* El indicador comunica el paso actual; la tipografía conserva sus métricas. */
+  font-size: var(--dgm-text-label);
+  font-weight: var(--dgm-font-weight-semibold);
+}
+.dgm-stepper[data-orientation='vertical'] ol {
+  flex-direction: column;
+}
+@media (max-width: 600px) {
+  .dgm-stepper ol {
+    flex-direction: column;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-popover[data-state],
+  .dgm-combobox-panel[data-state],
+  .dgm-calendar-panel[data-state],
+  .dgm-drawer[data-state],
+  .dgm-progress progress:indeterminate {
+    animation: none;
+  }
+  .dgm-file-dropzone,
+  .dgm-progress progress::-webkit-progress-value {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .dgm-calendar .rdp-selected .rdp-day_button,
+  .dgm-stepper [data-current] .dgm-step-number {
+    outline: 2px solid Highlight;
+  }
+  .dgm-progress progress {
+    appearance: auto;
+  }
+}
+
+/* Nuevos controles y estructuras. Tokens compartidos: cada componente funciona con el tema del consumidor. */
+.dgm-slider-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.dgm-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  touch-action: none;
+  user-select: none;
+}
+.dgm-slider-track {
+  position: relative;
+  flex: 1;
+  height: 0.375rem;
+  background: var(--dgm-border);
+  border-radius: 1rem;
+}
+.dgm-slider-range {
+  position: absolute;
+  height: 100%;
+  background: var(--dgm-primary);
+  border-radius: inherit;
+}
+.dgm-slider-thumb {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  box-sizing: border-box;
+  background: var(--dgm-surface);
+  border: 2px solid var(--dgm-primary);
+  border-radius: 50%;
+  box-shadow: 0 2px 5px #0002;
+  cursor: grab;
+}
+.dgm-slider-thumb::after {
+  content: '';
+  position: absolute;
+  inset: -0.7rem;
+}
+.dgm-slider[data-disabled] {
+  opacity: 0.5;
+}
+.dgm-slider[data-disabled] .dgm-slider-thumb {
+  cursor: not-allowed;
+}
+.dgm-slider-marks {
+  position: relative;
+  height: 1.5rem;
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-caption);
+  margin-inline: 0.625rem;
+}
+.dgm-slider-marks > span {
+  position: absolute;
+  transform: translateX(-50%);
+}
+.dgm-slider-marks > span:first-child {
+  transform: none;
+}
+.dgm-slider-marks > span:last-child {
+  transform: translateX(-100%);
+}
+.dgm-number-field {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.dgm-number-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+.dgm-number-field input {
+  appearance: textfield;
+}
+.dgm-number-field input::-webkit-inner-spin-button {
+  appearance: none;
+}
+.dgm-empty-state {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  border: 1px dashed var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  color: var(--dgm-text);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+.dgm-empty-state h2,
+.dgm-empty-state h3,
+.dgm-empty-state h4,
+.dgm-empty-state p {
+  margin: 0;
+}
+.dgm-empty-state > :is(h2, h3, h4) {
+  /* El nivel HTML cambia la jerarquía accesible, no el rol visual del título. */
+  font-size: var(--dgm-text-title);
+  font-weight: var(--dgm-font-weight-semibold);
+  line-height: var(--dgm-leading-tight);
+  letter-spacing: var(--dgm-tracking-heading);
+}
+.dgm-empty-icon {
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  background: var(--dgm-subtle);
+  border-radius: var(--dgm-radius);
+  font-size: var(--dgm-font-size-2xl);
+}
+.dgm-empty-action {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.dgm-aspect-ratio {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+.dgm-aspect-content {
+  position: absolute;
+  inset: 0;
+}
+.dgm-aspect-content > img,
+.dgm-aspect-content > video,
+.dgm-aspect-content > iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 0;
+}
+.dgm-toggle-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+}
+.dgm-toggle-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+.dgm-toggle-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: calc(var(--dgm-radius) - 0.2rem);
+  background: transparent;
+  color: var(--dgm-muted);
+  font: inherit;
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  cursor: pointer;
+  transition: var(--dgm-hover-transition);
+}
+.dgm-toggle-item--sm {
+  font-size: var(--dgm-font-size-sm);
+  padding-inline: 0.75rem;
+}
+.dgm-toggle-item--lg {
+  min-height: 3rem;
+  padding-inline: 1.25rem;
+}
+.dgm-toggle-item--icon {
+  min-width: 2.75rem;
+  padding-inline: 0.5rem;
+}
+.dgm-toggle-item[data-state='on'] {
+  color: var(--dgm-on-primary);
+  background: var(--dgm-primary);
+}
+.dgm-toggle-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dgm-navigation {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+}
+.dgm-navigation-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+}
+.dgm-navigation-trigger,
+.dgm-navigation-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.85rem;
+  box-sizing: border-box;
+  color: var(--dgm-text);
+  background: var(--dgm-surface);
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  text-decoration: none;
+  font: inherit;
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  cursor: pointer;
+}
+.dgm-navigation-trigger svg {
+  width: 1rem;
+  height: 1rem;
+}
+.dgm-navigation-link[data-active],
+.dgm-navigation-trigger[data-state='open'] {
+  background: var(--dgm-subtle);
+}
+.dgm-navigation-content {
+  /* Misma separación inicial que Popover y los selectores que lo componen. */
+  --dgm-navigation-gap: 8px;
+  position: absolute;
+  top: calc(100% + var(--dgm-navigation-gap));
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  width: min(100%, 28rem);
+  padding: var(--dgm-list-padding);
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  box-shadow: 0 12px 32px #0002;
+  z-index: 10;
+}
+/* El puente transparente mantiene el área de hover al cruzar la separación.
+   Incluye el píxel del borde para que no quede una franja sin interacción. */
+.dgm-navigation-content::before {
+  content: '';
+  position: absolute;
+  inset-inline: -1px;
+  top: calc(-1 * (var(--dgm-navigation-gap) + 1px));
+  height: calc(var(--dgm-navigation-gap) + 1px);
+}
+.dgm-navigation-content ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+.dgm-navigation-content .dgm-navigation-link {
+  border-color: transparent;
+  padding-inline: var(--dgm-option-padding-inline);
+}
+.dgm-navigation-link small {
+  display: block;
+  color: var(--dgm-muted);
+  font-size: var(--dgm-text-help);
+  margin-top: 0.25rem;
+}
+.dgm-multi-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: var(--dgm-control-min-height);
+  justify-content: space-between;
+  text-align: start;
+  /* Seleccionar valores es un campo: mantiene la tipografía de los otros disparadores. */
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+  letter-spacing: var(--dgm-tracking-normal);
+  cursor: pointer;
+}
+.dgm-multi-trigger svg {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+.dgm-multi-panel {
+  width: 24rem;
+}
+.dgm-multi-scroll-region {
+  /* Separa las opciones del campo y deja respirar su anillo de foco. */
+  margin-block-start: 0.75rem;
+}
+.dgm-multi-options {
+  display: grid;
+  gap: 0.5rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: var(--dgm-list-padding);
+}
+.dgm-multi-options .dgm-label {
+  /* Son valores de una lista, no la etiqueta que nombra al campo completo. */
+  font-size: var(--dgm-text-control);
+  font-weight: var(--dgm-font-weight-regular);
+  line-height: var(--dgm-leading-normal);
+}
+.dgm-option-label {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.dgm-multi-tags {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+}
+.dgm-multi-tags li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-inline-start: 0.75rem;
+  background: var(--dgm-subtle);
+  color: var(--dgm-text);
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  overflow-wrap: anywhere;
+}
+.dgm-multi-tags button {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 0;
+  border-radius: var(--dgm-radius);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.dgm-multi-tags button svg {
+  width: 1rem;
+  height: 1rem;
+}
+.dgm-multi-tags button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dgm-resizable {
+  display: grid;
+  min-width: 0;
+  min-height: 12rem;
+  height: 22rem;
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-surface);
+  overflow: hidden;
+}
+.dgm-resizable-panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+  overflow-wrap: anywhere;
+}
+.dgm-resize-handle {
+  display: grid;
+  place-items: center;
+  touch-action: none;
+  user-select: none;
+  cursor: col-resize;
+  background: var(--dgm-subtle);
+}
+.dgm-resize-handle > span {
+  display: block;
+  height: 2rem;
+  width: 0.25rem;
+  border-radius: 1rem;
+  background: var(--dgm-control-border);
+}
+.dgm-resizable[data-orientation='vertical'] .dgm-resize-handle {
+  cursor: row-resize;
+}
+.dgm-resizable[data-orientation='vertical'] .dgm-resize-handle > span {
+  width: 2rem;
+  height: 0.25rem;
+}
+.dgm-resize-handle[aria-disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+.dgm-resize-handle:focus-visible {
+  outline-offset: -3px;
+}
+.dgm-tree,
+.dgm-tree ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.dgm-tree {
+  border: 1px solid var(--dgm-border);
+  border-radius: var(--dgm-radius);
+  padding: var(--dgm-list-padding);
+  color: var(--dgm-text);
+  background: var(--dgm-surface);
+}
+.dgm-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding-inline-end: 0.5rem;
+  border-radius: calc(var(--dgm-radius) - 0.25rem);
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.dgm-tree [aria-selected='true'] > .dgm-tree-row {
+  background: var(--dgm-primary);
+  color: var(--dgm-on-primary);
+}
+.dgm-tree [aria-disabled] > .dgm-tree-row {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dgm-tree-expander {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 2.25rem;
+  min-height: 2.75rem;
+}
+.dgm-tree-expander svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.dgm-tree [role='treeitem']:focus-visible {
+  outline: none;
+}
+.dgm-tree [role='treeitem']:focus-visible > .dgm-tree-row {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: -2px;
+}
+.dgm-carousel {
+  min-width: 0;
+  width: 100%;
+}
+.dgm-carousel-viewport {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--dgm-radius);
+}
+.dgm-carousel-viewport::-webkit-scrollbar {
+  display: none;
+}
+.dgm-carousel-slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  scroll-snap-align: start;
+  overflow-wrap: anywhere;
+}
+.dgm-carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+.dgm-carousel-indicators {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.dgm-carousel-indicators button {
+  display: grid;
+  place-items: center;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 0;
+  background: transparent;
+  border-radius: var(--dgm-radius);
+  cursor: pointer;
+}
+.dgm-carousel-indicators span {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--dgm-control-border);
+  border-radius: 100%;
+}
+.dgm-carousel-indicators [aria-current] span {
+  background: var(--dgm-primary);
+}
+.dgm-slider-thumb:focus-visible,
+.dgm-toggle-item:focus-visible,
+.dgm-navigation-trigger:focus-visible,
+.dgm-navigation-link:focus-visible,
+.dgm-multi-tags button:focus-visible,
+.dgm-resize-handle:focus-visible,
+.dgm-carousel-viewport:focus-visible,
+.dgm-carousel-indicators button:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+.dgm-resize-handle:focus-visible {
+  outline-offset: -3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-navigation-content {
+    animation: none;
+  }
+  .dgm-toggle-item {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .dgm-slider-track,
+  .dgm-slider-range,
+  .dgm-carousel-indicators span {
+    background: ButtonText;
+  }
+  .dgm-slider-thumb {
+    border-color: Highlight;
+  }
+  .dgm-tree [aria-selected='true'] > .dgm-tree-row,
+  .dgm-toggle-item[data-state='on'] {
+    outline: 2px solid Highlight;
+  }
+}
+
+.dgm-tree-node-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}