/* =====================================================================
   responsivo.css — ajustes de tela pequena.
   treinodememoriavisual.com

   Complementar, não substituto: carregue DEPOIS da folha principal.
   Só acrescenta e sobrescreve o que quebra no celular.

   O público inclui idosos, pessoas com hemiparesia usando uma mão só, e
   gente com baixa visão. As três coisas apontam na mesma direção: alvos
   grandes, texto grande, nada que exija precisão de toque ou arrastar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FUNDAMENTOS
   Campo com fonte abaixo de 16px faz o iOS dar zoom sozinho ao focar, o
   que desloca a página e desorienta. 16px é o mínimo, não a preferência.
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

input, select, textarea, button {
  font-size: max(16px, 1rem);
}

* { -webkit-tap-highlight-color: rgba(0,0,0,.08); }

img, svg, video { max-width: 100%; height: auto; }

/* Nada deve exigir rolagem horizontal da página inteira. */
body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   2. ALVO DE TOQUE
   44px é o mínimo praticável para dedo adulto. Com tremor ou hemiparesia,
   alvo pequeno vira erro de clique registrado como erro de resposta.
   --------------------------------------------------------------------- */
button, .botao, a.botao, .aba, .link-linha, .trilha {
  min-height: 44px;
}

button, .botao, a.botao {
  padding: .8rem 1.2rem;
  line-height: 1.3;
}

/* Botões lado a lado precisam de espaço entre eles: dedo grande em botões
   colados produz toque no vizinho. */
form button + button,
.acoes > * + * { margin-left: .5rem; }

/* ---------------------------------------------------------------------
   3. CELULAR
   --------------------------------------------------------------------- */
@media (max-width: 640px) {

  body { padding: .9rem; }

  h1 { font-size: 1.35rem; line-height: 1.25; }
  h2 { font-size: 1.1rem; }

  /* Cartões de atividade em coluna única. Duas colunas num celular
     deixam cada cartão estreito demais para o texto explicativo. */
  .trilhas { grid-template-columns: 1fr !important; gap: 12px; }

  .trilha { padding: 1rem; }
  .trilha h2 { font-size: 1.15rem; margin: .3rem 0 .35rem; }
  .trilha p  { font-size: .95rem; }

  /* Grades genéricas viram coluna única. */
  .grade, .linha, .pacientes { grid-template-columns: 1fr !important; }

  .carta { padding: 1rem; border-radius: 10px; }

  /* Imagem do estímulo: metade da altura da tela deixa espaço para o
     campo de resposta sem o teclado cobrir tudo. */
  .carta img { max-height: 42vh !important; }

  /* Botão principal ocupa a largura: é o alvo mais importante da tela. */
  .botao-principal { width: 100%; }

  /* Formulários empilhados */
  form button + button { margin-left: 0; margin-top: .5rem; }
  form[style*="display:flex"] { flex-wrap: wrap; }

  /* ------------------------------------------------------------------
     Tabelas viram lista. Tabela de seis colunas num celular só funciona
     com rolagem horizontal, que esconde metade da informação.
     Requer data-rot="..." em cada td; sem isso, cai na rolagem.
     ------------------------------------------------------------------ */
  table.dados, table.responsiva { display: block; }
  table.dados thead, table.responsiva thead { display: none; }
  table.dados tbody, table.dados tr, table.dados td,
  table.responsiva tbody, table.responsiva tr, table.responsiva td {
    display: block; width: 100%;
  }
  table.dados tr, table.responsiva tr {
    border: 1px solid #d8d5cf; border-radius: 6px;
    padding: .6rem .7rem; margin-bottom: .6rem; background: #fff;
  }
  table.dados td, table.responsiva td {
    border: 0; padding: .25rem 0; display: flex; gap: .6rem;
    justify-content: space-between; align-items: baseline;
  }
  table.dados td[data-rot]::before,
  table.responsiva td[data-rot]::before {
    content: attr(data-rot);
    color: #6b675f; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .03em; flex: 0 0 auto;
  }

  /* Tabelas sem data-rot: rolagem horizontal com aviso visual. */
  table:not(.dados):not(.responsiva) {
    display: block; overflow-x: auto; white-space: nowrap;
  }

  /* Cartão de revisão: imagem em cima, texto embaixo. */
  .cartao { grid-template-columns: 1fr !important; }
  .cartao img.mini, .cartao img { width: 100% !important; height: auto !important;
    max-height: 180px; object-fit: cover; }

  /* Opções de classificação de erro em coluna. */
  .opcoes { grid-template-columns: 1fr !important; }

  /* Seletor de paciente ocupa a largura. */
  .selpaciente select, select[name="p"] { width: 100%; max-width: none; }

  /* Gráficos não podem estourar a caixa. */
  canvas { max-width: 100% !important; height: auto !important; }
}

/* ---------------------------------------------------------------------
   4. TELA MUITO ESTREITA
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
  body { padding: .7rem; }
  h1 { font-size: 1.2rem; }
  .trilha p { font-size: .9rem; }
  .carta img { max-height: 36vh !important; }
}

/* ---------------------------------------------------------------------
   5. TELA BAIXA COM TECLADO ABERTO
   Quando o teclado sobe, a área útil encolhe para cerca de 300px. A
   imagem precisa ceder espaço, ou o campo de resposta fica invisível.
   --------------------------------------------------------------------- */
@media (max-height: 520px) {
  .carta img { max-height: 30vh !important; }
  h1, h2 { margin-top: .2rem; }
}

/* ---------------------------------------------------------------------
   6. PREFERÊNCIAS DO SISTEMA
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Contraste alto: quem tem baixa visão costuma ligar essa preferência. */
@media (prefers-contrast: more) {
  .leve, .dica, .sub { color: #3a3733 !important; }
  .trilha, .carta, .cartao { border-width: 2px; }
}

/* ---------------------------------------------------------------------
   7. IMPRESSÃO
   Relatório de progresso costuma virar papel para o prontuário.
   --------------------------------------------------------------------- */
@media print {
  .menu-topo, .barra, form, button, .botao { display: none !important; }
  body { padding: 0; background: #fff; }
  .painel, .cartao, .carta { break-inside: avoid; border: 1px solid #999; }
  a[href]::after { content: ""; }
}