/* ---------------------------------------------------------------------------
 * Chatwoot con la identidad de Hormiserv.
 *
 * 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 del CSS de hormiserv.com el 08-sep-2026, donde el
 * sitio nombra sus propias variables (nada estimado de una captura):
 *   morado   #44264d  (hover #5a3468)   -> la navegacion
 *   amarillo #eed500  (hover #ffe033)   -> el acento y los titulos
 *   fondos   derivados: gris con 18% de morado adentro, del 24 al 58
 *   texto    #FFFFFF y un gris claro apenas tenido
 *   fuente   'Myriad Pro', 'Source Sans 3' — Myriad no es webfont, asi que la
 *            que sirve de verdad por web es Source Sans 3
 *
 * EL REPARTO DE LOS FONDOS, que es una decision y no un detalle:
 *   · la NAVEGACION va en morado, como el nav del sitio
 *   · el INBOX queda en NEGRO con texto blanco. Es donde se lee texto corrido
 *     ocho horas por dia, y el morado a pantalla completa cansa; el negro da el
 *     maximo contraste y ademas hace que el morado se lea como navegacion.
 *
 * 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.
 *
 * ⚠️ El amarillo como acento OBLIGA a texto oscuro encima. Chatwoot pinta sus
 * botones de marca con `bg-n-brand` mas `text-white`: blanco sobre #EED500 da
 * un contraste de 1.6:1, o sea ilegible. La regla que lo arregla esta en la
 * seccion 1b y es el unico lugar de esta hoja donde el !important hace falta de
 * verdad — no es preferencia, es texto que no se ve.
 * --------------------------------------------------------------------------- */

/* --- 1) tipografia -------------------------------------------------------- */
/* La hoja de Google Fonts la inyecta nginx como <link>, 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: "Source Sans 3", 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 la nuestra — 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: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Los titulos del area de contenido: la fuente de Hormiserv en su peso mas
   fuerte, y en AMARILLO. Hormiserv usa el amarillo para lo que encabeza —el
   logo, los titulares del sitio— y sobre el negro del inbox tiene 11:1 de
   contraste, asi que se puede.
   Sin mayusculas ni tracking: se probo con Bebas y en la interfaz hace ruido.
   Un titular de home aguanta la mayuscula; cinco titulos de panel no. */
/* ⚠️ SOLO ENCABEZADOS DE VERDAD, no clases de tamano.
   Esta regla incluia tambien `.text-3xl` y `.text-2xl`, y eso es un TAMANO, no
   una jerarquia. En la bandeja pegaba en titulos reales y parecia correcto;
   en INFORMES, `.text-3xl` son los NUMEROS de las metricas — cada KPI salia
   amarillo. En oscuro se leia igual y por eso nadie lo vio; en claro daba
   1.58:1 sobre blanco, o sea invisible, justo en la pantalla del gerente.

   Y el color va por variable: amarillo sobre el fondo oscuro, morado en modo
   claro. Un titulo amarillo sobre un fondo claro no se lee por mas encabezado
   que sea. */
body h1,
body h2 {
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(var(--estudio-acento-texto));
}

/* --- 1b) texto oscuro sobre el amarillo ----------------------------------- */
/* Chatwoot pinta sus botones de marca con `bg-n-brand` MAS `text-white`.
   Blanco sobre #EED500 son 1.6:1: el boton queda amarillo con texto invisible.
   Es el unico !important justificado de esta hoja — no es una preferencia
   estetica, es texto que no se lee.
   Los selectores estan GENERADOS de los mismos pares que el acento: son las
   utilidades con background-color opaco y sin pseudo-elemento. Ver el
   comentario de `fondos_opacos` en el generador para por que el `::` importa. */

