/* ============================================================================
   Gestao Travessia

   Isto nao e a pagina de vendas: e uma ferramenta de trabalho. O criterio muda.
   Na pagina, a forma convence; aqui a forma tem que sair da frente e deixar ler
   numero em coluna, achar quem esta em atraso e fazer a chamada com o dedo, no
   celular, sabado as oito da manha.

   Tres regras que o arquivo todo respeita:

   1. Cor significa estado, nunca decoracao. Vermelho e atraso, verde e quitado,
      amarelo e parcial ou hoje, azul e a vencer. Se um elemento nao tem estado,
      ele e neutro. Por isso nao existe faixa alternada nem fundo colorido de
      secao: seriam cor sem significado, e cansam.

   2. Uma superficie sobre um fundo. Folha clara, fundo levemente mais escuro,
      contorno de um pixel. Nada de sombra colorida.

   3. Numero e tabular e alinhado a direita. Coluna de dinheiro que dança e
      coluna que nao se confere.

   A paleta e parente da paleta do site (mesmo papel, mesma tinta, mesma caneta
   vermelha, mesma lousa verde), o suficiente para parecer da mesma casa sem
   fantasiar a ferramenta.
   ============================================================================ */

:root{
  /* superficies */
  --fundo:#f2f0ea;
  --papel:#fffefb;
  --papel-2:#faf8f2;
  --linha:#e5decf;
  --linha-forte:#d3c8b3;

  /* Tinta em tres niveis. Os valores nao sao gosto: sao o resultado de medir
     contraste contra TODOS os fundos onde cada um pousa, inclusive os fundos
     tingidos de estado (o vermelho claro do cartao de atraso e o verde claro do
     "tudo certo"). O --fraco anterior, #8b7f70, dava 3.36:1 sobre o verde claro,
     abaixo do minimo de 4.5, e o pior e que a olho parecia bom.

     --fraco e o tom mais CLARO que ainda passa em todos eles, porque escurecer
     mais do que o necessario colaria os niveis um no outro. Com --suave em
     #4c4438 a separacao entre os dois e de 1.78:1, que se ve. */
  --tinta:#241f1a;   /* 11,7:1 no pior fundo */
  --suave:#4c4438;   /*  8,2:1 no pior fundo */
  --fraco:#73695d;   /*  4,6:1 no pior fundo */

  /* estado */
  --caneta:#b31c15;        --caneta-fundo:#fceceb;  --caneta-linha:#f0c8c5;
  --lousa:#125240;         --lousa-fundo:#e6f0ea;   --lousa-linha:#bfd8ca;
  --mostarda:#8a5a00;      --marca:#ffe158;         --marca-fundo:#fff7d4;  --marca-linha:#ecd48c;
  --azul:#1a4a80;          --azul-fundo:#eaf0f7;    --azul-linha:#c3d4e8;
  --lousa-hover:#0e4234;
  --borda-hover:#bfb09a;

  /* Cor do texto POR CIMA de um preenchimento de estado. Existe porque no tema
     escuro --caneta e --lousa viram tons claros: branco sobre verde-claro seria
     ilegivel. Cada preenchimento carrega junto a cor que se le sobre ele. */
  --sobre-lousa:#fbfaf5;
  --sobre-caneta:#ffffff;
  --sobre-marca:#4a3400;

  /* O aviso e sempre invertido em relacao a pagina: escuro no tema claro, claro
     no escuro. E o que faz ele saltar sem precisar de cor de alarme. */
  --aviso-fundo:#241f1a;
  --aviso-texto:#fbf9f4;

  /* O selo da marca NAO muda com o tema: quadrado verde escuro com T amarelo
     funciona sobre fundo claro e sobre fundo escuro, e marca que troca de cor
     deixa de ser marca. */
  --selo-fundo:#125240;
  --selo-texto:#ffe158;

  --veu:rgba(36,31,26,.42);
  --sombra-dialogo:0 12px 40px -12px rgba(36,31,26,.35);

  /* Faz o navegador desenhar no tema certo o que ele mesmo desenha: calendario
     do input date, lista do select, barra de rolagem. Sem isto, o seletor de data
     abre branco no meio de uma tela escura. */
  color-scheme: light;

  /* medidas */
  --raio:7px;
  --raio-p:4px;
  --barra:3.4rem;
  --wrap:88rem;
  --fonte:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --sombra:0 1px 2px rgba(36,31,26,.05), 0 6px 18px -12px rgba(36,31,26,.18);
}

