/* main.css — reset, tipografia, animações globais e toasts.
   Tokens estão em core/tokens.css. */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(25,118,210,.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(46,125,50,.05)  0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 55% 10%, rgba(63,81,181,.05)  0%, transparent 55%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(67,97,238,.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(30,122,138,.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 55% 10%, rgba(74,56,120,.09) 0%, transparent 55%);
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
img, svg { display: block; }
input, select { font-family: var(--font); }

/* ── Touch ── */
* { -webkit-tap-highlight-color: transparent; }
button, a, [data-section], [data-tab], [data-detail-tab], [data-ridx], canvas {
  touch-action: manipulation;
}
.nav-link, .tab-btn, .page-btn, .btn-theme,
.btn-refresh, .btn-menu, .detail-tab-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-close {
  min-height: 44px;
  min-width: 44px;
}

/* ── Banner de carregamento flutuante ── */
.loading-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--lg-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--lg-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--lg-inset), 0 8px 32px rgba(67,97,238,.18), 0 2px 8px rgba(15,22,40,.08);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
  pointer-events: none;
}
.loading-banner.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-14px);
  visibility: hidden;
}
.loading-banner-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(67,97,238,.20);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loading-banner-text { color: var(--text-muted); }

/* ── Animações ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
  min-height: 110px;
}
.skeleton-row td {
  padding: 0; height: 44px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ── Erro inline ── */
.section-error {
  background: rgba(253,243,200,.85);
  border: 1px solid rgba(234,179,8,.5);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: .84rem;
  color: #713f12;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .section-error {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #fcd34d;
}

/* ── Toast de erro global ── */
.error-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: #e11d48; color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 32px rgba(225,29,72,.35);
  z-index: 9999; font-size: .875rem;
  animation: slideUp .25s ease;
  max-width: calc(100vw - 32px);
}
.error-toast svg { width: 20px; height: 20px; flex-shrink: 0; }
.error-toast.hidden { display: none; }
.toast-close {
  margin-left: 8px;
  background: rgba(255,255,255,.25);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: .8rem; color: #fff;
}

/* ── Estado vazio ── */
.empty-row td {
  text-align: center; color: var(--text-muted);
  padding: 36px !important; font-size: .84rem;
}