/* Agend One – Notificaciones globales (flash / avisos)
   Inspirado en Uiverse (JohnnyCSilva) pero adaptado:
   - prefijo ao- para no chocar con Bootstrap (.card)
   - colores con tokens (--card, --ink, --muted, --border, --brand-*)
   - animación entrada/salida + reduce motion
   - “glass / cristal Apple”: blur + saturate + capas + borde luminoso
*/

:root {
   --ao-notify-w: 320px;
   --ao-notify-radius: 18px;

   /* Sombra tipo burbuja */
   --ao-notify-shadow: 0 12px 32px rgba(15, 23, 42, .18);

   /* Borde base (se mezcla con blanco/negro según modo) */
   --ao-notify-border: rgba(148, 163, 184, .22);

   /* Glass tuning */
   --ao-notify-blur: 18px;
   --ao-notify-sat: 1.25;

   --ao-notify-z: 2147483000;
}

/* Stack (top-center) */
.ao-notify-stack {
   position: fixed;
   top: calc(14px + env(safe-area-inset-top, 0px));
   left: 50%;
   right: auto;
   z-index: var(--ao-notify-z);
   isolation: isolate;
   transform: translateX(-50%) translateZ(0);

   display: grid;
   gap: 10px;
   width: min(var(--ao-notify-w), calc(100vw - 28px));
   pointer-events: none;
}

/* Tarjeta */
.ao-notify {
   pointer-events: auto;
   position: relative;
   isolation: isolate;

   display: flex;
   align-items: center;
   gap: 10px;

   width: 100%;
   min-height: 74px;

   border-radius: var(--ao-notify-radius);

   /* GLASS: el truco es que el fondo tenga ALFA (no opaco), si no, el blur no “se ve” */
   background:
      linear-gradient(180deg,
         rgba(255, 255, 255, .78),
         rgba(255, 255, 255, .58));

   /* Borde luminoso (no “gris plano”) */
   border: 1px solid color-mix(in srgb, #ffffff 42%, var(--ao-notify-border));

   /* Blur real (Safari necesita -webkit-) */
   -webkit-backdrop-filter: blur(var(--ao-notify-blur)) saturate(var(--ao-notify-sat));
   backdrop-filter: blur(var(--ao-notify-blur)) saturate(var(--ao-notify-sat));

   /* Sombra + brillo interno */
   box-shadow:
      var(--ao-notify-shadow),
      inset 0 1px 0 rgba(255, 255, 255, .70),
      inset 0 -1px 0 rgba(255, 255, 255, .18);

   overflow: hidden;

   transform: translateY(-14px);
   opacity: 0;
   animation: aoNotifyIn .32s cubic-bezier(.2, .9, .2, 1) forwards;

   transition: transform .18s ease, box-shadow .18s ease;
}

/* Capa “sheen” (reflejo suave, estilo burbuja) */
.ao-notify::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;

   background:
      radial-gradient(900px 140px at 35% 0%,
         rgba(255, 255, 255, .55),
         rgba(255, 255, 255, 0) 55%),
      radial-gradient(500px 220px at 110% 40%,
         rgba(0, 0, 0, .06),
         rgba(0, 0, 0, 0) 55%);

   opacity: .65;
}

/* Asegura que el contenido quede por encima del sheen */
.ao-notify>* {
   position: relative;
   z-index: 3;
}

.ao-notify:hover {
   transform: translateY(0) scale(1.02);
   box-shadow:
      0 16px 44px rgba(15, 23, 42, .22),
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -1px 0 rgba(255, 255, 255, .20);
   cursor: pointer;
}

