/* Paleta do colegioglobal.com.br em tons claros, aprovada no prototipo de
   08/2026. Toda cor sai daqui: nenhuma regra abaixo escreve cor literal. */
:root {
  --marca:#005DDA; --marca-escura:#0056A2; --amarelo:#FFCA28;
  --papel:#f4f7fc; --superficie:#fff; --tinta:#333; --tinta-fraca:#6d7683;
  --linha:#dfe6f1; --linha-forte:#c7d3e4; --realce:#eaf0fa;
  --comum:#005DDA; --avaliacao:#15803d; --recuperacao:#a16207; --recomposicao:#b91c1c;
  --comum-f:#e8f0fd; --avaliacao-f:#ecf7ef; --recuperacao-f:#fdf5e4; --recomposicao-f:#fdeeee;
}
/* modo escuro: so as cores mudam, nenhuma medida */
@media (prefers-color-scheme: dark) {
  :root {
    --papel:#12141a; --superficie:#1a1d24; --tinta:#e8eaee; --tinta-fraca:#98a1af;
    --linha:#272b34; --linha-forte:#39404c; --realce:#1f232b;
    --comum:#7aa9ff; --avaliacao:#7fce9b; --recuperacao:#e0b95f; --recomposicao:#f29a95;
    --comum-f:#17233a; --avaliacao-f:#17271d; --recuperacao-f:#2a2314; --recomposicao-f:#2e1c1c;
    --marca-escura:#7aa9ff;
  }
}

* { box-sizing: border-box; }
body { margin:0; background:var(--papel); color:var(--tinta);
       font:16px/1.55 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; }
a { color:var(--marca-escura); }

/* ------------------------------------------------------------- cabecalho */
header { display:flex; justify-content:space-between; align-items:center; gap:1rem;
         padding:.65rem 1.05rem; background:var(--superficie);
         border-bottom:2px solid var(--amarelo); font-size:.88rem; }
header .marca { display:flex; align-items:center; gap:.5rem; font-weight:650;
                color:var(--tinta); text-decoration:none; }
header .marca img { height:24px; display:block; }
header .quem { color:var(--tinta-fraca); }
header .quem a { color:inherit; }
main { max-width:760px; margin:0 auto; padding:1.3rem 1.05rem 3rem;
       display:flex; flex-direction:column; gap:1rem; }

h1 { margin:0; font-size:1.35rem; font-weight:660; letter-spacing:-.015em; line-height:1.2; }
h2 { margin:.4rem 0 0; font-size:1rem; font-weight:650; }
p { margin:0; }
.sub, .assinatura { font-size:.85rem; color:var(--tinta-fraca); }
.voltar { font-size:.87rem; text-decoration:none; color:var(--tinta-fraca); }
.voltar:hover { color:var(--tinta); }
.erro { color:var(--recomposicao); }
/* aviso de que o planejamento e de outra pessoa */
.dono { background:var(--realce); border:1px solid var(--linha); border-left:3px solid var(--amarelo);
        border-radius:8px; padding:.6rem .8rem; font-size:.88rem; }

/* ---------------------------------------------------------------- abas */
nav.trimestres, nav.tipos { display:flex; gap:.25rem; flex-wrap:wrap;
                            border-bottom:1px solid var(--linha); }
nav.trimestres a, nav.tipos a { font-size:.88rem; padding:.5rem .75rem; text-decoration:none;
                                color:var(--tinta-fraca); border-bottom:2px solid transparent;
                                margin-bottom:-1px; }
nav.trimestres a.ativo, nav.tipos a.ativo { color:var(--marca); border-bottom-color:var(--marca);
                                            font-weight:600; }
/* na barra de tipos cada aba carrega a cor do seu tipo */
nav.tipos a.avaliacao.ativo { color:var(--avaliacao); border-bottom-color:var(--avaliacao); }
nav.tipos a.recuperacao.ativo { color:var(--recuperacao); border-bottom-color:var(--recuperacao); }
nav.tipos a.recomposicao.ativo { color:var(--recomposicao); border-bottom-color:var(--recomposicao); }

/* faixa de destaque: plano trimestral, navegacao de mes */
.faixa { display:flex; justify-content:space-between; align-items:center; gap:1rem;
         background:var(--realce); border:1px solid var(--linha); border-radius:10px;
         padding:.65rem .85rem; font-size:.9rem; }

