/* ==========================================================================
   LeadSync - Tarjetas y graficos
   Los esqueletos de carga, las tarjetas de Departamentos y Metricas, y los graficos
   de charts.js.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* ==========================================================================
   Departamentos y Métricas: forma, no solo texto (rediseño 2026-08-11)
   ========================================================================== */

/* --- Esqueletos de carga --- */

/* Se pinta la FORMA de lo que viene, no un "Cargando…" centrado: así la página no pega el
   salto al llegar los datos. El pulso es lento a propósito; uno rápido parece un error. */
.esqueleto { pointer-events: none; }
.esq-bloque {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 34px;
  border-radius: 8px;
  background: var(--bg-hover);
  animation: esq-pulso 1.6s ease-in-out infinite;
}
@keyframes esq-pulso {
  0%,
  100% {
    opacity: .45;
  }
  50% { opacity: .85; }
}
.met-fila-esq {
  height: 44px;
  padding: 5px 0;
}

/* --- Departamentos: tarjetas --- */
.dept-intro { margin: 0 0 14px; }

/* OJO: `.dept-toolbar` ESTABA DECLARADA DOS VECES, aquí y 300 líneas más arriba, y esta
   —que la alineaba a la DERECHA— ganaba por estar debajo. Por eso "Nuevo departamento"
   seguía a la derecha después de haberlo movido. La regla vive ARRIBA, junto a la de
   Usuarios, porque son la misma pieza; aquí solo queda el margen propio de esta pantalla. */
