/* estilo.css — visual do painel de escala. CASCA deste cliente.
 *
 * Duas larguras de verdade, nao uma com remendo: no PC a semana e uma grade de 7
 * colunas; no celular vira uma lista de dias, um embaixo do outro. Boa parte do uso e
 * no telefone, em campo, e grade de 7 colunas em tela de celular nao se le.
 *
 * Autoria: Claude (Opus 5), 03/08/2026.
 */

:root {
  color-scheme: light dark;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fundo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #eef0f4;
  --borda: #d7dbe2;
  --texto: #16202e;
  --texto-fraco: #5b6879;
  /* As duas cores da marca, tiradas do proprio arquivo da logo. Ficam iguais nos dois
     temas: sao a marca, nao paleta de tela.
     ⚠️ O OURO NAO SERVE COMO TEXTO em fundo claro - da 3,0:1 contra o branco, e o minimo
     e 4,5:1. Use so como bloco, filete ou borda. Por isso ele nao entrou no `--hoje`, que
     tambem pinta o numero do dia e o selo HOJE. */
  --marca-azul: #012550;
  --marca-ouro: #bd8e31;

  --primaria: var(--marca-azul);
  --primaria-texto: #ffffff;
  --perigo: #b91c1c;
  --hoje: #0f766e;
  --sombra: 0 1px 2px rgb(15 32 46 / .08), 0 8px 24px rgb(15 32 46 / .08);

  /* Placa atrás da logo. Transparente no tema claro; ver o porquê no tema escuro. */
  --logo-fundo: transparent;
}

html[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0d1117;
  --superficie: #161b22;
  --superficie-2: #1f262f;
  --borda: #303a46;
  --texto: #e6edf3;
  --texto-fraco: #94a3b8;
  /* ⚠️ NAO da para usar o azul-marinho da marca como cor primaria aqui: contra o fundo
     escuro ele da 1,14:1 e some - o mesmo motivo da placa clara atras da logo. Este e o
     MESMO azul da marca (matiz 213deg, saturacao 98%) clareado ate ficar visivel: 4,8:1
     contra a superficie, e 5,3:1 para o texto escuro que vai em cima dele. */
  --primaria: #2185fc;
  --primaria-texto: #06101f;
  --perigo: #f87171;
  --hoje: #2dd4bf;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);

  /* ⚠️ A logo da MS é azul-marinho (#012550) + dourado, com o interior do escudo VAZADO.
     Contra o fundo escuro (#161b22) o azul-marinho dá contraste 1,14:1 - ou seja, some, e
     sobram as formas douradas soltas no ar. A saída é a placa clara atrás da marca, que é
     o tratamento padrão de logo sobre fundo escuro. Não clareei o azul da logo: mudar cor
     de marca é decisão do cliente, não do código. */
  --logo-fundo: #eef1f6;
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0d1117;
    --superficie: #161b22;
    --superficie-2: #1f262f;
    --borda: #303a46;
    --texto: #e6edf3;
    --texto-fraco: #94a3b8;
    --primaria: #2185fc;          /* mesmo azul da marca, clareado - ver o bloco acima */
    --primaria-texto: #06101f;
    --perigo: #f87171;
    --hoje: #2dd4bf;
    --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
    --logo-fundo: #eef1f6;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.oculto { display: none !important; }

/* Rede de seguranca para o atributo `hidden` do HTML.
 *
 * O navegador esconde `[hidden]` com `display: none`, mas isso vem da folha de estilo DELE
 * - qualquer regra nossa que defina `display` ganha. Foi o que aconteceu com o campo
 * "Seu nome" da tela de entrada: ele era escondido com `hidden`, e `.campo { display: flex }`
 * desfazia - o campo aparecia no login de todo mundo, desde sempre, e ninguem tinha ligado
 * uma coisa na outra.
 *
 * Com esta regra, `hidden` passa a valer mesmo. Nao substitui a classe `.oculto`, que
 * continua sendo o jeito padrao aqui; serve para o `hidden` nunca mais falhar calado. */
[hidden] { display: none !important; }
.espaco { flex: 1; }

/* ------------------------------------------------------------------ entrada */
.tela-cheia {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.carregando-texto { color: var(--texto-fraco); }

.cartao-entrada {
  width: min(24rem, 100%);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .9rem;
  box-shadow: var(--sombra);
  padding: 1.75rem 1.5rem;
}

.marca { margin: 0; font-size: 1.4rem; letter-spacing: .01em; }
.marca-sub { margin: .1rem 0 1.25rem; color: var(--texto-fraco); font-size: .9rem; }

/* Na entrada a marca fica centralizada e os campos continuam alinhados à esquerda: é o
   desenho normal de cartão de login, e centralizar os campos junto atrapalharia a leitura. */
.entrada-marca { display: flex; flex-direction: column; align-items: center; text-align: center; }
.entrada-logo {
  height: 5.5rem;
  width: auto;
  margin-bottom: .55rem;
  background: var(--logo-fundo);
  border-radius: .5rem;
  padding: .3rem .45rem;
}

/* ------------------------------------------------------------------ topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: .7rem 1rem;
  background: var(--superficie);
  /* Filete dourado da marca separando o cabecalho do conteudo. E aqui que o ouro entra:
     como linha, nunca como texto (ver o aviso de contraste em `--marca-ouro`). Aparece em
     todas as telas e funciona igual nos dois temas, por ser so um traco. */
  border-bottom: 2px solid var(--marca-ouro);
}

.topo-marca { display: flex; align-items: center; gap: .55rem; line-height: 1.2; }
.topo-nome { display: flex; flex-direction: column; }
.topo-logo {
  height: 2.2rem;
  width: auto;
  flex: none;                 /* a barra quebra em linhas no celular; a logo não encolhe */
  background: var(--logo-fundo);
  border-radius: .35rem;
  padding: .15rem .25rem;
}
.topo-sub { color: var(--texto-fraco); font-size: .78rem; }
.topo-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }

/* ------------------------------------------------------------------ botoes */
.botao {
  font: inherit;
  font-size: .88rem;
  padding: .45rem .8rem;
  border-radius: .5rem;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  min-height: 2.4rem;                 /* alvo de toque no celular */
}
.botao:hover { border-color: var(--texto-fraco); }
.botao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.botao.primario { background: var(--primaria); color: var(--primaria-texto); border-color: transparent; font-weight: 600; }
/* Aba em que voce esta. Nao usa a cor primaria de proposito: ela e do "+ Novo registro",
   que e acao, nao lugar. Aqui a pista e so contraste - senao a barra fica com dois botoes
   azuis e o de acao perde o destaque. */
.botao.ativo { background: var(--superficie-2); border-color: var(--texto-fraco); color: var(--texto); font-weight: 600; }
.botao.perigo { background: transparent; color: var(--perigo); border-color: currentColor; }
.botao.sutil { background: transparent; border-color: transparent; color: var(--texto-fraco); }
.botao.largo { width: 100%; margin-top: .5rem; }

