/* ═══════════ datalyse-ui.css · componentes del kit dUI (26-10-2026, tanda 2 de la dirección ElevenLabs) ═══════════
   Hoja de los componentes de cssyapp/datalyse-ui.js que no vienen de Bootstrap: menú por
   especificación (dUI.Menu), selector de fechas (dUI.DatePicker) y segmentado (dUI.Segmented). Tokens en datalyse-modern.css §01
   (--dt-*, --dt-dur-*, --dt-ease*). Modales y tablas: datalyse-modals.css / datalyse-tables.css; entrada/salida de capas con dtOpen/dtClose de datalyse-modern.css §07. Va sellada con ?v=. */

/* ═══════════ dUI.Menu y dUI.Segmented (26-10-2026, tanda 2 del kit dUI, dirección ElevenLabs) ═══════════
   Menú por especificación (datalyse-ui.js → dUI.Menu.open) y control segmentado (dUI.Segmented sobre <select data-dui-segmented>).
   Tokens de datalyse-modern.css §01 (--dt-*, --dt-dur-*, --dt-ease*, --font-sans); entrada y salida del menú con dtOpen/dtOpenUp/dtClose
   de §07 (.dropdown-menu.show y .is-closing). Sin sombras: las capas se separan con 1 px de --dt-border-strong. */

/* ── dUI.Menu: <div class="dropdown-menu dui-menu" role="menu"> colgado de body; posición en línea (fixed) por el motor de Dropdown ── */
.dropdown-menu.dui-menu {
  min-width: 200px;
  max-width: var(--dui-menu-w, 320px);
  max-height: 420px;
  margin: 0;
  padding: 5px !important;
  overflow: auto;
  overscroll-behavior: contain;
  border-color: var(--dt-border-strong) !important;
  box-shadow: none !important; /* el tema pone var(--el-shadow-lg) !important en .dropdown-menu; hoy vale none, pero se fija */
  font: 500 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  /* el tema pone top:100% / right:0 en .dropdown-menu-end; aquí mandan los estilos en línea del motor */
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
.dropdown-menu.dui-menu.show { transform-origin: top left; }
.dropdown-menu.dui-menu.dropdown-menu-end.show { transform-origin: top right; }
.dropdown-menu.dui-menu.is-up.show { transform-origin: bottom left; }
.dropdown-menu.dui-menu.is-up.dropdown-menu-end.show { transform-origin: bottom right; }
.dropdown-menu.dui-menu.is-up.show:not(.is-closing) { animation-name: dtOpenUp !important; }

.dui-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--dt-text);
  font: 500 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-decoration: none;
  border-radius: var(--dt-radius-sm);
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease);
}
.dui-menu__item:hover,
.dui-menu__item:focus-visible {
  color: var(--dt-text);
  background: var(--dt-hover);
}
.dui-menu__item:active { background: var(--dt-active); }

.dui-menu__icon {
  flex: 0 0 16px;
  width: 16px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--dt-faint);
  transition: color var(--dt-dur-1) var(--dt-ease);
}
.dui-menu__item:hover .dui-menu__icon,
.dui-menu__item:focus-visible .dui-menu__icon { color: var(--dt-text); }
/* sin ningún icono en el menú, la columna del icono no ocupa sitio */
.dui-menu:not(.dui-menu--icons) .dui-menu__icon { display: none; }

