/* ==========================================================================
   style.css — Regras específicas de página, impressão e ajustes finos
   Carregue depois de base.css e components.css:
     <link rel="stylesheet" href="/css/base.css">
     <link rel="stylesheet" href="/css/components.css">
     <link rel="stylesheet" href="/css/style.css">
   ========================================================================== */

/* ==========================================================================
   1. AJUSTES GLOBAIS FINAIS
   ========================================================================== */

/* Espaçamento vertical consistente entre blocos de texto corrido */
.ja-card > p:last-child,
.panel-card > p:last-child { margin-bottom: 0; }

/* Títulos dentro de cartões herdam a cor de acento da casa */
.ja-card h3,
.panel-card h3 { color: var(--ja-ink); }

/* ==========================================================================
   2. PÁGINA: AVALIAÇÃO (avaliacao.html)
   ========================================================================== */

/* A grelha de modo já é responsiva em components.css; aqui afinamos o hero */
.assess-hero .container { max-width: 1020px; }

/* A caixa de autenticação GTS tem um cabeçalho próprio com badge de proteção */
#gtsAuthCard > div:first-child { border-bottom: 2px solid var(--ja-border); }

/* O stepper de etapas deve poder receber o conteúdo final */
.stage-stepper .stage-pill[data-stage="final"] { text-align: center; }

/* ==========================================================================
   3. PÁGINA: PERSONALIDADE (avaliacao-personalidade.html)
   ========================================================================== */

/* As opções do PID-5 são longas: largura maior para a coluna de rótulo */
.opts-row { align-items: stretch; }

/* Item de pergunta: a coluna de texto respira melhor em ecrãs médios */
@media (min-width: 640px) {
  .q-item { padding: var(--ja-sp-4) var(--ja-sp-4); }
}

/* Código final: altura ligeiramente maior para readability do token */
.code-out { height: 130px; }

/* ==========================================================================
   4. PÁGINA: NEUROPSICOLÓGICA (avaliacao-neuropsicologica.html)
   ========================================================================== */

/* Tabuleiro do TMT: altura menor em ecrãs pequenos (campo mais confortável) */
@media (max-width: 640px) {
  .tmt-board { height: 360px; }
  .tmt-node { width: 40px; height: 40px; font-size: 14px; }
}

/* Teclado DSST: 9 colunas são impossíveis em telemóvel */
@media (max-width: 640px) {
  .dsst-pad { grid-template-columns: repeat(3, 1fr); }
  .dsst-key-grid { grid-template-columns: repeat(5, 1fr); }
  .dsst-btn { padding: 14px 2px; font-size: 18px; }
}

/* A caixa de tarefa em ecrãs estreitos */
@media (max-width: 640px) {
  .task-box { padding: var(--ja-sp-4); }
  .stimulus-card { padding: var(--ja-sp-5) var(--ja-sp-3); font-size: 28px; }
}

/* ==========================================================================
   5. PÁGINA: PSICOPATOLÓGICA (avaliacao-psicopatologica.html)
   ========================================================================== */

/* Os botões SIM/NÃO ficam lado a lado em ecrãs largos, empilhados no telemóvel */
@media (max-width: 480px) {
  .q-actions { flex-direction: column; align-items: stretch; }
  .q-actions .btn-choice { width: 100%; }
  .mini-row { align-items: flex-start; }
  .mini-btns { width: 100%; }
  .mini-btns .btn-choice { flex: 1; }
}

/* Sliders: em ecrãs estreitos a linha ocupa a largura toda */
@media (max-width: 640px) {
  .add-slider-row { flex-direction: column; align-items: stretch; }
  .slider-wrap { min-width: 0; width: 100%; }
  .slider-val { text-align: left; }
}

/* Os blocos de escala podem ser extensos: respiro entre eles */
.scale-block + .scale-block { margin-top: var(--ja-sp-5); }

/* ==========================================================================
   6. PÁGINA: CONSOLA MÉDICA (medico.html)
   ========================================================================== */

/* Hero: em ecrãs médios a barra de botões desce para baixo do título */
@media (max-width: 1024px) {
  .med-hero { padding: 1.8rem 1.25rem 1.5rem; }
  .med-hero h1 { font-size: 1.7rem; }
}

/* Cartões da coluna lateral */
.layout-grid > aside .card { position: sticky; top: var(--ja-nav-h); }

@media (max-width: 1024px) {
  .layout-grid > aside .card { position: static; }
}

/* Os botões da folha de relatório ocupam a largura toda em ecrãs estreitos */
@media (max-width: 560px) {
  .report-toolbar { flex-direction: column; align-items: stretch; }
  .report-toolbar .btn { width: 100%; }
  .report-toolbar .btn[style*="margin-left"] { margin-left: 0 !important; }
}

/* Tabela comparativa: permite scroll horizontal sem partir o layout */
.report-sheet .data-table { font-size: 0.78rem; }

/* ==========================================================================
   7. IMPRESSÃO
   ========================================================================== */

@media print {
  .no-print { display: none !important; }

  body {
    background: #FFFFFF;
    color: #111827;
    font-size: 11pt;
  }

  .med-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .card {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .report-sheet {
    border: none;
    padding: 0;
    margin: 0;
  }

  .report-header { border-bottom: 1.5pt solid var(--ja-ink); }

  .nav,
  .sticky-bar,
  .med-hero,
  .report-toolbar { display: none !important; }

  .data-table th {
    background: #F1F1F1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href]::after { content: ""; }

  .pill,
  .q-badge,
  .q-badge-active,
  .q-badge-muted {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page-break { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================================
   8. AJUSTES DE ACESSIBILIDADE
   ========================================================================== */

/* Alvos de toque maiores em dispositivos móveis */
@media (pointer: coarse) {
  .opt-btn,
  .opt-pill,
  .pill-toggle,
  .page-tab,
  .stage-pill,
  .step-tab,
  .dsst-btn,
  .word-btn,
  .word-chip {
    min-height: var(--ja-tap-min);
  }
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Realce do link atual na navegação, mesmo sem JS */
.nav__links a:focus-visible,
.nav__links a:hover { color: var(--ja-teal); }