.bg-\[\#2781F6\],
.bg-\[\#2781F6\] * {
  color: rgb(68 38 77) !important;
}
.bg-n-brand,
.bg-n-brand * {
  color: rgb(68 38 77) !important;
}
.checked\:bg-n-brand:checked,
.checked\:bg-n-brand:checked * {
  color: rgb(68 38 77) !important;
}
.dark\:checked\:bg-n-brand:checked:is(.dark *),
.dark\:checked\:bg-n-brand:checked:is(.dark *) * {
  color: rgb(68 38 77) !important;
}
.group:hover .group-hover\:bg-n-brand,
.group:hover .group-hover\:bg-n-brand * {
  color: rgb(68 38 77) !important;
}
.indeterminate\:bg-n-brand:indeterminate,
.indeterminate\:bg-n-brand:indeterminate * {
  color: rgb(68 38 77) !important;
}

/* --- 1c) el morado de la navegacion --------------------------------------- */
/* La columna del sidebar es un <aside class="bg-n-background">. Esto se LEYO
   del DOM, no se deduzco: `nav` es solo la lista de items y no pinta el fondo,
   y el contenedor no es un div.

   ⚠️ DOS COSAS QUE COSTARON UNA RONDA ENTERA:
     · `:has()` ANIDADO NO EXISTE. `div:has(> section:has(...))` es un selector
       invalido.
     · Y un selector invalido en una lista separada por comas hace que el
       navegador descarte LA REGLA COMPLETA, no solo esa rama. O sea que el
       `nav` de al lado tampoco se pintaba, y el sintoma era "el morado no se
       aplico en ningun lado".
   Si hay que agrupar selectores dudosos, van en reglas separadas. */

aside[class*="bg-n-background"] {
  background-color: rgb(68 38 77);
}

/* Los separadores en negro se ven como una raya sucia sobre el morado. */
aside[class*="bg-n-background"] [class*="border-n-"],
section:has(> div > div > img[src*="brand-assets/logo"]) {
  border-color: rgb(90 52 104) !important;
}

/* El gris de texto del inbox (--slate-11, 168) sobre el morado baja a 3.4:1.
   Los items del sidebar suben a un lila muy claro: 8:1 y sigue siendo
   secundario respecto del blanco de los encabezados. */
nav a,
nav li,
nav button,
nav .text-sm {
  color: rgb(226 216 231);
}

/* --- 1d) donde estoy parado, y que uso todos los dias --------------------- */
/* Chatwoot marca el item activo solo con un degradado gris apenas visible, y
   sobre el morado se pierde del todo. Va relleno y texto amarillo: es la unica
   informacion de "donde estoy" que tiene la pantalla. */
nav a.router-link-active {
  background-color: rgb(90 52 104) !important;
  background-image: none !important;
  color: rgb(251 199 17) !important;
  font-weight: 600;
}

/* Las tres vistas que se usan todo el dia, mas fuertes que las listas de
   equipos y etiquetas que hay debajo. Se atacan por su URL y no por posicion:
   la URL no cambia cuando Chatwoot reordena el menu. */
nav a[href$="/inbox-view"],
nav a[href$="/dashboard"],
nav a[href*="/mentions/"] {
  color: rgb(245 242 247);
  font-weight: 500;
}

/* --- 1e) lo que un vendedor no usa --------------------------------------- */
/* El rol lo marca `acciones-ui.js` en el elemento raiz.
   NO es control de acceso —igual que la pestana "Todos"—: es sacar ruido de una
   pantalla que se mira ocho horas por dia.

   · "Participar" muestra las conversaciones en las que participa, que para un
     vendedor con todo asignado es lo mismo que su bandeja.
   · "Canales" lista las bandejas de entrada. Hay UNA sola y no elige nada.
   El nombre de la seccion no se puede leer desde CSS, asi que `acciones-ui.js`
   le pone `data-estudio-seccion` y aca solo se esconde. */

:root[data-estudio-rol="agent"] nav li:has(> a[href*="/participating/"]),
:root[data-estudio-rol="agent"] nav li[data-estudio-seccion="canales"] {
  display: none !important;
}

/* --- 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.
   La mayuscula con tracking se probó y hace ruido acá: funciona para un
   titulo suelto, no para cinco encabezados apilados en una columna de 200px.
   Acá: Source Sans 3 600 en los encabezados contra 400 en los items. Distingue
   igual y no grita.
   Y NO van en amarillo: cinco encabezados amarillos apilados sobre el morado
   compiten entre si y con el item activo, que ya es amarillo por ser el acento.
   El amarillo se reserva para los titulos del area de contenido. */

nav .text-body-main {
  font-family: "Source Sans 3", 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: "Source Sans 3", 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: "Source Sans 3", 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 al peso normal. "Mi bandeja de entrada",
   que no lleva `text-sm`, si quedaba fuerte. Dos encabezados hermanos con
   distinto peso, por una regla propia. */

/* --- 2) los grises del estudio, por variable ------------------------------ */
/* Antes esto iba tambien en `:root` sin condicion, y era la razon por la que el
   modo claro estaba roto: las superficies seguian oscuras mientras Chatwoot
   apagaba sus variantes `dark:` y ponia el texto en negro. Negro sobre negro.
   Ahora la paleta oscura vive donde corresponde —la clase `dark`— y el modo
   claro tiene la suya, abajo.
   Las pantallas SIN sesion (login, recuperar clave) no llevan esa clase y no
   tienen selector de apariencia: se las fuerza a oscuro desde `acciones-ui.js`,
   que les pone `dark` a mano. */
.dark,
.dark .widget-wrapper {
  --background-color: 34 30 36;
  --surface-1: 31 26 33;
  --surface-2: 38 33 39;
  --surface-3: 43 38 44;
  --surface-active: 49 45 51;
  --solid-1: 38 33 39;
  --solid-2: 46 41 47;
  --solid-3: 53 48 54;
  --solid-active: 59 55 61;
  --slate-1: 31 26 33;
  --slate-2: 38 33 39;
  --slate-3: 43 38 44;
  --slate-4: 48 43 49;
  --slate-5: 53 48 54;
  --slate-6: 59 55 61;
  --slate-7: 71 68 73;
  --slate-8: 89 86 90;
  --slate-9: 108 105 108;
  --slate-10: 132 130 133;
  --slate-11: 169 167 169;
  --slate-12: 255 255 255;
  --alpha-1: 31, 26, 33, .85;
  --alpha-2: 255, 255, 255, .07;
  --alpha-3: 46, 41, 47, 1;
}

/* El fondo de la ventana, que Chatwoot deja transparente.
   Solo en <html> y <body>: la clase `dark` tambien la llevan los contenedores
   del cromo en modo claro (las islas de `acciones-ui.js`), y un `.dark` suelto
   les pintaba el fondo encima del morado o del surface que ya tienen. */
html.dark,
body.dark {
  background-color: rgb(34 30 36);
}

/* --- 2b) el modo claro: cambia el CHAT, no la interfaz -------------------- */
/* El pedido, textual: "que la vista clara cambie el color de los chats
   unicamente, a un blanco tirando a morado, pero que la ui continue morada los
   side panel y eso".

   Se resuelve con la cascada de las variables, no duplicando reglas:
     1. en claro, el documento entero toma la escala CLARA (blancos con morado
        adentro), asi que la lista y el chat se aclaran;
     2. y en los cuatro contenedores del cromo se vuelve a declarar la escala
        OSCURA. Como las variables cascadean, todo lo que vive adentro de esos
        contenedores —textos, iconos, bordes, fichas— se sigue pintando como en
        modo oscuro, que es lo que hace falta sobre el morado.
   Los fondos morados en si ya estan puestos mas arriba con literales, no con
   variables, asi que valen en los dos modos sin tocar nada. */
body:not(.dark) {
  --background-color: 233 221 235;
  --surface-1: 241 229 243;
  --surface-2: 237 225 239;
  --surface-3: 232 220 234;
  --surface-active: 227 215 229;
  --solid-1: 239 227 241;
  --solid-2: 235 223 237;
  --solid-3: 229 217 231;
  --solid-active: 223 211 225;
  --slate-1: 240 228 242;
  --slate-2: 236 224 238;
  --slate-3: 231 219 233;
  --slate-4: 225 213 227;
  --slate-5: 219 207 221;
  --slate-6: 211 199 213;
  --slate-7: 211 199 213;
  --slate-8: 191 179 193;
  --slate-9: 155 143 157;
  --slate-10: 121 118 122;
  --slate-11: 84 80 85;
  --slate-12: 39 35 41;
  --alpha-1: 233, 221, 235, .85;
  --alpha-2: 0, 0, 0, .05;
  --alpha-3: 244, 232, 246, 1;
  /* El amarillo sobre blanco da 1.4:1: ilegible. El acento como TEXTO pasa al
     morado; como relleno y como borde sigue siendo amarillo. */
  --blue-10: 68 38 77;
  --blue-11: 68 38 77;
  --estudio-acento-texto: 68 38 77;
  background-color: rgb(233 221 235);
  /* La barra de desplazamiento del sistema, en claro, es blanca con el pulgar
     gris: sobre el lila desentona ("tan blanca"). Se le pone el pulgar en un
     lila mas oscuro y el carril transparente, para que se apoye en el fondo.
     `scrollbar-color` se hereda, y ya RESUELTO: el cromo lleva la suya abajo. */
  scrollbar-color: rgb(var(--slate-8)) transparent;
}

body:not(.dark) aside[class*="bg-n-background"],
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"],
body:not(.dark) .conversations-list-wrap > div[class*="h-[3.25rem]"],
body:not(.dark) .conversation-details-wrap > div[class*="border-b-n-weak"] {
  --background-color: 34 30 36;
  --surface-1: 31 26 33;
  --surface-2: 38 33 39;
  --surface-3: 43 38 44;
  --surface-active: 49 45 51;
  --solid-1: 38 33 39;
  --solid-2: 46 41 47;
  --solid-3: 53 48 54;
  --solid-active: 59 55 61;
  --slate-1: 31 26 33;
  --slate-2: 38 33 39;
  --slate-3: 43 38 44;
  --slate-4: 48 43 49;
  --slate-5: 53 48 54;
  --slate-6: 59 55 61;
  --slate-7: 71 68 73;
  --slate-8: 89 86 90;
  --slate-9: 108 105 108;
  --slate-10: 132 130 133;
  --slate-11: 169 167 169;
  --slate-12: 255 255 255;
  --alpha-1: 31, 26, 33, .85;
  --alpha-2: 255, 255, 255, .07;
  --alpha-3: 46, 41, 47, 1;
  /* Adentro del morado el acento vuelve a ser el amarillo: es donde se usa
     para marcar "donde estoy parado". */
  --blue-10: 251 199 17;
  --blue-11: 251 199 17;
  --estudio-acento-texto: 251 199 17;

  /* ⚠️ Y ADEMAS UN COLOR DE TEXTO EXPLICITO, que no es redundante con las
     variables de arriba.
     `color` se hereda como VALOR YA CALCULADO. Un ancestro que esta FUERA de
     este contenedor resuelve `var(--slate-12)` al negro del modo claro, y todo
     lo de adentro hereda ese literal: redeclarar la variable aca no lo cambia,
     porque nadie la vuelve a evaluar.
     Medido en el navegador: los valores de los atributos quedaban en
     rgb(28,32,36) sobre el morado — 1.27:1, o sea invisibles.
     Poniendo un color propio, la herencia vuelve a arrancar desde aca. */
  color: rgb(226 216 231);
  /* Lo mismo con la barra de desplazamiento: la de arriba llega resuelta al
     lila claro y aca adentro va sobre morado. */
  scrollbar-color: rgb(var(--slate-8)) transparent;
}

/* El degradado que tapa los items del menu al llegar al pie del sidebar sale
   de --background-color, que adentro del cromo es el gris casi negro del
   inbox: sobre el morado se leia como una sombra negra. Sale del morado del
   sidebar, en los dos modos: los items se siguen desvaneciendo y la franja
   desaparece. */
aside[class*="bg-n-background"] [class*="from-n-background"] {
  --tw-gradient-from: rgb(68 38 77) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(68 38 77 / 0) var(--tw-gradient-to-position);
}

/* --- 3) el login: quien construyo esto ------------------------------------ */
/* El logo se reemplaza sirviendo el simbolo de Hormiserv en /brand-assets/logo*
   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: "Source Sans 3", 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 nuestro archivo 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 <img> 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-hormi.png");
}

/* 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;
}

/* El nombre de la marca: es el logotipo de la pantalla, no una etiqueta mas.
   Venia en 14px peso 500 y blanco, o sea del mismo tamaño que los items del
   menu — se perdia al lado del simbolo.
   Ahora va en AMARILLO junto al simbolo amarillo: los dos juntos se leen como
   el logo de Hormiserv, que es como se presenta la empresa. Es el unico lugar
   donde el amarillo va sobre texto plano; en el resto del sidebar se reserva
   para el item activo, y por eso no compiten.
   El tracking negativo es de logotipo: junta las letras y les da cuerpo.

   El `span.truncate` no es adorno: dentro de ese boton hay DOS spans y el otro
   es el de la flecha, vacio. Comprobado en el navegador. */
/* EL LOGOTIPO REAL, no texto con una fuente parecida.
   La "S" de HORMISERV es curva, y eso no es una tipografia: es una letra
   DIBUJADA para la marca. Jost ExtraBold —la de titulares del manual— se le
   acerca en peso y proporcion pero tiene la S normal, asi que con texto no se
   llega nunca.
   Se dibuja la palabra recortada del archivo oficial (ver gen-logo.py, que la
   saca del mismo corte del que sale el simbolo: arriba el trompo, abajo la
   palabra). El nodo de texto se mantiene y solo se oculta visualmente con
   `font-size: 0`, para que un lector de pantalla siga leyendo "Hormiserv".
   El ancho sale de la proporcion real del archivo, 8.47:1. */
section:has(> div > div > img[src*="brand-assets/logo"]) button span.truncate {
  display: inline-block;
  height: 1.05rem;
  width: 8.9rem;
  max-width: 100%;
  font-size: 0;
  background-image: url("/estudio/logotipo-hormi.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* 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. */

/* --- "Cerrar venta": el boton que registra la venta --------------------- */
/* Es el momento mas importante del dia y hasta ahora se disparaba con una
   etiqueta escondida en un desplegable. Va con el AMARILLO de la marca —el
   color de accion del sitio— y texto morado: es la unica accion de toda la
   pantalla que mueve plata, y tiene que ganarle visualmente al verde de
   "Cerrar consulta", que esta al lado y significa otra cosa.

   El boton lo inserta `acciones-ui.js` copiando las clases del de al lado, asi
   que tamano y tipografia los hereda; aca solo va el color. */
[data-estudio-venta] {
  background-color: rgb(30 122 68) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  outline-color: rgb(38 148 84) !important;
}

[data-estudio-venta]:hover {
  background-color: rgb(36 143 80) !important;
}

/* --- el cuadro de escritura ---------------------------------------------- */
/* Es la unica superficie grande del area de contenido que quedaba en BLANCO
   PURO: el resto sigue la paleta, esta tenia el blanco escrito aparte. Y es
   justo donde el vendedor mira mientras escribe, asi que era buena parte de lo
   que "quemaba los ojos" en modo claro. Medido: un solo elemento en toda la
   pantalla con rgb(255,255,255).
   Se ata a la variable y no a un color fijo para que siga cualquier ajuste
   posterior de BRILLO_CLARO sin tener que acordarse de este lugar. */
body:not(.dark) .reply-box {
  background-color: rgb(var(--surface-2)) !important;
}

/* --- los controles adentro del cromo, en modo claro ---------------------- */
/* Un input o un select toman su fondo de los tokens de FORMULARIO de Chatwoot,
   que en claro son blancos — y no de los que redeclaramos para el cromo. El
   resultado eran cajas blancas brillantes flotando sobre el morado del panel:
   lo primero que se ve al pasar a modo claro y lo que mas desentona.
   Se les pone fondo propio, translucido, para que se lean como campos apoyados
   sobre el morado y no como agujeros. */
body:not(.dark) aside[class*="bg-n-background"] input,
body:not(.dark) aside[class*="bg-n-background"] select,
body:not(.dark) aside[class*="bg-n-background"] textarea,
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"] input,
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"] select,
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"] textarea,
body:not(.dark) .conversations-list-wrap > div[class*="h-[3.25rem]"] input,
body:not(.dark) .conversation-details-wrap > div[class*="border-b-n-weak"] input {
  background-color: rgba(0, 0, 0, 0.22) !important;
  color: #FFFFFF !important;
  border-color: rgb(90 52 104) !important;
}

/* El texto de ayuda de un campo vacio tambien: heredaba el gris oscuro de la
   paleta clara y sobre el morado no se leia. */
body:not(.dark) aside[class*="bg-n-background"] ::placeholder,
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"] ::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Las opciones del desplegable las dibuja el sistema operativo con el fondo del
   elemento: sin esto quedan blancas sobre blanco al abrirlo. */
body:not(.dark) div[class*="bg-n-surface-2"][class*="max-w-sm"] option {
  background-color: rgb(68 38 77) !important;
  color: #FFFFFF !important;
}

/* --- el modal de cierre --------------------------------------------------- */
/* Los datos que habilitan la venta viven en el panel lateral y ahi estan bien:
   se completan MIENTRAS se habla con el cliente. Pero al momento de cerrar, el
   chat ya no importa y esos datos SON la tarea — ahi si van al centro, grandes
   y ordenados por lo que importa primero. */
[data-estudio-modal] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(20, 10, 24, 0.72);
}

/* La caja es una COLUMNA: titulo arriba, pie abajo, y lo unico que scrollea es
   el cuerpo del medio. Antes scrolleaba la caja entera, y en una pantalla baja
   el boton de registrar quedaba fuera de la vista: el vendedor completaba todo
   y no encontraba como terminar. Ahora el boton se ve siempre.
   `dvh` va despues de `vh` para el celular, donde la barra del navegador
   aparece y desaparece; el navegador que no lo entiende se queda con `vh`. */
[data-estudio-modal-caja] {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 70rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgb(90 52 104);
  background-color: rgb(68 38 77);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-estudio-modal-caja] h2 {
  flex: none;
  margin: 0;
  padding: 1.25rem 1.5rem 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: rgb(251 199 17);
}

/* El contador de lo que falta cambia de color, no solo de texto: es lo primero
   que se mira al abrir y tiene que responderse de un vistazo. */
[data-estudio-modal-aviso] {
  flex: none;
  margin: 0;
  padding: 0 1.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

[data-estudio-modal-aviso][data-estudio-ok="0"] { color: rgb(245 197 24); }
[data-estudio-modal-aviso][data-estudio-ok="1"] { color: rgb(110 220 150); }
[data-estudio-modal-aviso][data-estudio-ok="error"] { color: rgb(255 138 128); }

/* El cuerpo en dos paneles: datos a la izquierda, taxonomia a la derecha.
   Cerrar una venta es decir CUANTO y decir QUE FUE, y hasta ahora lo segundo
   vivia en otra pantalla — por eso se olvidaba. */
/* `min-height: 0` es lo que deja scrollear al cuerpo: un hijo de flex no baja
   de la altura de su contenido si no se lo permite, y sin esto empujaria al pie
   fuera de la caja en vez de scrollear. */
[data-estudio-modal-cuerpo] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 1.25rem;
  padding: 0.1rem 1.5rem 1.25rem;
}

[data-estudio-modal-campos],
[data-estudio-modal-lado] {
  min-width: 0;
}

/* El panel en columna, con el resumen empujado abajo: termina a la altura del
   ultimo renglon de campos y los dos lados cierran parejos. */
[data-estudio-modal-lado] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

@media (min-width: 52rem) {
  [data-estudio-modal-cuerpo] {
    /* `minmax(0, ...)` y no `1fr 15rem` a secas: por defecto un item de grid no
       baja del ancho de su contenido, y "planta-valle-de-uco" no parte. Con
       nueve etiquetas la columna crecia, empujaba el modal mas ancho que la
       ventana y el panel quedaba cortado contra el borde derecho. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 16.5rem);
  }

  /* Una linea que los separa sin meter un borde duro en el medio. */
  [data-estudio-modal-lado] {
    border-left: 1px solid rgb(90 52 104);
    padding-left: 1.25rem;
  }
}

/* Los titulos del panel en versalitas chicas: agrupan, no compiten con los
   rotulos de los campos, que son los que se leen para completar. */
[data-estudio-modal-rotulo] {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(190 176 198);
}

/* De donde vino el cliente: se lee, no se edita. Por eso va sin caja. */
[data-estudio-modal-origen] strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

[data-estudio-modal-chips] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Apagadas por defecto y encendidas al elegirlas. El estado tiene que leerse
   sin pasar el mouse: son nueve o diez y se miran de un golpe. */
[data-estudio-chip] {
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgb(90 52 104);
  background-color: transparent;
  color: rgba(226, 216, 231, 0.75);
}

[data-estudio-chip]:hover {
  background-color: rgb(90 52 104);
  color: #FFFFFF;
}

[data-estudio-chip][data-activo="1"] {
  background-color: rgb(251 199 17);
  border-color: rgb(251 199 17);
  color: rgb(68 38 77);
  font-weight: 700;
}

/* El punto de color de la etiqueta, el mismo que le pone Chatwoot en la lista
   de conversaciones y en la barra lateral. El color lo pone acciones-ui.js en
   --estudio-chip-color, leido de la cuenta: una etiqueta se reconoce igual en
   todas las pantallas. */
[data-estudio-chip]::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  vertical-align: 0.04em;
  background-color: var(--estudio-chip-color, rgb(190 176 198));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Lo que pasa al registrar. Va en una caja tenue porque es informacion, no una
   decision: se lee una vez y despues se sabe. */
[data-estudio-modal-resumen] {
  margin-top: auto;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(90 52 104);
  background-color: rgba(255, 255, 255, 0.04);
}

[data-estudio-modal-resumen] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-estudio-modal-resumen] li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgb(226 216 231);
}

[data-estudio-modal-resumen] li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: rgb(110 220 150);
}

[data-estudio-modal-quedan] {
  margin: 0.5rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid rgb(90 52 104);
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgb(190 176 198);
  overflow-wrap: anywhere;
}

[data-estudio-modal-quedan] b {
  font-weight: 600;
  color: rgb(226 216 231);
}

/* SEIS columnas, y cada campo declara cuantas ocupa (ver CAMPOS_CIERRE en
   acciones-ui.js). Un campo del ancho de su respuesta se lee mas rapido y ocupa
   menos alto: "H-21" en una caja de ancho completo obliga al ojo a recorrer
   vacio. Sumando 6 por renglon, los once entran en cinco, uno por pregunta. */
[data-estudio-modal-campos] {
  display: grid;
  gap: 0.8rem 1.1rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

[data-estudio-campo-cierre] { grid-column: span 6; }

@media (min-width: 40rem) {
  [data-estudio-campo-cierre][data-ancho="2"] { grid-column: span 2; }
  [data-estudio-campo-cierre][data-ancho="3"] { grid-column: span 3; }
  [data-estudio-campo-cierre][data-ancho="4"] { grid-column: span 4; }
  [data-estudio-campo-cierre][data-ancho="6"] { grid-column: span 6; }
}

/* Cada campo es una grilla chica de tres renglones:
     rotulo ............ No aplica
     [ el campo                  ]
     aviso (solo si hay algo que decir)
   La casilla va en el renglon del rotulo y no abajo del campo: abajo sumaba un
   renglon entero a dos de cada cinco filas, y con eso el modal scrolleaba.
   En el DOM la casilla sigue DESPUES del campo (ver acciones-ui.js, por el
   <label>): la ubica el grid, no el orden. */
/* `align-content: start` los pega arriba. Sin eso, cuando el vecino de renglon
   muestra un aviso y la fila se estira, el grid reparte el sobrante entre los
   renglones y el campo baja: la Empresa quedaba mas abajo que el CUIT. */
[data-estudio-campo-cierre] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  align-items: end;
  align-content: start;
}

[data-estudio-campo-cierre] > span {
  grid-row: 1;
  grid-column: 1;
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(226 216 231);
}

[data-estudio-campo-cierre] > input,
[data-estudio-campo-cierre] > select {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* El aviso de abajo existe siempre pero vacio no ocupa lugar: aparece solo
   cuando dice algo, como un CUIT con un digito de menos. */
[data-estudio-campo-cierre] > small {
  grid-row: 3;
  grid-column: 1 / -1;
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: rgb(255 200 120);
}

[data-estudio-campo-cierre] > small:empty {
  display: none;
}

/* --- la casilla "No aplica" ---------------------------------------------- */
/* En chico y a la derecha del rotulo: es una aclaracion del campo, no un campo
   mas. El selector es `> span[...]` porque la regla de arriba pinta TODO span
   hijo directo como rotulo, y sin esto la casilla se leeria como un segundo
   titulo del campo. */
[data-estudio-campo-cierre] > span[data-estudio-noaplica] {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgb(190 176 198);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* La caja de tildar hereda el ancho completo y el fondo pastel de los campos de
   texto si no se la saca de ahi: queda un rectangulo claro enorme. */
[data-estudio-campo-cierre] > span[data-estudio-noaplica] input[type="checkbox"] {
  width: auto !important;
  padding: 0 !important;
  margin: 0;
  flex: none;
  background-color: transparent !important;
  border: 0 !important;
  accent-color: rgb(var(--estudio-acento-texto));
  cursor: pointer;
}

/* Exento: el campo se queda A LA VISTA pero apagado, y la casilla se enciende.
   Esconderlo dejaria al vendedor buscando un campo que estaba hace un segundo;
   asi se lee por que no se lo piden, y que puede destildarla si lo tiene. */
[data-estudio-campo-cierre][data-estudio-noaplica-on="1"] input:disabled,
[data-estudio-campo-cierre][data-estudio-noaplica-on="1"] select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-estudio-campo-cierre][data-estudio-noaplica-on="1"] > span[data-estudio-noaplica] {
  color: rgb(var(--estudio-acento-texto));
  font-weight: 600;
}

/* Las cajas van CLARAS sobre el morado, no oscuras.
   El primer intento las puso translucidas sobre el fondo del modal y el texto
   quedaba oscuro sobre morado oscuro: ilegible. Dos motivos:
     · el `color` iba sin !important y los estilos de input de Chatwoot ganaban;
     · y aunque hubiera ganado, una caja oscura sobre un panel oscuro no separa
       el dato del contenedor, que es justo lo que este modal tiene que hacer.
   Con el mismo lila pastel del chat, cada campo se lee como una ficha apoyada
   sobre el morado y el valor salta a la vista. */
[data-estudio-campo-cierre] input,
[data-estudio-campo-cierre] select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid rgb(90 52 104) !important;
  background-color: rgb(238 226 241) !important;
  color: rgb(40 24 46) !important;
  font-size: 0.95rem;
  font-weight: 500;
}

/* La flecha del desplegable, propia.
   La nativa se dibuja segun el sistema operativo y, con un fondo puesto por
   nosotros, en Chrome quedaba un triangulito gris pisando la primera letra del
   valor. Se apaga el control nativo y se dibuja una en SVG: mismo color que el
   texto, misma posicion siempre, en cualquier sistema.
   El `padding-right` es parte del arreglo, no decoracion: sin el, un valor
   largo pasa por debajo de la flecha. */
[data-estudio-campo-cierre] select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40,24,46)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;
  padding-right: 1.9rem;
}

