/* ═══════════════════════════════════════════════════════════════════════════
   TEMA DOLIXPERT para el panel de Chatwoot
   ───────────────────────────────────────────────────────────────────────────
   Se inyecta desde nginx. EL CONTENEDOR NO SE TOCA — igual que un módulo en
   /custom de Dolibarr o /Plugins de FacturaScripts.

   PALETA: extraída del logo real de DOLIXPERT, no de otra marca.
     #00183C  navy profundo   (93.9% del logo)
     #00A8E4  cian            (el acento, la nube y la flecha)
     #0090CC · #0084C0 · #006C9C · #003C60   (el degradado del logo)
     #DDE3E9  plata           (el volumen de la nube)

   Chatwoot declara sus colores como variables CSS en formato "R G B".
   Redefinirlas retematiza el panel sin tocar una clase de Tailwind — que es
   lo que cambia entre versiones.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Acento: el cian del logo ───────────────────────────────────────────
     Chatwoot usa la escala `blue` para todo lo primario. Se reemplaza por el
     cian DOLIXPERT, con los doce pasos conservando el contraste original.    */
  --blue-1:  247 253 255;
  --blue-2:  238 250 255;
  --blue-3:  219 244 254;
  --blue-4:  196 236 253;
  --blue-5:  167 226 250;
  --blue-6:  128 212 246;
  --blue-7:   77 194 240;
  --blue-8:   20 178 233;
  --blue-9:    0 168 228;   /* #00A8E4 — el cian de la marca */
  --blue-10:   0 144 204;   /* #0090CC */
  --blue-11:   0 108 156;   /* #006C9C */
  --blue-12:   0  24  60;   /* #00183C */

  /* ── Neutros inclinados al navy del logo ────────────────────────────── */
  --slate-1:  250 252 254;
  --slate-2:  244 248 252;
  --slate-3:  234 241 248;
  --slate-4:  222 232 243;
  --slate-5:  208 222 237;
  --slate-6:  190 208 228;
  --slate-7:  163 187 214;
  --slate-8:  124 156 192;
  --slate-9:   88 124 164;
  --slate-10:  66 100 138;
  --slate-11:  42  72 106;
  --slate-12:   0  24  60;   /* #00183C */

  --gray-1:  250 252 254;  --gray-2:  244 248 252;  --gray-3:  234 241 248;
  --gray-4:  222 232 243;  --gray-5:  208 222 237;  --gray-6:  190 208 228;
  --gray-7:  163 187 214;  --gray-8:  124 156 192;  --gray-9:   88 124 164;
  --gray-10:  66 100 138;  --gray-11:  42  72 106;  --gray-12:   0  24  60;

  /* ── Semánticos: no se tocan. Verde es éxito, rojo es error. ─────────── */
  --teal-9:   0 184 169;
  --teal-10:  0 165 152;
  --teal-11:  0 140 129;

  /* ── Propias ──────────────────────────────────────────────────────────── */
  --dx-navy:    #00183C;
  --dx-navy-2:  #002448;
  --dx-navy-3:  #003C60;
  --dx-cian:    #00A8E4;
  --dx-cian-2:  #0090CC;
  --dx-cian-3:  #006C9C;
  --dx-plata:   #DDE3E9;
  --dx-grad:    linear-gradient(135deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%);
  --dx-borde:   rgba(0, 24, 60, .10);
  --dx-sombra:  0 1px 2px rgba(0,24,60,.06), 0 8px 24px -12px rgba(0,24,60,.22);
  --dx-sombra-alta: 0 2px 4px rgba(0,24,60,.08), 0 18px 40px -16px rgba(0,60,96,.34);
  --dx-glow:    0 0 0 3px rgba(0,168,228,.18);
  --dx-t:       180ms cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════ tipografía */
body, body * {
  font-family: 'Space Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif !important;
}
body i, body [class*='i-lucide'], body [class*='icon'],
body [class^='ph-'], body [class*=' ph-'] { font-family: inherit !important; }