/* ============================================================================
   TEMA ESCURO

   Nao e o tema claro com as cores invertidas: e o mesmo mundo de noite. O fundo
   e marrom-preto quente, e nao azul-preto, porque a paleta toda e de papel e
   tinta, e cinza azulado brigaria com ela.

   O que NAO muda: o significado. Vermelho continua atraso, verde continua
   quitado, amarelo continua parcial, azul continua a vencer. O que muda e a
   luminancia: no escuro esses quatro precisam ser CLAROS para serem lidos, e por
   isso o texto que pousa sobre eles precisa ser escuro, o que e o papel dos
   tokens --sobre-*.

   O bloco aparece duas vezes de proposito, e as duas copias tem que andar
   juntas. Nao ha como compartilhar um bloco entre uma media query e um seletor
   de atributo em CSS puro:

     1. dentro de prefers-color-scheme, para quem deixou no automatico
     2. em [data-tema="escuro"], para quem escolheu escuro na mao

   O :not([data-tema="claro"]) da primeira copia e o que faz a escolha manual
   "claro" ganhar do sistema no escuro. Ha um teste que compara o fundo calculado
   pelos dois caminhos, justamente para as copias nao divergirem em silencio.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:#17140f;
    --papel:#211d17;
    --papel-2:#1a1712;
    --linha:#332c22;
    --linha-forte:#4a4133;

    --tinta:#f3ede1;
    --suave:#cfc4b0;
    --fraco:#a09585;

    --caneta:#ff9b91;        --caneta-fundo:#3a1c19;  --caneta-linha:#5f2d27;
    --lousa:#84dab6;         --lousa-fundo:#12291f;   --lousa-linha:#25503f;
    --mostarda:#ffd166;      --marca:#ffe158;         --marca-fundo:#332a12;  --marca-linha:#5a4b1f;
    --azul:#9cc8f5;          --azul-fundo:#152534;    --azul-linha:#2a4a66;
    --lousa-hover:#a3e4c9;
    --borda-hover:#6b5f4d;

    --sobre-lousa:#0b2019;
    --sobre-caneta:#2e0f0b;
    --sobre-marca:#3a2800;

    --aviso-fundo:#f3ede1;
    --aviso-texto:#1a1510;

    --veu:rgba(0,0,0,.62);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.8);
    --sombra-dialogo:0 14px 44px -12px rgba(0,0,0,.85);

    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --fundo:#17140f;
  --papel:#211d17;
  --papel-2:#1a1712;
  --linha:#332c22;
  --linha-forte:#4a4133;

  --tinta:#f3ede1;
  --suave:#cfc4b0;
  --fraco:#a09585;

  --caneta:#ff9b91;        --caneta-fundo:#3a1c19;  --caneta-linha:#5f2d27;
  --lousa:#84dab6;         --lousa-fundo:#12291f;   --lousa-linha:#25503f;
  --mostarda:#ffd166;      --marca:#ffe158;         --marca-fundo:#332a12;  --marca-linha:#5a4b1f;
  --azul:#9cc8f5;          --azul-fundo:#152534;    --azul-linha:#2a4a66;
  --lousa-hover:#a3e4c9;
  --borda-hover:#6b5f4d;

  --sobre-lousa:#0b2019;
  --sobre-caneta:#2e0f0b;
  --sobre-marca:#3a2800;

  --aviso-fundo:#f3ede1;
  --aviso-texto:#1a1510;

  --veu:rgba(0,0,0,.62);
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.8);
  --sombra-dialogo:0 14px 44px -12px rgba(0,0,0,.85);

  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font:15px/1.5 var(--fonte);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;font-weight:650;line-height:1.25;letter-spacing:-.006em}
p{margin:0}
a{color:var(--azul);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:3px}

/* Ninguem lê "aria-hidden" numa tabela: leitor de tela precisa do titulo mesmo
   quando a tela nao mostra. */
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------ topo -- */

.topo{
  position:sticky;top:0;z-index:40;
  background:var(--papel);
  border-bottom:1px solid var(--linha);
}
.topo-in{
  max-width:var(--wrap);margin:0 auto;padding:.6rem 1rem;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:.6rem;min-width:0;margin-right:auto}
.marca-selo{
  width:2rem;height:2rem;flex:0 0 auto;border-radius:5px;
  background:var(--selo-fundo);color:var(--selo-texto);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;letter-spacing:-.02em;
}
.marca-txt{min-width:0}
.marca-txt b{display:block;font-size:.95rem;font-weight:650;line-height:1.2}
.marca-txt span{display:block;font-size:.72rem;color:var(--fraco);line-height:1.3}