.perigo-texto { color: var(--perigo) !important; }

/* ------------------------------------------------------------------ icones
 * Acompanham o TAMANHO e a COR do texto do botao (1em + currentColor). Por isso nao
 * precisam de ajuste por tema nem por botao - funcionam iguais no claro, no escuro e
 * dentro do "Novo registro", que tem fundo azul.
 * O traco fica no CSS e nao no SVG para nao repetir cinco atributos em cada desenho. */
.icone {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  /* O clique atravessa o ícone e chega no botão. Os tratadores desta tela são delegados
     no document e acham o botão com closest(), que funcionaria a partir do SVG - mas
     assim o alvo do clique é SEMPRE o botão, e a delegação deixa de depender disso.
     É barato, e o menu "Mais" já quebrou uma vez por um clique que não chegou. */
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Só os botões da barra viram flex, para o ícone e o texto ficarem lado a lado e
   centrados. O `.botao` em geral fica como está: ele é usado nas janelas e nos rodapés,
   e trocar o display de todos por causa de sete seria risco à toa.
   O `justify-content` importa no celular, onde os botões esticam para dividir a linha -
   sem ele o conteúdo ficaria colado na esquerda de cada um. */
.topo-acoes .botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }

/* A setinha do "Cadastrar" é menor e mais apagada que o ícone da esquerda: ela é uma
   pista de que o botão abre uma lista, não parte do nome dele. */
.icone-seta { width: .85em; height: .85em; opacity: .65; margin-left: -.1rem; }

/* ------------------------------------------------- aviso de versao nova
 * Barra no topo dizendo que saiu versao nova. Fica NO FLUXO da pagina (empurra o resto
 * para baixo) e nao flutuando por cima: por cima ela taparia o cabecalho e, no celular,
 * a primeira linha da escala - justamente o que a pessoa abriu o painel para ver.
 * Usa a cor primaria porque e das poucas coisas que interrompem de proposito. */
.barra-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: var(--primaria);
  color: var(--primaria-texto);
  font-size: .9rem;
}

.barra-aviso-texto { display: flex; align-items: center; gap: .45rem; font-weight: 600; }

/* Os dois botoes ignoram a paleta normal: o fundo aqui e a cor primaria, entao um
   `.botao` comum sumiria dentro dela. */
.barra-aviso .botao { padding: .35rem .9rem; font-size: .85rem; }
.barra-aviso-ok {
  background: var(--primaria-texto);
  color: var(--primaria);
  border-color: transparent;
  font-weight: 600;
}
.barra-aviso-ok:hover { border-color: transparent; filter: brightness(.94); }
.barra-aviso-depois { background: transparent; color: inherit; border-color: currentColor; }
.barra-aviso-depois:hover { border-color: currentColor; filter: brightness(1.15); }
.barra-aviso .botao:focus-visible { outline: 2px solid var(--primaria-texto); outline-offset: 2px; }

@media (max-width: 720px) {
  /* No celular o texto ocupa a linha inteira e os botoes dividem a de baixo. Em uma linha
     so, "Atualizar agora" ficaria estreito demais para acertar com o dedo. */
  .barra-aviso { gap: .5rem; }
  .barra-aviso-texto { width: 100%; justify-content: center; }
  .barra-aviso .botao { flex: 1 1 auto; }
}

/* --------------------------------------------- relatorio de uma pessoa
 * Lista de dias, nao calendario: aqui so aparece dia que TEM visita, entao a estrutura
 * pode ser uma lista simples. No celular ela nao muda de forma - ja nasce vertical, que e
 * o formato certo nas duas larguras. */
.rel-dias { display: flex; flex-direction: column; gap: .5rem; }

.rel-dia {
  border: 1px solid var(--borda);
  border-radius: .6rem;
  padding: .6rem .75rem;
  background: var(--superficie);
}
/* Mesma pista da home e do calendario: o que ja passou fica esmaecido, sem sumir. */
.rel-dia.passado { opacity: .55; }
.rel-dia.hoje { border-color: var(--hoje); box-shadow: inset 0 0 0 1px var(--hoje); }

.rel-dia-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rel-dia-cab strong { font-family: var(--mono); font-size: .95rem; }
.rel-dia-semana { color: var(--texto-fraco); font-size: .85rem; }

