:root {
  --sfs-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sfs-bg: #f7f7f8;
  --sfs-surface: #ffffff;
  --sfs-surface-muted: #f3f4f6;
  --sfs-border: #e5e7eb;
  --sfs-text: #111827;
  --sfs-muted: #64748b;
  --sfs-primary: #e30613;
  --sfs-primary-strong: #b8000c;
  --sfs-primary-soft: #fff1f2;
  --sfs-focus-ring: rgba(227, 6, 19, 0.18);
  --sfs-radius: 8px;

  /* Chatwoot usa esta escala para la marca primaria. La redefinimos aqui
     para que toda la aplicacion (no solo los modulos SFS) use la identidad
     de Super Farmacia Santana. Los colores semanticos de estados
     (verde/ambar/rojo de errores) permanecen independientes. */
  --blue-1: 255 252 252;
  --blue-2: 255 247 247;
  --blue-3: 255 235 236;
  --blue-4: 255 219 221;
  --blue-5: 255 201 204;
  --blue-6: 250 177 181;
  --blue-7: 242 145 151;
  --blue-8: 234 101 111;
  --blue-9: 227 6 19;
  --blue-10: 200 0 13;
  --blue-11: 184 0 12;
  --blue-12: 70 0 5;
  --text-blue: 70 0 5;
  --border-blue: 227, 6, 19, .45;
  --border-blue-strong: 227 6 19;
  --solid-blue: 255 219 221;
  --solid-blue-2: 255 247 247;
  --alpha-1: 215, 215, 215, .22;
  --alpha-2: 196, 197, 198, .22;
  --alpha-3: 255, 255, 255, .96;
}

html,
body {
  background: var(--sfs-bg) !important;
  color: var(--sfs-text) !important;
  font-family: var(--sfs-font) !important;
  color-scheme: light !important;
}

html.dark,
body.dark,
[data-theme="dark"],
.dark {
  color-scheme: dark !important;
  --sfs-bg: #101012;
  --sfs-surface: #18181b;
  --sfs-surface-muted: #27272a;
  --sfs-border: #3f3f46;
  --sfs-text: #f4f4f5;
  --sfs-muted: #a1a1aa;
  --sfs-primary: #ff3341;
  --sfs-primary-strong: #ff5c67;
  --sfs-primary-soft: #3b0a0f;
  --sfs-focus-ring: rgba(255, 51, 65, 0.3);
  --slate-1: 16 16 18;
  --slate-2: 24 24 27;
  --slate-3: 39 39 42;
  --slate-4: 47 47 53;
  --slate-5: 63 63 70;
  --slate-6: 82 82 91;
  --slate-7: 113 113 122;
  --slate-8: 161 161 170;
  --slate-9: 161 161 170;
  --slate-10: 180 180 188;
  --slate-11: 212 212 216;
  --slate-12: 244 244 245;
  --gray-1: 16 16 18;
  --gray-2: 24 24 27;
  --gray-3: 39 39 42;
  --gray-4: 47 47 53;
  --gray-5: 63 63 70;
  --gray-6: 82 82 91;
  --gray-7: 113 113 122;
  --gray-8: 161 161 170;
  --gray-9: 161 161 170;
  --gray-10: 180 180 188;
  --gray-11: 212 212 216;
  --gray-12: 244 244 245;
  --background-color: 16 16 18;
  --surface-1: 24 24 27;
  --surface-2: 32 32 36;
  --surface-active: 39 39 42;
  --background-input-box: 255, 255, 255, .04;
  --border-strong: 82 82 91;
  --border-weak: 63 63 70;
  --solid-1: 24 24 27;
  --solid-2: 32 32 36;
  --solid-3: 39 39 42;
  --solid-active: 47 47 53;
  --card-color: 24 24 27;
  --button-color: 39 39 42;
  --label-background: 32 32 36;
  --label-border: 255, 255, 255, .08;
  --alpha-1: 255, 255, 255, .06;
  --alpha-2: 255, 255, 255, .10;
  --alpha-3: 24, 24, 27, .96;
  --black-alpha-1: 0, 0, 0, .35;
  --black-alpha-2: 0, 0, 0, .18;
  --white-alpha: 255, 255, 255, .8;

  --blue-1: 59 10 15;
  --blue-2: 70 12 18;
  --blue-3: 88 15 23;
  --blue-4: 111 18 29;
  --blue-5: 135 22 35;
  --blue-6: 163 26 42;
  --blue-7: 194 31 50;
  --blue-8: 225 40 58;
  --blue-9: 255 51 65;
  --blue-10: 255 92 103;
  --blue-11: 255 132 140;
  --blue-12: 255 229 231;
  --text-blue: 255 229 231;
  --border-blue: 255, 51, 65, .55;
  --border-blue-strong: 255 92 103;
  --solid-blue: 88 15 23;
  --solid-blue-2: 70 12 18;
}