.topo-fim{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* O seletor de mes nao herda o width:100% dos campos de formulario: no
   cabecalho ele tem que ocupar so o proprio texto. */
.topo-fim select{width:auto;max-width:14rem;font-size:.85rem;padding:.35rem .5rem}
.topo-fim .etiq{font-weight:600;color:var(--suave)}

/* ------------------------------------------------------------------ abas -- */

.abas{
  background:var(--papel);border-bottom:1px solid var(--linha);
  position:sticky;top:var(--barra);z-index:30;
}
.abas-in{
  max-width:var(--wrap);margin:0 auto;padding:0 1rem;
  display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.abas-in::-webkit-scrollbar{height:0}
.aba{
  appearance:none;border:0;background:none;font:inherit;cursor:pointer;
  padding:.7rem .8rem;color:var(--suave);white-space:nowrap;scroll-snap-align:start;
  border-bottom:2px solid transparent;font-size:.88rem;
  display:flex;align-items:center;gap:.4rem;
}
.aba:hover{color:var(--tinta)}
.aba[aria-current="page"]{color:var(--tinta);font-weight:650;border-bottom-color:var(--caneta)}
.aba .sino{
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:99px;
  background:var(--caneta);color:var(--sobre-caneta);font-size:.68rem;font-weight:700;
  display:grid;place-items:center;
}
/* Sem isto, o display:grid acima ganha do display:none que o atributo hidden
   aplica, e toda aba nasce com uma bolinha vermelha vazia. */
.aba .sino[hidden]{display:none}

/* ------------------------------------------------------------------ base -- */

main{max-width:var(--wrap);margin:0 auto;padding:1.35rem 1rem 5rem}

.secao{margin:0 0 1.6rem}
.secao-cab{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  margin:0 0 .7rem;
}
.secao-cab h2{font-size:1.02rem}
.secao-cab .conta{font-size:.78rem;color:var(--fraco)}
.secao-cab .direita{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}

.folha{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
}
.folha-p{padding:1rem 1.1rem}

.vazio{
  padding:2.2rem 1.25rem;text-align:center;color:var(--fraco);font-size:.9rem;
  background:var(--papel);border:1px dashed var(--linha-forte);border-radius:var(--raio);
}
.vazio b{display:block;color:var(--suave);font-size:.95rem;margin-bottom:.25rem;font-weight:650}

/* Alarme de dado nao protegido. Aparece no alto de toda tela, nao se fecha, e usa
   a cor de atraso porque e do mesmo tipo de urgencia: algo se perde se ficar como
   esta. */
.alarme{
  border:1px solid var(--caneta);background:var(--caneta-fundo);color:var(--caneta);
  border-left-width:4px;border-radius:var(--raio);
  padding:.9rem 1.1rem;margin:0 0 1.4rem;display:grid;gap:.4rem;
}
.alarme b{font-size:.98rem}
.alarme p{font-size:.86rem;line-height:1.5;color:var(--tinta)}
.alarme code{
  font:inherit;font-family:var(--mono);font-size:.82em;
  background:var(--papel);border:1px solid var(--caneta-linha);border-radius:3px;padding:.05em .3em;
}

/* Estado vazio que e boa noticia: uma linha, nao uma caixa. */
.tudo-certo{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem .9rem;border:1px solid var(--lousa-linha);background:var(--lousa-fundo);
  border-radius:var(--raio);color:var(--lousa);font-size:.87rem;font-weight:600;
}
.tudo-certo::before{
  content:"";width:.5rem;height:.5rem;border-radius:99px;background:var(--lousa);flex:0 0 auto;
}

/* ---------------------------------------------------------------- botoes -- */

.bt{
  appearance:none;font:inherit;font-size:.86rem;font-weight:600;
  padding:.5rem .85rem;border-radius:var(--raio-p);cursor:pointer;
  border:1px solid var(--linha-forte);background:var(--papel);color:var(--tinta);
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  line-height:1.35;
}
.bt:hover{background:var(--papel-2);border-color:var(--borda-hover)}
.bt:active{transform:translateY(.5px)}
.bt[disabled]{opacity:.5;cursor:default;transform:none}
.bt-forte{background:var(--lousa);border-color:var(--lousa);color:var(--sobre-lousa)}
.bt-forte:hover{background:var(--lousa-hover);border-color:var(--lousa-hover)}
.bt-perigo{color:var(--caneta);border-color:var(--caneta-linha)}
.bt-perigo:hover{background:var(--caneta-fundo);border-color:var(--caneta)}
.bt-zap{color:var(--lousa);border-color:var(--lousa-linha)}
.bt-zap:hover{background:var(--lousa-fundo)}
.bt-p{font-size:.79rem;padding:.32rem .6rem}
.bt-fantasma{border-color:transparent;background:none;color:var(--suave)}
.bt-fantasma:hover{background:var(--papel-2);border-color:var(--linha)}

/* ---------------------------------------------------------------- cartoes -- */

.cartoes{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
}
.cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:.85rem .95rem;min-width:0;
}
.cartao dt{font-size:.73rem;color:var(--fraco);letter-spacing:.02em;margin:0 0 .3rem}
.cartao dd{margin:0;font-size:1.38rem;font-weight:650;letter-spacing:-.02em;line-height:1.15}
.cartao .nota{display:block;margin-top:.3rem;font-size:.74rem;color:var(--fraco);font-weight:400}
.cartao.ruim{border-color:var(--caneta-linha);background:var(--caneta-fundo)}
.cartao.ruim dd{color:var(--caneta)}
.cartao.bom dd{color:var(--lousa)}
.cartao.espera dd{color:var(--azul)}

/* ---------------------------------------------------------------- tabelas -- */

.rolo{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel)}
/* Aviso de rolagem so existe onde a grade nao cabe, ou seja, no celular. */
.dica-rolar{display:none}
table{border-collapse:collapse;width:100%;font-size:.87rem}
/* Cabecalho nao e sticky de proposito. Dentro de um .rolo que so rola na
   horizontal, sticky top se prende ao topo da janela e vai parar atras do
   cabecalho do app. Coluna de nome sticky (horizontal) resolve o problema real,
   que e perder de vista de quem e a linha ao rolar para dezembro. */