h1, h2, h3, .text-xl, .text-2xl, .text-3xl { letter-spacing: -.02em; font-weight: 600; }
.text-2xl, .text-3xl, .tabular-nums { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════ barra lateral */
aside.bg-n-background, aside[class*='w-\\[200px\\]'] {
  background: linear-gradient(168deg, var(--dx-navy) 0%, #00112C 100%) !important;
  border-right: 1px solid rgba(0,168,228,.16) !important;
}
aside.bg-n-background a, aside.bg-n-background button,
aside.bg-n-background span, aside.bg-n-background div,
aside.bg-n-background h1, aside.bg-n-background h2, aside.bg-n-background h3 {
  color: #A8C4DC !important;
}

/* El elemento activo: fondo cian translúcido + barra cian + texto blanco. */
aside.bg-n-background a[aria-current='page'],
aside.bg-n-background li[class*='active'] > a,
aside.bg-n-background a[class*='bg-n-alpha'] {
  background: rgba(0,168,228,.14) !important;
  color: #FFFFFF !important;
  position: relative;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0,168,228,.22) !important;
}
aside.bg-n-background a[aria-current='page']::before,
aside.bg-n-background li[class*='active'] > a::before {
  content: '';
  position: absolute; inset-inline-start: -9px; top: 18%;
  height: 64%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--dx-cian);
  box-shadow: 0 0 10px rgba(0,168,228,.85);
}

/* ── Interacción de verdad: el lateral responde al mouse. ────────────────*/
aside.bg-n-background a, aside.bg-n-background button {
  transition: background var(--dx-t), color var(--dx-t),
              box-shadow var(--dx-t), transform var(--dx-t) !important;
  border-radius: 7px;
}
aside.bg-n-background a:hover, aside.bg-n-background button:hover {
  background: rgba(0,168,228,.11) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px rgba(0,168,228,.28) !important;
  transform: translateX(2px);
}
aside.bg-n-background a:hover svg, aside.bg-n-background a:hover i {
  color: var(--dx-cian) !important;
}

/* ═══════════════════════════════════════════════════ botones */
button, .button, a[role='button'] {
  transition: background var(--dx-t), box-shadow var(--dx-t),
              transform var(--dx-t), filter var(--dx-t) !important;
  letter-spacing: -.005em;
}
button:not(:disabled):hover, .button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
button:not(:disabled):active, .button:not(:disabled):active {
  transform: translateY(0) scale(.99);
  filter: brightness(.96);
}
:focus-visible {
  outline: 2px solid var(--dx-cian) !important;
  outline-offset: 2px !important;
  box-shadow: var(--dx-glow) !important;
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════ tarjetas
   Se les da profundidad, y al pasar el mouse el borde se enciende en cian
   y la tarjeta se levanta. Antes no pasaba nada: por eso no convencía.      */
main [class*='rounded-lg'][class*='border'],
main [class*='rounded-xl'][class*='border'],
main [class*='rounded-2xl'][class*='border'],
section [class*='rounded-lg'][class*='border'] {
  border-color: var(--dx-borde) !important;
  box-shadow: var(--dx-sombra);
  transition: box-shadow var(--dx-t), border-color var(--dx-t), transform var(--dx-t);
}
main [class*='rounded-lg'][class*='border']:hover,
main [class*='rounded-xl'][class*='border']:hover,
main [class*='rounded-2xl'][class*='border']:hover {
  border-color: rgba(0,168,228,.55) !important;
  box-shadow: var(--dx-sombra-alta), 0 0 0 1px rgba(0,168,228,.20);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════ listas y tablas */
table thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .05em;
  font-weight: 600; color: rgb(var(--slate-10)) !important;
}
table tbody tr { transition: background var(--dx-t), box-shadow var(--dx-t); }
table tbody tr:hover {
  background: rgba(0,168,228,.06) !important;
  box-shadow: inset 3px 0 0 var(--dx-cian);
}

/* Las filas de la lista de canales, contactos y ajustes también responden. */
main li, main [class*='divide-y'] > div {
  transition: background var(--dx-t), box-shadow var(--dx-t);
}
main li:hover, main [class*='divide-y'] > div:hover {
  background: rgba(0,168,228,.05) !important;
}

[class*='conversation'][class*='active'],
li[class*='active'] > [class*='conversation'] {
  border-inline-start: 3px solid var(--dx-cian) !important;
  background: rgba(0,168,228,.07) !important;
}

/* ═══════════════════════════════════════════════════ campos */
input, textarea, select {
  transition: border-color var(--dx-t), box-shadow var(--dx-t), background var(--dx-t) !important;
}
input:hover, textarea:hover, select:hover { border-color: rgba(0,168,228,.40) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--dx-cian) !important;
  box-shadow: var(--dx-glow) !important;
}