.dept-toolbar { margin-bottom: 14px; }
.dept-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
}
.dept-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
  animation: qr-row-in 160ms ease-out;
  transition: border-color 130ms ease, transform 130ms ease;
}
.dept-row:hover { border-color: color-mix(in srgb, var(--dept-color, #6b7280) 55%, var(--border)); }

/* La barra de color es el MISMO color del chip de la bandeja: la identidad del
   departamento se aprende en un sitio y se reconoce en el otro. */
.dept-barra {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--dept-color, #6b7280);
}
.dept-row-main {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
}
.dept-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.dept-nombre { font-size: 15px; }
.dept-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dept-color, #6b7280) 16%, transparent);
  color: color-mix(in srgb, var(--dept-color, #6b7280) 75%, var(--text));
  border: 1px solid color-mix(in srgb, var(--dept-color, #6b7280) 35%, transparent);
}
.dept-badge.mio {
  background: var(--bg-hover);
  color: var(--text-dim);
  border-color: var(--border);
}
.dept-caras {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
  flex: 0 0 auto;
}
.dept-mas {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 3px;
}
.dept-cifras {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.dept-cifra {
  font-size: 12px;
  color: var(--text-dim);
}
.dept-cifra b {
  font-size: 15px;
  color: var(--text);
  margin-right: 3px;
}

/* Una cola con gente esperando se ve DISTINTA, no solo con otro número: es lo único de
   esta pantalla que pide hacer algo hoy. */
.dept-cifra.urge b { color: var(--warn, #d97706); }
.dept-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 42px 24px;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.dept-vacio .ic {
  width: 30px;
  height: 30px;
  opacity: .5;
  margin-bottom: 4px;
}
.dept-vacio p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.5;
  font-size: 13px;
}

/* --- Métricas --- */
.met-card {
  position: relative;
  overflow: hidden;
}

/* Cada tarjeta lleva su tinte, y son SEMÁNTICOS (no de marca): el bot y las personas se
   distinguen igual en toda la consola. */
.met-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tono, transparent);
}
.met-humano { --tono: var(--author-client, #3b82f6); }
.met-bot { --tono: var(--author-bot, #10b981); }
.met-espera { --tono: var(--warn, #d97706); }
.met-card-val { font-variant-numeric: tabular-nums; }

/* --- La foto del momento (fila "Ahora mismo") ------------------------------
   Van SEPARADAS del periodo, con su título encima. Son otra pregunta: cambiar a "7 días"
   no cambia cuántas conversaciones están esperando ahora, y con las seis tarjetas en una
   sola hilera cualquiera leería "3 en espera" como un dato del periodo elegido. */
.met-grupo { margin-bottom: 6px; }
.met-grupo-tit {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.met-equipo { --tono: var(--presencia-on, #06c294); }
.met-cola { --tono: var(--warn, #d97706); }
.met-huerfanas { --tono: var(--text-dim); }

/* ALERTA: solo cuando el número PIDE ALGO. Cero en espera es una buena noticia y no
   necesita color; una en espera es alguien esperando. Se tiñe la barra y el número, no el
   fondo entero: tres tarjetas rojas a la vez serían un semáforo que nadie mira. */
.met-card.alerta { --tono: var(--danger); }
.met-card.alerta .met-card-val { color: var(--danger); }

/* El denominador del "3/5": mismo sitio que el número, pero claramente secundario. */
.met-de {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 1px;
}

/* --- Gráficos (charts.js) -------------------------------------------------
   Dos bloques que caben lado a lado en escritorio y se apilan en móvil. La tarta es
   pequeña a propósito: responde una pregunta de proporción, no compite con la tabla. */
.met-graficos {
  display: grid;
  gap: 18px;
  margin: 20px 0 4px;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
}
.met-grafico h4 {
  margin: 0 0 3px;
  font-size: 13.5px;
}
.met-grafico .modal-hint { margin: 0 0 10px; }
.chart { position: relative; }
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart-donut .chart-svg {
  max-width: 200px;
  margin: 0 auto;
}

/* La leyenda de la TARTA se centra con ella (el gráfico ya va centrado con margin:auto).
   Alineada a la izquierda mientras el dibujo estaba centrado, el bloque se leía torcido.
   La de la LÍNEA no: allí el gráfico empieza en su eje y la leyenda lo acompaña. */
.chart-donut .chart-leyenda { justify-content: center; }

/* El texto del centro y los ejes van con TOKENS DE TEXTO, nunca con el color de la serie:
   el color identifica marcas, y una cifra coloreada se lee como si fuera otra categoría. */
.chart-donut-num {
  fill: var(--text);
  font-size: 26px;
  font-weight: 700;
}
.chart-donut-pie {
  fill: var(--text-dim);
  font-size: 9.5px;
}
.chart-eje {
  fill: var(--text-dim);
  font-size: 10px;
}

/* La rejilla es la referencia, no el dato: tiene que verse menos que las líneas. */
.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}
.chart-guia {
  stroke: var(--text-dim);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.chart-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.chart-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* El globo sigue al cursor sobre la línea. `translateX(-50%)` lo centra en el día, y el
   margen del contenedor evita que se salga por los lados. */
.chart-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text);
  box-shadow: 0 6px 18px var(--shadow);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

/* YA NO HACE FALTA ESTA REGLA: la global de css/base/ajustes.css lo resuelve para toda la
   consola con `[hidden] { display: none !important }`. Se deja el porque, que es lo que vale:
   `display: flex` GANA al atributo [hidden] (que solo trae display:none del user-agent),
   así que sin esta línea el globo se queda pintado en la esquina desde que carga. */

.chart-tip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-tip b { font-weight: 700; }
@media (max-width: 720px) {
  .met-graficos { grid-template-columns: 1fr; }
}
.met-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* La barra de volumen hace que la tabla se lea de un vistazo: sin ella hay que comparar
   cifras a mano, fila por fila. */

/* EL FALLO QUE ROMPIA LA TABLA (b_20.png): esto era `display:flex` sobre el propio <td>.
   Una celda con display:flex DEJA DE SER CELDA — sale del algoritmo de tabla — y con ella
   se va la alineación de la columna y el borde inferior de la fila, que dejaba de llegar
   de lado a lado. El flex va en un envoltorio DENTRO de la celda; el td se queda siendo td. */
.met-vol-in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.met-barra {
  display: block;
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-hover);
  overflow: hidden;
}
.met-barra-fill {
  display: block;
  height: 100%;
  background: var(--author-client, #3b82f6);
  border-radius: 999px;
}
.met-destacado { font-weight: 600; }
.met-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 42px 24px;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.met-vacio .ic {
  width: 30px;
  height: 30px;
  opacity: .5;
  margin-bottom: 6px;
}
.met-vacio p { margin: 0; }

/* --- Pie del rail --- */

/* El pie NO entra en el scroll y NO se encoge: tema, configuración y tu cuenta se quedan
   fijas abajo aunque la lista de arriba desborde (lo pediste así). */
.rail-foot {
  margin-top: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.rail-foot > * { flex: 0 0 auto; }

/* R3 (b_21.png). El problema y su arreglo, que costó dos intentos:
   · El hueco de icono del rail mide 20px y el círculo de la cuenta 24. Un hijo MÁS ANCHO
     que su caja desborda hacia la derecha, así que el círculo quedaba descentrado respecto
     a la columna por la que pasan los demás iconos.
   · El primer intento fue sacarlo del flujo (position:absolute). Centró, pero dejó a
     `.rail-ic` SIN ALTO, y la corona —que cuelga de ese hueco con top:-7px— se vino al
     centro del círculo en vez de quedarse encima. Un arreglo que rompe al vecino.
   Lo que se hace ahora: el hueco de ESTA fila mide 24px (lo que mide el círculo) y se
   compensa con -2px a cada lado. Su centro cae exactamente donde el de un hueco de 20px,
   así que la columna queda alineada; y como el círculo sigue EN EL FLUJO, el hueco vuelve
   a tener su alto y la corona a tener de dónde colgar. */
.rail-account .rail-ic {
  position: relative;
  flex: 0 0 24px;
  height: 24px;
  margin: 0 -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* El globito de la cuenta del rail ES el componente compartido (avatarHTML), no un
   círculo propio: `.rail-inicial` se dibujaba aquí con el verde de marca y por eso TODAS
   las cuentas salían iguales. Lo que queda es solo el TAMAÑO que le pide el rail — el
   hueco de esta fila mide 24px para que su centro caiga en la misma columna que los demás
   iconos (ver el comentario de .rail-account .rail-ic, justo arriba). */
.rail-avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* La corona va ARRIBA Y CENTRADA sobre la inicial, no en la esquina: en la esquina se
   confundía con un badge de notificación. */

/* La corona se ancla al CÍRCULO (que ahora es el contexto posicionado), no al hueco: así
   sigue sentada encima de la inicial esté donde esté esta. */
.rail-corona {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--corona);
  line-height: 0;
}
.rail-corona .ic {
  width: 12px;
  height: 12px;
}

/* "Cerrar sesión" en el pie de "Mi cuenta": SOLO EL ICONO, sin fondo, a la izquierda del
   todo. Rojo únicamente al pasar por encima. Es la acción más destructiva del panel y a la
   vez la que la gente viene a buscar aquí: tiene que estar, sin ser lo primero que grita.
   `margin-right: auto` lo separa de los botones de guardar/cerrar, para que no se pulse por
   inercia al ir a por el de al lado. */
.cuenta-salir {
  margin-right: auto;
  color: var(--text-dim);
}
.cuenta-salir:hover,
.cuenta-salir:focus-visible {
  color: var(--danger);
  background: var(--danger-dim, transparent);
}
.cuenta-salir .ic {
  width: 17px;
  height: 17px;
}
@media (prefers-reduced-motion: reduce) {
  .esq-bloque,
  .dept-row {
    animation: none;
  }
}

/* --- Rail: el tercer estado, FIJADO --------------------------------------- */

/* Flotando tapa el contenido y se cierra solo; FIJADO entra en el flujo y lo empuja. Por
   eso el ancho fijado va en .nav-rail (el hueco) y no solo en .rail-inner: es la única
   diferencia real entre los dos estados, y es justo la que el usuario quería. */
.nav-rail { transition: flex-basis 170ms ease, width 170ms ease; }
.nav-rail.pinned {
  flex-basis: var(--rail-open-w, 232px);
  width: var(--rail-open-w, 232px);
}
.nav-rail.pinned .rail-inner {
  width: var(--rail-open-w, 232px);
  box-shadow: none;
}
.nav-rail.pinned .rail-txt { opacity: 1; }

/* PLEGADO, la chincheta NO OCUPA SITIO. Antes compartía fila con el botón de menú y le
   robaba la mitad del ancho, así que el menú salía cortado (b_ del 11-08). Ahora sale del
   flujo con position:absolute mientras el rail está compacto, y entra en la fila solo
   cuando hay ancho de sobra. */
.rail-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  position: relative;
}
.rail-top .rail-toggle {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.rail-pin {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease;
}
.nav-rail.open .rail-pin,
.nav-rail.pinned .rail-pin {
  position: static;
  transform: none;
}
.nav-rail.open .rail-pin,
.nav-rail.pinned .rail-pin {
  opacity: 1;
  pointer-events: auto;
}
.rail-pin.active {
  color: var(--accent);
  background: var(--bg-hover);
}
.rail-pin .ic {
  width: 20px;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-rail,
  .rail-pin {
    transition: none;
  }
}