/* El ejemplo tiene que leerse COMO ejemplo: en cursiva y mas tenue. Si se
   viera igual que un valor cargado, el vendedor creeria que el campo ya esta
   completo y se iria sin llenarlo. */
[data-estudio-campo-cierre] ::placeholder {
  color: rgba(40, 24, 46, 0.42) !important;
  font-style: italic;
}

/* Las opciones las dibuja el sistema con el fondo del propio select. */
[data-estudio-campo-cierre] option {
  background-color: rgb(238 226 241) !important;
  color: rgb(40 24 46) !important;
}

[data-estudio-campo-cierre] input:focus,
[data-estudio-campo-cierre] select:focus {
  outline: 2px solid rgb(251 199 17);
  outline-offset: 1px;
}

/* Lo que falta se marca en el campo, no solo en el contador de arriba: con
   nueve campos, "faltan 3" sin senalar cuales obliga a revisarlos uno por uno. */
/* Dos niveles, y la diferencia importa:
     AMBAR  = todavia no lo cargaste. Es informacion, no un reproche.
     ROJO   = apretaste registrar y sin esto no se puede. Ahi si es un error.
   Marcar todo en rojo desde que se abre el modal convierte la pantalla en una
   alarma permanente, y el rojo deja de significar algo. */
[data-estudio-campo-cierre][data-estudio-falta="1"] input,
[data-estudio-campo-cierre][data-estudio-falta="1"] select {
  border-color: rgb(198 142 0) !important;
  border-width: 2px !important;
  background-color: rgb(250 240 210) !important;
}

[data-estudio-campo-cierre][data-estudio-error="1"] > span {
  color: rgb(255 138 128) !important;
}

[data-estudio-campo-cierre][data-estudio-error="1"] input,
[data-estudio-campo-cierre][data-estudio-error="1"] select {
  border-color: rgb(214 60 48) !important;
  border-width: 2px !important;
  background-color: rgb(253 228 226) !important;
}

/* El pie no scrollea: queda fijo abajo de la caja, con una linea que lo separa
   del cuerpo cuando el cuerpo scrollea por debajo. */
[data-estudio-modal-pie] {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid rgb(90 52 104);
}

[data-estudio-modal-pie] button {
  padding: 0.55rem 1.1rem;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

[data-estudio-modal-cancelar] {
  background-color: transparent;
  color: rgb(226 216 231);
  border: 1px solid rgb(90 52 104);
}

[data-estudio-modal-confirmar] {
  background-color: rgb(30 122 68);
  color: #FFFFFF;
  border: 1px solid rgb(38 148 84);
}

[data-estudio-modal-confirmar]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- el bloque de gerencia ----------------------------------------------- */
/* Arriba de la barra y solo para administradores (lo pone acciones-ui.js).
   Tiene fondo propio para que se lea como OTRA COSA que el menu de Chatwoot:
   es lo que distingue la pantalla del gerente de la de un vendedor.
   El numero es lo que se mira: a la derecha, alineado, y en ambar solo cuando
   una alarma tiene algo. En cero queda gris, para que el ambar signifique algo. */
/* `min-width: 0` es lo que lo hace entrar en la barra. El nav de Chatwoot es una
   GRILLA de una columna, y una columna de grilla se estira hasta el texto mas
   largo que no parte de sus hijos. Chatwoot se lo pone a su lista por eso mismo.
   Sin esto el bloque ensanchaba la columna, y no solo se cortaba el: arrastraba
   la lista entera y tambien se cortaban "Todas las conversaciones" y las
   flechas de Carpetas y Equipos (visto en pantalla el 25-sep, reproducido en la
   maqueta: 215px en una barra de 161). */
[data-estudio-gerencia] {
  min-width: 0;
  margin: 0 0 0.5rem;
  padding: 0.55rem 0.45rem 0.45rem;
  border-radius: 0.6rem;
  border: 1px solid rgb(251 199 17 / 0.35);
  background-color: rgb(251 199 17 / 0.08);
}

/* Con la barra plegada no hay lugar para el bloque: se esconde, y queda el
   menu de iconos de siempre. */
aside nav.px-1 > [data-estudio-gerencia] {
  display: none;
}

/* La grilla del nav ocupa todo el alto de la barra, y si su contenido es mas
   corto, por defecto estira las filas para llenarla. Con la lista sola no se
   nota: sobra espacio debajo de ella. Con nuestros bloques el sobrante se
   reparte entre todas las filas y queda un hueco debajo de cada bloque. Se ve
   cuando la lista es corta, como en "Mi bandeja de entrada" con los grupos
   cerrados (visto en pantalla el 29-sep, medido: 68px de bloque en una fila
   de 97). */
aside nav:has(> [data-estudio-pantallas], > [data-estudio-gerencia]) {
  align-content: start;
}

[data-estudio-gerencia-titulo] {
  display: block;
  margin: 0 0.35rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(251 199 17);
}

[data-estudio-gerencia-lista] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

[data-estudio-gerencia-cargando] {
  padding: 0.3rem 0.4rem;
  font-size: 0.78rem;
  color: rgb(190 176 198);
}

/* Con el bloque adelante del selector: a[href*="unattended"], mas abajo, pinta de
   amarillo todo link a Desatendido, y sin esto le ganaba al nuestro. */
[data-estudio-gerencia] a[data-estudio-gerencia-item] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.32rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgb(226 216 231) !important;
  text-decoration: none !important;
}

/* Un nombre largo pasa a una segunda linea en vez de cortarse con puntos: con
   la letra de Chatwoot, "Derivadas a ge..." no se entiende, y el nombre es lo
   que dice que es cada numero. */
