/* ========================================================================
   ui.css — Estilos para componentes de UI reutilizables
   
   Provee estilos para:
     - Loader: overlay global de carga durante operaciones asíncronas
     - Toasts: notificaciones no-bloqueantes
   
   Depende de: nada. Es CSS puro, sin librerías.
   ======================================================================== */

/* ---- Overlay de carga -------------------------------------------------- */
#loadingOverlay {
  position        : fixed;
  inset           : 0;                       /* top/right/bottom/left = 0 */
  background      : rgba(255, 255, 255, 0.65);
  display         : none;                    /* Oculto por defecto */
  align-items     : center;
  justify-content : center;
  z-index         : 99999;                   /* Encima del diálogo (~10000) */
}

body.loading-activo #loadingOverlay {
  display : flex;
}

.loading-card {
  background    : white;
  padding       : 20px 30px;
  border-radius : 8px;
  box-shadow    : 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align    : center;
  min-width     : 180px;
}

.loading-spinner {
  width         : 40px;
  height        : 40px;
  margin        : 0 auto 12px;
  border        : 4px solid #e0e0e0;
  border-top    : 4px solid #2E5C9E;          /* Azul corporativo */
  border-radius : 50%;
  animation     : loading-spin 0.8s linear infinite;
}

.loading-mensaje {
  margin     : 0;
  color      : #595959;
  font-size  : 14px;
  font-style : italic;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* Inputs/selects en estado de carga */
.cargando {
  background-image : linear-gradient(90deg, transparent, rgba(46, 92, 158, 0.1), transparent);
  background-size  : 200% 100%;
  animation        : loading-shimmer 1.2s ease-in-out infinite;
  cursor           : wait;
}

@keyframes loading-shimmer {
  0%   { background-position : 200%  0; }
  100% { background-position : -200% 0; }
}

/* ---- Toasts (notificaciones no-bloqueantes) ---------------------------- */
#toastContainer {
  position       : fixed;
  top            : 20px;
  right          : 20px;
  z-index        : 100000;             /* Encima del overlay del loader */
  display        : flex;
  flex-direction : column;
  gap            : 10px;
  max-width      : 380px;
  pointer-events : none;               /* Para que los huecos entre toasts no bloqueen clics */
}

/* Clase base .ui-toast (NO .toast): tanto Bootstrap como Materialize definen
   un componente .toast con opacity:0 y flex-basis:350px, que dejaba nuestro
   toast invisible y con 350px de alto. Renombrada para evitar la colisión. */
.ui-toast {
  background     : white;
  border-radius  : 6px;
  box-shadow     : 0 4px 12px rgba(0, 0, 0, 0.15);
  padding        : 12px 16px;
  display        : flex;
  align-items    : flex-start;
  gap            : 10px;
  font-size      : 14px;
  color          : #333;
  border-left    : 4px solid #2E5C9E;
  opacity        : 1;
  animation      : toast-entrada 0.25s ease-out;
  pointer-events : auto;               /* Cada toast sí captura clics */
}

.ui-toast.toast-saliendo {
  animation : toast-salida 0.25s ease-in forwards;
}

.toast-exito       { border-left-color : #548235; }    /* Verde */
.toast-error       { border-left-color : #C0392B; }    /* Rojo */
.toast-advertencia { border-left-color : #ED7D31; }    /* Naranjo */
.toast-info        { border-left-color : #2E5C9E; }    /* Azul (default) */

.toast-icono {
  flex-shrink     : 0;
  width           : 22px;
  height          : 22px;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-weight     : bold;
  color           : white;
  font-size       : 14px;
}

.toast-exito       .toast-icono { background : #548235; }
.toast-error       .toast-icono { background : #C0392B; }
.toast-advertencia .toast-icono { background : #ED7D31; }
.toast-info        .toast-icono { background : #2E5C9E; }

.toast-mensaje { flex-grow : 1; line-height : 1.4; }

.toast-cerrar {
  background  : transparent;
  border      : none;
  cursor      : pointer;
  color       : #999;
  font-size   : 18px;
  line-height : 1;
  padding     : 0 4px;
}
.toast-cerrar:hover { color : #333; }

@keyframes toast-entrada {
  from { transform : translateX(100%); opacity : 0; }
  to   { transform : translateX(0);    opacity : 1; }
}

@keyframes toast-salida {
  from { transform : translateX(0);    opacity : 1; }
  to   { transform : translateX(100%); opacity : 0; }
}