/* Datalyse compatibility aliases and existing voice assets.
   Values are owned by datalyse-modern.css; shared surfaces by datalyse-ui.css. */

:root {
  /* Both themes inherit application colors from datalyse-modern.css. */
  --el-shell-bg: var(--dt-app);
  --el-stage-bg: var(--dt-surface);
  --el-card-stone: var(--dt-surface-2);
  --el-surface-stone: var(--dt-surface-2);
  --el-dock-bg: var(--dt-surface-3);
  --el-sidebar-bg: var(--dt-sidebar);
  --el-topbar-bg: var(--dt-app-header);

  --el-ink: var(--dt-text);
  --el-ink-black: var(--dt-text);
  --el-ink-hover: var(--dt-link-hover);
  --el-ink-body: var(--dt-muted);
  --el-text-main: var(--dt-text);
  --el-text-muted: var(--dt-muted);
  --el-text-faint: var(--dt-faint);
  --el-muted: var(--dt-muted);
  --el-stone: var(--dt-muted);
  --el-taupe: var(--dt-faint);
  --el-faint: var(--dt-faint);

  --el-hairline: var(--dt-border);
  --el-hairline-soft: var(--dt-border-soft);
  --el-hairline-strong: var(--dt-border-strong);
  --el-hover-bg: var(--dt-hover);
  --el-active-bg: var(--dt-active);

  /* Decorative voice/emotion colors are independent of the UI surfaces. */
  --el-terracotta: var(--dt-terracotta);
  --el-terracotta-dot: var(--dt-terracotta);
  --el-terracotta-hover: var(--dt-terracotta-hover);
  --el-amber: var(--dt-warning);
  --el-emerald: var(--dt-success);
  --el-crimson: var(--dt-danger);
}
/* ── 1. Nested Viewport Frame (ElevenLabs v4 #f3f2f0 Shell + Rounded White Stage) ── */
html,
body,
#main-wrapper,
.page-wrapper {
  background-color: var(--el-shell-bg) !important;
  color: var(--el-ink) !important;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.left-sidebar {
  background-color: var(--el-sidebar-bg) !important;
  border-right: 0 !important;
}

.body-wrapper {
  background-color: var(--dt-app) !important;
  border-top-left-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}

@media (max-width: 1199px) {
  .body-wrapper {
    border-top-left-radius: 0;
  }
}

.app-header {
  background-color: var(--dt-app) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0 !important;
  border-top-left-radius: 0;
}

/* ── 2. Sidebar Navigation — ElevenLabs v4 Stone Shell Style ── */
#sidebarnav .sb-groupli > details > summary::after {
  display: none !important;
  content: none !important;
}

.left-sidebar .sidebar-link,
#sidebarnav .sidebar-link {
  border-radius: 10px !important;
  color: var(--el-ink-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.left-sidebar .sidebar-link:hover,
#sidebarnav .sidebar-link:hover {
  background-color: var(--el-hover-bg) !important;
  color: var(--el-ink) !important;
}

.left-sidebar .sidebar-link.active,
#sidebarnav .sidebar-link.active,
#sidebarnav .sidebar-item.selected > .sidebar-link {
  background-color: var(--el-stage-bg) !important;
  color: var(--el-ink) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ── 3. ElevenLabs v4 Signature Film-Grain, Corner-Glow & Bento Cards ── */
.film-grain {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 0),
    radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 0);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}

.corner-glow-card {
  position: relative;
  background: var(--el-stage-bg) !important;
  border-radius: 20px !important;
  box-shadow:
    none !important;
}

.hairline-card {
  background: var(--el-stage-bg) !important;
  border-radius: 20px !important;
  border: 0 !important;
  box-shadow: none !important;
}

.el-stone-card {
  background: var(--dt-surface) !important;
  border-radius: 24px !important;
  border: 0 !important;
}

/* ── 4. Global Cards, Modals, Tables & Buttons in ElevenLabs v4 Style ── */
.card,
.dui-card {
  background-color: var(--el-stage-bg);
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

/* Button surfaces and states are owned by elevenlabs-v4-modules.css. */
.btn-primary,
.btn-dark {
  border-radius: 9999px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}

/* Secondary / outline button typography. */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-light,
.btn-secondary {
  border-radius: 9999px !important;
  border: 0 !important;
  font-weight: 500 !important;
}

/* ── 5. Right-Hand Slide-Over Architect / Autopilot Drawer (#daliaPanel) ── */
#daliaPanel.dalia-panel {
  background: var(--el-stage-bg) !important;
  border-left: 1px solid transparent !important;
  border-radius: 24px 0 0 24px !important;
  box-shadow: none !important;
  overflow: hidden;
}

#daliaPanel .dalia-panel__head {
  background: var(--el-card-stone) !important;
  border-bottom: 1px solid transparent !important;
  padding: 14px 18px !important;
}

#daliaPanel .dalia-panel__title {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--el-ink) !important;
}

