/* Cards de pergunta */
.q{
  padding:14px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.00)); margin-bottom:12px
}
.q h4{ margin:0 0 8px 0; font-size:15px; letter-spacing:.2px; color:var(--question); font-weight:700 }

.hint{ font-size:12px; color:var(--muted) }

button{ appearance:none; border:0; background:var(--brand); color:#06252b; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer }
button.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink) }

/* Chips de risco */
.riskLow{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #0f2a1b; background:rgba(34,197,94,.12); color:#a7f3d0 }
.riskMod{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #3a2a05; background:rgba(245,158,11,.12); color:#fde68a }
.riskHigh{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #3a0a0a; background:rgba(239,68,68,.12); color:#fecaca }

/* Inputs pílula */
.pillInput{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  background:#0a1526; color:var(--ink); border-radius:12px; outline:none;
}
.pillInput::placeholder{ color:#64748b }
.pillInput:focus{ box-shadow:0 0 0 2px rgba(34,211,238,.25) inset; }

/* Dropdown multi-seleção (antigo) */
.dropdown{ position:relative; width:100%; }
.dropdown-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); display:none; z-index:50;
  background:#0a1526; border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 10px 25px rgba(0,0,0,.35); max-height:280px; overflow:auto;
}
.dropdown-menu label{ display:flex; align-items:center; gap:8px; padding:6px 4px; cursor:pointer; user-select:none; }
.dropdown-menu input{ accent-color:var(--brand-ink); }

/* Score geral */
.scoreGeral{ text-align:center; margin-top:24px; }
.scoreGeralBox{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-top:10px; }
.scoreGeralBox .score{ font-size:28px; font-weight:800; color:var(--brand); }

/* Subperguntas */
.subq{ display:block; margin:8px 0 6px; font-weight:700; color:var(--question); letter-spacing:.2px; }

/* Nota explicativa */
.noteLeft{
  text-align:left; margin-top:10px; font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
}
.highlightRisk{ color:#FFA71D !important; font-weight:600; }

/* Legenda de classificação */
.riskLegend{
  margin-top:16px; border:1px dashed var(--line); border-radius:12px; padding:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0));
}
.riskLegend h4{ margin:0 0 10px 0; color:var(--muted); font-weight:700; letter-spacing:.2px; }
.riskLegend .bands{ display:grid; gap:10px; grid-template-columns:repeat(4,1fr); }
.riskCard{
  border:1px solid var(--line); border-radius:12px; padding:10px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; background:rgba(255,255,255,.02);
}
.riskRange{ font-size:12px; color:var(--muted) }
.riskTitle{ font-weight:800; letter-spacing:.3px }
.riskTitle.low{ color:#a7f3d0 } .riskTitle.mod{ color:#fde68a } .riskTitle.high{ color:#fecaca }
@media (max-width:800px){ .riskLegend .bands{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .riskLegend .bands{ grid-template-columns:1fr } }

/* Agravantes */
.agItem{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.agItem input[type="checkbox"]{ margin:0; width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto; }
.agItem label{ margin:0; padding:0; cursor:pointer; }
@media (max-width:640px){ .agItem{ white-space:normal; } }

/* Ações finais (Salvar / Imprimir) */
.endActions{
  display:flex !important; justify-content:center !important; align-items:center !important;
  gap:16px !important; flex-wrap:wrap !important; margin-top:48px !important; margin-bottom:32px !important; width:100% !important;
}

/* Validações */
.inputError{ border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.35) inset !important; background:#0f1626 !important; }
.niceSelect-btn.inputError{
  border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.35) inset !important; background:#0f1626 !important;
}

/* Additional Markers (box informativo) */
.additionalMarkers{ background-color:#e0f7fa; border:1px solid #00acc1; border-radius:8px; padding:16px; margin-top:20px; }
.additionalMarkers h2{ color:#00796b; }
.additionalMarkers p{ font-size:14px; color:#004d40; }
.additionalMarkers ul{ list-style-type:none; padding-left:0; }
.additionalMarkers li{ font-size:16px; color:#00796b; }
.incentiveMessage{ margin-top:12px; font-weight:bold; color:#d32f2f; }

/* Recursos bloqueados na avaliação Rápida */
.lockedFeature{
  opacity:.55; filter:grayscale(.15);
  background:linear-gradient(0deg, rgba(255,0,0,.03), rgba(255,0,0,.03));
  border:1px dashed var(--line); border-radius:10px; padding:10px 12px; position:relative;
}
.lockedNote{ color:#EA3680; font-weight:700; font-size:12px; margin-top:6px; }
.lockedPill{
  position:absolute; right:10px; top:10px; background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca;
  font-weight:700; font-size:11px; padding:3px 8px; border-radius:999px;
}
.lockedFeature *{ pointer-events:none; }
.lockedFeature .lockedNote, .lockedFeature .lockedPill{ pointer-events:auto; }

/* NiceSelect (single) */
.niceSelect-wrap{ position:relative; width:100%; }
.niceSelect-native{ display:none !important; }
.niceSelect-btn{
  width:100%; padding:10px 12px; border:1px solid var(--line); background:#0a1526; color:var(--ink);
  border-radius:12px; text-align:left; cursor:pointer; font:inherit;
}
.niceSelect-btn:after{ content:"▾"; float:right; opacity:.7; }
.niceSelect-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); display:none; z-index:60;
  background:#0a1526; border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 10px 25px rgba(0,0,0,.35); max-height:280px; overflow:auto;
}
.niceSelect-item{
  padding:10px 10px; border-radius:10px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; color:var(--ink);
}
.niceSelect-item:hover{ background:rgba(255,255,255,.04); }
.niceSelect-item[aria-selected="true"]{ outline:1px dashed var(--brand-ink); }
@media (max-width:640px){ .niceSelect-menu{ z-index:95; } }

/* Info popover */
.infoAnchor{ position:relative; display:inline-flex; align-items:center; gap:6px; }
.infoBtn{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px;
  font-weight:800; font-size:12px; line-height:1; border:1px solid #FFA71D; color:#FFA71D; background:rgba(255,167,29,.08);
  cursor:pointer; margin-left:8px; transition:.2s;
}
.infoBtn:hover{ background:#FFA71D; color:#0b1222; border-color:#FFA71D; }
.infoPopover{
  position:absolute; z-index:120; top:calc(100% + 8px); right:0; max-width:min(380px, 92vw);
  background:rgba(10,21,38,.96); border:0 solid #FFA71D; border-radius:12px; padding:12px 14px; color:#FFA71D;
  box-shadow:0 8px 28px rgba(0,0,0,.45); font-size:13px; line-height:1.45; white-space:normal; word-break:break-word;
}
.infoPopover::after{ content:""; position:absolute; top:-6px; right:14px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #FFA71D; }
.infoPopover::before{ content:""; position:absolute; top:-5px; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid rgba(10,21,38,.96); }
.infoPopover .closeInfo{ position:absolute; top:6px; right:8px; border:0; background:transparent; color:#FFA71D; cursor:pointer; font-size:16px; transition:opacity .2s; }
.infoPopover .closeInfo:hover{ opacity:.85; }

/* Mobile refinements gerais dos cards/wrap */
@media (max-width:640px){
  .panel.card > h2{ display:block; width:100%; padding-right:0; margin-bottom:6px; }
  .profileTag{ position:static; display:inline-block; margin-top:6px; }
  :root{ --label-size-mobile:14.5px; }
  label{ font-size:var(--label-size-mobile); }
  .pillInput, input[type="number"], input[type="text"], input[type="email"], select{ padding:12px 14px; font-size:15px; }
}
/* Impede “elástico” e scroll do fundo quando o menu está aberto */
html, body { overscroll-behavior-y: contain; }
.drawer__overlay { touch-action: none; }         /* bloqueia gestos na overlay */
.drawer__panel { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/* Quando o menu estiver aberto, travar o body com técnica do position:fixed */
body.menu-open {
  position: fixed;
  width: 100%;
  overflow: hidden;           /* redundante, mas ajuda no Android */
}
/* ===== DETECÇÃO (layout/estilo) ===== */
.detectWrap{ 
  margin-bottom:18px; border:1px solid var(--line); border-radius:14px; 
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  padding:14px;
}
.detectHero{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.detectHead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.detectHead h2{ margin:0; }
.detectBadges{ display:flex; flex-wrap:wrap; gap:8px; }

.pill{
  display:inline-flex; align-items:center; gap:6px; 
  padding:6px 10px; border-radius:999px; border:1px solid var(--line); 
  background:rgba(255,255,255,.02); font-weight:700; font-size:13px;
}
.metric-pill.critical{ border-color:#3a0a0a; background:rgba(239,68,68,.12); color:#fecaca; }
.metric-pill.moderate{ border-color:#3a2a05; background:rgba(245,158,11,.12); color:#fde68a; }
.metric-pill.low{ border-color:#0f2a1b; background:rgba(34,197,94,.12); color:#a7f3d0; }
.pill.time{ opacity:.85; }

.detectGrid{ 
  display:grid; gap:12px; grid-template-columns: 2fr 2fr 1.6fr; margin-top:6px;
}
.detectCard{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.detectCard h3{ margin:0 0 8px 0; font-size:15px; color:var(--question); letter-spacing:.2px; }

.detectList, .detectBullets, .detectQuickWins{ 
  margin:0; padding-left:18px; display:block;
}
.detectList li, .detectBullets li, .detectQuickWins li{
  margin:6px 0; color:var(--ink);
}
.detectList li small, .detectBullets li small{ color:var(--muted); }

.detectBanner{
  margin-top:12px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  border:1px dashed var(--line); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.bandLeft{ display:flex; align-items:center; gap:10px; }
.bandLabel{ font-size:12px; color:var(--muted); }
.bandScore{ display:flex; align-items:center; gap:8px; }
.bandScore #detectScoreVal{ font-size:22px; font-weight:800; color:var(--brand); }

/* responsivo */
@media (max-width:980px){ .detectGrid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .detectGrid{ grid-template-columns: 1fr; } }

/* Detecção: remover marcadores nativos */
.detectList,
.detectBullets,
.detectQuickWins {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Opcional: ajustar espaçamento entre itens já que não há marcador */
.detectList li,
.detectBullets li,
.detectQuickWins li {
  padding-left: 0 !important;
  margin: 6px 0;
}

/* Ocultar o link "ver recomendações completas" */
#detectRecsLink { display: none !important; }

/* Donut do Resultado da Detecção */
.detectChart{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.detectChart .donut{ position:relative; width:140px; height:140px }
.donutSvg{ width:140px; height:140px; display:block }
.d-bg{ stroke:#1e293b22 } /* trilho */
.d-seg{ stroke-linecap:butt; stroke-width:12; transition:stroke-dasharray .35s ease, stroke .2s ease } /* ajustado */
.d-seg.low  { stroke:#22c55e }
.d-seg.sig  { stroke:#f59e0b }
.d-seg.crit { stroke:#ef4444 }
.donutCenter{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center }
.donutBig{ font-weight:800; font-size:28px; line-height:1 }
.donutSub{ font-size:12px; opacity:.8 }

.detectLegend{ list-style:none; padding:0; margin:0; display:flex; gap:14px; flex-wrap:wrap }
.detectLegend .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px }
.detectLegend .dot.crit{ background:#ef4444 }
.detectLegend .dot.sig { background:#f59e0b }
.detectLegend .dot.low { background:#22c55e }

/* ajuste do “tempo” para não grudar */
.pill.time{ margin-left:auto }
@media (max-width: 720px){
  .pill.time{ margin-left:0 }
}
.detectDonut{ position:relative; width:140px; height:140px; }
.detectDonut__center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.detectDonut__center #dcenter-val{ font-weight:800; font-size:28px; line-height:1; }
.detectDonut__center #dcenter-sub{ font-size:11px; opacity:.85; }
/* Header da detecção: donut + legenda centralizados */
.detectHero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}

/* O donut ganha centralização e um espacinho */
.detectDonut{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:6px auto 2px auto;
}

/* Legenda em linha, quebrando bem no mobile */
.detectLegend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:6px 0 0 0;
  padding:0;
  list-style:none;
}
.detectLegend li{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}
.detectLegend .dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block;
}
.detectLegend .dot.crit{ background:#ef4444; }
.detectLegend .dot.sig { background:#f59e0b; }
.detectLegend .dot.low { background:#10b981; }

/* Opcional: limite de largura do header pra ficar elegante em telas largas */
.detectWrap .detectHead{
  width:100%;
  max-width:980px;
  margin:0 auto;
}
/* Container do semáforo + texto */
/* ===== Semáforo por pergunta ===== */
.qStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.85rem;
}

/* Caixa do semáforo: coluna com 3 lâmpadas */
.semWrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #1a1a1a;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.6);
}

/* Lâmpadas: círculos apagados por padrão */
.sem {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #444; /* apagado */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8) inset;
  opacity: 0.35;
  transition: all 0.2s ease-out;
}

/* Vermelho aceso */
.sem.sem-red.is-on {
  background: #e63946;
  opacity: 1;
  box-shadow:
    0 0 4px rgba(0,0,0,0.6) inset,
    0 0 8px rgba(230,57,70,0.9);
}

/* Amarelo aceso */
.sem.sem-yellow.is-on {
  background: #ffcf33;
  opacity: 1;
  box-shadow:
    0 0 4px rgba(0,0,0,0.6) inset,
    0 0 8px rgba(255,207,51,0.9);
}

/* Verde aceso */
.sem.sem-green.is-on {
  background: #1abc9c;
  opacity: 1;
  box-shadow:
    0 0 4px rgba(0,0,0,0.6) inset,
    0 0 8px rgba(26,188,156,0.9);
}

/* Texto ao lado do semáforo */
.semFeedback {
  min-height: 1.4em;
  color: #e5e5e5;
  font-style: italic;
  line-height: 1.3;
}