/* ================================================================
   Design System — Guia da Certificação
   Mobile-first · Merriweather + Inter · Azul institucional
================================================================ */

:root {
  /* BRAND */
  --color-primary:       #2563EB;
  --color-primary-dark:  #1B3A8C;
  --color-primary-light: #EFF4FF;
  --color-accent:        #4F7AFF;

  /* STATUS */
  --color-success: #16A34A;
  --color-danger:  #DC2626;
  --color-warning: #D97706;

  /* NEUTRALS */
  --bg:          #F8FAFC;
  --surface:     #FFFFFF;
  --surface-2:   #F1F5F9;
  --border:      #E2E8F0;
  --border-2:    rgba(27,58,140,.1);
  --text:        #0F172A;
  --text-2:      #475569;
  --text-3:      #94A3B8;

  /* DARK THEME (landing) */
  --ink:          #0A0F1E;
  --ink2:         #111827;
  --ink3:         #1a2233;
  --dark-border:  rgba(255,255,255,.08);
  --dark-border2: rgba(255,255,255,.14);
  --dark-text:    #F3F4F6;
  --dark-text2:   #9CA3AF;

  /* TIPOGRAFIA */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* RAIOS */
  --radius-card:   12px;
  --radius-button: 10px;
  --radius-input:  8px;
  --radius-pill:   100px;
  --radius-sm:     8px;

  /* SOMBRAS */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08);

  /* EASING */
  --ease: cubic-bezier(.16,1,.3,1);

  /* LAYOUT */
  --max:          1160px;
  --nav-h:        56px;
  --bottom-nav-h: 64px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }
