/* Overrides de Marce sobre el CSS del engine whatsapp_baileys (Phase 36).
Disciplina de decorador: este archivo se carga DESPUÉS de
whatsapp_baileys/whatsapp_chat.css y contiene (a) ajustes de encaje en el
shell (P36/P45, "fit-to-shell hygiene") y (b) el TEMA Marce sobre el gem
(Fase 49, re-apuntado a coral en P63): el re-mapeo azul→marce (y los
acentos yellow/cyan→marce de las acciones del show, spec §4) SÍ es
intencional — revierte la nota original de "nunca re-mapear utilidades
Tailwind"; el acento azul del gem dejó de ser divergencia conocida y se
convierte a marce-700, SIEMPRE con scope a las pantallas del gem (jamás
una utilidad global). NUNCA pegar aquí CSS del gem. El rojo/danger del gem
NO se toca (ya alineado con rose).
Los selectores usan los hooks del gem (clases semánticas wa-*, #qr-container,
img-fluid) o estructura propia de sus pantallas (:has() sobre los forms de
/whatsapp/sessions/:id — allow_browser :modern garantiza soporte de :has).
El scope de tema es main:has(nav > a[href^="/whatsapp/"]) — la barra de
tabs del gem, presente en TODAS sus pantallas dentro de main; ninguna
pantalla nativa de Marce renderiza esa nav dentro de main (los enlaces
/whatsapp/ de Marce viven en header/rail, fuera de main). */
/* Barra de tabs del gem (Cuenta/Sesiones/Chats/Webhooks): a 375 los cuatro
tabs exceden la columna (+64px de scroll de página). Que envuelvan dentro
de su propio contenedor; el borde inferior lo sigue dando la nav. */
main nav:has(> a[href^="/whatsapp/"]) {
flex-wrap: wrap;
}
/* Fase 45 (P2 heredado de la F44): el tab "Cuenta" del gem quedó MUERTO del
lado tenant — su ruta (/whatsapp/account/edit) responde 404 desde que la
cuenta es de plataforma y se administra solo en /admin. Ocultarlo por CSS
(decoración: el partial de tabs del gem no se toca). Solo afecta la nav de
tabs tenant del gem; las superficies admin no enlazan esa ruta. */
main nav:has(> a[href^="/whatsapp/"]) > a[href="/whatsapp/account/edit"] {
display: none;
}
/* Detalle de sesión: la fila "Detalles de la sesión" + acciones (Compartir/
Reiniciar/Cerrar/Eliminar, forms de button_to) no envuelve y a 375 los
botones chocan con el título (+162px). Envolver la fila (título arriba,
botones debajo) y también el propio grupo de botones. */
main div:has(> div > form.button_to[action^="/whatsapp/sessions/"]) {
flex-wrap: wrap;
row-gap: 0.5rem;
}
main div:has(> form.button_to[action^="/whatsapp/sessions/"]) {
flex-wrap: wrap;
row-gap: 0.5rem;
}
/* Fila del enlace compartido (input readonly + Copiar): un input en flex no
cede por debajo de su min-width intrínseco; permitir que encoja. */
main div[data-controller="clipboard"] input {
min-width: 0;
}
/* QR: el controlador Stimulus del gem inyecta ![]()
(clase
Bootstrap que el build Tailwind no define) con max-width:280px INLINE, así
que la imagen salía a su ancho natural (+4px a 768) y un max-width desde
hoja de estilos no puede ganarle al inline. `width` sí: la imagen escala a
su columna y el max-width inline del gem la sigue topando en 280px. */
main #qr-container img {
width: 100%;
height: auto;
}
/* ── Fase 49 (retarget P63): tema Marce (azul→coral) sobre las pantallas del
gem. El gem emite utilidades azules (bg-blue-600/hover:bg-blue-700 en
botones primarios, border-blue-500/600 + text-blue-600 en el ojo de la
fila y el tab activo, hover:bg-blue-50 en el ojo). Se re-mapean a los
tokens marce de la app (var(--color-marce-*) del build Tailwind, con
fallback hex de la escala P62) SOLO dentro del scope del gem. El rojo
(Eliminar) queda intacto a propósito (danger = rose, ya alineado). */
main:has(nav > a[href^="/whatsapp/"]) .bg-blue-600 {
background-color: var(--color-marce-700, #c64b2c);
}
main:has(nav > a[href^="/whatsapp/"]) .hover\:bg-blue-700:hover {
background-color: var(--color-marce-800, #a23e24);
}
main:has(nav > a[href^="/whatsapp/"]) .text-blue-600 {
color: var(--color-marce-700, #c64b2c);
}
main:has(nav > a[href^="/whatsapp/"]) .border-blue-500,
main:has(nav > a[href^="/whatsapp/"]) .border-blue-600 {
border-color: var(--color-marce-700, #c64b2c);
}
main:has(nav > a[href^="/whatsapp/"]) .hover\:bg-blue-50:hover {
background-color: var(--color-marce-50, #fef2ee);
}
/* Spec §4 (decisión ratificada): los acentos yellow (Reiniciar) y cyan
(Compartir QR) del show también se pliegan a marce — coral es el ÚNICO
acento de Marce, ningún hue nuevo. Scope extra por el button_to de la
acción, así estas reglas jamás tocan los badges de estado (esos tienen su
propio re-tinte P69, más abajo). */
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .border-yellow-500,
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .border-cyan-500 {
border-color: var(--color-marce-700, #c64b2c);
}
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .text-yellow-700,
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .text-cyan-600 {
color: var(--color-marce-700, #c64b2c);
}
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .hover\:bg-yellow-50:hover,
main:has(nav > a[href^="/whatsapp/"]) form.button_to[action^="/whatsapp/sessions/"] .hover\:bg-cyan-50:hover {
background-color: var(--color-marce-50, #fef2ee);
}
/* ── Fase 69 (revierte la nota "badges sin color, solo texto" de la F49): los
badges de estado del gem dejan el chrome saturado (bg-green-500/
bg-yellow-400/bg-gray-500 con text-white) y visten los chips suaves de
Marce — los MISMOS pares fondo-suave/texto-oscuro que ya usan los chips
nativos del admin (sesion_estado_chip / CLASES_ESTADO_SESION, AA sobre
fondo claro). Scope doble: las pantallas del gem (ambos layouts, tenant y
admin) Y el hook del badge, así ninguna otra utilidad verde/ámbar/gris se
ve tocada. Es CSS puro sobre la CLASE de estado: el server
(wb_status_badge_class) y el poll vivo de 15s (wb_status_class_map_json)
emiten las mismas utilidades, así que el re-tinte sobrevive cada
re-render sin JS. El rose/danger (Eliminar) no se toca. */
main:has(nav > a[href^="/whatsapp/"]) [data-whatsapp-status-target="badge"].bg-green-500 {
background-color: var(--color-emerald-50, #ecfdf5);
color: var(--color-emerald-700, #047857);
}
main:has(nav > a[href^="/whatsapp/"]) [data-whatsapp-status-target="badge"].bg-yellow-400 {
background-color: var(--color-amber-50, #fffbeb);
color: var(--color-amber-700, #b45309);
}
main:has(nav > a[href^="/whatsapp/"]) [data-whatsapp-status-target="badge"].bg-gray-500 {
background-color: var(--color-slate-100, #f1f5f9);
color: var(--color-slate-600, #475569);
}
/* Fase 49: los botones-ícono de acción por fila del índice de sesiones (ojo
= link de ver, papelera = button_to de eliminar) son px-2 py-1 text-xs —
muy por debajo del contrato responsive de 44px. Caja mínima 44×44
(2.75rem, spec §5) con el ícono centrado; el color del de eliminar (rojo)
no cambia. */
main:has(nav > a[href^="/whatsapp/"]) td > a[href^="/whatsapp/sessions/"],
main:has(nav > a[href^="/whatsapp/"]) td form.button_to[action^="/whatsapp/sessions/"] button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
}
/* El button_to de eliminar es un