.dark .n-dropdown-body {
  background: rgba(24, 24, 27, 0.98) !important;
}

.dark body,
.dark main,
.dark .dark\:bg-gray-900,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-700,
[class*="bg-gray-900"],
[class*="bg-slate-900"],
[class*="bg-zinc-900"] {
  background-color: var(--sfs-bg) !important;
  color: var(--sfs-text) !important;
}

.dark .dark\:text-gray-100,
.dark .dark\:text-white,
[class*="text-gray-100"],
[class*="text-white"] {
  color: var(--sfs-text) !important;
}

a {
  color: inherit;
}

/* Algunos componentes antiguos no consumen directamente los tokens. */
.woot-banner.primary {
  background-color: var(--sfs-primary) !important;
  color: #ffffff !important;
}

.woot-banner.primary a,
.woot-banner.primary button,
.woot-banner.primary .banner-message {
  color: #ffffff !important;
}

p a:is(.dark *),
.text-blue-500,
.text-blue-600,
.text-woot-500,
.text-woot-600 {
  color: var(--sfs-primary) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-woot-500,
.bg-woot-600,
.bg-n-brand {
  background-color: var(--sfs-primary) !important;
}

.text-n-brand {
  color: var(--sfs-primary) !important;
}

.outline-n-brand,
.border-n-brand {
  border-color: var(--sfs-primary) !important;
  outline-color: var(--sfs-primary) !important;
}

/* Navegacion: el rojo identifica acciones y foco, no cada enlace. */
body:has([href*="/app/accounts/"]) aside a {
  color: inherit;
}

body:has([href*="/app/accounts/"]) aside a[aria-current="page"],
body:has([href*="/app/accounts/"]) aside a.router-link-exact-active {
  color: var(--sfs-text) !important;
}

body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__link,
body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__group-toggle,
body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__section-label,
body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__refresh {
  color: var(--sfs-text) !important;
}

body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__item--blocked .sfs-dyn__link {
  color: var(--sfs-muted) !important;
}

body.dark:has([href*="/app/accounts/"]) aside .sfs-dyn__item--active .sfs-dyn__link {
  background: var(--sfs-primary-soft) !important;
  color: var(--sfs-primary-strong) !important;
}

/* Menus flotantes de Chatwoot. En modo oscuro los tokens lazy-loaded se
   cargaban despues del tema y producian fondo negro con texto negro. */
.n-dropdown-body {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--sfs-border) !important;
  color: var(--sfs-text) !important;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.16) !important;
}

.n-dropdown-body .n-dropdown-item > a,
.n-dropdown-body .n-dropdown-item > button,
.n-dropdown-body .n-dropdown-item > div {
  color: var(--sfs-text) !important;
}

.n-dropdown-body .n-dropdown-item > a:hover,
.n-dropdown-body .n-dropdown-item > button:hover {
  background-color: var(--sfs-surface-muted) !important;
}

.n-dropdown-body [class*="text-n-slate-11"],
.n-dropdown-body [class*="text-n-slate-10"] {
  color: var(--sfs-muted) !important;
}

button,
input,
select,
textarea {
  font-family: var(--sfs-font) !important;
}

button,
[role="button"],
input[type="button"],
input[type="submit"] {
  border-radius: var(--sfs-radius) !important;
}

button:not([disabled]),
input[type="submit"]:not([disabled]) {
  cursor: pointer;
}

