/* pages/questoes.css - estilos exclusivos da pagina "questoes".
 * Use SOMENTE tokens de app.css (var(--bg2), var(--sp-4), var(--r-md), var(--fs-sm)...).
 * Carregado por app.html depois de app.css; escopo: #page-questoes / #q-detail-view.
 * Nao edite app.css para estilos de pagina (evita conflitos de merge). */

/* ── Alternativas: wrapper .q-option + <button role=radio> + tesoura irmã ── */
#page-questoes .q-options{gap:var(--sp-2)}
#page-questoes .q-option{
  position:relative;padding:0;gap:0;align-items:stretch;cursor:default;
  border-radius:var(--r-md);overflow:hidden;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
#page-questoes .q-opt-main{
  flex:1;min-width:0;min-height:var(--tap);display:flex;align-items:flex-start;gap:var(--sp-3);
  margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3);border:0;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#page-questoes .q-opt-main:focus{outline:none}
#page-questoes .q-opt-main:focus-visible{box-shadow:inset var(--focus-ring);border-radius:var(--r-md)}
#page-questoes .q-option:has(.q-opt-main:focus-visible){border-color:var(--blue)}
#page-questoes .q-option .q-opt-text{font-size:var(--fs-base);line-height:1.55;padding-top:3px}
#page-questoes .q-option .q-opt-letter{width:32px;height:32px;font-size:var(--fs-sm)}
#page-questoes .q-option.selected .q-opt-letter{box-shadow:0 0 0 3px var(--blue-dim)}
#page-questoes .q-option .q-scissor-btn{
  width:var(--tap);height:auto;min-height:var(--tap);align-self:stretch;border-radius:0;border-width:0 1px 0 0;border-style:solid;border-color:var(--border);
  opacity:.55;transition:opacity var(--dur-1),background var(--dur-1),color var(--dur-1);
}
#page-questoes .q-option .q-scissor-btn:hover,#page-questoes .q-option .q-scissor-btn.active,#page-questoes .q-option .q-scissor-btn:focus-visible{opacity:1}
#page-questoes .q-option .q-scissor-btn:focus-visible{box-shadow:inset var(--focus-ring)}
#page-questoes .q-option.is-cut .q-opt-main{cursor:default}
@media (hover:hover){
  #page-questoes .q-option:not(.disabled):not(.is-cut):hover{transform:translateX(2px)}
}
#page-questoes .q-option.correct{animation:q-pop var(--dur-3) var(--ease-out)}
#page-questoes .q-option.correct .q-opt-tag.tag-correct{color:var(--green-text)}
#page-questoes .q-option.wrong .q-opt-tag.tag-yours{color:var(--red-text)}

/* ── Card da questão ── */
#page-questoes .q-full-card{overflow:clip;position:relative;border-radius:var(--r-lg)}
#page-questoes .q-full-hdr{padding:var(--sp-3) var(--sp-4);background:transparent;border-bottom:1px solid var(--border)}
#page-questoes .q-card-id{font:700 var(--fs-sm)/1 var(--font-d);color:var(--text3)}
#page-questoes .q-full-body .q-stmt{font-size:var(--fs-md);line-height:1.7;color:var(--text)}
#page-questoes .q-full-card.is-answered{border-left:3px solid var(--blue)}
#page-questoes .q-exam-meta{padding:var(--sp-2) var(--sp-4) 0}
#page-questoes .q-retry-hint{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg3);color:var(--text2)}

/* Flash de feedback (opacity only) */
#page-questoes .q-full-card::after,#q-detail-view>.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
}
#q-detail-view>.card{position:relative}
.q-flash-ok::after{background:var(--green-dim);animation:q-flash var(--dur-4) var(--ease-out)}
.q-flash-bad::after{background:var(--red-dim);animation:q-flash var(--dur-4) var(--ease-out)}
@keyframes q-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes q-pop{0%{transform:scale(.985)}60%{transform:scale(1.01)}100%{transform:scale(1)}}

/* ── Resultado, última resposta, cota ── */
#page-questoes .q-result-bar{animation:pa-rise var(--dur-3) var(--ease-out) both}
.q-last-result{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg3);color:var(--text2);font-size:var(--fs-sm)}
.q-last-result strong{color:var(--text)}
.q-last-result__dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex:none}
.q-last-result.is-ok .q-last-result__dot{background:var(--green)}
.q-last-result.is-bad .q-last-result__dot{background:var(--red)}
.q-result-bar.q-result-last{background:transparent;padding:0;border:0}
.q-quota-hint{margin:0 0 var(--sp-2);font-size:var(--fs-sm);line-height:1.4;color:var(--text2);text-align:center}
.q-quota-hint.hidden{display:none}
.q-quota-hint.is-low{color:var(--amber-text)}

/* Barra de ação (Confirmar) — fixa no fundo em telas pequenas */
#page-questoes .q-confirm-wrap,#q-detail-view .q-confirm-wrap{flex-direction:column;align-items:center;gap:var(--sp-1)}
#page-questoes .q-confirm-btn,#q-detail-view .q-confirm-btn{min-height:var(--tap);border-radius:var(--r-md);font-weight:700;transition:background var(--dur-1),transform var(--dur-1)}
#page-questoes .q-confirm-btn:active,#q-detail-view .q-confirm-btn:active{transform:scale(.98)}
#page-questoes .q-confirm-btn:disabled,#q-detail-view .q-confirm-btn:disabled{opacity:.7;cursor:progress}
@media (max-width:768px){
  #page-questoes .q-confirm-wrap:not(.hidden),#q-detail-view .q-confirm-wrap:not(.hidden){
    position:sticky;bottom:0;z-index:5;margin:var(--sp-2) calc(var(--sp-3) * -1) 0;
    padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-b));
    background:linear-gradient(to top,var(--bg2) 70%,transparent);
  }
  #page-questoes .q-confirm-btn,#q-detail-view .q-confirm-btn{max-width:none}
}

