/* ===================================================================
   Enfocados en Dios TV — tema del CRM  (v4 "next" design system)
   Chatwoot v4 usa el sistema n-* (next). El color primario del
   dashboard es n-brand = #2781f6 (HARDCODEADO en theme/colors.js),
   NO woot-500 (#3b9eff), que ya casi no se usa.
   =================================================================== */

:root {
  --edt-red: #dc2626;
  --edt-red-deep: #991b1b;
  --edt-gold: #d4af37;
}

/* ---------- 1. Variables Radix: cambia TODO lo basado en var(--blue-9) ----------
   Afecta: n-blue-9, accent, fill, outline, rings, bordes azules, etc.
   Formato obligatorio: canales RGB separados por espacio, SIN rgb().        */
:root,
.dark {
  --blue-9:  220 38 38;   /* #dc2626 */
  --blue-10: 185 28 28;   /* #b91c1c */
  --blue-11: 153 27 27;   /* #991b1b */
  --border-blue: 220, 38, 38, .5;
}

:root {
  --solid-blue:   254 226 226;  /* fondos suaves rojos */
  --solid-blue-2: 255 251 251;
  --text-blue:     69 10 10;
}

.dark {
  --solid-blue:   69 10 10;
  --solid-blue-2: 35 26 26;
  --text-blue:   254 226 226;
}

/* ---------- 2. n-brand: hardcodeado a #2781f6, hay que sobrescribir clase por clase ---------- */
.bg-n-brand,
.group-hover\:bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.dark\:checked\:bg-n-brand:checked:is(.dark *) {
  background-color: #dc2626 !important;
}
.bg-n-brand\/5                             { background-color: rgba(220,38,38,.05) !important; }
.bg-n-brand\/10,
.hover\:bg-n-brand\/10:hover,
.dark\:bg-n-brand\/10:is(.dark *)          { background-color: rgba(220,38,38,.10) !important; }
.focus-visible\:bg-n-brand\/20:focus-visible,
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgba(220,38,38,.20) !important; }
.hover\:bg-n-brand\/80:hover               { background-color: rgba(220,38,38,.80) !important; }
.before\:bg-n-brand:before,
.after\:bg-n-brand:after                  { background-color: #dc2626 !important; }

.text-n-brand,
.hover\:text-n-brand:hover,
.group-hover\:text-n-brand,
.group-focus-within\:text-n-brand,
.dark\:hover\:text-n-brand:hover:is(.dark *) {
  color: #dc2626 !important;
}

.border-n-brand,
.border-t-n-brand,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.focus\:border-n-brand:focus,
.dark\:border-n-brand:is(.dark *),
.dark\:checked\:border-n-brand:checked:is(.dark *) {
  border-color: #dc2626 !important;
}
.border-t-n-brand { border-top-color: #dc2626 !important; }

.outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within,
.dark\:focus\:outline-n-brand:focus:is(.dark *),
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) {
  outline-color: #dc2626 !important;
}

.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within,
.dark\:ring-n-brand:is(.dark *) {
  --tw-ring-color: #dc2626 !important;
}

/* ---------- 3. Componentes Vue con estilos scoped (data-v-*) ---------- */
[data-v-658da868] { background-color: #dc2626 !important; }
[data-v-c719f45f]:hover { background-color: #dc2626 !important; }
[data-v-8ea9a99b]:focus { border-color: #dc2626 !important; }
[data-v-577256f2] { background-color: #dc2626 !important; }

/* ---------- 4. Legacy woot-* (login v3 y restos del dashboard) ---------- */
.bg-woot-500                               { background-color: #dc2626 !important; }
.bg-woot-25                                { background-color: #fef2f2 !important; }
.text-woot-500, .text-woot-600,
.hover\:text-woot-500:hover,
.hover\:text-woot-700:hover,
.dark\:text-woot-500:is(.dark *)           { color: #dc2626 !important; }
.dark\:text-woot-50:is(.dark *)            { color: #fee2e2 !important; }
.border-woot-500                           { border-color: #dc2626 !important; }
.focus\:ring-woot-500:focus,
.dark\:focus\:ring-woot-500:focus:is(.dark *) { --tw-ring-color: #dc2626 !important; }
.focus-visible\:outline-woot-500:focus-visible { outline-color: #dc2626 !important; }
.hover\:bg-woot-600:hover                  { background-color: #991b1b !important; }

/* ---------- 5. Botón primario premium ---------- */
button.bg-n-brand, a.bg-n-brand,
button.bg-woot-500, a.bg-woot-500 {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  box-shadow: 0 2px 8px rgba(220,38,38,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  font-weight: 600 !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
button.bg-n-brand:hover, a.bg-n-brand:hover,
button.bg-woot-500:hover, a.bg-woot-500:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220,38,38,.38), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
button.bg-n-brand:active, button.bg-woot-500:active { transform: translateY(0); }

/* ---------- 6. Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(220,38,38,.25); border-radius: 6px; }