/* ============================================================
   @file    web_cargadores/public/utils/CSS/toast.css
   ============================================================ */
/* ============================================================
   📍 Posicionamiento base del contenedor de toasts
   Siempre fijo arriba a la derecha salvo que la página diga lo contrario
   ============================================================ */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;

  display: flex;
  flex-direction: column;
  gap: .5rem;

  z-index: 1080;
  pointer-events: none;
}

/* Mobile: simplemente cambiamos lado */
@media (max-width: 767.98px) {
  #toast-container {
    right: auto;
    left: 1rem;
  }
}

/* ============================================================
   🎯 TOAST BASE
   ============================================================ */
.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--color-text);

  min-width: 280px;
  max-width: min(420px, 92vw);

  overflow: hidden;
  pointer-events: auto;
}

/* Header */
.toast-header {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: .6rem .75rem;
  border-bottom: 1px solid var(--color-border);

  background: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
  font-weight: 700;
}

/* Body */
.toast-body {
  padding: .75rem;
}

/* ============================================================
   🎨 Variantes
   ============================================================ */
.toast-success { border-left: 4px solid var(--color-success); }
.toast-info    { border-left: 4px solid var(--color-info); }
.toast-warn    { border-left: 4px solid var(--color-warning); }
.toast-danger  { border-left: 4px solid var(--color-danger); }

.toast-success .toast-header {
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-alt));
}
.toast-info .toast-header {
  background: color-mix(in srgb, var(--color-info) 12%, var(--color-bg-alt));
}
.toast-warn .toast-header {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-alt));
}
.toast-danger .toast-header {
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
}

/* ============================================================
   📊 Progress bar
   ============================================================ */
.toast .progress {
  height: 3px;
  background: color-mix(in srgb, var(--color-border) 60%, transparent);
}

.toast .progress .bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 120ms linear;
}

/* ============================================================
   📱 Mobile toast size
   ============================================================ */
@media (max-width: 575.98px) {
  .toast {
    width: calc(100vw - 2rem);
    min-width: auto;
  }
}

/* ============================================================
   🌙 Dark Mode
   ============================================================ */
html[data-bs-theme="dark"] .toast-header {
  background: color-mix(in srgb, var(--color-bg-alt) 40%, transparent);
}

/* ============================================================
   🎯 LOGIN: Centrado — SIN !important
   ============================================================ */
body.login-page #toast-container {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}