.dui-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dui-menu__kbd {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 5px;
  border: 0;
  border-radius: 4px;
  background: var(--dt-surface-2);
  color: var(--dt-faint);
  font: 500 10.5px/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

.dui-menu__item.is-danger,
.dui-menu__item.is-danger .dui-menu__icon { color: var(--dt-danger); }
.dui-menu__item.is-danger:hover,
.dui-menu__item.is-danger:focus-visible {
  color: var(--dt-danger);
  background: rgba(217, 73, 73, .08);
  background: color-mix(in srgb, var(--dt-danger) 8%, transparent);
}
.dui-menu__item.is-danger:hover .dui-menu__icon,
.dui-menu__item.is-danger:focus-visible .dui-menu__icon { color: var(--dt-danger); }

.dui-menu__item[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.dui-menu__item[disabled]:hover { background: transparent; }
.dui-menu__item[disabled]:hover .dui-menu__icon { color: var(--dt-faint); }
.dui-menu__item.is-danger[disabled]:hover .dui-menu__icon { color: var(--dt-danger); }

.dui-menu__header {
  padding: 8px 10px 4px;
  color: var(--dt-faint);
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dui-menu__divider {
  height: 1px;
  margin: 5px -5px;
  background: var(--dt-border);
}

/* ── dUI.Segmented: <div class="dui-seg" role="radiogroup"> con botones role="radio" y un thumb blanco que se desliza ── */
.dui-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  background: var(--dt-surface-2);
  border: 0;
  border-radius: var(--dt-radius);
  isolation: isolate;
  vertical-align: middle;
  box-sizing: border-box;
}
.dui-seg--block { display: flex; }
.dui-seg--block .dui-seg__opt { flex: 1 1 0; }

.dui-seg__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--dt-radius-sm);
  background: transparent;
  color: var(--dt-muted);
  font: 500 12.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--dt-dur-1) var(--dt-ease), box-shadow var(--dt-dur-1) var(--dt-ease);
}
.dui-seg__opt .ti { font-size: 15px; line-height: 1; }
.dui-seg__opt:hover { color: var(--dt-text); }
.dui-seg__opt[aria-checked="true"] { color: var(--dt-text); }
.dui-seg__opt:focus-visible { box-shadow: 0 0 0 3px var(--dt-focus-ring); }
.dui-seg__opt[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.dui-seg__opt[disabled]:hover { color: var(--dt-muted); }

.dui-seg__thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: 0;
  height: 28px;
  box-sizing: border-box;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-radius-sm);
  pointer-events: none;
  will-change: transform, width;
  transition: transform var(--dt-dur-2) var(--dt-ease), width var(--dt-dur-2) var(--dt-ease), opacity var(--dt-dur-1) var(--dt-ease);
}
[data-bs-theme="dark"] .dui-seg__thumb { background: var(--dt-overlay); }

.dui-seg--sm .dui-seg__opt {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
}
.dui-seg--sm .dui-seg__opt .ti { font-size: 14px; }
.dui-seg--sm .dui-seg__thumb { height: 24px; }

.dui-seg.is-disabled {
  opacity: .5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dui-menu__item,
  .dui-menu__icon,
  .dui-seg__opt,
  .dui-seg__thumb { transition: none !important; }
}

/* ============================================================
   dUI.DatePicker (26-10, tanda 2) — calendario propio sobre input date / datetime-local
   Tokens de datalyse-modern.css §01; keyframes dtOpen / dtOpenUp / dtClose de §07.
   Una superficie, líneas de 1 px, sin sombras; CTA en tinta (--dt-cta).
   ============================================================ */

/* ---------- Envoltorio del input nativo ---------- */
.dui-date {
  position: relative;
  display: block;
}

.dui-date--inline {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.input-group > .dui-date {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.dui-date > input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Dentro de un input-group el input ya no es hijo directo: hereda a mano las esquinas planas
   y el z-index del foco que Bootstrap da a .input-group > .form-control */
.input-group > .dui-date:not(:first-child) > input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .dui-date:not(:last-child) > input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .dui-date:focus-within,
.input-group > .dui-date.is-open {
  z-index: 5;
}

/* El input se oculta por clase o atributo: el envoltorio se oculta con él */
.dui-date:has(> input:is([hidden], .d-none, [style*="display: none"], [style*="display:none"])) {
  display: none;
}

/* Indicador nativo invisible pero clicable (Chromium / Safari); encima va el glifo Tabler */
.dui-date > input::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.dui-date::after {
  content: "\ea53";
  font-family: tabler-icons;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  color: var(--dt-faint);
  pointer-events: none;
  transition: color var(--dt-dur-1) var(--dt-ease);
}

.dui-date:hover::after,
.dui-date.is-open::after,
.dui-date:focus-within::after {
  color: var(--dt-text);
}

.dui-date:has(> input:disabled)::after {
  opacity: .5;
}

/* Firefox dibuja su propio botón de calendario y no expone pseudo para quitarlo: sin glifo doble */
@supports (-moz-appearance: none) {
  .dui-date::after {
    display: none;
  }
}

/* ---------- Pop ---------- */
.dui-date__pop {
  position: fixed;
  z-index: 2001;
  width: 272px;
  box-sizing: border-box;
  padding: 10px;
  color: var(--dt-text);
  background: var(--dt-overlay);
  border: 0;
  border-radius: var(--dt-radius-lg);
  box-shadow: none;
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: top left;
  animation: dtOpen var(--dt-dur-2) var(--dt-ease-out) both;
}

.dui-date__pop.is-up {
  transform-origin: bottom left;
  animation-name: dtOpenUp;
}

/* Entrada terminada (animationend en datalyse-ui.js): un cambio posterior de is-up no la reinicia */
.dui-date__pop.is-settled {
  animation: none;
}

.dui-date__pop.is-closing {
  pointer-events: none;
  animation: dtClose var(--dt-dur-1) var(--dt-ease-in) both !important;
}

.dui-date__pop *,
.dui-date__pop *::before,
.dui-date__pop *::after {
  box-sizing: border-box;
}

/* ---------- Cabecera ---------- */
.dui-date__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
}

.dui-date__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-text);
}

