/* Toast CSS con alta especificidad para sobreescribir Bootstrap */

/* Contenedor de toasts - alta especificidad */
body #toast-container {
  position: fixed !important;
  top: 10px !important;
  right: 16px !important;
  z-index: 2147483647 !important;
  display: flex !important;
  /*flex-direction: column !important;*/
  gap: 10px !important;
  /*align-items: flex-end !important;*/
  pointer-events: none !important;
}

/* Toasts individuales - alta especificidad */
body #toast-container .toast {
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 220px !important;
  max-width: 420px !important;
  padding: 0px 0px 0px 15px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  transform-origin: top right !important;
  animation: toast-in .12s ease-out !important;
  border: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Keyframes */
@keyframes toast-in { 
  from { 
    opacity: 0 !important; 
    transform: translateY(-6px) scale(.98) !important; 
  } 
  to { 
    opacity:1 !important; 
    transform: translateY(0) scale(1) !important; 
  } 
}

/* Colores de toast - alta especificidad */
body #toast-container .toast.success { 
  background: #198754 !important; 
}
body #toast-container .toast.error { 
  background: #dc3545 !important; 
}
body #toast-container .toast.info { 
  background: #0d6efd !important; 
}

/* Mensaje dentro del toast */
body #toast-container .toast .msg { 
  flex: 1 !important; 
}

/* Botones de acción y cierre - alta especificidad */
body #toast-container .toast .action, 
body #toast-container .toast .close {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  padding: 6px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Estilos de focus para accesibilidad */
body #toast-container .toast .action:focus, 
body #toast-container .toast .close:focus { 
  outline: 3px solid rgba(255,255,255,0.2) !important; 
  outline-offset: 2px !important; 
}

/* Ocultar cualquier ícono de Bootstrap que pueda interferir */
body #toast-container .toast .close::before {
  display: none !important;
}