/* Guide English · Gestão
   Cores e tamanhos ficam todos aqui em cima. Para mudar o visual, comece por este bloco. */
:root {
  --marinho: #143E66;
  --marinho-escura: #0d2b49;
  --marinho-clara: #e6edf4;
  --fundo: #f4f7f4;
  --papel: #ffffff;
  --tinta: #14202e;
  --nevoa: #5b6877;
  --linha: #dbe3dc;
  --amarelo: #EFDE82;
  --amarelo-claro: #faf4cc;
  --folha: #2f7d5b;
  --folha-clara: #DBEAD5;
  --tijolo: #E02C2B;
  --tijolo-claro: #fce6e5;
  --fonte-titulo: "Kamber", "Vastago Grotesk", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --fonte-texto: "Vastago Grotesk", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 8px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--fonte-texto); line-height: 1.5;
}
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a { color: var(--marinho); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marinho-escura); }
p { margin: 0 0 0.75rem; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 4px; }

/* ---------- estrutura geral ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral {
  background: var(--marinho); color: #f1f5f9; padding: 1.5rem 0 1rem;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.25rem 1.5rem; font-family: var(--fonte-titulo); font-size: 1.15rem; line-height: 1.15; color: #fff; text-decoration: none; }
.marca img { flex: none; border-radius: 50%; }
.marca small { display: block; font-family: var(--fonte-texto); font-size: 0.8rem; opacity: 0.7; margin-top: 0.25rem; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  color: #d5e1ee; text-decoration: none; padding: 0.55rem 1.5rem; border-left: 4px solid transparent;
  font-size: 0.95rem;
}
.menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.menu a.ativo { border-left-color: var(--amarelo); background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }
.menu .separador { height: 1px; background: rgba(255, 255, 255, 0.15); margin: 0.75rem 1.5rem; }
.rodape-lateral { margin-top: auto; padding: 1rem 1.5rem 0; font-size: 0.85rem; color: #b9cde0; }
.rodape-lateral button {
  background: none; border: 0; color: #d5e1ee; padding: 0; font: inherit; text-decoration: underline; cursor: pointer;
}
.faixa-demo { background: var(--amarelo); color: #3b2d00; font-size: 0.85rem; padding: 0.4rem 1.5rem; margin-bottom: 1rem; font-weight: 600; }

.conteudo { padding: 2rem 2.5rem 4rem; max-width: 1180px; width: 100%; }
.topo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.topo-pagina p { color: var(--nevoa); margin: 0.25rem 0 0; }
.acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.migalha { font-size: 0.9rem; margin-bottom: 0.5rem; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: var(--raio);
  border: 1px solid var(--marinho); background: var(--marinho); color: #fff; font: inherit; font-weight: 600;
  font-size: 0.95rem; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.botao:hover { background: var(--marinho-escura); color: #fff; }
.botao.secundario { background: var(--papel); color: var(--marinho); }
.botao.secundario:hover { background: var(--marinho-clara); color: var(--marinho-escura); }
.botao.perigo { background: var(--papel); color: var(--tijolo); border-color: var(--tijolo); }
.botao.perigo:hover { background: var(--tijolo-claro); }
.botao.pequeno { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
.botao.verde { background: var(--folha); border-color: var(--folha); }

/* ---------- mensagens ---------- */
.mensagens { margin-bottom: 1.25rem; display: grid; gap: 0.5rem; }
.mensagem { padding: 0.75rem 1rem; border-radius: var(--raio); border: 1px solid; font-size: 0.95rem; }
.mensagem.ok { background: var(--folha-clara); border-color: #b7dcc8; color: #1d5a40; }
.mensagem.erro { background: var(--tijolo-claro); border-color: #efc0b9; color: #8a2a20; }
.mensagem.aviso { background: var(--amarelo-claro); border-color: #f1d98b; color: #6b4d00; }

/* ---------- blocos ---------- */
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.bloco > h2 { margin-bottom: 0.9rem; }
.bloco-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.discreto { color: var(--nevoa); font-size: 0.9rem; }

/* ---------- emblemas ---------- */
.emblema {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--marinho-clara); color: var(--marinho-escura); white-space: nowrap;
}
.emblema.ok { background: var(--folha-clara); color: #1d5a40; }
.emblema.aviso { background: var(--amarelo-claro); color: #6b4d00; }
.emblema.erro { background: var(--tijolo-claro); color: #8a2a20; }
.emblema.neutro { background: #ece9f0; color: var(--nevoa); }

/* ---------- tabelas ---------- */
.tabela-envolta { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabela th { text-align: left; font-weight: 600; color: var(--nevoa); font-size: 0.85rem; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:hover { background: #f6f9f6; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a.nome { font-weight: 600; text-decoration: none; }
.tabela a.nome:hover { text-decoration: underline; }
.codigo { font-variant-numeric: tabular-nums; color: var(--nevoa); font-size: 0.85rem; }
.lista-turmas { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.lista-turmas a { text-decoration: none; }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtros label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--nevoa); }
.filtros input, .filtros select { min-width: 9rem; }
.filtros label.marca-caixa { display: flex; color: var(--tinta); }
.filtros label.marca-caixa input { min-width: 0; width: 1.1rem; }
.filtro-ativo { background: var(--amarelo-claro); border: 1px solid #f1d98b; padding: 0.6rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: 0.95rem; }

/* ---------- formulários ---------- */
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=number],
input[type=search], input[type=tel], input[type=file], select, textarea {
  font: inherit; padding: 0.5rem 0.65rem; border: 1px solid #cfc8d9; border-radius: var(--raio); background: #fff; color: var(--tinta); width: 100%;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--amarelo); outline-offset: 0; border-color: var(--marinho); }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.campo { display: grid; gap: 0.25rem; align-content: start; }
.campo.largo { grid-column: 1 / -1; }
.campo label, .rotulo { font-weight: 600; font-size: 0.9rem; }
.campo .dica { font-size: 0.85rem; color: var(--nevoa); }
.marca-caixa { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; font-size: 0.95rem; }
.marca-caixa input { width: 1.1rem; height: 1.1rem; accent-color: var(--marinho); }
fieldset { border: 1px dashed #cfc8d9; border-radius: var(--raio); padding: 1rem; margin: 0; grid-column: 1 / -1; }
fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; }
.barra-salvar { grid-column: 1 / -1; display: flex; gap: 0.6rem; margin-top: 0.5rem; }
.em-linha { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.em-linha > * { flex: 1 1 8rem; }
.em-linha > button { flex: 0 0 auto; }

/* ---------- ficha / definições ---------- */
.cabeca-ficha { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.5rem; }
.cabeca-ficha .selos { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
dl.definicoes { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem 1rem; margin: 0; }
dl.definicoes dt { color: var(--nevoa); font-size: 0.9rem; }
dl.definicoes dd { margin: 0; }
.linhas { list-style: none; padding: 0; margin: 0; }
.linhas li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--linha); }
.linhas li:last-child { border-bottom: 0; }
.linhas .principal { font-weight: 600; text-decoration: none; }
.linhas .secundario { color: var(--nevoa); font-size: 0.9rem; }
.vazio { padding: 1.25rem; text-align: center; color: var(--nevoa); background: #f6f9f6; border: 1px dashed var(--linha); border-radius: var(--raio); }
details.perigo-zona { margin-top: 1rem; }
details.perigo-zona summary { cursor: pointer; color: var(--tijolo); font-weight: 600; }
details.perigo-zona > div { margin-top: 0.75rem; padding: 1rem; background: var(--tijolo-claro); border-radius: var(--raio); }

/* ---------- painel ---------- */
.saudacao h1 { font-size: 2rem; }
.numeros { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 1.25rem 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linha); }
.numero strong { display: block; font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: 1; font-weight: 600; }
.numero span { color: var(--nevoa); font-size: 0.9rem; }
.hoje-linha { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--linha); }
.hoje-linha:last-child { border-bottom: 0; }
.hoje-linha .hora { font-family: var(--fonte-titulo); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.atencao-item { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); }
.atencao-item:last-child { border-bottom: 0; }
.atencao-item:hover .atencao-texto { text-decoration: underline; }
.atencao-item .qtd { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.3rem; min-width: 2.2rem; text-align: right; color: var(--marinho); }

/* ---------- grade semanal (a peça central das turmas) ---------- */
.alternar { display: inline-flex; border: 1px solid var(--marinho); border-radius: var(--raio); overflow: hidden; }
.alternar a { padding: 0.4rem 0.9rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--marinho); background: var(--papel); }
.alternar a.ativo { background: var(--marinho); color: #fff; }
.grade { display: grid; gap: 0.75rem; grid-template-columns: repeat(var(--colunas, 5), minmax(0, 1fr)); align-items: start; }
.grade-dia { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.grade-dia.hoje { border-color: var(--amarelo); box-shadow: 0 0 0 2px var(--amarelo-claro); }
.grade-dia header { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: baseline; background: #f6f9f6; }
.grade-dia.hoje header { background: var(--amarelo-claro); }
.grade-dia header h3 { font-size: 1.05rem; }
.aula {
  display: block; padding: 0.65rem 0.85rem 0.7rem; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta);
  border-left: 5px solid var(--cor, var(--marinho));
}
.aula:last-child { border-bottom: 0; }
.aula:hover { background: #f6f9f6; }
.aula .hora { font-family: var(--fonte-titulo); font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.aula .nome { font-weight: 600; font-size: 0.92rem; margin-top: 0.1rem; }
.aula .meta { font-size: 0.82rem; color: var(--nevoa); margin-top: 0.15rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.aula.inativa { opacity: 0.55; }
.cor-0 { --cor: #143E66; } .cor-1 { --cor: #2f7d5b; } .cor-2 { --cor: #c9871a; }
.cor-3 { --cor: #2b6cb0; } .cor-4 { --cor: #b23a2e; } .cor-5 { --cor: #7a7a1f; }
.lotacao.cheia { color: var(--nevoa); font-weight: 600; }
.lotacao.livre { color: var(--folha); font-weight: 600; }

/* ---------- telas de entrada ---------- */
.tela-cheia { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--marinho); }
.cartao-entrada { background: var(--papel); border-radius: 12px; padding: 2rem; width: min(26rem, 100%); }
.cartao-entrada h1 { margin-bottom: 0.4rem; }
.cartao-entrada .formulario { grid-template-columns: 1fr; margin-top: 1.25rem; }

/* ---------- importação ---------- */
.problema { display: flex; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--linha); font-size: 0.93rem; }
.problema:last-child { border-bottom: 0; }
.problemas-lista { max-height: 22rem; overflow: auto; }

@media (max-width: 1000px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; padding: 0.75rem 0; }
  .marca { padding-bottom: 0.5rem; }
  .menu { flex-direction: row; flex-wrap: wrap; padding: 0 0.75rem; }
  .menu a { border-left: 0; border-bottom: 3px solid transparent; padding: 0.4rem 0.7rem; }
  .menu a.ativo { border-bottom-color: var(--amarelo); }
  .menu .separador, .rodape-lateral { display: none; }
  .conteudo { padding: 1.25rem 1rem 3rem; }
  .formulario { grid-template-columns: 1fr; }
  dl.definicoes { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.definicoes dd { margin-bottom: 0.6rem; }
  .grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .aula, .botao, .menu a { transition: background-color 0.12s ease, color 0.12s ease; }
}
@media print {
  .lateral, .acoes, .botao { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; }
}

/* ---------- agenda ---------- */
.selo { display: inline-block; font-family: var(--fonte-texto); font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; vertical-align: middle; background: #ece9f0; color: var(--nevoa); letter-spacing: 0.02em; }
.selo.st-realizada { background: var(--folha-clara); color: #1d5a40; }
.selo.st-cancelada { background: var(--tijolo-claro); color: #8a2a20; }
.selo.st-feriado, .selo.repo { background: var(--amarelo-claro); color: #6b4d00; }
.aula.st-cancelada .nome, .aula.st-cancelada .hora { text-decoration: line-through; text-decoration-thickness: 1px; }
.aula.st-cancelada, .aula.st-feriado { background: #fafafa; }
.aula.st-realizada { background: #f3f9f5; }
.faixa-feriado { background: var(--amarelo-claro); color: #6b4d00; font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.85rem; }
.linha-feriado { padding: 0.35rem 0.85rem; border-top: 1px solid var(--linha); }
.link-botao { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; color: var(--nevoa); text-decoration: underline; cursor: pointer; }
.link-botao:hover { color: var(--marinho); }
.sem-sublinhado { text-decoration: none; color: inherit; }
.sem-sublinhado:hover { text-decoration: underline; }
.lista-dia { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 0.45rem 0; border-bottom: 1px solid var(--linha); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.lista-simples li:last-child { border-bottom: 0; }
.bloco-aviso { border-color: var(--amarelo); background: #fffdf0; }
.linha-presenca { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--linha); }
.linha-presenca select { width: auto; }
.texto-ok { color: var(--folha); }
.texto-erro { color: #b3201f; }
.atencao-item .qtd { min-width: 1.6rem; }
.logo-entrada { display: block; margin: 0 auto 1rem; border-radius: 50%; }
.cartao-entrada { text-align: left; }