/* ═══ SISTEMA DE DISEÑO DEL PORTAL — fuente única de color, radio y jerarquía ═══
   Se carga DESPUÉS de los <style> de cada página, así que gana por cascada sin
   necesidad de tocar los estilos que ya existen en cada archivo.

   Tres reglas que ordenan todo lo demás:
   1. La separación se hace con TONO, no con línea. Los bordes de contenedor se van.
   2. El color es escaso. El teal es el único protagonista; lo demás es gris.
   3. Los radios salen de una escala de tres, nunca de un número inventado.

   Para cambiar la identidad visual del portal completo se editan las variables de
   :root y nada más. */

:root {
  /* Lienzo y superficies — 60% de la pantalla. La elevación es un tono más claro,
     no una sombra ni un borde. */
  /* Neutros FRÍOS desde el 24-08, por la guía de jerarquía visual de Javier:
     fondo gris ultra claro, tarjetas blancas, bordes #E5E7EB. Los cálidos de
     antes se veían a prototipo al lado de Ajustes y el Inicio ya retintados. */
  --lienzo:        #F9FAFB;
  --superficie:    #FFFFFF;   /* tarjetas y paneles */
  --superficie-2:  #F3F4F6;   /* algo apoyado sobre una tarjeta */
  --superficie-3:  #EBEDF0;   /* hover e inputs */

  /* La única línea que sobrevive: divisiones internas, casi invisibles. */
  --linea:         #E5E7EB;
  --linea-fuerte:  #D1D5DB;

  /* Texto — 30%. La jerarquía se lee por brillo, no por tamaño.
     Los tres pasan 4.5:1 contra las CUATRO superficies de arriba, no solo contra
     el lienzo. La guía pedía #6B7280 para el apoyo, pero ese cae a 3.9:1 sobre
     `--superficie-3`; #4B5563 y #5F6774 son los vecinos honestos que sí pasan. */
  --txt:           #111827;   /* 17.4:1 — nombres, cifras, lo que importa */
  --txt-2:         #4B5563;   /*  6.9:1 — apoyo: empresa, fecha, meta */
  --txt-3:         #5F6774;   /*  4.9:1 — descripciones, vacíos, ruido necesario */

  /* Acción — 10%. Solo botones primarios, estado activo y lo enviado por nosotros. */
  --marca:         #089078;   /* el verde del logo, medido del PNG. Solo el símbolo. */
  --acento:        #0A6F5B;   /* 4.9:1 contra la peor superficie, 6.1:1 con letra blanca */
  --acento-suave:  #0B6B58;
  --acento-tinte:  #E6F2EF;
  --acento-txt:    #FFFFFF;   /* el texto encima del acento */
  --acento-borde:  rgba(10,111,91,0.32);

  /* Estados. Se usan como PUNTO o como texto, casi nunca como fondo. */
  --ok:            #0A6F5B;
  --alerta:        #8A5A12;
  --critico:       #9B2C2C;
  --tinte-ok:      #E6F2EF;
  --tinte-alerta:  #F6EFE2;
  --tinte-critico: #F7E9E9;

  /* Escala de radios. Tres valores, ni uno más. */
  --r-sm:  8px;    /* chips, inputs, botones */
  --r-md:  12px;   /* tarjetas y paneles */
  --r-pill: 999px; /* contadores y píldoras */

  /* ── Escala de espacio ───────────────────────────────────────────────────
     Auditado el 6 de agosto: el portal usaba 29 valores distintos de padding,
     margin y gap, y 417 de unos 700 usos no eran múltiplo de 4. El más común
     era 10px. Ese es el motivo real de que se vea amateur — no el color: cada
     pantalla inventaba su propio ritmo y ninguna coincidía con la de al lado.

     Ocho pasos alcanzan para todo. Si algo necesita un valor intermedio, casi
     siempre es que el elemento está en el nivel equivocado de la jerarquía. */
  --e-1:   4px;   /* pegado: icono y su texto, punto y su etiqueta */
  --e-2:   8px;   /* dentro de un control: chips, botones, celdas apretadas */
  --e-3:  12px;   /* entre elementos hermanos de una lista */
  --e-4:  16px;   /* respiro dentro de una tarjeta */
  --e-5:  24px;   /* entre bloques distintos de la misma pantalla */
  --e-6:  32px;   /* entre secciones */
  --e-7:  48px;   /* aire mayor: cabecera contra contenido */
  --e-8:  64px;   /* márgenes de página */

  /* Dos alturas de toque. 44px es el mínimo de Apple y 48 el de Material: por
     debajo de eso la gente falla al apretar en el teléfono, que es donde más
     se usa este portal. */
  --toque:     44px;
  --toque-alt: 48px;

  /* Densidad de fila. Se sube en una sola variable cuando una pantalla
     necesita más aire, en vez de reescribir el padding de cada celda. */
  --fila-y: 12px;
  --fila-x: 16px;
}

