/* ============================================================================
Masa Térmica — theme override para Chatwoot (self-hosted, v4.12.x)
"Fuego y Dragones": base oscura cálida + acento fuego + tipografía MT.
NO se toca la imagen de Chatwoot. Este archivo se sirve como estático y se
inyecta con un vía Apache (mod_substitute). Ver
infra/chatwoot/apache/chat-mt-brand.conf.snippet y
.deploy/chatwoot-vps-setup.md. 100% reversible: borrar el lo revierte.
Paleta fuente de verdad: shared/styles/tokens.js
fuego #E8603C (rgb 232 96 60) · ámbar #F5A95C · terracota #C45D3E
bg #1A1714 · surface #272220 · hover #322B26 · text #F0EBE4
Fuentes: DM Sans (UI), Fraunces (títulos), JetBrains Mono (datos).
Chatwoot v4 usa escalas Radix (--slate-*, --iris-*, --amber-*, --gray-*,
--solid-*) en formato "R G B", y un acento de marca HARDCODEADO como
#2781f6 / rgb(39 129 246) en utilidades Tailwind ".*n-brand". Repintamos
ambos caminos.
============================================================================ */
/* ---- Tipografía de marca ------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=JetBrains+Mono:wght@400;600&display=swap");
/* Chatwoot pide "Inter"/"InterDisplay"; los redefinimos para servir DM Sans /
Fraunces sin depender de reglas internas. src via Google Fonts CSS2. */
html, body, button, input, select, textarea, [class*="font-"],
.prose, .text-sm, .text-base, .text-xs {
font-family: "DM Sans", -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3, .text-3xl, .text-2xl, .text-xl,
[class*="display"], .page-title, .text-heading {
font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
letter-spacing: -0.01em;
}
code, pre, kbd, samp, .font-mono, [class*="font-mono"], [class*="mono"] {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, monospace !important;
}
/* ---- Acento de marca: azul #2781f6 -> fuego #E8603C ---------------------- */
/* Fuego sólido para uso general en propiedades que solo aplican donde existe
la clase (color de texto, borde, ring, outline, fill). El leve over-reach
en estados hover para estas propiedades es cosmético y on-brand. */
[class*="text-n-brand"] { color: #E8603C !important; }
[class*="border-n-brand"] { border-color: #E8603C !important; }
[class*="fill-n-brand"] { fill: #E8603C !important; }
[class*="ring-n-brand"] { --tw-ring-color: #E8603C !important; }
[class*="outline-n-brand"]{ outline-color: #E8603C !important; }
/* background-color: separamos "siempre visible" de "solo en estado" para no
pintar de fuego botones que normalmente son transparentes. */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.before\:bg-n-brand::before,
.after\:bg-n-brand::after,
.dark\:bg-n-brand,
.dark\:checked\:bg-n-brand:checked {
background-color: #E8603C !important;
}
.hover\:bg-n-brand:hover,
.hover\:enabled\:bg-n-brand:hover:enabled,
.focus-visible\:bg-n-brand:focus-visible,
.group:hover .group-hover\:bg-n-brand {
background-color: #E8603C !important;
}
/* Botón primario sólido: degradé de fuego + texto oscuro + glow (imita
shared/components/ui.jsx GRAD.fuego). Solo elementos interactivos. */
button.bg-n-brand,
a.bg-n-brand,
[role="button"].bg-n-brand {
background-image: linear-gradient(135deg, #E8603C, #F5A95C) !important;
color: #231205 !important;
box-shadow: 0 0 24px rgba(232, 96, 60, 0.22) !important;
border-color: transparent !important;
}
button.bg-n-brand:hover,
a.bg-n-brand:hover,
[role="button"].bg-n-brand:hover {
filter: brightness(1.05);
box-shadow: 0 0 40px rgba(232, 96, 60, 0.32), 0 0 12px rgba(245, 169, 92, 0.22) !important;
}
/* ---- Escala Radix "iris" (acento secundario) -> fuego ------------------- */
:root {
--iris-1: 254 250 248; --iris-2: 253 244 240; --iris-3: 252 232 224;
--iris-4: 250 218 205; --iris-5: 247 202 184; --iris-6: 242 182 160;
--iris-7: 235 156 128; --iris-8: 226 124 92; --iris-9: 232 96 60;
--iris-10: 219 84 50; --iris-11: 197 93 62; --iris-12: 90 34 20;
--solid-iris: 250 218 205;
}
.dark {
--iris-1: 26 20 18; --iris-2: 33 24 20; --iris-3: 58 30 20;
--iris-4: 78 34 20; --iris-5: 94 42 26; --iris-6: 112 54 36;
--iris-7: 138 68 46; --iris-8: 176 84 56; --iris-9: 232 96 60;
--iris-10: 224 110 76; --iris-11: 240 150 110; --iris-12: 255 216 198;
--solid-iris: 58 30 20;
}
/* ---- Modo oscuro cálido: neutraliza el gris frío hacia los marrones MT --- */
/* Solo dentro de .dark, para no teñir el modo claro. Recomendado a los
agentes: elegir apariencia "Dark" en su perfil para ver la estética MT. */
.dark {
/* superficie principal (bg #1A1714 -> text #F0EBE4) */
--slate-1: 26 23 20; --slate-2: 33 29 26; --slate-3: 39 34 32;
--slate-4: 46 40 36; --slate-5: 50 43 38; --slate-6: 60 52 46;
--slate-7: 74 64 57; --slate-8: 96 84 75; --slate-9: 120 108 98;
--slate-10: 150 138 128;--slate-11: 190 182 172;--slate-12: 240 235 228;
/* "solid" y "gray" también manejan fondos/superficies */
--solid-1: 26 23 20; --solid-2: 33 29 26; --solid-3: 39 34 32;
--solid-active: 50 43 38;
--gray-1: 26 23 20; --gray-2: 33 29 26; --gray-3: 39 34 32;
--gray-4: 46 40 36; --gray-5: 50 43 38; --gray-6: 60 52 46;
--gray-7: 74 64 57; --gray-8: 96 84 75; --gray-9: 120 108 98;
--gray-10: 150 138 128; --gray-11: 190 182 172; --gray-12: 240 235 228;
--background-color: 26 23 20;
--card-color: 39 34 32;
}
/* Resplandor de marca sutil en el tope del layout (la "brasa" MT).
No intrusivo: solo un tinte cálido en el borde superior del dark. */
.dark body::before {
content: "";
position: fixed;
inset: 0 0 auto 0;
height: 40vh;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse 90% 55% at 50% -10%,
rgba(232, 96, 60, 0.10), transparent 60%);
}