:root {
  --cor-primaria: #1f4e79;
  --cor-texto: #1d2733;
  --cor-suave: #5c6b7a;
  --cor-borda: #d5dce3;
  --cor-fundo: #f4f6f8;
  --cor-erro: #b3261e;
  --cor-sucesso: #1b6e3c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.45;
}

a { color: var(--cor-primaria); }
h1 { margin: 0 0 .5rem; font-size: 1.4rem; }

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: .75rem 1rem;
  color: #fff;
  background: var(--cor-primaria);
}
.topo nav { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 100%; order: 3; }

.identidade {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .75rem;
  min-width: 0;
}
.marca { font-size: 1.2rem; font-weight: 700; color: #fff; text-decoration: none; }
.empresa { padding-left: .75rem; font-size: .95rem; border-left: 1px solid rgba(255, 255, 255, .45); }

.aba {
  display: inline-block;
  padding: .45rem .9rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
}
.aba:hover { background: rgba(255, 255, 255, .25); }
.aba-atual, .aba-atual:hover { color: var(--cor-primaria); background: #fff; border-color: #fff; }
.aba-sair { background: transparent; }

/* No celular: marca e Sair em cima, e os botões lado a lado logo abaixo. */
@media (max-width: 640px) {
  .topo { justify-content: space-between; padding: .6rem .75rem; }
  .topo nav { flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
  .identidade { flex-direction: column; }
  .marca { font-size: 1.05rem; }
  .empresa { padding-left: 0; font-size: .8rem; border-left: 0; }
  .topo nav .aba {
    flex: 1 0 auto;
    padding: .4rem .3rem;
    font-size: .76rem;
    text-align: center;
    white-space: nowrap;
  }
  .aba-sair { padding: .25rem .7rem; font-size: .85rem; }
}

.conteudo { max-width: 1280px; margin: 0 auto; padding: 1rem; }

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}

.cartao {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.estreito { max-width: 420px; margin: 2rem auto; }

label { display: block; margin: .25rem 0; font-weight: 600; }

input:not([type=checkbox]), select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .5rem .65rem;
  font: inherit;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: #fff;
}
input[type=checkbox] { width: 20px; height: 20px; }

.botao {
  display: inline-block;
  min-height: 44px;
  margin-top: 1rem;
  padding: .6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: var(--cor-primaria);
  border: 0;
  border-radius: 6px;
}
.botao:hover { filter: brightness(1.12); }
.cabecalho .botao { margin-top: 0; }

.botao-secundario {
  color: var(--cor-primaria);
  background: #fff;
  border: 1px solid var(--cor-primaria);
}
.botao-secundario:hover { background: #eaf0f6; filter: none; }

.botao-perigo { background: var(--cor-erro); }

.botao-perigo-contorno {
  color: var(--cor-erro);
  background: #fff;
  border: 1px solid var(--cor-erro);
}
.botao-perigo-contorno:hover { background: #fbeaea; filter: none; }

.botao-pequeno {
  min-height: 0;
  margin-top: 0;
  padding: .35rem .7rem;
  font-size: .9rem;
}

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.acoes .botao { margin-top: 0; }

.aviso, .erro { padding: .6rem .8rem; border-radius: 6px; }
.aviso { color: var(--cor-sucesso); background: #e5f4ea; }
.erro { color: var(--cor-erro); background: #fbeaea; }
.erro ul { margin: 0; padding-left: 1rem; }
.aviso.error { color: var(--cor-erro); background: #fbeaea; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.campo small { display: block; margin-top: .25rem; color: var(--cor-suave); }
.campo small.erro-campo { color: var(--cor-erro); }
.com-erro input, .com-erro select { border-color: var(--cor-erro); }

.filtros { display: grid; gap: .25rem; margin-bottom: 1rem; max-width: 480px; }
.filtros-linha {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  max-width: 820px;
}
.etiqueta { padding: .1rem .5rem; font-size: .85rem; border-radius: 999px; }
.etiqueta-planejada { color: #7a5200; background: #fdf3dc; }
.etiqueta-realizada { color: var(--cor-sucesso); background: #e5f4ea; }
.etiqueta-fechada { color: var(--cor-suave); background: #e7ebef; }
.travado { font-size: .85rem; color: var(--cor-suave); }
h2 { margin: 1.5rem 0 .6rem; font-size: 1.1rem; }
.filtro-botao { display: flex; align-items: flex-end; }
.filtro-botao .botao { margin-top: 0; }
.alerta-recibo { color: #7a5200; font-size: .85rem; }
.resumo-emissao { margin-top: 1rem; }
.resumo-emissao p { margin: 0 0 .5rem; }
.resumo-emissao ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.campo-curto { max-width: 14rem; }
.botao[disabled] { cursor: not-allowed; opacity: .5; }
.aviso-pendente ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.acoes-cabecalho { display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes-cabecalho .botao { margin-top: 0; }

.navegacao-dia { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.cartao-visita {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.cartao-visita strong { display: block; }
.cartao-visita .botao { flex-shrink: 0; margin-top: 0; }
.detalhe-visita { display: block; margin: .15rem 0 .35rem; color: var(--cor-suave); font-size: .9rem; }

.cabecalho-visita { margin-bottom: .5rem; }
.cabecalho-visita h1 { margin-bottom: 0; }
.estado-salvamento { min-height: 1.4rem; margin: 0 0 .5rem; font-size: .9rem; color: var(--cor-suave); }
.estado-ok { color: var(--cor-sucesso); }
.estado-alerta { padding: .4rem .6rem; color: #7a5200; background: #fdf3dc; border-radius: 6px; }
.estado-alerta .botao { margin-top: .35rem; }
.formulario-visita { max-width: 640px; }
.marcacoes { display: grid; gap: .75rem; margin-bottom: 1rem; }
.marcacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem auto;
  align-items: center;
  gap: .5rem;
}
.marcacao label { margin: 0; }
.marcacao .erro-campo { grid-column: 1 / -1; color: var(--cor-erro); }
.botao-agora { min-width: 4.5rem; margin-top: 0; padding: .6rem .75rem; }
.campos-visita { display: grid; gap: 1rem; margin-bottom: 1rem; }
.campos-visita .marcador, .campos-visita input[type=checkbox] { margin: 0; }
.campos-visita textarea { min-height: 14rem; resize: vertical; }
.campo small.erro-campo, .erro-campo { color: var(--cor-erro); }
/* O botão de salvar fica sempre ao alcance, mesmo com um texto longo. */
.barra-salvar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: .5rem;
  margin: 0 -1rem;
  padding: .6rem 1rem;
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}
.barra-salvar .botao { flex: 1; margin-top: 0; text-align: center; }

.campo-largo { grid-column: 1 / -1; }
.campo-largo textarea { min-height: 18rem; resize: vertical; }

.janela-descricao {
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 1.25rem;
  text-align: left;
  white-space: normal;
  font-size: 1rem;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.janela-descricao::backdrop { background: rgba(0, 0, 0, .35); }
.janela-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.janela-texto { margin: 1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.recibo-atual { margin: 0 0 .35rem; }
.campo .marcador { margin-bottom: .5rem; }
input[type=file] { padding: .45rem; }
.tabela-compacta { font-size: .88rem; }
.tabela-compacta th, .tabela-compacta td { padding: .45rem .45rem; }
.tabela-compacta .coluna-cliente { min-width: 9rem; max-width: 13rem; white-space: normal; }
.tabela-compacta .botao-pequeno { padding: .25rem .5rem; font-size: .82rem; }
.tabela-compacta .etiqueta { font-size: .78rem; }
tfoot td { font-weight: 700; background: #f4f6f8; border-top: 2px solid var(--cor-borda); border-bottom: 0; }
.marcador { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

.rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--cor-borda); }
tbody tr:last-child td { border-bottom: 0; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* As ações continuam visíveis quando a tabela rola de lado no celular. */
.coluna-acoes {
  position: sticky;
  right: 0;
  text-align: right;
  background: #fff;
  box-shadow: -1px 0 0 var(--cor-borda);
}

@media (max-width: 640px) {
  .ocultar-celular { display: none; }
  .quebra-celular { min-width: 7rem; white-space: normal; }
}

.vazio { color: var(--cor-suave); }
.paginacao { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.destaque { overflow: hidden; border: 1px solid var(--cor-borda); border-radius: 8px; }
.destaque img { display: block; width: 100%; height: auto; }

.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.atalho {
  display: block;
  padding: 1rem 1.25rem;
  color: var(--cor-texto);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: 8px;
}
.atalho:hover { background: #eaf0f6; }
.atalho strong { display: block; color: var(--cor-primaria); font-size: 1.1rem; }
.atalho span { color: var(--cor-suave); font-size: .9rem; }

.aviso-pendente { margin: 1rem 0 0; padding: .6rem .8rem; background: #fdf3dc; border-radius: 6px; }

.qrcode { display: block; margin: 1rem auto; background: #fff; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0; list-style: none; }

.passo-relatorio { display: grid; gap: .6rem; margin-bottom: 1rem; }
.passo-relatorio h2, .passo-relatorio p { margin: 0; }
.texto-relatorio { width: 100%; min-height: 24rem; resize: vertical; font-family: inherit; }
.texto-pedido { min-height: 8rem; background: #f4f6f8; }

.dias-semana { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0; padding: 0; border: 0; }
.dias-semana legend { margin-bottom: .35rem; padding: 0; font-weight: 600; }
.dias-semana .marcador { margin: 0; }
.dias-semana .erro-campo { flex-basis: 100%; }
.marcador-lote { margin-top: 1rem; }
.datas-lote { display: grid; gap: .1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.datas-lote li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; min-height: 36px; border-bottom: 1px solid var(--cor-borda); }
.datas-lote .marcador { margin: 0; }

.filtros-painel { max-width: 960px; grid-template-columns: 8rem 10rem minmax(14rem, 1fr) auto; }
.filtro-marcador { min-height: 44px; margin: 0; white-space: nowrap; }
.resumo-painel { margin: 0 0 .75rem; color: var(--cor-suave); }
#painel.htmx-request { opacity: .6; }

.indicadores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.indicador {
  padding: .6rem .8rem;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.indicador span { display: block; color: var(--cor-suave); font-size: .85rem; }
.indicador strong { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.indicador-forte { border-left: 4px solid var(--cor-primaria); }

.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.grafico { margin: 0; padding: .75rem .9rem; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; }
.grafico figcaption strong { display: block; }
.grafico figcaption span { color: var(--cor-suave); font-size: .85rem; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  margin: .35rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--cor-suave);
  list-style: none;
}
.legenda li { display: flex; align-items: center; gap: .35rem; }
.chave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.chave-realizado { background: var(--cor-primaria); }
.chave-planejado { background: #86b6ef; }
.chave-media { height: 2px; width: 16px; background: #eb6834; border-radius: 0; }

.linha-grade { stroke: #e7ebef; stroke-width: 1; }
.texto-eixo { font-size: 11px; fill: var(--cor-suave); font-variant-numeric: tabular-nums; }
.texto-destaque { font-weight: 700; fill: var(--cor-texto); }
.texto-valor { font-size: 12px; font-weight: 600; fill: var(--cor-texto); }
.marca-realizado { fill: var(--cor-primaria); }
.marca-planejado { fill: #86b6ef; }
.marca-atenuada { opacity: .3; }
.linha-media { stroke: #eb6834; stroke-width: 2; }
.linha-serie { fill: none; stroke: var(--cor-primaria); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ponto-serie { fill: var(--cor-primaria); stroke: #fff; stroke-width: 2; }
.alvo { fill: transparent; cursor: default; outline: none; }
.alvo:hover, .alvo:focus { fill: rgba(31, 78, 121, .08); }

.dica-grafico {
  position: fixed;
  z-index: 10;
  max-width: 16rem;
  padding: .4rem .6rem;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  pointer-events: none;
  color: #fff;
  background: var(--cor-texto);
  border-radius: 6px;
}
.nota-painel { margin: .4rem 0 0; color: var(--cor-suave); font-size: .85rem; }
.valores-por-mes { margin-top: 1rem; }
.valores-por-mes summary { margin-bottom: .5rem; font-weight: 600; color: var(--cor-primaria); cursor: pointer; }

@media (max-width: 1000px) {
  .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .graficos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .filtros-painel { grid-template-columns: 1fr 1fr; }
  .filtros-painel > div:nth-child(3), .filtros-painel > div:nth-child(4) { grid-column: 1 / -1; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador strong { font-size: 1rem; }
  /* O desenho encolhe para caber os 12 meses; as letras compensam para continuar legíveis. */
  .texto-eixo { font-size: 14px; }
  .texto-valor { font-size: 16px; }
}