[data-estudio-gerencia] a[data-estudio-gerencia-item] > span {
  min-width: 0;
  color: inherit !important;
  font-weight: inherit;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

[data-estudio-gerencia] a[data-estudio-gerencia-item]:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

[data-estudio-gerencia] a[data-estudio-gerencia-item][data-activo="1"] {
  background-color: rgb(251 199 17 / 0.16);
  color: #FFFFFF !important;
  font-weight: 600;
}

[data-estudio-gerencia-item] > b {
  flex: none;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgb(190 176 198);
}

[data-estudio-gerencia-item] > b[data-estudio-gerencia-hay="1"] {
  background-color: rgb(245 158 11);
  color: rgb(40 24 46);
}

/* El informe no es una vista: va separado por una linea, y con una flecha que
   dice que lleva a otra pantalla. */
[data-estudio-gerencia] a[data-estudio-gerencia-item="informe"] {
  margin-top: 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgb(251 199 17 / 0.2);
  border-radius: 0 0 0.4rem 0.4rem;
  font-size: 0.8rem;
  color: rgb(251 199 17) !important;
}

[data-estudio-gerencia-item="informe"]::after {
  content: "\2192";
  flex: none;
}

/* --- las pantallas propias: Inicio y Logistica --------------------------- */
/* El bloque va arriba de todo en la barra (lo pone pantallas-estudio.js). Se ve
   como los items del bloque de Gerencia, sin su marco: son destinos, no
   alarmas. `min-width: 0` por lo mismo que Gerencia: el nav es una grilla y sin
   esto una palabra larga ensancha la columna entera. */
[data-estudio-pantallas] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.5rem;
}

aside nav.px-1 > [data-estudio-pantallas] {
  display: none;
}

[data-estudio-pantallas] a[data-estudio-pantallas-item] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.38rem 0.45rem;
  border-radius: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgb(226 216 231) !important;
  text-decoration: none !important;
}

[data-estudio-pantallas] a[data-estudio-pantallas-item] > span {
  min-width: 0;
  color: inherit !important;
  overflow-wrap: anywhere;
}

[data-estudio-pantallas] a[data-estudio-pantallas-item]:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

[data-estudio-pantallas] a[data-estudio-pantallas-item][data-activo="1"] {
  background-color: rgb(251 199 17 / 0.16);
  color: #FFFFFF !important;
}

[data-estudio-pantallas-item] > b {
  flex: none;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgb(190 176 198);
}

[data-estudio-pantallas-item] > b[data-estudio-hay="1"] {
  background-color: rgb(245 158 11);
  color: rgb(40 24 46);
}

/* La pantalla tapa el espacio central y deja la barra a la vista. `left` lo
   corrige el script con el ancho real de la barra, que cambia al plegarla. Usa
   los colores de Chatwoot (los que redefine este archivo), asi sigue sola al
   modo claro y al oscuro. z-index 20: por encima del contenido, por debajo de
   los menus de Chatwoot (z-50) y de nuestros modales. */
[data-estudio-pantalla] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  overflow-y: auto;
  background-color: rgb(var(--background-color));
  color: rgb(var(--slate-12));
}

[data-estudio-pantalla-cuerpo] {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

[data-estudio-pantalla] h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(var(--slate-12));
}

[data-estudio-pantalla] h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgb(var(--slate-12));
}

[data-estudio-subtitulo] {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: rgb(var(--slate-11));
}

[data-estudio-vacio] {
  margin: 0.5rem 0;
  color: rgb(var(--slate-11));
}

/* Lo que no se pudo leer se dice en rojo: una lista vacia diria "no hay nada".
   Colgado de la pantalla: los campos del modal de cierre llevan
   data-estudio-error="0", y suelto los pintaba a todos de rojo (29-sep).
   Lo vigila vps/test-css-colisiones.js. */
[data-estudio-pantalla] [data-estudio-error] {
  margin: 0.75rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(220 38 38);
  background-color: rgb(220 38 38 / 0.12);
  color: rgb(var(--slate-12));
}

[data-estudio-pantalla] b[data-estudio-hay] {
  min-width: 1.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background-color: rgb(var(--slate-4));
  color: rgb(var(--slate-11));
}

[data-estudio-pantalla] b[data-estudio-hay="1"] {
  background-color: rgb(245 158 11);
  color: rgb(40 24 46);
}

@media (max-width: 767px) {
  [data-estudio-pantalla-cuerpo] {
    padding: 1.25rem 1rem 2rem;
  }
}

/* --- el panel de logistica ------------------------------------------------ */
/* Es la herramienta de trabajo de logistica, no un informe: usa el ancho de la
   compu y cada zona se distingue de la otra. Los titulos y los numeros van en
   Jost ExtraBold, la de titulares del manual de la marca (nginx ya la carga):
   es lo que le saca la cara de plantilla. Los colores dicen lo mismo en toda la
   pantalla: rojo vencida o varada, ambar hoy o esperando, amarillo de la marca
   lo elegido. */
[data-estudio-pantalla][data-aparte="1"] {
  z-index: 45;
}

/* Rojo: hay alguna varada. Va en la barra y en la pantalla. */
[data-estudio-pantallas-item] > b[data-estudio-hay="2"],
[data-estudio-pantalla] b[data-estudio-hay="2"] {
  background-color: rgb(220 38 38);
  color: #FFFFFF;
}

[data-estudio-pantalla="logistica"] [data-estudio-pantalla-cuerpo] {
  max-width: 96rem;
}

[data-estudio-pantalla="logistica"] h1 {
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

[data-estudio-pantalla] header {
  position: relative;
}

/* --- el titular --- */
/* Una frase debajo del titulo: que pasa y que hacer. Era una franja de color
   (hasta el 02-oct) y repetia lo de las casillas con el mismo peso que ellas:
   ahora es texto, y el color queda solo en el detalle, si es grave. */
[data-estudio-log-titular] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-top: 0.6rem;
}

[data-estudio-log-titular] > strong {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgb(var(--slate-12));
}

/* El titulo de cada seccion: el mismo tamaño para "Para atender", la semana,
   "Pendientes" y el "Resumen", y aire arriba. Es lo que separa las zonas. */
[data-estudio-pantalla] h2[data-estudio-log-seccion] {
  margin: 2rem 0 0.75rem;
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  color: rgb(var(--slate-12));
}

[data-estudio-log-titular] > span {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgb(21 128 61);
}

[data-estudio-log-titular][data-nivel="atencion"] > span {
  color: rgb(180 83 9);
}

[data-estudio-log-titular][data-nivel="alarma"] > span {
  color: rgb(220 38 38);
}

body.dark [data-estudio-log-titular] > span {
  color: rgb(74 222 128);
}

body.dark [data-estudio-log-titular][data-nivel="atencion"] > span {
  color: rgb(251 191 36);
}

body.dark [data-estudio-log-titular][data-nivel="alarma"] > span {
  color: rgb(248 113 113);
}

/* --- las cinco casillas --- */
/* Numeros grandes que filtran. El color va solo en el numero y solo si dice
   algo: rojo lo vencido, ambar lo que espera (hasta el 02-oct era una raya de
   color arriba de cada una, y sumaba ruido). La elegida, con el amarillo. */
[data-estudio-log-cifras] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

button[data-estudio-cifra] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

button[data-estudio-cifra]:hover {
  border-color: rgb(var(--slate-8));
}

button[data-estudio-cifra][data-nivel="atencion"] > strong {
  color: rgb(217 119 6);
}

body.dark button[data-estudio-cifra][data-nivel="atencion"] > strong {
  color: rgb(251 191 36);
}

button[data-estudio-cifra][data-activo="1"] {
  border-color: rgb(251 199 17);
  background-color: rgb(251 199 17 / 0.1);
}

button[data-estudio-cifra] > span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgb(var(--slate-11));
}

button[data-estudio-cifra] > strong {
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

button[data-estudio-cifra][data-nivel="alarma"] > strong {
  color: rgb(220 38 38);
}

body.dark button[data-estudio-cifra][data-nivel="alarma"] > strong {
  color: rgb(248 113 113);
}

button[data-estudio-cifra] > small {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgb(var(--slate-11));
}

/* --- la grilla: el trabajo a la izquierda, el contexto a la derecha --- */
[data-estudio-log-grid] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2rem;
  align-items: start;
}

/* --- la semana --- */
/* Un calendario de la semana de trabajo: una tarjeta por dia con sus entregas
   por hora. Sin barras: lo que se lee es a quien se le entrega y cuanto. Hoy va
   con el amarillo de la marca; lo que ya paso, apagado; un dia sin nada, con
   el borde punteado. El punto de cada entrega es la leyenda de arriba. */
/* Sin tarjeta alrededor (02-oct): era una caja con cajas adentro. La seccion
   la marcan el titulo y el aire, como las demas. */
[data-estudio-log-semana-cab] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 2rem 0 0.75rem;
}

[data-estudio-log-semana-titulo] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-right: auto;
}

[data-estudio-log-semana-titulo] > h3,
[data-estudio-log-caja] > h3 {
  margin: 0;
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: rgb(var(--slate-12));
}

/* El de la semana es un titulo de seccion: mismo tamaño que los demas. */
[data-estudio-log-semana-titulo] > h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}

[data-estudio-log-semana-titulo] > span {
  font-size: 0.82rem;
  color: rgb(var(--slate-11));
}

[data-estudio-leyenda] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem 1rem;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  color: rgb(var(--slate-11));
}

[data-estudio-leyenda-item] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

[data-estudio-leyenda-item] > i,
[data-estudio-dia-entrega] > i {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: rgb(245 158 11);
}

[data-estudio-leyenda-item="cargada"] > i,
[data-estudio-dia-entrega="cargada"] > i {
  background-color: rgb(34 197 94);
}

[data-estudio-leyenda-item="vencida"] > i,
[data-estudio-dia-entrega="vencida"] > i {
  background-color: rgb(220 38 38);
}

/* Esta semana o la proxima: un interruptor de dos, como los de Chatwoot. */
[data-estudio-segmentos] {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background-color: rgb(var(--slate-3));
}

button[data-estudio-segmento] {
  padding: 0.28rem 0.75rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: rgb(var(--slate-11));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

button[data-estudio-segmento][data-activo="1"] {
  background-color: rgb(var(--solid-1));
  color: rgb(var(--slate-12));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

[data-estudio-dias] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}

[data-estudio-dias="6"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

[data-estudio-dias="7"] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

button[data-estudio-dia] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
  min-height: 7rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--background-color));
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

button[data-estudio-dia]:hover {
  border-color: rgb(var(--slate-8));
}

/* Un dia sin entregas no pesa lo mismo que uno con: sin recuadro, solo el dia.
   Asi se ven los dias que tienen trabajo. */
button[data-estudio-dia][data-vacio="1"] {
  border-color: transparent;
  background-color: transparent;
}

button[data-estudio-dia][data-vacio="1"]:hover {
  border-color: rgb(var(--slate-6));
}

button[data-estudio-dia][data-pasado="1"] {
  opacity: 0.6;
}

button[data-estudio-dia][data-hoy="1"] {
  border-color: rgb(251 199 17 / 0.75);
  background-color: rgb(251 199 17 / 0.07);
}

button[data-estudio-dia][data-activo="1"] {
  border-color: rgb(251 199 17);
  box-shadow: inset 0 0 0 1px rgb(251 199 17);
  background-color: rgb(251 199 17 / 0.12);
}

[data-estudio-dia-cab] {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

[data-estudio-dia-nombre] {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgb(var(--slate-11));
}

[data-estudio-dia-numero] {
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

[data-estudio-dia-hoy] {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: rgb(251 199 17);
  color: rgb(40 24 46);
}

[data-estudio-dia-total] {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgb(var(--slate-11));
}

[data-estudio-dia-vacio] {
  font-size: 0.78rem;
  color: rgb(var(--slate-10));
}

[data-estudio-dia-lista] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

/* Cada entrega en dos renglones: el cliente, y abajo la hora y los m³. En una
   tarjeta angosta asi entra el nombre. */
[data-estudio-dia-entrega] {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  line-height: 1.25;
}

[data-estudio-dia-entrega] > i {
  margin-top: 0.3rem;
}

[data-estudio-dia-texto] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

[data-estudio-dia-cliente],
[data-estudio-dia-texto] > small {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-estudio-dia-cliente] {
  font-size: 0.8rem;
  font-weight: 600;
}

[data-estudio-dia-texto] > small {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--slate-11));
}

