/* ==========================================================================
   LeadSync - Ajustes finales
   Correcciones posteriores que dependen de ir LAS ULTIMAS para poder pisar a las de
   arriba. Va al final del enlazado a proposito.

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

/* ==========================================================================
   Ajustes de la revisión: #3 (achicar), #21 (combobox)
   ========================================================================== */

/* #3 — La fila de badges NO envuelve ni desborda. Al estrechar la ventana, la hora se
   queda (es una sola palabra, no se puede partir) y los chips ceden por orden inverso de
   importancia: primero se recorta el nombre del departamento, luego el de quien atiende.
   Antes se salían de la caja y se montaban sobre la hora. */
.session-tags {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* CUANDO LA LISTA SE ESTRECHA, LOS BADGES SE QUEDAN EN SU FIGURA (petición tuya): el punto
   del departamento, el círculo con la inicial de quien atiende y el icono del estado. Antes
   los nombres se recortaban y acababan solapándose con la hora.
   Va con CONTAINER QUERY y no con media query porque lo que se estrecha es LA LISTA —se
   arrastra su divisor—, no la pantalla: una media query no se entera de eso.
   Los nombres completos siguen en el `title` de cada chip. */

/* El contenedor de consulta es LA COLUMNA, no la lista: `container-type` sobre la lista la
   dejaba con ancho cero (contiene su propio tamaño en línea y ahí dentro no había de dónde
   sacarlo). La columna sí tiene ancho propio (--sidebar-w), que es justo lo que se arrastra. */
.sidebar { container-type: inline-size; }
.dept-dot,
.asig-chip .avatar,
.chat-badge .ic,
.session-tags svg {
  flex-shrink: 0;
}
.chip-txt,
.asig-nom {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-tags .dept-chip,
.session-tags .asig-chip,
.session-tags .chat-badge {
  min-width: 20px;
  flex-shrink: 1;
}
.session-tags .session-time {
  flex: 0 0 auto;
  margin-left: auto;
}
.session-tags .dept-chip { max-width: 50%; }
.session-tags .asig-chip { max-width: calc(100% - 65px); }

/* Cuando coexisten departamento Y operador en la misma fila: */
.session-tags .dept-chip ~ .asig-chip {
  max-width: 45%;
}

/* Con la ventana muy estrecha el chip se ajusta proporcionalmente */
@media (max-width: 1100px) {
  .session-tags .dept-chip { max-width: 120px; }
  .session-tags .asig-chip { max-width: calc(100% - 55px); }
  .session-tags .dept-chip ~ .asig-chip { max-width: 90px; }
}
@media (max-width: 900px) {
  .session-tags .dept-chip { max-width: 90px; }
  .session-tags .asig-chip { max-width: calc(100% - 50px); }
  .session-tags .dept-chip ~ .asig-chip { max-width: 75px; }
}

/* #21 — Los `select` seguían con el aspecto del navegador, que en Windows es un control
   gris de otra época y desentona con el resto de campos. Se les da la misma superficie,
   contorno y radio que a los inputs, con la flecha dibujada (un SVG en data: URI, que no
   pide red y sigue el color del tema). */
.modal-field select,
.campo select,
select.entrada {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 11px 36px 11px 13px;
  color: var(--text);
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  transition: border-color 120ms ease;
}
.modal-field select:focus,
.campo select:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-field select:hover,
.campo select:hover {
  border-color: var(--border-strong);
}

/* El desplegable nativo hereda el fondo del sistema en algunos navegadores: se fuerza para
   que no salga una lista blanca sobre un tema oscuro. */
.modal-field select option,
.campo select option {
  background: var(--bg-panel);
  color: var(--text);
}

/* Sección Soporte (item 129/130). Dos tarjetas, no un formulario: hoy no hay a dónde
   enviarlo, y un campo de texto que no llega a nadie es peor que decir la verdad. */
.sop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.sop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
}
.sop-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}
.sop-card h3 .ic {
  width: 17px;
  height: 17px;
  color: var(--text-dim);
}
.sop-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}
.sop-card .modal-btn {
  margin-top: auto;
  text-decoration: none;
}
.sop-nota { margin-top: 14px; }

/* ==========================================================================
   Segunda revisión del 11-08
   ========================================================================== */

/* R2 — El botón de copiar se va AL FINAL de su línea, no pegado al título. */
.caps-verdict-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.caps-copiar {
  margin-left: auto;
  flex: 0 0 auto;
}
.caps-copiar .ic {
  width: 15px;
  height: 15px;
}

/* R2 — El toast salía POR DETRÁS de la modal, así que copiar no daba señal de haber
   funcionado. Un aviso que no se ve es lo mismo que no avisar. */
.toast-container { z-index: 1000; }

/* R1 — Franja del color del departamento a la izquierda de cada chat. El color se
   relaciona más rápido que leer el nombre del badge; el badge se queda porque el color
   solo no basta (ver la nota del .dept-chip). */
.session-item { position: relative; }
.session-item[data-dept-color]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dept-color, transparent);
}

/* R4 — En tema claro la lista de usuarios era plana: fondo igual al de la página. En
   oscuro ya se veía bien, así que solo cambia el claro. */
:root[data-theme="light"] .user-row,
:root[data-theme="light"] .dept-row {
  background: var(--bg-panel);
}

/* R9 — El campo del composer tenía en claro el mismo fondo que su footer. */
:root[data-theme="light"] .composer-editor { background: var(--bg-panel); }

/* ==========================================================================
   [hidden] GANA SIEMPRE

   POR QUE ESTA AQUI Y NO EN CADA COMPONENTE. El atributo `hidden` solo trae un
   `display: none` de la hoja del NAVEGADOR, y cualquier `display:` que ponga el
   autor -aunque sea de una sola clase- le gana por venir de una hoja de autor.
   O sea: `<div class="x" hidden>` con `.x { display: flex }` se ve.

   Es un fallo mudo: no hay error, no hay warning, simplemente el elemento que
   creias oculto esta ahi. Ya paso TRES veces -el tooltip de las graficas, el
   velo del rail y el campo del identificador de modelo en Ajustes del bot- y
   cada una se arreglo por su lado con una regla propia. La cuarta llegaria.

   El `!important` es deliberado y es la forma recomendada de resolverlo: si un
   elemento lleva `hidden`, no se ve, y no hay ningun caso en el que una clase
   deba poder discutirlo. Lo vigila `scripts/check-hidden.py`.
   ========================================================================== */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   LO DESHABILITADO SE VE DESHABILITADO

   MISMA HISTORIA QUE [hidden], y por eso esta al lado. Un boton con `disabled`
   deja de responder, pero NO cambia de aspecto por su cuenta salvo que alguien
   le ponga estilo: sigue verde, sigue con su cursor de mano, y quien lo mira
   cree que la consola esta rota.

   Se ha arreglado uno por uno 22 veces -`.modal-btn:disabled`, `.lb-btn`,
   `.mic-btn`, `.ag-pag-btn`, `.link-btn`...-, cada vez porque alguien vio ESE
   boton mal. El 14-09 volvio a pasar con `.pl-add-var` y lo reporto el:
   *"ya no anade, pero sigue verde, si esta deshabilitado no parece"*.

   Asi que la regla vive aqui y vale para todos. Un componente puede afinarla
   -otro nivel de opacidad- pero ya no puede OLVIDARLA, que es lo que pasaba.
   Lo vigila `scripts/check-deshabilitado.py`.
   ========================================================================== */
button:disabled,
button[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}