/* =========================================================
   AVISOS EN CAJA — la alerta del sistema, en un solo sitio
   RUTH.il

   QUÉ ES
   ------
   La caja de aviso con icono a la izquierda que el sistema usa para
   decir tres cosas:

     .aviso.bien    algo salió bien          (verde)
     .aviso.espera  algo está en curso       (ámbar)
     .aviso.mal     algo no se pudo          (rojo)
     .aviso.dato    información, sin juicio  (neutro)

   POR QUÉ EXISTE ESTE ARCHIVO
   ---------------------------
   Estas reglas vivían dentro de components/panel/pagos.css, que solo
   cargan las pantallas de pago y las de administración. Medido en los
   cuatro chats de trámite: los cuatro pintaban `.aviso` SIN ESTILO
   —sin fondo, sin borde, sin color de icono, radio 0—, porque esa hoja
   no llega ahí.

   El resultado es que cada chat se inventaba sus avisos a mano, con
   HTML dentro de una cadena de JavaScript y el verde escrito a pelo:
   `<i class="bi bi-check-circle-fill" style="color: #2ea043;">`. Cuatro
   pantallas, cuatro criterios, y ninguno cambia si cambia la paleta.

   Sacarlas aquí no cambia nada donde ya funcionaban —pagos.css sigue
   trayendo las suyas, y son idénticas— y las pone a mano de los chats.

   CÓMO SE USA
   -----------
       <div class="aviso bien">
         <i class="bi bi-check-circle-fill"></i>
         <div><strong>Título</strong><p>Explicación.</p></div>
       </div>

   El icono va fuera del <div> interior: la caja es una fila de dos
   columnas, icono y contenido.
   ========================================================= */

.aviso {
  border-radius: var(--radius, 12px);
  padding: 15px 17px;
  margin-bottom: 18px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .86rem;
  line-height: 1.55;
  border: 1px solid transparent;
}

.aviso i {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.aviso > div > strong:first-child { display: block; margin-bottom: 2px; }
.aviso p        { margin: 0; color: var(--text-3); font-size: .82rem; }
.aviso p strong { font-weight: 700; color: var(--text-2); }
.aviso .btn     { margin-top: 10px; }

/* Los cuatro tonos, con tokens PROPIOS de la caja de aviso.
   No usan --warning ni --success: las cuatro hojas de trámite
   redefinen --warning como un coral para otra cosa suya, y la alerta
   de "en curso" salía con el borde salmón en vez de ámbar, distinta a
   la misma alerta en pagos. Los --aviso-* no los toca nadie más y
   cambian con el tema en shared/css/tokens.css. */
.aviso.espera   { background: var(--aviso-warn-bg); border-color: var(--aviso-warn); }
.aviso.espera i { color: var(--aviso-warn); }

.aviso.bien     { background: var(--aviso-ok-bg); border-color: var(--aviso-ok); }
.aviso.bien i   { color: var(--aviso-ok); }

.aviso.mal      { background: var(--aviso-mal-bg); border-color: var(--aviso-mal); }
.aviso.mal i    { color: var(--aviso-mal); }

.aviso.dato     { background: var(--bg-2); border-color: var(--border); }
.aviso.dato i   { color: var(--accent); }

/* En un chat el aviso va dentro del hilo, no encima de una lista: el
   margen de abajo lo pone la separación entre mensajes. */
.bot-message .aviso,
.user-message .aviso,
#messagesContainer .aviso { margin-bottom: 0; }