[data-estudio-dia-mas] {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgb(var(--slate-11));
}

/* --- el encabezado de la lista, con sus filtros --- */
[data-estudio-log-lista-cab] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 2.25rem 0 0.75rem;
}

[data-estudio-pantalla] h2[data-estudio-log-lista-titulo] {
  margin: 0;
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
}

[data-estudio-log-filtros] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

[data-estudio-chips] {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

[data-estudio-chips]:empty {
  display: none;
}

/* Chatwoot le pone a todo select e input el ancho completo, un margen abajo y
   su propia flecha (visto en produccion el 28-sep: la barra se desarmaba). Aca
   se pisa todo eso; el select queda con la flecha del navegador. El buscador
   ademas lleva la clase reset-base, que Chatwoot excluye de sus estilos. */
[data-estudio-log-filtros] select[data-estudio-filtro-planta],
[data-estudio-log-filtros] input[data-estudio-buscar] {
  display: inline-block;
  box-sizing: border-box;
  height: 2.1rem;
  margin: 0;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--slate-6));
  outline: 0;
  background-color: rgb(var(--solid-1));
  color: rgb(var(--slate-12));
  font: inherit;
  font-size: 0.85rem;
}

[data-estudio-log-filtros] select[data-estudio-filtro-planta] {
  width: auto;
  padding: 0 0.5rem;
  -webkit-appearance: auto;
  appearance: auto;
  background-image: none;
}

[data-estudio-log-filtros] input[data-estudio-buscar] {
  width: 16rem;
  max-width: 100%;
  padding: 0 0.7rem;
}

[data-estudio-log-filtros] select[data-estudio-filtro-planta]:focus,
[data-estudio-log-filtros] input[data-estudio-buscar]:focus {
  border-color: rgb(251 199 17);
}

button[data-estudio-boton="chip"] {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border-color: rgb(251 199 17 / 0.7);
  background-color: rgb(251 199 17 / 0.14);
  font-size: 0.8rem;
}

/* --- las columnas: las mismas en el encabezado y en cada fila --- */
/* Una grilla con nombres de zona, asi se reacomoda sin tocar el orden de los
   nodos. Se decide por el ancho de LA LISTA, no de la ventana: con la barra de
   Chatwoot abierta, la columna de la derecha y el mismo monitor, la lista mide
   distinto (medido el 29-sep: a 1440 de ventana quedaban 830px, y el cliente
   se cortaba en "Hormi…"). De chica a grande:
     · menos de 44rem: tres renglones (cliente y estado, cuando, donde);
     · desde 44rem: en columnas, sin la del vendedor (esta en la ficha);
     · desde 62rem: todas. */
[data-estudio-log-principal] {
  min-width: 0;
  container-type: inline-size;
}

button[data-estudio-log-resumen] {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto 0.8rem;
  grid-template-areas:
    "punto cliente estado flecha"
    ". entrega entrega ."
    ". lugar lugar .";
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.2rem;
}

[data-estudio-log-columnas] {
  display: none;
  align-items: center;
  column-gap: 0.9rem;
  padding: 0 0.9rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgb(var(--slate-10));
}

[data-estudio-log-columnas] > span:nth-child(1) { grid-area: punto; }
[data-estudio-log-columnas] > span:nth-child(2) { grid-area: entrega; }
[data-estudio-log-columnas] > span:nth-child(3) { grid-area: cliente; }
[data-estudio-log-columnas] > span:nth-child(4) { grid-area: lugar; }
[data-estudio-log-columnas] > span:nth-child(5) { grid-area: vendedor; }
[data-estudio-log-columnas] > span:nth-child(6) { grid-area: estado; text-align: right; }

@container (min-width: 44rem) {
  [data-estudio-log-columnas],
  button[data-estudio-log-resumen] {
    display: grid;
    grid-template-columns: 0.6rem 7rem minmax(0, 1fr) 9rem 8.5rem 0.8rem;
    grid-template-areas: "punto entrega cliente lugar estado flecha";
    row-gap: 0;
  }

  [data-estudio-log-columnas] > span:nth-child(5) {
    display: none;
  }
}

@container (min-width: 62rem) {
  [data-estudio-log-columnas],
  button[data-estudio-log-resumen] {
    grid-template-columns: 0.6rem 7rem minmax(0, 1fr) 9.5rem 8rem 8.5rem 0.8rem;
    grid-template-areas: "punto entrega cliente lugar vendedor estado flecha";
  }

  [data-estudio-log-columnas] > span:nth-child(5) {
    display: block;
  }
}

/* --- los grupos por entrega --- */
/* Cada grupo con un punto de color y su cantidad, y aire entre uno y otro.
   Hasta el 02-oct era una barra gruesa a la izquierda y la cantidad en una
   pastilla del mismo color: cinco colores fuertes en una misma lista. */
[data-estudio-log-grupo] {
  margin-top: 1.6rem;
}

[data-estudio-log-grupo-cab] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.55rem;
  padding: 0 0 0 0.1rem;
  --punto: rgb(var(--slate-8));
}

[data-estudio-log-grupo-cab]::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background-color: var(--punto);
}

[data-estudio-log-grupo-cab] > h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--slate-12));
}

[data-estudio-log-grupo-cab] > b {
  min-width: 1.6rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background-color: rgb(var(--slate-4));
  color: rgb(var(--slate-12));
}

[data-estudio-log-grupo-cab] > span {
  font-size: 0.82rem;
  color: rgb(var(--slate-11));
}

[data-estudio-log-grupo="consultas"] > [data-estudio-log-grupo-cab] { --punto: rgb(139 92 246); }
[data-estudio-log-grupo="vencidas"] > [data-estudio-log-grupo-cab] { --punto: rgb(220 38 38); }
[data-estudio-log-grupo="vencidas"] > [data-estudio-log-grupo-cab] > h3 { color: rgb(220 38 38); }
[data-estudio-log-grupo="vencidas"] > [data-estudio-log-grupo-cab] > b { background-color: rgb(220 38 38); color: #FFFFFF; }
[data-estudio-log-grupo="hoy"] > [data-estudio-log-grupo-cab] { --punto: rgb(245 158 11); }
[data-estudio-log-grupo="manana"] > [data-estudio-log-grupo-cab] { --punto: rgb(251 199 17); }
[data-estudio-log-grupo="sin-fecha"] > [data-estudio-log-grupo-cab] { --punto: transparent; }
[data-estudio-log-grupo="sin-fecha"] > [data-estudio-log-grupo-cab]::before { box-shadow: inset 0 0 0 1.5px rgb(var(--slate-8)); }

body.dark [data-estudio-log-grupo="vencidas"] > [data-estudio-log-grupo-cab] > h3 {
  color: rgb(248 113 113);
}

/* --- una fila --- */
[data-estudio-log-lista] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

[data-estudio-log-fila] {
  border-radius: 0.55rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
  transition: border-color 0.12s;
}

[data-estudio-log-fila]:hover {
  border-color: rgb(var(--slate-8));
}

[data-estudio-log-fila][data-nivel="vencida"],
[data-estudio-log-fila][data-nivel="varada"] {
  border-left: 3px solid rgb(220 38 38);
}

[data-estudio-log-fila][data-abierta="1"] {
  border-color: rgb(251 199 17 / 0.6);
}

button[data-estudio-log-resumen] {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 0;
  background: none;
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* La flechita: apunta a la derecha cerrada y abajo abierta. */
button[data-estudio-log-resumen]::after {
  content: "\25B8";
  grid-area: flecha;
  justify-self: end;
  color: rgb(var(--slate-10));
  transition: transform 0.15s;
}

[data-estudio-log-fila][data-abierta="1"] button[data-estudio-log-resumen]::after {
  transform: rotate(90deg);
}

[data-estudio-punto] {
  grid-area: punto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background-color: rgb(34 197 94);
}

[data-estudio-log-fila][data-urgencia="demorada"] [data-estudio-punto] {
  background-color: rgb(245 158 11);
}

[data-estudio-log-fila][data-urgencia="varada"] [data-estudio-punto],
[data-estudio-log-fila][data-nivel="vencida"] [data-estudio-punto] {
  background-color: rgb(220 38 38);
}

[data-estudio-log-fila][data-urgencia="atendida"] [data-estudio-punto] {
  background-color: rgb(var(--slate-8));
}

/* Cada columna es una pila de dos renglones que se cortan con puntos si no
   entran: la fila no se parte nunca en la compu. */
[data-estudio-col-entrega],
[data-estudio-col-cliente],
[data-estudio-col-lugar] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

[data-estudio-col-entrega] { grid-area: entrega; }
[data-estudio-col-cliente] { grid-area: cliente; }
[data-estudio-col-lugar] { grid-area: lugar; }
[data-estudio-col-vendedor] { grid-area: vendedor; display: none; }
[data-estudio-col-estado] { grid-area: estado; }

/* En tres renglones, cuando y donde van cada uno en una linea. */
@container (max-width: 43.99rem) {
  [data-estudio-col-entrega],
  [data-estudio-col-lugar] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.5rem;
  }
}

@container (min-width: 62rem) {
  [data-estudio-col-vendedor] {
    display: block;
  }
}

[data-estudio-col-entrega] > *,
[data-estudio-col-cliente] > small,
[data-estudio-col-lugar] > *,
[data-estudio-col-vendedor],
[data-estudio-col-estado],
[data-estudio-linea] > strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-estudio-col-entrega] > strong {
  font-size: 0.92rem;
  font-weight: 700;
}

[data-estudio-col-entrega="consulta"] > strong {
  color: rgb(139 92 246);
}

body.dark [data-estudio-col-entrega="consulta"] > strong {
  color: rgb(167 139 250);
}

[data-estudio-log-fila][data-nivel="vencida"] [data-estudio-col-entrega] > strong {
  color: rgb(220 38 38);
}

body.dark [data-estudio-log-fila][data-nivel="vencida"] [data-estudio-col-entrega] > strong {
  color: rgb(248 113 113);
}

[data-estudio-col-entrega] > small,
[data-estudio-col-cliente] > small,
[data-estudio-col-lugar] > small {
  font-size: 0.78rem;
  color: rgb(var(--slate-11));
}

[data-estudio-linea] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

[data-estudio-linea] > strong {
  font-size: 0.95rem;
  font-weight: 700;
}

[data-estudio-col-lugar] > span,
[data-estudio-col-vendedor] {
  font-size: 0.86rem;
}

[data-estudio-col-vendedor] {
  color: rgb(var(--slate-11));
}

/* Colgado de la pantalla: el modal de cierre marca sus campos con
   data-estudio-falta, y suelto les ponia cursiva a todos los rotulos. */
[data-estudio-pantalla] [data-estudio-falta] {
  font-style: italic;
  color: rgb(var(--slate-10)) !important;
}

[data-estudio-col-estado] {
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(var(--slate-11));
}

[data-estudio-col-estado="vencida"],
[data-estudio-col-estado="varada"] {
  font-weight: 800;
  color: rgb(220 38 38);
}

body.dark [data-estudio-col-estado="vencida"],
body.dark [data-estudio-col-estado="varada"] {
  color: rgb(248 113 113);
}

[data-estudio-col-estado="demorada"] {
  color: rgb(180 83 9);
}

body.dark [data-estudio-col-estado="demorada"] {
  color: rgb(251 191 36);
}

[data-estudio-col-estado="atendida"] {
  font-weight: 600;
  color: rgb(21 128 61);
}

body.dark [data-estudio-col-estado="atendida"] {
  color: rgb(74 222 128);
}

[data-estudio-sin-abrir] {
  flex: none;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  background-color: rgb(251 199 17 / 0.25);
  color: rgb(var(--slate-12));
}

/* --- el detalle, al abrir la fila --- */
[data-estudio-log-detalle] {
  padding: 0 0.9rem 0.85rem 2.4rem;
}

[data-estudio-log-quien] {
  margin: 0;
  font-size: 0.8rem;
  color: rgb(var(--slate-11));
}

/* La nota tal cual la escribio el bot o el vendedor, con sus renglones. */
[data-estudio-nota] {
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background-color: rgb(var(--surface-2));
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-estudio-log-pie] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

button[data-estudio-boton] {
  padding: 0.4rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--surface-1));
  color: rgb(var(--slate-12));
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

