/* ============================================================
   TEAMWORK — Diagnóstico Público CSS
   diagnostico.tw.tec.br
   ============================================================ */
:root {
  --navy:  #0a1628;
  --navy2: #0f2040;
  --blue:  #1a56db;
  --blue2: #2563eb;
  --cyan:  #06b6d4;
  --gold:  #f59e0b;
  --white: #ffffff;
  --g50:   #f8fafc;
  --g100:  #f1f5f9;
  --g200:  #e2e8f0;
  --g400:  #94a3b8;
  --g600:  #475569;
  --g800:  #1e293b;
  --green: #10b981;
  --red:   #ef4444;
  --orange:#f97316;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--g50);color:var(--g800);min-height:100vh}

/* ── Header ─────────────────────────────────────────────── */
.diag-header{background:var(--navy);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.diag-header .logo-main{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;color:#fff}
.diag-header .logo-sub{font-size:.6rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;display:block}
.header-link{color:rgba(255,255,255,.5);font-size:.78rem;text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.4rem}
.header-link:hover{color:#fff}

/* ── Hero strip ──────────────────────────────────────────── */
.diag-hero{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:2.5rem 1.5rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.diag-hero h1{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.diag-hero h1 span{color:var(--gold)}
.diag-hero p{color:rgba(255,255,255,.6);font-size:.9rem;max-width:540px;margin:0 auto}

/* ── Wrapper ─────────────────────────────────────────────── */
.diag-wrap{max-width:760px;margin:0 auto;padding:2rem 1rem 4rem}

/* ── Progress ────────────────────────────────────────────── */
.prog-card{background:#fff;border:1px solid var(--g200);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.prog-step-label{font-size:.82rem;color:var(--g600);font-weight:500}
.prog-pct{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:var(--blue2)}
.prog-bar{height:7px;background:var(--g200);border-radius:50px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:50px;transition:width .4s ease}
.prog-dots{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--g200);transition:all .3s;flex-shrink:0}
.pdot.done{background:var(--green)}
.pdot.active{background:var(--blue2);transform:scale(1.4)}

/* ── Step cards ──────────────────────────────────────────── */
.step-card{background:#fff;border:1px solid var(--g200);border-radius:14px;overflow:hidden;display:none}
.step-card.active{display:block}
.step-card-header{background:var(--g50);border-bottom:1px solid var(--g200);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:.75rem}
.step-card-header i{font-size:1.2rem;color:var(--blue2)}
.step-card-header h2{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--navy)}
.step-card-header p{font-size:.78rem;color:var(--g400);margin-top:.15rem}
.step-card-body{padding:1.5rem}

/* ── Form fields ─────────────────────────────────────────── */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-group{margin-bottom:1rem}
.field-group.full{grid-column:1/-1}
.field-group label{display:block;font-size:.73rem;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.field-group label .req{color:var(--red);margin-left:.2rem}
.field-group input,.field-group select{width:100%;padding:.65rem .9rem;border:1.5px solid var(--g200);border-radius:8px;font-size:.9rem;font-family:'DM Sans',sans-serif;color:var(--g800);transition:border-color .2s;background:#fff;outline:none}
.field-group input:focus,.field-group select:focus{border-color:var(--blue2)}
.field-group input.err,.field-group select.err{border-color:var(--red)}

/* ── Classe selector ─────────────────────────────────────── */
.classe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.classe-card{border:2px solid var(--g200);border-radius:12px;padding:1.25rem;cursor:pointer;transition:all .2s;text-align:center;user-select:none}
.classe-card:hover{border-color:var(--blue2);background:rgba(26,86,219,.03)}
.classe-card.selected{border-color:var(--blue2);background:rgba(26,86,219,.06)}
.classe-num{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:var(--navy);margin-bottom:.3rem}
.classe-card.selected .classe-num{color:var(--blue2)}
.classe-tag{font-size:.68rem;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.4rem}
.classe-val{font-size:.78rem;color:var(--g600);line-height:1.4}

/* ── Category header ─────────────────────────────────────── */
.cat-head{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem}
.cat-head i{font-size:1.2rem;color:var(--cyan);flex-shrink:0}
.cat-head-info{flex:1}
.cat-head-info h3{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:#fff}
.cat-head-info p{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:.1rem}
.cat-counter{font-size:.75rem;color:rgba(255,255,255,.6);white-space:nowrap;font-weight:600}
.cat-counter span{color:var(--cyan);font-family:'Syne',sans-serif;font-size:.9rem;font-weight:800}

/* ── Question items ──────────────────────────────────────── */
.q-item{border:1.5px solid var(--g200);border-radius:10px;padding:.9rem 1rem;margin-bottom:.75rem;transition:border-color .2s}
.q-item.answered{border-color:#bbf7d0;background:rgba(16,185,129,.025)}
.q-item.answered-parcial{border-color:#fde68a;background:rgba(245,158,11,.025)}
.q-item.answered-nao{border-color:#fecaca;background:rgba(239,68,68,.025)}
.q-classes{display:inline-flex;background:rgba(26,86,219,.07);color:var(--blue2);padding:.15rem .5rem;border-radius:4px;font-size:.68rem;font-weight:700;margin-bottom:.5rem}
.q-text{font-size:.87rem;color:var(--g800);font-weight:500;line-height:1.55;margin-bottom:.5rem}
.q-note{font-size:.75rem;color:var(--g400);font-style:italic;line-height:1.4;margin-bottom:.6rem;display:flex;gap:.4rem}
.q-note i{color:var(--cyan);flex-shrink:0;margin-top:.1rem}
.q-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.q-opt{padding:.4rem 1rem;border:1.5px solid var(--g200);border-radius:50px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;background:#fff;font-family:'DM Sans',sans-serif;color:var(--g600)}
.q-opt:hover{border-color:var(--g400)}
.q-opt.opt-atende{background:rgba(16,185,129,.12);border-color:var(--green);color:#065f46}
.q-opt.opt-parcial{background:rgba(245,158,11,.12);border-color:var(--gold);color:#92400e}
.q-opt.opt-nao{background:rgba(239,68,68,.12);border-color:var(--red);color:#991b1b}

/* ── Navigation ──────────────────────────────────────────── */
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--g200)}
.btn-nav{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;border-radius:8px;font-weight:600;font-size:.88rem;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .2s}
.btn-back{background:var(--g100);color:var(--g800)}
.btn-back:hover{background:var(--g200)}
.btn-next{background:var(--blue2);color:#fff}
.btn-next:hover{background:#1d4ed8}
.btn-finish{background:linear-gradient(135deg,var(--green),#059669);color:#fff}
.btn-finish:hover{opacity:.9}

/* ── Resultado ───────────────────────────────────────────── */
.result-card{background:#fff;border:1px solid var(--g200);border-radius:14px;overflow:hidden}
.result-top{padding:2.5rem 2rem;text-align:center}
.result-emoji{font-size:3rem;margin-bottom:.5rem}
.result-score{font-family:'Syne',sans-serif;font-size:4.5rem;font-weight:800;line-height:1}
.result-score.high{color:var(--green)}
.result-score.mid{color:var(--gold)}
.result-score.low{color:var(--red)}
.result-subtitle{font-size:.95rem;color:var(--g600);margin-top:.35rem;margin-bottom:2rem}
.result-msg{background:var(--g50);border-radius:10px;padding:1rem 1.25rem;font-size:.85rem;color:var(--g600);line-height:1.65;text-align:left;max-width:520px;margin:0 auto 1.75rem}
.result-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.result-bars{padding:1.5rem 2rem;border-top:1px solid var(--g200)}
.result-bars h3{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:1rem}
.rbar-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.65rem}
.rbar-label{font-size:.78rem;color:var(--g600);width:170px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar-track{flex:1;height:7px;background:var(--g200);border-radius:50px;overflow:hidden}
.rbar-fill{height:100%;border-radius:50px;transition:width .7s ease .2s}
.rbar-pct{font-size:.78rem;font-weight:700;color:var(--g600);width:38px;text-align:right}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1.3rem;border-radius:8px;font-weight:700;font-size:.85rem;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .2s;text-decoration:none}
.btn-pdf{background:var(--red);color:#fff}
.btn-pdf:hover{opacity:.9}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{opacity:.9}
.btn-novo{background:var(--navy);color:#fff}
.btn-novo:hover{background:var(--blue2)}

/* ── Loading spinner ─────────────────────────────────────── */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Toast ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(60px);
  background:var(--navy);color:#fff;padding:.8rem 1.5rem;border-radius:10px;
  font-size:.85rem;font-weight:500;z-index:9999;opacity:0;transition:all .35s;
  display:flex;align-items:center;gap:.5rem;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success i{color:var(--green)}
.toast.error i{color:var(--red)}

/* ── Footer ──────────────────────────────────────────────── */
.diag-footer{background:var(--navy);text-align:center;padding:1.25rem;color:rgba(255,255,255,.35);font-size:.75rem;margin-top:4rem}
.diag-footer a{color:rgba(255,255,255,.35);text-decoration:none}
.diag-footer a:hover{color:rgba(255,255,255,.6)}

@media(max-width:640px){
  .field-row{grid-template-columns:1fr}
  .classe-grid{grid-template-columns:1fr}
  .diag-hero h1{font-size:1.3rem}
  .result-score{font-size:3.5rem}
  .rbar-label{width:120px}
}