/* ============================================================
   MedQuest · ETAPA 3 — etapa3.css
   ------------------------------------------------------------
   Camada de UX/layout da Etapa 3. Carregada por último. Contém:
     · Acessibilidade transversal (focus-visible, skip-link,
       .sr-only, áreas de toque, reduced-motion já em tokens).
     · Nova Home ("Sua missão de hoje")  -> só sob .nd-home
     · Navegação agrupada                 -> .side-group
     · Tela de questão (barra inferior mobile, progresso, etc.)
     · Mapa de domínio (tabela + chips de estado)
     · Caderno de erros (modal e chips)
   Tudo aditivo: quando as flags estão OFF, estas classes não são
   emitidas pelo JS, então nada muda. Rollback = remover o <link>.
   ============================================================ */

/* ---------------- Acessibilidade transversal ---------------- */

/* Foco visível consistente em qualquer elemento interativo
   (WCAG 2.4.7). Usa :focus-visible para não poluir cliques de mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.side-item:focus-visible,
.btn:focus-visible,
.mq-card[role="button"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Conteúdo só para leitores de tela. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip-link: pular para o conteúdo (aparece ao focar via teclado). */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 4000;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); outline: var(--focus-outline); }

/* Área mínima de toque 44x44 (WCAG 2.5.8) para botões-ícone. */
.tap-target { min-width: 44px; min-height: 44px; }

/* ============================================================
   NOVA HOME (flag new_dashboard) — container .nd-home
   ============================================================ */
.nd-home { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Cartão principal: "Sua missão de hoje" */
.nd-mission {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.nd-mission-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  background: var(--grad-soft);
  border-bottom: 1px solid var(--border);
}
.nd-mission-head .ndm-ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; background: var(--grad);
  box-shadow: var(--shadow-brand);
}
.nd-mission-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; color: var(--text); }
.nd-mission-head p  { font-size: var(--fs-sm); color: var(--text-2); margin: 2px 0 0; }

.nd-mission-body { padding: var(--sp-5) var(--sp-6); }

/* Métricas da missão — grade compacta (evita excesso de cards) */
.nd-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.nd-metric {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px;
}
.nd-metric .ndm-lbl {
  font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0;
}
.nd-metric .ndm-lbl svg { width: 14px; height: 14px; }
.nd-metric .ndm-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1.1; }
.nd-metric .ndm-val small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.nd-metric.is-alert { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.nd-metric.is-alert .ndm-val { color: var(--warn); }

/* Barra de progresso da missão */
.nd-progress { margin-bottom: var(--sp-4); }
.nd-progress .ndp-track {
  height: 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden;
}
.nd-progress .ndp-fill { height: 100%; background: var(--grad); border-radius: 999px; }
.nd-progress .ndp-cap { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; }

/* Motivo resumido da seleção */
.nd-reason {
  font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  display: flex; gap: var(--sp-2); align-items: flex-start;
}
.nd-reason svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); margin-top: 1px; }

/* Ação principal + secundárias */
.nd-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.nd-cta .btn-primary { font-size: var(--fs-lg); padding: 12px 24px; }
.nd-secondary {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4);
}
.nd-secondary .nd-link {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2);
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.nd-secondary .nd-link:hover { border-color: var(--brand); color: var(--brand); }
.nd-secondary .nd-link svg { width: 14px; height: 14px; }

/* Busca com hierarquia menor */
.nd-search {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 9px 14px;
}
.nd-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.nd-search input { flex: 1; border: none; background: transparent; font: inherit; font-size: var(--fs-md); color: var(--text); outline: none; }