button[data-estudio-boton="cargada"] {
  border-color: rgb(22 163 74);
  background-color: rgb(22 163 74);
  color: #FFFFFF;
}

/* "Ir a Chatwoot", arriba a la derecha, solo en la pestaña propia. */
button[data-estudio-boton="chatwoot"] {
  position: absolute;
  top: 0;
  right: 0;
}

button[data-estudio-boton]:disabled {
  opacity: 0.55;
  cursor: wait;
}

[data-estudio-atendidas] {
  margin-top: 1.75rem;
}

[data-estudio-atendidas] > summary {
  margin-bottom: 0.6rem;
  cursor: pointer;
  font-weight: 700;
}

/* --- la columna de la derecha --- */
/* El "Resumen": una sola tarjeta con tres partes separadas por una linea fina.
   Hasta el 02-oct eran tres cajas con una raya de color cada una (amarilla,
   violeta, verde) y le competian a la lista. Sigue a la vista al bajar. */
[data-estudio-log-lado] {
  position: sticky;
  top: 1rem;
}

[data-estudio-log-contexto] {
  padding: 0.35rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
}

[data-estudio-log-caja] {
  padding: 0.85rem 0 0.9rem;
}

[data-estudio-log-caja] + [data-estudio-log-caja] {
  border-top: 1px solid rgb(var(--slate-5));
}

[data-estudio-log-caja] > h3 {
  margin-bottom: 0.55rem;
}

button[data-estudio-log-opcion] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: none;
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button[data-estudio-log-opcion="vendedor"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

button[data-estudio-log-opcion]:hover {
  background-color: rgb(var(--slate-3));
}

button[data-estudio-log-opcion][data-activo="1"] {
  background-color: rgb(251 199 17 / 0.16);
}

button[data-estudio-log-opcion] > strong,
[data-estudio-log-caja] [data-estudio-linea] > strong {
  font-size: 0.9rem;
  font-weight: 700;
}

button[data-estudio-log-opcion][data-falta="1"] > strong,
button[data-estudio-log-opcion][data-falta="1"] [data-estudio-linea] > strong {
  font-style: italic;
  color: rgb(var(--slate-11));
}

[data-estudio-log-caja] [data-estudio-linea] {
  justify-content: space-between;
}

[data-estudio-log-caja] [data-estudio-linea] > span {
  flex: none;
  font-size: 0.8rem;
  color: rgb(var(--slate-11));
}

[data-estudio-barra] {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background-color: rgb(var(--slate-4));
  overflow: hidden;
}

[data-estudio-barra] > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: rgb(251 199 17);
}

button[data-estudio-log-opcion][data-falta="1"] [data-estudio-barra] > i {
  background-color: rgb(var(--slate-8));
}

[data-estudio-marcas] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

b[data-estudio-marca] {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

b[data-estudio-marca="espera"] {
  background-color: rgb(245 158 11 / 0.2);
  color: rgb(var(--slate-12));
}

b[data-estudio-marca="varada"] {
  background-color: rgb(220 38 38);
  color: #FFFFFF;
}

b[data-estudio-marca="cargada"] {
  background-color: rgb(34 197 94 / 0.2);
  color: rgb(var(--slate-12));
}

[data-estudio-log-grande] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

[data-estudio-log-grande] > strong {
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

[data-estudio-log-grande] > span {
  font-size: 0.85rem;
  color: rgb(var(--slate-11));
}

[data-estudio-log-caja] > p[data-estudio-vacio] {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}

/* --- la ficha de despacho --- */
/* Una fila por dato, con su boton de copiar: es lo que se tipea en Loop4. */
[data-estudio-ficha] {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  margin: 0.65rem 0;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--slate-6));
  overflow: hidden;
}

[data-estudio-ficha-fila] {
  display: contents;
}

[data-estudio-ficha-fila] > span {
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--surface-1));
}

[data-estudio-ficha-fila]:last-child > span {
  border-bottom: 0;
}

[data-estudio-ficha-etiqueta] {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgb(var(--slate-11));
}

[data-estudio-ficha-valor] {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

[data-estudio-ficha-acciones] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

button[data-estudio-boton="chico"],
a[data-estudio-boton="chico"] {
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
  color: rgb(var(--slate-12)) !important;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
}

button[data-estudio-boton="chico"]:hover,
a[data-estudio-boton="chico"]:hover {
  border-color: rgb(251 199 17 / 0.7);
}

button[data-estudio-boton="copiar-todo"] {
  border-color: rgb(251 199 17 / 0.7);
}

[data-estudio-ver-nota] {
  margin-top: 0.6rem;
}

[data-estudio-ver-nota] > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: rgb(var(--slate-11));
}

/* --- pantallas mas chicas --- */
/* Sin lugar para la columna: el contexto pasa abajo, en cajas lado a lado. Las
   filas se acomodan solas, por el ancho de la lista (arriba). */
@media (max-width: 1100px) {
  [data-estudio-log-grid] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-estudio-log-lado] {
    position: static;
  }

  [data-estudio-log-contexto] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: 1.5rem;
  }

  [data-estudio-log-caja] + [data-estudio-log-caja] {
    border-top: 0;
  }
}

/* La semana, en una lista angosta, se desliza de costado dentro de su caja: la
   pagina no. Cada dia conserva un ancho en el que se lee el cliente. */
@container (max-width: 44rem) {
  [data-estudio-dias],
  [data-estudio-dias="6"],
  [data-estudio-dias="7"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9.5rem, 1fr);
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
}

/* En el celular: las casillas de a dos o tres. */
@media (max-width: 767px) {
  [data-estudio-log-cifras] {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }

  button[data-estudio-cifra] > strong {
    font-size: 1.9rem;
  }

  [data-estudio-log-detalle] {
    padding-left: 0.9rem;
  }

  [data-estudio-ficha] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-estudio-ficha-etiqueta] {
    grid-column: 1 / -1;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}

/* --- el Inicio ------------------------------------------------------------- */
/* Tarjetas grandes: cada una es un destino. La primera del rol va con el tinte
   del acento; el numero, arriba a la derecha y en ambar solo si es una alarma
   con algo. */
[data-estudio-tarjetas] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

[data-estudio-tarjeta] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 7rem;
  padding: 1.1rem 1.2rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
}

button[data-estudio-tarjeta] {
  cursor: pointer;
}

button[data-estudio-tarjeta]:hover {
  border-color: rgb(251 199 17 / 0.7);
}

[data-estudio-tarjeta][data-principal="1"] {
  border-color: rgb(251 199 17 / 0.55);
  background-color: rgb(251 199 17 / 0.08);
}

[data-estudio-tarjeta] > strong {
  padding-right: 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

[data-estudio-tarjeta] > span {
  font-size: 0.85rem;
  line-height: 1.35;
  color: rgb(var(--slate-11));
}

[data-estudio-tarjeta] > b {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

button[data-estudio-alarma] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.1rem;
  border: 0;
  border-bottom: 1px solid rgb(var(--slate-6));
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

button[data-estudio-alarma]:last-child {
  border-bottom: 0;
}

button[data-estudio-alarma]:hover > span {
  text-decoration: underline;
}

/* "Tu seguimiento": lo primero que ve el vendedor. Enmarcado con el acento
   porque es lo que tiene que hacer hoy, no un menu. */
[data-estudio-seguimiento] {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(251 199 17 / 0.55);
  background-color: rgb(251 199 17 / 0.07);
}

[data-estudio-seguimiento] > h2 {
  margin: 0 0 0.25rem;
}

[data-estudio-seguimiento] > h3 {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--slate-11));
}

button[data-estudio-fila] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  width: 100%;
  padding: 0.55rem 0.2rem;
  border: 0;
  border-bottom: 1px solid rgb(var(--slate-6));
  background: none;
  color: rgb(var(--slate-12));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button[data-estudio-fila]:hover > strong {
  text-decoration: underline;
}

button[data-estudio-fila] > span {
  font-size: 0.85rem;
  color: rgb(var(--slate-11));
}

button[data-estudio-fila="esperando"] > span {
  font-weight: 600;
  color: rgb(245 158 11);
}

/* En claro, el ambar de siempre no se lee sobre el lila: uno mas oscuro. */
body:not(.dark) button[data-estudio-fila="esperando"] > span {
  color: rgb(180 83 9);
}

/* "Logística te pidió": en violeta, como las consultas del panel de
   logística. Es lo único del seguimiento que frena una entrega. */
button[data-estudio-fila="logistica"] > span {
  font-weight: 600;
  color: rgb(109 40 217);
}

body.dark button[data-estudio-fila="logistica"] > span {
  color: rgb(196 181 253);
}

/* --- "Tus ventas", en el Inicio del vendedor ------------------------------ */
/* Arriba el volumen del mes —de eso depende lo que cobra—; abajo las ventas
   de los últimos 14 días con lo que hizo logística. Tarjeta neutra: el borde
   de color es del seguimiento, que es lo que hay que hacer. */
[data-estudio-ventas] {
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--slate-6));
  background-color: rgb(var(--solid-1));
}

[data-estudio-ventas] > h2 {
  margin: 0 0 0.35rem;
}

[data-estudio-ventas] > h3 {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--slate-11));
}

[data-estudio-ventas-mes] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

[data-estudio-ventas-mes] > strong {
  font-family: "Jost", "Source Sans 3", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}

[data-estudio-ventas-mes] > span {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgb(var(--slate-12));
}

button[data-estudio-fila="venta"] > strong > small {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgb(var(--slate-11));
}

/* En el celular el producto va en su renglón: al lado del nombre se partía a
   mitad de palabra ("H-" / "25"). */
@media (max-width: 767px) {
  button[data-estudio-fila="venta"] > strong > small {
    display: block;
    margin: 0.15rem 0 0;
  }
}

/* El estado, con los colores del panel de logística: verde cargada, ámbar
   la que ya demora, rojo la varada. La reciente y la respondida, en gris. */
button[data-estudio-fila="venta"][data-estudio-estado="cargada"] > span {
  font-weight: 600;
  color: rgb(21 128 61);
}

body.dark button[data-estudio-fila="venta"][data-estudio-estado="cargada"] > span {
  color: rgb(74 222 128);
}

button[data-estudio-fila="venta"][data-estudio-urgencia="demorada"] > span {
  font-weight: 600;
  color: rgb(180 83 9);
}

body.dark button[data-estudio-fila="venta"][data-estudio-urgencia="demorada"] > span {
  color: rgb(251 191 36);
}

button[data-estudio-fila="venta"][data-estudio-urgencia="varada"] > span {
  font-weight: 800;
  color: rgb(220 38 38);
}

body.dark button[data-estudio-fila="venta"][data-estudio-urgencia="varada"] > span {
  color: rgb(248 113 113);
}

button[data-estudio-ver-todas] {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--slate-12));
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 767px) {
  [data-estudio-tarjetas] {
    grid-template-columns: 1fr;
  }
}

/* --- a quien le escribis: nota privada o mensaje al cliente -------------- */
/* Chatwoot distingue los dos modos con un tinte ambar apenas visible, y en
   modo claro ni eso: la regla de "el cuadro de escritura" de mas arriba le
   pisa el fondo con !important, a los dos modos por igual. Un vendedor apurado
   no ve la diferencia, y un mensaje que queria dejar para el equipo le llega al
   cliente por WhatsApp.
   Ahora los dos modos se distinguen por TRES cosas a la vez, porque una sola se
   pasa por alto: el color, el tipo de borde (lleno o punteado) y una franja que
   lo dice con palabras. La franja del modo cliente lleva el nombre de a quien le
   llega; lo pone acciones-ui.js en data-estudio-destino. Hasta que llega de la
   API, se muestra la generica. La clase `is-private` la mantiene Chatwoot, asi
   que el cambio de modo no depende del script. */
div.reply-box {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgb(34 197 94) !important;
}

div.reply-box.is-private {
  border-style: dashed !important;
  border-color: rgb(245 158 11) !important;
}

/* En claro, el fondo ambar de la nota vuelve, por encima de la regla que lo
   borraba. Mas especifica (dos clases) y posterior: gana. */
body:not(.dark) div.reply-box.is-private {
  background-color: rgb(255 247 224) !important;
}

/* La franja. Va DENTRO del borde, arriba de todo, con las esquinas de adentro
   del cuadro redondeado. No se usa overflow:hidden en el cuadro para
   redondearla: cortaria el selector de emojis, que Chatwoot dibuja
   sobresaliendo. */
