/* ============================================================
   Plataforma Prof. Rodrigo Gondim
   Ajustes de leitura no celular — 05/09/2026

   Trata dois pontos observados no Safari do iPhone:
   1. gráficos desenhados em medidas de computador, que encolhiam
      até ficarem ilegíveis na tela pequena;
   2. o comando de baixar material, que só existia dentro da página
      do material e sem destaque suficiente no celular.

   Esta folha é carregada depois de estilo.css e só acrescenta
   regras; nada do arquivo principal precisa ser alterado.
   ============================================================ */

/* ─── Gráfico de evolução: duas versões, uma por tamanho de tela ───────── */

/* No computador vale a versão larga; a de celular fica oculta. */
.grafico-quadro{ min-width:0 }
.grafico-linha-moderno--celular{ display:none }
.grafico-legenda-apoio{ display:none }

@media (max-width:760px){
  .grafico-linha-moderno--amplo{ display:none }
  .grafico-linha-moderno--celular{ display:block }

  /* As medidas do SVG acompanham a viewBox, então as fontes abaixo são
     descritas na escala do desenho de celular (360 x 300) e chegam à tela
     com cerca de 12 px reais. */
  .grafico-linha-moderno--celular .eixo-y,
  .grafico-linha-moderno--celular .eixo-x{ font-size:13px }
  .grafico-linha-moderno--celular .texto-meta{ font-size:12px }
  .grafico-linha-moderno--celular .valor-ponto{ font-size:14px }
  .grafico-linha-moderno--celular .linha-evolucao{ stroke-width:4 }
  .grafico-linha-moderno--celular .ponto-evolucao circle{ stroke-width:3.2 }
  .grafico-linha-moderno--celular .grade{ stroke-dasharray:4 6 }

  .grafico-legenda-apoio{
    display:block; margin:11px 0 0; color:var(--cinza);
    font-size:.72rem; line-height:1.45;
  }
  .grafico-legenda-apoio a{ color:var(--laranja-600); font-weight:600 }

  /* O gráfico chega perto das bordas do cartão; sem esta folga o rótulo do
     último ponto encosta na borda arredondada. */
  .grafico-card--evolucao{ padding-inline:15px }
}

/* ─── Barras por tema ─────────────────────────────────────────────────── */
/* No celular o nome do tema era cortado em uma linha só. Agora ocupa até
   duas linhas e o percentual permanece alinhado à direita. */
@media (max-width:760px){
  .barra-tema__topo{ align-items:flex-start; gap:10px }
  .barra-tema__topo>span{
    max-width:none; white-space:normal; overflow:visible;
    text-overflow:clip; line-height:1.35; font-size:.8rem;
  }
  .barra-tema__topo strong{ flex:0 0 auto; padding-top:1px }
  .barras-temas{ gap:15px }
}
@media (max-width:480px){
  .barra-tema__topo>span{ max-width:none }
}

/* ─── Acertos x erros ─────────────────────────────────────────────────── */
/* Entre 480 e 760 px o anel e a legenda dividiam a linha e a legenda ficava
   espremida. Passa a empilhar, com o anel centralizado. */
@media (max-width:760px){
  .donut-bloco{ flex-direction:column; align-items:center; gap:17px }
  .donut{ width:158px; height:158px }
  .donut-legenda{ max-width:320px }
  .donut-legenda>div{ font-size:.8rem }
}

/* ─── Indicadores ─────────────────────────────────────────────────────── */
@media (max-width:400px){
  .indicador-card{ padding:15px 13px }
  .indicador-card>strong{ font-size:1.5rem }
  .indicador-card p{ font-size:.66rem }
}

/* ─── Mapa de atividade do painel do professor ────────────────────────── */
/* São 14 colunas com largura mínima de 20 px: 351 px no total, mais do que
   cabe na tela do celular, e o gráfico era cortado. Agora rola na horizontal
   e as colunas ficam largas o bastante para a data caber embaixo. */
@media (max-width:760px){
  .activity-heat{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:6px; padding-bottom:6px; scrollbar-width:none;
  }
  .activity-heat::-webkit-scrollbar{ display:none }
  .heat-day{ flex:0 0 auto; min-width:30px }
  .heat-day small{ font-size:.6rem; white-space:nowrap }
}

/* Regras de celular que ficaram valendo também no computador por causa de uma
   chave a mais na folha de acompanhamento.php. Aqui os desenhos originais são
   devolvidos às telas grandes. */
@media (min-width:901px){
  .f3b-filter{ grid-template-columns:minmax(300px,1fr) 170px 190px auto }
}
@media (min-width:1151px){
  .f3b-filter{ grid-template-columns:minmax(420px,1fr) 180px 220px auto }
  .detail-grid{ grid-template-columns:repeat(4,1fr) }
  .event{ grid-template-columns:82px 30px 1fr }
}

/* ─── Baixar material ─────────────────────────────────────────────────── */

/* Botão principal de download, com a seta sempre colada ao texto. */
.btn--baixar{ display:inline-flex; align-items:center; justify-content:center; gap:8px }
.btn--baixar span{ font-size:1.05em; line-height:1 }

/* Atalho de download no cartão da Biblioteca, ao lado de "Acessar". */
.material-card__acoes{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.link-baixar{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--laranja-600); font-size:.73rem; font-weight:700;
  text-decoration:none; white-space:nowrap;
}
.link-baixar:hover{ color:var(--marinho); text-decoration:underline }

/* Orientação de uso no iPhone, dentro do bloco do arquivo. */
.material-arquivo{ flex-wrap:wrap }
.material-arquivo__dica{
  width:100%; margin:4px 0 0; padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--raio-sm);
  background:var(--papel); color:var(--cinza);
  font-size:.75rem; line-height:1.55;
}
.material-arquivo__dica strong{ color:var(--marinho) }
.material-arquivo__dica em{ color:var(--grafite); font-style:normal; font-weight:600 }

@media (max-width:760px){
  /* No celular o download vem primeiro e ocupa a linha inteira; abrir no
     navegador fica logo abaixo, com a mesma largura. */
  .material-arquivo .abrir-material__acoes{
    grid-column:1/-1; display:grid; grid-template-columns:1fr; gap:10px;
  }
  .material-arquivo .abrir-material__acoes .btn{
    width:100%; min-height:50px; justify-content:center; white-space:normal;
  }
  .material-arquivo__dica{ grid-column:1/-1 }
  .material-card__acoes{ width:100%; justify-content:space-between; gap:10px }
  .material-card__acoes .link-baixar,
  .material-card__acoes .link-seta{
    flex:1; width:auto; justify-content:center; min-height:42px;
    display:inline-flex; align-items:center;
    border:1.5px solid var(--linha); border-radius:var(--raio-sm);
    font-size:.78rem;
  }
  .material-card__acoes .link-baixar{ border-color:rgba(242,104,30,.35); background:var(--laranja-100) }
}