/* ---------------------------------------------------------------------------
* Chatwoot con la identidad de Estudio Diablo.
*
* Se inyecta con nginx en el HTML (ver vps/nginx/default.conf): NO toca el
* codigo de la aplicacion. Si una version futura de Chatwoot renombra una
* clase, se pierde el efecto y nada se rompe.
*
* Paleta y tipografia leidas de estudiodiablo.com.ar el 04-sep-2026:
* fondos #0A0A0A · #141414 · #1E1E1E · #242424 borde #2A2A2A
* texto #FFFFFF y #A8A8A8
* acento #FF3D40
* fuentes Outfit (texto) · Bebas Neue (titulos)
*
* DOS MECANISMOS DISTINTOS, y la diferencia importa:
*
* 1. Los FONDOS son variables CSS (--slate-*, --surface-*, --solid-*), asi que
* se retinta toda la interfaz redefiniendolas. Los de Chatwoot venian con
* tinte azul —--solid-3 era 44 45 54— y de ahi que se viera "negro con
* azul". Los del estudio son grises neutros puros.
*
* 2. El ACENTO esta compilado como literal rgb(39, 129, 246), no como var().
* Es la trampa de Tailwind v4: pisar --blue-9 no alcanza. Hay que
* sobreescribir utilidad por utilidad, y son las reglas del final, que
* fueron GENERADAS leyendo la hoja de estilos compilada, no escritas a
* mano. El metodo esta documentado en chatwoot/branding.css.
*
* ⚠️ Sobre el rojo como acento: en una interfaz el rojo suele significar
* "destructivo". Se usa igual porque es el color de accion del sitio del
* estudio y fue un pedido explicito. Si en uso real se confunde el boton de
* enviar con uno de borrar, cambiar ROJO_RGB en el generador y regenerar.
* --------------------------------------------------------------------------- */
/* --- 1) tipografia -------------------------------------------------------- */
/* La hoja de Google Fonts la inyecta nginx como , no con @import: un
@import bloquea el render hasta que baja, un link carga en paralelo. */
body,
body input,
body textarea,
body button,
body select {
font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Chatwoot no deja la fuente solo en body: tiene DIEZ clases utilitarias que
imponen Inter cada una, y le ganan a la herencia. Sin pisarlas por nombre,
media interfaz seguia en Inter y la otra mitad en Outfit — se notaba. */
.font-inter,
.font-interDisplay,
.text-body-main,
.text-body-para,
.text-heading-1,
.text-heading-2,
.text-heading-3,
.text-label,
.text-label-small,
.text-button {
font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* Bebas Neue es de titulo: condensada y solo tiene mayusculas. Sirve para los
encabezados, no para texto corrido ni para nombres de contacto. */
body h1,
body h2,
body .text-3xl,
body .text-2xl {
font-family: "Bebas Neue", "Outfit", sans-serif;
letter-spacing: 0.02em;
}
/* --- las secciones del sidebar, que se distingan de sus items --------------- */
/* Hay dos tipos de encabezado y hay que atacar los dos:
· los de primer nivel (Mi bandeja de entrada, Conversaciones) son divs con
la clase .text-body-main
· los anidados (Carpetas, Equipos, Canales, Etiquetas) son botones dentro
de un contenedor .sidebar-section
En los anidados hay que poner el tamaño tambien en los hijos: la hoja del
texto lleva `text-sm`, que le gana al font-size heredado del boton. */
/* La jerarquia va por PESO Y COLOR, no por caja.
Bebas Neue en mayuscula con tracking se probó y hace ruido acá: funciona
para un titulo suelto, no para cinco encabezados apilados en una columna de
200px. Queda reservada para los titulos del area de contenido, que son
cortos y van solos.
Acá: Outfit 600 en los encabezados contra 400 en los items. Distingue igual
y no grita. */
nav .text-body-main {
font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0;
color: rgb(237 238 240);
}
[class*="sidebar-section"] > button,
[class*="sidebar-section"] > button > * {
font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0;
}
/* Y los items debajo quedan en Outfit, un punto mas chicos: el contraste de
fuente es lo que separa la seccion de su contenido. */
nav a .text-sm:not(.text-body-main),
nav li .text-sm:not(.text-body-main) {
font-family: "Outfit", sans-serif;
font-weight: 400;
letter-spacing: 0;
}
/* El `:not(.text-body-main)` no es adorno: "Conversaciones" es un encabezado y
lleva `text-sm` ademas de `text-body-main`, asi que esta regla —pensada para
los items— le ganaba y lo devolvia a Outfit. "Mi bandeja de entrada", que no
lleva `text-sm`, si quedaba en Bebas. Dos encabezados hermanos con distinta
tipografia, por una regla propia. */
/* --- 2) los grises del estudio, por variable ------------------------------ */
/* Va tambien en :root, no solo en body.dark, porque la pagina de LOGIN no
lleva la clase `dark` — se veia clara y con el degradado de marca en rosa.
Al definir la paleta en los dos lados, la interfaz es oscura siempre, que es
lo pedido: negro-gris como el sitio del estudio. */
:root,
.dark,
.dark .widget-wrapper {
--background-color: 16 16 16;
--surface-1: 10 10 10;
--surface-2: 20 20 20;
--surface-3: 25 25 25;
--surface-active: 30 30 30;
--solid-1: 20 20 20;
--solid-2: 30 30 30;
--solid-3: 36 36 36;
--solid-active: 42 42 42;
--slate-1: 10 10 10;
--slate-2: 20 20 20;
--slate-3: 25 25 25;
--slate-4: 30 30 30;
--slate-5: 36 36 36;
--slate-6: 42 42 42;
--slate-7: 56 56 56;
--slate-8: 78 78 78;
--slate-9: 100 100 100;
--slate-10: 128 128 128;
--slate-11: 168 168 168;
--slate-12: 255 255 255;
--alpha-1: 20, 20, 20, .85;
--alpha-2: 255, 255, 255, .07;
--alpha-3: 255, 255, 255, .11;
}
/* El fondo de la ventana, que Chatwoot deja transparente */
:root, .dark {
background-color: rgb(16 16 16);
}
/* --- 3) el login: quien construyo esto ------------------------------------ */
/* El logo se reemplaza sirviendo /brand-assets/logo.svg desde nginx, asi que
aca solo se acomoda y se agrega la firma. */
.max-w-5xl.mx-auto:has(> img[src*="brand-assets"]) {
position: relative;
}
.max-w-5xl.mx-auto:has(> img[src*="brand-assets"])::after {
content: "Sistema desarrollado por Estudio Diablo · estudiodiablo.com.ar";
display: block;
margin-top: 0.75rem;
text-align: center;
font-family: "Outfit", sans-serif;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.04em;
color: rgb(168 168 168);
}
/* El logo, reemplazado por CSS y no solo por la URL.
Por que: aunque nginx sirva el archivo del estudio en /brand-assets/logo*,
el navegador se queda con la imagen que ya tenia cacheada y no la vuelve a
pedir — el favicon cambia (lo declara el HTML, que se reinyecta) y el logo
no. `content` en un lo reemplaza en el render, y como esta hoja va
versionada, el cambio entra si o si. */
img[src*="brand-assets/logo"] {
content: url("/estudio/logo.svg");
}
/* El del login, mas grande: es el unico momento de identidad de la pantalla.
Va ACOTADO al contenedor del login: la regla sin acotar tambien agarraba el
del sidebar, que vive en 16px, y lo deformaba a 24x44. */
.max-w-5xl.mx-auto > img[src*="brand-assets/logo"],
body .max-w-5xl > img[src*="brand-assets/logo"] {
height: 2.75rem !important;
width: auto !important;
max-width: none !important;
}
/* --- 3b) el encabezado del sidebar: logo mas grande y espacio ordenado ---- */
/* Era espacio muerto: logo de 16px en una caja de 24 y el nombre pegado al
borde. Ahora el bloque respira, el logo se lee, y es el boton de home — el
clic lo engancha `home-clickeable.js`, porque CSS no puede hacerlo. */
div:has(> div > img[src*="brand-assets/logo"]) {
padding: 0.5rem 0.625rem !important;
gap: 0.625rem !important;
}
/* El clickeable es SOLO el logo, no toda la fila: el nombre de la cuenta es un
boton propio de Chatwoot (abre el menu de cuenta) y no hay que pisarlo.
Ademas "el logo lleva al home" es el patron que la gente ya conoce. */
div:has(> img[src*="brand-assets/logo"]) {
width: 2rem !important;
height: 2rem !important;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 120ms ease, transform 120ms ease;
}
div:has(> img[src*="brand-assets/logo"]):hover {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.06);
}
img[src*="brand-assets/logo"] {
width: 1.625rem !important;
height: 1.625rem !important;
}
/* Una linea que cierra el bloque y lo separa de la navegacion. Sin esto el
encabezado y el buscador se leen como una sola cosa amorfa. */
section:has(> div > div > img[src*="brand-assets/logo"]) {
padding-bottom: 0.5rem;
border-bottom: 1px solid rgb(42 42 42);
}
/* --- 3c) los controles del listado de conversaciones ---------------------- */
/* Iconos de 12px y avatar de 16px, y son justo los que dicen de quien es la
conversacion y en que estado esta: prioridad, agente asignado y abierta o
resuelta. A ese tamaño hay que hacer hover para leerlos, que es lo contrario
de para que estan.
Se agrandan SOLO dentro del listado: los mismos iconos en la barra de
herramientas y en el panel de contacto estan bien como estan. */
.conversations-list-wrap [class*="i-lucide-"],
.conversations-list-wrap [class*="i-ph-"] {
width: 1.125rem !important;
height: 1.125rem !important;
}
/* El avatar del agente asignado. Se escala en vez de fijarle tamaño porque
lleva adentro el punto de disponibilidad, posicionado en porcentajes: si se
le cambia el ancho, el punto se despega. Escalar mueve las dos cosas juntas.
El margen compensa el ancho que gana, que el transform no reserva. */
.conversations-list-wrap [class*="group/avatar"] {
scale: 1.3;
transform-origin: left center;
margin-right: 0.4rem;
}
.conversations-list-wrap input[type="checkbox"] {
width: 1.0625rem !important;
height: 1.0625rem !important;
}
/* el numero de conversacion y los contadores, que acompañen */
.conversations-list-wrap .text-xs {
font-size: 0.8125rem;
}
/* --- 3d) las acciones de estado, con jerarquia y color -------------------- */
/* "Resolver" era un boton gris igual a todos los demas, cuando es LA accion
que cierra la conversacion. Ahora tiene peso visual, y las opciones del
desplegable se distinguen por lo que significan.
El marcador `data-estudio-op` lo pone `acciones-ui.js` leyendo el TEXTO del
boton: las clases de Tailwind son ilegibles y cambian entre versiones, el
texto no.
El verde y no el rojo: resolver no es destructivo, es completar. En rojo se
leeria como "borrar", que es exactamente el error que hay que evitar en un
boton que se aprieta cien veces por dia. */
[data-estudio-op="ok"] {
background-color: rgb(30 122 68) !important;
color: #FFFFFF !important;
font-weight: 600 !important;
outline-color: rgb(38 148 84) !important;
}
[data-estudio-op="ok"]:hover {
background-color: rgb(36 143 80) !important;
}
/* La flecha del desplegable comparte el color pero un tono mas oscuro, para
que se lea como parte del mismo boton y no como otro boton. */
[data-estudio-op="ok"][data-estudio-flecha] {
background-color: rgb(24 100 55) !important;
}
[data-estudio-op="ok"][data-estudio-flecha]:hover {
background-color: rgb(30 122 68) !important;
}
/* Las otras opciones del menu: color por significado, no por decoracion. */
[data-estudio-op="espera"] {
color: #F5C518 !important; /* queda esperando algo: el mismo ambar del resto */
}
[data-estudio-op="apagado"] {
color: rgb(128 128 128) !important; /* silenciar: apagado, literal */
}
[data-estudio-op="neutro"] {
color: rgb(237 238 240) !important; /* reabrir: sin carga, es volver atras */
}
/* --- 4) lo funcional que ya probamos en el laboratorio -------------------- */
/* Lo desatendido en amarillo: es lo que reclama atencion, y el amarillo se
reserva para eso. No se toca aunque el acento sea rojo. */
a[href*="unattended"],
a[href*="unattended"] span {
color: #F5C518 !important;
font-weight: 600;
}
/* El celeste que sobrevive del tema original no viene de una variable: es un
hex literal en la clase utilitaria. Es el link de "Anadir etiquetas". */
.text-\[\#7EB6FF\] {
color: #F5C518 !important;
}
/* El acceso al panel de contacto: era una burbuja de 32px con un icono de
persona, sin etiqueta ni tooltip, y es la puerta a las etiquetas y los
atributos, que es el trabajo diario del vendedor. */
div:has(> button:has(.i-ph-user-bold)) {
left: auto !important;
width: auto !important;
}
button:has(.i-ph-user-bold) {
width: auto !important;
white-space: nowrap;
height: auto !important;
min-height: 2.25rem;
padding: 0.375rem 0.75rem !important;
border-radius: 0.5rem !important;
background: rgba(245, 197, 24, 0.12) !important;
outline-color: rgba(245, 197, 24, 0.5) !important;
}
button:has(.i-ph-user-bold)::after {
content: "Contacto";
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
color: #F5C518;
white-space: nowrap;
}
button:has(.i-ph-user-bold) .i-ph-user-bold {
width: 1.0625rem;
height: 1.0625rem;
color: #F5C518;
}
button:has(.i-ph-user-bold):hover {
background: rgba(245, 197, 24, 0.22) !important;
outline-color: rgba(245, 197, 24, 0.8) !important;
}
/* Las etiquetas, al tope del panel: estaban al fondo, despues de Agente,
Equipo y Prioridad, o sea que habia que scrollear para llegar a lo que mas
se usa. El contenedor es display:block, asi que `order` solo no alcanza. */
div:has(> .sidebar-labels-wrap) {
display: flex !important;
flex-direction: column;
}
div:has(> .sidebar-labels-wrap) > div.overflow-auto { order: -2; }
div:has(> .sidebar-labels-wrap) > .sidebar-labels-wrap { order: -1; }
/* Piezas de Chatwoot que este circuito no usa. Se esconden para no ofrecerle
al vendedor puertas que no llevan a ninguna parte. */
nav li:has(.i-woot-captain),
nav li:has(a[href*="captain"]),
nav li:has(a[href*="/voice"]),
nav li:has(a[href*="portals"]) {
display: none !important;
}
/* --- 5) el acento: 51 reglas GENERADAS, no escritas a mano --------------- */
/* Chatwoot compila su azul de marca como literal, asi que hay que pisar cada
utilidad. Para regenerar tras actualizar Chatwoot, ver el encabezado. */
:root, .dark {
--blue-9: 255 61 64;
--border-blue: 255 61 64;
}
.\!outline-n-brand { outline-color: rgb(255, 61, 64) !important; }
.\!shadow-\[var\(--widget-color\,\#2781f6\)\] { --tw-shadow-color: rgb(255, 61, 64) !important; }
.after\:bg-n-brand::after { background-color: rgb(255, 61, 64); }
.before\:\!border-t-n-brand::before { border-top-color: rgb(255, 61, 64) !important; }
.before\:bg-n-brand::before { background-color: rgb(255, 61, 64); }
.bg-\[\#2781F6\] { background-color: rgb(255, 61, 64); }
.bg-n-brand\/10 { background-color: rgba(255, 61, 64, 0.1); }
.bg-n-brand\/20 { background-color: rgba(255, 61, 64, 0.2); }
.bg-n-brand\/5 { background-color: rgba(255, 61, 64, 0.05); }
.bg-n-brand { background-color: rgb(255, 61, 64); }
.border-n-brand\/50 { border-color: rgba(255, 61, 64, 0.5); }
.border-n-brand { border-color: rgb(255, 61, 64); }
.border-t-n-brand { border-top-color: rgb(255, 61, 64); }
.checked\:bg-n-brand:checked { background-color: rgb(255, 61, 64); }
.checked\:border-n-brand:checked { border-color: rgb(255, 61, 64); }
.dark\:\!outline-n-brand:is(.dark *) { outline-color: rgb(255, 61, 64) !important; }
.dark\:bg-n-brand\/10:is(.dark *) { background-color: rgba(255, 61, 64, 0.1); }
.dark\:border-n-brand:is(.dark *) { border-color: rgb(255, 61, 64); }
.dark\:checked\:bg-n-brand:checked:is(.dark *) { background-color: rgb(255, 61, 64); }
.dark\:checked\:border-n-brand:checked:is(.dark *) { border-color: rgb(255, 61, 64); }
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) { outline-color: rgb(255, 61, 64); }
.dark\:focus\:outline-n-brand:focus:is(.dark *) { outline-color: rgb(255, 61, 64); }
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) { outline-color: rgb(255, 61, 64); }
.dark\:hover\:text-n-brand:hover:is(.dark *) { color: rgb(255, 61, 64); }
.dark\:ring-n-brand:is(.dark *) { --tw-ring-color: rgba(255, 61, 64, 1); }
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(255, 61, 64, 0.2); }
.focus-visible\:outline-n-brand:focus-visible { outline-color: rgb(255, 61, 64); }
.focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgba(255, 61, 64, 1); }
.focus-within\:outline-n-brand:focus-within { outline-color: rgb(255, 61, 64); }
.focus-within\:ring-n-brand:focus-within { --tw-ring-color: rgba(255, 61, 64, 1); }
.focus\:border-n-brand:focus { border-color: rgb(255, 61, 64); }
.focus\:outline-n-brand:focus { outline-color: rgb(255, 61, 64); }
.focus\:ring-n-brand:focus { --tw-ring-color: rgba(255, 61, 64, 1); }
.from-n-brand\/15 { --tw-gradient-from: rgba(255, 61, 64, 0.15); }
.from-n-brand\/15 { --tw-gradient-to: rgba(255, 61, 64, 0); }
.group:focus-within .group-focus-within\:text-n-brand { color: rgb(255, 61, 64); }
.group:hover .group-hover\:bg-n-brand { background-color: rgb(255, 61, 64); }
.has-\[\:focus\]\:outline-n-brand:has(:focus) { outline-color: rgb(255, 61, 64); }
.hover\:bg-n-brand\/10:hover { background-color: rgba(255, 61, 64, 0.1); }
.hover\:bg-n-brand\/80:hover { background-color: rgba(255, 61, 64, 0.8); }
.hover\:border-n-brand:hover { border-color: rgb(255, 61, 64); }
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgba(255, 61, 64, 0.2); }
.hover\:text-n-brand:hover { color: rgb(255, 61, 64); }
.indeterminate\:bg-n-brand:indeterminate { background-color: rgb(255, 61, 64); }
.indeterminate\:border-n-brand:indeterminate { border-color: rgb(255, 61, 64); }
.outline-n-brand { outline-color: rgb(255, 61, 64); }
.prose-a\:text-n-brand :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(255, 61, 64); }
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(255, 61, 64); }
.ring-n-brand { --tw-ring-color: rgba(255, 61, 64, 1); }
.text-link { color: rgb(255, 61, 64); }
.text-n-brand { color: rgb(255, 61, 64); }