.dui-date__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--dt-radius-sm);
  background: transparent;
  color: var(--dt-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease), border-color var(--dt-dur-1) var(--dt-ease);
}

.dui-date__nav:hover {
  background: var(--dt-hover);
  border-color: var(--dt-border-strong);
  color: var(--dt-text);
}

.dui-date__nav:active {
  background: var(--dt-active);
}

/* ---------- Grid ---------- */
.dui-date__grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
  justify-content: center;
}

.dui-date__row {
  display: contents;
}

.dui-date__wd {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dt-faint);
  overflow: hidden;
  white-space: nowrap;
}

.dui-date__day {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--dt-radius-sm);
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease), border-color var(--dt-dur-1) var(--dt-ease);
}

.dui-date__day:hover:not(:disabled) {
  background: var(--dt-hover);
}

.dui-date__day:active:not(:disabled) {
  background: var(--dt-active);
}

.dui-date__day.is-outside {
  color: var(--dt-faint);
}

.dui-date__day.is-today {
  border-color: var(--dt-border-strong);
  font-weight: 500;
}

.dui-date__day.is-selected,
.dui-date__day.is-range-start,
.dui-date__day.is-range-end {
  background: var(--dt-cta);
  border-color: var(--dt-cta);
  color: var(--dt-cta-fg);
  font-weight: 500;
}

.dui-date__day.is-selected:hover:not(:disabled),
.dui-date__day.is-range-start:hover:not(:disabled),
.dui-date__day.is-range-end:hover:not(:disabled) {
  background: var(--dt-cta-hover, var(--dt-cta));
  border-color: var(--dt-cta-hover, var(--dt-cta));
  color: var(--dt-cta-fg);
}

/* Banda del rango: un pseudo detrás del número que cubre el hueco de 2 px entre celdas */
.dui-date__day.in-range::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -2px;
  right: -2px;
  background: color-mix(in srgb, var(--dt-cta) 10%, transparent);
}

.dui-date__day.in-range.is-range-start::before,
.dui-date__row > .dui-date__day.in-range:first-child::before {
  left: 0;
  border-top-left-radius: var(--dt-radius-sm);
  border-bottom-left-radius: var(--dt-radius-sm);
}

.dui-date__day.in-range.is-range-end::before,
.dui-date__row > .dui-date__day.in-range:last-child::before {
  right: 0;
  border-top-right-radius: var(--dt-radius-sm);
  border-bottom-right-radius: var(--dt-radius-sm);
}

.dui-date__day.in-range:not(.is-range-start):not(.is-range-end):hover:not(:disabled) {
  background: color-mix(in srgb, var(--dt-cta) 16%, transparent);
}

.dui-date__day:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ---------- Foco (anillo de 3 px + borde) ---------- */
.dui-date__nav:focus-visible,
.dui-date__day:focus-visible,
.dui-date__btn:focus-visible {
  outline: none;
  border-color: var(--dt-focus);
  box-shadow: 0 0 0 3px var(--dt-focus-ring);
}

.dui-date__day.is-selected:focus-visible,
.dui-date__day.is-range-start:focus-visible,
.dui-date__day.is-range-end:focus-visible {
  border-color: var(--dt-overlay);
}

