/* ==========================================================================
   LeadSync - Responsive del rail y la lista
   Como se comportan el rail y la lista en tablet y movil.

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

/* ==========================================================================
   Responsive (corrección del 11-08, b_14/b_15)
   ========================================================================== */

/* --- Tablet y móvil apaisado: el rail compacto SÍ cabe --- */
@media (max-width: 1024px) {
  .nav-rail.pinned {
    flex-basis: var(--rail-w);
    width: var(--rail-w);
  }
  .nav-rail.pinned .rail-inner {
    width: var(--rail-open-w, 232px);
    box-shadow: 4px 0 24px var(--shadow);
  }
  .rail-pin { display: none; }

  /* LA CHINCHETA DEL PANEL "VER MÁS", TAMPOCO (mismo motivo que la del rail, y lo viste
     tú en tablet): fijado, el panel le quita ~320px de ancho a la conversación, y con el
     sitio que queda la barra de la ventana de 24 h se parte en cinco líneas y el chat deja
     de poder leerse. Un control que empeora la pantalla en la que se ofrece no es una
     opción, es una trampa.
     Se esconde el botón Y se neutraliza el estado: quien lo dejó fijado en el escritorio
     no puede encontrarse la tablet estrujada sin un botón con el que arreglarlo. El panel
     sigue abriéndose, pero FLOTANDO sobre el chat. */
  #debug-pin-btn { display: none; }
  .conversation.debug-pinned { padding-right: 0; }
  .conversation.debug-pinned .chat-header,
  .conversation.debug-pinned .composer {
    margin-right: 0;
  }
  .conversation.debug-pinned .scroll-bottom { right: 24px; }
  .debug-panel.pinned { box-shadow: -8px 0 24px var(--shadow); }

  /* LA CHINCHETA SOLO EXISTE EN ESCRITORIO (lo cazaste tú): de 1024px para abajo el menú
     abierto FLOTA sobre el contenido en vez de empujarlo, así que "fijarlo" no fijaba nada —
     el botón estaba, se pulsaba y no pasaba nada visible. Un control que no cumple lo que
     promete es peor que no tenerlo. Estaba escondido solo en móvil (720px), y las tablets se
     quedaban con él. */
}

/* --- Móvil: el rail NO es una columna --- */

/* Con 375 px de ancho, 56 px de rail son el 15% de la pantalla gastados en navegación que
   se usa tres veces al día. Aquí el rail desaparece del flujo y se abre ENCIMA desde el
   botón que hay junto al logo; fijarlo no tiene sentido y se esconde la chincheta. */

/* El botón de menú móvil se declara oculto ANTES del media query: si se declarara después,
   ganaría por orden y no aparecería nunca en móvil (que es justo lo que pasó al probarlo). */
#rail-movil { display: none; }
@media (max-width: 720px) {
  .nav-rail,
  .nav-rail.pinned {
    flex-basis: 0;
    width: 0;
  }
  .rail-inner,
  .nav-rail.pinned .rail-inner {
    width: 0;
    padding: 10px 0;
    border-right: 0;
    box-shadow: none;
  }
  .nav-rail.open .rail-inner {
    width: min(272px, 84vw);
    padding: 10px 8px;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 28px var(--shadow);
  }
  .nav-rail.open .rail-txt { opacity: 1; }
  .nav-rail.pinned:not(.open) .rail-txt { opacity: 0; }
  #rail-movil { display: inline-flex; }

  /* FIJADO NO EXISTE EN MÓVIL. Con `pinned` recordado de escritorio, el menú se quedaba
     abierto tapando la pantalla nada más entrar. Aquí solo `.open` abre, y `.open` siempre
     lo enciende una pulsación. */

  /* EL VELO ERA ESTE PSEUDO-ELEMENTO Y POR ESO NO SE PODÍA CERRAR TOCÁNDOLO. Un `::before`
     no es un nodo propio: los clics que caen sobre él los recibe SU ANFITRIÓN, o sea el
     propio `.nav-rail`. Y como la regla de cerrar dice "si el clic fue dentro del rail, no
     cierres" —que es lo correcto para el menú—, tocar el fondo contaba como tocar el menú.
     Encima, al cubrir `inset: 0`, hacía que cualquier punto de la pantalla respondiera
     `#nav-rail` en una prueba de impacto.
     Ahora el velo es un elemento de verdad (#rail-backdrop), HERMANO del rail: recibe sus
     propios clics y los cierra. Ver .rail-backdrop más arriba. */

  /* El botón que lo abre vive en la cabecera de la lista, junto al logo. */
}

/* Métricas en móvil: la tabla no cabe y recortarla escondía columnas enteras (b_15). Se
   convierte en tarjetas, con la etiqueta de cada dato delante — que es lo que hace la
   industria con tablas densas en pantallas estrechas. */
