/* ==========================================================================
   LeadSync - Departamentos
   El chip de la lista y la cabecera, tomar/soltar/transferir, el control segmentado
   y la gestion en Configuracion (item 126).

   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 (item 126)
   ========================================================================== */

/* --- El chip de la lista y la cabecera --- */

/* El punto de color va ADEMÁS del nombre, nunca en su lugar: un departamento identificado
   solo por color deja fuera a quien no los distingue, y a cualquiera con más de cuatro. */
.dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;

  /* 200px y no 130: "Soporte técnico" no entraba y se leía "Soporte téc…", que es peor que
     no poner nada — un nombre a medias hay que adivinarlo. Sigue habiendo tope porque un
     equipo con nombre kilométrico no puede comerse la fila entera. */
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dept-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* --- Tomar / Soltar / Transferir --- */
.dept-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dept-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dept-actions .ic {
  width: 14px;
  height: 14px;
}

/* Entran con movimiento porque APARECEN Y DESAPARECEN solos: si un compañero toma el chat
   que tienes abierto, "Tomar" se va y llega su nombre. Sin animación parece un parpadeo. */
.dept-actions > * { animation: dept-act-in 160ms ease-out; }
@keyframes dept-act-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}
.dept-owner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.dept-owner .ic {
  width: 13px;
  height: 13px;
}

/* Etiqueta FIJA de la hilera de filtros (item 137): dice en qué bandeja estás. Se
   distingue de un filtro a propósito —sin borde ni fondo de pastilla— para que nadie
   intente pulsarla esperando que filtre algo. */
.filter-fija {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 5px 2px 5px 0;
  margin-right: 2px;
}
.filter-fija-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Cada tema de la Ayuda es una TARJETA: con solo una línea divisoria, seis acordeones
   seguidos se leían como una lista y no como seis cosas que se abren. El fondo y el radio
   dicen "esto es una pieza" antes de leer nada. */
.help-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .13s ease;
}
.help-item:hover { border-color: var(--border-strong, var(--accent)); }
.help-item[open] { border-color: var(--accent); }

/* --- Control segmentado (item 20) ---
   Un riel con las opciones dentro y la activa en relieve. El fondo del carril es lo que
   dice que las tres van juntas y que solo una puede estar puesta; sin él serían tres
   botones sueltos que parecen acciones. */
.seg-control {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-hover);
  border-radius: 10px;
}
.seg-opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .13s ease, color .13s ease;
}

/* Se recorta EL TEXTO, no el botón: con el recorte en el botón, el puntito de "tiene
   filtros activos" se iba con los puntos suspensivos en la pestaña más larga. */
.seg-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg-opt:hover { color: var(--text); }

/* La activa lleva SUPERFICIE, no solo color: es lo que se lee como "estás aquí" de un
   vistazo y lo que la distingue en escala de grises. */
.seg-opt.on {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 3px var(--shadow);
}

/* El puntito avisa de que ESA pestaña, que no estás mirando, tiene algo marcado. Es la
   contrapartida de que los filtros se acumulen entre grupos: sin él la lista saldría
   recortada por una condición que no está en pantalla. */
