/* =====================================================================
   app-shell.css — camada "app premium" (aditiva, theme-agnostic)
   Toasts, skeletons, entrada de página, reveal-on-scroll, util de espaço.
   NÃO redefine tokens; usa os de design.css/pixpro com fallback.
   Tudo seguro contra FOUC: se o JS não rodar, nada fica escondido.
   ===================================================================== */

/* ---------- Entrada de página (gentil, nunca esconde 100%) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.app-ready .app-main {
    animation: fp-page-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes fp-page-in {
    from { opacity: 0.0; transform: translateY(10px); }
    to   { opacity: 1;   transform: none; }
  }
}

/* ---------- Toasts ---------- */
.toast-host {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* acima do bottom-nav */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 28px));
  pointer-events: none;
}
@media (min-width: 721px) {
  .toast-host { bottom: 26px; }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(13, 19, 33, 0.96);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--brand, #3b82f6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font: 600 0.92rem/1.35 'Inter', system-ui, sans-serif;
  backdrop-filter: blur(8px) saturate(150%);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(8px) scale(0.98); }
.toast.is-ok   { border-left-color: var(--success, #34d399); }
.toast.is-warn { border-left-color: var(--warning, #fbbf24); }
.toast.is-err  { border-left-color: var(--danger, #f87171); }
.toast .toast-ico { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.2; }
.toast .toast-msg { flex: 1 1 auto; }
.toast .toast-x {
  flex: 0 0 auto; cursor: pointer; opacity: 0.6; font-size: 1.1rem;
  line-height: 1; background: none; border: 0; color: inherit; padding: 2px 4px;
}
.toast .toast-x:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.2s ease; transform: none; }
  .toast.is-in { transform: none; }
}

/* ---------- Skeletons ---------- */
.skel, .skel-text, .skel-card {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.16);
  border-radius: 10px;
}
.skel-text { height: 0.85em; margin: 6px 0; border-radius: 6px; }
.skel-text.w-60 { width: 60%; }
.skel-text.w-40 { width: 40%; }
.skel-card { height: 96px; border-radius: 16px; }
.skel::after, .skel-text::after, .skel-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-100%);
  animation: fp-shimmer 1.25s infinite;
}
@keyframes fp-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skel::after, .skel-text::after, .skel-card::after { animation: none; }
}

/* ---------- Reveal on scroll (opt-in via [data-reveal]) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ---------- Pull-to-refresh (opt-in via body[data-ptr]) ---------- */
.ptr-spinner {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%) scale(0.6);
  z-index: 1100; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--brand, #3b82f6);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.ptr-spinner.is-on { opacity: 1; transform: translateX(-50%) scale(1); }
.ptr-spinner.is-spin { animation: fp-spin 0.7s linear infinite; }
@keyframes fp-spin { to { transform: translateX(-50%) scale(1) rotate(360deg); } }

/* ---------- Util de espaçamento opt-in ---------- */
.u-stack-2 > * + * { margin-top: var(--space-2, 8px); }
.u-stack-3 > * + * { margin-top: var(--space-3, 12px); }
.u-stack-4 > * + * { margin-top: var(--space-4, 16px); }
.u-stack-6 > * + * { margin-top: var(--space-6, 24px); }

/* Botões com feedback tátil sutil ao toque */
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .app-bottom-nav a:active, .dash-card:active { transform: scale(0.98); }
}