/* “Img” (cuadradito con color por severidad + logo) */
.ao-notify__img {
   width: 52px;
   height: 52px;
   margin-left: 12px;
   border-radius: 12px;
   flex: 0 0 auto;

   position: relative;
   overflow: hidden;

   background: var(--ao-notify-img-bg,
         linear-gradient(135deg, var(--brand-2, #60a5fa), var(--brand-3, #a78bfa)));

   /* pequeño brillo tipo sticker */
   box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .45),
      0 6px 16px rgba(15, 23, 42, .16);

   transition: filter .25s ease, transform .25s ease;
}

/* Logo encima del color */
.ao-notify__img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: url("/static/img/logo_ao.png") center / 72% no-repeat;
   opacity: .95;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.ao-notify:hover .ao-notify__img {
   filter: saturate(1.2) contrast(1.1);
   transform: scale(1.03);
}

/* Contenido */
.ao-notify__text {
   flex: 1 1 auto;
   min-width: 0;
   padding: 10px 44px 10px 0;
   /* deja hueco a la X */
   color: var(--ink, #0f172a);
   font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

.ao-notify__head {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 8px;
   min-width: 0;
}

.ao-notify__title {
   margin: 0;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: .1px;
   color: var(--ink, #0f172a);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 0 1 auto;
   min-width: 0;
}

.ao-notify__meta {
   font-size: 11px;
   color: color-mix(in srgb, var(--muted, #64748b) 92%, transparent);
   white-space: nowrap;
   flex: 0 0 auto;
}

.ao-notify__meta::before {
   content: "·";
   margin-right: 6px;
   opacity: .7;
}

.ao-notify__msg {
   margin: 2px 0 0 0;
   font-size: 12.5px;
   line-height: 1.25rem;
   color: color-mix(in srgb, var(--ink, #0f172a) 86%, transparent);

   /* Antes: clamp a 2 líneas (se “cortaba” el flash).
      Ahora: mínimo igual si el texto es corto, pero crece si hay más contenido. */
   display: block;
   overflow: visible;
   white-space: pre-line;
   overflow-wrap: anywhere;
   word-break: break-word;
}

/* Botón cerrar */
.ao-notify__close {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 4;

   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;

   border: 0;
   border-radius: 10px;

   background: transparent;
   color: color-mix(in srgb, var(--muted, #64748b) 86%, transparent);
   transition: background .15s ease, color .15s ease, transform .15s ease;
}

.ao-notify__close:hover {
   background: rgba(255, 255, 255, .45);
   color: var(--ink, #0f172a);
   transform: scale(1.04);
}

/* Acento lateral (barrita) */
.ao-notify::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   z-index: 2;

   background: color-mix(in srgb, var(--brand-2, #60a5fa) 80%, transparent);
   opacity: .9;
}

/* Variantes (solo afectan el “img” y el acento lateral) */
.ao-notify--success {
   --ao-notify-img-bg: linear-gradient(135deg, #34d399, #10b981);
}

.ao-notify--info {
   --ao-notify-img-bg: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.ao-notify--warning {
   --ao-notify-img-bg: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.ao-notify--danger {
   --ao-notify-img-bg: linear-gradient(135deg, #fb7185, #ef4444);
}

.ao-notify--success::before {
   background: #10b981;
}

.ao-notify--info::before {
   background: #3b82f6;
}

.ao-notify--warning::before {
   background: #f59e0b;
}

.ao-notify--danger::before {
   background: #ef4444;
}

/* Salida */
.ao-notify.ao-notify--out {
   animation: aoNotifyOut .22s ease forwards;
}

@keyframes aoNotifyIn {
   from {
      opacity: 0;
      transform: translateY(-16px) scale(.98);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@keyframes aoNotifyOut {
   from {
      opacity: 1;
      transform: translateY(0) scale(1);
   }

   to {
      opacity: 0;
      transform: translateY(-10px) scale(.98);
   }
}

/* Dark mode: cristal oscuro (tipo iOS dark) */
:where(body.dark-mode, [data-bs-theme="dark"]) .ao-notify {
   background:
      linear-gradient(180deg,
         rgba(17, 24, 39, .78),
         rgba(17, 24, 39, .52));
   border: 1px solid rgba(255, 255, 255, .14);
   box-shadow:
      0 14px 40px rgba(0, 0, 0, .35),
      inset 0 1px 0 rgba(255, 255, 255, .10),
      inset 0 -1px 0 rgba(0, 0, 0, .25);
}

:where(body.dark-mode, [data-bs-theme="dark"]) .ao-notify::after {
   opacity: .55;
}

:where(body.dark-mode, [data-bs-theme="dark"]) .ao-notify__close:hover {
   background: rgba(255, 255, 255, .12);
   color: rgba(255, 255, 255, .90);
}

/* Fallback: si NO hay backdrop-filter, hacemos “burbuja” sin blur (pero decente) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .ao-notify {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: color-mix(in srgb, var(--card, #ffffff) 92%, transparent);
   }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
   .ao-notify {
      animation: none;
      opacity: 1;
      transform: none;
   }

   .ao-notify.ao-notify--out {
      animation: none;
   }

   .ao-notify:hover {
      transform: none;
   }
}