:root {
  --fundo: #f5f6f8;
  --cartao: #ffffff;
  --texto: #1d2733;
  --discreto: #5b6775;
  --borda: #d9dee5;
  --primaria: #0b5394;
  --primaria-escura: #083d6d;
  --verde: #1e7d3a;
  --verde-fundo: #e3f4e8;
  --amarelo: #8a6100;
  --amarelo-fundo: #fff4d1;
  --vermelho: #b3261e;
  --vermelho-fundo: #fde7e5;
  --raio: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
.discreto { color: var(--discreto); font-size: .9rem; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--primaria); color: #fff;
}
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.marca span { font-weight: 400; opacity: .85; font-size: .9rem; margin-left: .3rem; }
.conta { position: relative; }
.conta summary { cursor: pointer; list-style: none; padding: .3rem .6rem; border-radius: var(--raio); background: rgba(255,255,255,.15); }
.conta summary::-webkit-details-marker { display: none; }
.conta-menu {
  position: absolute; right: 0; top: 2.4rem; z-index: 10; min-width: 240px;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .75rem; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.conta-menu a, .conta-menu .link { display: block; padding: .35rem 0; }

.menu {
  display: flex; gap: .25rem; overflow-x: auto; padding: .4rem 1rem;
  background: var(--cartao); border-bottom: 1px solid var(--borda);
}
.menu a {
  white-space: nowrap; text-decoration: none; color: var(--texto);
  padding: .45rem .75rem; border-radius: var(--raio);
}
.menu a[aria-current="page"] { background: var(--primaria); color: #fff; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem; margin-bottom: 1rem;
}
.estreito { max-width: 440px; margin: 2rem auto; }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=number], select, textarea {
  width: 100%; padding: .6rem .7rem; font-size: 1rem;
  border: 1px solid var(--borda); border-radius: var(--raio); background: #fff;
}
.botao, button:not(.link) {
  display: inline-block; padding: .6rem 1.1rem; font-size: 1rem; cursor: pointer;
  border: 0; border-radius: var(--raio); background: var(--primaria); color: #fff; text-decoration: none;
}
.botao:hover, button:not(.link):hover { background: var(--primaria-escura); }
.botao.secundario { background: #e8ecf1; color: var(--texto); }
.botao.perigo { background: var(--vermelho); }
.link { background: none; border: 0; padding: 0; color: var(--primaria); cursor: pointer; font: inherit; text-decoration: underline; }
.acoes { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.erro, .errorlist { color: var(--vermelho); font-size: .9rem; }
.errorlist { list-style: none; padding: 0; margin: .25rem 0; }
.aviso { padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; background: #e8f0fb; }
.aviso-success { background: var(--verde-fundo); color: var(--verde); }
.aviso-error { background: var(--vermelho-fundo); color: var(--vermelho); }
.aviso-warning { background: var(--amarelo-fundo); color: var(--amarelo); }
.helptext, .ajuda { display: block; color: var(--discreto); font-size: .85rem; }
.ajuda ul { margin: .25rem 0; padding-left: 1.2rem; }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--cartao); }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: .85rem; color: var(--discreto); font-weight: 600; }
td.centro, th.centro { text-align: center; }

.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: #e8ecf1; }
.etiqueta.ok { background: var(--verde-fundo); color: var(--verde); }
.etiqueta.pendente { background: var(--amarelo-fundo); color: var(--amarelo); }
.etiqueta.inativo { background: var(--vermelho-fundo); color: var(--vermelho); }