.seg-punto {
  flex: 0 0 auto;

  /* nunca se encoge ni se recorta: es el aviso, no el adorno */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* En la bandeja el segmentado es la cabecera de los filtros, no un separador de secciones:
   sin el margen de abajo (que allí sí hace falta) y algo más compacto, que la columna es
   estrecha. */
.chat-filters .seg-opt {
  padding: 6px 6px;
  font-size: 12px;
}

/* La versión, al lado del nombre del producto en "Acerca de" (item 111). Discreta: es un
   dato de referencia para reportar un fallo, no un titular. */
.cfg-version {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Subtítulo dentro de una sección de Configuración: separa dos ajustes que conviven en
   el mismo apartado (cómo se reparte / quién puede ver). Sin él, los dos bloques de radios
   se leían como un solo grupo de cuatro opciones. */
.cfg-sub {
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cfg-sub:first-child { margin-top: 0; }

/* --- Gestión (Configuración → Departamentos) --- */
/* Tope de conversaciones por persona (item A7). El desplegable va en su propia fila con su
   rotulo a la izquierda, como el resto de ajustes de Configuracion, y el "que hago si se
   pasa" debajo: primero cuantas, luego que pasa. Al reves obligaria a leer una regla sobre
   un numero que aun no existe. */
.dept-limite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.dept-limite label {
  font-size: 14px;
  color: var(--text);
}

.dept-mode { margin-bottom: 16px; }

/* LA CASILLA CON EXPLICACION DEBAJO. La comparten Departamentos y el editor de mensajes con
   opciones (`.inter-check`, item B73) por la misma razon que `.dept-toolbar` y `.cfg-toolbar`
   de mas abajo: es el MISMO control -una casilla cuyo texto explica que pasa al encenderla- y
   escribirlo dos veces da dos aspectos para una sola cosa. */
.dept-mode-opt,
.inter-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  transition: background-color 120ms ease, border-color 120ms ease;
}
/* Una opción que viene DETRÁS de una aclaración necesita aire, o se lee pegada a ella y
   parece parte del mismo párrafo. `.modal-hint` solo lleva margen ARRIBA —estaba pensada para
   cerrar un bloque—, así que el hueco lo pone quien va después. */
.modal-hint + .dept-mode-opt,
.modal-hint + .inter-check {
  margin-top: 12px;
}

.dept-mode-opt:hover,
.inter-check:hover { background: var(--bg-hover); }
.dept-mode-opt input,
.inter-check input {
  margin-top: 2px;
  flex: 0 0 auto;
}
.dept-mode-opt b,
.inter-check b { color: var(--text); }
.dept-mode-opt span,
.inter-check span { color: var(--text-dim); }

/* La acción principal de una pantalla va ARRIBA Y A LA IZQUIERDA (petición tuya): es
   donde empieza la lectura, y a la derecha competía con el scroll de la lista. La misma
   clase la usan Departamentos y Usuarios para que las dos pantallas se comporten igual. */
.dept-toolbar,
.cfg-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

/* El icono y el texto del botón, con su aire. Iba solo en la barra de Departamentos, así
   que en "Añadir usuario" el dibujo salía pegado a la palabra: mismo componente, dos
   aspectos. Las dos barras comparten regla justamente para que eso no vuelva a pasar. */
.dept-toolbar .modal-btn,
.cfg-toolbar .modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dept-toolbar .ic,
.cfg-toolbar .ic {
  width: 15px;
  height: 15px;
}
.dept-list {
  max-height: 42vh;
  overflow-y: auto;
}
.dept-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  animation: qr-row-in 150ms ease-out;
}
.dept-row:last-child { border-bottom: 0; }
.dept-row .dept-dot {
  width: 10px;
  height: 10px;
}
.dept-row-main {
  flex: 1;
  min-width: 0;
}
.dept-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dept-row-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Un departamento sin nadie NO se disimula: es un buzón donde se acumulan conversaciones
   que no atiende nadie, y verlo es justo el objetivo. */
.dept-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn, #d97706);
}
.dept-warn .ic {
  width: 13px;
  height: 13px;
}
.dept-members {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.dept-member {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 120ms ease;
}
.dept-member:hover { background: var(--bg-hover); }
/* Una casilla que no se puede tocar (su único departamento, item B113; o todas con rol de
   administrador en el alta) no promete clic: sin mano y sin realce. El porqué lo da su
   tooltip. */
.dept-member:has(input:disabled) { cursor: default; }
.dept-member:has(input:disabled):hover { background: none; }

/* El supervisor se LISTA pero no se elige: sin casilla, sin cursor de mano y sin realce al
   pasar por encima, porque nada de eso pasaría si se pulsara. Va sangrado como si tuviera
   la casilla para que la columna de nombres siga alineada con la de los operadores. */
.dept-member-sup {
  cursor: default;
  padding-left: 30px;
}
.dept-member-sup:hover { background: none; }
.dept-member-role {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}
.dept-edit-modal input[type="color"] {
  width: 56px;
  height: 34px;
  padding: 2px;
  cursor: pointer;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .dept-actions > *,
  .dept-row {
    animation: none;
  }
}

/* ==========================================================================
   PESTANIAS (componente `pestanias`, components.js)

   Cambiar de PANEL, no filtrar una lista. Es otra pieza que .seg-control a
   proposito: la pildora dice "la misma lista, filtrada de otra forma" y estas
   dicen "hay varios contenidos aqui debajo y estas viendo uno". Con la misma
   forma para las dos cosas, la interfaz deja de prometer nada.
   ========================================================================== */
.pest-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.pest {
  position: relative;
  display: inline-flex;
  /* CENTRADO Y NO `baseline`. Con baseline, en una caja de 44 px de alto —el minimo tactil—
     el texto se pega ARRIBA y la raya se queda 27 px por debajo: la etiqueta flota lejos de
     la linea que la marca, y a simple vista no se sabe cual esta activa. Centrado, la raya
     queda a la distancia normal de un subrayado. */
  align-items: center;
  gap: 8px;
  /* 38px CON RATON, 44 CON DEDO. Los 44 px son el minimo tactil (Apple HIG) y son
     obligatorios donde se toca, pero con un raton solo sirven para alejar el texto de su
     propia raya: en una caja de 44 con texto de 16, el subrayado queda a 14 px por debajo y
     la etiqueta parece flotar suelta.
      es el dedo. Ahi vuelven los 44 y no se falla el toque. */
  min-height: 38px;
  padding: 0 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 130ms ease;
}
.pest:hover { color: var(--text); }
.pest.on { color: var(--text); font-weight: 600; }

/* La pista (un importe, un recuento) va mas pequenia y apagada: acompania al
   nombre, no compite con el. */
.pest-pista {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}
.pest.on .pest-pista { color: var(--accent); }

/* LA MARCA VIAJA, no aparece de golpe. Se anima con `transform: scaleX` —que no
   fuerza reflow— y por eso vive como pseudo-caja propia en vez de como un
   `border-bottom` en el boton: un borde solo puede encenderse y apagarse.
   Se coloca SOBRE la linea del contenedor (-1px) para taparla, no debajo. */
.pest-marca {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pest.on .pest-marca { transform: scaleX(1); }

/* El foco se ve, y no se confunde con la pestania activa: el subrayado dice cual
   miras, el anillo dice donde esta el teclado. */
.pest:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 8px;
}

/* En una pantalla estrecha la tira se desplaza en horizontal en vez de partirse
   en dos filas: unas pestanias en dos lineas dejan de leerse como una tira. */
@media (max-width: 720px) {
  .pest-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pest-nav::-webkit-scrollbar { display: none; }
}

@media (pointer: coarse) {
  .pest { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pest-marca { transition: none; }
}