.rel-visita {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .35rem 0;
  border-top: 1px dashed var(--borda);
}
.rel-visita:first-of-type { border-top: 0; }
.rel-hora { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.rel-unidade { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
/* Quem faz a visita - só aparece no relatório GERAL (23/09/2026). No de uma pessoa o nome
   dela já é o título da folha. Fica logo depois do horário porque, no Geral, "quem" é o
   que muda de linha para linha; a unidade vem em seguida, com a bolinha que a identifica.
   Sem negrito de propósito: o negrito ali é da UNIDADE, e dois pesos iguais lado a lado
   fariam a linha perder a hierarquia.
   ⚠️ Mas na COR normal, e não na fraca: com `--texto-fraco` o nome ficava mais apagado que
   todo o resto da linha - justamente no relatório em que ele é a informação que muda de
   linha para linha. Só se viu isso olhando a tela. */
.rel-pessoa { font-size: .9rem; color: var(--texto); white-space: nowrap; }
/* A visita com falta fica riscada, igual na escala: o dia continua na lista (aconteceu
   algo naquele dia), mas nao conta como cumprida. */
.rel-visita.faltou .rel-hora,
.rel-visita.faltou .rel-pessoa,
.rel-visita.faltou .rel-unidade { text-decoration: line-through; opacity: .7; }
.rel-obs { width: 100%; font-size: .8rem; color: var(--texto-fraco); }

.rel-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-bottom: .9rem; }
/* Só existe no papel. Na tela seria repetir o cabeçalho do painel, que está logo acima. */
.so-impressao { display: none; }

/* ------------------------------------------------- impressão / "Baixar PDF"
 * O botão "Baixar PDF" chama a impressão do navegador, e é ela quem gera o arquivo. Não
 * embutimos biblioteca de PDF: seriam ~200KB num painel que não tem framework nem build,
 * e o resultado sairia pior - a impressão do navegador já quebra página, respeita o
 * tamanho do papel e funciona em qualquer aparelho.
 *
 * O que esta folha faz é deixar SÓ o relatório na página: sem cabeçalho do painel, sem
 * barra de botões, sem a própria barra de filtros. */
@media print {
  /* Esconde tudo, camada por camada, até sobrar o relatório. Feito por exclusão
     (`:not`) e não listando o que sai: assim uma tela nova criada depois já nasce fora
     da impressão, em vez de aparecer no meio do relatório de alguém. */
  body > *:not(#telaPainel) { display: none !important; }
  /* Sobra so a tela marcada como `imprimivel` que estiver aberta - a outra ja esta
     escondida por `.oculto`, que tem !important. Assim os dois relatorios usam esta
     mesma folha, e um relatorio novo so precisa da classe para nascer imprimivel. */
  #telaPainel > *:not(.imprimivel) { display: none !important; }
  .nao-imprime { display: none !important; }
  /* Timbre da folha: a logo e a linha que identifica o relatorio, lado a lado. Vira uma
     faixa com filete embaixo, que e o que separa o timbre do conteudo no papel. */
  .so-impressao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    padding-bottom: .5rem;
    border-bottom: 1pt solid #999;
    font-size: .8rem;
  }
  /* ⚠️ `background: none` de proposito: no tema escuro a logo tem uma placa clara atras
     (`--logo-fundo`), que no papel viraria um retangulo cinza em volta do escudo. A folha
     ja e branca, entao a placa nao serve para nada aqui.
     ⚠️ `print-color-adjust: exact` porque o azul-marinho e o dourado SAO a marca: sem
     isso o navegador pode economizar tinta e mandar o escudo em cinza. */
  .logo-impressa {
    height: 14mm;
    width: auto;
    background: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ⚠️ A FOLHA E BRANCA, mesmo com o painel no tema escuro. Sem esta linha o
     `color-scheme: dark` do tema faz o navegador pintar a AREA DA PAGINA de escuro
     quando a pessoa liga "graficos de fundo" na impressao - o relatorio sai com uma
     moldura preta em volta e gasta tinta a toa. O `background` nao basta sozinho: quem
     escurece a area da pagina e o color-scheme.
     O `!important` e necessario, nao preguica: quem liga o esquema escuro e
     `html[data-tema="escuro"]`, que tem especificidade maior que um `html` simples - e
     estar dentro de `@media print` nao acrescenta especificidade nenhuma. */
  html { color-scheme: light !important; background: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .imprimivel .cartao { border: 0; box-shadow: none; padding: 0; background: #fff; }
  .rel-kpi { break-inside: avoid; page-break-inside: avoid; }
  .tabela-fin { break-inside: auto; }
  .tabela-fin tr { break-inside: avoid; page-break-inside: avoid; }
  .tabela-fin thead { display: table-header-group; }   /* repete o cabecalho por folha */
  #relTitulo { font-size: 15pt; margin: 0 0 .2rem; }

  /* Um dia não pode ser cortado ao meio pela quebra de página: metade do compromisso numa
     folha e metade na outra é o tipo de erro que faz alguém ir ao lugar errado. */
  .rel-dia { break-inside: avoid; page-break-inside: avoid; border-color: #999; opacity: 1 !important; }
  .rel-dia.hoje { box-shadow: none; }

  /* O navegador tira cor de fundo ao imprimir, para poupar tinta - o que apagaria a
     bolinha da unidade, que é a única pista de qual lugar é. Isto pede que ela saia. */
  .bolinha { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a[href]::after { content: ""; }   /* sem colar URL no meio do texto */
  @page { margin: 14mm; }
}

/* ------------------------------------- relatorio financeiro do mes */
.rel-resumo { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0 1.25rem; }
.rel-kpi {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border: 1px solid var(--borda);
  border-radius: .6rem;
  padding: .6rem .75rem;
}
.rel-kpi-rotulo { font-size: .78rem; color: var(--texto-fraco); }
.rel-kpi-valor { font-size: 1.35rem; }
.rel-kpi-nota { font-size: .76rem; color: var(--texto-fraco); }
.rel-sub { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.rel-vazio { caption-side: top; text-align: left; color: var(--texto-fraco); font-size: .85rem; padding: .3rem 0; }

/* ------------------------------------------------------------------ menu */
.menu { position: relative; }

.menu-lista {
  position: absolute;
  right: 0;
  /* Sobrescrito por `.a-esquerda`, posto pelo JS quando abrir para a esquerda jogaria o
     menu para fora da tela. Acontece de verdade no celular: a barra quebra em linhas, o
     botão fica perto da borda esquerda e uma lista de 13rem não cabe à esquerda dele. */
  left: auto;
  top: calc(100% + .35rem);
  min-width: 13rem;
  /* Teto para o menu nao ultrapassar a tela. O bloco "Conectado como" trouxe o
     e-mail, que e longo e nao quebra - sem este limite o menu esticava ate 243px
     num celular de 390px e a pagina passava a rolar para o lado. Com o teto, o
     texto corta com reticencias em vez de empurrar a largura. */
  max-width: calc(100vw - 1.5rem);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .6rem;
  box-shadow: var(--sombra);
  padding: .3rem;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.menu-lista button {
  font: inherit;
  font-size: .88rem;
  text-align: left;
  /* Flex por causa dos itens do "Cadastrar", que levam ícone. Os do "Mais" não têm e
     ficam iguais a antes - sem ícone o `gap` não separa nada. */
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}
.menu-lista button:hover { background: var(--superficie-2); }

/* Bolinha vermelha com o numero de alertas. Aparece no botao da barra E no item de menu
   que leva ate o problema: so no botao, a pessoa abre o menu e nao sabe qual item olhar;
   so no item, ela nunca abre o menu para descobrir.
   ⚠️ Fundo vermelho CHAPADO com texto claro, e nao a cor `--perigo` como texto: aqui o
   selo precisa ser visto de relance, e no tema escuro o `--perigo` e um vermelho claro
   (#f87171) que ficaria fraco como preenchimento. Este vermelho e fixo nos dois temas
   justamente por isso - e sinal, nao paleta. */
.selo-alerta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  margin-left: .1rem;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
/* No item de menu ele vai para a PONTA DIREITA, longe do nome: dentro de uma lista o
   alinhamento e que diz "e este aqui". No botao da barra ele fica colado no texto, porque
   ali o botao inteiro e o alvo. */
.menu-lista button .selo-alerta { margin-left: auto; }
.menu-lista hr { border: 0; border-top: 1px solid var(--borda); margin: .3rem .2rem; }

/* Quem esta logado, logo acima do "Sair". Nao e item clicavel: sem `cursor: pointer` e sem
   realce no hover, para ninguem tentar clicar esperando alguma coisa. */
.menu-conta { display: flex; flex-direction: column; gap: .05rem; padding: .4rem .6rem .5rem; min-width: 0; }
.menu-conta-rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.menu-conta strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-lista.a-esquerda { right: auto; left: 0; }

/* ------------------------------------------------------------------ filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  padding: .75rem 1rem 0;
}
.filtro { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--texto-fraco); }
.filtro select { min-width: 10rem; }
.contador { margin-left: auto; font-size: .8rem; color: var(--texto-fraco); }

/* ------------------------------------------------------------------ grade
 * A home mostra DUAS semanas: a de hoje e a seguinte. Cada semana e uma grade de 7
 * colunas; no celular vira uma lista de dias, um embaixo do outro. */
.duas-semanas { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }

/* ------------------------------------------------- gráfico do mês na home (28/09/2026)
 * Um dia por barra, o mês inteiro, logo abaixo da "Próxima semana". As barras são
 * empilhadas por estado: realizada embaixo, depois o que ainda vai acontecer, e a falta
 * em cima - a ordem é a do tempo, do que já é fato para o que ainda não é.
 *
 * ⚠️ As cores aqui distinguem ESTADO, e não grandeza. A regra de "uma cor só" do gráfico
 * do Financeiro continua valendo lá: ali as barras comparam unidades entre si, e oito
 * cores esconderiam qual é a maior. Aqui cada cor quer dizer uma coisa diferente. */
/* Um respiro maior que o `gap` das semanas: ali em cima muda o assunto - sai "os próximos
   dias" e entra "o mês fechado". Sem isso o gráfico parece uma terceira semana. */
.grafico-mes { margin-top: .5rem; }
.gm-cartao { display: flex; flex-direction: column; gap: .6rem; }
.gm-resumo { margin: 0; font-size: .95rem; }
.gm-resumo strong { font-size: 1.6rem; color: var(--primaria); margin-right: .25rem; }

.gm-selos { display: flex; flex-wrap: wrap; gap: .4rem; }
.gm-selo {
  font-size: .74rem;
  padding: .15rem .45rem;
  border-radius: .4rem;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.gm-selo { display: inline-flex; align-items: center; gap: .3rem; }
.gm-selo.falta { border-color: var(--perigo); color: var(--perigo); }
/* O quadradinho que liga o selo à barra. Sem ele o gráfico tem três cores e nada dizendo
   o que cada uma quer dizer - o número grande explica só a primeira. */
.gm-cor { width: .55rem; height: .55rem; border-radius: 2px; flex: none; }
.gm-cor.futura { background: none; border: 1.5px solid var(--primaria); }
.gm-cor.falta { background: var(--perigo); }

/* As barras. `align-items: end` faz a coluna crescer de baixo para cima, que é como se lê
   um gráfico - sem isso a pilha desceria do topo. */
.gm-barras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 2px;
  height: 84px;
  padding-top: .2rem;
}
.gm-dia {
  display: flex;
  flex-direction: column-reverse;   /* a primeira parte inserida fica EMBAIXO */
  justify-content: flex-start;
  height: 100%;
  border-radius: 2px;
}
/* Dia sem visita nenhuma continua ocupando a coluna, com um risco no pé: some a estrutura
   e o mês vira um gráfico de buracos sem escala. É a mesma regra de "estado vazio
   acompanha a estrutura" que vale no calendário. */
.gm-dia::after {
  content: '';
  height: 2px;
  background: var(--borda);
  border-radius: 2px;
}
/* `border-box` para a borda da barra vazada caber DENTRO da altura que o JS calcula -
   senão a barra do "vai acontecer" ficaria 3px mais alta que a do mesmo número. */
.gm-parte { display: block; border-radius: 2px; min-height: 3px; box-sizing: border-box; }
.gm-parte.realizada { background: var(--primaria); }
/* O que ainda vai acontecer é a MESMA cor, mas VAZADA - cheio x contorno é a diferença
   entre fato e previsão, e é a linguagem que o painel já usa nos botões (`.destaque` e
   `.perigo` são borda e texto na cor, sem preencher).
   ⚠️ Nasceu como a mesma cor com `opacity: .35`, e a MEDIÇÃO derrubou: aquilo dava 1,65:1
   contra o fundo no tema escuro (2,13:1 no claro), e elemento gráfico precisa de 3:1. O
   contorno resolve porque a borda é a cor cheia. */
.gm-parte.futura { background: none; border: 1.5px solid var(--primaria); }
.gm-parte.falta { background: var(--perigo); }
/* O dia de hoje ganha um pé mais forte, para a pessoa se localizar no mês num relance. */
.gm-dia.hoje::after { background: var(--hoje); height: 3px; }

.gm-eixo {
  display: grid;
  font-size: .68rem;
  color: var(--texto-fraco);
  font-family: var(--mono);
}
.gm-eixo span { text-align: center; }
.gm-vazio { margin: 0; }

@media (max-width: 560px) {
  /* No celular o mês inteiro continua cabendo: 31 colunas de ~9px. O que encolhe é a
     altura, porque ali a tela é toda vertical e a grade das semanas vem antes. */
  .gm-barras { height: 64px; gap: 1px; }
}

.semana-titulo {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-fraco);
}
.semana-titulo .periodo { font-weight: 400; font-family: var(--mono); font-size: .76rem; }

.grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .6rem;
  align-items: start;
}

.dia {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .7rem;
  overflow: hidden;
  min-width: 0;
}
.dia.hoje { border-color: var(--hoje); box-shadow: 0 0 0 1px var(--hoje); }

.dia-cabecalho {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}
.dia-nome { font-weight: 600; font-size: .82rem; }
/* O numero do dia do mes fica ao lado do nome: sem ele a pessoa ve "Segunda" e nao sabe
   QUAL segunda esta olhando - o que era exatamente o problema da escala so semanal. */
.dia-data { font-family: var(--mono); font-size: .78rem; color: var(--texto-fraco); }
.dia.hoje .dia-data { color: var(--hoje); font-weight: 600; }
.dia.passado { opacity: .62; }
.dia-selo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--hoje);
  border: 1px solid currentColor;
  border-radius: .25rem;
  padding: 0 .25rem;
}
.dia-qtd { margin-left: auto; font-size: .72rem; color: var(--texto-fraco); font-family: var(--mono); }

.dia-corpo { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; }
.dia-vazio { color: var(--texto-fraco); font-size: .78rem; padding: .4rem .2rem; }

.visita {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--cor-unidade, var(--primaria));
  border-radius: .45rem;
  padding: .45rem .55rem;
}
.visita:hover { border-color: var(--texto-fraco); border-left-color: var(--cor-unidade, var(--primaria)); }
.visita:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }

.visita-hora { font-family: var(--mono); font-size: .78rem; font-weight: 600; }
.visita-mais1 {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 700;
  vertical-align: super;
  color: var(--texto-fraco);
  border: 1px solid currentColor;
  border-radius: .2rem;
  padding: 0 .15rem;
  margin-left: .2rem;
}
.visita-unidade { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.visita-colab { font-size: .76rem; color: var(--texto-fraco); overflow-wrap: anywhere; }
.visita-obs { font-size: .72rem; color: var(--texto-fraco); margin-top: .2rem; overflow-wrap: anywhere; }

/* Celular: a semana vira lista. Sete colunas de 50px nao se leem. */
@media (max-width: 900px) {
  .duas-semanas { padding: .75rem; }
  .grade { grid-template-columns: 1fr; }
  .topo-acoes { width: 100%; margin-left: 0; }
  .topo-acoes .botao { flex: 1 1 auto; }
  .filtro select { min-width: 0; width: 100%; }
  .filtro { flex: 1 1 45%; }
}

/* ------------------------------------------------------------------ campos */
.campo {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .85rem;
  border: 0;
  padding: 0;
}
.campo > span { font-size: .78rem; color: var(--texto-fraco); }

input[type="text"], input[type="email"], input[type="password"], input[type="time"],
input[type="file"], select, textarea {
  font: inherit;
  font-size: .95rem;
  padding: .5rem .6rem;
  min-height: 2.6rem;                 /* nao encolhe no toque */
  border: 1px solid var(--borda);
  border-radius: .45rem;
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: -1px;
  border-color: var(--primaria);
}
input[type="time"] { font-family: var(--mono); }
textarea { resize: vertical; }

/* Campo TRAVADO tem que parecer travado. O navegador esmaece o texto de um `disabled`, mas
   isso e sutil demais no tema claro e some de vez no escuro: os campos de horario travados
   pela caixa "usar o horario padrao" ficavam identicos aos livres, e so tentando clicar se
   descobria. Aqui o fundo muda junto, que e a pista que se ve de relance.
   ⚠️ Vale para o painel inteiro, e nao so para aqueles dois: qualquer campo desabilitado
   daqui para a frente ja nasce com a pista certa. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--superficie-2);
  color: var(--texto-fraco);
  cursor: not-allowed;
  border-style: dashed;
}

/* ------------------------------------------------- ver a senha digitada
 * Um olho dentro do campo de senha. Existe porque senha e o unico campo em que a pessoa
 * digita as cegas - e aqui isso custa caro: quatro erros seguidos TRAVAM a conta, e boa
 * parte do uso e no celular, onde errar tecla e mais facil.
 *
 * A caixa e criada pelo JS em volta de todo `input[type=password]`, entao campo de senha
 * novo ja nasce com o olho, sem ninguem lembrar de ligar. */
.senha-caixa { position: relative; display: flex; }
.senha-caixa > input { padding-right: 2.75rem; }
.senha-olho {
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
}
.senha-olho:hover { color: var(--texto); }
.senha-olho:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
/* O icone dentro do botao volta a receber clique: o `.icone` geral tem
   `pointer-events: none` por causa da delegacao da barra, e aqui o tratador e do proprio
   botao - sem isto o alvo do toque no celular ficaria menor que o desenho. */
.senha-olho .icone { width: 1.15rem; height: 1.15rem; pointer-events: none; }

/* Marcas que o campos.js aplica */
input.invalido { border-color: var(--perigo); }
input.valido { border-color: #16a34a; }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.cidade-uf { display: grid; grid-template-columns: 1fr auto 3.5rem; align-items: center; gap: .3rem; }
.cidade-uf .barra { color: var(--texto-fraco); }

.cores { display: flex; flex-wrap: wrap; gap: .4rem; }
.cor {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.cor[aria-pressed="true"] { border-color: var(--texto); box-shadow: 0 0 0 2px var(--superficie) inset; }

.dica { font-size: .74rem; color: var(--texto-fraco); }

/* O que foi lido do arquivo de escala (23/09/2026). Nao e erro nem aviso: e confirmacao,
   entao usa a cor da marca e nao o vermelho. Fica logo abaixo do campo de arquivo, porque
   o input e limpo depois da leitura (para dar para reescolher o MESMO arquivo) e sem esta
   linha nao sobraria nenhuma pista de qual planilha entrou. */
.dica.lido-do-arquivo { color: var(--primaria); font-weight: 600; margin-top: .25rem; }

/* Escolher arquivo (23/09/2026). O input nativo sai de vista e o <label> vira o botao.
   ⚠️ Recortado, e NAO `display: none`: escondido de verdade, o campo sairia da ordem de
   tabulacao e o teclado nunca chegaria nele. Assim ele continua focavel, e o anel de foco
   e desenhado no rotulo, que e o que a pessoa ve. */
/* ⚠️ `position: relative` aqui NAO e enfeite: sem ele o input absoluto se posiciona pelo
   ancestral posicionado mais distante e fica na posicao estatica dele, 19px FORA da
   janela no celular - medido. O `left: 0` prende a ponta no comeco do bloco. */
.escolher-arquivo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; position: relative; }
.arquivo-recortado {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  clip-path: inset(50%);
}
/* O rotulo vem DEPOIS do input no HTML so por causa deste seletor. */
.arquivo-recortado:focus-visible + .botao { outline: 2px solid var(--primaria); outline-offset: 2px; }
/* <label> e inline por padrao, e `min-height` nao pega em inline - sem isto o botao sai
   mais baixo que os outros do painel e perde o alvo de toque no celular. */
label.botao { display: inline-flex; align-items: center; justify-content: center; }
.erro { font-size: .82rem; color: var(--perigo); margin: .3rem 0 .6rem; }

.aviso {
  font-size: .82rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: .5rem;
  padding: .6rem .7rem;
  margin: 0 0 1rem;
}
.aviso code { font-family: var(--mono); font-size: .95em; }

/* Convite acima da grade (escala vazia, ou filtro que nao achou nada). Nunca substitui
   a grade: a semana de segunda a domingo fica sempre visivel. */
.convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: .85rem 1rem 0;
  padding: .7rem .9rem;
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: .6rem;
  color: var(--texto-fraco);
  font-size: .88rem;
}
/* O empurrao para a direita fica no TEXTO, e nao no botao. Da no mesmo com um botao so, e
   continua certo se um dia voltar a ter dois: com `margin-left: auto` em CADA botao, os
   dois dividiriam o espaco livre entre si e ficariam separados no meio da barra, em vez de
   juntos na ponta. (Aconteceu quando o convite teve dois botoes, em 28/08/2026.) */
.convite > span { margin-right: auto; }

@media (max-width: 900px) {
  .convite { margin: .75rem .75rem 0; }
  .convite .botao { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------------ janelas */
.janela {
  border: 1px solid var(--borda);
  border-radius: .8rem;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  width: min(32rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}
.janela.larga { width: min(44rem, calc(100vw - 1.5rem)); }
.janela.estreita { width: min(24rem, calc(100vw - 1.5rem)); }
.janela::backdrop { background: rgb(2 6 23 / .55); }
.janela h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.janela h3 { margin: 1.25rem 0 .6rem; font-size: .92rem; }

.janela-cabecalho { display: flex; align-items: center; gap: .5rem; }
.janela-cabecalho h2 { flex: 1; margin-bottom: 1rem; }

.janela-rodape { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }

.bloco-formulario {
  border-top: 1px solid var(--borda);
  margin-top: 1.25rem;
  padding-top: .25rem;
}

/* ------------------------------------------------------------------ listas */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.lista li {
  display: flex;
  /* ⚠️ `wrap` NAO e enfeite: o botao tem `white-space: nowrap` e nao encolhe abaixo do
     proprio texto. Numa conta TRAVADA a linha ganha um terceiro botao (Liberar + Senha
     temporária + Tirar acesso), e no celular os tres passavam 51px para fora da janela -
     a linha saia desalinhada e a janela ganhava rolagem lateral. Com `wrap` os botoes
     descem para a linha de baixo quando nao cabem, em vez de vazar. */
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border: 1px solid var(--borda);
  border-radius: .5rem;
  background: var(--superficie-2);
}
/* Bolinha da cor da unidade. Regra BASE, e nao uma copia por tela: ela ja estava
   repetida em tres lugares, e o relatorio (a quarta tela a usar) nasceu sem tamanho -
   um <span> de 0x0, invisivel, que nenhum teste de clique pegaria. */
.bolinha { width: .9rem; height: .9rem; border-radius: 50%; flex: 0 0 auto; }
/* Base de 10rem: e o que decide QUANDO os botoes descem. Com base 0 (o `flex: 1` antigo)
   o texto contava como largura zero na conta do navegador, e os botoes tentavam caber na
   mesma linha sempre - inclusive quando nao cabiam. */
.lista .corpo { flex: 1 1 10rem; min-width: 0; }
/* ⚠️ SO na lista de ACESSOS, e nao em `.lista` inteira: ali cada linha tem DOIS ou TRES
   botoes (Liberar + Senha temporária + Tirar acesso numa conta travada), e sem isto eles
   quebram um a um conforme vao sobrando - um em cima, dois embaixo. Com o texto ocupando a
   linha inteira, a quebra e sempre no mesmo lugar.
   Nas outras listas cada linha tem UM botao curto ("Editar"), que cabe ao lado do texto:
   aplicar isto la so deixaria toda linha mais alta no celular, sem resolver nada. */
@media (max-width: 560px) {
  #listaUsuarios .corpo { flex-basis: 100%; }
}
.lista .titulo { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.lista .sub { font-size: .76rem; color: var(--texto-fraco); overflow-wrap: anywhere; }
.lista .vazio-item { justify-content: center; color: var(--texto-fraco); font-size: .84rem; }

/* ------------------------------------------------------------------ importar */
.resumo { font-size: .88rem; }
.opcoes { display: flex; flex-direction: column; gap: .35rem; }
.opcoes label { display: flex; align-items: center; gap: .45rem; font-size: .86rem; cursor: pointer; }
.opcoes input[type="radio"] { width: auto; min-height: 0; }

.tabela-rolagem { overflow-x: auto; margin: .6rem 0; }
.tabela { border-collapse: collapse; font-size: .82rem; width: 100%; }
.tabela th, .tabela td { border: 1px solid var(--borda); padding: .35rem .5rem; text-align: left; white-space: nowrap; }
.tabela th { background: var(--superficie-2); font-weight: 600; }
.tabela td.num { font-family: var(--mono); text-align: right; }
.tabela .escolhida { background: color-mix(in srgb, var(--primaria) 14%, transparent); }

/* ------------------------------------------------------------------ financeiro
 *
 * Regras de leitura seguidas aqui, e o porque:
 * - KPI e NUMERO, nao grafico. Quatro valores-cabeca viram quatro cartoes, nunca
 *   quatro barras: uma barra sozinha nao compara com nada.
 * - O grafico de faturamento por unidade compara GRANDEZA, entao usa UMA cor so.
 *   Cor por unidade ali seria identidade repetida - o nome ja esta escrito na barra,
 *   e oito cores competindo esconderiam qual e a maior, que e a pergunta do grafico.
 *   A bolinha colorida ao lado do nome amarra com a grade, sem a barra carregar isso.
 * - Texto nunca veste a cor do dado: valor e rotulo usam a cor de texto normal.
 */
.financeiro { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.fin-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }

/* Navegacao do mes como um BLOCO SO. As setas coladas no campo dizem que elas mexem
   naquele campo; soltas na barra, com o mesmo `gap` de tudo, elas pareciam botoes
   independentes. O `gap` menor aqui dentro e o que separa o grupo do resto da barra. */
.grupo-mes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem; }
/* Seta e um simbolo, nao uma palavra: sem isto ela herda o padding de um botao de texto e
   fica larga e vazia no meio. A altura minima continua a mesma, para o alvo de toque no
   celular nao encolher. */
.botao.seta { padding: .45rem .6rem; font-size: 1.05rem; line-height: 1; }

/* Destaque leve, para acao secundaria: a cor da marca so na borda e no texto. Mesmo
   desenho do `.perigo`, que ja fazia isso com o vermelho - um segundo jeito de dizer
   "botao colorido" um dia divergiria do primeiro.
   ⚠️ NAO e preenchido de proposito: preenchido competiria com o `.primario`, que e a acao
   principal da tela. */
.botao.destaque { background: transparent; color: var(--primaria); border-color: currentColor; font-weight: 600; }
.botao.destaque:hover { border-color: currentColor; filter: brightness(1.15); }
.fin-barra input[type="month"] { min-width: 11rem; font-family: var(--mono); }
.fin-periodo { font-size: .8rem; color: var(--texto-fraco); margin-left: auto; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .7rem;
  padding: 1rem;
}
.cartao h2 { margin: 0 0 .2rem; font-size: 1rem; }
.cartao .dica { margin: 0 0 .9rem; }

/* --- KPIs --- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }

.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .7rem;
  padding: .8rem .9rem;
  min-width: 0;
}
.kpi-rotulo { font-size: .76rem; color: var(--texto-fraco); }
.kpi-valor {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: .15rem;
  overflow-wrap: anywhere;
}
.kpi-valor.negativo { color: var(--perigo); }
.kpi-nota { font-size: .74rem; color: var(--texto-fraco); margin-top: .15rem; }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-valor { font-size: 1.3rem; }
  .financeiro { padding: .75rem; }
}

/* --- grafico de barras horizontais --- */
.grafico { display: flex; flex-direction: column; gap: .55rem; }

.barra-linha { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr; gap: .6rem; align-items: center; }
.barra-nome { display: flex; align-items: center; gap: .4rem; font-size: .82rem; min-width: 0; }
.barra-nome .bolinha { width: .7rem; height: .7rem; }   /* menor: a barra e estreita */
.barra-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.barra-trilho { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.barra-fundo { flex: 1; background: var(--superficie-2); border-radius: 0 4px 4px 0; min-width: 0; }
.barra-valor-marca {
  height: 20px;                       /* <= 24px: barra fina, o resto da faixa e ar */
  background: var(--primaria);
  border-radius: 0 4px 4px 0;         /* ponta arredondada, quadrada na base */
  min-width: 2px;
}
.barra-numero { font-family: var(--mono); font-size: .78rem; white-space: nowrap; }

.barra-linha:hover .barra-valor-marca { filter: brightness(1.1); }
.barra-linha { cursor: default; }

@media (max-width: 700px) {
  .barra-linha { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- tabelas do financeiro --- */
.tabela-fin { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela-fin th, .tabela-fin td { padding: .45rem .55rem; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela-fin th { font-size: .76rem; color: var(--texto-fraco); font-weight: 600; }
.tabela-fin td.num, .tabela-fin th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;  /* coluna de numero alinha; valor solto nao usa */
}
.tabela-fin tr:last-child td { border-bottom: 0; }
/* Explica de onde vem um numero que nao e so diarias x valor. */
.sub-tabela { font-size: .72rem; color: var(--texto-fraco); margin-top: .1rem; }
.tabela-fin .vazia { color: var(--texto-fraco); text-align: center; padding: 1rem; }

/* --- valores por unidade --- */
.fin-unidades { display: flex; flex-direction: column; gap: .5rem; }

/* Um bloco por unidade: em cima o que ELA rende, embaixo quanto se paga a cada pessoa
   que vai ali. Desde 08/08/2026 o custo e por pessoa, entao "uma linha por unidade" nao
   dava mais conta. */
.fin-bloco {
  border: 1px solid var(--borda);
  border-radius: .5rem;
  background: var(--superficie-2);
  overflow: hidden;
}
.fin-bloco .fin-unidade { border: 0; border-radius: 0; background: transparent; }

.fin-pessoas { border-top: 1px solid var(--borda); padding: .55rem .65rem .65rem; }
.fin-pessoas-titulo {
  font-size: .78rem;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

.fin-pessoa {
  display: grid;
  grid-template-columns: 1fr 8rem auto;
  gap: .5rem;
  align-items: center;
  padding: .3rem 0;
}
.fin-pessoa .quem { font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-pessoa input { font-family: var(--mono); }
.fin-pessoa .campo { margin-bottom: 0; }
/* O campo da pessoa nao repete rotulo: o titulo da secao ja diz o que e, e um "Pago por
   diária" em cada linha viraria ruido. */
.campo.sem-rotulo > span { display: none; }
/* ⚠️ Sem uso desde 08/08/2026, quando o gerente saiu da lista de "Valores por unidade" a
   pedido do Matheus - era a unica linha que a usava (o valor dele, que nao se digita).
   Mantida de proposito: nao removo estilo sem "pode remover", e ela volta a servir na hora
   em que alguem precisar mostrar um valor fixo, sem campo, nessa lista. */
.fin-pessoa-fixo { font-size: .85rem; font-family: var(--mono); color: var(--texto-fraco); }
/* A nota ocupa a linha inteira, embaixo, para nao espremer o nome nem o campo. */
.fin-pessoa-nota { grid-column: 1 / -1; font-size: .76rem; color: var(--texto-fraco); margin-top: -.15rem; }

.fin-unidade {
  display: grid;
  grid-template-columns: 1fr 8rem auto;
  gap: .6rem;
  align-items: end;
  padding: .6rem .65rem;
  border: 1px solid var(--borda);
  border-radius: .5rem;
  background: var(--superficie-2);
}
.fin-unidade .campo { margin-bottom: 0; }
.fin-unidade .nome { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; min-width: 0; }
.fin-unidade input { font-family: var(--mono); }

@media (max-width: 700px) {
  .fin-unidade { grid-template-columns: 1fr 1fr; }
  .fin-unidade .nome { grid-column: 1 / -1; }
  .fin-unidade .acao { grid-column: 1 / -1; }
  .fin-unidade .acao .botao { width: 100%; }
  /* No celular o nome ocupa a linha e o campo divide a de baixo com o botao: em uma linha
     so, o campo de dinheiro ficaria estreito demais para digitar com o dedo. */
  .fin-pessoa { grid-template-columns: 1fr auto; }
  .fin-pessoa .quem { grid-column: 1 / -1; font-weight: 600; }
  .fin-pessoa .campo { width: 100%; }
}

.fin-rodape { padding: 0 .2rem 1rem; }

/* ------------------------------------------------------------------ calendario do mes
 * Mes inteiro em grade de 7 colunas. Cada celula e um DIA DE CALENDARIO, com o numero
 * grande - a escala e recorrente, mas quem olha precisa saber que dia 12 e uma quinta.
 * No celular a grade vira lista: 7 colunas de 50px nao se leem, e um mes tem 5 linhas. */
.mes { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }

.cal-cabecalho {
  font-size: .74rem;
  font-weight: 600;
  color: var(--texto-fraco);
  text-align: center;
  padding: .2rem 0;
}

.cal-dia {
  min-height: 5.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .5rem;
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.cal-dia.vazio { background: transparent; border-color: transparent; }
.cal-dia.hoje { border-color: var(--hoje); box-shadow: 0 0 0 1px var(--hoje); }
.cal-dia.passado { opacity: .6; }
.cal-dia.fds { background: var(--superficie-2); }

.cal-numero { font-family: var(--mono); font-size: .8rem; font-weight: 600; }
/* No PC o dia da semana ja esta no cabecalho da coluna: repetir em cada celula so
   polui. No celular a grade vira lista e ai ele volta (ver a media query abaixo). */
.cal-numero .dia-data { display: none; }
.cal-dia.hoje .cal-numero { color: var(--hoje); }
.cal-numero .selo-hoje {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid currentColor;
  border-radius: .2rem;
  padding: 0 .2rem;
  margin-left: .25rem;
}

/* Pista discreta de que da para tocar no dia vazio. Some no PC, onde o cursor ja diz. */
.cal-vazio-pista {
  display: none;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  color: var(--texto-fraco);
  margin-left: .4rem;
}
@media (max-width: 900px) {
  .cal-dia.sem-visita .cal-vazio-pista { display: inline; }
}

.cal-visita {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-unidade, var(--primaria));
  border-radius: .3rem;
  padding: .2rem .3rem;
  min-width: 0;
}
.cal-visita:hover { border-color: var(--texto-fraco); }
.cal-visita:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.cal-hora { font-family: var(--mono); font-size: .68rem; font-weight: 600; }
.cal-nome {
  font-size: .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-fraco);
}

@media (max-width: 900px) {
  .mes { padding: .75rem; }
  /* Lista de dias, TODOS eles. Cheguei a esconder os dias sem visita para poupar
     rolagem, e estava errado por dois motivos: a pessoa precisa ver o formato do mes que
     vai preencher (a mesma regra da semana sempre visivel), e tocar num dia vazio e o
     caminho para cadastrar visita nele - escondendo o dia, some a funcao.
     O meio-termo e o dia vazio ficar COMPACTO: uma linha fina, so o numero. */
  .calendario { grid-template-columns: 1fr; gap: .35rem; }
  .cal-cabecalho { display: none; }
  .cal-dia { min-height: 0; }
  .cal-dia.vazio { display: none; }        /* estas nao sao dias: so alinham a grade */
  .cal-dia.sem-visita { padding: .3rem .5rem; opacity: .75; }
  .cal-dia.sem-visita .cal-numero { font-weight: 400; }
  .cal-numero .dia-data { display: inline; }
  .cal-nome { white-space: normal; }
}

/* ------------------------------------------------------------------ presenca
 * Tela de campo: um dia por vez, alvo grande, dois toques por visita. No celular os
 * botoes ocupam a largura toda - marcar presenca com o dedo, andando, nao combina com
 * botao pequeno. */
.presenca { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.presenca-lista { display: flex; flex-direction: column; gap: .55rem; }

.presenca-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .7rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--cor-unidade, var(--primaria));
  border-radius: .6rem;
}
.presenca-item.marcado-presente { border-color: #16a34a; border-left-color: var(--cor-unidade, var(--primaria)); }
.presenca-item.marcado-falta { border-color: var(--perigo); border-left-color: var(--cor-unidade, var(--primaria)); }

.presenca-info { min-width: 0; }
.presenca-hora { font-family: var(--mono); font-size: .78rem; font-weight: 600; }
.presenca-unidade { font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.presenca-colab { font-size: .8rem; color: var(--texto-fraco); overflow-wrap: anywhere; }
.presenca-quem { font-size: .72rem; color: var(--texto-fraco); margin-top: .2rem; }

.presenca-botoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.presenca-botoes .botao { min-width: 5.5rem; }
.botao.sim[aria-pressed="true"] { background: #15803d; color: #fff; border-color: transparent; font-weight: 600; }
.botao.nao[aria-pressed="true"] { background: var(--perigo); color: #fff; border-color: transparent; font-weight: 600; }

@media (max-width: 700px) {
  .presenca { padding: .75rem; }
  .presenca-item { grid-template-columns: 1fr; }
  .presenca-botoes { width: 100%; }
  .presenca-botoes .botao { flex: 1; min-height: 2.8rem; }
}

/* Linha de confianca do numero do financeiro: quantas diarias estao confirmadas,
   quantas faltaram e quantas passaram sem ninguem marcar. */
.conferencia { font-size: .8rem; color: var(--texto-fraco); margin: 0; }
.conferencia .selo {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: .3rem;
  border: 1px solid var(--borda);
  margin-right: .35rem;
  font-family: var(--mono);
  font-size: .76rem;
}
.conferencia .selo.alerta { border-color: var(--perigo); color: var(--perigo); }

/* Senha temporaria: grande e monoespacada, porque quase sempre e ditada por telefone
   ou copiada a mao. */
.senha-temporaria {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: center;
  padding: .8rem;
  margin: .6rem 0;
  background: var(--superficie-2);
  border: 1px dashed var(--borda);
  border-radius: .5rem;
  overflow-wrap: anywhere;
}

/* Selo de conta travada na lista de acessos */
.selo-travado {
  display: inline-block;
  font-size: .72rem;
  padding: .05rem .4rem;
  border-radius: .3rem;
  border: 1px solid var(--perigo);
  color: var(--perigo);
  margin-right: .35rem;
}

/* Visita cuja falta foi registrada: some do faturamento, entao tem que sair da leitura
   normal da escala tambem - mas continua visivel, porque a visita estava marcada. */
.visita.faltou, .cal-visita.faltou {
  border-left-color: var(--perigo);
  opacity: .7;
}
.visita.faltou .visita-hora, .visita.faltou .visita-unidade,
.cal-visita.faltou .cal-hora { text-decoration: line-through; }

.selo-faltou {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--perigo);
  border: 1px solid currentColor;
  border-radius: .2rem;
  padding: 0 .2rem;
  margin-bottom: .2rem;
}
.cal-visita.faltou .cal-hora { color: var(--perigo); }

/* Sim/Nao em dois botoes na linha do rotulo (regra da casa: nunca um select). */
.sim-nao { display: flex; gap: .4rem; }
.sim-nao .botao { flex: 1; }

/* ------------------------------------------------------------------ recado */
.recado {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .6rem .9rem;
  border-radius: .5rem;
  background: var(--texto);
  color: var(--fundo);
  font-size: .86rem;
  box-shadow: var(--sombra);
}
.recado.ruim { background: var(--perigo); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .recado { animation: sobe .18s ease-out; }
  @keyframes sobe { from { opacity: 0; transform: translate(-50%, .5rem); } }
}

/* ---------------------------------------- previa da importacao de escala */
/* Uma linha por visita reconhecida. Fica numa caixa com rolagem propria: escala de mes
   inteiro passa de 30 linhas, e sem isso a janela cresceria ate estourar a tela do
   celular - e o botao "Confirmar" sumiria embaixo, que e justamente o que precisa
   estar a vista. */
.lista-previa {
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: .5rem;
  padding: .4rem .6rem;
  background: var(--superficie-2);
  font-size: .85rem;
}
.previa-linha { display: flex; align-items: center; gap: .4rem; padding: .18rem 0; flex-wrap: wrap; }
.previa-linha strong { font-family: var(--mono); font-size: .82rem; }
/* Diz quais linhas NAO traziam horario no arquivo: o horario delas foi decidido aqui, e a
   pessoa precisa saber disso antes de confirmar. */
.selo-padrao {
  font-size: .65rem;
  letter-spacing: .04em;
  padding: 0 .3rem;
  border: 1px solid var(--borda);
  border-radius: .25rem;
  color: var(--texto-fraco);
}
.lista-avisos { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--texto-fraco); }
.lista-avisos li { margin-bottom: .15rem; }
.linha-dupla { display: flex; gap: .75rem; flex-wrap: wrap; }
.linha-dupla .campo { flex: 1 1 8rem; }

/* ---------------------------------------- caixa de selecao */
/* Primeira do painel (11/09/2026), no "usar o horario padrao da unidade". Fica em LINHA,
   com a marca antes do texto - diferente do `.campo`, que empilha rotulo em cima do
   campo. Caixa de selecao com o rotulo em cima ficaria orfa do proprio texto. */
.campo-marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  font-size: .9rem;
  cursor: pointer;
}
/* Alvo de toque: a marca nativa tem ~13px, pequena demais para o dedo no celular. O
   `accent-color` faz o navegador pintar a marca com a cor da marca da MS, nos dois temas,
   sem desenhar um controle proprio - controle proprio perderia o comportamento nativo. */
.campo-marca input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--primaria);
  cursor: pointer;
  flex: none;
}
.campo-marca:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.campo-marca input[type="checkbox"]:disabled { cursor: not-allowed; }