:root {
  --fundo: #f6f7f9;
  --cartao: #ffffff;
  --texto: #1c2430;
  --suave: #5c6878;
  --borda: #dde2e8;
  --destaque: #1f5fbf;
  --destaque-texto: #ffffff;
  --verde: #1f8a4c;
  --amarelo: #b7860b;
  --laranja: #d0621a;
  --vermelho: #c62f2f;
  --cinza: #8a94a3;
  --verde-fundo: #e5f4ea;
  --amarelo-fundo: #fbf3dc;
  --laranja-fundo: #fcebdd;
  --vermelho-fundo: #fbe5e5;
  --cinza-fundo: #eef0f3;
  --sombra: 0 1px 2px rgba(20, 30, 45, .06), 0 2px 8px rgba(20, 30, 45, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #12161c;
    --cartao: #1b2129;
    --texto: #e6eaf0;
    --suave: #9aa5b4;
    --borda: #2c3540;
    --destaque: #5b9bf0;
    --destaque-texto: #0d1420;
    --verde: #4cc27e;
    --amarelo: #e3b641;
    --laranja: #f08a4b;
    --vermelho: #f06a6a;
    --cinza: #7d8898;
    --verde-fundo: #16301f;
    --amarelo-fundo: #33290f;
    --laranja-fundo: #3a2312;
    --vermelho-fundo: #3d1a1a;
    --cinza-fundo: #232a33;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--destaque); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }

.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: .6rem 16px; background: var(--cartao); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 5;
}
.marca { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texto); }
.marca::before { content: "●"; color: var(--laranja); margin-right: .35rem; }
#menu { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
#menu a { text-decoration: none; color: var(--suave); padding: .25rem .6rem; border-radius: 6px; }
#menu a.ativo, #menu a:hover { background: var(--cinza-fundo); color: var(--texto); }
#sessao { display: flex; align-items: center; gap: .5rem; color: var(--suave); font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 16px 4rem; }
.carregando, .vazio { color: var(--suave); }
.sub { color: var(--suave); margin: 0 0 1rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: .75rem; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.resumo { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.chip.verde { background: var(--verde-fundo); color: var(--verde); }
.chip.amarelo { background: var(--amarelo-fundo); color: var(--amarelo); }
.chip.laranja { background: var(--laranja-fundo); color: var(--laranja); }
.chip.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.chip.cinza { background: var(--cinza-fundo); color: var(--suave); }

.dia { margin: 1.25rem 0 .5rem; font-weight: 700; color: var(--suave); text-transform: capitalize; font-size: .9rem; }
.dia.hoje { color: var(--destaque); }
.aula {
  display: grid; grid-template-columns: 6px 88px 1fr auto; gap: .25rem .85rem; align-items: center;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: .65rem .85rem .65rem 0;
  text-decoration: none; color: inherit; box-shadow: var(--sombra); margin-bottom: .5rem; overflow: hidden;
}
.aula:hover { border-color: var(--destaque); }
.aula .faixa { align-self: stretch; margin: -.65rem 0; }
.faixa.verde { background: var(--verde); } .faixa.amarelo { background: var(--amarelo); }
.faixa.laranja { background: var(--laranja); } .faixa.vermelho { background: var(--vermelho); } .faixa.cinza { background: var(--cinza); }
.aula .hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.aula .hora small { display: block; color: var(--suave); font-weight: 500; }
.aula .titulo { font-weight: 600; }
.aula .titulo small { color: var(--suave); font-weight: 400; }
.aula.cancelada .titulo { text-decoration: line-through; color: var(--suave); }
.prazos { display: flex; gap: .3rem; margin-top: .2rem; flex-wrap: wrap; }
.prazo { font-size: .72rem; padding: 0 .4rem; border-radius: 4px; border: 1px solid var(--borda); color: var(--suave); font-variant-numeric: tabular-nums; }
.prazo.ok { background: var(--verde-fundo); color: var(--verde); border-color: transparent; }
.prazo.hoje { background: var(--amarelo-fundo); color: var(--amarelo); border-color: transparent; }
.prazo.atrasado { background: var(--laranja-fundo); color: var(--laranja); border-color: transparent; }
.prazo.problema { background: var(--vermelho-fundo); color: var(--vermelho); border-color: transparent; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem 1rem; }
.campo { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--suave); }
.campo.largo { grid-column: 1 / -1; }
input, select, textarea, button { font: inherit; color: var(--texto); }
input, select, textarea {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 7px; padding: .45rem .6rem; min-width: 0; width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
.filtros .campo { width: auto; }
.filtros select { width: auto; }

button, .botao {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--cartao); text-decoration: none; color: var(--texto); font-weight: 500;
}
button:hover { border-color: var(--destaque); }
button.primario { background: var(--destaque); color: var(--destaque-texto); border-color: var(--destaque); }
button.perigo { color: var(--vermelho); }
button.pequeno { padding: .2rem .55rem; font-size: .82rem; }
button:disabled { opacity: .55; cursor: default; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: start; margin-bottom: 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--suave); }
.meta b { color: var(--texto); font-weight: 600; }

.bloco-prazo { margin-top: 1rem; }
.bloco-prazo h3 { display: flex; gap: .5rem; align-items: center; }
.bloco-prazo h3 small { color: var(--suave); font-weight: 400; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: .6rem 0; border-top: 1px solid var(--borda); align-items: center; }
.item .obs { grid-column: 1 / -1; font-size: .85rem; color: var(--suave); }
.item .botoes { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: end; }

.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--suave); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.rolagem { overflow-x: auto; }
.pre { white-space: pre-wrap; }
.marcadores { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.marcadores label { display: inline-flex; gap: .35rem; align-items: center; color: var(--texto); font-size: .9rem; }
.marcadores input { width: auto; }
.grupo-recursos { margin-bottom: .5rem; }
.grupo-recursos b { display: block; font-size: .8rem; color: var(--suave); text-transform: uppercase; margin: .4rem 0 .2rem; }

.login { max-width: 380px; margin: 3rem auto; }
.login .campo { margin-bottom: .75rem; }
.caixa-link { display: flex; gap: .5rem; margin-top: .5rem; }
.caixa-link input { font-family: ui-monospace, monospace; font-size: .8rem; }

#aviso {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(150%);
  background: var(--texto); color: var(--fundo); padding: .6rem 1rem; border-radius: 8px; transition: transform .2s; max-width: calc(100% - 32px);
}
#aviso.visivel { transform: translateX(-50%) translateY(0); }
#aviso.erro { background: var(--vermelho); color: #fff; }

@media (max-width: 640px) {
  .aula { grid-template-columns: 6px 64px 1fr; }
  .aula .chip { grid-column: 3; justify-self: start; }
  .item { grid-template-columns: 1fr; }
  .item .botoes { justify-content: start; }
}