/* ---------- Hora (datetime-local) ---------- */
.dui-date__time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--dt-border);
  color: var(--dt-muted);
}

.dui-date__time .ti {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}

.dui-date__time input[type="time"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Pie ---------- */
.dui-date__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--dt-border);
}

.dui-date__btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: var(--dt-radius-sm);
  background: transparent;
  color: var(--dt-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease);
}

.dui-date__btn:hover {
  background: var(--dt-hover);
  color: var(--dt-text);
}

.dui-date__btn:active {
  background: var(--dt-active);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .dui-date__pop,
  .dui-date__pop.is-up,
  .dui-date__pop.is-closing {
    animation: none !important;
  }

  .dui-date::after,
  .dui-date__nav,
  .dui-date__day,
  .dui-date__btn {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   dUI Layout & ElevenLabs v4 Unified Primitives (06-11-2026)
   Unifica cabeceras (.dui-page-header), barras de herramientas (.dui-toolbar),
   pestañas subrayadas (.dui-tabs-underline), pastillas segmentadas (.dui-segmented),
   tarjetas sin contorno (.dui-card, .dui-stat-card, .dui-table-shell) y sliders
   (<input type="range">) en todas las páginas de Datalyse (Light & Dark Mode).
   ═══════════════════════════════════════════════════════════════════════════ */

.dui-page {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 20px 28px 40px;
  box-sizing: border-box;
  color: var(--dt-text);
  font-family: var(--font-sans);
}

@media (max-width: 768px) {
  .dui-page {
    padding: 14px 16px 32px;
  }
}

.dui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.dui-page-title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--dt-text);
  margin: 0;
}

.dui-page-subtitle {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dt-muted);
  margin: 4px 0 0 0;
}

.dui-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dui-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dui-toolbar__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Pestañas horizontales estilo ElevenLabs (indicador inferior de 2px en tinta) ── */
.dui-tabs-underline {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--dt-border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dui-tabs-underline::-webkit-scrollbar {
  display: none;
}

.dui-tabs-underline__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px 11px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dt-muted);
  font: 500 13px/1.2 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dt-dur-1) var(--dt-ease), border-color var(--dt-dur-1) var(--dt-ease);
}

.dui-tabs-underline__tab:hover {
  color: var(--dt-text);
}

.dui-tabs-underline__tab.active,
.dui-tabs-underline__tab.is-active,
.dui-tabs-underline__tab[aria-selected="true"] {
  color: var(--dt-text);
  font-weight: 600;
  border-bottom-color: var(--dt-text);
}

/* Shared tab paint. Legacy agent tabs keep their layout and click contracts. */
:root[data-bs-theme] body :is(.dui-tabs-underline, .ai-tabs, .el-aset-subtabs) {
  border-bottom-color: transparent;
}
:root[data-bs-theme] body :is(.dui-tabs-underline__tab, .ai-tab, .el-aset-subtab) {
  background: transparent !important;
  color: var(--dt-muted) !important;
  box-shadow: none;
  transition: color var(--dt-dur-1) var(--dt-ease), background-color var(--dt-dur-1) var(--dt-ease);
}
:root[data-bs-theme] body :is(.dui-tabs-underline__tab, .ai-tab, .el-aset-subtab):is(:hover, .active, .is-active, [aria-selected="true"]) {
  color: var(--dt-text) !important;
}
:root[data-bs-theme] body :is(.ai-tab, .el-aset-subtab).active::after {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--dt-text);
}
@media (forced-colors: none) {
  :root[data-bs-theme] body :is(.dui-tabs-underline__tab, .ai-tab, .el-aset-subtab):focus-visible {
    background: var(--dt-field-hover) !important;
    outline: 0 !important;
  }
}
@media (forced-colors: active) {
  :root[data-bs-theme] body :is(.dui-tabs-underline__tab, .ai-tab, .el-aset-subtab):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: -2px;
  }
}

/* ── Control segmentado ligero (.dui-segmented) ── */
.dui-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--dt-radius, 8px);
  background: var(--dt-surface-2);
  border: 0;
}

.dui-segmented--pill {
  border-radius: 9999px;
}

.dui-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--dt-radius-sm, 6px);
  background: transparent;
  color: var(--dt-muted);
  font: 500 12.5px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease), border-color var(--dt-dur-1) var(--dt-ease);
}

