/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --correios-yellow: #FFCC00;
  --receita-blue:    #003F8A;
  --receita-light:   #0055B8;
  --bg:              #F8FAFC;
  --border:          #E2E8F0;
  --shadow-sm:       0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
  --shadow-md:       0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);
}

/* ─── BASE ───────────────────────────────────────────────── */
body {
  font-family: 'Source Sans 3', sans-serif;
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── PAGE TRANSITIONS ───────────────────────────────────── */
.page-section {
  animation: fadeUp .22s cubic-bezier(.4,0,.2,1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── HERO BACKGROUND ────────────────────────────────────── */
.hero-bg {
  background-color: var(--receita-blue);
  background-image:
    linear-gradient(135deg, #002d63 0%, var(--receita-blue) 50%, #004fa8 100%),
    radial-gradient(circle at 20% 80%, rgba(255,204,0,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0%, transparent 50%);
  background-blend-mode: screen;
}

/* ─── STEP CARDS ─────────────────────────────────────────── */
.step-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ─── CTA BUTTON SHINE ───────────────────────────────────── */
.cta-btn {
  position: relative;
  overflow: hidden;
}
.cta-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.cta-btn:hover::after {
  left: 130%;
}

/* ─── FORM INPUTS ────────────────────────────────────────── */
.form-input {
  font-size: .9375rem;
  line-height: 1.5;
  color: #1e293b;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-input:focus {
  border-color: var(--receita-blue);
  box-shadow: 0 0 0 3px rgba(0,63,138,.14);
  /* background permanece inalterado — inputs claros ficam cinza, escuros ficam azuis */
}
/* Inputs dentro de fundo escuro (modal de consulta) */
.input-on-dark:focus {
  border-color: rgba(255,255,255,.7) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important;
  background-color: rgba(255,255,255,.15) !important;
}

/* ─── QR CODE ────────────────────────────────────────────── */
.qr-container {
  min-width: 220px;
  min-height: 220px;
}
#qrcode canvas,
#qrcode img {
  display: block;
  margin: 0 auto;
}

/* ─── SPINNER ────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin .85s linear infinite;
}

/* ─── SUCCESS ANIMATION ──────────────────────────────────── */
.success-check {
  animation: scaleIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scaleIn {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ─── CUSTOM COLOR GUARANTEES ────────────────────────────── */
/* Fallback absoluto: garante as cores RF mesmo se o CDN Tailwind
   não processar as cores customizadas da config */
.bg-receita-blue          { background-color: #003F8A; }
.bg-receita-light         { background-color: #0055B8; }
.bg-correios-yellow       { background-color: #FFCC00; }
.bg-slate-bg              { background-color: #F8FAFC; }
.text-receita-blue        { color: #003F8A; }
.text-receita-light       { color: #0055B8; }
.text-correios-yellow     { color: #FFCC00; }
.border-receita-blue      { border-color: #003F8A; }
.hover\:bg-receita-light:hover { background-color: #0055B8; }
.hover\:bg-receita-blue:hover  { background-color: #003F8A; }
.cta-btn:hover            { background-color: #0055B8 !important; }

/* ─── PRINT ──────────────────────────────────────────────── */
@media print {
  header, footer, button, nav, #breadcrumb, .no-print { display: none !important; }
  body { background: #fff; }
  .page-section { padding: 0; animation: none; }
  .bg-white { border: 1px solid #e2e8f0; }
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  #qrcode canvas { width: 176px !important; height: 176px !important; }
  .qr-container { min-width: 196px; min-height: 196px; }
}