/* ============================================================
   Oula — Pila de mensajes flash
   Compartida por el shell de la app y por el layout de onboarding: los dos
   pintan app\widgets\Alert y ninguno debe depender del CSS del otro.
   ============================================================ */

/* Pila fija y centrada arriba: sirve igual dentro del shell y en el login, que
   va a sangre y no admite un bloque que empuje el contenido. Los colores se
   declaran aquí porque el widget emite las clases de Bootstrap. */
.oula-flash {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 2000; width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px; line-height: 19px;
}
.oula-flash .alert {
  margin: 0; padding: 12px 40px 12px 14px; border-radius: 12px;
  border: 1px solid var(--xc-border); background: var(--xc-card);
  color: var(--xc-ink); box-shadow: 0 12px 32px rgba(13, 43, 38, .18);
  position: relative;
}
/* Franja de color a la izquierda: distingue el tipo sin teñir todo el mensaje. */
.oula-flash .alert::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 12px 0 0 12px; background: var(--xc-mute);
}
.oula-flash .alert-danger::before  { background: #B03737; }
.oula-flash .alert-success::before { background: #1F9E63; }
.oula-flash .alert-warning::before { background: #C2410C; }
.oula-flash .alert-info::before    { background: #2A6FDB; }
.oula-flash .alert .btn-close {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
  padding: 0; opacity: .45; background-size: 10px;
}
.oula-flash .alert .btn-close:hover { opacity: .9; }
.oula-flash .alert a { color: inherit; text-decoration: underline; }

@media (max-width: 900px) {
  .oula-flash { top: 8px; width: calc(100vw - 16px); }
}