/* DT CRM Core brand theme — aligned to the DT Marketing CRM Core logo.
   Keep the generated app CSS intact and use this layer for brand-level tuning. */
:root {
  /* Carbono/grafito como base para diferenciar el CRM de las interfaces azules genéricas. */
  --dt-ink: #101416;
  --dt-navy: #171d20;
  --dt-panel: #1d2529;
  --dt-panel-strong: #253035;
  --dt-line: rgba(88, 214, 205, .22);
  --dt-teal: #16d6d0;
  --dt-teal-dark: #079fae;
  --dt-green: #42e879;
  --dt-text: #e8f5f5;
  --dt-muted: #9bb6c0;
  --dt-focus: rgba(22, 214, 208, .34);
}

html, body, #root {
  background-color: var(--dt-ink) !important;
  color: var(--dt-text);
}

body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(22, 214, 208, .07), transparent 30%),
    radial-gradient(circle at 92% 86%, rgba(66, 232, 121, .05), transparent 28%) !important;
  background-attachment: fixed;
}

/* The login shell has its own decorative pseudo-elements. Neutralize the old
   blue cast there too, so the graphite base is visible across the full page. */
.dt-login-shell::before {
  background-color: var(--dt-ink) !important;
  background-image:
    linear-gradient(rgba(180, 199, 202, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 199, 202, .032) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(22, 214, 208, .075), transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(66, 232, 121, .055), transparent 30%) !important;
}
.dt-login-shell::after {
  background-image:
    radial-gradient(circle at 22% 24%, rgba(180, 199, 202, .12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 66%, rgba(66, 232, 121, .10) 0 1px, transparent 1.5px),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(180, 199, 202, .018) 19px, transparent 20px 42px) !important;
}

::selection {
  background: var(--dt-teal) !important;
  color: var(--dt-ink) !important;
}

