/* ==========================================================================
   AVISOS (feedback.js): toasts elevados y alerta/confirmación centrada.
   Clon del sistema de avisos del POS (FeedbackHost): mismo ícono dibujado,
   barra de tiempo y diálogo estilo SweetAlert, con los tokens de la tienda.
   ========================================================================== */

/* Tono → color del ícono, la barra de tiempo y el halo */
:is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="success"] { --fb: var(--a-success); --fb-soft: var(--a-success-50); }
:is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="error"] { --fb: var(--a-offer-600); --fb-soft: var(--a-offer-50); }
:is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="warning"] { --fb: var(--a-warning); --fb-soft: var(--a-warning-50); }
:is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="info"] { --fb: var(--a-brand-700); --fb-soft: var(--a-brand-50); }
:is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="question"] { --fb: var(--a-brand-700); --fb-soft: var(--a-brand-50); }

:root[data-theme="dark"] :is(.a-fb-toast, .a-fb-icon, .a-fb-dialog)[data-tone="error"] { --fb: var(--a-offer-700); }

/* Ícono dibujado: anillo suave + trazo */
.a-fb-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--fb-soft); }
.a-fb-icon[data-size="lg"] { width: 84px; height: 84px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--fb-soft) 55%, transparent); }
.a-fb-icon svg { width: 72%; height: 72%; overflow: visible; }
.a-fb-icon__ring { fill: none; stroke: var(--fb); stroke-width: 3; opacity: .28; }
.a-fb-icon__mark { fill: none; stroke: var(--fb); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
.a-fb-icon__dot { fill: var(--fb); }

/* Pila de toasts: arriba a la derecha, bajo el encabezado */
.a-fb-stack {
  position: fixed; top: calc(var(--a-header-h, 72px) + 12px); right: 16px; z-index: calc(var(--a-z-drawer) + 20);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.a-fb-toast {
  position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; overflow: hidden; pointer-events: auto;
  padding: 14px 14px 16px; color: var(--a-ink);
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-lg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--a-ink) 6%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--a-ink) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--fb) 10%, transparent);
  transition: opacity var(--a-dur) var(--a-ease-out), transform var(--a-dur-drawer) var(--a-ease-out);
}
@starting-style { .a-fb-toast { opacity: 0; transform: translateY(-10px) scale(0.97); } }
.a-fb-toast.is-leaving { opacity: 0; transform: translateX(24px); transition-duration: var(--a-dur-press); }
.a-fb-toast__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-top: 1px; }
.a-fb-toast__title { font-size: var(--a-text-sm); font-weight: 700; line-height: 1.3; }
.a-fb-toast__message { font-size: var(--a-text-sm); color: var(--a-muted); line-height: 1.4; overflow-wrap: anywhere; }
.a-fb-toast__details { margin: 4px 0 0; padding-left: 1.1rem; font-size: var(--a-text-xs); color: var(--a-muted); }
.a-fb-toast__close {
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--a-muted); cursor: pointer;
  transition: background-color var(--a-dur-press) ease, color var(--a-dur-press) ease;
}
.a-fb-toast__close:focus-visible { outline: none; box-shadow: var(--a-focus); }
@media (hover: hover) and (pointer: fine) { .a-fb-toast__close:hover { color: var(--a-ink); background: var(--a-surface-2); } }
/* Barra de tiempo: se vacía en lo que dura el aviso; se detiene con el mouse encima */
.a-fb-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--fb); transform-origin: left; animation: a-fb-timer var(--fb-duration, 3500ms) linear forwards; }
.a-fb-toast.is-paused .a-fb-toast__timer { animation-play-state: paused; }
.a-fb-toast .a-fb-icon__mark { animation: a-fb-draw 420ms var(--a-ease-out) 120ms backwards; }

/* Alerta / confirmación centrada (estilo SweetAlert) */
.a-fb-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--a-z-drawer) + 21); display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--a-scrim) 55%, transparent); backdrop-filter: blur(3px);
  transition: opacity var(--a-dur) var(--a-ease-out);
}
@starting-style { .a-fb-backdrop { opacity: 0; } }
.a-fb-dialog {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  overscroll-behavior: contain;
  padding: 32px 28px 24px; text-align: center; color: var(--a-ink);
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-xl); box-shadow: var(--a-shadow-lg);
  transition: opacity var(--a-dur-drawer) var(--a-ease-out), transform var(--a-dur-drawer) var(--a-ease-out);
}
@starting-style { .a-fb-dialog { opacity: 0; transform: translateY(8px) scale(0.96); } }
.a-fb-dialog:focus { outline: none; }
.a-fb-dialog .a-fb-icon { margin-bottom: 8px; }
.a-fb-dialog .a-fb-icon__mark { animation: a-fb-draw 520ms var(--a-ease-out) 160ms backwards; }
.a-fb-dialog[data-tone="warning"] .a-fb-icon, .a-fb-dialog[data-tone="error"] .a-fb-icon { animation: a-fb-nudge 420ms var(--a-ease-out) 120ms; }
.a-fb-dialog__title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.a-fb-dialog__text { margin: 0; max-width: 46ch; font-size: var(--a-text-sm); color: var(--a-muted); line-height: 1.5; text-wrap: pretty; white-space: pre-line; }
.a-fb-dialog__details {
  width: 100%; margin: 4px 0 0; padding: 10px 12px 10px 28px; text-align: left; font-size: var(--a-text-sm); color: var(--a-ink);
  background: var(--fb-soft); border-radius: var(--a-radius); max-height: 180px; overflow: auto;
}
.a-fb-dialog__actions { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; }
.a-fb-dialog__actions .a-btn { min-width: 140px; }

@keyframes a-fb-draw { from { stroke-dashoffset: 60; } }
@keyframes a-fb-timer { to { transform: scaleX(0); } }
@keyframes a-fb-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }

/* Página de fondo quieta con la alerta abierta */
html.a-fb-locked, html.a-fb-locked body { overflow: hidden; }

@media (max-width: 600px) {
  .a-fb-stack { top: calc(var(--a-header-h, 64px) + 8px); right: 50%; transform: translateX(50%); align-items: stretch; }
  .a-fb-dialog { padding: 28px 20px 20px; }
  .a-fb-dialog__actions { flex-direction: column-reverse; }
  .a-fb-dialog__actions .a-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .a-fb-toast, .a-fb-dialog { transition: opacity var(--a-dur-press) linear; }
  @starting-style { .a-fb-toast, .a-fb-dialog { transform: none; } }
  .a-fb-toast.is-leaving { transform: none; }
  .a-fb-icon__mark, .a-fb-dialog .a-fb-icon { animation: none !important; }
}