.dui-segmented--pill .dui-segmented__btn {
  border-radius: 9999px;
}

.dui-segmented__btn:hover {
  color: var(--dt-text);
}

.dui-segmented__btn.active,
.dui-segmented__btn.is-active,
.dui-segmented__btn[aria-selected="true"],
.dui-segmented__btn[aria-pressed="true"] {
  background: var(--dt-surface);
  color: var(--dt-text);
  font-weight: 600;
  border-color: var(--dt-border-strong);
}

/* ── Tarjetas y contenedores de tabla sin contorno (.dui-card, .dui-stat-card, .dui-table-shell) ── */
.dui-card {
  background: var(--dt-surface);
  border: 0;
  border-radius: var(--dt-radius-lg, 12px);
  padding: 18px 20px;
  box-shadow: none;
  color: var(--dt-text);
}

.dui-stat-card {
  background: var(--dt-surface);
  border: 0;
  border-radius: var(--dt-radius-lg, 12px);
  padding: 14px 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dui-stat-card__label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dt-muted);
}

.dui-stat-card__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--dt-text);
  font-variant-numeric: tabular-nums;
}

/* ── Sliders <input type="range"> estilo ElevenLabs v4 con progreso automático (--el-progress) ── */
input[type="range"].dui-range,
input[type="range"].el-slider,
input[type="range"].form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--dt-cta) var(--el-progress, 50%), var(--dt-border-strong) var(--el-progress, 50%));
  outline: none;
  cursor: pointer;
}

input[type="range"].dui-range::-webkit-slider-thumb,
input[type="range"].el-slider::-webkit-slider-thumb,
input[type="range"].form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dt-cta);
  border: 2px solid var(--dt-surface);
  box-shadow: 0 0 0 1px var(--dt-border-strong);
  cursor: pointer;
  transition: transform 120ms ease;
}

input[type="range"].dui-range::-webkit-slider-thumb:hover,
input[type="range"].el-slider::-webkit-slider-thumb:hover,
input[type="range"].form-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}


/* Shared surfaces extracted from the Superagents review. Existing renderers can
   adopt these classes without changing their events, data or layout contracts. */
.dui-surface { background:var(--dt-surface); color:var(--dt-text); border:0; border-radius:var(--dt-radius-lg); box-shadow:none; }
/* A composer is one field: focus changes its surface, not the inner textarea. */
.dui-composer:focus-within { background-color:color-mix(in srgb, var(--dt-text) 3%, var(--dt-surface)) !important; }
@media (forced-colors: active) {
 .dui-composer:focus-within { outline:2px solid Highlight; outline-offset:-2px; }
}
.dui-field { color:var(--dt-text); background:var(--dt-field-bg); border:0; border-radius:var(--dt-control-radius); padding:12px 16px; }
.dui-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 16px; border:0; border-radius:var(--dt-radius); background:var(--dt-field-bg); color:var(--dt-text); font:500 13px/1.25 var(--font-sans); cursor:pointer; box-shadow:none; }
.dui-button--primary { background:var(--dt-cta); color:var(--dt-cta-fg); }
.dui-button--quiet { background:transparent; color:var(--dt-muted); }
.dui-button:hover { background:var(--dt-field-hover); }
.dui-button--primary:hover { background:var(--dt-cta-hover); }
.dui-button:disabled { opacity:.5; cursor:not-allowed; }
.dui-chip { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; padding:6px 10px; background:var(--dt-surface-2); color:var(--dt-muted); font-size:12px; line-height:1.4; }
.dui-chip--tool { background:var(--dt-chip-tool); color:var(--dt-chip-tool-fg); }
.dui-chip--channel { background:var(--dt-chip-channel); color:var(--dt-chip-channel-fg); }
.dui-chip--knowledge { background:var(--dt-chip-knowledge); color:var(--dt-chip-knowledge-fg); }
.dui-chip--success { background:var(--dt-chip-success); color:var(--dt-chip-success-fg); }
.dui-chip--warning { background:var(--dt-chip-warning); color:var(--dt-chip-warning-fg); }
.dui-chip--danger { background:var(--dt-chip-danger); color:var(--dt-chip-danger-fg); }
/* Choice buttons share a semantic pressed state while legacy modules keep their
   existing data attributes and event hooks. The contract replaces legacy paint. */