thead th{
  text-align:left;font-weight:600;font-size:.73rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--fraco);
  padding:.6rem .7rem;background:var(--papel-2);border-bottom:1px solid var(--linha);
  white-space:nowrap;
}
tbody td{padding:.55rem .7rem;border-bottom:1px solid var(--linha);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--papel-2)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.forte{font-weight:650}
.mudo{color:var(--fraco)}
td.acoes{white-space:nowrap;text-align:right}
tfoot td{padding:.6rem .7rem;border-top:2px solid var(--linha-forte);font-weight:650;background:var(--papel-2)}

/* ---------------------------------------------------------------- etiquetas */

.etiq{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:650;padding:.16rem .45rem;border-radius:99px;
  border:1px solid var(--linha-forte);background:var(--papel-2);color:var(--suave);
  white-space:nowrap;
}
.etiq::before{content:"";width:.42rem;height:.42rem;border-radius:99px;background:currentColor;flex:0 0 auto}
.etiq.quitada{color:var(--lousa);background:var(--lousa-fundo);border-color:var(--lousa-linha)}
.etiq.atrasada,.etiq.parcial_atrasada{color:var(--caneta);background:var(--caneta-fundo);border-color:var(--caneta-linha)}
.etiq.parcial{color:var(--mostarda);background:var(--marca-fundo);border-color:var(--marca-linha)}
.etiq.aberta{color:var(--azul);background:var(--azul-fundo);border-color:var(--azul-linha)}
.etiq.cancelada{color:var(--fraco);text-decoration:line-through}
.etiq.ativo{color:var(--lousa);background:var(--lousa-fundo);border-color:var(--lousa-linha)}
.etiq.espera{color:var(--azul);background:var(--azul-fundo);border-color:var(--azul-linha)}
.etiq.saiu{color:var(--fraco)}
.etiq.sem-borda{border-color:transparent;background:none;padding-left:0}

/* ------------------------------------------------------------------ vagas -- */

.vagas{display:flex;flex-wrap:wrap;gap:1.1rem}
.vaga-turma{min-width:11rem}
.vaga-turma h3{font-size:.8rem;color:var(--suave);font-weight:600;margin-bottom:.4rem}
.vaga-turma h3 span{color:var(--fraco);font-weight:400}
.selos{display:flex;gap:.28rem}
.selo{
  width:1.55rem;height:1.9rem;border-radius:3px;border:1px solid var(--linha-forte);
  background:var(--papel-2);
}
.selo.cheia{background:var(--lousa);border-color:var(--lousa)}
/* Selo alem do teto da turma: aparece, e aparece diferente. Esconder o excedente
   faria a tela dizer "cheia" quando na verdade passou. */
.selo.excedente{background:var(--caneta);border-color:var(--caneta)}
.vaga-conta{margin:.4rem 0 0;font-size:.76rem;color:var(--fraco)}
.vaga-conta.alerta{color:var(--caneta);font-weight:600}