/* Core navy surfaces */
.bg-slate-950 { background-color: var(--dt-ink) !important; }
.bg-slate-900 { background-color: var(--dt-navy) !important; }
[class~="bg-slate-900/90"] { background-color: rgba(29, 37, 41, .94) !important; }
.bg-slate-850 { background-color: var(--dt-panel) !important; }
.bg-slate-800 { background-color: var(--dt-panel-strong) !important; }
.bg-slate-700 { background-color: #344147 !important; }

/* Tailwind opacity variants are separate class names. Cover them explicitly
   so dashboard cards and headers do not retain the old navy surfaces. */
[class*="bg-slate-950/"] { background-color: rgba(16, 20, 22, .92) !important; }
[class*="bg-slate-900/"] { background-color: rgba(23, 29, 32, .92) !important; }
[class*="bg-slate-850/"] { background-color: rgba(29, 37, 41, .92) !important; }
[class*="bg-slate-800/"] { background-color: rgba(37, 48, 53, .92) !important; }
.border-slate-900,
.border-slate-850,
.border-slate-800 { border-color: var(--dt-line) !important; }
.border-slate-700,
.border-slate-600 { border-color: rgba(133, 190, 199, .28) !important; }

/* Readable neutral text on the darker navy surfaces */
.text-slate-100 { color: #f1fbfb !important; }
.text-slate-200 { color: #e0f0f1 !important; }
.text-slate-300 { color: #c3d9df !important; }
.text-slate-400 { color: var(--dt-muted) !important; }
.text-slate-500 { color: #7899a6 !important; }
.text-slate-600 { color: #5e7f8e !important; }

/* Logo accents: turquoise swoosh and green arrow/bars */
.bg-cyan-500 { background-color: var(--dt-teal) !important; }
.bg-cyan-600 { background-color: var(--dt-teal-dark) !important; }
.bg-cyan-400 { background-color: #49e6df !important; }
.bg-cyan-950 { background-color: #073a4d !important; }
.text-cyan-500,
.text-cyan-400 { color: var(--dt-teal) !important; }
.text-cyan-300 { color: #73eee8 !important; }
.text-cyan-200 { color: #a4f5f0 !important; }
.border-cyan-500 { border-color: var(--dt-teal) !important; }
.border-cyan-400 { border-color: #58ebe4 !important; }
.border-cyan-800 { border-color: #0b7181 !important; }

.bg-emerald-500 { background-color: var(--dt-green) !important; }
.bg-emerald-600 { background-color: #20c963 !important; }
.bg-emerald-400 { background-color: #69ef94 !important; }
.bg-emerald-950 { background-color: #0b3b2d !important; }
.text-emerald-400 { color: var(--dt-green) !important; }
.text-emerald-300 { color: #7df29e !important; }
.text-emerald-200 { color: #b2fac6 !important; }
.border-emerald-500 { border-color: var(--dt-green) !important; }
.border-emerald-400 { border-color: #70f09b !important; }
.border-emerald-800 { border-color: #137d49 !important; }

/* Gradient utilities that should carry the logo's cyan → green direction. */
.from-cyan-500 { --tw-gradient-from: var(--dt-teal) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(22 214 208 / 0) var(--tw-gradient-to-position) !important; }
.to-emerald-500 { --tw-gradient-to: var(--dt-green) var(--tw-gradient-to-position) !important; }
.to-blue-600 { --tw-gradient-to: var(--dt-teal-dark) var(--tw-gradient-to-position) !important; }

/* Cleaner controls and cards without changing component structure. */
input, textarea, select {
  border-color: var(--dt-line) !important;
  background-color: rgba(11, 15, 17, .78) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--dt-teal) !important;
  box-shadow: 0 0 0 3px var(--dt-focus) !important;
  outline: none !important;
}
button {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
button.bg-cyan-500:hover,
button.bg-cyan-600:hover,
button.bg-emerald-500:hover,
button.bg-emerald-600:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(22, 214, 208, .16);
}

/* Button system: solid graphite controls for navigation, brand gradient only
   for primary actions, and enough weight that controls do not look like thin
   blue outlines floating on the page. */
button[class*="bg-cyan-600"],
button[class*="bg-cyan-500"],
button[class*="bg-emerald-600"],
button[class*="bg-emerald-500"],
button[class*="from-cyan-500"][class*="to-blue-600"] {
  background: linear-gradient(135deg, var(--dt-teal), var(--dt-green)) !important;
  color: #071513 !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(22, 214, 208, .16) !important;
  font-weight: 800;
}
button[class*="bg-slate-800"],
button[class*="bg-slate-900"],
button[class*="bg-slate-850"] {
  background: #253035 !important;
  color: #e7f3f3 !important;
  border-color: rgba(129, 181, 184, .30) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14) !important;
}
button[class*="bg-slate-800"]:hover,
button[class*="bg-slate-900"]:hover,
button[class*="bg-slate-850"]:hover {
  background: #344147 !important;
  border-color: rgba(22, 214, 208, .62) !important;
  color: #ffffff !important;
}
button[class*="border-cyan-500"],
button[class*="border-cyan-400"] {
  border-color: rgba(22, 214, 208, .68) !important;
}
button[class*="border-slate-800"],
button[class*="border-slate-700"] {
  border-color: rgba(129, 181, 184, .30) !important;
}
button[class*="bg-cyan-600"]:hover,
button[class*="bg-cyan-500"]:hover,
button[class*="bg-emerald-600"]:hover,
button[class*="bg-emerald-500"]:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
}
a { text-underline-offset: 3px; }

/* Preserve the login hero hierarchy while making the panel feel lighter. */
#root main [class*="bg-slate-900"],
#root form [class*="bg-slate-900"] {
  border-color: var(--dt-line);
}

/* Integrated toolbar controls: the header should read as one system, not as
   a row of unrelated floating pills. */
header[class*="sticky"][class*="top-0"][class*="z-30"] {
  background: rgba(23, 29, 32, .94) !important;
  border-bottom-color: rgba(129, 181, 184, .20) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(16px) saturate(115%);
}

header[class*="sticky"][class*="top-0"][class*="z-30"] button {
  min-height: 2.45rem;
  border-radius: .75rem !important;
  box-shadow: none !important;
  transform: none !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:first-child > button,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:first-child > div > button,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:nth-child(2) button,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > div > button {
  background: rgba(37, 48, 53, .72) !important;
  color: #c4d9dc !important;
  border: 1px solid rgba(129, 181, 184, .25) !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:first-child > button:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:first-child > div > button:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:nth-child(2) button:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > div > button:hover {
  background: rgba(52, 65, 71, .90) !important;
  color: #f1fbfb !important;
  border-color: rgba(22, 214, 208, .55) !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:nth-child(2) {
  max-width: 23rem !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:nth-child(2) button {
  min-height: 2.55rem;
  background: rgba(16, 20, 22, .48) !important;
  border-color: rgba(129, 181, 184, .20) !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child {
  gap: .4rem !important;
  padding: .25rem !important;
  border-radius: .9rem !important;
  background: rgba(16, 20, 22, .32) !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-600"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-500"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-600"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-500"] {
  min-height: 2.45rem;
  padding-inline: .9rem !important;
  background: linear-gradient(135deg, var(--dt-teal), var(--dt-green)) !important;
  color: #071513 !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(22, 214, 208, .14) !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-600"]:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-500"]:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-600"]:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-500"]:hover {
  filter: brightness(1.08) saturate(1.04);
  box-shadow: 0 4px 12px rgba(22, 214, 208, .18) !important;
}

/* Flat toolbar pass: secondary actions sit inside the header instead of
   looking like a row of separate outlined pills. */
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > div > button {
  background: transparent !important;
  border-color: transparent !important;
  color: #a9c3c8 !important;
  box-shadow: none !important;
  padding: .55rem .65rem !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button:hover,
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > div > button:hover {
  background: rgba(129, 181, 184, .10) !important;
  border-color: transparent !important;
  color: #f1fbfb !important;
}

header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-600"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-cyan-500"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-600"],
header[class*="sticky"][class*="top-0"][class*="z-30"] > div:last-child > button[class*="bg-emerald-500"] {
  background: linear-gradient(135deg, var(--dt-teal), var(--dt-green)) !important;
  border-color: transparent !important;
  color: #071513 !important;
  padding: .6rem 1rem !important;
  box-shadow: 0 3px 10px rgba(22, 214, 208, .14) !important;
}