/* =====================================================================
   Ruta en GitHub : frontend/css/componentes/avisos.css
   Proyecto       : DR ORGANICS - Sistema Administrativo y Financiero
   Descripción    : Avisos emergentes, alertas dentro de formularios y
                    etiquetas de estado.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Avisos emergentes (se cierran solos)
   --------------------------------------------------------------------- */

.avisos {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 200;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}


.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 8px 12px 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra-aviso);
  pointer-events: auto;
}


.aviso__icono {
  margin-top: 1px;
}


.aviso__texto {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}


.aviso--ok .aviso__icono {
  color: var(--ok-texto);
}


.aviso--error {
  border-color: #E7B3AD;
}


.aviso--error .aviso__icono {
  color: var(--peligro);
}


.aviso--advertencia .aviso__icono {
  color: var(--advertencia-texto);
}


.aviso--info .aviso__icono {
  color: var(--info-texto);
}


@media (max-width: 640px) {

  /* En celular van arriba, para no tapar los botones de los formularios. */
  .avisos {
    top: calc(var(--alto-barra) + 12px + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: 50%;
    transform: translateX(50%);
  }

}


/* ---------------------------------------------------------------------
   Alertas dentro de un formulario
   --------------------------------------------------------------------- */

.alerta {
  padding: 10px 12px;
  border-radius: var(--radio);
  font-size: 13px;
  font-weight: 500;
}


.alerta--error {
  background: var(--peligro-fondo);
  color: var(--peligro-texto);
}


.alerta--ok {
  background: var(--ok-fondo);
  color: var(--ok-texto);
}


.alerta--info {
  background: var(--info-fondo);
  color: var(--info-texto);
}


/* ---------------------------------------------------------------------
   Etiquetas de estado (Cobrada, Parcial, Vencida, Anulada...)
   --------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}


.chip--ok {
  background: var(--ok-fondo);
  color: var(--ok-texto);
}


.chip--advertencia {
  background: var(--advertencia-fondo);
  color: var(--advertencia-texto);
}


.chip--peligro {
  background: var(--peligro-fondo);
  color: var(--peligro-texto);
}


.chip--neutro {
  background: var(--neutro-fondo);
  color: var(--neutro-texto);
}