/* ------------------------------------------------------------- conciliacao */

.matriz{min-width:44rem}
.matriz th.aluno,.matriz td.aluno,
.grade-presenca th.aluno,.grade-presenca td.aluno{
  position:sticky;left:0;z-index:3;background:var(--papel);
  border-right:1px solid var(--linha);min-width:10.5rem;
}
.matriz th.aluno,.matriz td.aluno{min-width:11.5rem}
.matriz thead th.aluno,.grade-presenca thead th.aluno{background:var(--papel-2)}
.matriz tbody tr:hover td.aluno,.grade-presenca tbody tr:hover td.aluno{background:var(--papel-2)}
.matriz td.mes{padding:.3rem .3rem;text-align:center}
/* Caixa de tamanho fixo, inclusive na celula vazia. Numa grade, celula que
   encolhe porque tem menos texto faz a linha inteira ficar mais baixa que as
   outras, e a leitura por coluna se perde. */
.cel{
  /* 3.6rem cobre o caso de tres linhas de texto na coluna estreita do celular
     ("350,00" / "vence" / "05/09"), que era o que ainda fazia algumas linhas
     ficarem mais altas que as outras. */
  width:100%;min-height:3.6rem;appearance:none;font:inherit;cursor:pointer;
  border:1px solid var(--linha);border-radius:var(--raio-p);
  background:var(--papel-2);color:var(--suave);
  padding:.3rem;font-size:.78rem;line-height:1.25;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
}
.cel:hover{border-color:var(--linha-forte)}
.cel b{display:block;font-weight:650;font-size:.82rem}
.cel small{display:block;font-size:.68rem;opacity:.85}
.cel.quitada{background:var(--lousa-fundo);border-color:var(--lousa-linha);color:var(--lousa)}
.cel.atrasada,.cel.parcial_atrasada{background:var(--caneta-fundo);border-color:var(--caneta-linha);color:var(--caneta)}
.cel.parcial{background:var(--marca-fundo);border-color:var(--marca-linha);color:var(--mostarda)}
.cel.aberta{background:var(--azul-fundo);border-color:var(--azul-linha);color:var(--azul)}
.cel.cancelada{opacity:.55;text-decoration:line-through}
.cel.vazia{border-style:dashed;color:var(--fraco);background:none}

.legenda{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.6rem;font-size:.75rem;color:var(--fraco)}
.legenda span{display:inline-flex;align-items:center;gap:.32rem}
.legenda i{width:.7rem;height:.7rem;border-radius:2px;border:1px solid}
.legenda .l-quitada{background:var(--lousa-fundo);border-color:var(--lousa-linha)}
.legenda .l-atrasada{background:var(--caneta-fundo);border-color:var(--caneta-linha)}
.legenda .l-parcial{background:var(--marca-fundo);border-color:var(--marca-linha)}
.legenda .l-aberta{background:var(--azul-fundo);border-color:var(--azul-linha)}

/* ---------------------------------------------------------------- presenca */

.chamada{display:grid;gap:.5rem}
.linha-chamada{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.6rem .8rem;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--papel);
}
.linha-chamada .quem{min-width:0;flex:1 1 9rem}
.linha-chamada .quem b{display:block;font-weight:600;font-size:.95rem}
.linha-chamada .quem span{font-size:.74rem;color:var(--fraco)}
.pfj{display:flex;gap:.3rem;flex:0 0 auto}
.pfj button{
  appearance:none;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;
  min-width:2.9rem;min-height:2.75rem;border-radius:var(--raio-p);
  border:1px solid var(--linha-forte);background:var(--papel-2);color:var(--suave);
}
.pfj button[aria-pressed="true"].p{background:var(--lousa);border-color:var(--lousa);color:var(--sobre-lousa)}
.pfj button[aria-pressed="true"].f{background:var(--caneta);border-color:var(--caneta);color:var(--sobre-caneta)}
.pfj button[aria-pressed="true"].j{background:var(--marca);border-color:var(--marca-linha);color:var(--sobre-marca)}
.pfj button:hover{border-color:var(--borda-hover)}
/* A observacao do dia vai para a linha de baixo em tela estreita e divide a
   linha em tela larga. Nunca aperta os botoes de P, F e J, que sao o alvo do
   dedo. */
.linha-chamada .obs{flex:1 1 14rem;min-width:9rem}
.linha-chamada .obs input{font-size:.84rem}
@media (max-width:760px){.linha-chamada .obs{flex:1 1 100%}}