/* ── Alvos de toque 44px + foco visível ── */
#page-questoes .q-fav-btn,#q-detail-view .q-fav-btn{min-height:var(--tap);min-width:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-md)}
#page-questoes .q-fav-btn.active,#q-detail-view .q-fav-btn.active{color:var(--amber-text)}
#page-questoes .q-comment-action,#q-detail-view .q-comment-action{min-height:var(--tap);min-width:var(--tap);padding:0 var(--sp-2);display:inline-flex;align-items:center;gap:var(--sp-1)}
#page-questoes .q-note-del,#q-detail-view .q-note-del{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
#page-questoes .q-inline-tab-btn,#q-detail-view .q-tab,#page-questoes .q-send-btn,#q-detail-view .q-send-btn,#page-questoes .q-toolbar-btn,#page-questoes .q-mode-btn,#page-questoes .q-back-btn,#page-questoes .q-nav-btn{min-height:var(--tap)}
#page-questoes .q-inline-tab-btn[hidden]{display:none}
#page-questoes .q-inline-tab-btn:disabled{opacity:.5}
#page-questoes button:focus-visible,#page-questoes a:focus-visible,#page-questoes [role="tab"]:focus-visible,#page-questoes select:focus-visible,#q-detail-view button:focus-visible,#q-detail-view [role="tab"]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
#page-questoes input:focus-visible,#page-questoes textarea:focus-visible,#page-questoes select:focus-visible,#q-detail-view textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--focus-ring)}

/* Inputs 16px no mobile (evita zoom do iOS) */
@media (max-width:768px){
  #page-questoes input,#page-questoes select,#page-questoes textarea,#page-questoes .q-comment-surface,#page-questoes .q-search-input{font-size:16px}
}

/* ── Progresso da sessão ── */
.q-session-progress{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text2)}
.q-session-progress.hidden{display:none}
.q-session-progress__bar{position:relative;flex:1;height:6px;border-radius:var(--r-pill);background:var(--bg4);overflow:hidden}
.q-session-progress__bar::after{content:"";position:absolute;inset:0;background:var(--grad-brand);transform-origin:left center;transform:scaleX(calc(var(--pct,0) / 100));transition:transform var(--dur-4) var(--ease-out)}

/* ── Skeleton / estados ── */
.q-skel-list{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-2) 0}
.q-skel-card{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg2);display:flex;flex-direction:column;gap:var(--sp-2)}
.q-skel-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.q-list-state{border:1px dashed var(--border2);border-radius:var(--r-lg);background:var(--bg2);margin:var(--sp-2) 0}
.q-panel-loading{padding:var(--sp-2) 0}
.q-panel-empty{padding:var(--sp-3);color:var(--text2);font-size:var(--fs-sm);text-align:center}
.q-panel-error{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3);color:var(--red-text);font-size:var(--fs-sm);text-align:center}

/* ── Abas do detalhe: alvo 44px e rolagem horizontal segura ── */
#q-detail-view .q-tabs{overflow-x:auto;scrollbar-width:none}
#q-detail-view .q-tabs::-webkit-scrollbar{display:none}
#q-detail-view .q-tab{white-space:nowrap;flex:1 0 auto;padding:0 var(--sp-3)}
#q-detail-view .q-tab[aria-selected="true"]{color:var(--text)}
/* Aba bloqueada até responder (comentário/estatísticas): estado visível e não clicável */
#q-detail-view .q-tab:disabled{opacity:.45;cursor:not-allowed}
#q-detail-view .q-tab-panel{padding-top:var(--sp-3)}

/* ── Gaveta de filtros (mobile) ── */
@media (max-width:900px){
  #page-questoes .q-filter-sidebar{
    width:min(92vw,360px)!important;min-width:0!important;max-width:min(92vw,360px)!important;
    padding-bottom:var(--safe-b);overscroll-behavior:contain;border-top-left-radius:var(--r-lg);border-bottom-left-radius:var(--r-lg);
  }
  .q-filter-overlay.visible{backdrop-filter:blur(2px);animation:pa-fade var(--dur-2) var(--ease-out) both}
  #page-questoes .q-mobile-filter-btn{min-height:var(--tap)}
}
@keyframes pa-fade{from{opacity:0}to{opacity:1}}

/* Movimento reduzido: sem flash/pop/translação */
@media (prefers-reduced-motion:reduce){
  .q-flash-ok::after,.q-flash-bad::after,#page-questoes .q-option.correct,#page-questoes .q-result-bar{animation:none}
  #page-questoes .q-option,.q-session-progress__bar::after{transition:none}
  #page-questoes .q-option:not(.disabled):not(.is-cut):hover{transform:none}
}

/* Cabeçalho do card: selos legíveis no mobile */
#page-questoes .q-card-badges{overflow:visible}
#page-questoes .q-card-badge{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}
@media (max-width:768px){
  #page-questoes .q-full-hdr{flex-wrap:nowrap;align-items:flex-start}
  #page-questoes .q-full-hdr-left{align-items:flex-start}
}
#page-questoes .q-filter-overlay{position:fixed;inset:0;z-index:998}