#daliaPanel .dalia-chat__form,
#daliaPanel .dalia-composer {
  background: var(--dt-field-bg) !important;
  border: 0 !important;
  border-radius: 20px !important;
}

#daliaPanel .dalia-chip {
  border-radius: 9999px !important;
  background: var(--el-card-stone) !important;
  border: 1px solid transparent !important;
  color: var(--el-ink) !important;
  font-size: 12px !important;
}

#daliaPanel .dalia-chip:hover {
  background: var(--el-dock-bg) !important;
}

/* ── 6. Universal ElevenLabs v4 Soft Borders, Tabs & Composite Control Reset ── */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--dt-focus-ring) !important;
  outline-offset: 2px;
}

/* Soften all inputs, selects, and dropdown triggers so no harsh black border ever appears */
.form-control,
.form-select,
select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.input-group-text,
.dui-select__trigger,
.select2-selection,
.choices__inner {
  border-radius: 10px !important;
}

/* Never draw an inner border on inputs/selects/textareas inside composite wrappers */
:root :is(
  .dt-search-field,
  .pn-service-search,
  .sb-picker-searchbox,
  .pbx-voice-search,
  .dui-dt-search,
  .salesn-search,
  .tts-vpicker-search-box,
  .aivs-avatar-search,
  .aivs-voice-search,
  .aivs-tts-history-search,
  .vp-search,
  .vp-field,
  .rt-search,
  .rt-field,
  .ce-search,
  .el-arch-composer,
  .ovc-composer,
  .dalia-chat__form,
  .dalia-composer,
  .ai-lang-search,
  .el-studio-inline-chatbar,
  .el-tpl-search-box,
  .ai-search-box,
  .el-aset-md-editor-wrap
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:root :is(
  .dt-search-field,
  .pn-service-search,
  .sb-picker-searchbox,
  .pbx-voice-search,
  .dui-dt-search,
  .salesn-search,
  .tts-vpicker-search-box,
  .aivs-avatar-search,
  .aivs-voice-search,
  .aivs-tts-history-search,
  .vp-search,
  .vp-field,
  .rt-search,
  .rt-field,
  .ce-search,
  .el-arch-composer,
  .ovc-composer,
  .dalia-chat__form,
  .dalia-composer,
  .ai-lang-search,
  .el-studio-inline-chatbar,
  .el-tpl-search-box,
  .ai-search-box,
  .el-aset-md-editor-wrap
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover,
:root :is(
  .dt-search-field,
  .pn-service-search,
  .sb-picker-searchbox,
  .pbx-voice-search,
  .dui-dt-search,
  .salesn-search,
  .tts-vpicker-search-box,
  .aivs-avatar-search,
  .aivs-voice-search,
  .aivs-tts-history-search,
  .vp-search,
  .vp-field,
  .rt-search,
  .rt-field,
  .ce-search,
  .el-arch-composer,
  .ovc-composer,
  .dalia-chat__form,
  .dalia-composer,
  .ai-lang-search,
  .el-studio-inline-chatbar,
  .el-tpl-search-box,
  .ai-search-box,
  .el-aset-md-editor-wrap
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Global Underline Tabs (.nav-tabs) in ElevenLabs v4 Style */
.nav-tabs {
  border-bottom: 1px solid var(--el-hairline) !important;
  gap: 20px;
}

.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--el-ink-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 4px !important;
  margin-bottom: -1px !important;
  transition: color 0.14s ease, border-color 0.14s ease !important;
}

.nav-tabs .nav-link:hover {
  color: var(--el-ink) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--el-ink) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--el-ink) !important;
  background: transparent !important;
}


/* ── Foco de campos sin doble borde (06-11-2026, Marc: «quita los bordes, brillos y dobles al estar active o focus»):
   los campos y buscadores enfocados solo cambian su línea de 1 px a --dt-focus; sin anillo exterior ni brillo.
   Va al final de la última hoja para ganar a los anillos de 3 px de datalyse-modern.css y de los módulos. ── */
:root :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .dui-select__trigger,
  .dui-select--open > .dui-select__trigger,
  .select2-selection,
  .choices__inner
):is(:focus, :focus-visible, :active) {
  box-shadow: none !important;
  outline: 0 !important;
}
:root :is(
  .input-group,
  .dui-dt-search,
  .dui-date.is-open > input,
  [class*="search"],
  [class*="composer"]
):focus-within {
  box-shadow: none !important;
}