.grade-presenca{min-width:50rem}
.grade-presenca th.dia{
  font-size:.66rem;padding:.45rem .2rem;text-align:center;letter-spacing:0;
  text-transform:none;min-width:2.1rem;
}
.grade-presenca th.dia.hoje{background:var(--marca-fundo);color:var(--mostarda)}
/* A celula se chama pcel e nao marca: .marca e o bloco da logo no cabecalho, e a
   colisao de nome fazia cada celula herdar display:flex e margin-right:auto,
   esticando a linha da grade para mais de 600px de altura. */
.grade-presenca td.pcel{text-align:center;padding:.25rem .2rem}
.pt{
  display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:3px;
  font-size:.72rem;font-weight:700;border:1px solid var(--linha);background:var(--papel-2);color:var(--fraco);
}
.pt.presente{background:var(--lousa-fundo);border-color:var(--lousa-linha);color:var(--lousa)}
.pt.falta{background:var(--caneta-fundo);border-color:var(--caneta-linha);color:var(--caneta)}
.pt.justificada{background:var(--marca-fundo);border-color:var(--marca-linha);color:var(--mostarda)}
.pt.nada{border-style:dashed;background:none}

/* ------------------------------------------------------------------ barra -- */

.barra-fundo{height:.42rem;border-radius:99px;background:var(--linha);overflow:hidden;min-width:4rem}
.barra-fundo i{display:block;height:100%;background:var(--lousa);border-radius:99px}
.barra-fundo.alerta i{background:var(--caneta)}

/* ---------------------------------------------------------------- formulario */

form.grade{display:grid;gap:.75rem}
.campos{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
label.campo{display:block;min-width:0}
label.campo>span{
  display:block;font-size:.75rem;color:var(--suave);margin-bottom:.22rem;font-weight:600;
}
label.campo>span em{font-style:normal;color:var(--fraco);font-weight:400}
input,select,textarea{
  font:inherit;font-size:.9rem;width:100%;padding:.48rem .6rem;
  border:1px solid var(--linha-forte);border-radius:var(--raio-p);
  background:var(--papel);color:var(--tinta);
}
input:hover,select:hover,textarea:hover{border-color:var(--borda-hover)}
input[type="checkbox"]{width:auto;accent-color:var(--lousa);margin-right:.4rem}
textarea{min-height:4.5rem;resize:vertical;line-height:1.45}
.linha-check{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--suave)}
.dica{font-size:.75rem;color:var(--fraco);line-height:1.45}
.acoes-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.acoes-form .empurra{margin-left:auto}
fieldset{border:1px solid var(--linha);border-radius:var(--raio);padding:.9rem 1rem;margin:0}
legend{font-size:.75rem;color:var(--suave);font-weight:650;padding:0 .35rem}

/* ------------------------------------------------------------------ ficha -- */

.ficha-cab{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem}
.ficha-cab .nome{min-width:0}
.ficha-cab h2{font-size:1.25rem}
.ficha-cab .sub{font-size:.82rem;color:var(--fraco);margin-top:.15rem}
.ficha-cab .direita{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
.par{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem 1.4rem}
.par div{min-width:0}
.par dt{font-size:.72rem;color:var(--fraco)}
.par dd{margin:0;font-size:.9rem;word-break:break-word}

.tira{display:flex;gap:.2rem;flex-wrap:wrap}

/* ---------------------------------------------------------------- dialogo -- */

dialog{
  border:1px solid var(--linha-forte);border-radius:var(--raio);padding:0;
  background:var(--papel);color:var(--tinta);
  max-width:min(38rem,calc(100vw - 1.5rem));width:100%;
  box-shadow:var(--sombra-dialogo);
}
dialog::backdrop{background:var(--veu)}
.dlg-cab{
  display:flex;align-items:baseline;gap:.75rem;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--linha);
}
.dlg-cab h3{font-size:1rem}
.dlg-cab .sub{font-size:.78rem;color:var(--fraco)}
.dlg-cab button{margin-left:auto}
.dlg-corpo{padding:1.1rem;display:grid;gap:.85rem;max-height:min(70vh,34rem);overflow:auto}
.dlg-pe{
  display:flex;gap:.5rem;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  padding:.85rem 1.1rem;border-top:1px solid var(--linha);background:var(--papel-2);
  border-radius:0 0 var(--raio) var(--raio);
}
.dlg-pe .esquerda{margin-right:auto}
/* Lista de escolha dentro do dialogo: uma linha por opcao, alvo cheio. */
.escolhas{display:grid;gap:.4rem}
.escolha{
  appearance:none;font:inherit;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:.1rem .75rem;
  padding:.6rem .75rem;border:1px solid var(--linha-forte);border-radius:var(--raio-p);
  background:var(--papel);color:var(--tinta);
}
.escolha:hover:not([disabled]){background:var(--papel-2);border-color:var(--borda-hover)}
.escolha[disabled]{opacity:.55;cursor:default}
.escolha .q{font-weight:600}
.escolha .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.escolha .e{grid-column:1/-1;font-size:.75rem;color:var(--fraco)}