.dui-choice-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.dui-choice-group--grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dui-choice-group--orbs { display:flex; flex-wrap:wrap; gap:10px; }
:root .dui-choice {
 display:inline-flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:8px;
 min-width:0; min-height:48px; padding:12px 10px; margin:0; cursor:pointer;
 background:var(--dt-surface-2) !important; color:var(--dt-muted) !important;
 border:0 !important; border-radius:var(--dt-radius) !important; box-shadow:none !important;
 font:500 12px/1.4 var(--font-sans); text-align:center; white-space:normal; transform:none !important;
 transition:background-color var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease);
}
:root .dui-choice :is(i,span) { color:inherit !important; }
:root .dui-choice > .ti { font-size:20px; }
:root .dui-choice:hover { background:var(--dt-hover) !important; color:var(--dt-text) !important; }
:root .dui-choice[aria-pressed="true"] { background:var(--dt-active) !important; color:var(--dt-text) !important; }
:root .dui-choice:not(:focus-visible) { outline:0 !important; }
:root .dui-choice:focus-visible { outline:2px solid var(--dt-focus) !important; outline-offset:3px; }
:root .dui-choice--orb {
 position:relative; flex:none; width:40px !important; height:40px !important; min-height:40px; padding:4px !important;
 border-radius:50% !important; background:transparent !important;
}
:root .dui-choice--orb:is(:hover,[aria-pressed="true"]) { background:transparent !important; }
:root .dui-choice .dui-choice__orb {
 display:block; width:32px; height:32px; flex:none; border:0 !important; border-radius:50% !important;
 background:radial-gradient(ellipse at 32% 22%,color-mix(in srgb,var(--dt-on-color) 65%,transparent),transparent 44%),var(--dui-orb-fill,var(--dt-voice-orb));
}
:root .dui-choice--orb::after { display:none !important; }
:root .dui-choice--orb[aria-pressed="true"]::after {
 content:'✓'; display:grid !important; place-items:center; position:absolute; inset:auto -2px -2px auto;
 width:16px; height:16px; border:0; border-radius:50%; background:var(--dt-cta); color:var(--dt-cta-fg);
 font:600 11px/1 var(--font-sans); text-shadow:none;
}
.dui-choice[data-color="v4"] { --dui-orb-fill:var(--dt-orb-v4); }
.dui-choice[data-color="v4lime"] { --dui-orb-fill:var(--dt-orb-v4lime); }
.dui-choice[data-color="teal"] { --dui-orb-fill:var(--dt-orb-teal); }
.dui-choice[data-color="amber"] { --dui-orb-fill:var(--dt-orb-amber); }
.dui-choice[data-color="cyan"] { --dui-orb-fill:var(--dt-orb-cyan); }
.dui-choice[data-color="blue"] { --dui-orb-fill:var(--dt-orb-blue); }
.dui-choice[data-color="indigo"] { --dui-orb-fill:var(--dt-orb-indigo); }
.dui-choice[data-color="emerald"] { --dui-orb-fill:var(--dt-orb-emerald); }
.dui-choice[data-color="rose"] { --dui-orb-fill:var(--dt-orb-rose); }
.dui-choice[data-color="dark"] { --dui-orb-fill:var(--dt-orb-dark); }
.dui-choice[data-color="light"] { --dui-orb-fill:var(--dt-orb-light); }
.dui-card--compact-gap { margin-bottom:16px; }
:root .dui-preview-frame { padding:0 !important; min-height:460px; height:460px; position:relative; overflow:hidden; border-radius:0 0 12px 12px; background:var(--dt-surface); }
.dui-preview-frame > iframe { width:100%; height:100%; border:0; display:block; }
/* A save bar occupies its own row, so the editor's scrollable form keeps room. */
.dui-savebar {
 position:relative; flex:none; align-self:center; box-sizing:border-box; width:min(640px,calc(100% - 32px));
 margin:12px auto; padding:10px 12px 10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
 background:var(--dt-surface-2); color:var(--dt-text); border:0; border-radius:var(--dt-radius-lg); box-shadow:none;
}
.dui-savebar__message { min-width:0; font:500 13px/1.4 var(--font-sans); }
.dui-savebar__actions { display:flex; align-items:center; flex:none; gap:8px; }
.dui-savebar__actions .dui-button { min-height:36px; padding:8px 12px; white-space:nowrap; }
@media(max-width:480px) {
 .dui-savebar { flex-wrap:wrap; width:calc(100% - 24px); padding:12px; gap:10px; }
 .dui-savebar__message { flex:1 1 100%; }
 .dui-savebar__actions { width:100%; }
 .dui-savebar__actions .dui-button { flex:1; }
}
@media(forced-colors:active) {
 :root .dui-choice:focus-visible { outline-color:Highlight !important; }
 :root .dui-choice[aria-pressed="true"] { outline:2px solid Highlight !important; outline-offset:2px; }
 .dui-savebar { outline:1px solid CanvasText; }
}

