/* ============================================================================
   VISTA IMMIGRATION · camuflar Chatwoot dentro del CRM  ·  2026-08-01
   ----------------------------------------------------------------------------
   TODO lo de este archivo cuelga de `.vista-embed`, una clase que vista-embed.js
   solo pone cuando Chatwoot va dentro del CRM. Abierto normal o desde la app
   del celular, ninguna de estas reglas se aplica.

   Colores tomados de pb_public/assets/vista-crm.css — si allá cambia la paleta,
   acá hay que copiarla a mano (son dos programas distintos, no comparten hoja).
   ========================================================================== */

/* Outfit completa. El skin del login ya la carga, pero solo en tres grosores
   (400/700/800) y Chatwoot usa mucho el 500 y el 600: sin ellos el navegador
   los "engorda" solo y el texto se ve sucio. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── 1. Fuera el segundo menú ──
   La barra lateral de Chatwoot sobra: el CRM ya tiene la suya al lado. La marca
   la pone el JS por la FORMA del elemento, no por su nombre de clase (los
   nombres cambian en cada actualización de Chatwoot; la forma no). */
.vista-embed [data-vista-barra="1"] { display: none !important; }

/* ── 1b. Fuera la columna de datos del contacto ──
   Chatwoot muestra a la derecha lo que sabe del contacto: nombre, teléfono y
   poco más. El CRM pone en ese mismo sitio la suya, que además sabe la etapa,
   el asesor, lo pendiente y la cita. Dos columnas de datos, una pegada a la
   otra, es justo el desorden que la barra del CRM viene a resolver.
   Si el JS no la encuentra, no se esconde nada y se ven las dos: incómodo,
   nunca roto. */
.vista-embed [data-vista-derecha="1"] { display: none !important; }

/* ── 2. La letra del CRM ──
   Chatwoot viene con Inter; el CRM usa Outfit. Es el detalle que más delata
   que son dos programas. La fuente ya la carga el skin del login. */
.vista-embed,
.vista-embed body,
.vista-embed input,
.vista-embed textarea,
.vista-embed select,
.vista-embed button,
.vista-embed [contenteditable] {
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* ── 3. El azul ──
   Chatwoot usa #2781f6 y Vista #2E63F6: se parecen, pero puestos al lado se
   nota. Ese azul está escrito fijo dentro de Chatwoot (no es una variable), así
   que toca pisar las ocho clases que lo usan. Si una actualización agrega una
   novena, se verá con el azul viejo — molesto, nada más. */
.vista-embed .bg-n-brand        { background-color: #2E63F6 !important; }
.vista-embed .bg-n-brand\/10    { background-color: rgba(46, 99, 246, .10) !important; }
.vista-embed .bg-n-brand\/5     { background-color: rgba(46, 99, 246, .05) !important; }
.vista-embed .text-n-brand      { color: #2E63F6 !important; }
.vista-embed .border-n-brand,
.vista-embed .border-t-n-brand  { border-color: #2E63F6 !important; }
.vista-embed .ring-n-brand      { --tw-ring-color: #2E63F6 !important; }
.vista-embed .outline-n-brand   { outline-color: #2E63F6 !important; }

/* ── 4. El fondo ──
   Esta sí es una variable de Chatwoot, así que basta con cambiarla y todo lo
   que la usa se acomoda solo. Va en tripleta de rojo/verde/azul porque así la
   consume Tailwind. #FFFFFF = el mismo blanco de las tarjetas del CRM. */
.vista-embed { --background-color: 255 255 255; }

/* ── 5. Que no se vea el borde del marco ──
   El CRM ya dibuja su tarjeta alrededor. Si Chatwoot pinta la suya por dentro,
   quedan dos marcos, uno pegado al otro. */
.vista-embed body { border: 0 !important; background: #ffffff; }

/* ── 6. Barras de desplazamiento como las del CRM ──
   Detalle chico y muy delator: las del CRM son finas y grises. */
.vista-embed *::-webkit-scrollbar { width: 10px; height: 10px; }
.vista-embed *::-webkit-scrollbar-thumb {
  background: #BAC4D6; border-radius: 8px; border: 2px solid #ffffff;
}
.vista-embed *::-webkit-scrollbar-thumb:hover { background: #8A93A6; }
.vista-embed *::-webkit-scrollbar-track { background: transparent; }