.card,
.panel,
.box,
.container,
.gradio-container,
[class*="auth"],
[class*="login"],
[class*="card"],
[class*="panel"] {
  background-color: var(--sfs-surface) !important;
  border-color: var(--sfs-border) !important;
  color: var(--sfs-text) !important;
}

main,
nav,
aside,
.ember-application,
.application,
.gradio-container {
  background-color: var(--sfs-bg) !important;
  color: var(--sfs-text) !important;
}

.sfs-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--sfs-text);
  font: 700 14px/1.2 var(--sfs-font);
}

.sfs-brand-lockup::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 6px;
  background: url("/brand-assets/logo_sfs.png") center / contain no-repeat;
}

/* Chatwoot shell: keep the sidebar brand/logo from overlapping the menu. */
body:has([href*="/app/accounts/"]) aside img[src*="logo_sfs"],
body:has([href*="/app/accounts/"]) aside img[src*="/brand-assets/"] {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

body:has([href*="/app/accounts/"]) aside a,
body:has([href*="/app/accounts/"]) aside button,
body:has([href*="/app/accounts/"]) aside [role="button"] {
  min-height: 32px;
}

body:has([href*="/app/accounts/"]) aside [class*="account"],
body:has([href*="/app/accounts/"]) aside [class*="brand"],
body:has([href*="/app/accounts/"]) aside [class*="workspace"] {
  min-width: 0 !important;
}

body:has([href*="/app/accounts/"]) aside [class*="account"] *,
body:has([href*="/app/accounts/"]) aside [class*="brand"] *,
body:has([href*="/app/accounts/"]) aside [class*="workspace"] * {
  min-width: 0 !important;
}

body:has([href*="/app/accounts/"]) aside img[src*="logo_sfs"] + *,
body:has([href*="/app/accounts/"]) aside img[src*="/brand-assets/"] + *,
body:has([href*="/app/accounts/"]) aside [class*="account"] span,
body:has([href*="/app/accounts/"]) aside [class*="brand"] span,
body:has([href*="/app/accounts/"]) aside [class*="workspace"] span {
  display: block !important;
  min-width: 0 !important;
  max-width: 156px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

body:has([href*="/app/accounts/"]) aside > div:first-child,
body:has([href*="/app/accounts/"]) aside header:first-child {
  min-height: 44px !important;
  overflow: hidden !important;
}

table,
th,
td {
  border-color: var(--sfs-border) !important;
}

th {
  color: var(--sfs-muted) !important;
  font-weight: 600 !important;
}

input,
select,
textarea {
  background-color: var(--sfs-surface) !important;
  color: var(--sfs-text) !important;
  border-color: var(--sfs-border) !important;
  border-radius: var(--sfs-radius) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sfs-muted) !important;
}

.btn-primary,
.button-primary,
button[type="submit"],
button.primary {
  background: var(--sfs-primary) !important;
  border-color: var(--sfs-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover:not([disabled]),
.button-primary:hover:not([disabled]),
button[type="submit"]:hover:not([disabled]),
button.primary:hover:not([disabled]) {
  background: var(--sfs-primary-strong) !important;
  border-color: var(--sfs-primary-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sfs-primary) !important;
  box-shadow: 0 0 0 3px var(--sfs-focus-ring) !important;
  outline: none !important;
}

/* Chatwoot: keep long SFS module menus visible by scrolling the left sidebar. */
@media (min-width: 768px) {
  body:has([href*="/app/accounts/"]) aside {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Chatwoot keeps the dashboard in a nested flex scroller. SFS screens can
     be much taller than the viewport (maps, reports and route plans), so make
     the actual dashboard column the scroll owner instead of clipping it at
     the shell boundary. */
  body:has([href*="/app/accounts/"]) main:has(.sfs-shell),
  body:has([href*="/app/accounts/"]) main:has(.sfs-mp) {
    min-height: 0 !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }

  body:has([href*="/app/accounts/"]) aside nav,
  body:has([href*="/app/accounts/"]) aside [class*="menu"],
  body:has([href*="/app/accounts/"]) aside [class*="navigation"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: 96px !important;
    scrollbar-width: thin;
  }
}