/* ── Base compartida ──────────────────────────────────────────────────────── */
/* Esto vivía copiado en cada pantalla: el fondo en quince archivos, la barra de
   scroll en diez, la animación de entrada en ocho. Copiado no es reutilizado —
   es quince sitios donde cambiar lo mismo y catorce donde olvidarlo. */
body { background: var(--lienzo); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: var(--r-pill); }

@keyframes portal-entrada { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.fade-in { animation: portal-entrada .3s ease both; }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ── Contenedores ─────────────────────────────────────────────────────────── */
/* El delator número uno de un diseño sin pulir: la caja con borde gris.
   Se reemplaza por una superficie un tono más clara que el lienzo. */
body .glass-card,
body .card,
body .panel {
  background: var(--superficie) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Tailwind pone estos radios en contenedores; se alinean a la escala. */
.rounded-2xl, .rounded-xl { border-radius: var(--r-md) !important; }
.rounded-lg,  .rounded-md { border-radius: var(--r-sm) !important; }

/* Los bordes viven en LA ÚNICA TRADUCCIÓN, al final del archivo. Acá había una
   copia con `body ` delante: ganaba por especificidad y volvía inútil a la otra. */

/* ── Texto ────────────────────────────────────────────────────────────────── */
/* Acá vivían tres reglas para lo mismo, con `body ` delante. Ganaban por
   especificidad sobre la traducción del final del archivo y dejaban 171 textos
   en 2.7:1 — el «hay que achicar los ojos». La traducción única vive abajo. */

/* Subtítulo de página: existe, pero no compite. */
.pagina-sub {
  font-size: 0.8125rem;
  color: var(--txt-2);
  line-height: 1.5;
  margin: var(--e-1) 0 var(--e-5);
}

/* Estados vacíos: son ruido necesario, no información. */
.empty, .vacio, .estado-vacio {
  color: var(--txt-2) !important;
  font-size: 0.8125rem !important;
}

/* ── Píldoras de estado ───────────────────────────────────────────────────── */
/* En vez de teñir la etiqueta entera, fondo neutro y un punto de color.
   El color ocupa 8 píxeles en vez de 120. */
/* La versión anterior aplanaba TODA píldora a gris, y eso mataba el verde y el
   rojo de `.badge-up` / `.badge-down` del panel: los «+17%» salían lavados.
   Ahora solo se normaliza la forma; el color lo pone quien tenga algo que decir. */
.pill, .chip-estado, .badge {
  border-radius: var(--r-pill) !important;
  border: none !important;
  font-weight: 600;
}
.pill:not([class*="-up"]):not([class*="-down"]):not([class*="ok"]):not([class*="alerta"]):not([class*="critico"]),
.chip-estado:not([class*="ok"]):not([class*="alerta"]):not([class*="critico"]) {
  background: var(--superficie-2);
  color: var(--txt-2);
}
.badge-up   { background: var(--tinte-ok) !important;      color: var(--ok) !important; }
.badge-down { background: var(--tinte-critico) !important; color: var(--critico) !important; }
.pill-punto::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: var(--e-2);
  background: currentColor;
  vertical-align: middle;
}
.es-ok      { color: var(--ok) !important; }
.es-alerta  { color: var(--alerta) !important; }
.es-critico { color: var(--critico) !important; }
.es-neutro  { color: var(--txt-2) !important; }
.es-acento  { color: var(--acento-suave) !important; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
body .btn {
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: var(--superficie-2);
  color: var(--txt-2);
}
body .btn:hover { background: var(--superficie-3); color: var(--txt); }

/* El único elemento que lleva el verde lleno. Si hay dos en pantalla, sobra uno.
   La letra va blanca: 5.1:1 sobre el acento. Antes iba en azul marino var(--superficie)
   sobre verde —2.1:1— y el botón principal era lo menos legible de la pantalla. */
body .btn-pri, body .btn-primario, body .res-btn.btn-primario {
  background: var(--acento) !important;
  border-color: var(--acento) !important;
  color: #FFFFFF !important;
}
body .btn-pri:hover, body .btn-primario:hover, body .res-btn.btn-primario:hover {
  background: var(--marca) !important;
}

/* Estado activo (pestaña, vista seleccionada): tinte, no relleno. */
body .btn-on, body .btn.activo {
  background: var(--acento-tinte) !important;
  border-color: var(--acento-borde) !important;
  color: var(--acento-suave) !important;
}

/* ── Campos ───────────────────────────────────────────────────────────────── */
body .inp, body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="number"], body input[type="search"], body input[type="password"],
body textarea, body select {
  border-radius: var(--r-sm) !important;
  background: var(--superficie-2) !important;
  border: 1px solid transparent !important;
  color: var(--txt) !important;
}
body .inp:focus, body input:focus, body textarea:focus, body select:focus {
  border-color: var(--acento-borde) !important;
  background: var(--superficie-3) !important;
  outline: none !important;
  box-shadow: none !important;
}
body ::placeholder { color: var(--txt-3) !important; }

/* Las casillas y los radios NO son campos de texto: la regla de arriba les mataba el
   `accent-color` y salían del azul por defecto del navegador en vez del teal. */
/* Las casillas se dejan como las pinta cada página (Tailwind `forms` las repinta a
   mano); lo único que se unifica es el color de marca. Forzarles fondo o borde las
   dejaba invisibles. */
/* Tailwind `forms` deja las casillas en `appearance:none` y las pinta con
   `currentColor`, así que `accent-color` no las toca: por eso seguían saliendo
   azules. Lo que manda ahí es `color`. */
body input[type="checkbox"], body input[type="radio"] {
  accent-color: var(--acento);
  color: var(--acento);
  --tw-ring-color: var(--acento-borde);
}

/* ── Íconos de canal ──────────────────────────────────────────────────────── */
/* WhatsApp verde e Instagram degradado rompen la armonía del modo oscuro.
   Se apagan a gris y recuperan su color solo al pasar el mouse. */
.icono-canal { color: var(--txt-3); transition: color .15s; }

/* El color de marca vuelve solo cuando el usuario se detiene en la fila: ahí sí
   informa de qué canal viene el mensaje, sin teñir la pantalla en reposo. */
.kanban-card:hover .icono-canal[data-canal="whatsapp"],
.conv-card:hover .icono-canal[data-canal="whatsapp"],
.fila:hover  .icono-canal[data-canal="whatsapp"],
tr:hover     .icono-canal[data-canal="whatsapp"],
.icono-canal[data-canal="whatsapp"]:hover  { color: var(--ok); }

.kanban-card:hover .icono-canal[data-canal="instagram"],
.conv-card:hover .icono-canal[data-canal="instagram"],
.fila:hover  .icono-canal[data-canal="instagram"],
tr:hover     .icono-canal[data-canal="instagram"],
.icono-canal[data-canal="instagram"]:hover { color: var(--acento); }

.kanban-card:hover .icono-canal[data-canal="web"],
.conv-card:hover .icono-canal[data-canal="web"],
.fila:hover  .icono-canal[data-canal="web"],
tr:hover     .icono-canal[data-canal="web"],
.icono-canal[data-canal="web"]:hover       { color: var(--txt-2); }

.kanban-card:hover .icono-canal[data-canal="facebook"],
.conv-card:hover .icono-canal[data-canal="facebook"],
.fila:hover  .icono-canal[data-canal="facebook"],
tr:hover     .icono-canal[data-canal="facebook"],
.icono-canal[data-canal="facebook"]:hover  { color: var(--txt-2); }

/* Acciones al final de una fila: en reposo son gris; el acento entra al pasar el
   mouse, que es cuando el usuario está decidiendo qué hacer con ese contacto. */
.accion-fila { color: var(--txt-3); transition: color .15s, background .15s; }
.accion-fila:hover { color: var(--acento-suave); background: var(--acento-tinte); }

/* Los colores sueltos de Tailwind se traducen UNA sola vez, al final del archivo.
   Acá vivía una segunda copia con `body ` delante: ganaba por especificidad y
   apagaba a gris los fondos verdes y ámbar, así que los badges de estado —lo
   único de la pantalla donde el color significa algo— salían todos iguales. */


/* ── Interruptor de vista (Leads: tablero / tabla) ──────────────────────────── */
/* Elevación por tono, sin bordes: el fondo del grupo es una capa y la vista activa
   es la capa de encima. */
.usb-vistas { display:inline-flex; background:var(--superficie-2); border-radius:var(--r-sm);
              padding:var(--e-1); gap:var(--e-1); }
.usb-vistas a { display:inline-flex; align-items:center; gap:var(--e-2); padding:var(--e-2) var(--e-3);
                border-radius:6px; font-size:.8125rem; font-weight:600; color:var(--txt-3);
                text-decoration:none; transition:background .15s, color .15s; white-space:nowrap; }
.usb-vistas a:hover { color:var(--txt-2); }
.usb-vistas a.on { background:var(--superficie-3); color:var(--txt); }
.usb-vistas .material-icons-outlined { font-size:17px; }
@media (max-width:520px) { .usb-vistas-label { display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LA ÚNICA TRADUCCIÓN

   Antes había tres bloques haciendo esto mismo repartidos por el archivo, y uno
   llevaba `body ` delante. Ese ganaba por especificidad y dejaba el texto de
   apoyo en 2.7:1 aunque los otros dos dijeran lo contrario.

   Regla: acá y en ningún otro lado. Todos los selectores con la misma
   especificidad (0,1,0), así que manda el orden y el orden es este.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Texto. Medido sobre hueso #F7F6F3:
     --txt   16.3:1   --txt-2  7.1:1   --txt-3  4.5:1
   Ningún texto del portal baja de 4.5:1. */
.text-white, .text-slate-50, .text-slate-100,
.text-slate-200, .text-slate-300            { color: var(--txt) !important; }
.text-slate-400, .text-slate-500            { color: var(--txt-2) !important; }
.text-slate-600, .text-slate-700            { color: var(--txt-2) !important; }
/* ⚠ `[class*="text-teal-"]` también encaja con `hover:text-teal-400`, porque el
   selector busca una SUBCADENA del atributo entero. Eso hacía que un botón con
   `bg-primary hover:bg-teal-500 shadow-teal-500/10` recibiera el tinte claro del
   estado hover como fondo permanente: letra blanca sobre verde pálido, 1.15:1.
   Por eso cada regla se ancla al inicio del atributo o a un espacio: así solo
   lee la clase BASE y los `hover:` quedan donde tienen que quedar. */
[class^="text-teal-"], [class*=" text-teal-"],
[class^="text-emerald-"], [class*=" text-emerald-"],
[class^="text-green-"], [class*=" text-green-"]  { color: var(--acento) !important; }
[class^="text-red-"], [class*=" text-red-"],
[class^="text-rose-"], [class*=" text-rose-"]    { color: var(--critico) !important; }
[class^="text-amber-"], [class*=" text-amber-"],
[class^="text-yellow-"], [class*=" text-yellow-"] { color: var(--alerta) !important; }
.text-primary, .text-accent                       { color: var(--acento) !important; }

/* El texto DENTRO de algo pintado de acento se queda blanco.
   La regla de arriba baja `.text-white` a tinta, que es lo correcto en el 95% de
   los casos —eran textos blancos del tema oscuro— pero dejaba el botón principal
   con letra casi negra sobre verde: 3.6:1 y aspecto de error. */
.bg-primary, .bg-accent, .bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-emerald-500, .bg-emerald-600 {
  background-color: var(--acento) !important;
  background-image: none !important;
}
/* Un fondo semántico PLENO —sin barra de opacidad— siempre lleva letra blanca.
   El aviso emergente entraba por acá: `bg-red-600 text-white`, y la traducción
   le bajaba la letra a tinta dejando 3.6:1 sobre rojo.

   Y el fondo va al rojo del portal, no al de Tailwind: `bg-red-500` es #ef4444,
   que con letra blanca da 3.8:1. `--critico` da 7.4:1 y además es el rojo que
   usa el resto de la pantalla. */
.bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-500, .bg-rose-600 {
  background-color: var(--critico) !important;
}
.bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-yellow-500, .bg-yellow-600 {
  background-color: var(--alerta) !important;
}
.bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-500, .bg-rose-600,
.bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-yellow-500, .bg-yellow-600,
[class*="bg-\[var\(--acento"], [class*="bg-\[var\(--critico"],
[class*="bg-\[var\(--ok"] { color: #FFFFFF !important; }

.bg-primary, .bg-accent, .bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-emerald-500, .bg-emerald-600,
.bg-red-500, .bg-red-600, .bg-red-700, .bg-amber-600, .bg-amber-700,
[class*="bg-\[var\(--acento"], [class*="bg-\[var\(--critico"], [class*="bg-\[var\(--ok"],
button[class*="btn-prim"], a[class*="btn-prim"],
button[class*="btn-pri"],  a[class*="btn-pri"],
.bg-primary *, .bg-accent *, .bg-teal-500 *, .bg-teal-600 *,
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *,
[class*="bg-\[var\(--acento"] *, [class*="bg-\[var\(--critico"] *,
button[class*="btn-prim"] *, a[class*="btn-prim"] *,
button[class*="btn-pri"] *,  a[class*="btn-pri"] *  { color: #FFFFFF !important; }

button[class*="btn-prim"], a[class*="btn-prim"],
button[class*="btn-pri"],  a[class*="btn-pri"] {
  background-image: none !important;
  background-color: var(--acento) !important;
}

/* Fondos. Mismo anclaje que arriba: la barra de opacidad (`/10`) es lo que
   distingue un TINTE de un relleno pleno, y `hover:` no debe contar. */
[class*="bg-\[\#0"], .bg-slate-800, .bg-slate-900 { background-color: var(--superficie) !important; }
.bg-white\/2, .bg-white\/5                  { background-color: var(--superficie-2) !important; }
.bg-white\/10, .bg-white\/20                { background-color: var(--superficie-3) !important; }
[class^="bg-teal-"][class*="/"], [class*=" bg-teal-"][class*="/"],
[class^="bg-emerald-"][class*="/"], [class*=" bg-emerald-"][class*="/"] { background-color: var(--tinte-ok) !important; }
[class^="bg-red-"][class*="/"], [class*=" bg-red-"][class*="/"]         { background-color: var(--tinte-critico) !important; }
[class^="bg-amber-"][class*="/"], [class*=" bg-amber-"][class*="/"],
[class^="bg-yellow-"][class*="/"], [class*=" bg-yellow-"][class*="/"]   { background-color: var(--tinte-alerta) !important; }
.bg-black\/60, .bg-black\/70                { background-color: rgba(26,25,23,.28) !important; }
[class*="bg-gradient-to"] { background-image: none !important; background-color: var(--acento) !important; }

/* Bordes */
.border-white\/5, .border-white\/8, .border-white\/10,
[class*="border-slate-"], .divide-white\/5 > * + * { border-color: var(--linea) !important; }
.border-white\/20                            { border-color: var(--linea-fuerte) !important; }
[class^="border-teal-"], [class*=" border-teal-"],
[class^="border-emerald-"], [class*=" border-emerald-"] { border-color: var(--acento-borde) !important; }
.border-primary, .border-accent              { border-color: var(--acento) !important; }
[class*="shadow-teal"], [class*="shadow-emerald"]   { box-shadow: none !important; }

/* ── Los estados vacíos y deshabilitados no pueden volverse ilegibles ──────
   Media docena de pantallas apagaban texto con opacity .4–.6 encima de un gris
   que ya estaba al límite. El resultado bajaba de 2:1. */
[class*="opacity-4"], [class*="opacity-5"], [class*="opacity-6"] { opacity: 1 !important; }
[class*="opacity-4"] *, [class*="opacity-5"] *, [class*="opacity-6"] * { color: var(--txt-3) !important; }
button:disabled, .btn:disabled, [disabled] { opacity: 1 !important; color: var(--txt-3) !important;
  background: var(--superficie-2) !important; cursor: not-allowed; }

/* ── El foco del teclado, siempre visible ────────────────────────────────────
   51 sitios del portal escriben `focus:outline-none` u `outline:none`. La mayoría
   pone su propio anillo después, pero basta con que uno no lo haga para que esa
   pantalla sea imposible de usar sin mouse. Se devuelve acá, una vez.

   Va en `:focus-visible` y no en `:focus`: así aparece al navegar con Tab y no
   cada vez que alguien hace clic, que es lo que hacía que se viera «sucio» y por
   lo que se empezó a apagar. */
:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--acento) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-sm);
}

/* ── Con `prefers-reduced-motion` no se mueve nada ───────────────────────────
   Para quien tiene vértigo o migraña, una transición no es un detalle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ningún fade puede dejar contenido invisible esperando su turno. */
.fade-in, [class*="fade-in"] { animation-delay: 0s !important; animation-fill-mode: forwards !important; }