/* Real flag images render consistently, including Windows without flag emoji. */
.dui-flag { display:inline-block; width:20px; height:14px; flex:none; object-fit:cover; border:0; border-radius:2px; vertical-align:middle; }
.dui-flag-stack { display:inline-flex; align-items:center; gap:4px; margin-inline-end:8px; vertical-align:middle; }
.dui-voice-language { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; width:100%; min-width:0; }
.dui-voice-language__label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dt-muted); }
.dui-voice-select { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; justify-content:flex-start; text-align:start; }
.dui-voice-select > span:not(.dui-voice-orb) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dui-voice-select > .ti { margin-inline-start:auto; flex:none; }
.dui-voice-orb { display:inline-block; width:24px; height:24px; flex:none; border-radius:50%; background:var(--dt-voice-orb); }
.dui-voice-language .ai-chip-remove { grid-column:2; grid-row:1; }
.ai-lang-trigger { width:100%; font:inherit; text-align:start; }
.ai-lang-option .dui-flag, .ai-chip-name .dui-flag { margin-inline-end:6px; }
.studio-country > summary > span:first-child { display:inline-flex; align-items:center; gap:8px; }
@media (forced-colors: active) {
 .dui-surface, .dui-field, .dui-button, .dui-card, .dui-stat-card { border:1px solid CanvasText; }
 .dui-button:focus-visible, .dui-field:focus-visible { outline:2px solid Highlight; outline-offset:2px; }
}