.dlg-erro{
  color:var(--caneta);background:var(--caneta-fundo);border:1px solid var(--caneta-linha);
  border-radius:var(--raio-p);padding:.5rem .7rem;font-size:.84rem;
}

/* ------------------------------------------------------------------ aviso -- */

.avisos{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:80;
  display:grid;gap:.4rem;width:min(26rem,calc(100vw - 1.5rem));pointer-events:none;
}
.aviso{
  background:var(--aviso-fundo);color:var(--aviso-texto);border-radius:var(--raio);
  padding:.6rem .85rem;font-size:.86rem;box-shadow:var(--sombra);
  animation:sobe .18s ease-out;
}
.aviso.ruim{background:var(--caneta)}
.aviso.bom{background:var(--lousa)}
@keyframes sobe{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aviso{animation:none}}

/* ------------------------------------------------------------------ atraso -- */

.atrasos{display:grid;gap:.5rem}
.atraso{
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  padding:.65rem .85rem;border:1px solid var(--caneta-linha);background:var(--caneta-fundo);
  border-radius:var(--raio);
}
.atraso .quem{flex:1 1 11rem;min-width:0}
.atraso .quem b{display:block;font-weight:650}
.atraso .quem span{font-size:.76rem;color:var(--suave)}
.atraso .valor{font-weight:700;color:var(--caneta);font-size:1rem;white-space:nowrap}
.atraso .direita{display:flex;gap:.35rem;margin-left:auto;flex-wrap:wrap}

/* ---------------------------------------------------------------- extrato -- */