/* Metallic preview from AI Agents and the voice widget, without media or connection code. */
.dt-agent-orb {
  --dt-orb-color: color-mix(in srgb, var(--dt-cyan) 65%, var(--dt-success));
  position: relative;
  display: inline-block;
  flex: none;
  width: 34px;
  aspect-ratio: 1;
  isolation: isolate;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 12px 35px color-mix(in srgb, var(--dt-orb-color) 24%, transparent);
}
.dt-agent-orb__core, .dt-agent-orb::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.dt-agent-orb__core {
  background: conic-gradient(from 180deg,
    var(--dt-orb-color),
    color-mix(in srgb, var(--dt-orb-color) 72%, var(--dt-text)),
    color-mix(in srgb, var(--dt-orb-color) 26%, var(--dt-text)),
    color-mix(in srgb, var(--dt-orb-color) 40%, var(--dt-surface)),
    var(--dt-orb-color));
}
.dt-agent-orb__core::before, .dt-agent-orb::after { content: ""; pointer-events: none; }
.dt-agent-orb__core::before {
  position: absolute; inset: -8%; border-radius: inherit;
  background: conic-gradient(from 90deg at 46% 54%, rgb(255 255 255 / .26), transparent 30%, rgb(0 0 0 / .18) 62%, transparent 88%, rgb(255 255 255 / .26));
  mix-blend-mode: overlay;
}
.dt-agent-orb::after {
  background: radial-gradient(circle at 28% 24%, rgb(255 255 255 / .48), rgb(255 255 255 / .12) 30%, transparent 58%),
    radial-gradient(circle at 74% 78%, rgb(0 0 0 / .22), transparent 52%);
  box-shadow: inset 0 0 18px rgb(255 255 255 / .28);
}
[data-orb-tone="blue"] .dt-agent-orb, .dt-agent-orb[data-orb-tone="blue"] { --dt-orb-color: var(--dt-blue); }
[data-orb-tone="warm"] .dt-agent-orb, .dt-agent-orb[data-orb-tone="warm"] { --dt-orb-color: var(--dt-coral); }
@media (prefers-reduced-motion: no-preference) {
  .dt-agent-orb--moving .dt-agent-orb__core { animation: dt-agent-orb-turn 6.5s linear infinite; }
  .dt-agent-orb--moving .dt-agent-orb__core::before { animation: dt-agent-orb-sheen 3.4s ease-in-out infinite alternate; }
}
@keyframes dt-agent-orb-turn { to { transform: rotate(360deg); } }
@keyframes dt-agent-orb-sheen { to { transform: rotate(-140deg); } }

.dt-orb-picker {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 128px;
  padding: 8px;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-xl);
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--dt-cyan) 11%, transparent), transparent 70%),
    linear-gradient(145deg, var(--dt-surface), var(--dt-surface-2));
}
.dt-orb-picker__side {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 84px;
  padding: 6px 3px;
  border: 1px solid transparent;
  border-radius: var(--dt-radius);
  background: transparent;
  color: var(--dt-muted);
  cursor: pointer;
  font: inherit;
}
.dt-orb-picker__side:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-orb-picker__side:focus-visible { outline: 2px solid var(--dt-text); outline-offset: 1px; }
.dt-orb-picker__side:disabled { visibility: hidden; }
.dt-orb-picker__side .dt-agent-orb { width: min(62%, 48px); opacity: .78; }
.dt-orb-picker__side:hover .dt-agent-orb,
.dt-orb-picker__side:focus-visible .dt-agent-orb { opacity: 1; }
.dt-orb-picker__direction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
}
.dt-orb-picker__direction [data-orb-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-orb-picker__center {
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 116px);
  aspect-ratio: 1;
  border: 1px solid var(--dt-border-strong);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--dt-surface) 60%, transparent);
}
.dt-orb-picker__center .dt-agent-orb { width: 84%; }

/* Floating messages above overlays, ordered from top to bottom. */
#toast-container { position:fixed !important; inset:16px 16px auto auto !important; margin:0 !important; padding:0 !important; width:min(380px,calc(100vw - 32px)) !important; max-height:calc(100dvh - 32px); overflow-y:auto; display:flex !important; flex-direction:column !important; gap:10px; z-index:2147483647 !important; border:0; background:transparent; pointer-events:none; }
#toast-container .dly-toast { position:relative; display:flex; flex-direction:column; min-width:0; width:100%; max-width:none; margin:0; padding:16px 36px 0 16px; gap:0; border:1px solid var(--dt-border) !important; border-radius:16px; color:var(--dt-text) !important; background:var(--dt-surface-2) !important; box-shadow:0 8px 28px color-mix(in srgb,var(--dt-text) 12%,transparent); pointer-events:auto; }
#toast-container .dly-toast__content { gap:4px; width:100%; padding-bottom:14px; }
#toast-container .dly-toast__title { height:auto; padding:0; background:transparent !important; color:var(--dt-text) !important; font-size:13px; font-weight:600; }
#toast-container .dly-toast__msg { color:var(--dt-text); font-size:13px; line-height:1.45; }
#toast-container .dly-toast__close { position:absolute; top:10px; right:10px; }
#toast-container .dly-toast::after { display:none; }
#toast-container .dly-toast__copy { align-self:stretch; margin:0 -36px 0 -16px; padding:9px; border:0; border-top:1px solid var(--dt-border); background:transparent; color:var(--dt-muted); font:inherit; font-size:12px; cursor:pointer; }
#toast-container .dly-toast__copy:hover { background:var(--dt-hover); color:var(--dt-text); }
@media(prefers-reduced-motion:reduce) { #toast-container .dly-toast { transition:none; transform:none; } }