/* ============================================================================
   intercom-test.css  —  Chatwoot v4.12.1  →  "WhatsApp clásico"  (v6)
   Artori Tech · Solo estética. Cero cambios de layout / funcionalidad.

   v6: el hover del menu usaba bg-gradient-to-r (degrade). Lo anulamos
       (background-image:none) y ponemos verde solido parejo.
   ============================================================================ */

:root {
  --wa-rail:      #075E54;
  --wa-rail-txt:  #d8efe8;
  --wa-rail-hi:   #ffffff;
  --wa-rail-hover:#0b6e62;
  --wa-teal:      #008069;
  --wa-hover:     #0b8f76;
  --wa-out:       #DCF8C6;
  --wa-in:        #FFFFFF;
  --wa-chat-bg:   #ECE5DD;
  --wa-panel:     #FFFFFF;
  --wa-header:    #F0F2F5;
  --wa-text:      #111B21;
  --wa-text-soft: #667781;
  --wa-border:    #E9EDEF;
}

/* ========================================================================== */
/*  CAPA 1 — Tema CLARO + acento verde (tokens reales)                        */
/* ========================================================================== */
:root,
html.dark,
body.dark,
.dark {
  color-scheme: light !important;

  --background-color: 255 255 255 !important;
  --surface-active: 235 235 235 !important;

  --gray-1:  24  24  24 !important;
  --gray-2:  40  40  40 !important;
  --gray-3:  60  60  60 !important;
  --gray-4:  90  90  90 !important;
  --gray-5: 110 110 110 !important;
  --gray-6: 130 130 130 !important;
  --gray-7: 170 170 170 !important;
  --gray-8: 200 200 200 !important;
  --gray-9: 215 215 215 !important;
  --gray-10:230 230 230 !important;
  --gray-11:240 240 240 !important;
  --gray-12:248 248 248 !important;

  --surface-1: 255 255 255 !important;
  --surface-2: 240 242 245 !important;
  --surface-3: 236 238 240 !important;

  --slate-1:  251 252 253 !important;
  --slate-2:  248 249 250 !important;
  --slate-3:  241 243 245 !important;
  --slate-4:  236 238 240 !important;
  --slate-9:  136 144 150 !important;
  --slate-10: 126 134 140 !important;
  --slate-11: 104 112 118 !important;
  --slate-12:  17  24  28 !important;

  --n-brand: 0 128 105 !important;
  --brand:   0 128 105 !important;
  --color-woot: #008069 !important;

  --blue-9:  0 128 105 !important;
  --blue-10: 0 120 98 !important;
  --blue-11: 7 94 84 !important;
  --text-blue: 0 128 105 !important;
}

/* ========================================================================== */
/*  CAPA 2 — Identidad WhatsApp                                               */
/* ========================================================================== */

/* ---- Rail verde --------------------------------------------------------- */
aside.bg-n-background {
  background-color: var(--wa-rail) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

aside.bg-n-background > nav,
aside.bg-n-background > nav a,
aside.bg-n-background > nav span,
aside.bg-n-background > nav .text-n-slate-10,
aside.bg-n-background > nav .text-n-slate-11,
aside.bg-n-background > nav .text-n-slate-12 {
  color: var(--wa-rail-txt) !important;
}
aside.bg-n-background #sidebar-account-switcher span,
aside.bg-n-background section:last-of-type button > div .text-n-slate-12 {
  color: var(--wa-rail-hi) !important;
}
aside.bg-n-background section:last-of-type button > div .text-n-slate-11 {
  color: var(--wa-rail-txt) !important;
}

aside.bg-n-background .bg-gradient-to-t {
  background-image: none !important;
  background: transparent !important;
}

/* ----- HOVER SIN DEGRADE: matar el gradiente y poner verde solido -------- */
/* Los items del menu usan hover:bg-gradient-to-r ... -> lo anulamos.        */
aside.bg-n-background > nav a:hover,
aside.bg-n-background > nav [role="button"]:hover,
aside.bg-n-background section:last-of-type button:hover {
  background-image: none !important;
  background-color: var(--wa-rail-hover) !important;
  color: var(--wa-rail-hi) !important;
}
aside.bg-n-background > nav a:hover *,
aside.bg-n-background section:last-of-type button:hover * {
  color: var(--wa-rail-hi) !important;
}
aside.bg-n-background > nav .active,
aside.bg-n-background > nav [aria-current="page"] {
  background-image: none !important;
  background-color: rgba(255,255,255,0.14) !important;
  color: var(--wa-rail-hi) !important;
}

/* Boton Buscar y redactar: fondo claro, texto/icono oscuro */
aside.bg-n-background a[href*="/search"],
aside.bg-n-background section:first-of-type .bg-n-button-color {
  background-color: #ffffff !important;
}
aside.bg-n-background a[href*="/search"],
aside.bg-n-background a[href*="/search"] span,
aside.bg-n-background section:first-of-type .bg-n-button-color,
aside.bg-n-background section:first-of-type .bg-n-button-color span {
  color: var(--wa-text-soft) !important;
}

/* Popups/menus anclados: fondo claro */
.bg-n-solid-1, .bg-n-solid-2, .bg-n-solid-3 { background-color: #ffffff !important; }

/* ---- Hover en el area clara: sin degrade, verde sutil ------------------- */
.hover\:bg-n-alpha-1:hover,
.hover\:bg-n-alpha-2:hover,
.hover\:enabled\:bg-n-alpha-2:hover,
[class*="hover:bg-gradient"]:hover {
  background-image: none !important;
  background-color: rgba(0,128,105,0.12) !important;
}

/* ---- Superficies principales -------------------------------------------- */
.bg-n-surface-1 { background-color: var(--wa-panel) !important; }
.bg-n-surface-2 { background-color: var(--wa-header) !important; }
.conversations-list-wrap { background-color: var(--wa-panel) !important; }

.conversation-panel,
.conversation-panel.bg-n-surface-1 {
  background-color: var(--wa-chat-bg) !important;
  background-image: radial-gradient(circle, rgba(0,0,0,0.025) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}

.border-n-weak   { border-color: var(--wa-border) !important; }
.border-n-strong { border-color: #D1D7DB !important; }

/* ---- Burbujas ----------------------------------------------------------- */
.right-bubble {
  background-color: var(--wa-out) !important;
  color: var(--wa-text) !important;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.13) !important;
}
.right-bubble * { color: var(--wa-text) !important; }

.left-bubble,
.message-bubble-container.justify-start [data-bubble-name] {
  background-color: var(--wa-in) !important;
  color: var(--wa-text) !important;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.13) !important;
}
.left-bubble *,
.message-bubble-container.justify-start [data-bubble-name] * {
  color: var(--wa-text) !important;
}

/* ---- Acentos / botones verdes ------------------------------------------- */
.bg-n-solid-blue:not(.right-bubble),
.bg-n-brand:not(.right-bubble) { background-color: var(--wa-teal) !important; color: #FFFFFF !important; }
.bg-n-solid-blue:not(.right-bubble):hover,
.bg-n-brand:not(.right-bubble):hover { background-color: var(--wa-hover) !important; }

.text-n-blue, .text-n-blue-11, a.text-n-blue { color: var(--wa-teal) !important; }

/* ---- Scrollbars --------------------------------------------------------- */
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(11,20,26,.20); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }