/* Paleta do app do aluno (TheCage.Mobile/App.xaml). */
:root {
  --noite: #1B1917; --noite2: #232120; --cal: #F3F2F1;
  --verdete: #7CA3A8; --terra: #C4623A; --nevoa: #8B8681;
  /* NAO copie #1AF3F2F1 do XAML do app: la a ordem e #AARRGGBB e aquilo e
     branco a 10%. Em CSS a ordem e #RRGGBBAA — o mesmo literal vira verde
     agua a 94%, e a borda comum ficava mais forte que a da aula reservada,
     exatamente ao contrario do que a tela quer dizer. */
  --linha: rgba(243, 242, 241, .10);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--noite); color: var(--cal);
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
}
header {
  display: flex; align-items: center; gap: 22px;
  padding: 16px 22px; border-bottom: 1px solid #2A2724;
}
.marca { display: inline-flex; text-decoration: none; }
/* Menor que no painel: aqui o logo divide a barra com a navegacao, e
   no celular ela ja e estreita. Altura automatica pela mesma razao. */
.marca img { width: 116px; height: auto; display: block; }
header nav { display: flex; gap: 18px; }
header nav a { color: var(--nevoa); text-decoration: none; font-size: 14px; }
header nav a:hover { color: var(--cal); }
.sair { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.quem { color: var(--nevoa); font-size: 13px; }
.sair button {
  background: none; border: 1px solid #38342F; color: var(--nevoa);
  padding: 5px 12px; border-radius: 2px; cursor: pointer; font-size: 12px;
}
main { max-width: 720px; margin: 0 auto; padding: 26px 22px 60px; }
footer {
  max-width: 720px; margin: 0 auto; padding: 0 22px 40px;
  color: var(--nevoa); font-size: 12px;
}
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.4px; }
.rotulo {
  font-size: 11px; letter-spacing: 1.6px; color: var(--verdete);
  text-transform: uppercase; margin: 0 0 18px;
}
.dias { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; }
.dias a, .dias span {
  color: var(--nevoa); text-decoration: none; font-size: 13px;
  border: 1px solid #38342F; padding: 6px 12px; border-radius: 2px;
}
.dias .hoje { color: var(--cal); border-color: var(--verdete); }
.slot {
  border: 1px solid var(--linha); padding: 16px; margin-bottom: 10px;
  display: flex; gap: 16px; align-items: center;
}
.slot .hora { font-variant-numeric: tabular-nums; font-size: 18px; min-width: 62px; }
.slot .corpo { flex: 1; }
.slot .titulo { font-weight: 600; }
.slot .onde { color: var(--nevoa); font-size: 13px; }
.slot .vagas { color: var(--nevoa); font-size: 12px; }
.slot.meu { border-color: var(--verdete); }
/* Vale para <button> E <a>: "ver campos" e um link, mas para quem olha e o
   mesmo botao. Preso a button, o <a> herdava o azul do navegador. */
.acao {
  display: inline-block; background: var(--verdete); color: var(--noite);
  border: 0; padding: 10px 16px; border-radius: 2px; font-weight: 700;
  cursor: pointer; text-decoration: none; font-size: 14px; line-height: 1.2;
}
.acao.fora { background: none; border: 1px solid var(--terra); color: var(--terra); }
.recusa { color: var(--nevoa); font-size: 12px; max-width: 190px; text-align: right; }
.aviso { border-left: 3px solid var(--terra); padding: 10px 14px; margin: 0 0 18px;
         background: var(--noite2); font-size: 14px; }
.ok { border-left-color: var(--verdete); }
.vazio { color: var(--nevoa); padding: 30px 0; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; letter-spacing: 1.4px; color: var(--nevoa);
  font-weight: 400; padding: 0 0 8px; border-bottom: 1px solid #2A2724;
}
td { padding: 12px 0; border-bottom: 1px solid #232120; font-size: 14px; vertical-align: top; }
td.data { color: var(--nevoa); font-variant-numeric: tabular-nums; width: 82px; }
td.medida { text-align: right; font-variant-numeric: tabular-nums; color: var(--nevoa); }
.fonte { color: var(--nevoa); font-size: 12px; }
form.entrar { max-width: 320px; margin: 60px auto; }
form.entrar label { display: block; font-size: 12px; color: var(--nevoa); margin: 14px 0 5px; }
form.entrar input {
  width: 100%; padding: 11px; background: var(--noite2); color: var(--cal);
  border: 1px solid #38342F; border-radius: 2px; font-size: 15px;
}
form.entrar button { width: 100%; margin-top: 22px; }

/* ---- calendario dos campos ------------------------------------------- */
.mes { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.mes .nome { font-size: 15px; }
.mes .seta {
  color: var(--nevoa); text-decoration: none; border: 1px solid #38342F;
  padding: 5px 13px; border-radius: 2px; font-size: 14px; line-height: 1.4;
}
.mes .seta:hover { color: var(--cal); border-color: var(--verdete); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow {
  font-size: 10px; letter-spacing: 1.4px; color: var(--nevoa);
  text-align: center; padding: 0 0 6px;
}
.cal a, .cal span.dia {
  display: block; border: 1px solid var(--linha); padding: 8px 6px 10px;
  text-decoration: none; color: var(--cal); min-height: 62px;
}
.cal a:hover { border-color: var(--verdete); }
.cal .fora { border-color: transparent; color: #4A4642; }
.cal .num { font-variant-numeric: tabular-nums; font-size: 13px; }
.cal .hoje-marca { color: var(--verdete); font-weight: 700; }
.cal .escolhido { border-color: var(--verdete); background: var(--noite2); }
/* Um traco por periodo: cheio = livre, vazado = indisponivel. Numero de
   vagas nao cabe na celula e nao e o que se pergunta olhando um mes — a
   pergunta e "que dia da para ir". */
.cal .marcas { display: flex; gap: 3px; margin-top: 8px; }
.cal .marca { height: 4px; flex: 1; background: #322E2B; }
.cal .marca.livre { background: var(--verdete); }
.cal .marca.meu   { background: var(--terra); }
.legenda { display: flex; gap: 16px; margin: 14px 0 0; color: var(--nevoa); font-size: 12px; }
.legenda i { display: inline-block; width: 14px; height: 4px; margin-right: 5px; vertical-align: middle; }

/* Miniatura do espaco. object-fit:cover para foto de qualquer proporcao
   caber sem distorcer — campo fotografado na horizontal e na vertical. */
.miniatura { flex-shrink: 0; line-height: 0; }
.miniatura img {
  width: 84px; height: 60px; object-fit: cover; border-radius: 2px;
  border: 1px solid var(--linha);
}

/* Faturas -------------------------------------------------------------
   Esta tela nao ameaca. Inadimplencia nao bloqueia catraca nesta casa, e
   e por isso que NAO ha vermelho de alarme aqui: "vencida" usa a mesma
   terra do resto do portal, do tamanho do resto do texto. Um badge
   escarlate pulsando diria, sem escrever, que alguma coisa vai acontecer
   com o acesso da pessoa — e nao vai. */
/* `td { padding: 12px 0 }` vale para o Registro, que tem duas colunas
   largas. Aqui sao quatro, e sem folga lateral "10/08/2026" encosta em
   "R$ 450,00" e vira um numero so. */
table.faturas th, table.faturas td{padding-right:18px}
table.faturas th:last-child, table.faturas td:last-child{padding-right:0}
table.faturas td.medida{text-align:left;padding-right:18px}
table.faturas td.num{text-align:right;font-variant-numeric:tabular-nums}
table.faturas th.num{text-align:right}

/* Link de tabela nao pode ser o azul do navegador: o portal e escuro, e
   azul sublinhado sobre quase-preto e o pior contraste da tela. */
table.faturas td a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linha)}
table.faturas td a:hover{border-bottom-color:currentColor}

.emaberto{display:flex;align-items:baseline;gap:12px;margin:20px 0 4px;
     padding:14px 16px;border:1px solid var(--linha)}
.emaberto .r{font-family:var(--f-dado);font-size:10px;letter-spacing:.13em;
     text-transform:uppercase;color:var(--nevoa)}
.emaberto .v{font-family:var(--f-dado);font-weight:500;font-size:22px;
     font-variant-numeric:tabular-nums;margin-left:auto}

.sit{font-size:13px}
.sit.deve{color:var(--terra)}
.sit.quitada{color:var(--nevoa)}
/* Segunda linha da celula, e nao pilula colorida: e complemento do estado,
   nao um segundo estado. */
.resto{display:block;font-size:11.5px;color:var(--nevoa);margin-top:2px}

tr.aberta td{background:rgba(255,255,255,.03)}
tr.detalhe td{padding:0 0 14px}
.quadro{border:1px solid var(--linha);padding:14px 16px}
.quadro .cab{display:flex;gap:12px;align-items:baseline;
     padding-bottom:10px;border-bottom:1px solid var(--linha)}
.quadro .cab .fonte{margin-left:auto}
.quadro .rotulo{margin-top:14px}
ul.itens{list-style:none;margin:8px 0 0;padding:0}
ul.itens li{display:flex;gap:12px;padding:6px 0;font-size:13.5px}
ul.itens li .num{margin-left:auto;font-variant-numeric:tabular-nums}
.fechar{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--nevoa)}

.nota{margin-top:18px;font-size:12.5px;color:var(--nevoa);max-width:64ch}

/* ---------------------------------------------------------------------
   Estreito. O portal é a superfície que mais vive no celular — o aluno
   consulta a agenda na fila do vestiário, não sentado num desktop.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  /* O menu rola na horizontal em vez de quebrar. Quebrando, "Meu plano"
     partia no meio da palavra e a segunda linha virava uma letra solta. */
  header nav { order: 3; width: 100%; gap: 14px; padding-bottom: 2px;
               flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap; }
  .sair { margin-left: auto; }
  main, footer { padding-left: 16px; padding-right: 16px; }

  /* O slot deixa de ser linha e vira bloco: hora, nome e ação empilhados.
     Em 360px de largura os três lado a lado espremiam o botão até virar
     duas letras. */
  .slot { flex-wrap: wrap; gap: 10px; }
  /* O período vai sozinho na primeira linha. Deixá-lo ao lado da foto
     separava a imagem do nome do campo que ela ilustra — o aluno lia
     "Manhã [foto]" e só na linha seguinte descobria de qual campo era. */
  .slot .hora { flex: 0 0 100%; min-width: 0; font-size: 15px; }
  .slot .miniatura { flex: 0 0 auto; }
  .slot .corpo { flex: 1 1 0; min-width: 0; }
  .slot form, .slot .recusa { flex: 1 1 100%; text-align: left; max-width: none; }
  .slot .acao { width: 100%; }

  /* O calendário mantém as 7 colunas — mês com menos de 7 colunas deixa de
     ser calendário. O que encolhe é a célula. */
  .cal { gap: 2px; }
  .cal a, .cal span.dia { min-height: 46px; padding: 5px 3px 7px; }
  .cal .num { font-size: 11px; }
  .cal .marcas { gap: 2px; margin-top: 5px; }
  .cal .dow { font-size: 9px; letter-spacing: .06em; }

  .miniatura img { width: 64px; height: 46px; }

  /* Quatro colunas em 360px espremem "competência" ate quebrar no meio da
     palavra. A tabela vira lista: cada fatura um bloco, rotulo antes do
     valor. */
  table.faturas, table.faturas thead, table.faturas tbody,
  table.faturas tr, table.faturas td { display: block; width: 100%; }
  table.faturas thead { display: none; }
  table.faturas tr { border-bottom: 1px solid var(--linha); padding: 10px 0; }
  table.faturas tr.detalhe { border-bottom: 0; padding: 0; }
  table.faturas td { border: 0; padding: 2px 0; }
  table.faturas td.medida::before { content: "vence em "; color: var(--nevoa); }
  table.faturas td.num { text-align: left; }
  .emaberto { flex-wrap: wrap; }
  .emaberto .v { margin-left: 0; width: 100%; }
  table td.medida { white-space: nowrap; }
  form.entrar { margin: 30px auto; max-width: none; }
}

/* Imagem nunca estoura o container. Não há `overflow-x: hidden` no body de
   propósito: ele esconderia um estouro em vez de corrigi-lo, e ainda faria a
   medição mentir — com o corte ligado, scrollWidth passa a reportar a largura
   já cortada e "não tem rolagem horizontal" vira tautologia. */
img { max-width: 100%; }