/* ------------------------------------------------------------- cartoes */
ul.turmas { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
ul.turmas a { display:flex; justify-content:space-between; align-items:center; gap:1rem;
              background:var(--superficie); border:1px solid var(--linha); border-radius:10px;
              padding:.8rem .9rem; text-decoration:none; color:inherit; }
ul.turmas a:hover { border-color:var(--marca); background:var(--realce); }
ul.turmas .nome { font-weight:620; }
ul.turmas small { display:block; font-size:.82rem; color:var(--tinta-fraca); font-weight:400; }

/* --------------------------------------------------- lista de aulas
   grade em vez de tabela: as quatro colunas de tipo tem a mesma largura por
   definicao, entao as etiquetas de uma linha alinham com as da outra sem
   precisar fixar largura em rem. */
.rolavel { overflow-x:auto; }
.cabecalho-aulas, .aula { display:grid; grid-template-columns:7.6rem repeat(4, 1fr);
                          gap:.35rem; min-width:31rem; }
.cabecalho-aulas { padding:0 .65rem .3rem; }
.cabecalho-aulas span { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
                        color:var(--tinta-fraca); text-align:center; }
.cabecalho-aulas span:first-child { text-align:left; }
.aulas { border:1px solid var(--linha); border-radius:10px; background:var(--superficie);
         overflow:hidden; min-width:31rem; }
.aula { align-items:center; padding:.45rem .65rem; border-bottom:1px solid var(--linha); }
.aulas .aula:last-child { border-bottom:0; }
.aula:hover { background:var(--realce); }
.quando { display:flex; flex-direction:column; line-height:1.25; }
.quando .dia { font-variant-numeric:tabular-nums; font-weight:620; }
.quando .hora { font-size:.76rem; color:var(--tinta-fraca); font-variant-numeric:tabular-nums; }

/* separador de mes */
.mes { display:flex; align-items:center; gap:.7rem; margin-top:.3rem; }
.mes span { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
            color:var(--tinta-fraca); font-weight:650; }
.mes i { flex:1; height:1px; background:var(--linha); }

/* -------------------------------------------------- etiqueta de plano
   vazia = so contorno ao passar o mouse, para nao competir com o plano que ja
   existe. As regras de .cheio vem DEPOIS: mesma especificidade, quem vem por
   ultimo vence. */
.slot { display:block; font:inherit; font-size:.76rem; padding:.32rem .25rem; border-radius:7px;
        border:1px solid transparent; background:transparent; color:var(--tinta-fraca);
        text-align:center; text-decoration:none; white-space:nowrap;
        overflow:hidden; text-overflow:ellipsis; }
a.slot:hover { border-color:var(--linha-forte); background:var(--papel); }
.slot.cheio { font-weight:600; }
.slot.cheio.comum { color:var(--comum); background:var(--comum-f); border-color:var(--comum); }
.slot.cheio.avaliacao { color:var(--avaliacao); background:var(--avaliacao-f); border-color:var(--avaliacao); }
.slot.cheio.recuperacao { color:var(--recuperacao); background:var(--recuperacao-f); border-color:var(--recuperacao); }
.slot.cheio.recomposicao { color:var(--recomposicao); background:var(--recomposicao-f); border-color:var(--recomposicao); }
/* espaco reservado de quem so tem leitura: mantem o alinhamento das colunas */
.slot.oculta { visibility:hidden; }

/* ---------------------------------------------------------- calendario */
.calendario { width:100%; border-collapse:separate; border-spacing:3px; min-width:30rem;
              background:transparent; border:0; }
.calendario th { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
                 color:var(--tinta-fraca); padding:.15rem 0; font-weight:650;
                 text-align:center; border:0; }
.calendario td { vertical-align:top; height:4.3rem; width:14.28%; background:var(--superficie);
                 border:1px solid var(--linha); border-radius:8px; padding:.3rem; }
.calendario td.fora { background:transparent; border-color:transparent; }
.calendario td.sem { background:var(--realce); }
.calendario .numero { display:block; font-size:.72rem; color:var(--tinta-fraca);
                      font-variant-numeric:tabular-nums; margin-bottom:.2rem; }
.calendario .slot { width:100%; font-size:.7rem; margin-bottom:2px; }

/* ----------------------------------------------------------- formulario */
form { display:flex; flex-direction:column; gap:.9rem; }
label { display:flex; flex-direction:column; gap:.25rem; }
.rot { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:650; }
.ajuda { font-size:.78rem; color:var(--tinta-fraca); }
input, textarea, select { width:100%; padding:.55rem .65rem; font:inherit; font-size:.94rem;
                          color:var(--tinta); background:var(--superficie);
                          border:1px solid var(--linha-forte); border-radius:9px; }
textarea { min-height:4.2rem; resize:vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--marca); outline-offset:1px; }
button { font:inherit; font-size:.92rem; font-weight:600; padding:.55rem 1.15rem; border:0;
         border-radius:8px; background:var(--marca); color:#fff; cursor:pointer; }
/* o Salvar acompanha a rolagem: o roteiro e longo e o professor nao deve ter
   que voltar ao fim da pagina para gravar */
.rodape { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:.6rem;
          padding:.7rem 0 .1rem;
          background:linear-gradient(to top, var(--papel) 75%, transparent); }
form.busca { flex-direction:row; gap:.5rem; }
form.busca input { flex:1; }
details summary { cursor:pointer; font-size:.9rem; color:var(--marca-escura); }
details[open] summary { margin-bottom:.7rem; }

/* --------------------------------------------------------------- tabelas */
table { width:100%; border-collapse:collapse; background:var(--superficie);
        border:1px solid var(--linha); border-radius:10px; overflow:hidden; }
td, th { padding:.55rem .7rem; border-bottom:1px solid var(--linha); text-align:left;
         font-size:.9rem; }
th { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
     color:var(--tinta-fraca); font-weight:650; }
tr:last-child td { border-bottom:0; }
tr.inativo { color:var(--tinta-fraca); }
td.acoes { white-space:nowrap; }
td.acoes form { display:inline; }
td.acoes button { font-size:.78rem; padding:.3rem .6rem; margin-left:.3rem;
                  background:transparent; color:var(--tinta-fraca);
                  border:1px solid var(--linha-forte); font-weight:400; }
td.acoes button:hover { border-color:var(--marca); color:var(--marca); }