.qr { max-width: 240px; margin: 1rem auto; }
.qr svg { width: 100%; height: auto; }
.chave { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; }
.senha-provisoria { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; text-align: center; padding: 1rem; background: var(--fundo); border-radius: var(--raio); }
.passos { padding-left: 1.2rem; }
.passos li { margin-bottom: .5rem; }
.filtros { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.filtros label { margin: 0 0 .25rem; }
.lista-funcoes label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0; }
.lista-funcoes ul { list-style: none; padding: 0; margin: 0; }
pre.json { white-space: pre-wrap; font-size: .8rem; margin: 0; }
.atalho { display: block; text-decoration: none; color: var(--texto); }
.atalho strong { display: block; color: var(--primaria); font-size: 1.05rem; }
.atalho:hover { border-color: var(--primaria); }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.dados dt { color: var(--discreto); font-size: .9rem; }
.dados dd { margin: 0; }
tr.cancelado td { color: var(--discreto); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
tr.cancelado td .ajuda, tr.cancelado td .etiqueta { text-decoration: none; }
label.marcavel { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
@media (max-width: 520px) { .dados { grid-template-columns: 1fr; } .dados dd { margin-bottom: .4rem; } }
.topo { gap: .75rem; }
.topo .marca { margin-right: auto; }
.sino { color: #fff; text-decoration: none; font-size: .9rem; }
.contador { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #ffcf33; color: #1d2733; font-weight: 700; text-align: center; }
.aviso-item.nao-lido { border-left: 4px solid var(--primaria); }
.faixas { display: grid; gap: .5rem 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
td.calculo { font-size: .9rem; }

/* ---------- Calendário de agendamento ---------- */
.cabecalho-calendario { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cabecalho-calendario h1 { margin: 0; }
.navegacao-mes { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }
.navegacao-mes strong { font-size: 1.15rem; min-width: 11rem; text-align: center; }
.desabilitado { opacity: .4; pointer-events: none; }
.resumo-mes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.resumo-mes span { display: block; font-size: .8rem; }
.resumo-mes strong { font-size: 1.3rem; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; margin: .5rem 0 .75rem; color: var(--discreto); }
.legenda .cor { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .2rem; border: 1px solid rgba(0,0,0,.15); }
.cor.verde { background: var(--verde-fundo); } .cor.amarelo { background: var(--amarelo-fundo); }
.cor.vermelho { background: var(--vermelho-fundo); } .cor.meu { background: #fff; border: 3px solid var(--primaria); }

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dia-semana { text-align: center; font-size: .75rem; font-weight: 600; color: var(--discreto); padding: .2rem 0; }
.dia { min-height: 4.4rem; border-radius: 6px; border: 1px solid var(--borda); background: var(--cartao);
       margin: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--texto); overflow: hidden; }
.dia.fora { background: transparent; border-color: transparent; }
.dia.inativo { background: #eceff3; color: #9aa4b0; padding: .25rem; }
.dia.verde { background: var(--verde-fundo); border-color: #b9e0c4; }
.dia.amarelo { background: var(--amarelo-fundo); border-color: #f0dc9c; }
.dia.vermelho { background: var(--vermelho-fundo); border-color: #f2b8b3; }
.dia.afastado { background: #eceff3; }
.dia.meu { outline: 3px solid var(--primaria); outline-offset: -3px; }
.dia .toque { all: unset; box-sizing: border-box; width: 100%; height: 100%; padding: .25rem; cursor: pointer;
              display: flex; flex-direction: column; align-items: flex-start; }
.dia .toque:disabled { cursor: default; }
.dia .toque:focus-visible { outline: 3px solid var(--texto); outline-offset: -3px; }
.dia .numero { font-weight: 700; font-size: .95rem; }
.dia .detalhe { font-size: .7rem; line-height: 1.2; }
.dia .selo { margin-top: auto; font-size: .65rem; background: var(--primaria); color: #fff; border-radius: 4px; padding: 0 .3rem; }
.calendario.geral .dia { padding: .25rem; min-height: 5.5rem; }
.calendario.geral .nomes { font-size: .65rem; color: var(--discreto); margin-top: .2rem; }
.linha-agendado { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
@media (max-width: 520px) {
  .calendario { gap: 2px; }
  .dia { min-height: 3.8rem; }
  .dia .detalhe.discreto, .calendario.geral .nomes { display: none; }
  .navegacao-mes strong { min-width: 8rem; }
}
.documento { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.documento.destaque { border-left: 4px solid var(--verde); }
.documento .acoes { margin-top: 0; }

/* ---------- Tarefas e plano ---------- */
.placar { text-align: right; display: flex; flex-direction: column; }
.placar strong { font-size: 1.4rem; }
.placar.pequeno strong { font-size: 1.05rem; }
.linha-tarefa { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.grade-form { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.resumo-tri { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
.resumo-tri span { display: block; font-size: .8rem; }
.resumo-tri strong { font-size: 1.3rem; }
.meses-plano { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mes-plano.futuro { opacity: .85; border-style: dashed; }
select[multiple] { width: 100%; padding: .3rem; border: 1px solid var(--borda); border-radius: var(--raio); }
@media (max-width: 520px) { .resumo-tri { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Etapa 3 ---------- */
.subnav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subnav a { padding: .35rem .7rem; border-radius: var(--raio); background: #e8ecf1; color: var(--texto); text-decoration: none; font-size: .9rem; }
.destaque-presenca { border-left: 4px solid var(--amarelo); background: var(--amarelo-fundo); }
.botao-grande { font-size: 1.15rem; padding: .9rem 1.4rem; width: 100%; }
code { font-family: ui-monospace, Consolas, monospace; }

/* ---------- Painel (Etapa 4) ---------- */
.filtros-painel { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.indicadores { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1rem; }
.indicador { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.indicador span { font-size: .8rem; color: var(--discreto); }
.indicador strong { font-size: 1.6rem; line-height: 1.2; }
.indicador em { font-style: normal; font-size: .8rem; color: var(--discreto); }
.grade-graficos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); margin-bottom: 1rem; }
.grade-graficos .cartao { margin: 0; overflow-x: auto; }
.grade-graficos h3, .cartao > h3 { margin: 0 0 .5rem; font-size: 1rem; }
.grafico { width: 100%; height: auto; display: block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
details table { margin-top: .5rem; font-size: .85rem; }
.linha-inteira { grid-column: 1 / -1; margin: .25rem 0 0; }

.faixa-simulacao { background: #fab219; color: #1d2733; text-align: center; font-weight: 700; font-size: .85rem; padding: .35rem 1rem; }