.linhas-extrato{display:grid;gap:.5rem}
.lx{
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel);
  padding:.7rem .85rem;display:grid;gap:.5rem;
}
.lx.entrada{border-left:3px solid var(--lousa-linha)}
.lx.saida{border-left:3px solid var(--azul-linha)}
.lx.feita{opacity:.55}
.lx-topo{display:flex;gap:.75rem;align-items:baseline;flex-wrap:wrap}
.lx-topo .data{font-size:.76rem;color:var(--fraco);white-space:nowrap}
.lx-topo .desc{flex:1 1 12rem;min-width:0;font-size:.86rem;word-break:break-word}
.lx-topo .val{font-weight:700;white-space:nowrap}
.lx-topo .val.mais{color:var(--lousa)}
.lx-topo .val.menos{color:var(--azul)}
.lx-esc{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.lx-esc select{max-width:24rem}
.motivo{font-size:.74rem;color:var(--fraco);line-height:1.45}
.motivo b{color:var(--lousa);font-weight:600}

/* ------------------------------------------------------------------ grafico

   Duas barras por mes, lado a lado, na mesma escala: receita (o previsto do mes,
   partido em recebido embaixo e a receber em cima) e custo.

   A primeira versao empilhava os tres numa barra so, e a soma passava de 100% da
   altura, entao as faixas transbordavam e ocupavam a coluna inteira. Receita e
   custo sao grandezas que se comparam, nao que se somam: duas barras. */

/* Sem vao entre os meses, para as bordas de baixo se encostarem e formarem uma
   linha de base continua em vez de cinco tracinhos soltos. O respiro vem do
   padding de dentro. */
.grafico{display:flex;align-items:stretch;gap:0;padding:.3rem 0 0}
.gmes{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.4rem;padding:0 .3rem}
.gcaixa{
  height:8rem;display:flex;gap:4px;align-items:flex-end;justify-content:center;
  border-bottom:1px solid var(--linha);
}
.gb{
  width:1.5rem;max-width:26%;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.gb i{display:block;width:100%;min-height:2px}
.gb i.rec{background:var(--lousa)}
.gb i.falta{background:var(--caneta-linha);border-radius:2px 2px 0 0}
.gb i.rec:first-child{border-radius:2px 2px 0 0}
.gb i.cus{background:var(--azul-linha);border-radius:2px 2px 0 0}
.gmes>span{font-size:.68rem;color:var(--fraco);text-align:center;white-space:nowrap}
.gchave{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.7rem;font-size:.75rem;color:var(--fraco)}
.gchave span{display:inline-flex;align-items:center;gap:.32rem}
.gchave i{width:.7rem;height:.7rem;border-radius:2px;display:inline-block}
.gchave i.rec{background:var(--lousa)}
.gchave i.falta{background:var(--caneta-linha)}
.gchave i.cus{background:var(--azul-linha)}

/* ------------------------------------------------------------------ login -- */

body.login{display:grid;place-items:center;min-height:100vh;padding:1.25rem}
.caixa-login{
  width:min(23rem,100%);background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:1.6rem 1.5rem;box-shadow:var(--sombra);
}
/* O selo sozinho, sem o nome do sistema ao lado. Ele ancora a caixa visualmente
   sem contar a ninguem de que ferramenta se trata. */
.selo-solto{
  width:2.2rem;height:2.2rem;border-radius:6px;margin:0 0 1.1rem;
  background:var(--selo-fundo);color:var(--selo-texto);
  display:grid;place-items:center;font-weight:800;font-size:1rem;letter-spacing:-.02em;
}
.caixa-login h1{font-size:1.08rem;margin-bottom:1rem}
.caixa-login form{display:grid;gap:.8rem}
.caixa-login .bt{justify-content:center;padding:.6rem;margin-top:.15rem}

/* ----------------------------------------------------------------- celular -- */

@media (max-width:760px){
  :root{--barra:3.2rem}
  body{font-size:15px}
  main{padding:1rem .75rem 5.5rem}
  .topo-in{padding:.5rem .75rem}
  .abas-in{padding:0 .75rem}
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem}
  .cartao{padding:.7rem .8rem}
  .cartao dd{font-size:1.2rem}
  .secao-cab .direita{width:100%;margin-left:0}
  .dlg-corpo{max-height:none}
  dialog{
    max-width:100vw;width:100vw;margin:0;margin-top:auto;border-radius:var(--raio) var(--raio) 0 0;
    max-height:92vh;overflow:auto;border-bottom:0;
  }
  .dlg-pe{position:sticky;bottom:0}
  /* No celular a chamada e a acao principal: alvo grande, tudo numa linha. */
  .pfj button{min-width:3.3rem;min-height:3rem}
  /* A coluna fixa de nome cede espaco para caber mais um mes na tela. */
  .matriz th.aluno,.matriz td.aluno{min-width:8.5rem}
  .grade-presenca th.aluno,.grade-presenca td.aluno{min-width:7.5rem}
  /* Grade larga avisa que rola, em vez de deixar a pessoa achar que acabou ali. */
  .rolo{position:relative}
  .dica-rolar{
    display:flex;align-items:center;gap:.35rem;
    margin:.45rem 0 0;font-size:.73rem;color:var(--fraco);
  }
  .dica-rolar::before{content:"⟷";font-size:.9rem;line-height:1}
  .atraso .direita{width:100%;margin-left:0}
  td.acoes{text-align:left}
}

@media (max-width:420px){
  .marca-txt span{display:none}
  .cartoes{grid-template-columns:1fr 1fr}
}

/* Tabela larga em celular: quem tem cabecalho por celula vira lista. Aplicado
   so onde a leitura linha a linha faz sentido, nao na matriz nem na grade de
   presenca, que sao grades de propria natureza e rolam na horizontal. */
@media (max-width:640px){
  table.vira-lista thead{display:none}
  table.vira-lista,table.vira-lista tbody,table.vira-lista tr,table.vira-lista td{display:block;width:auto}
  table.vira-lista tr{
    border-bottom:1px solid var(--linha);padding:.6rem .75rem;
  }
  table.vira-lista tr:last-child{border-bottom:0}
  table.vira-lista td{
    border:0;padding:.16rem 0;display:flex;gap:.75rem;align-items:baseline;
  }
  table.vira-lista td::before{
    content:attr(data-rot);flex:0 0 7.5rem;font-size:.72rem;color:var(--fraco);
    text-transform:uppercase;letter-spacing:.03em;
  }
  table.vira-lista td.num{text-align:left;justify-content:flex-start}
  table.vira-lista td.acoes{margin-top:.5rem;gap:.4rem;flex-wrap:wrap}
  /* display:none e nao content:"": so esvaziar o conteudo deixava a reserva de
     7.5rem no lugar e o botao aparecia empurrado para o meio da linha. */
  table.vira-lista td.acoes::before{display:none}
  table.vira-lista tfoot{display:block}
  table.vira-lista tfoot td::before{content:attr(data-rot)}
}

@media print{
  .topo,.abas,.avisos,.bt,.acoes,.secao-cab .direita{display:none !important}
  body{background:#fff}
  .folha,.rolo{border:0}
}