/* Linha de "retomar" + evolução + atalhos (compacto, sem excesso) */
.nd-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.nd-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.nd-panel h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: 8px; }
.nd-panel h3 svg { width: 18px; height: 18px; color: var(--brand); }
.nd-resume-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2); text-decoration: none; color: var(--text);
}
.nd-resume-item:hover { border-color: var(--brand); }
.nd-resume-item .ndr-meta { flex: 1; min-width: 0; }
.nd-resume-item .ndr-meta b { font-size: var(--fs-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-resume-item .ndr-meta small { font-size: var(--fs-xs); color: var(--muted); }

.nd-shortcuts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.nd-shortcuts a {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 14px; color: var(--text-2); text-decoration: none;
}
.nd-shortcuts a:hover { border-color: var(--brand); color: var(--brand); }
.nd-shortcuts a svg { width: 15px; height: 15px; }

/* Mini gráfico de evolução semanal (barras) */
.nd-spark { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.nd-spark .sp-bar { flex: 1; background: var(--grad-soft); border-radius: 6px 6px 0 0; position: relative; min-height: 4px; }
.nd-spark .sp-bar > i { position: absolute; inset: auto 0 0 0; background: var(--grad); border-radius: 6px 6px 0 0; }
.nd-spark-legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }

/* ============================================================
   NAVEGAÇÃO AGRUPADA (flag new_navigation)
   ============================================================ */
.side-group { padding-bottom: var(--sp-2); }
.side-group + .side-group { border-top: 1px solid var(--border); margin-top: 4px; }
.side-group .side-label { padding-top: var(--sp-3); }

/* ============================================================
   MAPA DE DOMÍNIO (flag new_dashboard) — no dashboard
   ============================================================ */
.dm-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.dm-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-5); border-bottom: 1px solid var(--border);
}
.dm-head h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; display: flex; align-items: center; gap: 8px; }
.dm-head h3 svg { width: 20px; height: 20px; color: var(--brand); }
.dm-sort {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2);
}
.dm-sort select {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: var(--fs-sm);
}
.dm-table-scroll { overflow-x: auto; }
.dm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 860px; }
.dm-table th, .dm-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dm-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: var(--fw-bold); position: sticky; top: 0; background: var(--surface); }
.dm-table td.dm-domain { white-space: normal; max-width: 260px; }
.dm-table td.dm-domain b { display: block; font-weight: var(--fw-bold); }
.dm-table td.dm-domain small { color: var(--muted); font-size: var(--fs-xs); }
.dm-table tbody tr:hover, .dm-table tr:hover td { background: var(--surface-2); }

/* Chip de estado — nunca só cor: ícone + texto */
.dm-state {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border-radius: var(--radius-pill); padding: 4px 10px; border: 1px solid var(--border);
}
.dm-state svg { width: 13px; height: 13px; }
.dm-state.is-good { color: var(--correct-ink); background: var(--correct-soft); border-color: color-mix(in srgb, var(--correct) 35%, transparent); }
.dm-state.is-mid  { color: var(--warn);    background: var(--warn-soft);    border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.dm-state.is-bad  { color: var(--wrong-ink);   background: var(--wrong-soft);   border-color: color-mix(in srgb, var(--wrong) 35%, transparent); }
.dm-state.is-neutral { color: var(--text-2); background: var(--surface-2); }

/* Barra de domínio/confiança (com rótulo textual, não só cor) */
.dm-bar { display: flex; align-items: center; gap: 8px; }
.dm-bar .dmb-track { width: 70px; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.dm-bar .dmb-fill { height: 100%; border-radius: 999px; background: var(--brand); }
.dm-bar .dmb-fill.is-good { background: var(--correct); }
.dm-bar .dmb-fill.is-mid  { background: var(--warn); }
.dm-bar .dmb-fill.is-bad  { background: var(--wrong); }
.dm-bar .dmb-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
/* Número de risco: usa variante -ink p/ contraste AA (nunca só cor: o valor % é textual) */
.dmb-num.is-bad, .dm-risk-bad  { color: var(--wrong-ink); font-weight: var(--fw-bold); }
.dmb-num.is-good, .dm-risk-good { color: var(--correct-ink); }

/* Tendência: seta + texto */
.dm-trend { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-medium); }
.dm-trend svg { width: 14px; height: 14px; }
.dm-trend.up { color: var(--correct-ink); }
.dm-trend.down { color: var(--wrong-ink); }
.dm-trend.flat { color: var(--text-2); }

.dm-empty { padding: var(--sp-8); text-align: center; color: var(--text-2); }

/* ============================================================
   TELA DE QUESTÃO — melhorias (Etapa 3)
   ============================================================ */

/* Barra de progresso do conjunto (atual/total) */
.q3-progress {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.q3-progress .q3p-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.q3-progress .q3p-fill { height: 100%; background: var(--grad); border-radius: 999px; }
.q3-progress .q3p-count { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Indicador de "respondida" e tempo por questão */
.q3-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--radius-pill); padding: 3px 10px; }
.q3-status.answered { color: var(--correct-ink); background: var(--correct-soft); }
.q3-status.pending  { color: var(--text-2); background: var(--surface-2); }
.q3-status svg { width: 13px; height: 13px; }
.q3-timer { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.q3-timer svg { width: 13px; height: 13px; }

/* Navegação anterior/próxima (desktop) */
.q3-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }
.q3-nav .btn { min-width: 120px; }

/* Vídeo responsivo */
.q3-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--border); }
.q3-video iframe, .q3-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Imagem ampliável — cursor + hint */
.q3-img { cursor: zoom-in; border-radius: var(--radius-sm); }