div.reply-box::before {
  content: "\1F4AC  Mensaje al cliente \00B7  no es una nota privada";
  display: block;
  padding: 0.4rem 0.8rem;
  border-radius: calc(0.75rem - 2px) calc(0.75rem - 2px) 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  background-color: rgba(34, 197, 94, 0.16);
  color: rgb(134 239 172);
}

div.reply-box[data-estudio-destino]:not(.is-private)::before {
  content: "\1F4AC  " attr(data-estudio-destino);
}

div.reply-box.is-private::before {
  content: "\1F512  Nota privada \00B7  solo la ve el equipo, no el cliente";
  background-color: rgba(245, 158, 11, 0.18);
  color: rgb(252 211 77);
}

body:not(.dark) div.reply-box::before {
  color: rgb(21 128 61);
}

body:not(.dark) div.reply-box.is-private::before {
  color: rgb(146 64 14);
}

/* --- la pregunta antes del primer mensaje al cliente --------------------- */
/* Chica y al centro: una sola decision, sin nada mas que mirar. El boton de
   enviar es verde como el marco del modo cliente, para que se lea como la
   misma cosa. */
[data-estudio-confirma] {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(20, 10, 24, 0.72);
}

[data-estudio-confirma-caja] {
  width: 100%;
  max-width: 28rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(90 52 104);
  border-top: 4px solid rgb(34 197 94);
  background-color: rgb(68 38 77);
  padding: 1.25rem 1.4rem 1.1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-estudio-confirma-caja] h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
}

[data-estudio-confirma-quien] {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgb(134 239 172);
  overflow-wrap: anywhere;
}

/* Lo que va a salir, en una cita: se lee antes de mandarlo. */
[data-estudio-confirma-caja] blockquote {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid rgb(34 197 94);
  border-radius: 0 0.4rem 0.4rem 0;
  background-color: rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgb(226 216 231);
  overflow-wrap: anywhere;
}

[data-estudio-confirma-aclara] {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  color: rgb(190 176 198);
}