/* ═══════════════════════════════════════════════════ etiquetas de estado */
[class*='rounded-full'][class*='px-'] { font-weight: 600; letter-spacing: .01em; }

/* ═══════════════════════════════════════════════════ barras de desplazamiento */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--slate-7)) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--slate-6)); border-radius: 100px;
  border: 2px solid transparent; background-clip: content-box;
  transition: background var(--dx-t);
}
*::-webkit-scrollbar-thumb:hover { background: var(--dx-cian); background-clip: content-box; }

/* ═══════════════════════════════════════════════════ color de marca
   `n-brand` no sale de --blue-9: Chatwoot lo resuelve aparte. Se sobrescribe
   la utilidad, que es lo que el navegador aplica de verdad.                  */
.bg-n-brand, button.bg-n-brand, a.bg-n-brand {
  background: var(--dx-grad) !important;
  box-shadow: 0 1px 2px rgba(0,24,60,.10), 0 6px 18px -8px rgba(0,108,156,.55);
}
.bg-n-brand:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 5px rgba(0,24,60,.14), 0 10px 26px -8px rgba(0,108,156,.70);
}
.text-n-brand   { color: var(--dx-cian-2) !important; }
.border-n-brand { border-color: var(--dx-cian) !important; }
.outline-n-brand, .focus\\:outline-n-brand:focus { outline-color: var(--dx-cian) !important; }
.ring-n-brand   { --tw-ring-color: var(--dx-cian) !important; }
.fill-n-brand   { fill: var(--dx-cian) !important; }
.stroke-n-brand { stroke: var(--dx-cian) !important; }