img { max-width: 100%; display: block; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── LAYOUT ── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* ── BOTÕES ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; border: none;
  transition: opacity .15s, transform .1s; border-radius: var(--radius-button);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn-primary {
  background: var(--color-primary); color: #fff;
  padding: 14px 24px; font-size: 15px;
}
.btn-primary:hover { opacity: .88; }

.btn-ghost {
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 12px 20px; font-size: 14px;
}
.btn-ghost:hover { background: var(--color-primary-light); }

.btn-danger { background: var(--color-danger); color: #fff; padding: 12px 20px; font-size: 14px; }
.btn-full   { width: 100%; }

/* Spinner dentro de botão */
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: ds-spin .7s linear infinite; display: none; flex-shrink: 0;
}
.btn-loading .btn-spinner { display: block; }
.btn-loading { opacity: .65; pointer-events: none; }

/* ── CARDS ── */
.card           { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-card); }
.card-highlight { background: var(--surface); border: 2px solid var(--color-primary); border-radius: var(--radius-card); }
.card-metric    { padding: 16px; text-align: center; }
.metric-val     { font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1; }
.metric-lbl     { font-size: 11px; color: var(--text-2); margin-top: 4px; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.badge-ok      { background: #DCFCE7; color: var(--color-success); }
.badge-weak    { background: #FEE2E2; color: var(--color-danger); }
.badge-warn    { background: #FEF3C7; color: var(--color-warning); }
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-cpro-i  { background: var(--color-primary-light); color: var(--color-primary); }
.badge-cpro-r  { background: #EEF2FF; color: #4338CA; }
.badge-trial   { background: #FEF3C7; color: var(--color-warning); }

/* ── BARRA DE PROGRESSO ── */
.prog-track { height: 6px; background: var(--border); border-radius: 20px; overflow: hidden; }
.prog-fill  { height: 100%; border-radius: 20px; transition: width 1.2s var(--ease); }
.prog-ok    { background: var(--color-primary); }
.prog-strong{ background: var(--color-success); }
.prog-weak  { background: var(--color-danger); }
.prog-warn  { background: var(--color-warning); }

/* ── STREAK ── */
.streak-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FEF3C7; color: #92400E;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}

/* ── INPUTS ── */
.form-group  { margin-bottom: 16px; position: relative; }
.form-label  { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.form-input  {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-body); font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-input);
  outline: none; color: var(--text); background: var(--surface);
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.form-input:focus   { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.form-input::placeholder { color: var(--text-3); }
.form-input.error   { border-color: var(--color-danger); }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 5px; display: none; }
.form-error.show    { display: block; }

/* ── CHIP SELECTOR ── */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt   { position: relative; }
.chip-opt input[type="radio"],
.chip-opt input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-opt label {
  display: inline-block; padding: 9px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer; transition: all .2s; user-select: none;
}
.chip-opt input:checked + label {
  background: var(--color-primary-light); border-color: var(--color-primary);
  color: var(--color-primary); font-weight: 600;
}

/* ── TOAST ── */
.toast {
  position: fixed; bottom: calc(var(--bottom-nav-h) + 12px); left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink3, #1a2233); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-input); padding: 12px 20px;
  font-size: 13px; color: #F3F4F6;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
@media (min-width: 768px) { .toast { bottom: 24px; } }

/* ── SKELETON ── */
.skeleton { background: var(--border); border-radius: 6px; animation: sk-pulse 1.5s ease infinite; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── BOTTOM NAV ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  display: flex; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  color: var(--text-3); border: none; background: none;
  font-family: var(--font-body); transition: color .15s;
  text-decoration: none; padding: 4px 2px;
}
.nav-item.active, .nav-item:hover { color: var(--color-primary); }
.nav-item svg { width: 22px; height: 22px; stroke-width: 1.75; }
.nav-item.active svg { stroke-width: 2.25; }
.nav-label { font-size: 10px; font-weight: 500; }

/* ── QUESTÃO — tema pastel claro, cores sólidas ── */
.q-card {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(30,50,120,.10);
}
.q-head {
  background: #E8EEFF;
  padding: 16px 20px;
}
.q-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  color: #6B7DB3; margin-bottom: 8px; text-transform: uppercase;
}
.q-text {
  font-family: var(--font-body); font-size: 14px;
  color: #1A2140; font-weight: 600; line-height: 1.5;
}
.q-body { padding: 14px; background: #F0F4FF; }

/* Alternativas — fundo branco sólido */
.q-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid #DDE3F5;
  background: #FFFFFF;
  font-size: 13px; color: #374151;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; user-select: none;
}
.q-opt:last-child { margin-bottom: 0; }
.q-opt-key {
  width: 24px; height: 24px; border-radius: 4px;
  background: #EEF1FB; color: #6B7DB3;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Hover */
.q-opt:hover:not(.correct):not(.wrong) {
  border-color: #B8C4E8;
  background: #F5F7FF;
  color: #1A2140;
}
.q-opt:hover:not(.correct):not(.wrong) .q-opt-key { background: #D8DEFF; color: #4A5A90; }

/* Correta — verde sólido */
.q-opt.correct { border: 1.5px solid #4ADE80; background: #EDFAF3; pointer-events: none; }
.q-opt.correct .q-opt-key { background: #22C55E; color: #FFFFFF; }
.q-opt.correct .q-opt-txt { color: #166534; font-weight: 500; }

/* Errada — vermelho pastel sólido */
.q-opt.wrong { border: 1.5px solid #FCA5A5; background: #FEF2F2; pointer-events: none; }
.q-opt.wrong .q-opt-key { background: #EF4444; color: #FFFFFF; }
.q-opt.wrong .q-opt-txt { color: #7F1D1D; }

/* Feedback — Ray (correto) */
.q-feedback {
  margin-top: 12px; padding: 12px 14px;
  background: #EDFAF3;
  border-left: 3px solid #22C55E;
  border-radius: 0 8px 8px 0;
}
.q-feedback-t { font-size: 12px; font-weight: 600; color: #166534; margin-bottom: 4px; }
.q-feedback-d { font-size: 13px; color: #374151; line-height: 1.65; }

/* Feedback — após erro */
.q-feedback.wrong-fb { background: #FEF2F2; border-left-color: #EF4444; }
.q-feedback.wrong-fb .q-feedback-t { color: #991B1B; }
.q-feedback.wrong-fb .q-feedback-d { color: #374151; }

/* ── MODAL DE REFLEXÃO PÓS-ERRO (premium) ── */
#rflx-root {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
  opacity: 0; transition: opacity .22s ease;
}
#rflx-root.rflx-in { opacity: 1; }

.rflx-backdrop {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(4,8,22,.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.rflx-card {
  position: relative; z-index: 1;
  background: linear-gradient(158deg, #111E42 0%, #0A1328 100%);
  border: 1px solid rgba(99,140,255,.2);
  border-radius: 24px;
  padding: 34px 28px 28px;
  max-width: 420px; width: 100%;
  text-align: center;
  box-shadow:
    0 32px 64px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
  transform: scale(.92) translateY(12px);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
#rflx-root.rflx-in .rflx-card { transform: scale(1) translateY(0); }

.rflx-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1D4ED8 0%, #60A5FA 50%, #1D4ED8 100%);
}

.rflx-orb {
  width: 66px; height: 66px;
  margin: 0 auto 18px;
  background: rgba(37,99,235,.13);
  border: 1.5px solid rgba(37,99,235,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 29px; line-height: 1;
  box-shadow: 0 0 20px rgba(37,99,235,.18);
}

.rflx-h {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 700;
  color: #EEF2FF; margin-bottom: 9px; line-height: 1.3;
}

.rflx-p {
  font-size: 13px; color: rgba(255,255,255,.4);
  line-height: 1.65; margin-bottom: 26px;
}

.rflx-stack { display: flex; flex-direction: column; gap: 10px; }

.rflx-btn {
  width: 100%; padding: 14px 18px;
  border: none; border-radius: 13px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity .15s, transform .1s;
  letter-spacing: .01em;
}
.rflx-btn:active { transform: scale(.97); }
.rflx-btn:hover  { opacity: .88; }

.rflx-a {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff;
  box-shadow: 0 4px 18px rgba(37,99,235,.4);
}
.rflx-b {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.11);
}
.rflx-c {
  background: none;
  color: rgba(255,255,255,.27);
  font-size: 12.5px; font-weight: 500; padding: 10px;
}

.rflx-ta {
  width: 100%; min-height: 110px; max-height: 200px;
  padding: 13px 15px; border-radius: 13px;
  border: 1.5px solid rgba(99,140,255,.22);
  background: rgba(255,255,255,.05);
  color: #E8EEFF; font-family: var(--font-body);
  font-size: 14px; line-height: 1.6;
  resize: vertical; outline: none;
  margin-bottom: 12px; transition: border-color .2s, background .2s;
  box-sizing: border-box;
}
.rflx-ta:focus { border-color: #3B82F6; background: rgba(37,99,235,.07); }
.rflx-ta::placeholder { color: rgba(255,255,255,.18); }

.rflx-dots { display: flex; justify-content: center; gap: 8px; margin: 20px 0; }
.rflx-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(96,165,250,.45);
  animation: rflx-p 1.2s ease-in-out infinite;
}
.rflx-dots span:nth-child(2) { animation-delay: .2s; }
.rflx-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes rflx-p { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

.rflx-box {
  border-left: 3px solid #3B82F6;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px; margin-bottom: 20px; text-align: left;
}
.rflx-box-txt { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.72; margin: 0; }

/* ── ANIMAÇÕES ── */
@keyframes ds-spin     { to { transform: rotate(360deg); } }
@keyframes ds-fade-up  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes ds-blink    { 0%,100%{opacity:1} 50%{opacity:.3} }
.anim-fade-up { animation: ds-fade-up .4s var(--ease) both; }

/* ── UTILITÁRIOS ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.divider { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-3); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-muted   { color: var(--text-2); }