[data-estudio-confirma-pie] {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

[data-estudio-confirma-pie] button {
  padding: 0.55rem 1.1rem;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

[data-estudio-confirma-no] {
  background-color: transparent;
  color: rgb(226 216 231);
  border: 1px solid rgb(90 52 104);
}

/* El foco arranca en Cancelar: que se vea donde esta, porque es lo que hace
   el Enter. */
[data-estudio-confirma-no]:focus-visible,
[data-estudio-confirma-si]:focus-visible {
  outline: 2px solid rgb(251 199 17);
  outline-offset: 2px;
}

[data-estudio-confirma-si] {
  background-color: rgb(30 122 68);
  color: #FFFFFF;
  border: 1px solid rgb(38 148 84);
}

/* --- el panel derecho, mas ancho ----------------------------------------- */
/* Venia clavado en `max-w-sm` (384px). Buena parte de lo apretujado de la ficha
   del contacto salia de ahi: nueve atributos con rotulo y valor no entran
   comodos en 24rem. */
div[class*="bg-n-surface-2"][class*="max-w-sm"] {
  max-width: 27rem !important;
}

/* --- los atributos del panel derecho ------------------------------------- */
/* El valor se clickea como si fuera el lapiz: lo marca `acciones-ui.js` y aca
   se le pone el cursor que lo anuncia. Sin esto el vendedor ve unos guiones,
   les hace clic, no pasa nada, y concluye que el campo esta roto. */
[data-estudio-valor] {
  cursor: pointer !important;
}

[data-estudio-valor]:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* `codigo_origen` lo escribe el bot y dice de que anuncio vino el lead: es la
   clave de la trazabilidad de marketing. Se esconden el lapiz y el tacho —no se
   deshabilitan: un boton gris invita a preguntar por que esta gris— y el valor
   deja de ofrecerse como editable. */
[data-estudio-campo-ro] button {
  display: none !important;
}

[data-estudio-campo-ro] p {
  cursor: default !important;
  opacity: 0.75;
}

/* --- "Resumen bot": ni verde ni ambar, porque no cierra nada ------------- */
/* Las otras dos son decisiones que terminan la conversacion; esta es una
   herramienta que se puede apretar diez veces sin consecuencia. Por eso va
   DELINEADA y no rellena: en una fila de botones, el relleno es lo que se lee
   como "esto hace algo definitivo". */
[data-estudio-resumen] {
  background-color: transparent !important;
  color: rgb(226 216 231) !important;
  border: 1px solid rgb(90 52 104) !important;
  font-weight: 500 !important;
}

[data-estudio-resumen]:hover {
  background-color: rgb(90 52 104) !important;
  color: #FFFFFF !important;
}

/* Los tres botones venian pegados, leyendose como una sola pastilla partida.
   El margen va en los NUESTROS, que son los que se insertan a la izquierda: asi
   separa sin tener que tocar el contenedor de Chatwoot. */
[data-estudio-resumen],
[data-estudio-venta] {
  margin-right: 0.5rem !important;
}

/* Mientras consulta los datos al servidor. Sin esto el vendedor no sabe si el
   clic entro y aprieta de nuevo. */
[data-estudio-venta]:disabled,
[data-estudio-resumen]:disabled {
  opacity: 0.6 !important;
  cursor: progress !important;
}

/* --- el "leyendo" del resumen ------------------------------------------- */
/* El resumen tarda lo que tarda Claude en leer la conversacion: entre tres y
   diez segundos. Ese hueco sin nada a la vista se lee como "no anduvo", y es
   justo lo que venia pasando — el vendedor apretaba, no veia nada, y volvia a
   apretar. Antes el aviso era un `alert` del navegador, que aparece arriba de
   todo, tapa la pantalla y hay que sacarlo a mano para seguir trabajando.

   El giro va en un ::before del propio boton y no en un nodo aparte: Vue
   redibuja esa fila cada vez que cambia la conversacion y se llevaria puesto
   cualquier elemento que le colguemos al lado. */
[data-estudio-resumen][data-estudio-cargando="1"] {
  opacity: 1 !important;
}

[data-estudio-resumen][data-estudio-cargando="1"]::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.45em;
  vertical-align: -0.06em;
  border: 2px solid rgb(226 216 231 / 0.3);
  border-top-color: rgb(var(--estudio-acento-texto));
  border-radius: 50%;
  animation: estudio-gira 0.7s linear infinite;
}

@keyframes estudio-gira { to { transform: rotate(360deg); } }

/* El acuse de que la nota ya esta escrita. Dura tres segundos: es un aviso de
   que termino, no un estado en el que el boton se quede. */
[data-estudio-resumen][data-estudio-listo="1"] {
  border-color: rgb(var(--estudio-acento-texto)) !important;
  color: rgb(var(--estudio-acento-texto)) !important;
  opacity: 1 !important;
}

/* Y si fallo, se dice ahi mismo. Un boton que vuelve a su estado normal despues
   de un error no distingue "no anduvo" de "no lo apretaste". */
[data-estudio-resumen][data-estudio-error="1"] {
  border-color: rgb(248 113 113) !important;
  color: rgb(252 165 165) !important;
  opacity: 1 !important;
}

/* Sin esto el giro sigue dando vueltas para quien pidio no ver animaciones. */
@media (prefers-reduced-motion: reduce) {
  [data-estudio-resumen][data-estudio-cargando="1"]::before {
    animation: none;
    border-top-color: rgb(var(--estudio-acento-texto));
  }
}

/* AMBAR, no verde — y el verde se lo lleva "Cerrar venta", que esta al lado.
   El color tiene que decir CUAL DE LAS DOS SALIDAS es, no "esta accion termina
   bien": las dos terminan bien. Verde es la que deja plata; ambar es la que
   cierra sin venta, que no es un error pero tampoco es lo que se busca.
   Antes este boton era el verde y era el unico: con dos botones al lado, dos
   verdes serian indistinguibles justo en el momento que no hay que equivocarse.
   El ambar es el mismo de "pendiente", asi que la pantalla sigue teniendo tres
   colores y no cinco. */
[data-estudio-op="ok"] {
  background-color: rgb(166 124 0) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  outline-color: rgb(200 150 0) !important;
}

[data-estudio-op="ok"]:hover {
  background-color: rgb(194 146 0) !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(133 99 0) !important;
}

[data-estudio-op="ok"][data-estudio-flecha]:hover {
  background-color: rgb(166 124 0) !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 */
}

/* --- 3e) la pestana "Todos", escondida a los agentes ---------------------- */
/* El rol lo marca `acciones-ui.js` en el elemento raiz. Solo se esconde a los
   agentes: el administrador la necesita para ver la bandeja completa.

   ⚠️ NO es un control de acceso. La conversacion sigue alcanzable por el
   buscador, por la URL directa y por la API. Chatwoot community no tiene forma
   de impedirlo. Esto corta el ACCIDENTE —entrar a la conversacion de otro y
   contestar sin darse cuenta— y nada mas. */

:root[data-estudio-rol="agent"] [data-estudio-tab="todos"] {
  display: none !important;
}

/* --- 3f) el panel derecho: mismo tono, y jerarquia por uso --------------- */
/* La columna es `div.bg-n-surface-2.max-w-sm` — LEIDO del DOM: fixed, 320px de
   ancho, fondo 20 20 20. Se pide `max-w-sm` ademas de la clase de fondo porque
   `bg-n-surface-2` la usan otros paneles y no hay que pintarlos todos. */

div[class*="bg-n-surface-2"][class*="max-w-sm"] {
  background-color: rgb(68 38 77);
}

div[class*="bg-n-surface-2"][class*="max-w-sm"] [class*="border-n-"] {
  border-color: rgb(90 52 104) !important;
}

/* Los acordeones traen fondo `bg-n-slate-2` (casi negro), que sobre el morado
   se ve como un parche sucio. Se pasan a un velo claro: se leen como fichas
   apoyadas sobre el morado.

   ⚠️ El `:not([data-estudio-panel])` es imprescindible: sin el, esta regla
   —dos selectores de atributo mas descendencia— le GANA por especificidad a la
   del nivel 1 de mas abajo, y las secciones importantes salian del mismo color
   que el resto. Fue exactamente lo que paso. */
div[class*="bg-n-surface-2"][class*="max-w-sm"] [class*="bg-n-slate-2"]:not([data-estudio-panel]) {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* El fondo base de las fichas marcadas, con la MISMA especificidad que las
   reglas de nivel, para que la que gane sea la ultima y no la mas rebuscada. */
[data-estudio-panel] {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Las FILAS de los atributos (Rubro, Localidad, m³...) traen fondo propio
   —rgb(20,20,20) y rgb(10,10,10) alternados— y NO tienen ninguna clase `bg-*`:
   por eso el morado de la columna no las tapaba y "Informacion de la
   conversacion" seguia negra al expandirla. No encontre de donde sale ese
   fondo, asi que se lo neutraliza donde molesta.
   El `:not([data-estudio-panel])` es porque el boton del acordeon TAMBIEN
   lleva `drag-handle`, y ese ya tiene su color por nivel. */
div[class*="bg-n-surface-2"][class*="max-w-sm"] .drag-handle:not([data-estudio-panel]) {
  background-color: transparent !important;
}

/* --- el icono, comun a todas las secciones y campos marcados ------------- */
/* Va como `mask` y no como `content: url()` porque asi el color lo pone el CSS
   —una sola forma sirve para los tres niveles— y ademas hereda el tamaño.
   Chatwoot usa `i-lucide-*` compilados por Tailwind: no se pueden inventar
   clases nuevas, de ahi el SVG embebido. */
[data-estudio-panel]::before,
[data-estudio-campo]::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  margin-inline-end: 0.5rem;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--estudio-ico) no-repeat center / contain;
  mask: var(--estudio-ico) no-repeat center / contain;
}

[data-estudio-panel="acciones"], [data-estudio-campo="acciones"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>"); }
[data-estudio-panel="info"], [data-estudio-campo="info"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M12 16v-5M12 8h.01'/></svg>"); }
[data-estudio-panel="notas"], [data-estudio-campo="notas"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v11l-5 5H4zM8 9h8M8 13h5'/></svg>"); }
[data-estudio-panel="anteriores"], [data-estudio-campo="anteriores"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7M3 4v5h5M12 8v4l3 2'/></svg>"); }
[data-estudio-panel="macros"], [data-estudio-campo="macros"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h7l-1 8 9-12h-7z'/></svg>"); }
[data-estudio-panel="atributos"], [data-estudio-campo="atributos"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8'/></svg>"); }
[data-estudio-panel="adjuntos"], [data-estudio-campo="adjuntos"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.4 11 12.3 20.2a6 6 0 0 1-8.5-8.5l8.6-8.6a4 4 0 0 1 5.7 5.7l-8.6 8.6a2 2 0 0 1-2.8-2.9l8.5-8.4'/></svg>"); }
[data-estudio-panel="participantes"], [data-estudio-campo="participantes"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/></svg>"); }
[data-estudio-panel="etiquetas"], [data-estudio-campo="etiquetas"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V4a2 2 0 0 1 2-2h8l8.6 8.6a2 2 0 0 1 0 2.8M7 7h.01'/></svg>"); }
[data-estudio-panel="agente"], [data-estudio-campo="agente"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8M17 11l2 2 4-4'/></svg>"); }
[data-estudio-panel="equipo"], [data-estudio-campo="equipo"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/></svg>"); }
[data-estudio-panel="prioridad"], [data-estudio-campo="prioridad"] { --estudio-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/></svg>"); }

/* --- NIVEL 1: lo que se toca en CADA conversacion ------------------------ */
/* Etiquetar y asignar, y los datos que levanto el bot (m³, bomba, localidad,
   planta). Son las dos secciones que un vendedor abre siempre, asi que llevan
   el amarillo de la marca, borde propio y peso. */
/* El `*` no es exceso: el texto del acordeon vive en un <span> con su propia
   clase `text-n-slate-12`, que le gana al color heredado del boton. Sin el, la
   ficha quedaba pintada y la palabra blanca. */
[data-estudio-panel="acciones"],
[data-estudio-panel="acciones"] *,
[data-estudio-panel="info"],
[data-estudio-panel="info"] * {
  color: rgb(251 199 17) !important;
  font-weight: 600;
}

[data-estudio-panel="acciones"],
[data-estudio-panel="info"] {
  background-color: rgba(238, 213, 0, 0.10) !important;
  box-shadow: inset 3px 0 0 rgb(251 199 17);
}

/* --- NIVEL 2: lo que se usa algunas veces ------------------------------- */
[data-estudio-panel="notas"],
[data-estudio-panel="notas"] *,
[data-estudio-panel="anteriores"],
[data-estudio-panel="anteriores"] *,
[data-estudio-panel="macros"],
[data-estudio-panel="macros"] * {
  color: rgb(235 228 240) !important;
}

/* --- NIVEL 3: casi nunca ------------------------------------------------- */
/* Atenuadas, NO escondidas: "Adjuntos" hace falta el dia que el cliente manda
   un plano, y no queremos que ese dia no aparezca. */
[data-estudio-panel="atributos"],
[data-estudio-panel="atributos"] *,
[data-estudio-panel="adjuntos"],
[data-estudio-panel="adjuntos"] *,
[data-estudio-panel="participantes"],
[data-estudio-panel="participantes"] * {
  color: rgb(168 150 178) !important;
  font-weight: 400;
}

/* --- los campos DENTRO de "Acciones de conversacion" -------------------- */
/* Cuatro etiquetas de texto plano, sin nada que las distinga. Las dos que
   importan —clasificar y quien atiende— van en amarillo; derivar a un equipo y
   la prioridad son ocasionales y quedan en lila. */
[data-estudio-campo] {
  display: flex;
  align-items: center;
}

[data-estudio-campo="etiquetas"],
[data-estudio-campo="agente"] {
  color: rgb(251 199 17) !important;
  font-weight: 600;
}

[data-estudio-campo="equipo"],
[data-estudio-campo="prioridad"] {
  color: rgb(214 200 222) !important;
}

/* --- 3g) las barras de cabecera, en un morado apagado ------------------- */
/* TRES niveles de fondo, y el del medio existe por una razon concreta:
     · morado pleno  -> los dos paneles laterales (navegacion y contexto)
     · morado apagado -> estas dos barras (controles del contenido)
     · negro          -> el contenido que se lee
   Con las barras en morado PLENO se probo y quedaba mal: la banda de arriba une
   las dos columnas laterales y todo se lee como un recuadro con un agujero
   negro en el medio. Y todo negro no muestra jerarquia ninguna. El morado
   apagado las separa del contenido sin cerrar el marco.

   Se atacan por las clases SEMANTICAS de Chatwoot (`conversations-list-wrap`,
   `conversation-details-wrap`), no por la sopa de utilitarias: sobreviven mucho
   mejor a una actualizacion. Los hijos se identifican por un fragmento de
   clase para no tener que escapar `h-[3.25rem]` ni `border-b-n-weak`. */

.conversations-list-wrap > div[class*="h-[3.25rem]"],
.conversation-details-wrap > div[class*="border-b-n-weak"] {
  background-color: rgb(42 30 46);
  /* El morado PLENO queda solo en la linea de abajo: una linea de marca de 1px
     separa la barra del contenido sin cerrar el marco. */
  border-color: rgb(90 52 104) !important;
}

/* Las pastillas de estado ("Abiertas") vienen con fondo casi negro: sobre el
   morado se ven como un agujero. Se pasan a un velo claro, igual que las
   fichas del panel derecho. */
.conversations-list-wrap > div[class*="h-[3.25rem]"] [class*="bg-n-slate-3"],
.conversation-details-wrap > div[class*="border-b-n-weak"] [class*="bg-n-slate-3"] {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- 3h) el interruptor de apariencia, DE VUELTA ------------------------ */
/* Estuvo escondido un tiempo porque el modo claro estaba roto —las superficies
   seguian oscuras y los textos se invertian—, y esconderlo dejaba a quien ya
   habia elegido "claro" sin forma de volver: la eleccion vive en el navegador
   de cada uno (`localStorage.color_scheme`), no en la cuenta.
   Se arreglo el modo claro (bloque 2b) en vez de tapar el boton. */

/* --- 4) lo funcional que ya probamos en el laboratorio -------------------- */

/* Lo desatendido esta OCULTO (ver el display:none), asi que su color es
   historico: cuando el acento era rojo, el amarillo servia para separar "esto
   reclama atencion" del resto. Ahora el acento ES amarillo y esa distincion
   dejo de existir. Si algun dia se vuelve a mostrar, hay que buscarle otra
   senal — un punto, un peso, no un color. */
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.

   "Llamadas" (`/calls`) es la telefonia de Chatwoot: atender y hacer llamadas
   de voz dentro del inbox. En este build community **el modelo `Channel::Voice`
   no existe** —comprobado con `defined?(Channel::Voice)`—, asi que ninguna
   bandeja puede ser de voz y la seccion no puede tener contenido. El front
   igual trae la interfaz (hay un FloatingCallWidget en el bundle), que es por
   lo que el item aparece.
   ⚠️ Antes esta linea decia `a[href*="/voice"]` y no coincidia con NADA: el
   enlace real es `/calls`. Estuvo sin efecto desde que se escribio.
   (No confundir con la feature `voice_recorder`, que si esta activa y es otra
   cosa: el grabador de mensajes de audio del cuadro de redaccion.) */
nav li:has(.i-woot-captain),
nav li:has(a[href*="captain"]),
nav li:has(a[href*="/calls"]),
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: 251 199 17;
  --border-blue: 251 199 17;
  /* El valor por defecto del acento de TEXTO. En modo claro lo pisa el bloque
     2b, y adentro del cromo vuelve a este. */
  --estudio-acento-texto: 251 199 17;
  /* Y los pasos de TEXTO del acento. Sin esto la pestana activa quedaba con el
     subrayado amarillo y la palabra en el celeste de Chatwoot (`text-n-blue-11`),
     que es justo lo que se veia mal. */
  --blue-10: 251 199 17;
  --blue-11: 251 199 17;
}

.\!outline-n-brand { outline-color: rgb(251, 199, 17) !important; }
.\!shadow-\[var\(--widget-color\,\#2781f6\)\] { --tw-shadow-color: rgb(251, 199, 17) !important; }
.after\:bg-n-brand::after { background-color: rgb(251, 199, 17); }
.before\:\!border-t-n-brand::before { border-top-color: rgb(251, 199, 17) !important; }
.before\:bg-n-brand::before { background-color: rgb(251, 199, 17); }
.bg-\[\#2781F6\] { background-color: rgb(251, 199, 17); }
.bg-n-brand\/10 { background-color: rgba(251, 199, 17, 0.1); }
.bg-n-brand\/20 { background-color: rgba(251, 199, 17, 0.2); }
.bg-n-brand\/5 { background-color: rgba(251, 199, 17, 0.05); }
.bg-n-brand { background-color: rgb(251, 199, 17); }
.border-n-brand\/50 { border-color: rgba(251, 199, 17, 0.5); }
.border-n-brand { border-color: rgb(251, 199, 17); }
.border-t-n-brand { border-top-color: rgb(251, 199, 17); }
.checked\:bg-n-brand:checked { background-color: rgb(251, 199, 17); }
.checked\:border-n-brand:checked { border-color: rgb(251, 199, 17); }
.dark\:\!outline-n-brand:is(.dark *) { outline-color: rgb(251, 199, 17) !important; }
.dark\:bg-n-brand\/10:is(.dark *) { background-color: rgba(251, 199, 17, 0.1); }
.dark\:border-n-brand:is(.dark *) { border-color: rgb(251, 199, 17); }
.dark\:checked\:bg-n-brand:checked:is(.dark *) { background-color: rgb(251, 199, 17); }
.dark\:checked\:border-n-brand:checked:is(.dark *) { border-color: rgb(251, 199, 17); }
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) { outline-color: rgb(251, 199, 17); }
.dark\:focus\:outline-n-brand:focus:is(.dark *) { outline-color: rgb(251, 199, 17); }
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) { outline-color: rgb(251, 199, 17); }
.dark\:hover\:text-n-brand:hover:is(.dark *) { color: rgb(var(--estudio-acento-texto)); }
.dark\:ring-n-brand:is(.dark *) { --tw-ring-color: rgba(251, 199, 17, 1); }
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(251, 199, 17, 0.2); }
.focus-visible\:outline-n-brand:focus-visible { outline-color: rgb(251, 199, 17); }
.focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgba(251, 199, 17, 1); }
.focus-within\:outline-n-brand:focus-within { outline-color: rgb(251, 199, 17); }
.focus-within\:ring-n-brand:focus-within { --tw-ring-color: rgba(251, 199, 17, 1); }
.focus\:border-n-brand:focus { border-color: rgb(251, 199, 17); }
.focus\:outline-n-brand:focus { outline-color: rgb(251, 199, 17); }
.focus\:ring-n-brand:focus { --tw-ring-color: rgba(251, 199, 17, 1); }
.from-n-brand\/15 { --tw-gradient-from: rgba(251, 199, 17, 0.15); }
.from-n-brand\/15 { --tw-gradient-to: rgba(251, 199, 17, 0); }
.group:focus-within .group-focus-within\:text-n-brand { color: rgb(var(--estudio-acento-texto)); }
.group:hover .group-hover\:bg-n-brand { background-color: rgb(251, 199, 17); }
.has-\[\:focus\]\:outline-n-brand:has(:focus) { outline-color: rgb(251, 199, 17); }
.hover\:bg-n-brand\/10:hover { background-color: rgba(251, 199, 17, 0.1); }
.hover\:bg-n-brand\/80:hover { background-color: rgba(251, 199, 17, 0.8); }
.hover\:border-n-brand:hover { border-color: rgb(251, 199, 17); }
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgba(251, 199, 17, 0.2); }
.hover\:text-n-brand:hover { color: rgb(var(--estudio-acento-texto)); }
.indeterminate\:bg-n-brand:indeterminate { background-color: rgb(251, 199, 17); }
.indeterminate\:border-n-brand:indeterminate { border-color: rgb(251, 199, 17); }
.outline-n-brand { outline-color: rgb(251, 199, 17); }
.prose-a\:text-n-brand :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(var(--estudio-acento-texto)); }
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(var(--estudio-acento-texto)); }
.ring-n-brand { --tw-ring-color: rgba(251, 199, 17, 1); }
.text-link { color: rgb(var(--estudio-acento-texto)); }
.text-n-brand { color: rgb(var(--estudio-acento-texto)); }