/* Profile dropdown structure retained in the shared kit after retiring 165_profdd.css. */
.profdd { width:320px; border-radius:14px; padding:6px; max-height:calc(100vh - var(--dt-topbar-h, 44px) - 16px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.profdd-header { display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:10px; cursor:pointer; }
.profdd-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.profdd-header-info { flex:1; min-width:0; }
.profdd-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
.profdd-meta { display:flex; align-items:center; gap:5px; margin-top:2px; font-size:11px; }
.profdd-plan-row { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 8px; border-radius:999px; }
.profdd-plan-icon { font-size:12px; }
.profdd-plan-name { font-size:11px; font-weight:600; letter-spacing:.02em; }
.profdd-plan-pill { display:none; }
.profdd-plan-cap-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1; }
.profdd-plan-cap-pill .ti { font-size:14px; }
.profdd-sub-card { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:12px; border-radius:14px; text-decoration:none; }
.profdd-sub-card:hover { text-decoration:none; }
.profdd-sub-card-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.profdd-sub-card-icon .ti { font-size:20px; }
.profdd-sub-card-text { flex:1; min-width:0; }
.profdd-sub-card-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.profdd-sub-card-name { font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profdd-sub-card-arrow { font-size:18px; flex-shrink:0; }
.profdd-section { margin:6px 4px; padding:12px; border-radius:10px; }
.profdd-section.profdd-cap-hidden { display:none; }
.profdd-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.profdd-eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.profdd-row-balance { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.profdd-balance-amount { font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.1; margin-top:4px; }
.profdd-balance-actions { display:flex; gap:6px; align-items:center; }
.profdd-icon-btn { cursor:pointer; padding:6px; font-size:14px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.profdd-icon-btn.is-spinning { cursor:wait; }
.profdd-btn-primary, .profdd-btn-secondary { font-size:11px; font-weight:600; padding:6px 12px; border-radius:7px; text-decoration:none; display:inline-flex; align-items:center; gap:4px; line-height:1.2; }
.profdd-warn-pill { display:none; align-items:center; gap:4px; padding:2px 8px; font-size:10px; font-weight:600; border-radius:999px; }
.profdd-warn-pill .ti { font-size:11px; }
.profdd-empty { font-size:11px; text-align:center; padding:6px 0; }
.profdd-cap-row { display:flex; flex-direction:column; gap:5px; padding:8px 0; }
.profdd-cap-row:first-child { padding-top:2px; }
.profdd-cap-row:last-child { padding-bottom:2px; }
.profdd-cap-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.profdd-cap-label { display:inline-flex; align-items:center; gap:5px; font-weight:500; }
.profdd-cap-warn-icon { font-size:12px; }
.profdd-cap-value { font-variant-numeric:tabular-nums; font-size:11px; white-space:nowrap; }
.profdd-cap-sep { margin:0 1px; }
.profdd-cap-row-over .profdd-cap-value { font-weight:600; }
.profdd-cap-row-critical .profdd-cap-label { font-weight:600; }
.profdd-cap-bar { height:4px; border-radius:2px; overflow:hidden; }
.profdd-cap-bar-fill { height:100%; border-radius:2px; }
.profdd-cap-row-over .profdd-cap-bar-fill { width:100% !important; }
.profdd-cap-cta { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; padding:9px 12px; border-radius:8px; font-size:12px; font-weight:600; text-decoration:none; }
.profdd-cap-cta .ti { font-size:13px; }
li.nav-item.dropdown[data-cap-warn="true"] > a { position:relative; }
li.nav-item.dropdown[data-cap-warn="true"] > a::after { content:""; position:absolute; top:1px; right:1px; width:9px; height:9px; border-radius:50%; background:var(--dt-danger); pointer-events:none; }
.profdd-links { padding:4px 4px; }
.profdd-link { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:500; text-decoration:none; }
.profdd-section-links { padding-top:6px; }
.profdd-links-eyebrow { padding:6px 12px 2px; }
.profdd-section-links .profdd-link { justify-content:flex-start; }
.profdd-section-links .profdd-link .ti-external-link { font-size:12px; }
.profdd-theme-row { cursor:default; }
.profdd-theme-buttons { display:flex; gap:2px; padding:2px; border-radius:8px; }
.profdd-theme-buttons button { width:28px; height:26px; border-radius:6px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }
.profdd-logout { margin-top:4px; padding-top:4px; }
.profdd-logout .profdd-link { font-size:12px; }
.profdd { width:288px !important; border-radius:14px !important; padding:6px !important; }
.profdd-btn-primary,
.profdd-cap-cta,
[data-bs-theme="light"] .profdd-btn-primary,
[data-bs-theme="light"] .profdd-cap-cta { border-radius:9999px !important; padding:5px 12px !important; }
.profdd-btn-secondary { border-radius:9999px !important; padding:5px 11px !important; }
.profdd-unified-cap-wrap { margin-top:8px; padding-top:8px; }
.profdd-prefs-box { margin-top:2px; padding-top:4px; }
.profdd-lang-select { height:26px; padding:0 22px 0 8px; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; max-width:132px; outline:none; }
.profdd-link i { font-size:15px; }

.profdd { color:var(--dt-text); }
.profdd-header:hover,.profdd-link:hover,.profdd-icon-btn:hover { background:var(--dt-hover); }
.profdd-meta,.profdd-empty,.profdd-eyebrow,.profdd-cap-label,.profdd-cap-sep,.profdd-links-eyebrow { color:var(--dt-muted); }
.profdd-warn-pill,.profdd-cap-warn-icon,.profdd-cap-row-over .profdd-cap-value { color:var(--dt-warning); }
.profdd-cap-bar { background:var(--dt-surface-3); }
.profdd-cap-bar-fill { background:var(--dt-muted); }
.profdd-cap-row-over .profdd-cap-bar-fill { background:var(--dt-warning); }
.profdd-icon-btn,.profdd-btn-secondary,.profdd-theme-buttons button { color:var(--dt-text); background:var(--dt-surface-2); border:0; }
.profdd-prefs-box,.profdd-unified-cap-wrap { color:var(--dt-text); background:var(--dt-surface-2); }
.profdd :focus-visible { outline:2px solid var(--dt-focus); outline-offset:2px; }