/* Atalhos de teclado — dica discreta */
.q3-kbd-hint { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.q3-kbd-hint kbd {
  font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-bold);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; background: var(--surface-2); color: var(--text-2);
}

/* Barra inferior fixa (mobile) da questão */
.q3-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none; align-items: center; gap: var(--sp-2);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-top: 1px solid var(--border);
}
.q3-bottombar .btn { flex: 1; min-height: 48px; font-size: var(--fs-md); }
.q3-bottombar .q3-more {
  min-width: 48px; min-height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
}
/* Menu de ações secundárias (mobile) */
.q3-more-menu {
  position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 901;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; display: none;
}
.q3-more-menu.open { display: block; }
.q3-more-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-md); text-align: left; border-radius: var(--radius-sm); cursor: pointer;
}
.q3-more-menu button:hover { background: var(--surface-2); }
.q3-more-menu button svg { width: 18px; height: 18px; color: var(--text-2); }

@media (max-width: 640px) {
  .q3-bottombar { display: flex; }
  /* Espaço para a barra não cobrir o conteúdo */
  body.q3-has-bottombar main { padding-bottom: 84px; }
  /* Alternativas sem overflow, leitura confortável */
  .q3-nav { display: none; }
}

/* ============================================================
   CADERNO DE ERROS — modal e chips (flag confidence_capture/new_dashboard)
   ============================================================ */
.eb-recur {
  display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius-sm); padding: 9px 13px; margin: var(--sp-3) 0;
}
.eb-recur svg { width: 16px; height: 16px; flex-shrink: 0; }
.eb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.eb-actions .btn { font-size: var(--fs-sm); }
.eb-field { margin-bottom: var(--sp-4); }
.eb-field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 6px; }
.eb-field textarea, .eb-field select, .eb-field input {
  width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: var(--fs-md);
}
.eb-field textarea { min-height: 72px; resize: vertical; }

/* Estado (chip) do caderno de erros */
.eb-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--radius-pill); padding: 3px 9px; border: 1px solid var(--border); }
.eb-state.active   { color: var(--wrong-ink); background: var(--wrong-soft); }
.eb-state.review   { color: var(--warn);  background: var(--warn-soft); }
.eb-state.mastered { color: var(--correct-ink); background: var(--correct-soft); }
.eb-state.archived { color: var(--text-2); background: var(--surface-2); }
.eb-state svg { width: 12px; height: 12px; }