@media (max-width: 720px) {
  .met-tabla-wrap {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .met-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .met-tabla,
  .met-tabla tbody,
  .met-tabla tr,
  .met-tabla td {
    display: block;
    width: 100%;
  }
  .met-tabla tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-elev);
  }
  .met-tabla .met-vol-in {
    gap: 10px;
    flex: 1 1 auto;
  }
  .met-barra {
    flex: 1 1 auto;
    min-width: 60px;
  }
  .met-tabla td {
    border: 0;
    padding: 3px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .met-tabla td::before {
    content: attr(data-col);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .met-tabla .met-nombre {
    justify-content: flex-start;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .met-tabla .met-nombre::before { content: none; }
  .met-vol-in {
    justify-content: space-between;
    flex: 1 1 auto;
  }
  .met-barra { width: 90px; }
  .met-cards { grid-template-columns: 1fr 1fr; }
  /* El relleno de arriba se reescribe con SU VARIABLE, no suelto: lo resta desde dentro
     cualquier cabecera pegajosa (ver .app-panel en nav-rail.css). Con el número a pelo, el
     sticky acertaría en escritorio y dejaría el hueco en móvil. */
  .app-panel { --pane-pad-t: 18px; padding: var(--pane-pad-t) 14px 32px; }

  /* En móvil la wrap deja de ser tarjeta: cada FILA es la tarjeta, o habría un contorno
     dentro de otro. */

  /* Sin esto, la barra de volumen y su número se pegan al borde derecho de la tarjeta. */
}

/* Móvil: los botones de canalización se quedan SOLO con su icono. Con el texto, "Tomar" y
   "Transferir" ocupaban tanto que se montaban sobre el nombre del cliente (medido: las
   acciones empezaban 30 px antes de que acabara el nombre). El icono con su `title` dice
   lo mismo en un cuarto del espacio. */

/* Móvil: los botones de canalización CONSERVAN su texto. Se probó dejarlos con solo el
   icono para ganar sitio y el usuario lo rechazó con razón: un tick y una flecha no dicen
   "tomar" y "transferir" a quien no lo sabe ya, y equivocarse aquí tiene consecuencias.
   El sitio lo saca overflowbar.js mandando al menú lo que no quepa. */
@media (max-width: 720px) {
  .chat-header-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Los botones de canalización miden LO MISMO que en escritorio: encogerlos era otra
     forma de apretar. Si no caben, se van enteros al menú con su nombre. */

  /* EL ESPACIADO NO CAMBIA POR SER MÓVIL, Y ESTE ERA EL FALLO DE FONDO. Aquí había
     `gap: 2px` (contra los 12px de escritorio) y los botones de canalización encogían de
     tamaño y de letra. Con eso, la barra "cabía" a base de aplastarse: la comprobación de
     desbordamiento decía siempre que sí y NUNCA se mandaba nada al menú — que es justo lo
     que se veía, todo pegado y nada escondido.
     La regla ahora es la de siempre en un diseño responsive que se sostiene: el
     espaciado es CONSTANTE y lo que se adapta es CUÁNTAS cosas se enseñan. Sin
     `flex-wrap`, además: una barra que envuelve tampoco desborda nunca. */
}

/* --- Cuenta y salida en la misma fila (estilo Gemini) --- */
.rail-cuenta-fila {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rail-cuenta-fila .rail-account {
  flex: 1 1 auto;
  min-width: 0;
}

/* Plegado, el botón de salir NO ocupa: si compartiera los 40 px con la cuenta, la inicial
   se quedaría sin sitio (es el mismo fallo que tenía el botón de menú con la chincheta). */
.rail-logout { display: none; }
.nav-rail.open .rail-logout,
.nav-rail.pinned .rail-logout {
  display: inline-flex;
  width: 34px;
  padding: 0 8px;
}
.rail-logout:hover { color: var(--danger); }

/* --- Respiración en la lista (b_17/b_18/b_19) --- */

/* La fila de badges y la hora quedaban pegadas al borde: el chip parecía cortado por la
   ventana y con el viewport estrecho llegaba a superponerse. */
.session-item { padding-right: 14px; }
.session-tags {
  padding-right: 2px;
  gap: 6px;
}

/* La flechita al RAS del contorno del primer chip: el hueco que dejaba su caja la
   despegaba del grupo y parecía de otra cosa. */
.tags-flecha {
  margin-left: -2px;
  margin-right: -1px;
}

/* Con el ratón encima, el contorno de los badges se aclara. Antes el borde y el fondo del
   hover eran el mismo tono, así que al pasar por encima los chips se disolvían en la fila. */
.session-item:hover .dept-chip,
.session-item:hover .asig-chip,
.session-item.active .dept-chip,
.session-item.active .asig-chip {
  border-color: var(--border-strong);
}

/* Con poco ancho, los badges ceden antes que la hora: la hora es una sola palabra y no
   puede partirse; un chip sí puede recortarse con puntos suspensivos (b_19). */
.session-tags .dept-chip,
.session-tags .asig-chip {
  min-width: 0;
  flex: 0 1 auto;
}
.session-tags .session-time { padding-left: 4px; }

/* Distintivo de instancia de pruebas (item 134). Va junto al logo, que es lo primero que se
   mira, y en ámbar: es un aviso, no un estado del sistema. Solo aparece en sandbox — un
   adorno permanente se vuelve invisible en una semana y dejaría de avisar cuando importa. */
.env-chip {
  margin-left: 8px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--warn, #d97706);
  background: color-mix(in srgb, var(--warn, #d97706) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 40%, transparent);
}

/* Guardas de layout para nombres largos (item 6 de la revisión). Un tope en el servidor
   evita lo absurdo; esto evita que lo LARGO PERO LEGÍTIMO rompa la fila. */
.rail-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.met-persona span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.met-nombre { max-width: 260px; }
.dept-row-top b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}