/* El lateral se mantiene limpio: sin cajas ni sombras heredadas. */
aside [class*='rounded'] { box-shadow: none; }
aside [class*='border-n-weak'], aside [class*='border-t'] {
  border-color: rgba(0,168,228,.14) !important;
}
aside > div:last-child, aside [class*='z-50'][class*='border-t'] {
  background: #00112C !important; box-shadow: none !important;
}
aside input {
  background: rgba(0,168,228,.08) !important;
  border-color: rgba(0,168,228,.16) !important;
  color: #DCE9F4 !important;
}
aside input::placeholder { color: #6E8FB0 !important; }
aside input:focus {
  background: rgba(0,168,228,.13) !important;
  border-color: var(--dx-cian) !important;
}

/* ═══════════════════════════════════════════════════ accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  button:hover, .button:hover, main [class*='rounded-lg']:hover { transform: none !important; }
  aside a:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA DOLIXPERT · CENTRO DE AYUDA (autoservicio del cliente)
   ───────────────────────────────────────────────────────────────────────────
   Todo lo de abajo va bajo `body.font-default`, que es la clase que Chatwoot
   pone SOLO en el portal público. El panel de agentes lleva `body.text-slate-*`
   y no la tiene, así que estas reglas no lo tocan.

   Esta es la cara que ve el cliente: tiene que decir DOLIXPERT desde el primer
   segundo, y cada cosa en la que se puede hacer clic tiene que verse viva.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────── la cabecera, en navy de marca */
body.font-default header {
  background: linear-gradient(180deg, #00183C 0%, #001731 100%) !important;
  border-bottom: 1px solid rgba(0, 168, 228, .26) !important;
  box-shadow: 0 4px 22px -12px rgba(0, 24, 60, .8) !important;
}
body.font-default header,
body.font-default header a,
body.font-default header button,
body.font-default header span,
body.font-default header div { color: #DCE9F4 !important; }
body.font-default header h1,
body.font-default header [class*='font-semibold'] { color: #FFFFFF !important; }

body.font-default header a,
body.font-default header button {
  border-radius: 8px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
body.font-default header a:hover,
body.font-default header button:hover {
  color: #FFFFFF !important;
  background-color: rgba(0, 168, 228, .16) !important;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────── la portada */
/* El degradado celeste de fábrica se cambia por el cian de la marca,
   difuminado para que el texto siga leyéndose. */
body.font-default main > div:first-child,
body.font-default [class*='bg-gradient-to-b'] {
  background-image: linear-gradient(180deg,
    rgba(0, 168, 228, .17) 0%,
    rgba(0, 168, 228, .06) 46%,
    rgba(255, 255, 255, 0) 100%) !important;
}
body.font-default h1 { color: #00183C !important; letter-spacing: -.025em; }

/* ─────────────────────────────────────────── el buscador */
body.font-default input[type='text'],
body.font-default input[type='search'] {
  border-color: rgba(0, 24, 60, .14) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.font-default input[type='text']:hover,
body.font-default input[type='search']:hover {
  border-color: rgba(0, 168, 228, .5) !important;
}
body.font-default input[type='text']:focus,
body.font-default input[type='search']:focus {
  border-color: #00A8E4 !important;
  box-shadow: 0 0 0 4px rgba(0, 168, 228, .18) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────── las tarjetas de categoría */
body.font-default main [class*='rounded'][class*='border'] {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
body.font-default main [class*='rounded'][class*='border']:hover {
  border-color: rgba(0, 168, 228, .45) !important;
  box-shadow: 0 22px 44px -26px rgba(0, 24, 60, .45),
              0 0 0 1px rgba(0, 168, 228, .14) !important;
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────── cada artículo de la lista */
/* Antes solo cambiaba el cursor. Ahora la fila se corre, se enciende el
   título en cian y la flecha avanza: se ve que es un enlace. */
body.font-default main a {
  border-radius: 8px;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
body.font-default main li > a:hover,
body.font-default main [class*='divide-y'] a:hover {
  background-color: rgba(0, 168, 228, .07) !important;
  color: #006C9C !important;
  transform: translateX(3px);
}
body.font-default main a svg { transition: transform 150ms ease, color 150ms ease; }
body.font-default main a:hover svg { color: #00A8E4 !important; transform: translateX(3px); }

/* ─────────────────────────────────────────── el cuerpo del artículo */
body.font-default article a,
body.font-default .prose a { color: #006C9C !important; text-decoration-color: rgba(0,168,228,.4); }
body.font-default article a:hover,
body.font-default .prose a:hover { color: #00A8E4 !important; }
body.font-default blockquote { border-left-color: #00A8E4 !important; }

/* ─────────────────────────────────────────── botones */
body.font-default button[class*='bg-woot'],
body.font-default a[class*='bg-woot'],
body.font-default [class*='bg-n-brand'] {
  background: linear-gradient(135deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%) !important;
  border-color: #0084C0 !important;
  color: #FFFFFF !important;
}

/* ─────────────────────────────────────────── foco visible para teclado */
body.font-default a:focus-visible,
body.font-default button:focus-visible {
  outline: 2px solid #00A8E4 !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.font-default * { transition: none !important; }
}

/* ── correcciones medidas sobre el portal ya publicado ───────────────────── */

/* El selector de idioma es un <select> nativo: heredaba el color claro de la
   cabecera sobre su fondo blanco de fábrica y quedaba ilegible. */
body.font-default header select {
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(0, 168, 228, .28) !important;
  border-radius: 8px;
  color: #DCE9F4 !important;
  padding: 2px 6px;
}
body.font-default header select:hover {
  background-color: rgba(0, 168, 228, .18) !important;
  border-color: rgba(0, 168, 228, .5) !important;
}
/* La lista desplegable la dibuja el sistema: ahí sí hace falta fondo claro. */
body.font-default header select option { color: #00183C; background: #FFFFFF; }

/* Los enlaces a artículos no son `li > a`: llevan su propia clase. Se
   apuntan por el destino, que es lo que no cambia entre versiones. */
body.font-default main a[href*='/articles/'],
body.font-default main a[href*='/categories/'] {
  display: block;
  border-radius: 8px;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
body.font-default main a[href*='/articles/']:hover,
body.font-default main a[href*='/categories/']:hover {
  background-color: rgba(0, 168, 228, .08) !important;
  color: #006C9C !important;
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO · Chatwoot
   ───────────────────────────────────────────────────────────────────────────
   Chatwoot usa la MISMA clase de `body` en el acceso y en el panel, así que no
   hay dónde anclarse desde CSS. `tema.js` marca el documento con `.dx-login`
   cuando la ruta es de acceso, y la quita al entrar. Todo lo de aquí cuelga de
   esa marca: el panel con sesión iniciada no la lleva nunca.
   ═══════════════════════════════════════════════════════════════════════════ */

html.dx-login,
html.dx-login body {
  min-height: 100vh;
  background:
    radial-gradient(900px 460px at 78% -8%,  rgba(0, 168, 228, .20), transparent 62%),
    radial-gradient(760px 420px at 12% 104%, rgba(0, 108, 156, .26), transparent 60%),
    linear-gradient(165deg, #00183C 0%, #00112C 100%) !important;
  background-attachment: fixed !important;
}
html.dx-login #app > div,
html.dx-login main,
html.dx-login main > section:not(.bg-white) { background: transparent !important; }

/* ── la marca ───────────────────────────────────────────────────────────── */
html.dx-login main img[src*='brand-assets'],
html.dx-login main img[src*='logo'] {
  content: url('/venthouse/logo.png') !important;
  width: 176px !important;
  height: auto !important;
  max-height: 132px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 8px 26px rgba(0, 168, 228, .34));
}

html.dx-login main h2 {
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  margin-top: 26px !important;
  text-wrap: balance;
}
html.dx-login main h2 + p,
html.dx-login main section:not(.bg-white) p { color: #93B0CB !important; }

/* ── la tarjeta ─────────────────────────────────────────────────────────── */
html.dx-login main section.bg-white {
  max-width: 400px !important;
  margin-top: 30px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 34px 78px -34px rgba(0, 0, 0, .70),
              0 0 0 1px rgba(0, 168, 228, .10) !important;
  position: relative;
  overflow: hidden;
}
html.dx-login main section.bg-white::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%);
}

/* ── los campos ─────────────────────────────────────────────────────────── */
html.dx-login label {
  color: #46617D !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
}
html.dx-login input[type='email'],
html.dx-login input[type='text'],
html.dx-login input[type='password'] {
  height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid #DDE3E9 !important;
  background: #FBFCFD !important;
  font-size: .97rem !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
html.dx-login input:hover { border-color: rgba(0, 168, 228, .55) !important; }
html.dx-login input:focus {
  border-color: #00A8E4 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(0, 168, 228, .16) !important;
  outline: none !important;
}

/* ── el botón ───────────────────────────────────────────────────────────── */
html.dx-login form button[type='submit'],
html.dx-login form button.w-full {
  height: 47px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 26px -12px rgba(0, 168, 228, .85) !important;
  justify-content: center !important;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
html.dx-login form button[type='submit']:hover,
html.dx-login form button.w-full:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(0, 168, 228, .95) !important;
}
html.dx-login form button[type='submit']:active { transform: translateY(0); }

/* ── enlaces y pie, ahora sobre navy ────────────────────────────────────── */
html.dx-login main section.bg-white a { color: #006C9C !important; }
html.dx-login main section.bg-white a:hover { color: #00A8E4 !important; }
html.dx-login .fixed a,
html.dx-login .fixed span,
html.dx-login .fixed p { color: #7E9CB8 !important; }

/* El título de fábrica dice "Iniciar sesión en Chatwoot". El nombre del
   software no le dice nada al cliente y ya se retiró del resto del panel,
   así que se sustituye desde la capa de presentación. */
html.dx-login main h2 { font-size: 0 !important; }
html.dx-login main h2::after {
  content: "Iniciar sesión";
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #FFFFFF;
}