:root {
  /* Paleta: offwhite, chumbo, azul e cinza */
  --fundo: #f5f3ee;
  --cartao: #ffffff;
  --texto: #2b3138;
  --discreto: #6b7380;
  --borda: #e2dfd7;
  --chumbo: #2b3138;
  --chumbo-claro: #3b434d;
  --cinza: #8a929c;
  --cinza-claro: #ecebe6;
  --primaria: #1f5fa8;
  --primaria-escura: #174a84;
  --primaria-fundo: #e7eef8;
  --verde: #1e7d3a;
  --verde-fundo: #e3f4e8;
  --amarelo: #8a6100;
  --amarelo-fundo: #fff4d1;
  --vermelho: #b3261e;
  --vermelho-fundo: #fde7e5;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(43, 49, 56, .05), 0 2px 8px rgba(43, 49, 56, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--primaria); text-underline-offset: 2px; }
h1 { font-size: 1.55rem; margin: 0 0 1rem; letter-spacing: -.01em; font-weight: 650; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .75rem; font-weight: 650; }
h1 .discreto { font-weight: 400; font-size: 1rem; }
.discreto { color: var(--discreto); font-size: .9rem; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.25rem; background: var(--chumbo); color: #fff;
  border-bottom: 3px solid var(--primaria);
}
.marca { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .7rem; }
.marca img { height: 41px; width: auto; display: block; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 1.08rem; font-weight: 650; letter-spacing: .01em; }
.marca-texto small { font-size: .72rem; color: #b9c0c8; letter-spacing: .03em; }
.conta { position: relative; }
.conta summary { cursor: pointer; list-style: none; padding: .35rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .92rem; }
.conta summary:hover { background: rgba(255,255,255,.18); }
.conta summary::-webkit-details-marker { display: none; }
.conta-menu {
  position: absolute; right: 0; top: 2.6rem; z-index: 10; min-width: 250px;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .85rem; box-shadow: 0 10px 30px rgba(43,49,56,.18);
}
.conta-menu a, .conta-menu .link { display: block; padding: .35rem 0; }

.menu {
  display: flex; gap: .2rem; overflow-x: auto; padding: .45rem 1.25rem;
  background: var(--cartao); border-bottom: 1px solid var(--borda); box-shadow: var(--sombra);
  scrollbar-width: thin;
}
.menu a {
  white-space: nowrap; text-decoration: none; color: var(--chumbo-claro); font-size: .94rem;
  padding: .45rem .8rem; border-radius: 999px; transition: background .15s, color .15s;
}
.menu a:hover { background: var(--cinza-claro); color: var(--texto); }
.menu a[aria-current="page"] { background: var(--primaria); color: #fff; }

.conteudo { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--sombra);
}
.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 #d3d0c8; border-radius: 8px; background: #fff; color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(31,95,168,.15); }
.botao, button:not(.link) {
  display: inline-block; padding: .6rem 1.1rem; font-size: 1rem; cursor: pointer;
  border: 0; border-radius: 8px; background: var(--primaria); color: #fff; text-decoration: none;
  font-weight: 550; transition: background .15s, box-shadow .15s;
}
.botao:hover, button:not(.link):hover { background: var(--primaria-escura); }
.botao.secundario { background: var(--cinza-claro); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.botao.secundario:hover { background: #e2e0d9; }
.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: .75rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; background: var(--primaria-fundo); border-left: 4px solid var(--primaria); }
.aviso-success { background: var(--verde-fundo); color: var(--verde); border-left-color: var(--verde); }
.aviso-error { background: var(--vermelho-fundo); color: var(--vermelho); border-left-color: var(--vermelho); }
.aviso-warning { background: var(--amarelo-fundo); color: var(--amarelo); border-left-color: #d9a400; }
.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: .78rem; color: var(--discreto); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover td { background: #faf9f6; }
td.centro, th.centro { text-align: center; }

.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; background: var(--cinza-claro); }
.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 { transition: border-color .15s, transform .15s, box-shadow .15s; }
.atalho:hover { border-color: var(--primaria); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43,49,56,.1); }
.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: var(--chumbo); 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: var(--cinza-claro); color: #a3a9b0; 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: var(--cinza-claro); }
.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 .85rem; border-radius: 999px; background: var(--cinza-claro); box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); text-decoration: none; font-size: .9rem; }
.subnav a:hover { box-shadow: inset 0 0 0 1px var(--cinza); }
.subnav a[aria-current] { background: var(--chumbo); box-shadow: none; color: #fff; }
.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.7rem; line-height: 1.2; font-weight: 650; color: var(--chumbo); }
.indicador { border-top: 3px solid var(--primaria); }
.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 .cartao:only-child { max-width: 620px; }
.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: var(--chumbo); text-align: center; font-weight: 700; font-size: .85rem; padding: .35rem 1rem; }

/* ---------- Marca e entrada ---------- */
.entrada-marca { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin: 2.5rem auto 0; text-align: center; }
.entrada-marca img { height: 134px; width: auto; background: var(--chumbo); padding: 12px 16px; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(43,49,56,.18); border-bottom: 4px solid var(--primaria); }
.entrada-marca strong { display: block; font-size: 1.45rem; font-weight: 650; color: var(--chumbo); letter-spacing: -.01em; }
.entrada-marca span { display: block; color: var(--discreto); font-size: .9rem; }
.cartao.entrada { margin-top: 1.25rem; }
@media (max-width: 520px) {
  .topo { padding: .5rem .9rem; }
  .marca img { height: 34px; }
  .marca-texto small { display: none; }
  .conteudo { padding: 1rem .9rem 2.5rem; }
}

/* ---------- Comparação ---------- */
.abas-modo { display: inline-flex; gap: .2rem; padding: .25rem; margin-bottom: 1rem; background: var(--cinza-claro);
  border: 1px solid var(--borda); border-radius: 999px; flex-wrap: wrap; }
.abas-modo a { padding: .4rem 1.1rem; border-radius: 999px; text-decoration: none; color: var(--chumbo-claro); font-weight: 550; }
.abas-modo a[aria-current] { background: var(--cartao); color: var(--primaria); box-shadow: var(--sombra); }
fieldset.grupo-modo { border: 0; padding: 0; margin: 0 0 .25rem; min-width: 0; }
fieldset.grupo-modo legend { font-weight: 650; padding: 0; margin-bottom: .4rem; }
[hidden] { display: none !important; }
.tabela-comparacao thead th.centro { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--texto); }
.tabela-comparacao thead th { border-bottom: 2px solid var(--chumbo); vertical-align: bottom; }
.tabela-comparacao thead th.coluna-1 { box-shadow: inset 0 -3px 0 #2a78d6; }
.tabela-comparacao thead th.coluna-2 { box-shadow: inset 0 -3px 0 #eb6834; }
.tabela-comparacao thead th.coluna-3 { box-shadow: inset 0 -3px 0 #1baf7a; }
.tabela-comparacao tr.grupo th { background: var(--cinza-claro); color: var(--chumbo); padding-top: .55rem; }
.tabela-comparacao td.centro { font-variant-numeric: tabular-nums; }
.melhor-valor { background: var(--primaria-fundo); color: var(--primaria-escura); font-weight: 650; }
tbody tr:hover td.melhor-valor { background: #dbe6f5; }
.melhor-valor.amostra { padding: 0 .4rem; border-radius: 4px; }
.diferenca { font-variant-numeric: tabular-nums; color: var(--discreto); }
.diferenca.melhor { color: var(--verde); font-weight: 600; }
.diferenca.pior { color: var(--vermelho); font-weight: 600; }