/* ==========================================================================
   Modo del bot — el color como leyenda (item A4)

   Verde = el bot atiende. Azul = redacta y espera a una persona. Gris = no interviene.
   Las tres reglas de color viven AQUI y en ningun otro sitio, porque una leyenda con una
   excepcion deja de ser una leyenda: basta que una pantalla pinte "asistencia" de verde
   para que el color deje de significar nada y haya que leer la palabra.

   DONDE VA ESTE FICHERO EN LA CASCADA: justo despues de system-status.css, que es quien
   define .chat-badge. Aqui se le ponen los colores por modo, asi que tiene que ir despues.
   ========================================================================== */

/* --- El puntito ----------------------------------------------------------- */

/* Acompania al desplegable y a cualquier sitio donde haga falta decir "este es el modo"
   sin gastar una palabra. Lleva `title` siempre (lo pone el JS): el color solo comunica a
   quien lo distingue, y la guia prohibe que el color sea el UNICO portador de un dato. */
.modo-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--modo-apagado);

  /* El color cambia al elegir otro modo en el desplegable: es un micro-estado, asi que va
     corto (140 ms). Sin transicion el salto se lee como un parpadeo del layout. */
  transition: background-color .14s ease;
}
.modo-punto.modo-activo { background: var(--modo-activo); }
.modo-punto.modo-asistencia { background: var(--modo-asistencia); }
.modo-punto.modo-entrenamiento { background: var(--modo-entrenamiento); }
.modo-punto.modo-apagado { background: var(--modo-apagado); }

/* --- El selector (puntito + desplegable) ---------------------------------- */

.modo-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* El borde del desplegable se tine del color del modo. Es la mitad del "colorsito" que se
   ve de un vistazo sin abrirlo, y es la parte que SI se puede pintar de forma fiable: dar
   color a las <option> depende del navegador y del sistema operativo, asi que donde no
   funciona la idea se pierde entera y sin aviso. */
.modo-select {
  min-width: 0;
  max-width: 240px;
  border-color: var(--border-strong);
  transition: border-color .14s ease, color .14s ease;
}
.modo-selector.modo-activo .modo-select { border-color: var(--modo-activo); }
.modo-selector.modo-asistencia .modo-select { border-color: var(--modo-asistencia); }
.modo-selector.modo-entrenamiento .modo-select { border-color: var(--modo-entrenamiento); }
.modo-selector.modo-apagado .modo-select { border-color: var(--modo-apagado); }

/* En foco manda el foco, con el mismo anillo verde que el resto de la consola. Que ese
   verde coincida con el del modo "activo" no rompe la leyenda: el PUNTITO esta fuera del
   control y no lo tapa nunca el anillo, asi que el modo se sigue leyendo mientras el
   desplegable esta enfocado. Y un foco que cambia de color segun el estado seria un
   indicador que hay que aprender. */
.modo-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- La fila del menu (...) ------------------------------------------------ */

/* NO es .msg-menu-item: esa clase es un boton y trae hover y cursor de pulsable. Esta fila
   no se pulsa —lo pulsable es el desplegable que lleva dentro—, y un hover que se enciende
   sobre algo que no hace nada es una promesa falsa. Comparte el padding y el hueco del
   icono para que se alinee con las filas de arriba. */
.modo-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text);
}
.modo-fila .modo-fila-txt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.modo-fila .modo-selector { flex: 0 1 auto; }

/* En el menu el desplegable va mas apretado, pero NO por debajo de lo que mide su opcion
   mas larga: un <select> nativo no pone puntos suspensivos, RECORTA. Se midio con la fuente
   real —la peor opcion es "Como el global (asistencia)", 189px— y de ahi sale este tope.
   Ponerlo mas bajo dejaba "Apagado - no intervien" cortado a media palabra. */
.modo-fila .modo-select {
  max-width: 208px;
  padding: 6px 8px;
  font-size: 12.5px;
}

/* EN PANTALLA ESTRECHA EL DESPLEGABLE BAJA SOLO. En una linea el menu pedia ~390px, que en
   un movil de 390px es la pantalla entera. Sigue siendo UNA fila —que es lo que se pidio:
   que el saco no crezca a lo alto cada vez que se le anade algo—, solo que en dos renglones
   cuando no hay ancho. La sangria alinea el desplegable con el texto de arriba, no con el
   icono. */
@media (max-width: 560px) {
  .modo-fila { flex-wrap: wrap; }
  .modo-fila .modo-selector {
    flex: 1 1 100%;
    margin-left: 32px;
  }
  /* Un tope, no "sin tope": el menu se dimensiona por su contenido, asi que un desplegable
     libre lo estiraria hasta el ancho de su opcion mas larga y volveriamos al problema. */
  .modo-fila .modo-select { flex: 1 1 auto; max-width: 260px; }
}

/* --- Los distintivos de la lista y de la cabecera -------------------------- */

/* El MISMO color que el puntito, y por eso estan aqui y no en system-status.css: si el
   distintivo viviera en otro fichero, cambiar el azul de "asistencia" en un sitio y no en
   el otro seria un descuido de una linea. */
.chat-badge.modo-activo {
  background: var(--modo-activo-bg);
  color: var(--modo-activo);
}
.chat-badge.modo-asistencia {
  background: var(--modo-asistencia-bg);
  color: var(--modo-asistencia);
}
.chat-badge.modo-entrenamiento {
  background: var(--modo-entrenamiento-bg);
  color: var(--modo-entrenamiento);
}
.chat-badge.modo-apagado {
  background: var(--modo-apagado-bg);
  color: var(--modo-apagado);
}

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .modo-punto,
  .modo-select {
    transition: none;
  }
}