/* ==========================================================================
   SOMA - Design System
   Geometria reta (sem cantos arredondados), elevacao em 3 niveis,
   paleta azul marinho / cinza / vermelho / branco / laranja.
   ========================================================================== */

:root{
  /* Geometria */
  --radius: 0;

  /* Azul marinho: chrome, navegacao e acao primaria */
  --navy-900: #0E1B30;
  --navy-800: #14233F;
  --navy-700: #1D3157;
  --navy-600: #2A4374;
  --navy-500: #3A5896;

  /* Cinza */
  --gray-700: #4A505A;
  --gray-500: #767D89;
  --gray-300: #B9BFC8;
  --gray-200: #DDE1E7;
  --gray-100: #EEF1F4;
  --gray-050: #F5F7F9;
  --white:    #FFFFFF;

  /* Texto */
  --ink: #101828;

  /* Vermelho: marca e destrutivo */
  --red:      #E30613;
  --red-dark: #B00510;
  --red-bg:   #FDECEC;

  /* Laranja: atencao */
  --orange:     #C25A00;
  --orange-500: #E8720C;
  --orange-bg:  #FDF2E4;

  /* Verde: exclusivo de etiqueta de status */
  --green:    #14713A;
  --green-bg: #E9F5ED;

  /* Elevacao - sombra tingida com o azul marinho, nunca preto puro */
  --shadow-1: 0 1px 2px rgba(14,27,48,.10), 0 2px 6px rgba(14,27,48,.08);
  --shadow-2: 0 2px 4px rgba(14,27,48,.12), 0 6px 14px rgba(14,27,48,.14);
  --shadow-3: 0 8px 24px rgba(14,27,48,.20);

  /* Largura util do sistema - todo conteudo se alinha ao centro da pagina */
  --largura: 1440px;

  /* Tipografia */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
}

/* --------------------------------------------------------------------------
   A cor da plataforma vem da empresa em gestao

   Trocar a cor do sistema inteiro e trocar cinco variaveis, nao repintar
   componente por componente: todo o chrome (barra, menu, botao primario, foco)
   sai da escala --navy-900..500. Uma pintura que precisasse editar cada regra
   ficaria pela metade no dia seguinte, quando alguem criasse uma tela nova sem
   lembrar da lista.

   Os cinco tons sao calculados a partir da UNICA cor escolhida no cadastro da
   empresa (ver emp_paleta em includes/empresa.php) e entram no atributo style
   do <html> - por sessao, porque quem manda e o CNPJ em gestao, e nao o
   navegador de quem esta olhando.
   -------------------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

/* O atributo hidden manda em qualquer display do componente.
   Sem isto, uma regra como .modal-largo{display:flex} vence o display:none
   do navegador e o modal nasce aberto por cima da tela. */
[hidden]{ display:none !important; }

/* O sistema e claro, e diz isso ao navegador.
   Sem esta linha, quem esta com o Windows (ou o Chrome) em modo escuro recebe
   as PECAS NATIVAS em escuro - a lista de opcoes do select, o calendario do
   campo de data, a barra de rolagem. O resultado e o que se via nos modais:
   campo branco, e a lista que abre dele preta. Estas pecas sao desenhadas pelo
   sistema operacional, e nao pelo CSS da pagina; color-scheme e o unico jeito
   de dizer a ele em que tema a pagina esta. */
html{ color-scheme:light; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-md);
  color:var(--ink);
  background:var(--gray-050);
  -webkit-font-smoothing:antialiased;
}

/* Numeros em tabela e valores: largura fixa por digito */
.num, td.num, .valor{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:right;
}

/* --------------------------------------------------------------------------
   Foco de teclado - obrigatorio e reto como o resto
   -------------------------------------------------------------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--navy-500);
  outline-offset:2px;
}
.tela-login :where(a,button,input):focus-visible{
  outline-color:var(--navy-600);
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font:inherit;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  background:var(--white);
  color:var(--navy-800);
  box-shadow:var(--shadow-1);
  transition:box-shadow .12s ease, transform .12s ease, background .12s ease;
}
.btn:hover{ box-shadow:var(--shadow-2); }
.btn:active{ box-shadow:var(--shadow-1); transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn-primary{
  background:var(--navy-600);
  color:var(--white);
  box-shadow:var(--shadow-2);
}
.btn-primary:hover{ background:var(--navy-500); }

.btn-danger{ background:var(--red); color:var(--white); }
.btn-danger:hover{ background:var(--red-dark); }

/* Plano: dentro de linha de tabela e barra de ferramenta */
.btn-ghost{
  background:var(--white);
  color:var(--navy-800);
  border-color:var(--gray-300);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--gray-100); box-shadow:none; }

.btn-bloco{ width:100%; }

/* Botao que mora dentro de uma linha de tabela: a altura e a da linha, e nao
   a do formulario - dois botoes de 44px numa celula empurram a tabela toda. */
.btn-mini{
  min-height:28px; padding:0 10px; font-size:var(--fs-xs); box-shadow:none;
}
.btn-mini + .btn-mini{ margin-left:6px; }

/* A escolha do vinculo antes da ficha: dois cartoes grandes, porque a pergunta
   e uma so e a resposta muda o formulario inteiro. */
.tc-escolha{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 2px; }
@media (max-width:560px){ .tc-escolha{ grid-template-columns:1fr; } }
.tc-opcao{
  display:block; text-align:left; cursor:pointer;
  padding:16px; border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); font:inherit; color:var(--ink);
}
.tc-opcao:hover{ border-color:var(--navy-600); background:var(--gray-100, #f2f4f7); }

/* ---- A escolha do tipo de contrato -------------------------------------
   Tres cards, e nao uma lista de radio: o que se escolhe aqui muda os campos
   da ficha seguinte, e uma escolha com consequencia merece o tamanho de um
   card. O icone vem antes do nome porque e por ele que a segunda vez se
   reconhece a opcao, sem reler as tres descricoes. */
.em-escolha{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:760px){ .em-escolha{ grid-template-columns:1fr; } }
.em-escolha .tc-opcao{ display:flex; flex-direction:column; gap:6px; }
.em-escolha .tc-opcao svg{
  width:26px; height:26px; color:var(--navy-600); margin-bottom:2px;
}
.em-escolha .tc-opcao strong{ font-size:var(--fs-md, 15px); }
.em-escolha .tc-opcao span{ color:var(--gray-500); font-size:var(--fs-sm, 13px); }

/* ---- A escolha do tipo de orcamento ------------------------------------
   Mesmos cards com icone, em dois: a pergunta e "conserto ou contrato?" e a
   resposta abre fichas diferentes. O card fica alto de proposito - e a unica
   coisa que a caixa pede, e um alvo pequeno numa caixa vazia parece erro. */
.om-escolha .tc-opcao{
  display:flex; flex-direction:column; gap:6px;
  align-items:center; text-align:center; padding:22px 16px;
}
.om-escolha .tc-opcao svg{
  width:30px; height:30px; color:var(--navy-600); margin-bottom:2px;
}
.om-escolha .tc-opcao strong{ font-size:var(--fs-md, 15px); }
.om-escolha .tc-opcao span{ color:var(--gray-500); font-size:var(--fs-sm, 13px); }

.or-acoes-propostas{ display:flex; gap:8px; align-items:center; }

/* A caixa da pergunta nao e ficha: sem os 820px do .modal-form, que deixariam
   dois cartoes perdidos no meio de um formulario vazio. */
.modal.modal-form.modal-estreito{ width:min(560px, calc(100vw - 32px)); }

/* ---- A escolha da modalidade -------------------------------------------
   Conservacao ou integral, nos dois lugares onde a pergunta e feita: no
   contrato e na proposta de manutencao. Estava dentro de um <style> da tela de
   contratos - de onde a proposta nao alcanca, e duas copias divergiriam
   justamente na frase que o cliente le antes de assinar.

   A caixa da escolha e mais larga que a ficha: dois cartoes lado a lado com
   texto de verdade dentro nao cabem na largura de um formulario. */
.modal-escolha{ max-width:900px; }

.ct-modo-grade{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 4px;
}
@media (max-width:720px){ .ct-modo-grade{ grid-template-columns:1fr; } }

/* O cartao inteiro e o botao - alvo grande, e nao um link no fim do texto. */
.ct-modo{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:18px 18px 16px; text-align:left; cursor:pointer;
  background:var(--surface, #fff); border:1.5px solid var(--gray-200, #E4E8ED);
  border-radius:10px; position:relative; overflow:hidden;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
/* A faixa da modalidade no topo: e a cor que identifica o contrato depois,
   no selo do PDF e no carimbo da carteira. */
.ct-modo:before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--gray-300, #C9D0D8);
}
.ct-modo-vermelho:before{ background:#E30613; }
.ct-modo-cinza:before{ background:#14181F; }

.ct-modo:hover, .ct-modo:focus-visible{
  border-color:var(--gray-400, #9AA5B1);
  box-shadow:0 10px 24px rgba(20, 24, 31, .10);
  transform:translateY(-2px);
}
.ct-modo-vermelho:hover, .ct-modo-vermelho:focus-visible{ border-color:#E30613; }
.ct-modo-cinza:hover, .ct-modo-cinza:focus-visible{ border-color:#14181F; }

/* Escolhida, ela FICA marcada: na proposta os dois cartoes continuam na tela
   embaixo da ficha, e cartao sem marca faria o vendedor rolar ate o campo para
   lembrar o que clicou. */
.ct-modo[aria-pressed="true"]{
  border-color:#14181F; box-shadow:0 10px 24px rgba(20, 24, 31, .12);
}
.ct-modo-vermelho[aria-pressed="true"]{ border-color:#E30613; }

.ct-modo-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; margin-bottom:2px;
  background:var(--gray-100, #F2F4F6); color:#14181F;
}
.ct-modo-vermelho .ct-modo-icone{ background:rgba(227, 6, 19, .10); color:#E30613; }
.ct-modo-icone svg{ width:23px; height:23px; }

.ct-modo-nome{
  font-size:15px; font-weight:700; letter-spacing:.6px; color:#14181F;
}
.ct-modo-vermelho .ct-modo-nome{ color:#E30613; }

.ct-modo-chamada{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
  color:var(--gray-500, #6B7683);
}
.ct-modo-resumo{
  font-size:12.5px; line-height:1.5; color:var(--gray-700, #3D4753); margin-top:2px;
}

.ct-modo-pontos{ display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.ct-modo-pontos span{
  font-size:12px; color:var(--gray-600, #55606E); padding-left:16px; position:relative;
}
.ct-modo-pontos span:before{
  content:'·'; position:absolute; left:5px; top:-1px;
  font-weight:700; color:var(--gray-400, #9AA5B1);
}

.ct-modo-acao{
  margin-top:12px; font-size:12px; font-weight:700; color:#14181F;
}
.ct-modo-vermelho .ct-modo-acao{ color:#E30613; }

/* A modalidade escolhida vira carimbo no cabecalho da ficha - quem esta
   preenchendo nao precisa rolar ate a lista para lembrar o que escolheu. */
.carimbo-modalidade{ background:#14181F; color:#fff; }
.carimbo-modalidade[data-modo="integral"]{ background:#E30613; }

/* ---- O titulo que troca a tabela ---------------------------------------
   Duas listas na mesma tela - orcamento de peca e proposta de manutencao -
   sem um seletor a mais: o nome do que se quer ver ja estava escrito, e e nele
   que se clica. O titulo inativo fica apagado e ganha cor ao passar o mouse;
   o ativo tem a barra vermelha embaixo, que e o que diz qual tabela esta na
   frente sem ter de olhar para a tabela. */
.titulo-abas{ display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; }

.titulo-aba{
  display:block; padding:0 0 8px; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:inherit; position:relative;
}
.titulo-aba h2{ margin:0; color:var(--gray-500, #6B7683); transition:color .15s; }
.titulo-aba .cl-resumo{ margin:2px 0 0; }
.titulo-aba:hover h2{ color:var(--ink); }

.titulo-aba:after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  border-radius:3px; background:transparent; transition:background .15s;
}
.titulo-aba.ativa h2{ color:var(--ink); }
.titulo-aba.ativa:after{ background:#E30613; }

@media (max-width:640px){
  .titulo-abas{ gap:14px; }
  .titulo-aba h2{ font-size:var(--fs-md, 15px); }
}

/* A linha que acabou de mudar sozinha - o cliente respondeu no celular dele e
   a tela trocou o carimbo sem recarregar. O realce e temporario de proposito:
   ele responde "onde aconteceu", e essa pergunta so existe nos primeiros
   segundos. Depois disso a linha volta a ser uma linha como as outras. */
@keyframes or-piscou{
  from{ background:#FFF6D6; }
  to{ background:transparent; }
}
.tabela tr.linha-nova > td{ animation:or-piscou 4s ease-out; }

/* ---- O que o cliente recebe (proposta de manutencao) --------------------
   O bloco existe na TELA, e nao so no PDF, porque quem preenche a proposta e
   quem vai defende-la no telefone: ler ali o que o sindico vai ler evita a
   venda combinar uma coisa e o documento dizer outra. */
.pm-bloco{
  margin:14px 0 4px; padding:14px 16px;
  background:var(--gray-100, #F2F4F6); border-radius:10px;
}
.pm-bloco h3{
  margin:0 0 2px; font-size:var(--fs-sm, 13px); font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:var(--gray-600, #55606E);
}
.pm-bloco .ajuda{ margin:0 0 10px; }

.pm-vantagens{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:0;
  list-style:none; padding:0;
}
@media (max-width:720px){ .pm-vantagens{ grid-template-columns:1fr; } }
.pm-vantagens li{ display:flex; gap:9px; align-items:flex-start; }
.pm-vantagens svg{ width:18px; height:18px; flex:none; margin-top:1px; color:#E30613; }
.pm-vantagens strong{ display:block; font-size:12.5px; color:#14181F; }
.pm-vantagens span{ display:block; font-size:11.5px; line-height:1.5; color:var(--gray-600, #55606E); }

/* As faixas em fita: quatro degraus lado a lado leem-se como escada, e uma
   lista vertical leria como quatro planos a escolher - e nao ha o que
   escolher, todo contrato entra no Bronze. */
.pm-faixas{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
@media (max-width:720px){ .pm-faixas{ grid-template-columns:1fr 1fr; } }
.pm-faixa{
  padding:10px 12px; background:var(--white, #fff);
  border:1px solid var(--gray-200, #E4E8ED); border-radius:8px;
  border-top:3px solid var(--gray-300, #C9D0D8);
}
.pm-faixa-vermelho{ border-top-color:#E30613; }
.pm-faixa strong{ display:block; font-size:13px; color:#14181F; }
.pm-faixa em{
  display:block; font-style:normal; font-size:11px; color:var(--gray-500, #6B7683);
}
.pm-faixa b{
  display:block; margin-top:5px; font-size:15px; color:#E30613;
}
.pm-faixa b span{ font-size:10px; font-weight:600; color:var(--gray-500, #6B7683); }

/* ---- A ficha de cada elevador ------------------------------------------
   Uma ficha por carro: "3" num campo de quantidade nao diz qual deles e o de
   carga, e e justamente isso que o tecnico precisa saber antes de subir.

   Cada ficha e um CARTAO, e nao uma linha de grade: ela tem seis campos, e
   uma grade fixa de colunas obrigava todos eles a caber lado a lado - a
   observacao ficava do tamanho de um numero de paradas, e os campos se
   atropelavam. Dentro do cartao quem distribui e a .grade de 12 colunas, a
   mesma do resto do modal, que ja sabe quebrar em duas linhas e recolher no
   celular. */
.ct-elevadores,
.ct-elev-lista{ display:grid; gap:10px; margin:4px 0 2px; }
.ct-elev{
  padding:12px; border:1px solid var(--gray-200, #e4e8ed);
  border-radius:var(--radius); background:var(--gray-050, #fafbfc);
}
.ct-elev .campo{ margin:0; }

/* O cabecalho da ficha: de que elevador se trata e o botao de tirar ele. O
   "Remover" mora aqui, no canto do proprio cartao - embaixo dos campos ele
   ficava perto do "Adicionar elevador" do bloco, e um clique errado apagava o
   que acabou de ser digitado. */
.ct-elev-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.ct-elev-topo .ct-elev-num{
  display:inline-flex; align-items:center; width:auto; height:auto;
  margin:0; padding:0; border-radius:0; background:none;
  color:var(--gray-600); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
}
.ct-elev-num{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-bottom:6px;
  border-radius:50%; background:var(--navy-600); color:var(--white);
  font-size:12px; font-weight:700;
}

/* ---- O documento do contrato: PDF, links e linha do tempo ---------------
   Fecha a ficha, e por isso se separa dela por uma faixa: o que esta aqui nao
   e mais cadastro - e o que se faz DEPOIS de o cadastro estar pronto. */
.ct-doc{
  margin-top:18px; padding-top:14px;
  border-top:2px solid var(--gray-200, #e4e8ed);
}
/* Tres acoes em linha: o PDF e o link de cada parte. O endereco nao fica a
   vista - ninguem digita um link de assinatura, ele e copiado. A legenda
   embaixo do icone diz QUAL e qual: dois icones de copiar lado a lado, sem
   nome, viram adivinhacao. */
.ct-doc-acoes{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }

.ct-doc-acao{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:86px; padding:10px 6px;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  background:var(--white); color:var(--gray-700);
  font:inherit; font-size:var(--fs-xs); text-decoration:none;
  cursor:pointer;
}
.ct-doc-acao:hover{ border-color:var(--gray-300); background:var(--gray-100); }
.ct-doc-icone{ display:flex; }
.ct-doc-icone svg{ width:22px; height:22px; }
.ct-doc-nome{ font-weight:600; line-height:1.2; text-align:center; }

.ct-doc-pdf{ color:var(--red); border-color:var(--red); }
.ct-doc-pdf:hover{ background:#FFF3F4; border-color:var(--red); }

.ct-doc-copiar.assinado{ color:var(--green); border-color:var(--green); }
.ct-doc-copiar.copiado{
  color:var(--green); border-color:var(--green); background:var(--green-bg);
}

/* A linha do tempo mostra tambem o que NAO aconteceu, apagado: lista so do que
   ja foi feito nao responde o que falta - que e a pergunta de quem olha. */
.ct-timeline{ list-style:none; margin:16px 0 0; padding:0; }
/* Todos os marcos com o mesmo recuo, cumpridos ou nao: sem isso, o fundo verde
   do que ja aconteceu empurraria a bolinha dele para o lado e a coluna de
   marcas deixaria de ser uma linha reta. */
.ct-tl-item{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:8px 10px; margin-bottom:6px; border-radius:var(--radius);
}
.ct-tl-item:last-child{ margin-bottom:0; }
.ct-tl-item:not(:last-child):before{
  content:''; position:absolute; left:21px; top:32px; bottom:-6px;
  width:2px; background:var(--gray-200, #e4e8ed);
}
/* O trecho de linha que sai de um marco cumprido tambem fica verde: e ele que
   faz a sequencia se ler como caminho andado, e nao como tres pontos soltos. */
.ct-tl-item.ok:not(:last-child):before{ background:var(--green); }

.ct-tl-marca{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--gray-300, #c9d0d8); background:var(--white);
  color:var(--white); font-size:12px; font-weight:700; line-height:1;
}
.ct-tl-item strong{ display:block; font-size:var(--fs-sm); }
.ct-tl-item span{ display:block; font-size:var(--fs-xs); color:var(--gray-600); }
.ct-tl-item:not(.ok) strong{ color:var(--gray-500); }

/* Cumprido e VERDE, e nao so um sinal verde: o marco inteiro muda de tom -
   fundo, marca e titulo. Quem olha a ficha de longe precisa saber se o
   contrato foi enviado e assinado sem ler as tres linhas uma a uma. */
.ct-tl-item.ok{ background:var(--green-bg); }
.ct-tl-item.ok .ct-tl-marca{ border-color:var(--green); background:var(--green); }
.ct-tl-item.ok strong{ color:var(--green); }
.ct-tl-item.ok span{ color:#0E5A2C; }

.tc-opcao strong{ display:block; font-size:var(--fs-md, 15px); margin-bottom:2px; }
.tc-opcao span{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }

/* Condicao de pagamento do orcamento: a previa mostra parcela por parcela
   enquanto se digita - parcelamento que so aparece depois de gravar obriga a
   gravar para conferir. */
.om-secao{
  margin:14px 0 6px; padding-top:12px;
  border-top:1px solid var(--gray-200);
  font-size:var(--fs-sm); font-weight:700; color:var(--gray-600, #5a6472);
  text-transform:uppercase; letter-spacing:.6px;
}
.om-previa{ margin:8px 0 2px; }

/* As linhas do parcelamento dentro do modal: campos do tamanho do que se
   digita, e nao do tamanho de um formulario inteiro. */
.om-linhas{ margin:0 0 6px; }
.om-linhas td{ padding:5px 8px; }
.om-linhas .entrada{ width:100%; min-height:32px; padding:0 8px; font-size:var(--fs-sm); }
.om-soma{ margin:0 0 4px; }

/* O pe do drawer: as saidas do documento ficam depois do que se leu, e nao
   antes - primeiro se confere a proposta, depois se manda. */
.drawer-pe{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:12px 18px 16px;
  border-top:1px solid var(--gray-200);
  background:var(--white);
}
.drawer-pe .btn{ flex:1 1 160px; }

/* O botao do link, quando ja existe endereco, mostra MN/ORC - e um botao que
   abre uma pagina, e nao um endereco escrito na tela. */
#orDrawerLink{ font-variant-numeric:tabular-nums; }
.om-parcelas{
  list-style:none; margin:0 0 6px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px;
}
.om-parcelas li{
  display:flex; align-items:baseline; gap:6px;
  padding:6px 10px; border:1px solid var(--gray-300); border-radius:8px;
  background:var(--white); font-size:var(--fs-sm);
}
.om-parcelas li strong{ font-variant-numeric:tabular-nums; }
.om-parcelas li .ajuda{ margin-left:auto; }

/* As condicoes de pagamento ficam prontas na pagina, escondidas: quem as
   mostra e o painel do duplo clique. */
.or-condicoes{ display:none !important; }
.or-condicoes > td{ padding:0 !important; background:var(--gray-100, #f2f4f7); }
.or-tabela{ margin:0; background:var(--white); }
.or-tabela th{ font-size:var(--fs-xs); }
.or-tabela td{ padding:6px 10px; }
.or-metodo{ margin:0; }
.or-metodo .entrada{
  width:auto; min-width:120px; min-height:30px; padding:0 8px; font-size:var(--fs-sm);
}


/* Botao so de icone: quadrado, sem o respiro lateral do texto. O rotulo vive
   no title e no aria-label - o icone sozinho nao pode ser a unica pista. */
.btn-icone{
  width:38px;
  min-height:38px;
  padding:0;
}
.btn-icone svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
.campo{ margin-bottom:16px; }

.campo label{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-700);
  letter-spacing:.2px;
}

.entrada{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  font:inherit;
  color:var(--ink);
}
.entrada::placeholder{ color:var(--gray-500); }
.entrada:hover{ border-color:var(--gray-500); }
.entrada:focus{ border-color:var(--navy-600); }
.entrada[aria-invalid="true"]{ border-color:var(--red); }

/* Valor que o sistema carimba e ninguem digita - data e hora do envio do
   projeto, por exemplo. Fica com a forma do campo, para nao parecer que
   alguem esqueceu de preencher, e com o fundo cinza que diz "aqui nao se
   escreve" antes de o mouse tentar. */
.entrada-fixa{
  display:flex;
  align-items:center;
  margin:0;
  background:var(--gray-100, #f2f4f7);
  color:var(--ink);
  font-size:inherit;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Campo de senha com botao de visualizar dentro.
   O ancoramento e no .campo-controle, que envolve so o input - ancorar no
   .campo faria o botao subir sobre o rotulo, porque o rotulo tambem esta la. */
.campo-controle{ position:relative; display:block; }
.campo-senha .entrada{ padding-right:48px; }

.olho{
  position:absolute;
  top:0; bottom:0; right:0;
  width:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent;
  border-radius:var(--radius);
  color:var(--gray-500);
  cursor:pointer;
  padding:0;
}
.olho:hover{ color:var(--navy-700); background:var(--gray-100); }
.olho svg{ width:20px; height:20px; display:block; }
.olho .icone-fechado{ display:none; }
.olho[aria-pressed="true"] .icone-aberto{ display:none; }
.olho[aria-pressed="true"] .icone-fechado{ display:block; }
.olho[aria-pressed="true"]{ color:var(--navy-700); }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.aviso{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin-bottom:18px;
  border:1px solid transparent;
  border-left-width:4px;
  border-radius:var(--radius);
  font-size:var(--fs-sm);
  line-height:1.45;
}
.aviso svg{ flex:none; width:18px; height:18px; margin-top:1px; }
.aviso-erro{ background:var(--red-bg);    border-color:var(--red);    color:#7A0A11; }
.aviso-erro{ border-left-color:var(--red); }
.aviso-atencao{ background:var(--orange-bg); border-color:var(--orange); color:#7A3A00; border-left-color:var(--orange); }
.aviso-ok{ background:var(--green-bg); border-color:var(--green); color:#0E5A2C; border-left-color:var(--green); }

/* O aviso do encaminhamento carrega o link novo dentro dele - o gesto só
   termina quando esse link chega ao celular de quem assumiu, e escondê-lo atrás
   de mais um clique seria deixar a agenda trocada e a rua sem saber. O campo
   ocupa a linha inteira em tela estreita: link de visita é longo, e cortado ao
   meio ele não serve para copiar com o dedo. */
.ea-feito span{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ea-feito .ea-link{
  flex:1 1 320px; min-width:0; min-height:36px; padding:6px 10px;
  font-family:"Consolas", "Courier New", monospace; font-size:12px;
  background:var(--white);
}
.ea-feito .btn{ flex:none; }

/* --------------------------------------------------------------------------
   Tela de login
   -------------------------------------------------------------------------- */
/* A tela de entrada é a única do sistema que não é uma ferramenta de trabalho:
   ela é a fachada. Por isso o desenho aqui foge do resto - fundo escuro com a
   foto da obra, a marca em água, o lema da casa e os três pilares no rodapé -,
   e por isso as classes são próprias (lg-*), sem herdar .campo, .entrada nem
   .btn: mexer no botão do sistema não pode mexer na porta de entrada. */
.tela-login{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1000px 560px at 72% 22%, rgba(45,79,133,.55) 0%, transparent 62%),
    linear-gradient(158deg, #14263F 0%, var(--navy-900) 48%, #091425 100%);
}

/* A FOTO É A TELA INTEIRA (ver index.php: ela vem do banco). A marca em água e
   o lema da casa já estão desenhados dentro dela - por isso não há nenhum
   texto decorativo em HTML por cima. */
.login-foto{
  position:absolute;
  inset:0;
  background:var(--login-foto, none) center center/cover no-repeat;
  pointer-events:none;
}

/* VÉU. O cartão é branco e o pôr do sol da foto é claro: sem escurecer o meio
   da tela, a borda do cartão some dentro do céu. O véu é mais forte no centro,
   onde o cartão fica, e some nas pontas - a foto continua sendo a foto. */
.login-veu{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 90% at 50% 50%, rgba(6,14,26,.58) 0%, rgba(6,14,26,.22) 62%, transparent 100%),
    linear-gradient(180deg, rgba(6,14,26,.30) 0%, transparent 26%, transparent 68%, rgba(6,14,26,.55) 100%);
  pointer-events:none;
}

/* O bloco central ocupa a sobra e mantem o cartao no meio;
   o rodape fica no fim da tela sem precisar de position:fixed. */
.login-centro{
  position:relative;
  z-index:2;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.login-cartao{
  width:100%;
  max-width:452px;
  padding:34px 36px 30px;
  background:var(--white);
  border-radius:14px;
  border-top:5px solid var(--red);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

/* ---- Cabeçalho do cartão ---- */
.lg-marca{ text-align:center; }
.lg-marca img{
  display:block;
  width:236px;
  max-width:76%;
  height:auto;
  margin:0 auto;
}
.lg-marca span{
  display:block;
  margin-top:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#7A8496;
}

.lg-divisor{
  height:1px;
  margin:22px 0 20px;
  border:0;
  background:var(--gray-200);
}

.login-cartao h1{
  margin:0 0 4px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.4px;
}
.lg-subtitulo{
  margin:0 0 20px;
  font-size:var(--fs-sm);
  color:var(--gray-700);
}

.lg-aviso{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  padding:10px 12px;
  border-radius:9px;
  background:#FDECEC;
  border:1px solid #F3BFC2;
  color:#8E1119;
  font-size:var(--fs-sm);
  line-height:1.4;
}
.lg-aviso svg{ flex:none; width:18px; height:18px; }

/* ---- Campos ------------------------------------------------------------
   O RÓTULO MORA DENTRO DA CAIXA, acima do que se digita. Com o rótulo fora, o
   campo preenchido perdia o nome - "admin" sozinho não diz se aquilo é o
   usuário ou o e-mail. O ícone à esquerda faz o mesmo trabalho de relance. */
.lg-campo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:9px 14px;
  background:#F3F5F9;
  border:1px solid #E4E8F0;
  border-radius:11px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lg-campo:focus-within{
  background:var(--white);
  border-color:var(--navy-700);
  box-shadow:0 0 0 3px rgba(29,49,87,.12);
}
.lg-campo-erro{ border-color:#E38F95; background:#FEF6F6; }
.lg-campo > svg{ flex:none; width:21px; height:21px; color:#8A93A3; }

.lg-corpo{ flex:1 1 auto; min-width:0; }
.lg-corpo label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#8A93A3;
  cursor:text;
}
.lg-corpo input,
.lg-corpo select{
  width:100%;
  padding:1px 0 2px;
  border:0;
  background:transparent;
  outline:none;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:#14181F;
}
/* A seleção dentro da caixa cinza com a mesma cara do campo de texto: sem a
   moldura do navegador, só uma seta discreta à direita. */
.lg-corpo select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:22px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center / 16px 16px;
}
/* O preenchimento automático do navegador pinta o campo de azul-claro e
   quadrado - dentro da caixa cinza isso vira um retângulo estranho. */
.lg-corpo input:-webkit-autofill{
  -webkit-text-fill-color:#14181F;
  -webkit-box-shadow:0 0 0 40px #F3F5F9 inset;
  transition:background-color 9999s ease;
}
.lg-campo:focus-within .lg-corpo input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px var(--white) inset;
}

.lg-olho{
  flex:none;
  display:grid;
  place-items:center;
  width:32px; height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8A93A3;
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.lg-olho:hover{ color:var(--navy-900); background:rgba(14,27,48,.06); }
.lg-olho svg{ width:20px; height:20px; }
.lg-olho .icone-fechado{ display:none; }
.lg-olho[aria-pressed="true"] .icone-aberto{ display:none; }
.lg-olho[aria-pressed="true"] .icone-fechado{ display:block; }

/* ---- Entrar ---- */
.lg-entrar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
  margin-top:6px;
  padding:0 46px;
  border:0;
  border-radius:11px;
  background:var(--red);
  color:var(--white);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.lg-entrar:hover{ background:var(--red-dark); box-shadow:0 10px 26px rgba(227,6,19,.34); }
.lg-entrar:active{ transform:translateY(1px); }
.lg-entrar svg{ position:absolute; right:22px; width:21px; height:21px; }

.lg-nota{
  margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid var(--gray-200);
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--gray-700);
}

/* ---- Rodapé: os três pilares e a assinatura ---- */
.login-rodape{
  position:relative;
  z-index:2;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 24px;
  padding:16px clamp(20px, 4vw, 56px) 20px;
  border-top:1px solid rgba(255,255,255,.10);
}

.login-pilares{ display:flex; align-items:center; flex-wrap:wrap; }
.login-pilar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px 26px;
  border-left:1px solid rgba(255,255,255,.14);
}
.login-pilar:first-child{ padding-left:0; border-left:0; }
.login-pilar svg{ flex:none; width:26px; height:26px; color:rgba(255,255,255,.7); }
.login-pilar b{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.login-pilar small{
  display:block;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.login-creditos{
  margin:0;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.58);
}
.login-creditos span{ margin:0 10px; opacity:.4; }

/* Tela estreita: a foto é panorâmica e o celular é uma coluna - de "cover" só
   sobraria um pedaço do meio. Ela recua para o lado do elevador e o véu fecha,
   porque o cartão passa a ocupar quase a tela toda. */
@media (max-width:820px){
  .login-foto{ background-position:72% center; }
  .login-veu{
    background:linear-gradient(180deg, rgba(6,14,26,.72) 0%, rgba(6,14,26,.58) 45%, rgba(6,14,26,.80) 100%);
  }
}
@media (max-width:820px){
  .login-rodape{ justify-content:center; text-align:center; }
  .login-pilares{ justify-content:center; }
  .login-pilar{ padding:2px 14px; }
}
@media (max-width:520px){
  .login-cartao{ padding:26px 20px 22px; }
  .login-pilar small{ display:none; }
  .login-pilar{ gap:9px; }
}

/* --------------------------------------------------------------------------
   Estrutura interna do sistema (topo + conteudo)
   -------------------------------------------------------------------------- */
/* Faixa superior: logo a esquerda, modulos ao centro, usuario a direita.
   Grid 1fr auto 1fr mantem o menu centralizado na tela mesmo com os
   dois lados de larguras diferentes - com flex ele deslocaria. */
.topo{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"marca menu direita";
  align-items:center;
  gap:16px;
  height:56px;
  /* A faixa vai de ponta a ponta, mas o conteudo dela para na mesma
     largura util do resto do sistema - logo, menu e usuario alinhados
     com o miolo da pagina. */
  padding-inline:max(20px, calc((100% - var(--largura)) / 2));
  background:var(--navy-900);
  color:var(--white);
  box-shadow:var(--shadow-1);
  position:relative;
  z-index:50;
}
.topo img{ height:26px; width:auto; display:block; }
/* Marca + atalhos dividem a primeira coluna da barra. O embrulho e que ocupa
   a area do grid; dentro dele os dois ficam lado a lado, na mesma linha de
   base do menu do meio. */
.topo-esquerda{
  grid-area:marca;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:14px;
}

/* A marca so diz de quem e a gestao - ela nao clica mais. Trocar a logo virou
   item do avatar, que e onde mora o que e da empresa e da pessoa; a marca com
   moldura de botao prometia uma acao que agora esta em outro lugar. */
.topo-marca{
  display:block; padding:3px 6px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius);
}

/* Faixa de erro de tela: fica por cima de tudo, inclusive de modal, porque ela
   avisa justamente quando a tela parou de responder. */
.erro-tela{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--red-dark); color:var(--white);
  font-size:var(--fs-sm); line-height:1.35;
}
.erro-tela strong{ flex:none; }
.erro-tela span{ flex:1 1 auto; word-break:break-word; }
.erro-tela button{
  flex:none; width:26px; height:26px; padding:0; cursor:pointer;
  color:var(--white); background:transparent;
  border:1px solid rgba(255,255,255,.5);
}
.erro-tela button:hover{ background:rgba(255,255,255,.15); }

/* Empresa em gestao: um icone com o nome, e as tres embaixo dele.
   Abre no mesmo gesto do menu de modulos (passar o mouse ou receber o foco) -
   dois jeitos diferentes de abrir menu na mesma barra fariam a pessoa testar
   qual e qual. */
.topo-empresas{ position:relative; display:flex; align-items:center; }

/* Na faixa de cima fica so o icone. O nome de quem esta em gestao vive na
   lista que abre embaixo - repeti-lo aqui gastava a largura que o menu de
   modulos precisa, e a cor da tela ja responde "qual CNPJ" o dia inteiro. */
.topo-empresa-botao{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  color:rgba(255,255,255,.88);
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  cursor:pointer;
}
.topo-empresa-botao:hover,
.topo-empresas:focus-within .topo-empresa-botao{
  background:rgba(255,255,255,.10); color:var(--white);
}
.topo-empresa-botao:focus-visible{ outline:2px solid var(--white); outline-offset:1px; }

.topo-empresa-icone{ width:19px; height:19px; flex:none; }

/* A lista usa a mesma caixa flutuante do submenu dos modulos. */
.submenu-empresas{ min-width:290px; padding:4px 0; }
.topo-empresas:hover > .submenu-empresas,
.topo-empresas:focus-within > .submenu-empresas{
  opacity:1; visibility:visible; transform:none;
}

.empresa-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 14px; text-align:left;
  font-family:inherit; font-size:var(--fs-sm);
  color:var(--ink); background:transparent; border:0; cursor:pointer;
}
.empresa-item:hover{ background:var(--gray-100); }
.empresa-item:focus-visible{ outline:2px solid var(--navy-500); outline-offset:-2px; }

/* O numero e a identidade do acesso e por isso continua a vista, com a cor da
   propria empresa (pintada no HTML, porque cada uma escolhe a sua) - o nome ao
   lado e quem foi cadastrado ali. */
.empresa-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none;
  font-weight:700; color:var(--white);
  background:var(--navy-900);
}

/* Congelada: continua na lista, apagada e sem clique. Sumir com ela esconderia
   do administrador justamente a empresa que ele precisa descongelar. */
.empresa-item.congelada{ opacity:.55; cursor:not-allowed; }
.empresa-item.congelada .empresa-num{ filter:grayscale(1); }
.empresa-item.congelada:hover{ background:transparent; }
.empresa-item.congelada .empresa-dados strong{ text-decoration:line-through; }

/* Inserir mais uma empresa: mesma linha das outras, sem cor de empresa - ela
   ainda nao existe. */
.empresa-nova{ border-top:1px solid var(--gray-200); }
.empresa-nova .empresa-num{
  background:transparent; color:var(--gray-500);
  border:1px dashed var(--gray-300); font-size:var(--fs-lg);
}
.empresa-nova:hover .empresa-num{ color:var(--navy-600); border-color:var(--navy-500); }

.empresa-dados{ display:flex; flex-direction:column; min-width:0; }
.empresa-dados strong{
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.empresa-dados small{ font-size:var(--fs-xs); color:var(--gray-500); }

/* A que esta em gestao nao e um destino: fica marcada e sem convite ao clique. */
.empresa-item.ativa{ background:var(--gray-050); }
.empresa-item.ativa .empresa-dados strong{ color:var(--navy-900); font-weight:700; }
.empresa-item.ativa::after{
  content:"✓"; margin-left:auto; font-weight:700; color:var(--navy-600);
}

/* Projecao de carreira na ficha: os tres numeros que a conversa pede - de
   onde partiu, quanto ganha hoje e quanto evoluiu. A lista abaixo conta o
   resto da historia. */
.carreira-resumo{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin:6px 0 12px;
  padding:12px 14px;
  background:var(--gray-050);
  border-radius:var(--radius);
}
.carreira-resumo span{ display:flex; flex-direction:column; gap:2px; }
.carreira-resumo small{
  font-size:var(--fs-xs);
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.carreira-resumo strong{ font-size:var(--fs-md); }
.carreira-resumo .positivo{ color:var(--green); }
.carreira-resumo .negativo{ color:var(--red); }

/* Apagar aumento e correcao de lancamento errado, e nao rotina: o X fica
   apagado e so ganha cor quando o ponteiro chega perto - ele nao pode
   competir com o valor, que e o que se le ali.

   Embaixo, e nao em cima: no alto ele dividia a linha com a data do aumento
   e passava por cima do texto. Na base a coluna esta livre, e a data
   continua sozinha no seu canto. */
.reg-lista-carreira li{ position:relative; padding-right:20px; padding-bottom:14px; }
.reg-apagar-canto{
  position:absolute;
  bottom:2px;
  right:0;
  padding:0 2px;
  line-height:1;
  font-size:11px;
  color:var(--gray-300);
  background:none;
  border:0;
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease, color .12s ease;
}
.reg-lista-carreira li:hover .reg-apagar-canto,
.reg-apagar-canto:focus-visible{ opacity:1; }
.reg-apagar-canto:hover{ color:var(--red); }

/* No toque nao ha ponteiro para revelar o botao - ali ele fica sempre
   visivel, so que discreto. */
@media (hover:none){
  .reg-apagar-canto{ opacity:1; color:var(--gray-500); }
}

/* --------------------------------------------------------------------------
   Folha de pagamento
   -------------------------------------------------------------------------- */

/* A escolha do tipo: dois botoes grandes, cada um dizendo o que decide - a
   diferenca entre pagamento e adiantamento e a data de vencimento, e essa
   informacao precisa estar na frente de quem escolhe. */
.folha-opcoes{ display:flex; gap:12px; margin:14px 0 4px; flex-wrap:wrap; }
.folha-opcao{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  text-align:left;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
}
.folha-opcao:hover{ border-color:var(--red); background:var(--gray-050); }
.folha-opcao-rotulo{ font-size:var(--fs-md); font-weight:700; }
.folha-opcao .ajuda{ margin:0; }

/* A lista do quadro: colunas com respiro de leitura, como na mesa de folha. */
.folha-tabela{
  table-layout:fixed;
  min-width:0;
}
.folha-tabela .cfo-col-funcionario{ width:18%; }
.folha-tabela .cfo-col-situacao{ width:19%; }
.folha-tabela .cfo-col-provisionado{ width:14%; }
.folha-tabela .cfo-col-real{ width:16%; }
.folha-tabela .cfo-col-faltas{ width:10%; }
.folha-tabela .cfo-col-pagamento{ width:23%; }
.folha-tabela th{ padding:11px 10px; }
.folha-tabela td{ padding:8px 10px; }
.folha-tabela .entrada-mini{
  width:100%;
  min-height:32px;
  padding:0 8px;
  font-size:var(--fs-sm);
}
.folha-tabela tr.linha-apagada td{ opacity:.55; }
/* O carimbo de situacao tem largura de leitura, sem tomar a coluna inteira. */
.folha-tabela .carimbo{
  display:inline-flex;
  width:128px;
  max-width:100%;
  min-width:0;
}
.folha-tabela .truncar{ max-width:100%; }

/* Ultimas folhas: os carimbos de situacao tem TODOS a mesma largura, e nao a
   do texto de cada um. "Paga" ao lado de "Paga em parte" em caixas de
   tamanhos diferentes faz a coluna parecer desalinhada linha a linha, e a
   varredura de cima para baixo - que e como se le esta lista - passa a
   tropecar no contorno em vez de ler a palavra. */
#cfoUltimasTabela .carimbo{
  display:inline-flex;
  justify-content:center;
  width:118px;
  max-width:100%;
  min-width:0;
}

/* Quadro de ferias: os carimbos tem largura fixa por COLUNA, e nao pela do
   texto de cada linha. Duas larguras porque sao duas coisas - a situacao e uma
   palavra, o periodo e um intervalo de datas -, e uma medida so faria a
   palavra nadar dentro da caixa do intervalo. */
#feriasQuadro{
  table-layout:fixed;
  min-width:1180px;
}
#feriasQuadro .ferias-col-colaborador{ width:15%; }
#feriasQuadro .ferias-col-setor{ width:8.5%; }
#feriasQuadro .ferias-col-data{ width:7.8%; }
#feriasQuadro .ferias-col-saldo{ width:8%; }
#feriasQuadro .ferias-col-situacao{ width:9.5%; }
#feriasQuadro .ferias-col-janela{ width:17%; }
#feriasQuadro .ferias-col-agendada{ width:18.6%; }
#feriasQuadro th,
#feriasQuadro td{
  padding-left:7px;
  padding-right:7px;
  vertical-align:middle;
}
#feriasQuadro th{
  overflow:hidden;
  text-overflow:ellipsis;
}
#feriasQuadro .origem-mini{
  overflow:hidden;
  text-overflow:ellipsis;
}
#feriasQuadro .carimbo{
  display:inline-flex;
  justify-content:center;
  width:104px;
  max-width:100%;
  min-width:0;
}
#feriasQuadro .col-periodo .carimbo{
  width:100%;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Ferias - o balao de quem esta fora, no ponto da curva
   --------------------------------------------------------------------------
   O grafico diz quantos; o balao diz quem. Fundo claro e nao escuro porque o
   verde e o laranja sao a informacao aqui - eles precisam da mesma cor que
   tem no resto do sistema, e sobre preto os dois clareiam para tons que nao
   sao mais os da casa.

   pointer-events:none - o balao nasce colado no ponto, e se ele capturasse o
   mouse o proprio balao tiraria o cursor de cima do alvo e piscaria sem
   parar. */
.ferias-dica{
  position:absolute;
  z-index:40;
  min-width:190px;
  max-width:300px;
  padding:8px 10px;
  border:1px solid var(--gray-300,#C9D0D8);
  border-radius:8px;
  background:var(--white,#FFF);
  box-shadow:0 8px 22px rgba(20,24,31,.14);
  font-size:var(--fs-xs);
  line-height:1.45;
  pointer-events:none;
}
.ferias-dica .fd-titulo{
  display:block;
  margin-bottom:5px;
  padding-bottom:4px;
  border-bottom:1px solid var(--gray-200,#E4E8ED);
  font-weight:700;
  color:var(--navy-800,#14181F);
}
/* A barra da esquerda e a demarcacao: cor sozinha nao se ve em nome curto, e
   quem le rapido precisa distinguir combinado de sugerido sem legenda. */
.ferias-dica .fd-item{
  display:block;
  margin-top:3px;
  padding-left:8px;
  border-left:3px solid transparent;
}
.ferias-dica .fd-item i{ font-style:normal; color:var(--gray-500,#6B7280); }
.ferias-dica .fd-real{ color:#1F8A48; border-left-color:#1F8A48; font-weight:600; }
.ferias-dica .fd-sug{ color:#D96A0B; border-left-color:#D96A0B; }
.ferias-dica .fd-vazio{ display:block; color:var(--gray-500,#6B7280); }

/* --------------------------------------------------------------------------
   Calendario da antecipacao de dias
   --------------------------------------------------------------------------
   Antecipar dia e emendar feriado, e emenda se enxerga: dois campos de data
   obrigavam a fazer de cabeca a conta que o mes inteiro na tela responde de
   relance. Feriado e fim de semana vem marcados porque sao o motivo do pedido
   - e tambem os dias que nao valia a pena gastar do saldo. */
.cal-mini{
  border:1px solid var(--gray-300,#C9D0D8);
  border-radius:8px;
  padding:8px 10px 10px;
  background:var(--white,#FFF);
}
.cal-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:6px;
}
.cal-mes{
  font-weight:700; font-size:var(--fs-sm);
  text-transform:capitalize; color:var(--navy-800,#14181F);
}
.cal-semana,
.cal-dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-semana span{
  padding:3px 0; text-align:center;
  font-size:var(--fs-xs); color:var(--gray-500,#6B7280);
  text-transform:uppercase; letter-spacing:.4px;
}
.cal-oco{ height:32px; }

.cal-dia{
  height:32px; padding:0;
  border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--navy-800,#14181F);
  font:inherit; font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.cal-dia:hover{ background:var(--gray-100,#F1F4F7); }

/* Fim de semana e feriado sao informacao de fundo: eles nao se clicam menos,
   so se leem antes. */
.cal-dia.fds{ color:var(--gray-500,#6B7280); }
.cal-dia.feriado{
  background:#FFF3D6; color:#8A6400; font-weight:700;
}
.cal-dia.hoje{ border-color:var(--gray-400,#98A2AE); }

/* A ponta do intervalo e cheia; o meio e o rastro entre as duas pontas. */
.cal-dia.entre{ background:#E7EEFA; color:#1F3E77; }
.cal-dia.sel{
  background:var(--navy-600,#4169B2); border-color:var(--navy-600,#4169B2);
  color:#FFF; font-weight:700;
}

.cal-legenda{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px;
  margin:8px 0 0; padding-top:7px;
  border-top:1px solid var(--gray-200,#E4E8ED);
  font-size:var(--fs-xs); color:var(--gray-500,#6B7280);
}
.cal-ex{
  display:inline-block; width:11px; height:11px;
  margin-right:2px; border-radius:3px; vertical-align:-1px;
}
.cal-ex-feriado{ background:#FFF3D6; border:1px solid #E8C97A; }
.cal-ex-fds{ background:var(--gray-100,#F1F4F7); border:1px solid var(--gray-300,#C9D0D8); }
.cal-ex-sel{ background:var(--navy-600,#4169B2); }

.folha-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:2px solid var(--gray-300);
  font-size:var(--fs-md);
}
.folha-total strong{ font-size:var(--fs-lg); }

/* Campo de leitura que mostra ESTADO - "Conectado", "Sem chave", uma data.
   O conteudo e curto e vale como resposta de relance: encostado na esquerda,
   dentro de uma caixa larga, ele fica solto e a linha de campos perde o
   alinhamento. Centrado, a faixa de situacoes se le de uma passada.

   Vale so para os campos marcados: endereco e texto longo continuam alinhados
   a esquerda, que e como se le endereco. */
.entrada.entrada-situacao{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
}

/* --------------------------------------------------------------------------
   Bloco que abre e fecha

   Tela de configuracao e feita de fichas longas que quase nunca se editam ao
   mesmo tempo: quem entra vai a uma delas. Abrir todas de saida empurra o
   resto da pagina para baixo e obriga a rolar ate achar a que interessa - por
   isso o bloco nasce recolhido e o titulo e a chave.

   E o mesmo <details> nativo do navegador: funciona sem JavaScript, responde
   ao teclado e nao precisa de estado guardado em lugar nenhum.
   -------------------------------------------------------------------------- */
.bloco-abre{ padding:0; }
.bloco-abre > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.bloco-abre > summary::-webkit-details-marker{ display:none; }
.bloco-abre > summary::marker{ content:''; }
.bloco-abre > summary:hover{ background:var(--gray-050); }
.bloco-abre[open] > summary{ border-bottom:1px solid var(--gray-200); }

.bloco-abre > summary h2{ margin:0; flex:1 1 auto; }
.bloco-abre .bloco-nota{
  font-size:var(--fs-xs);
  color:var(--gray-500);
  white-space:nowrap;
}

/* A seta gira ao abrir - o mesmo sinal do submenu dos modulos. */
.bloco-abre .seta-bloco{
  width:14px; height:14px; flex:none;
  color:var(--gray-500);
  transition:transform .15s ease;
}
.bloco-abre[open] .seta-bloco{ transform:rotate(180deg); }

.bloco-abre > .bloco-corpo{ padding:4px 18px 18px; }

/* Selo de alerta na linha do titulo

   Bloco recolhido esconde o problema junto com o conteudo. O selo e o que
   atravessa: com o bloco fechado, ele e a unica coisa que diz que ha algo
   vencido la dentro - e vencido aqui nao e detalhe, e EPI fora da entrega.
   Vermelho e numero grande, porque ele existe para ser visto de longe. */
.selo-alerta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  padding:3px 10px 3px 8px;
  border:1px solid var(--red, #E30613);
  border-radius:999px;
  background:color-mix(in srgb, var(--red, #E30613) 8%, transparent);
  color:var(--red, #E30613);
  font-size:var(--fs-xs);
  line-height:1.2;
  white-space:nowrap;
}
.selo-alerta svg{ width:15px; height:15px; flex:none; }
.selo-alerta strong{ font-size:var(--fs-sm); font-weight:800; }

/* --------------------------------------------------------------------------
   Configuracoes > Empresas do Grupo
   -------------------------------------------------------------------------- */
.emp-cartoes{ display:flex; flex-direction:column; gap:10px; }

.emp-cartao{ border:1px solid var(--gray-200); background:var(--white); }
.emp-cartao > summary{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; cursor:pointer;
  background:var(--gray-050); border-bottom:1px solid transparent;
}
.emp-cartao[open] > summary{ border-bottom-color:var(--gray-200); }
.emp-cartao > summary::-webkit-details-marker{ display:none; }
.emp-cartao > form{ padding:16px 14px 18px; }

/* O numero do cartao usa a cor da propria empresa - o mesmo sinal do botao
   la em cima, para o cadastro e a barra falarem a mesma lingua. */
.emp-numero{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none;
  font-size:var(--fs-lg); font-weight:700; color:var(--white);
}
/* Escolha da cor principal: a grade de cores vivas e, embaixo, o seletor livre
   para quem tem o codigo da marca em maos. */
.emp-cores{ margin:8px 0 4px; }

.emp-cores-grade{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:6px;
  max-width:560px;
}
@media (max-width:900px){ .emp-cores-grade{ grid-template-columns:repeat(8, 1fr); } }
@media (max-width:560px){ .emp-cores-grade{ grid-template-columns:repeat(6, 1fr); } }

.emp-cor-pronta{
  position:relative;
  aspect-ratio:1 / 1; width:100%; padding:0; cursor:pointer;
  border:1px solid rgba(0,0,0,.16);
}
.emp-cor-pronta:hover{ transform:scale(1.12); z-index:1; }
.emp-cor-pronta:focus-visible{ outline:2px solid var(--navy-600); outline-offset:2px; }

/* A escolhida ganha um anel branco por dentro e a borda escura por fora - o
   contorno sozinho some nas cores claras. */
.emp-cor-pronta.escolhida{
  box-shadow:inset 0 0 0 2px var(--white), 0 0 0 2px var(--navy-900);
}

/* Referencias bancarias: tabela de cadastro, campos rentes a celula para a
   linha inteira caber sem rolagem lateral no monitor comum. */
.emp-bancos td{ padding:4px 6px; vertical-align:middle; }
.emp-bancos .entrada{ min-height:32px; padding:0 8px; }
.emp-bancos select.entrada{ padding-right:24px; }
.emp-bancos input[type="radio"],
.emp-bancos input[type="checkbox"]{ accent-color:var(--navy-600); }

/* A linha vazia do fim e um convite, nao um registro: fundo mais claro e
   rotulo no proprio campo dizem que ela so existe se for preenchida. */
.emp-banco-novo td{ background:var(--gray-050); }

.emp-cor-livre{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.emp-cor-escolha{
  width:60px; height:34px; padding:2px; cursor:pointer; flex:none;
  border:1px solid var(--gray-300); background:var(--white);
}
.emp-cor-livre .ajuda{ flex:1 1 320px; min-width:0; }
.oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.emp-cabeca{ display:flex; flex-direction:column; min-width:0; }
.emp-cabeca strong{ color:var(--navy-900); }
.emp-sub{ font-size:var(--fs-xs); color:var(--gray-700); }

/* Campo com botao colado: o CNPJ e o "Buscar" que preenche a ficha a partir
   dele. O botao acompanha a altura do campo para os dois lerem como uma peca
   so - e a acao e sobre aquele campo, nao sobre o formulario. */
.campo-acao{ display:flex; gap:6px; align-items:stretch; }
.campo-acao .entrada{ flex:1 1 auto; min-width:0; }
.campo-acao .btn{ flex:0 0 auto; min-height:0; padding:0 14px; }

.emp-titulo{
  margin:18px 0 6px; padding-bottom:8px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--gray-700);
}

/* As paginas em colunas, modulo e abas na mesma lista: a hierarquia aparece
   pelo recuo, e nao por um titulo por modulo que dobraria a altura do bloco. */
.emp-paginas{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 14px;
  margin:8px 0 4px;
}
@media (max-width:1100px){ .emp-paginas{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:700px){  .emp-paginas{ grid-template-columns:1fr; } }

.emp-pagina{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px 5px 22px; font-size:var(--fs-sm); cursor:pointer;
}
.emp-pagina:hover{ background:var(--gray-050); }
.emp-pagina input{ accent-color:var(--navy-600); }
.emp-pagina-modulo{ padding-left:6px; font-weight:700; color:var(--navy-900); }
/* Modulo que nao se tranca: o quadrado marcado e cinza explica sozinho. */
.emp-pagina-fixa{ color:var(--gray-500); cursor:default; }
.emp-pagina-fixa:hover{ background:transparent; }

/* Os atalhos da grade de permissoes da ficha do acesso. Liberar area por area
   para quem faz de tudo, ou tirar uma so de quem quase nao ve nada, sao os
   dois casos comuns - e nenhum deles se resolve clicando quinze vezes. */
.usu-perm-acoes{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0;
}
.usu-perm-acoes .ajuda{ margin:0 0 0 4px; }

/* Dentro do modal a grade e mais estreita que a da tela de empresas. Sem
   rolagem propria: as permissoes fazem parte da ficha, e o modal tem UMA barra
   de rolagem so - duas barras escondiam areas atras da primeira. */
#usuPaginas, #usuEmpresas{ grid-template-columns:repeat(3, 1fr); max-height:none; overflow:visible; }
@media (max-width:900px){ #usuPaginas{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ #usuPaginas{ grid-template-columns:1fr; } }

/* A marca de liga-desliga de uma regra: caixa e frase na mesma linha, do
   tamanho de quem se clica sem mirar. */
.emp-marca{
  display:flex; align-items:center; gap:9px;
  font-size:var(--fs-sm); cursor:pointer; line-height:1.35;
}
.emp-marca input{ accent-color:var(--navy-600); width:17px; height:17px; flex:none; }

/* A escada da comissao: dois campos por linha, do tamanho do que se digita -
   um por cento nao precisa da largura de um formulario. */
.rg-faixas td{ padding:4px 8px; }
.rg-faixas .entrada{ width:100%; min-height:34px; padding:0 9px; font-size:var(--fs-sm); }
.topo-direita{
  grid-area:direita;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}
.topo .usuario{ font-size:var(--fs-sm); color:rgba(255,255,255,.82); white-space:nowrap; }
/* Sair e engrenagem sao vizinhos na barra e dividem a mesma moldura. A altura
   e declarada nos dois, e nao deixada ao padding: o Sair tem texto e a
   engrenagem tem so um icone, e dois conteudos diferentes com o mesmo padding
   dao molduras de alturas diferentes - a diferenca de tres pixels aparece
   justamente porque elas estao lado a lado. */
.topo a.sair,
.topo a.topo-engrenagem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  color:var(--white);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
}
.topo a.sair{
  padding:0 12px;
  font-size:var(--fs-sm);
  font-weight:600;
}
.topo a.sair:hover{ background:rgba(255,255,255,.10); }

/* Usuarios e permissoes: a porta do que vale para o grupo inteiro. Mesma
   moldura do Sair, so o icone no lugar do texto - sao vizinhos na barra e
   dois pesos diferentes fariam um parecer mais importante que o outro. */
.topo a.topo-engrenagem{ width:38px; }
.topo a.topo-engrenagem svg{ width:19px; height:19px; }
.topo a.topo-engrenagem:hover{ background:rgba(255,255,255,.10); }

/* --------------------------------------------------------------------------
   O sino: a noticia da empresa

   O que aconteceu na empresa - obra fechada, contrato novo, elevador entregue,
   aniversario - nao mora em tela nenhuma: cada fato esta num modulo diferente,
   e ninguem abre seis telas para saber que o mes foi bom. O sino junta os seis
   num lugar so, e e onde a diretoria escreve o recado do dia.
   ------------------------------------------------------------------------ */
.topo-sino{ position:relative; }

.sino-botao{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  border:0; border-radius:50%;
  background:transparent; color:var(--white); cursor:pointer;
}
.sino-botao svg{ width:19px; height:19px; }
.sino-botao:hover{ background:rgba(255,255,255,.12); }
.sino-botao:focus-visible{ outline:2px solid var(--white); outline-offset:2px; }

/* O numero e o unico vermelho da barra - ele so aparece quando ha o que ler. */
.sino-conta{
  position:absolute; top:-2px; right:-2px;
  min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--red); color:var(--white);
  font-size:10px; font-weight:700; line-height:1;
}

.sino-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:80;
  width:min(360px, calc(100vw - 24px));
  background:var(--white); color:var(--ink);
  border:1px solid var(--gray-200); border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(16,24,40,.18);
  overflow:hidden;
}
.sino-cabeca{ padding:12px 14px 10px; border-bottom:1px solid var(--gray-100); }
.sino-cabeca strong{ display:block; font-size:var(--fs-sm); }
.sino-cabeca small{ color:var(--gray-500); font-size:var(--fs-xs); }

/* Escrever a noticia: so o administrador ve este bloco. */
.sino-nova{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 14px; border-bottom:1px solid var(--gray-100);
  background:var(--gray-100);
}
.sino-nova .entrada{ min-height:34px; font-size:var(--fs-sm); }
.sino-nova textarea.entrada{ min-height:52px; padding:6px 10px; resize:vertical; }
.sino-nova .btn{ align-self:flex-end; }

.sino-lista{ max-height:min(60vh, 420px); overflow-y:auto; }
.sino-item{
  display:flex; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--gray-100);
}
.sino-item:last-child{ border-bottom:0; }
.sino-item.nova{ background:#F4F8FF; }
.sino-icone{ flex:none; font-size:17px; line-height:1.2; }
.sino-item strong{ display:block; font-size:var(--fs-sm); }
.sino-item p{ margin:2px 0 0; font-size:var(--fs-sm); color:var(--gray-700); }
.sino-item small{ display:block; margin-top:3px; color:var(--gray-500); font-size:var(--fs-xs); }
.sino-vazio{ margin:0; padding:16px 14px; }

/* Mais tres: o botao some quando a caixa acaba. */
.sino-mais{
  display:block; width:100%; padding:9px 14px;
  border:0; border-top:1px solid var(--gray-100);
  background:var(--white); color:var(--gray-700);
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.sino-mais:hover{ background:var(--gray-100); color:var(--red); }

/* --------------------------------------------------------------------------
   A conta na barra: quem esta logado e a caixa dele

   O nome e o avatar ficam no canto, e TUDO o que e da pessoa e da empresa em
   gestao - trocar de CNPJ, configurar, por a logo e sair - mora atras do
   avatar. Icones soltos na barra faziam cada gesto ter um lugar proprio, e
   nenhum deles era onde as pessoas procuravam: elas clicam no proprio nome.
   ------------------------------------------------------------------------ */
.topo-conta{ position:relative; }

/* Sem moldura e sem retangulo: o nome e o avatar ja se leem sozinhos, e a
   caixa em volta fazia deles mais um botao na barra em vez do canto de quem
   esta logado. Ao passar o mouse, so o avatar reage. */
.conta-botao{
  display:flex; align-items:center; gap:10px;
  height:38px; padding:0;
  border:0; background:transparent; color:var(--white); cursor:pointer;
}
.conta-botao:hover .conta-avatar{ filter:brightness(1.12); }
.conta-botao:focus-visible{ outline:2px solid var(--white); outline-offset:2px; }
.conta-nome{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.15; }
.conta-nome strong{ font-size:var(--fs-sm); font-weight:600; }
.conta-nome small{ font-size:var(--fs-xs); color:rgba(255,255,255,.7); }

.conta-avatar{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--white);
}

/* A caixa desce do avatar, encostada na direita. */
.conta-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:80;
  min-width:274px; padding:6px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--gray-200); border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(16,24,40,.18);
}
.conta-cabeca{ padding:8px 10px 10px; border-bottom:1px solid var(--gray-100); text-align:right; }
.conta-cabeca strong{ display:block; font-size:var(--fs-sm); }
.conta-cabeca small{ color:var(--gray-500); font-size:var(--fs-xs); text-transform:capitalize; }

.conta-empresas{ display:block; margin:0; padding:4px 0; border-bottom:1px solid var(--gray-100); }

.conta-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:0; border-radius:var(--radius);
  background:transparent; color:var(--ink);
  font:inherit; font-size:var(--fs-sm); text-align:left; text-decoration:none;
  cursor:pointer;
}
.conta-item:hover{ background:var(--gray-100); }
.conta-item[disabled]{ opacity:.45; cursor:not-allowed; }
.conta-item.ativa{ font-weight:700; }
.conta-item.perigo{ color:var(--red); }

.conta-cor{ flex:none; width:10px; height:10px; border-radius:2px; }
.conta-icone{ flex:none; display:inline-flex; color:var(--gray-600); }
.conta-icone svg{ width:17px; height:17px; }
.conta-item.perigo .conta-icone{ color:var(--red); }

@media (max-width:640px){
  .conta-nome{ display:none; }
  .conta-botao{ padding:0 5px; }
}

/* Estrutura de pagina interna: topo, conteudo elastico e assinatura no fim.
   Rodape empurrado pelo conteudo, nao preso com position:fixed - barra fixa
   rouba altura util em todas as telas, e quem passa o dia em tabela sente. */
.app{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.app .topo{ flex:none; }
.app .conteudo{ flex:1 0 auto; }
.app .rodape-sistema{ flex:none; margin-top:auto; }

/* Modulos dentro da faixa superior, centralizados.
   Clicar no modulo leva a pagina principal dele; as areas internas
   aparecem no menu flutuante. */
.modulos{
  grid-area:menu;
  justify-self:center;
  display:flex;
  align-items:stretch;
  gap:2px;
  height:56px;
}
.modulo-wrap{ position:relative; display:flex; }

.modulo{
  display:flex;
  align-items:center;
  gap:6px;
  height:56px;
  padding:0 16px;
  border-bottom:3px solid transparent;
  color:rgba(255,255,255,.74);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  white-space:nowrap;
}
.modulo .seta{ width:11px; height:11px; opacity:.7; transition:transform .12s ease; }
.modulo:hover{ color:var(--white); background:var(--navy-700); }
.modulo.ativo{
  color:var(--white);
  background:var(--navy-700);
  border-bottom-color:var(--red);
}
.modulo:focus-visible{ outline-offset:-3px; }
.modulo-wrap:hover .modulo .seta,
.modulo-wrap:focus-within .modulo .seta{ transform:rotate(180deg); }

/* Menu flutuante das areas do modulo */
.submenu{
  position:absolute;
  top:100%;
  left:0;
  min-width:224px;
  padding:4px 0;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--red);
  border-radius:var(--radius);
  box-shadow:var(--shadow-3);
  z-index:60;

  /* Fechado sem display:none para manter transicao e leitura por teclado */
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}
.modulo-wrap:hover > .submenu,
.modulo-wrap:focus-within > .submenu{
  opacity:1;
  visibility:visible;
  transform:none;
}
/* Ultimos modulos abrem para a esquerda para nao sair da tela */
.modulos .modulo-wrap:nth-last-child(-n+2) > .submenu{ left:auto; right:0; }

.submenu a{
  display:block;
  padding:10px 16px;
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}
.submenu a:hover{ background:var(--gray-100); }
.submenu a.ativa{
  font-weight:700;
  color:var(--navy-800);
  background:var(--gray-100);
  box-shadow:inset 3px 0 0 var(--red);
}

/* Abaixo desta largura o menu desce para uma segunda faixa e rola */
@media (max-width:1200px){
  .topo{
    grid-template-columns:1fr auto;
    grid-template-areas:"marca direita" "menu menu";
    height:auto;
    padding:10px 16px 0;
    row-gap:8px;
  }
  /* Sem overflow aqui: rolagem lateral cortaria o menu flutuante.
     Os modulos quebram linha e o submenu continua escapando normalmente. */
  .modulos{
    justify-self:stretch;
    flex-wrap:wrap;
    height:auto;
    justify-content:flex-start;
  }
  .modulo{ height:44px; }
}

.titulo-pagina{
  margin:0 0 18px;
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:-.2px;
}

/* --------------------------------------------------------------------------
   Stepper - etapas de cadastro
   Passos de largura igual: assim o tracinho de ligacao e sempre simetrico,
   calculado a partir do proprio passo, sem numero magico.
   -------------------------------------------------------------------------- */
.passos{
  margin:0 0 20px;
  padding:20px 16px;
  background:var(--white);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-1);
  overflow-x:auto;
  scrollbar-width:thin;
}
.passos ol{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:0;
  padding:0;
  list-style:none;
  min-width:min-content;
}
.passo{
  position:relative;
  flex:0 0 150px;
}
.passo a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:2px 8px;
}
.passo .marca{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid var(--gray-300);
  /* Excecao deliberada a geometria reta do sistema: marcador de etapa
     redondo e convencao consolidada de stepper (ver design system). */
  border-radius:50%;
  background:var(--white);
  color:var(--gray-500);
  font-size:var(--fs-sm);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.passo .marca svg{ width:16px; height:16px; }
.passo .rotulo{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-500);
  text-align:center;
  line-height:1.3;
}

/* Ligacao entre um passo e o proximo */
.passo:not(:last-child)::after{
  content:"";
  position:absolute;
  top:16px;
  left:calc(50% + 22px);
  width:calc(100% - 44px);
  height:2px;
  background:var(--gray-300);
}

.passo.concluido .marca{
  background:var(--navy-600);
  border-color:var(--navy-600);
  color:var(--white);
}
.passo.concluido .rotulo{ color:var(--gray-700); }
.passo.concluido::after{ background:var(--navy-600); }

.passo.atual .marca{
  background:var(--navy-600);
  border-color:var(--navy-600);
  color:var(--white);
  box-shadow:0 0 0 3px rgba(42,67,116,.20);
}
.passo.atual .rotulo{ color:var(--ink); font-weight:700; }

.passo a:hover .rotulo{ color:var(--ink); }
.passo a:hover .marca{ border-color:var(--navy-500); }
.passo a:focus-visible{ outline:2px solid var(--navy-500); outline-offset:2px; }

@media (max-width:640px){
  .passo{ flex:0 0 118px; }
  .passo .rotulo{ font-size:var(--fs-xs); }
  .passo:not(:last-child)::after{ left:calc(50% + 20px); width:calc(100% - 40px); }
}

/* --------------------------------------------------------------------------
   Ficha - blocos de formulario em grade de 12 colunas
   -------------------------------------------------------------------------- */
.ficha{ padding-bottom:76px; } /* espaco para o botao flutuante nao cobrir nada */

.bloco{
  margin-bottom:16px;
  padding:20px;
  background:var(--white);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-1);
}
.bloco > h2{
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-700);
}
.oculto{ display:none; }

.grade{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px 16px;
}
.grade .campo{ margin-bottom:0; }
.c1{ grid-column:span 1; } .c2{ grid-column:span 2; } .c3{ grid-column:span 3; }
.c4{ grid-column:span 4; } .c5{ grid-column:span 5; } .c6{ grid-column:span 6; }
.c7{ grid-column:span 7; } .c8{ grid-column:span 8; } .c12{ grid-column:span 12; }

@media (max-width:960px){
  .c1,.c2,.c3,.c4{ grid-column:span 6; }
  .c5,.c6,.c7,.c8{ grid-column:span 12; }
}
@media (max-width:560px){
  .grade > .campo{ grid-column:span 12 !important; }
}

select.entrada{ appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gray-500) 50%),
                   linear-gradient(135deg,var(--gray-500) 50%,transparent 50%);
  background-position:calc(100% - 15px) 19px, calc(100% - 10px) 19px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

.ajuda{ margin:6px 0 0; font-size:var(--fs-xs); color:var(--gray-500); line-height:1.4; }
.ajuda.ok{ color:var(--green); }
.ajuda.erro{ color:var(--danger,var(--red)); }

/* Botao dentro do campo (buscar CNPJ, buscar CEP)
   O botao desenha a propria borda nos quatro lados e encosta no campo
   (top/right/bottom em 0). Antes ele tinha so a borda da esquerda e ficava
   1px para dentro, contando com a borda do input para fechar os outros tres
   lados - e nao fechava: sobre o fundo cinza do botao a linha do input
   sumia e o retangulo aparecia aberto em cima, na direita e embaixo. */
.btn-campo{
  position:absolute;
  top:0; bottom:0; right:0;
  display:flex; align-items:center; gap:6px;
  padding:0 12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--gray-100);
  color:var(--navy-700);
  font:inherit; font-size:var(--fs-xs); font-weight:700;
  cursor:pointer;
}
.btn-campo svg{ width:15px; height:15px; }
.btn-campo:hover{ background:var(--gray-200); }
.btn-campo[disabled]{ opacity:.55; cursor:progress; }
.campo-controle:has(.btn-campo) .entrada{ padding-right:104px; }

/* Campo e botao sao um retangulo so: se so o input mudasse de cor no hover
   e no foco, metade da moldura ficaria cinza e metade azul. */
.campo-controle:has(.entrada:hover) .btn-campo{ border-color:var(--gray-500); }
.campo-controle:has(.entrada:focus) .btn-campo{ border-color:var(--navy-600); }

/* --------------------------------------------------------------------------
   Segmentado - escolha unica com cara de botao (PF / PJ)
   Semanticamente sao radios: a escolha e exclusiva, e checkbox diria ao
   operador que ele pode marcar os dois.
   -------------------------------------------------------------------------- */
.segmentado{ display:inline-flex; border:1px solid var(--gray-300); }
.segmentado input{ position:absolute; opacity:0; width:0; height:0; }
.segmentado label{
  padding:10px 22px;
  background:var(--white);
  color:var(--gray-700);
  font-size:var(--fs-sm); font-weight:600;
  cursor:pointer;
  user-select:none;
}
.segmentado label + input + label{ border-left:1px solid var(--gray-300); }
.segmentado label:hover{ background:var(--gray-100); }
.segmentado input:checked + label{
  background:var(--navy-600);
  color:var(--white);
}
.segmentado input:focus-visible + label{ outline:2px solid var(--navy-500); outline-offset:2px; }

/* Barra de acoes no fim da ficha */
.barra-acoes{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:4px 0 8px;
}

/* Fim da proposta: os botoes ficam sob a folha, e a folha e centralizada.
   Encostados a direita, pareceriam pertencer a margem e nao ao documento. */
.barra-acoes-centro{ justify-content:center; }

/* --------------------------------------------------------------------------
   Botao de acao flutuante
   -------------------------------------------------------------------------- */
.fab-grupo{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

/* Botao principal: redondo, so o sinal de mais.
   Terceira excecao deliberada a geometria reta do sistema - ver o design
   system. As acoes que ele abre levam rotulo, entao o icone sozinho nunca
   precisa ser adivinhado. */
.fab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:0;
  border-radius:50%;
  background:var(--red);
  color:var(--white);
  cursor:pointer;
  box-shadow:var(--shadow-3);
  transition:background .12s ease, box-shadow .12s ease, transform .16s ease;
}
.fab svg{ width:24px; height:24px; }
.fab:hover{ background:var(--red-dark); box-shadow:0 10px 28px rgba(14,27,48,.28); }
.fab:active{ transform:scale(.96); }

/* Aberto, o "+" vira um "x" girando. */
.fab-grupo.aberto .fab{ transform:rotate(45deg); }
.fab-grupo.aberto .fab:active{ transform:rotate(45deg) scale(.96); }

.fab-acoes{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.fab-acao{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.fab-rotulo{
  padding:6px 12px;
  background:var(--navy-900);
  color:var(--white);
  font-size:var(--fs-sm);
  font-weight:600;
  white-space:nowrap;
  box-shadow:var(--shadow-2);
}
.fab-icone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--white);
  color:var(--navy-800);
  box-shadow:var(--shadow-2);
}
.fab-icone svg{ width:19px; height:19px; }
.fab-acao:hover .fab-icone{ background:var(--navy-600); color:var(--white); }
.fab-acao:hover .fab-rotulo{ background:var(--navy-700); }

@media (max-width:560px){
  .fab-grupo{ right:16px; bottom:16px; }
  .fab{ width:50px; height:50px; }
}

/* --------------------------------------------------------------------------
   Linha de tabela clicavel
   -------------------------------------------------------------------------- */
.tabela-clicavel tbody tr{ cursor:pointer; }
.tabela-clicavel tbody tr:focus-visible{
  outline:2px solid var(--navy-500);
  outline-offset:-2px;
}

/* Segurar apertado abre o painel. No celular esse mesmo gesto seleciona
   texto e chama o menu do navegador por cima - so ali eles saem de cena. */
@media (pointer:coarse){
  .tabela-clicavel tbody tr{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }
}

/* --------------------------------------------------------------------------
   Drawer lateral direito
   -------------------------------------------------------------------------- */
body.sem-rolagem{ overflow:hidden; }

.drawer-fundo{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(14,27,48,.42);
  opacity:0;
  transition:opacity .18s ease;
}
.drawer-fundo.aberto{ opacity:1; }

.drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:90;
  width:min(560px, 100vw);
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-left:3px solid var(--red);
  box-shadow:var(--shadow-3);
  transform:translateX(100%);
  transition:transform .18s ease;
}
.drawer.aberto{ transform:none; }

.drawer-topo{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  background:var(--navy-900);
  color:var(--white);
}
.drawer-rotulo{
  display:block;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.drawer-topo h2{
  margin:4px 0 0;
  font-size:var(--fs-xl);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.drawer-fechar{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  background:transparent;
  color:var(--white);
  cursor:pointer;
}
.drawer-fechar:hover{ background:rgba(255,255,255,.12); }
.drawer-fechar svg{ width:17px; height:17px; }

.drawer-corpo{
  flex:1 1 auto;
  overflow-y:auto;
  /* Painel lateral nao rola para o lado: ele e uma coluna estreita e fixa, e
     arrastar na horizontal para ler o fim de um endereco, de um link ou de uma
     relacao de itens e o oposto do que ele existe para fazer. O que nao couber
     quebra a linha - inclusive palavra sem espaco, como endereco de link e
     codigo de material. */
  overflow-x:hidden;
  padding:18px 20px 24px;
}
.drawer-corpo,
.drawer-corpo table,
.drawer-corpo td,
.drawer-corpo th,
.drawer-corpo p,
.drawer-corpo span,
.drawer-corpo a{ overflow-wrap:anywhere; min-width:0; }

/* Tabela dentro do painel nunca estica: as colunas dividem a largura que ha. */
.drawer-corpo table{ table-layout:fixed; width:100%; max-width:100%; }
.drawer-corpo h3{
  margin:20px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-700);
}
.drawer-corpo h3:first-of-type{ margin-top:8px; }
.drawer-status{ margin-bottom:4px; }

.pares{ margin:0; }
.pares .par{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid var(--gray-100);
}
.pares dt{ font-size:var(--fs-xs); font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.4px; padding-top:2px; }
.pares dd{ margin:0; font-size:var(--fs-sm); color:var(--ink); }

.tabela-itens{ font-size:var(--fs-xs); }
.tabela-itens td, .tabela-itens th{ padding:8px 10px; }
.tabela-itens tfoot th{
  background:var(--gray-100);
  border-top:2px solid var(--gray-300);
  font-size:var(--fs-sm);
  text-align:right;
}
.tabela-itens tfoot th:first-child{ text-transform:none; letter-spacing:0; }

.drawer-rodape{
  flex:none;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--gray-200);
  background:var(--gray-050);
}

/* Barra de evolução dentro de uma célula: menor e sem margem, para caber
   embaixo do carimbo sem esticar a linha da tabela. */
.evolucao-mini{ margin-top:5px; }
.evolucao-mini .evolucao-barra{ height:4px; }
.evolucao-mini .evolucao-nota{ font-size:11px; }

/* A conta do frete no painel: campos curtos lado a lado, com o resultado em
   destaque - quem digita o km quer ver o total mudando. */
.lg-frete{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:10px; }
.lg-frete .campo{ flex:1 1 90px; margin:0; }
.lg-frete .entrada{ text-align:right; }
.lg-frete-conta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--gray-200); border-radius:var(--radius);
  background:var(--gray-050); font-size:var(--fs-sm);
}
.lg-frete-conta strong{ font-size:15px; }

/* O quadro do "roteiro do dia" saiu da tela de logistica junto com o botao
   "Medir trajeto": o km de cada carga ja e medido sozinho quando o painel dela
   abre, e dois lugares dizendo quilometragem da mesma viagem e o comeco de
   alguem nao saber qual vale. As regras (.lg-roteiro, .lg-paradas, .lm-acoes)
   sairam com ele - a acao 'roteiro-dia' continua na API para quem quiser
   trazer o quadro de volta.  */

/* O romaneio fica no alto do painel: quem abre a carga costuma estar atras
   dele, e rolar ate o rodape para imprimir e um passo a mais sem motivo. */
.drawer-acoes-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

@media (max-width:560px){
  .drawer{ width:100vw; }
  .pares .par{ grid-template-columns:1fr; gap:2px; }
}

/* --------------------------------------------------------------------------
   Configurador do elevador
   -------------------------------------------------------------------------- */
.opcionais{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--gray-200);
}
.opcionais label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-700);
  cursor:pointer;
}
.opcionais input[type="checkbox"]{
  width:17px; height:17px;
  accent-color:var(--navy-600);
  border-radius:var(--radius);
}
.opcionais-titulo{
  width:100%;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-500);
}

.resumo-config{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  align-items:start;
}
@media (max-width:900px){ .resumo-config{ grid-template-columns:1fr; } }

/* Faixa de alcada do desconto */
.alcada{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Campo em moeda: prefixo fixo dentro do proprio campo */
.campo-moeda .prefixo-moeda{
  position:absolute;
  top:0; bottom:0; left:0;
  display:flex; align-items:center;
  padding:0 10px;
  border-right:1px solid var(--gray-300);
  background:var(--gray-100);
  color:var(--gray-700);
  font-size:var(--fs-sm);
  font-weight:700;
  pointer-events:none;
}
.campo-moeda .entrada{ padding-left:48px; }

/* Campo calculado: nao se digita nele, e a cor diz isso */
.entrada.somente-leitura{
  background:var(--gray-100);
  color:var(--gray-700);
  border-color:var(--gray-200);
  cursor:default;
}

/* Ficha tecnica em duas colunas: cabe na tela sem rolagem */
.pares-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}
@media (max-width:760px){ .pares-2col{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   Modal - so para decisao que muda o resultado e nao pode esperar
   -------------------------------------------------------------------------- */
.modal-fundo{
  position:fixed; inset:0; z-index:95;
  background:rgba(14,27,48,.45);
}
.modal{
  position:fixed;
  z-index:96;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(440px, calc(100vw - 32px));
  padding:22px;
  background:var(--white);
  border-top:3px solid var(--red);
  box-shadow:var(--shadow-3);
}
.modal h2{ margin:0 0 8px; font-size:var(--fs-lg); font-weight:700; }

/* O modal anda pela tela: o titulo e o cabecalho sao a alca, e por isso
   avisam com o cursor. Enquanto arrasta, nada dentro dele fica selecionavel
   - texto marcado no meio do movimento so atrapalha. */
.modal h2,
.modal-topo,
.modal-rodape{ cursor:move; }
/* Enquanto arrasta, nenhuma transicao: a caixa tem que ir para onde o
   ponteiro esta, e nao ir "chegando" la depois. O will-change avisa o
   navegador antes do primeiro pixel - sem ele, a promocao da camada acontece
   no meio do movimento e o modal da um tranco logo no comeco.
   Nada de "cursor:move" em todos os filhos: numa lista grande, refazer o
   estilo do modal inteiro custa justamente o quadro em que o arrasto comeca. */
.modal-arrastando{
  user-select:none;
  cursor:move;
  will-change:transform;
  transition:none !important;
}
.modal p{ margin:0 0 4px; font-size:var(--fs-sm); color:var(--gray-700); line-height:1.5; }
.modal-acoes{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

/* Registro desligado dentro de uma lista: continua legivel, mas sem disputar
   a atencao com quem esta em uso (fornecedor inativo, por exemplo). */
.tabela tr.linha-apagada td{ color:var(--gray-500); }

/* A linha em que a leitura para: o ano corrente do plano de depreciacao, o
   periodo em curso. Marca discreta - a tabela inteira continua legivel, e o
   olho so sabe onde esta o "hoje" dela. */
.tabela tr.linha-destaque td{
  background:var(--navy-50, #EEF2F8); font-weight:600;
}

/* A linha que acabou de nascer - a folha recem-gerada, na lista do mes. Numa
   lista de linhas parecidas, achar qual delas e a que se acabou de fazer e
   procurar; a marca verde responde antes da leitura. Ela dura o tempo daquela
   volta: no proximo carregamento da tela a linha ja e uma como as outras. */
.tabela tr.linha-nova td{
  background:var(--green-bg, #E9F6EE); font-weight:600;
}

#cfoUltimasTabela tbody tr.linha-destaque > td,
#cfoUltimasTabela tbody tr.linha-nova > td{
  box-shadow:none;
}

/* O detalhe embaixo do valor, na ficha de pares: e a data da consulta, o
   codigo, o "desde quando" - texto de apoio, e nao um segundo valor. */
.pares dd small{
  display:block; margin-top:2px;
  font-size:var(--fs-xs); color:var(--gray-500); font-weight:400;
}

/* --------------------------------------------------------------------------
   Documentos financeiros (NF, boleto e recibo em Contas a Receber)
   -------------------------------------------------------------------------- */

/* Titulo do bloco com acao a direita - o "Ações em massa" ao lado do nome da
   lista, para quem nao usa o botao direito. */
.bloco-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  /* O h2 perde a margem propria aqui embaixo, e sem esta o cabecalho encosta
     no que vem depois - a linha de titulo da tabela colada nos campos de
     pesquisa, sem ar nenhum entre as duas coisas. Quando havia um paragrafo de
     ajuda no meio, a margem dele disfarcava; tirado o paragrafo, o encosto
     apareceu. */
  margin-bottom:14px;
}
.bloco-topo h2{ margin:0; }

/* Campo na linha do titulo da tabela - a conta bancaria em que a tela esta
   trabalhando. Rotulo e seletor lado a lado, sem quebrar a linha: aqui ele
   divide o espaco com o titulo e com as acoes, e um campo empilhado abriria um
   degrau no cabecalho. */
.bloco-campo{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin-left:auto;
}
.bloco-campo label{
  font-size:12px;
  font-weight:600;
  color:var(--cinza-600, #55606E);
  white-space:nowrap;
}
.bloco-campo .entrada{
  min-width:210px;
  max-width:340px;
  height:34px;
  padding:0 10px;
  font-size:13px;
}

/* No celular o cabecalho vira duas linhas e o campo ocupa a largura toda: um
   seletor de 210px espremido ao lado do titulo nao mostra o nome da conta, que
   e justamente o que se precisa ler antes de gerar a remessa. */
@media (max-width:720px){
  .bloco-campo{ width:100%; margin-left:0; }
  .bloco-campo .entrada{ flex:1 1 auto; max-width:none; min-width:0; }
}

.contador-selecao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:6px;
  border-radius:10px;
  background:var(--red);
  color:var(--white);
  font-size:var(--fs-xs);
  font-weight:700;
}

/* Coluna compacta: tres selos curtos com dica de mouse. A tabela ja tem dez
   colunas - uma por documento a deixaria mais larga que a tela. */
.col-docs{ width:104px; }
.docs-selos{
  display:inline-flex;
  gap:3px;
  padding:2px;
  border:0;
  background:none;
  cursor:pointer;
}
.docs-selos .carimbo{ font-size:9.5px; padding:2px 6px; }
.docs-selos:hover .carimbo{ filter:brightness(.94); }

/* Cabecalho de secao dentro do menu do botao direito. */
.menu-secao{
  padding:8px 12px 4px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--gray-500);
}
.menu-contexto button.desativado{ opacity:.45; cursor:not-allowed; }

/* Resumo da confirmacao: quem confirma precisa reconhecer clientes e
   enquadramento sem abrir linha por linha. */
.doc-clientes,
.doc-fiscal{
  max-height:150px;
  overflow-y:auto;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:6px 10px;
}
.doc-cliente{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
  border-bottom:1px solid var(--gray-100);
  font-size:var(--fs-sm);
}
.doc-cliente:last-child{ border-bottom:0; }

/* Andamento do lote. */
.progresso{ margin:14px 0 6px; }
.progresso-barra{
  height:10px;
  border-radius:5px;
  background:var(--gray-200);
  overflow:hidden;
}
.progresso-barra span{
  display:block;
  height:100%;
  background:var(--red);
  transition:width .3s ease;
}
.progresso-numeros{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:var(--fs-sm);
  color:var(--gray-700);
}
.progresso-numeros .ok strong{ color:var(--green); }
.progresso-numeros .erro strong{ color:var(--red); }

.doc-itens{
  margin-top:14px;
  max-height:260px;
  overflow-y:auto;
  border-top:1px solid var(--gray-200);
}
.doc-item{
  display:grid;
  grid-template-columns:64px 1fr 110px;
  gap:10px;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid var(--gray-100);
  font-size:var(--fs-sm);
}
.doc-item .doc-erro{
  grid-column:1 / -1;
  color:var(--red);
  font-size:var(--fs-xs);
}

/* Cada documento no painel lateral. */
.doc-bloco{
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:12px;
}
.doc-bloco-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.doc-bloco .pares .par{ grid-template-columns:150px 1fr; }
.doc-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.doc-acoes .btn{ padding:6px 12px; font-size:var(--fs-xs); }

/* Nota do fornecedor no painel lateral.
   Cinco estrelas dizem de relance o peso dele nas compras aprovadas; o valor
   exato vem logo abaixo, nos indicadores - a estrela e o atalho da leitura,
   nao a informacao. */
.drawer-nota{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.drawer-estrelas{ display:inline-flex; gap:2px; font-size:18px; line-height:1; }
.drawer-estrelas .estrela{ color:var(--gray-300); }
.drawer-estrelas .estrela.cheia{ color:#E8A800; }
.drawer-nota .ajuda{ margin:0; }

/* Modal de formulario: a caixa de cadastro com muitos campos.
   O .modal nasce com 440px - largura de confirmacao, nao de ficha - e uma
   grade de 12 colunas ali dentro empilha rotulo sobre campo e estoura a
   altura da tela. Aqui a caixa ganha a largura de um formulario e rolagem
   propria: o conteudo passa a caber ou a rolar, em vez de ser cortado.
   Nao serve o .modal-largo, que e do documento A4 - aquele zera o padding e
   espera cabecalho e corpo proprios. */
.modal.modal-form{
  width:min(820px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* O rodape de acoes acompanha a rolagem: com a ficha inteira aberta, o botao
   de gravar ficaria abaixo da dobra da propria caixa. */
.modal.modal-form .modal-acoes{
  position:sticky;
  bottom:-22px;
  margin-top:18px;
  padding:12px 0 0;
  background:var(--white);
  box-shadow:0 -10px 12px -10px rgba(14,27,48,.18);
}

/* Revisao da folha fechada: a tabela, o resumo e os botoes pertencem ao mesmo
   documento. Duas rolagens escondiam linhas atras do rodape fixo; aqui so o
   modal rola, e as acoes ficam no fim natural do conteudo. */
#efModal{
  max-height:calc(100dvh - 64px);
}
#efModal .ficha{
  padding-bottom:0;
}
#efModal .tabela-rolagem{
  overflow:visible;
  max-height:none;
  padding-bottom:0;
}
#efModal .modal-acoes{
  position:static;
  margin:20px -22px -22px;
  padding:14px 22px;
  border-top:1px solid var(--gray-200);
  box-shadow:none;
}

/* Cadastro de veiculo: e formulario largo, nao folha A4. Ele deve caber na
   janela e rolar por dentro, mantendo Cancelar/Gravar visiveis no rodape. */
.modal.modal-form.modal-veiculo{
  width:min(820px, calc(100vw - 48px));
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
}
.modal.modal-form.modal-veiculo .ficha{ padding-bottom:0; }
.modal.modal-form.modal-veiculo .modal-acoes{
  bottom:0;
  margin-left:-22px;
  margin-right:-22px;
  margin-bottom:-22px;
  padding:12px 22px;
  border-top:1px solid var(--gray-200);
}

/* Modal do documento: largura da folha A4, nao da tela.
   210mm da folha + 40px de respiro do miolo do modal. */
.modal-largo{
  top:24px;
  bottom:24px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(calc(210mm + 40px), calc(100vw - 32px));
  max-width:none;
  display:flex;
  flex-direction:column;
  padding:0;
}
.modal-topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  background:var(--navy-900);
  color:var(--white);
}

/* ---- Separação do almoxarifado, em modal ---------------------------------
   Dar destino aos lotes ocupa a tela inteira daquele minuto: o painel lateral
   deixava metade da lista de obras aparecendo do lado, disputando o olho de
   quem está conferindo caixa. O cabeçalho é o mesmo do painel, o corpo rola
   sozinho e as ações ficam presas no pé. */
.sep-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 20px;
  background:var(--navy-900); color:var(--white);
}
.sep-topo h2{ margin:4px 0 0; font-size:var(--fs-xl); font-weight:700; }
.sep-topo .drawer-rotulo{
  display:block; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.sep-topo .drawer-sub{ margin:4px 0 0; font-size:var(--fs-sm); color:rgba(255,255,255,.72); }
.sep-topo .drawer-fechar{ background:none; border:0; color:inherit; cursor:pointer; padding:4px; }
.sep-topo .drawer-fechar svg{ width:20px; height:20px; }

.sep-corpo{ flex:1 1 auto; overflow-y:auto; padding:16px 20px; }
#drawer .modal-acoes{
  display:flex; justify-content:space-between; gap:10px;
  padding:12px 20px; border-top:1px solid var(--gray-200);
}

/* O BLOCO DA FASE. Cada um é uma caixa em potencial: o título diz a fase e o
   kit, e o campo ao lado carimba o lote em tudo que está ali dentro - que é
   como o almoxarifado trabalha, uma caixa de cada vez. */
.sep-bloco{ margin:0 0 18px; }
.sep-bloco-topo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:8px 10px;
  background:var(--gray-100); border:1px solid var(--gray-200);
  border-radius:var(--radius) var(--radius) 0 0;
}
.sep-bloco-topo strong{ display:block; font-size:var(--fs-sm); }
.sep-bloco-topo .celula-nota{ display:block; color:var(--gray-600); }
.sep-bloco-lote{
  display:flex; flex-direction:column; gap:3px;
  font-size:var(--fs-xs); color:var(--gray-600);
  flex:0 0 210px;
}
.sep-bloco-lote .entrada{ height:32px; min-height:32px; font-size:var(--fs-sm); }
.sep-bloco .sep-tabela{ margin:0; }
.modal-rotulo{
  display:block;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.modal-topo h2{ margin:4px 0 0; font-size:var(--fs-xl); font-weight:700; }
.modal-dica{
  margin:0;
  padding:10px 20px;
  background:var(--orange-bg);
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs);
  color:#7A3A00;
}
.modal-topo-acoes{ display:flex; align-items:center; gap:6px; }
.zoom{
  width:28px; height:28px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  background:transparent;
  color:var(--white);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.zoom:hover{ background:rgba(255,255,255,.12); }
.zoom-valor{
  min-width:44px;
  text-align:center;
  font-size:var(--fs-xs);
  font-weight:700;
  color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums;
}

.modal-corpo{
  flex:1 1 auto;
  overflow:auto;
  padding:20px;
  background:var(--gray-100);
}
/* A folha tem largura de A4; dentro do modal ela centraliza e rola. */
.modal-corpo .doc{
  margin:0 auto;
  box-shadow:var(--shadow-2);
}
.modal-rodape{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:12px 20px;
  border-top:1px solid var(--gray-200);
  background:var(--gray-050);
}
.modal-estado{
  margin-right:auto;
  font-size:var(--fs-xs);
  color:var(--gray-500);
}
.modal-estado.ok{ color:var(--green); font-weight:700; }

/* --------------------------------------------------------------------------
   Menu de contexto da tabela
   -------------------------------------------------------------------------- */
.menu-contexto{
  position:fixed;
  z-index:120;
  min-width:196px;
  padding:4px 0;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--red);
  box-shadow:var(--shadow-3);
}
.menu-contexto button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 16px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
/* O icone acompanha a cor do item - por isso currentColor, e nao um cinza
   fixo: no item de exclusao ele fica vermelho junto com o texto, e no item
   desligado desbota junto. */
.menu-contexto button svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--gray-500);
}
.menu-contexto button:hover{ background:var(--gray-100); }
.menu-contexto button:hover svg{ color:inherit; }
/* Quantas linhas o menu vai afetar - so aparece na selecao multipla. */
.menu-titulo{
  padding:8px 16px 6px;
  border-bottom:1px solid var(--gray-200);
  margin-bottom:4px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--gray-700);
}

.menu-contexto button.perigo{ color:var(--red); }
.menu-contexto button.perigo svg{ color:var(--red); }
.menu-contexto button.perigo:hover{ background:var(--red-bg); }

/* Separador antes do bloco destrutivo: excluir nao pode ficar encostado
   em "baixar PDF" na pressa de um clique. */
.menu-contexto .menu-divisor{
  height:1px; margin:4px 0;
  background:var(--gray-200);
}

/* Item sem efeito no momento (Desfazer sem nada para desfazer). Continua
   visivel para nao mudar de lugar a cada abertura do menu. */
.menu-contexto button[disabled]{
  color:var(--gray-500);
  cursor:default;
  opacity:.55;
}
.menu-contexto button[disabled]:hover{ background:transparent; }

/* Linha selecionada: so o fundo muda. O inset vermelho era desenhado em
   cada celula, entao aparecia como um risco na divisoria de toda coluna. */
.tabela-clicavel tr.marcada > td{ background:var(--gray-100); }

/* Contas a Pagar / Receber: a soma da seleção ao lado do título. */
.fin-titulo-soma{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.fin-titulo-soma h2{ margin:0; }
.fin-soma-selecao{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px; border-radius:999px;
  background:var(--gray-100); border:1px solid var(--gray-200);
  font-size:var(--fs-sm); color:var(--gray-700); white-space:nowrap;
}
.fin-soma-selecao strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
.fin-soma-selecao[hidden]{ display:none; }

/* Contas a Receber: a faixa de cada mês de vencimento. */
.tabela tr.fin-mes > td{
  padding:7px 12px; background:var(--gray-100);
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--gray-700); border-top:1px solid var(--gray-200);
}
.tabela tr.fin-mes > td span{ margin-left:8px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--gray-500); }
.tabela tr.fin-mes-atual > td{ background:#FCF3D4; color:#7A5A00; }
.tabela tr.fin-mes-previsto > td{ background:#EAF1F9; color:#17558F; }

/* ---- Integração Bancária: a lista de contas ------------------------------
   Sem botões na linha: as ações moram no botão direito (#ibMenu). A linha
   mostra só o que se lê de relance - o banco, a conta e em que pé está cada
   serviço. */
.ib-dica{
  display:flex; align-items:center; gap:8px;
  margin:-4px 0 14px; padding:8px 12px;
  font-size:var(--fs-xs); color:var(--gray-600);
  background:var(--gray-100); border-radius:var(--radius);
}
.ib-dica svg{ width:16px; height:16px; flex:none; color:var(--gray-500); }
.ib-tabela > tbody > tr.ib-linha{ cursor:context-menu; }
.ib-tabela > tbody > tr.ib-linha > td{ padding-top:12px; padding-bottom:12px; vertical-align:middle; }
.ib-tabela > tbody > tr.ib-linha:hover > td{ background:var(--gray-100); }
.ib-tabela > tbody > tr.ib-inativa > td{ opacity:.6; }
.ib-tabela .carimbo{ display:inline-flex; width:auto; margin-bottom:3px; white-space:nowrap; }
.ib-tabela td > .origem-mini{ display:block; }
.ib-conta{ display:flex; align-items:center; gap:12px; min-width:0; }
.ib-conta strong{ margin-right:6px; }
.ib-conta .origem-mini{ display:block; margin-top:2px; }
.ib-conta-selo{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--white); border:1px solid var(--gray-200);
  font-size:12px; font-weight:800; letter-spacing:.3px; color:var(--gray-700);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   Campos editaveis dentro do documento
   -------------------------------------------------------------------------- */
.doc-editavel .ed{
  cursor:text;
  border-bottom:1px dashed var(--gray-300);
}
.doc-editavel .ed:hover{ background:#FFF6D6; border-bottom-color:var(--orange); }
.doc-editavel .ed.editando{
  outline:2px solid var(--navy-500);
  outline-offset:1px;
  background:var(--white);
}
.doc-editavel .ed.salvando{ opacity:.5; }
.doc-editavel .ed.salvo{ background:var(--green-bg); }

/* Cartao inteiro em edicao livre */
.doc-editavel [data-card]{ cursor:default; }
.doc-editavel [data-card]:hover{ outline:1px dashed var(--gray-300); outline-offset:2px; }
.doc-editavel [data-card].card-editando{
  outline:2px solid var(--navy-500);
  outline-offset:2px;
  background:#FFFDF3;
}
.doc-editavel [data-card].salvando{ opacity:.55; }

/* Cartao que deixou de ser gerado pelo sistema */
.doc-card-reescrito{ border-left:3px solid var(--orange-500); }

.faixas{ display:flex; flex-direction:column; gap:10px; }
.faixa{
  padding:12px 14px;
  border:1px solid var(--gray-200);
  background:var(--gray-050);
}
.faixa-rotulo{
  display:block;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-500);
}
.faixa strong{
  display:block;
  margin-top:4px;
  font-size:var(--fs-lg);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:left;
  color:var(--ink);
}
.faixa-destaque{
  border-color:var(--navy-600);
  border-left-width:4px;
  background:var(--white);
  box-shadow:var(--shadow-1);
}
.faixa-destaque strong{ color:var(--navy-700); }

/* Impressao: a folha da proposta tem CSS proprio em proposta.css */
@media print{
  .topo, .passos, .rodape-sistema, .barra-acoes, .fab, .aviso, .titulo-pagina{ display:none !important; }
  body{ background:#fff; }
  .conteudo{ padding:0; max-width:none; }
}

/* Estado vazio */
.cartao.vazio{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:220px;
  text-align:center;
  color:var(--gray-500);
}
.cartao.vazio svg{ width:40px; height:40px; color:var(--gray-300); }
.cartao.vazio p{ margin:0; font-size:var(--fs-sm); }

/* Miolo do sistema: largura util centralizada na pagina */
.conteudo{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding:24px;
}

/* --------------------------------------------------------------------------
   Cabecalho da pagina: titulo e ferramentas na mesma linha
   -------------------------------------------------------------------------- */
.cabecalho-pagina{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-bottom:18px;
}
.cabecalho-pagina .titulo-pagina{ margin:0; }
.acoes-titulo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.filtros{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.filtros .btn{ min-height:38px; }

.campo-busca{ position:relative; display:flex; align-items:center; }
.campo-busca svg{
  position:absolute; left:10px;
  width:16px; height:16px;
  color:var(--gray-500);
  pointer-events:none;
}
.campo-busca input{
  width:260px;
  height:38px;
  padding:0 12px 0 34px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  font:inherit;
  font-size:var(--fs-sm);
}
.campo-busca input:focus{ border-color:var(--navy-600); }
@media (max-width:640px){ .campo-busca input{ width:100%; } }

/* --------------------------------------------------------------------------
   Periodo: um calendario so, com o intervalo marcado nele
   -------------------------------------------------------------------------- */
.periodo{ position:relative; }
.periodo-botao{
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
}
.periodo-botao:hover{ background:var(--gray-100); }
.periodo-botao svg{ width:16px; height:16px; color:var(--gray-500); flex:0 0 auto; }

/* O botao ja nasce com a largura do maior rotulo possivel - "01/01/2026 a
   31/12/2026", 23 caracteres. Sem isto ele encolhe ao limpar o filtro e
   empurra tudo o que vem depois na barra, e o proximo clique erra o alvo.
   O texto fica alinhado a esquerda: centralizado, "Período" ficaria dancando
   no meio da caixa a cada troca. */
.periodo-botao{ min-width:calc(23ch + 52px); justify-content:flex-start; }
.periodo-botao span{ text-align:left; }

.calendario{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:110;
  width:268px;
  padding:12px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--red);
  box-shadow:var(--shadow-3);
}
.cal-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:var(--fs-sm);
}
.cal-nav{
  width:26px; height:26px;
  border:1px solid var(--gray-300);
  background:var(--white);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.cal-nav:hover{ background:var(--gray-100); }

.cal-grade{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.cal-dia-semana{
  padding:4px 0;
  text-align:center;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--gray-500);
}
.cal-dia{
  height:30px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  cursor:pointer;
}
.cal-dia:hover{ background:var(--gray-100); }
.cal-dia.fora{ color:var(--gray-300); }
.cal-dia.entre{ background:var(--gray-100); }
.cal-dia.ponta{ background:var(--navy-600); color:var(--white); font-weight:700; }
.cal-dia.hoje{ box-shadow:inset 0 0 0 1px var(--red); }

/* Agenda dentro do modal de datas */
.agenda{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--gray-200);
  background:var(--white);
}
.agenda .cal-dia{ height:34px; font-size:var(--fs-sm); }

/* Parcela ajustada a mao */
.parcela-ajustada td{ background:#FFF8E6; }

.cal-atalhos{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--gray-200);
}
.cal-atalhos button{
  padding:5px 9px;
  border:1px solid var(--gray-300);
  background:var(--white);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:600;
  cursor:pointer;
}
.cal-atalhos button:hover{ background:var(--gray-100); }

/* Lista trocando de conteudo pela busca */
#areaLista.carregando{ opacity:.55; transition:opacity .12s ease; }

.filtros select{
  height:38px;
  padding:0 10px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  font:inherit;
  font-size:var(--fs-sm);
}

/* Tudo o que fica na linha do titulo tem a mesma altura.
   O select de situacao do RH usa .entrada - a mesma classe dos formularios -
   e trazia dela o min-height de 44px, que vence um height de 38px. Ao lado de
   uma busca de 38px o desencontro aparece na hora: dois campos vizinhos com
   alturas diferentes na mesma faixa. Aqui a barra manda, e nao a origem da
   classe de cada controle. */
.acoes-titulo .filtros .entrada,
.acoes-titulo .filtros select,
.acoes-titulo .filtros input,
.filtros .entrada,
.filtros input[type="search"],
.filtros input[type="text"],
.filtros input[type="date"]{
  height:38px;
  min-height:38px;
}

/* A seta do select e desenhada com o fundo, e a posicao dela foi calculada
   para os 44px do formulario - a 38px da barra ela desceria para a base. */
.filtros select.entrada{
  background-position:calc(100% - 15px) 16px, calc(100% - 10px) 16px;
}

/* --------------------------------------------------------------------------
   Numero de origem da obra (SM)
   -------------------------------------------------------------------------- */
.origem{
  display:inline-block;
  padding:3px 8px;
  background:var(--navy-600);
  color:var(--white);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.4px;
  white-space:nowrap;
}

/* Origem embaixo do numero, na mesma celula: sao a mesma coisa vista de
   dois lados - o numero identifica a proposta, o SM identifica a obra que
   nasceu dela. Coluna separada gastava largura para repetir o contexto.

   O numero da proposta e o dado principal (negrito); o SM vem colado
   embaixo, miudo e leve, como informacao de apoio. */
.col-proposta{ font-weight:800; line-height:1.15; }
.origem-mini{
  display:block;
  margin-top:0;
  font-size:10px;
  font-weight:400;
  letter-spacing:.2px;
  line-height:1.1;
  color:var(--gray-500);
}

/* Equipamento resumido em uma linha */
.equipamento{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--gray-700);
}

.origem-destaque{
  margin:14px 0 4px;
  padding:12px 14px;
  background:var(--navy-900);
  color:var(--white);
}
.origem-destaque span{
  display:block;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.origem-destaque strong{
  display:block;
  margin-top:2px;
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:.6px;
}

/* Linha do tempo da obra */
.rastro{ margin:0; padding:0; list-style:none; }
.rastro li{
  position:relative;
  padding:0 0 14px 18px;
  border-left:2px solid var(--gray-200);
}
.rastro li:last-child{ border-left-color:transparent; padding-bottom:0; }
.rastro li::before{
  content:"";
  position:absolute;
  left:-5px; top:4px;
  width:8px; height:8px;
  background:var(--red);
}
.rastro .quando{
  display:block;
  font-size:var(--fs-xs);
  color:var(--gray-500);
  font-variant-numeric:tabular-nums;
}
.rastro .evento{ font-size:var(--fs-sm); font-weight:700; }
.rastro .detalhe{ display:block; font-size:var(--fs-xs); color:var(--gray-700); line-height:1.5; }
/* A linha do tempo dos DOCUMENTOS da venda, no painel de propostas: os mesmos
   marcos do rastro, mas cada um com o link de volta - copiar e remandar sem
   procurar a mensagem antiga e o gesto que o comercial faz o dia todo. */
.linha-doc .carimbo{ margin-right:6px; }
.linha-doc .marco-acoes{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* O degrau, e nao a data, na coluna da esquerda: a leitura da venda e a de uma
   escada de tres - proposta, contrato, aditivos -, e o que se quer saber de
   relance e em qual deles ela esta. */
.linha-doc .quando{ font-weight:700; letter-spacing:.4px; }
.linha-doc .detalhe.ok{ color:var(--green, #1E7A3C); font-weight:600; }

/* O contrato ao lado da ORIGEM, e nao embaixo do status: o contrato de compra e
   venda leva o proprio SM como numero, entao e ali que ele se le. Embaixo do
   carimbo ele competia com a situacao da venda, e "Aprovada" + "assinado"
   pareciam dois estagios do mesmo estado - sao duas coisas diferentes. */
.pv-contrato{
  margin-left:6px; padding-left:6px; border-left:1px solid var(--gray-300, #C9D0D8);
  white-space:nowrap; color:var(--gray-500, #6B7683);
}
.pv-contrato.assinado{ color:var(--green, #1E7A3C); font-weight:700; }

/* Os quatro links do contrato, um por parte. Cada botao diz DE QUEM ele e -
   mandar "o link" sem dizer isso faria a testemunha assinar como cliente. */
.linha-doc .marco-partes{ display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.linha-doc .marco-partes .btn-mini{ font-size:11px; letter-spacing:.3px; }
.linha-doc .marco-partes .btn-ok{
  border-color:var(--green, #1E7A3C); color:var(--green, #1E7A3C);
}

/* A CONTRATADA nao e botao: ela assina com a firma da diretoria, e o que
   aparece aqui e o estado dela - nao ha o que copiar. Sem link cadastrado, o
   aviso e para ir cadastrar a firma em Administracao > Empresas do grupo. */
.linha-doc .marco-partes span.btn-mini{ cursor:default; }
.linha-doc .marco-partes .btn-falta{
  border-color:var(--amber, #B7791F); color:var(--amber, #B7791F);
}

/* A etapa assinada e a resposta da pergunta de todo dia: ela ganha o visto
   verde e o marcador cheio, para o olho parar nela antes de ler a lista. */
.linha-doc li.marco-ok{ border-left-color:var(--green, #1E7A3C); }
.linha-doc li.marco-ok::before{ background:var(--green, #1E7A3C); }
.linha-doc li.marco-ok .quando{ color:var(--green, #1E7A3C); font-weight:700; }

/* Os botoes do documento ficam ACIMA da linha do tempo e nao esperam por ela:
   quem abriu o painel para gerar um adendo nao deveria olhar para
   "Carregando..." antes de poder clicar. */
.doc-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.doc-acoes .btn{ flex:0 1 auto; }
.doc-acoes .ajuda{ margin:0; }

.rastro .modulo{
  display:inline-block;
  margin-right:6px;
  padding:1px 6px;
  background:var(--gray-100);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--gray-700);
}

/* --------------------------------------------------------------------------
   Paginacao
   -------------------------------------------------------------------------- */
/* Sem linha em cima: a paginacao ja vem depois da tabela, e a borda dela
   fechava o bloco duas vezes. */
.paginacao{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin-top:10px;
  padding-top:8px;
}
.paginacao-info{
  margin-right:auto;
  font-size:var(--fs-xs);
  color:var(--gray-500);
  font-variant-numeric:tabular-nums;
}
/* Botao pequeno: paginacao e navegacao, e nao acao - nao precisa do tamanho
   de um botao de formulario. */
.pag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 7px;
  border:1px solid var(--gray-300);
  border-radius:6px;
  background:var(--white);
  color:var(--navy-800);
  font-size:var(--fs-xs);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-decoration:none;
}
.pag:hover{ background:var(--gray-100); }
.pag.atual{
  background:var(--navy-600);
  border-color:var(--navy-600);
  color:var(--white);
}
.pag.desativada{
  opacity:.45;
  pointer-events:none;
}
.pag-reticencia{ padding:0 2px; color:var(--gray-500); }

/* A paginacao tambem existe dentro de caixas montadas pelo JS, onde ela e
   um <button> - o navegador nao herda a fonte nele. */
button.pag{ font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; }

/* --------------------------------------------------------------------------
   Cartoes de indicador
   -------------------------------------------------------------------------- */
.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:18px;
}
@media (max-width:820px){ .kpis{ grid-template-columns:1fr; } }

/* Quatro indicadores: os quatro na mesma linha. Com o grid de tres, o
   ultimo cairia sozinho embaixo e pareceria outro assunto. */
.kpis-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .kpis-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){  .kpis-4{ grid-template-columns:1fr; } }

.kpi{
  position:relative;
  padding:16px 18px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-left:4px solid var(--navy-600);
  box-shadow:var(--shadow-1);
}
.kpi-rotulo{
  display:block;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-500);
}
.kpi-valor{
  display:block;
  margin:6px 0 4px;
  font-size:24px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:left;
  color:var(--ink);
}
.kpi-nota{ font-size:var(--fs-xs); color:var(--gray-700); }

.kpi-alerta{ border-left-color:var(--orange-500); }
.kpi-alerta .kpi-valor{ color:var(--orange); }
.kpi-ok{ border-left-color:var(--green); }
.kpi-ok .kpi-valor{ color:var(--green); }

/* Conciliacao: um cartao de saldo por conta bancaria, e o total quando pedido. */
.conc-saldos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.conc-saldo-total{ border-left-color:var(--navy-600); background:var(--gray-050); }
.conc-saldo-total[hidden]{ display:none; }
.conc-somar{ margin-left:auto; }

.kpi-barra{
  margin-top:10px;
  height:6px;
  background:var(--gray-200);
}
.kpi-barra i{
  display:block;
  height:100%;
  background:var(--navy-600);
}
.kpi-ok .kpi-barra i{ background:var(--green); }

.titulo-pagina .icone-titulo{
  margin-right:8px;
  font-size:1.05em;
  line-height:1;
}

.cartao{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:20px;
}

.rodape-sistema{
  padding:16px 24px 20px;
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--gray-500);
  background:var(--white);
  border-top:1px solid var(--gray-200);
}

/* O relogio anda ao lado da assinatura, e discreto: e referencia, nao aviso.
   Numero tabular para os segundos nao empurrarem a linha a cada tique. */
.rodape-agora{
  margin-left:10px;
  padding-left:10px;
  border-left:1px solid var(--gray-200);
  color:var(--gray-500);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media (max-width:560px){
  .rodape-agora{
    display:block; margin:4px 0 0; padding:0; border:0; white-space:normal;
  }
}

/* --------------------------------------------------------------------------
   Cobranca bancaria (CNAB 240)
   -------------------------------------------------------------------------- */

/* O selo do boleto mora na MESMA celula da situacao, colado nela: ter boleto no
   banco e parte do estado do titulo. So o icone - o que o banco respondeu esta
   na cor e no title, e escrever "registrado" ali dobraria a largura da coluna. */
.selo-boleto{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:6px; vertical-align:-5px;
  border:1px solid currentColor; border-radius:4px;
  cursor:help;
}
.selo-boleto svg{ width:13px; height:13px; }
.selo-boleto-verde{ color:var(--green, #16A34A); }
.selo-boleto-vermelho{ color:var(--red, #e30613); }
.selo-boleto-cinza{ color:var(--gray-500); }

/* O resultado da remessa e da conciliacao: caixas que aparecem uma vez, logo
   depois da acao, e somem na proxima navegacao. */
.cnab-caixa h2{ margin:0 0 4px; font-size:var(--fs-md); }
.cnab-baixar{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }

/* Os convenios cadastrados, dentro do modal: clicar num deles carrega a ficha
   logo abaixo - um formulario so para todos. */
.cnab-lista{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.cnab-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); font:inherit; color:var(--ink);
}
.cnab-item:hover{ border-color:var(--navy-600); background:var(--gray-100, #f2f4f7); }
.cnab-item strong{ display:block; font-size:var(--fs-sm); }
.cnab-item strong .carimbo{ margin-left:6px; vertical-align:1px; }
.cnab-item span{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }

/* O padrao do banco fica fechado: sao onze campos que a maioria nunca toca. */
.cnab-padrao{
  margin:12px 0; padding:10px 12px;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  background:var(--gray-050, #f7f8fa);
}
.cnab-padrao > summary{
  cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--gray-700);
}
.cnab-padrao[open] > summary{ margin-bottom:8px; }

/* --------------------------------------------------------------------------
   Ordem de servico da troca de peca
   -------------------------------------------------------------------------- */

/* O checklist do material no modal: linha estreita para a quantidade e larga
   para o item - e o inverso do que o navegador faria sozinho. */
.os-itens{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.os-item{ display:flex; gap:6px; align-items:center; }
.os-item .entrada{ min-height:38px; }
.os-item .os-item-nome{ flex:1 1 auto; }
.os-item .os-item-qtd{ flex:0 0 90px; }
.os-item .os-item-fora{
  flex:0 0 auto; width:34px; min-height:38px; padding:0;
  border:1px solid var(--gray-300); border-radius:8px;
  background:var(--white); color:var(--gray-500); cursor:pointer; font-size:16px;
}
.os-item .os-item-fora:hover{ color:var(--red); border-color:var(--red); }

/* O plano de liberacao dentro do modal: cada linha e uma parcela editavel -
   numero, valor, data e forma na mesma altura. */
.os-parcelas-cabeca,
.os-parcela{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 150px 120px;
  gap:8px;
  align-items:center;
}
/* O cabecalho nao pode empurrar o vizinho: cada rotulo fica dentro da sua
   coluna e some antes de invadir a de baixo. */
.os-parcelas-cabeca{
  margin:12px 0 4px;
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--gray-500);
  white-space:nowrap;
}
.os-parcelas-cabeca span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.os-parcelas{ display:flex; flex-direction:column; gap:6px; }
.os-parcela .entrada{ min-height:38px; min-width:0; }
.os-parcela-seq{
  font-size:var(--fs-sm); color:var(--gray-600, #5a6472); white-space:nowrap;
}
@media (max-width:640px){
  .os-parcelas-cabeca{ display:none; }
  .os-parcela{ grid-template-columns:34px minmax(0,1fr); }
}

/* As liberacoes no painel lateral: cada uma e um cartao com o estado e, se
   ainda nao saiu, o botao que a manda para Contas a Pagar. */
.os-liberacoes{ display:flex; flex-direction:column; gap:8px; }
.os-liberacao{
  padding:10px 12px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  background:var(--gray-050, #f7f8fa);
}
.os-liberacao-topo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:2px;
}
.os-liberacao .ajuda{ display:block; margin:0 0 6px; }
.os-liberacao .btn-mini{ width:100%; }

/* Rotulo e valor dentro do painel lateral: a coluna da esquerda e legenda, e
   por isso ela e cinza e estreita - o assunto e o que esta a direita. */
.drawer-corpo .doc-pares td{
  padding:7px 0;
  border-top:1px solid var(--gray-200);
  font-size:var(--fs-sm);
  vertical-align:top;
}
.drawer-corpo .doc-pares tr:first-child td{ border-top:0; }
.drawer-corpo .doc-pares td:first-child{ width:44%; color:var(--gray-500); }

/* A resposta dada no primeiro passo continua a vista no segundo, com o caminho
   de volta ao lado: quem errou o cartao nao precisa fechar o modal. */
#agTipoAviso{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; padding-bottom:10px;
  border-bottom:1px solid var(--gray-200);
}
#agTipoAviso strong{ font-size:var(--fs-sm); }

/* O bloco que so existe para o terceirizado: destacado porque ele cria divida
   - o que se digita ali vira Contas a Pagar no mesmo gesto. */
.os-contratacao{
  margin:12px 0;
  padding:12px 14px;
  border:1px solid var(--orange, #C25A00);
  border-left-width:3px;
  border-radius:8px;
  background:var(--orange-bg, #FFF6EC);
}
.os-contratacao > strong{ display:block; margin-bottom:8px; font-size:var(--fs-sm); }

/* A sirene do rodape: so aparece enquanto toca. Icone fixo ao lado do relogio
   viraria enfeite - e no dia em que piscasse de verdade ninguem notaria. */
.rodape-alerta{
  display:none;
  vertical-align:-4px;
  margin-left:10px;
  color:var(--red, #e30613);
}
.rodape-alerta svg{ width:18px; height:18px; display:block; }

/* Seis segundos de pisca: 10 ciclos de 0,6s. O som sao dois bips e acaba - quem
   estava longe da mesa perderia o aviso inteiro se o icone tambem sumisse em um
   segundo. E a sirene que espera a pessoa voltar. */
.rodape-alerta.tocando{
  display:inline-block;
  animation:rodape-sirene .6s ease-in-out 10;
}
@keyframes rodape-sirene{
  0%   { opacity:.15; transform:scale(.9); }
  50%  { opacity:1;   transform:scale(1.18); }
  100% { opacity:.15; transform:scale(.9); }
}
@media (prefers-reduced-motion:reduce){
  .rodape-alerta.tocando{ animation:rodape-sirene-suave .6s ease-in-out 10; }
  @keyframes rodape-sirene-suave{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
}

/* --------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */
.tabela{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  font-size:var(--fs-sm);
}
.tabela th{
  padding:10px 12px;
  text-align:left;
  white-space:nowrap;
  background:var(--gray-100);
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--gray-700);
}
.tabela td{
  padding:9px 12px;
  border-bottom:1px solid var(--gray-200);
  vertical-align:middle;
}
.tabela tbody tr:hover{ background:var(--gray-100); }
.tabela th.num, .tabela td.num{ text-align:right; }
.tabela td.num-mono{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Coluna centralizada. Vem depois de .num de proposito: combinada com ela, o
   numero mantem a largura fixa por digito e so muda de alinhamento. */
.tabela th.centro, .tabela td.centro{ text-align:center; }

/* --------------------------------------------------------------------------
   Engenharia - entrega e evolucao

   A cor NAO carrega o recado sozinha: o aviso de prazo sempre traz o texto
   com os dias. Vermelho e verde sao justamente o par que some para quem tem
   daltonismo, e prazo estourado nao pode depender de enxergar cor.
   -------------------------------------------------------------------------- */

/* Data de entrega, com o aviso de prazo embaixo */
.tabela td.col-entrega{ line-height:1.3; }
.entrega-nota{
  display:block;
  font-size:var(--fs-xs); font-weight:600;
  color:var(--gray-700);
}
.entrega-atencao{ color:var(--orange); font-weight:700; }
.entrega-atrasada{ color:var(--red); font-weight:700; }
/* Asterisco de data repactuada: pequeno, mas com title - marca sem legenda
   e adivinhacao. */
.entrega-marca{ color:var(--orange); font-weight:800; cursor:help; }

/* --------------------------------------------------------------------------
   Ocorrencias da obra

   Lista, nao cartao. Cada ocorrencia e uma linha de duas alturas - texto e
   assinatura - com a marca de resolvida a esquerda. O bloco cinza que havia
   aqui gastava a altura de tres ocorrencias para mostrar uma.
   -------------------------------------------------------------------------- */
.ocorrencias{ list-style:none; margin:8px 0 0; padding:0; }

.oc{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--gray-200);
}
.oc:last-child{ border-bottom:0; }

/* Redonda como a da timeline: as duas dizem "concluido", e forma diferente
   para o mesmo gesto faz o operador reaprender em cada tela. */
.oc-marca{
  flex:none;
  width:20px; height:20px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:2px solid var(--gray-300);
  border-radius:50%;
  background:var(--white);
  color:transparent;
  cursor:pointer;
}
.oc-marca svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.oc-marca:hover{ border-color:var(--navy-500); color:var(--gray-300); }

.oc-texto{ min-width:0; }
.oc-corpo{ display:block; font-size:var(--fs-sm); color:var(--ink); }
.oc-assina{ display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--gray-500); }

.oc-feita .oc-marca{ border-color:var(--green); background:var(--green); color:var(--white); }
.oc-feita .oc-corpo{ text-decoration:line-through; color:var(--gray-500); }

/* Contador de abertas no titulo: a pergunta e "sobrou alguma coisa?", e ela
   se responde sem contar linha por linha. */
.pill-aberta{
  display:inline-block;
  margin-left:8px; padding:1px 8px;
  background:var(--orange-bg);
  color:var(--orange);
  font-size:var(--fs-xs); font-weight:800;
  text-transform:none; letter-spacing:0;
}

/* Menu de acoes da obra: titulos separam as etapas das acoes de estado */
.menu-obra{ min-width:236px; max-height:80vh; overflow-y:auto; }
.menu-titulo{
  margin:6px 0 2px;
  padding:0 16px;
  font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--gray-500);
}
/* Etapa ja concluida: o "check" aparece, entao o item vira "reabrir" */
.menu-obra button svg{ color:var(--gray-300); }
.menu-obra button.feito svg{ color:var(--green); }
.menu-obra button.feito span{ color:var(--gray-500); text-decoration:line-through; }

/* Evolucao por etapas de engenharia */
.evolucao{ display:grid; gap:5px; }
.evolucao-barra{
  height:8px;
  background:var(--gray-200);
  overflow:hidden;
}
.evolucao-barra i{
  display:block; height:100%;
  background:var(--navy-600);
  transition:width .2s ease;
}
.evolucao-nota{
  font-size:var(--fs-xs); color:var(--gray-700);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Barra vazia: cinza claro em vez de trilho vazio, para nao parecer que a
   pagina nao carregou. */
.evolucao-barra i[style*="width:0.00%"]{ background:transparent; }

/* --------------------------------------------------------------------------
   Painel da obra - cabecalho com contador
   -------------------------------------------------------------------------- */
.drawer-obra{ align-items:flex-start; gap:14px; transition:background .15s ease; }
.drawer-obra .drawer-id{ min-width:0; }

/* Estado da obra pintado no cabecalho do painel, em cor cheia.
   Uma cor por vez: finalizada ganha de tudo; obra parada e entrega vencida
   dividem o vermelho, porque as duas pedem acao agora. O que separa uma da
   outra e o carimbo e o contador, que dizem por escrito qual e qual - a cor
   marca a urgencia, nao o motivo. */
.topo-atrasada,
.topo-bloqueada { background:#C81018; }
.topo-finalizada{ background:#0F7A3D; }

/* Os tons sao os da paleta puxados ate onde o texto branco ainda passa em
   contraste. Vermelho e verde na cor original ficariam em torno de 4:1, que
   serve para o titulo grande mas nao para o rotulo miudo em cima dele. */

/* Rotulo e subtitulo sobem de opacidade sobre cor cheia.
   Os 62% do cabecalho azul dao 2.9:1 sobre o vermelho - texto miudo que
   ninguem le. Medido: 85% e o piso para 4.5:1 nos dois fundos. */
.topo-realce .drawer-rotulo{ color:rgba(255,255,255,.88); }
.topo-realce .drawer-sub{ color:rgba(255,255,255,.92); }

/* Sobre cor cheia (vermelho ou verde) o veu clareia um pouco mais, senao o
   degrade some dentro da propria cor do cabecalho. */
.topo-realce .contador{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.08));
  border-left-color:rgba(255,255,255,.75);
}
.topo-realce .contador strong,
.topo-realce .contador span{ color:#fff; }

.drawer-sub{
  display:block; margin-top:2px;
  font-size:var(--fs-xs); color:var(--gray-500);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* O numero grande sozinho seria ambiguo: a palavra embaixo diz se sao dias
   para entregar ou dias de atraso. Cor nunca carrega esse recado sozinha. */
/* Coluna da direita do cabecalho: contador em cima, carimbo da situacao
   embaixo. Os dois encostam na mesma borda direita, entao leem como um
   bloco so - prazo e estado da obra. */
.drawer-medidor{
  flex:none;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.drawer-selo .carimbo{ font-size:10px; padding:2px 8px; }

/* Contador compacto, em degrade sobre o azul do cabecalho: fundo claro
   chapado virava mancha branca ali. O veu escurece de cima para baixo, o
   texto fica branco e a barra da esquerda continua dizendo a urgencia. */
.contador{
  flex:none;
  padding:4px 12px;
  border-left:3px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.05));
  text-align:right;
  line-height:1.15;
}
.contador strong{
  display:block;
  font-size:19px; font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.contador span{ font-size:var(--fs-xs); color:rgba(255,255,255,.88); }
.contador-atencao{ border-left-color:var(--orange-500); }
.contador-atencao strong{ color:#FFDCA8; }
.contador-atrasada{
  border-left-color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.10));
}
.contador-atrasada strong{ color:#fff; }
.contador-atrasada span{ color:#fff; font-weight:700; }

/* --------------------------------------------------------------------------
   Timeline vertical das etapas

   O trilho e um pseudo-elemento no <li>, nao uma linha solta: assim ele
   nasce e morre junto do item e nunca sobra pendurado embaixo da ultima
   etapa. O ultimo item corta o proprio trilho.
   -------------------------------------------------------------------------- */
.timeline{ list-style:none; margin:10px 0 0; padding:0; }

.etapa{
  position:relative;
  display:flex; align-items:flex-start; gap:12px;
  padding:0 0 18px 0;
}
.etapa::before{
  content:'';
  position:absolute;
  left:7px; top:18px; bottom:0;
  width:2px;
  background:var(--gray-200);
}
.etapa:last-child{ padding-bottom:0; }
.etapa:last-child::before{ display:none; }

/* Redondo - quarta excecao registrada a regra de canto reto do sistema
   (as outras sao radio, marcador do stepper e FAB). Marcador de etapa numa
   linha do tempo e a mesma forma do stepper: ponto de um percurso. Quadrado
   ali leria como caixa de selecao, que e outra coisa - selecionar varios. */
/* Ponto pequeno, e nao botao redondo: o roteiro tem oito estagios ou mais, e
   marca grande transformava a lista numa coluna de bolas. O que se le e o
   nome do estagio; a marca so diz se ele fechou. */
.etapa-marca{
  flex:none;
  width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:2px solid var(--gray-300);
  border-radius:50%;
  background:var(--white);
  color:transparent;                 /* o "check" so aparece quando concluida */
  cursor:pointer;
  z-index:1;
}
.etapa-marca svg{
  width:9px; height:9px;
  fill:none; stroke:currentColor; stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
}
.etapa-marca:hover{ border-color:var(--navy-500); color:var(--gray-300); }

.etapa-texto{ padding-top:0; min-width:0; }
.etapa-texto strong{ display:block; font-size:var(--fs-sm); color:var(--ink); }
.etapa-quando{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }

/* Concluida: trilho preenchido ate ela e marca cheia. */
/* Verde e a cor de "esta etapa fechou" no sistema inteiro (carimbo verde da
   carteira). O trilho ate ela acompanha, entao o quanto a obra andou se le
   pela altura do verde, sem contar bolinha por bolinha. */
.etapa-feita::before{ background:var(--green); }
.etapa-feita .etapa-marca{
  border-color:var(--green);
  background:var(--green);
  color:var(--white);
}
.etapa-feita .etapa-quando{ color:var(--gray-700); }

/* A primeira em aberto: e onde a obra parou. Anel para o olho achar sem
   ler a lista inteira - e o texto em negrito, porque so o anel seria cor. */
.etapa-atual .etapa-marca{
  border-color:var(--navy-600);
  box-shadow:0 0 0 2px rgba(58,88,150,.18);
}
.etapa-atual .etapa-texto strong{ color:var(--navy-800); font-weight:800; }
.etapa-atual .etapa-quando{ color:var(--navy-700); font-weight:700; }

/* --------------------------------------------------------------------------
   A timeline com a COR da etapa

   Cada estágio carrega a cor da sua etapa do processo (--cor, vinda do
   servidor). Concluída, a marca e o trilho ficam nela; a atual ganha o anel
   da mesma cor. O verde genérico dizia só "fechou"; a cor diz TAMBÉM de que
   frente aquilo era - e é a mesma cor do gráfico da semana e do cronograma
   que o cliente recebe.
   -------------------------------------------------------------------------- */
.etapa-feita[style*="--cor"]::before{ background:var(--cor); }
.etapa-feita[style*="--cor"] .etapa-marca{
  border-color:var(--cor);
  background:var(--cor);
}
.etapa-atual[style*="--cor"] .etapa-marca{
  border-color:var(--cor);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cor) 22%, transparent);
}
.etapa-atual[style*="--cor"] .etapa-texto strong{ color:var(--cor); }

/* O cabeçalho da etapa: nome à esquerda, data à direita. Lendo de cima a
   baixo, a coluna das datas responde sozinha "quando cada coisa aconteceu". */
.etapa-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.etapa-data{
  flex:none;
  font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
  color:var(--gray-500); white-space:nowrap;
}
.etapa-feita .etapa-data{ color:var(--gray-700); font-weight:600; }
.etapa-texto{ flex:1 1 auto; }

/* --------------------------------------------------------------------------
   Origem da obra - o bloco que abre o painel

   Quatro respostas em grade: que proposta é essa, quando foi aprovada, para
   quando está prometida e quem vendeu. É o que se confere antes de agir.
   -------------------------------------------------------------------------- */
.od-origem{
  border:1px solid var(--gray-200);
  margin:0 0 16px;
  background:var(--white);
}

/* Uma informação por linha: ícone, rótulo e valor, lidos da esquerda para a
   direita. Em grade de colunas, nome de vendedor e data disputavam a mesma
   largura e o texto longo era cortado. */
.od-linha{
  display:flex; align-items:baseline; gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--gray-100);
}
.od-linha:last-child{ border-bottom:0; }

.od-ic{ flex:none; width:16px; height:16px; align-self:center; }
.od-ic svg{ width:100%; height:100%; display:block; }

.od-rot{
  flex:none; width:112px;
  font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.4px; color:var(--gray-500);
}
.od-dado{ flex:1 1 auto; min-width:0; }
.od-val{
  display:block; font-size:var(--fs-md); color:var(--ink); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-extra{ display:block; font-size:var(--fs-xs); color:var(--gray-600); margin-top:1px; }

/* Entrega repactuada: a linha que vale hoje ganha o fundo âmbar, e a de baixo
   mostra a data do contrato riscada - o "de onde para onde" da obra. */
.od-realce{ background:#FFF8E6; }
.od-realce .od-rot{ color:#8A6A00; }
.od-realce .od-val{ font-weight:800; }
.od-nota{ background:var(--gray-050); }
.od-riscada{ text-decoration:line-through; color:var(--gray-500); font-weight:600; }

/* --------------------------------------------------------------------------
   Termômetro do cronograma

   A evolução em uma barra horizontal dividida nas etapas, cada segmento na
   cor da sua. Concluída fica sólida; a atual, listrada (está acontecendo); as
   que vêm depois, cinza. Ler a barra é ver o caminho inteiro de uma vez - a
   timeline logo abaixo é quem detalha.
   -------------------------------------------------------------------------- */
.tm{ margin:0 0 18px; }
.tm-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tm-topo h3{ margin:0; }
.tm-pct{ font-size:var(--fs-xl); font-weight:800; color:var(--ink); letter-spacing:-.02em; }

.tm-trilho{
  display:flex; gap:2px;
  margin:8px 0 6px;
  height:16px;
}
/* Cada segmento é um BOTÃO: clicar abre embaixo o que aquela etapa pede.
   A barra deixou de ser só um retrato e virou o roteiro da obra. */
.tm-seg{
  flex:1 1 0;
  padding:0; border:0;
  background:var(--gray-200);
  border-radius:2px;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.tm-seg:hover{ filter:brightness(.92); transform:scaleY(1.18); }
.tm-seg:focus-visible{ outline:2px solid var(--navy-600); outline-offset:2px; }
/* A escolhida cresce e ganha o anel da própria cor - é o que liga a barra ao
   bloco que abriu embaixo. */
.tm-escolhida{
  transform:scaleY(1.35);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--cor) 40%, transparent);
}
.tm-seg:first-child{ border-radius:7px 2px 2px 7px; }
.tm-seg:last-child{ border-radius:2px 7px 7px 2px; }
.tm-feita{ background:var(--cor); }
/* A atual não é "meio feita": ela está EM CURSO, e a listra diz isso sem
   inventar um percentual que ninguém mediu. */
.tm-atual{
  background:repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--cor) 55%, white) 0 5px,
    color-mix(in srgb, var(--cor) 18%, white) 5px 10px
  );
  box-shadow:inset 0 0 0 1px var(--cor);
}
.tm-pe{
  display:flex; justify-content:space-between; gap:10px;
  font-size:var(--fs-xs); color:var(--gray-600);
}
.tm-agora{ font-weight:700; color:var(--ink); }

/* --------------------------------------------------------------------------
   O detalhe da etapa aberta

   Sai embaixo da barra, com a faixa na cor da etapa: os documentos, os links e
   as marcações QUE SÃO DELA. Substituiu a lista do roteiro - doze linhas
   sempre abertas dizendo "pendente" eram a maior parte do painel e a menor
   parte da resposta.
   -------------------------------------------------------------------------- */
.ed{
  margin-top:10px; padding:10px 12px;
  border:1px solid var(--gray-200);
  border-left:3px solid var(--cor);
  background:var(--gray-050);
}
.ed-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ed-cab strong{ font-size:var(--fs-md); color:var(--ink); }
.ed-data{ font-size:var(--fs-xs); color:var(--gray-600); font-variant-numeric:tabular-nums; }

/* A linha da validação: o estado à esquerda, os dois gestos à direita. */
.ed-val{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px solid var(--gray-200);
}
.ed-val-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.ed-val-txt strong{ font-size:var(--fs-sm); color:var(--ink); }
.ed-val-txt span{ font-size:var(--fs-xs); color:var(--gray-600); }
.ed-val-ic{ flex:none; display:flex; align-items:center; gap:8px; }
.ed-nota{ margin:2px 0 8px; font-size:var(--fs-sm); color:var(--gray-700); }

/* A informação que muda o comportamento de quem lê: assinar agenda as
   vistorias. Em linha de ajuda cinza ela passava batida. */
.ed-enfase{
  margin:0 0 8px; padding:7px 10px;
  background:#EAF3EC; border-left:3px solid var(--green);
  font-size:var(--fs-sm); color:var(--ink);
}

/* --------------------------------------------------------------------------
   Os dois ícones de "mandar ao cliente" - o avião e a carta

   Ficam na linha da validação, à direita do estado dela. O avião copia o
   endereço; a carta abre o e-mail já escrito. A reação é a MESMA nos dois - um
   pulo com onda saindo do botão -, porque o gesto é o mesmo: isto foi mandado.
   Por serem desenho, e não frase, eles avisam piscando em vez de trocar de
   texto como os botões comuns.
   -------------------------------------------------------------------------- */
.ed-env{
  position:relative;
  flex:none; width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gray-300); border-radius:50%;
  background:var(--white); color:var(--cor);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.ed-env svg{ width:15px; height:15px; display:block; }
.ed-env:hover{
  border-color:var(--cor);
  background:color-mix(in srgb, var(--cor) 8%, white);
  transform:translate(1px, -1px);
}
.ed-env:focus-visible{ outline:2px solid var(--navy-600); outline-offset:2px; }

/* O splash: o avião dá um pulo para a frente enquanto uma onda sai dele. */
.ed-env.splash{ animation:envio-voo .55s ease-out; }
.ed-env.splash::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--cor);
  animation:envio-onda .9s ease-out forwards;
}
@keyframes envio-voo{
  0%   { transform:translate(0, 0)      scale(1); }
  35%  { transform:translate(5px, -5px) scale(1.18); }
  70%  { transform:translate(-2px, 2px) scale(.94); }
  100% { transform:translate(0, 0)      scale(1); }
}
@keyframes envio-onda{
  0%   { opacity:.85; transform:scale(1); }
  100% { opacity:0;   transform:scale(2.3); }
}
@media (prefers-reduced-motion: reduce){
  .ed-env.splash{ animation:none; }
  .ed-env.splash::after{ animation:envio-onda .4s linear forwards; }
}

.ed-acao{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.ed-rot{
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.4px;
  color:var(--gray-500);
}
.ed-docs{ margin-top:4px; }
.ed-docs .etapa-docs{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Numa obra de vários equipamentos, cada par RPI+RAC leva o nome do elevador -
   e ele quebra a linha, para os pares não virarem uma fila só. */
.rel-carro{
  flex:0 0 100%;
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--gray-600); margin-top:4px;
}

/* Só para leitor de tela: o botão do segmento precisa dizer de que etapa é. */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* As folhas para imprimir, no modal de Vistorias: uma linha por elevador, com
   o RPI e o RAC daquele equipamento. */
.im-linha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid var(--gray-100);
}
.im-linha:last-child{ border-bottom:0; }
.im-linha .ed-rot{ flex:0 0 92px; }

/* O link de validação e o documento assinado, dentro do cartão da revisão. */
.rev-link{ display:flex; align-items:center; gap:10px; margin:2px 0 10px; flex-wrap:wrap; }

/* A observação que o cliente escreveu ao assinar: ela é o miolo do que a
   validação trouxe, e por isso sai em bloco, e não numa linha de par. */
.rev-nota{
  margin:2px 0 10px; padding:8px 10px;
  background:#F7FAFE; border:1px solid #D9E4F2; border-left:3px solid var(--navy-600);
  border-radius:2px;
}
.rev-nota p{ margin:2px 0 0; font-size:var(--fs-sm); color:var(--ink); line-height:1.45; }
.rev-abrir{ font-size:var(--fs-xs); color:var(--gray-600); }
.rev-abrir:hover{ color:var(--red); }
.revisoes details[data-pendente] > summary strong{ color:var(--orange, #E8730C); }

/* --------------------------------------------------------------------------
   Tabela que vira cartao no celular

   Rolagem lateral resolve no desktop e nao resolve no telefone: quem programa
   entrega esta no patio, com o celular na mao, e arrastar a tabela para o lado
   para ler a data da carga e a pior forma de perguntar "o que sai hoje". Cada
   linha vira um cartao, e o rotulo da coluna vem no lugar do cabecalho - por
   isso cada <td> carrega data-rotulo.
   ------------------------------------------------------------------------ */
@media (max-width:760px){
  .tabela-cartoes thead{ display:none; }
  .tabela-cartoes,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td{ display:block; width:auto; }

  .tabela-cartoes tr{
    border:1px solid var(--gray-200); border-radius:var(--radius);
    margin-bottom:10px; padding:4px 2px; background:var(--white);
  }
  .tabela-cartoes td{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    border:0; padding:7px 12px; text-align:left;
  }
  .tabela-cartoes td + td{ border-top:1px solid var(--gray-100); }
  .tabela-cartoes td[data-rotulo]::before{
    content:attr(data-rotulo);
    font-size:var(--fs-xs); color:var(--gray-500); text-transform:uppercase;
    letter-spacing:.4px; flex:0 0 auto;
  }
  /* O conteudo alinha a direita do rotulo, e a nota da celula quebra embaixo. */
  .tabela-cartoes td .celula-nota{ display:block; text-align:right; }
  .tabela-cartoes .tabela-rolagem{ overflow:visible; }
}

/* Anulada: a vistoria que sobrou depois da obra ser liberada.
   Fica na lista, apagada e riscada - apagar a linha esconderia o que a obra
   chegou a programar, e mante-la acesa cobraria uma visita que ninguem mais
   vai fazer. Ela nao entra na conta do roteiro (ver eng_roteiro_montar). */
.etapa-anulada{ opacity:.45; }
.etapa-anulada .etapa-texto strong,
.etapa-anulada .etapa-link{ text-decoration:line-through; }
.etapa-anulada .etapa-marca{ border-color:var(--gray-400); background:var(--gray-100); color:var(--gray-500); }

/* --------------------------------------------------------------------------
   Tabela proporcional

   As colunas dividem a largura disponivel em porcentagem, e o conteudo que
   nao couber e cortado com reticencia. E o oposto do comportamento padrao:
   sem isso, uma razao social longa estica a coluna, empurra as vizinhas e a
   tabela sai rolando para o lado - a pessoa perde a coluna de prazo de vista
   justamente por causa do nome do cliente.

   O texto cortado nunca some de vez: toda celula truncada leva o valor
   inteiro no title, entao passar o mouse mostra o que faltou.

   Largura minima abaixo da qual truncar deixa de ajudar e passa a esconder:
   ali a tabela volta a rolar, que e o mal menor.
   -------------------------------------------------------------------------- */
/* min-width 0 de proposito: a tabela cabe SEMPRE na largura do card, em vez
   de forcar barra de rolagem horizontal. Coluna fora do campo de visao e
   coluna que ninguem le - e pior que coluna escondida, porque a pessoa nem
   sabe que ela existe. Quem nao cabe sai por media query e continua
   disponivel no painel da obra. */
.tabela-proporcional{ table-layout:fixed; min-width:0; width:100%; }
.tabela-proporcional th,
.tabela-proporcional td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* A celula de evolucao empilha barra e texto: recortar ela inteira cortaria
   a barra pela metade. Quem trunca la dentro e a nota. */
.tabela-proporcional td.col-evolucao{ white-space:normal; }

/* A coluna de situacao entra na divisao como as outras.
   Fora daqui ela encolhe ate o maior carimbo (width:1% + min-width no
   carimbo), o que numa tabela de largura fixa empurrava o total para alem
   de 100% e reabria a rolagem lateral. */
.tabela-proporcional th.col-status,
.tabela-proporcional td.col-status{ width:12%; }
.tabela-proporcional .carimbo{ min-width:0; }

/* Controle de comissao: quase toda celula empilha o valor e uma nota embaixo,
   e a ultima leva botao. Com o corte por reticencia da tabela proporcional a
   nota sumia e o botao esbarrava na borda do card - aqui o texto quebra, a
   linha cresce e o botao ocupa a coluna inteira, sem estourar. */
.cm-tabela th,
.cm-tabela td{ text-align:left; }
.cm-tabela td{ white-space:normal; vertical-align:middle; }
.cm-tabela td .celula-nota{ white-space:normal; line-height:1.3; }
.cm-tabela td form{ margin:0; }
.cm-tabela td .btn{
  width:100%; min-height:30px; padding:5px 8px;
  font-size:var(--fs-xs); white-space:nowrap;
}
.cm-tabela tfoot .celula-nota{ font-weight:400; }

/* O carimbo que tambem e botao: mesma pastilha da linha, com o cursor e o
   realce dizendo que ali se clica. */
button.cm-acao{
  border:1px solid transparent; cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:600;
}
button.cm-acao:hover{ filter:brightness(.95); box-shadow:var(--shadow-1); }

/* Colunas que saem quando a tela aperta.
   A ordem de sacrificio e a de quem menos decide pauta: primeiro o
   equipamento, depois a cidade. Nada se perde - o painel da obra mostra
   tudo, inclusive consultor e data de aprovacao, que nem estao na tabela. */
@media (max-width:1100px){ .tabela-proporcional .c-equip{ display:none; } }
@media (max-width:860px){  .tabela-proporcional .c-cidade{ display:none; } }

/* Telas estreitas: sobram cinco colunas e o respiro interno vira o que
   ainda da para ceder sem tirar informacao da tela. */
@media (max-width:620px){
  .tabela-proporcional th,
  .tabela-proporcional td{ padding-left:7px; padding-right:7px; font-size:var(--fs-xs); }
  .tabela-proporcional .carimbo{ min-width:0; padding:4px 6px; }
}

/* Carteira de obras: todas as colunas precisam permanecer acessiveis.
   Ela ocupa 100% da area disponivel; a rolagem fica apenas como escape
   quando a tela realmente nao comporta todas as colunas. */
.tabela-engenharia{
  min-width:0;
  width:100%;
  table-layout:fixed;
}
.tabela-engenharia .c-cidade,
.tabela-engenharia .c-equip{ display:table-cell!important; }
.tabela-engenharia th:nth-child(1),
.tabela-engenharia td:nth-child(1){ width:9%!important; }
.tabela-engenharia th:nth-child(2),
.tabela-engenharia td:nth-child(2){ width:22%!important; }
.tabela-engenharia th:nth-child(3),
.tabela-engenharia td:nth-child(3){ width:13%!important; }
.tabela-engenharia th:nth-child(4),
.tabela-engenharia td:nth-child(4){ width:14%!important; }
.tabela-engenharia th:nth-child(5),
.tabela-engenharia td:nth-child(5){ width:13%!important; }
.tabela-engenharia th:nth-child(6),
.tabela-engenharia td:nth-child(6){ width:15%!important; }
.tabela-engenharia th.col-status,
.tabela-engenharia td.col-status{
  width:14%!important;
  min-width:0;
}
.tabela-engenharia .carimbo{
  min-width:0;
  width:100%;
  white-space:nowrap;
}

/* Tabela larga rola dentro do proprio bloco, nunca a pagina inteira */
.tabela-rolagem{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding-bottom:2px;
}

/* --------------------------------------------------------------------------
   Tabela que rola TAMBEM na vertical
   --------------------------------------------------------------------------
   A de dentro de modal, que nao pode crescer sem fim. Sem isto, um max-height
   na caixa apenas CORTA a tabela: overflow-y e hidden ali em cima, e as linhas
   de baixo somem sem barra nenhuma dizendo que existem - o modal parecia ter
   dez colaboradores quando tinha trinta.

   O cabecalho gruda no topo: rolar trinta linhas e perder o nome das colunas
   obriga a rolar de volta so para saber qual numero e qual. */
.tabela-rolagem.rola-y{
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tabela-rolagem.rola-y thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--gray-050,#F7F9FB);
  box-shadow:inset 0 -1px 0 var(--gray-300,#C9D0D8);
}

/* --------------------------------------------------------------------------
   Tabela com todas as colunas na esquerda (registro de contas)
   A leitura desta tela e por coluna, de cima para baixo: com valor a direita
   e carimbo centralizado, o olho tinha tres pontos de partida na mesma linha.
   Vale so onde a classe estiver - a alinhamento a direita do dinheiro segue
   sendo o certo nas tabelas que somam coluna.
   -------------------------------------------------------------------------- */
.tabela-esquerda th,
.tabela-esquerda td,
.tabela-esquerda td.num,
.tabela-esquerda th.num{ text-align:left; }
.tabela-esquerda .carimbo{ justify-content:flex-start; }
/* O campo DENTRO da celula acompanha: a regra acima alinha th e td, mas o
   input tem alinhamento proprio - e um valor digitado encostado na borda
   direita, numa tabela toda a esquerda, e o que se le como coluna torta. */
.tabela-esquerda td .entrada,
.tabela-esquerda td input,
.tabela-esquerda td .num{ text-align:left; }

/* Texto que nao cabe termina em reticencias, sem empurrar as outras colunas.
   Precisa de um bloco proprio: max-width em <td> so vale com table-layout
   fixo, e fixar a tabela inteira quebraria as colunas curtas. O texto
   completo continua no title. */
.truncar{
  display:block;
  max-width:30ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.truncar.origem-mini{ max-width:30ch; }

/* --------------------------------------------------------------------------
   Caixa flutuante (pedido de liberacao da fase)
   Abre onde o mouse estava e se arrasta pelo cabecalho: quem pede a liberacao
   esta lendo a linha da fase, e um modal no centro da tela tira justamente
   isso do campo de visao. Sem fundo escurecido, pelo mesmo motivo.
   -------------------------------------------------------------------------- */
.flutuante{
  position:fixed;
  z-index:130;
  width:min(420px, calc(100vw - 24px));
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--red);
  box-shadow:var(--shadow-3);
}
.flutuante-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--gray-200);
  background:var(--gray-100);
  cursor:move;
  user-select:none;
  font-size:var(--fs-sm);
}
.flutuante-largo{ width:min(600px, calc(100vw - 24px)); }

/* Caixa que carrega uma tabela: largura pelo conteudo, ate quase a janela
   inteira. Rolagem lateral dentro de um flutuante e o pior dos dois mundos -
   a barra fica escondida e a coluna da direita nunca aparece. */
.flutuante-tabela{ width:min(1080px, calc(100vw - 32px)); }
.flutuante-tabela .tabela-rolagem{ overflow-x:visible; }
.flutuante-tabela .tabela{ width:100%; }
.flutuante-tabela .truncar{ max-width:22ch; }
.flutuante-corpo{ padding:14px; max-height:min(70vh, 620px); overflow-y:auto; }

/* Execucao por fase: marcar a fase, ver o valor e - quando ela nao fica com
   o contratado da tela - escolher embaixo quem assume. */
.lista-fases{ list-style:none; margin:12px 0; padding:0; }
.lp-fase{
  padding:10px 0;
  border-top:1px solid var(--gray-200);
  display:grid;
  grid-template-columns:1fr 150px;
  gap:8px 12px;
  align-items:center;
}
.lp-fase:first-child{ border-top:0; }
.fase-marca{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--fs-sm); }
.fase-marca input{ width:16px; height:16px; }
.fase-outro{ grid-column:1 / -1; padding:6px 0 2px 24px; }
.flutuante-corpo .form-linha{ margin-bottom:10px; }
.flutuante-corpo .acoes-bloco{ margin-top:12px; }

/* Linha que se seleciona com Ctrl e Shift nao pode arrastar texto junto:
   o gesto e escolher registros, e o texto pintado de azul so atrapalha. */
.tabela-selecionavel tbody tr{ user-select:none; cursor:pointer; }
.tabela-selecionavel tbody tr.marcada > td{
  background:var(--navy-50, var(--gray-100));
  box-shadow:inset 0 -1px 0 var(--gray-300);
}
.tabela-selecionavel tbody tr.marcada > td:first-child{
  box-shadow:inset 3px 0 0 var(--navy-600), inset 0 -1px 0 var(--gray-300);
}

/* Conta vencida: a linha inteira avisa, e nao so o carimbo no fim dela. */
/* Parcela repactuada: apagada, e nao escondida. Ela foi combinada com o cliente
   um dia e ele pode perguntar por ela - mas o saldo dela ja esta representado
   nas parcelas novas, e por isso ela nao entra em conta nenhuma. A opacidade
   diz isso antes de o carimbo ser lido. */
.tabela tr.linha-repactuada > td{ opacity:.45; }
.tabela tr.linha-repactuada .num-mono{ text-decoration:line-through; }
.tabela tr.linha-repactuada:hover > td{ opacity:.75; }

.tabela tr.linha-alerta > td:first-child{ box-shadow:inset 3px 0 0 var(--red); }
.tabela tr.linha-alerta .num-mono{ color:var(--red); }

/* Realce laranja: o titulo pago de uma contratacao que caiu. Diferente do
   vencido - ali falta pagar, aqui pagou-se pelo que nao vai acontecer -, e por
   isso o fundo inteiro muda: e uma linha para alguem ir atras, nao uma data
   para acompanhar. */
.tabela tr.linha-atencao{ background:#FFF6EC; }
.tabela tr.linha-atencao > td:first-child{ box-shadow:inset 3px 0 0 var(--orange-500, #C25A00); }
.tabela tr.linha-atencao .num-mono{ color:#8A4200; }
.tabela tr.linha-atencao:hover{ background:#FFEFDD; }

/* Linha que a busca da tela deixou de fora. Sai do fluxo em vez de sumir do
   documento: a ordem do ranking continua a mesma quando a busca e limpa. */
.tabela tr.cl-fora{ display:none !important; }

/* Navegacao de mes: seta, mes/ano, seta. O mes fica no meio porque e ele que
   se le - as setas sao o gesto, nao a informacao. */
.mes-nav{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 4px;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); overflow:hidden;
}
.mes-nav:hover{ border-color:var(--gray-500); }
/* Serve a LINK e a BOTAO: no cabecalho a seta navega (trocar o mes recarrega a
   lista); dentro de modal ela so muda o valor, porque recarregar no meio de um
   preenchimento jogaria fora o que ja foi digitado. O gesto e o mesmo, e a mao
   nao deve aprender dois controles para ele - por isso o botao e zerado aqui e
   herda o desenho do link. */
.mes-nav .mes-seta{
  display:flex; align-items:center; justify-content:center;
  width:28px; align-self:stretch;
  padding:0; border:0; background:none; font-family:inherit;
  color:var(--gray-500); text-decoration:none; font-size:20px; line-height:1;
  cursor:pointer;
}
.mes-nav .mes-seta:hover{ color:var(--navy-600); }
.mes-nav .mes-atual{
  min-width:112px; padding:0 4px;
  text-align:center; font:inherit; font-weight:600; text-transform:capitalize;
  color:var(--ink); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Na linha do titulo, o navegador de mes tem a ALTURA DA BUSCA
   --------------------------------------------------------------------------
   Fora dali ele e um controle de toque, e 44px e a medida certa para o dedo.
   Na barra de filtro, ao lado do campo da lupa (38px), esses 6px a mais faziam
   os dois lerem como dois blocos empilhados por engano, e nao como uma barra
   so - e o olho procura o desalinhamento antes de ler qualquer um deles. */
.filtros .mes-nav{ min-height:38px; }

/* Horas extras: os carimbos da coluna Situacao tem TODOS a mesma largura, e
   nao a do texto de cada um. "A pagar" ao lado de "Banco de horas" em caixas
   de tamanhos diferentes faz a coluna parecer desalinhada linha a linha, e a
   varredura de cima para baixo - que e como se le esta lista - passa a
   tropecar no contorno em vez de ler a palavra. */
#heTabela .carimbo{
  display:inline-flex;
  justify-content:center;
  width:132px;
  max-width:100%;
  min-width:0;
}

/* HE consolidada: a coluna de acao junta impressora e botoes na mesma linha.
   Sem isto o icone cai numa linha e os botoes noutra, e a celula fica com o
   dobro da altura das outras da tabela. */
#hecTabela .hec-acoes{ white-space:nowrap; }
#hecTabela .hec-acoes > *{ vertical-align:middle; }
#hecTabela .hec-acoes .btn-icone{ padding:4px 6px; margin-right:6px; }
#hecTabela .hec-acoes .btn-icone svg{ width:17px; height:17px; }
#hecTabela .carimbo{
  display:inline-flex;
  justify-content:center;
  width:150px;
  max-width:100%;
  min-width:0;
}

/* O relatorio do mes, a esquerda da navegacao. Fica ao lado do seletor - e nao
   num botao de acao no topo - porque ele e sobre O MES QUE ESTA NA TELA: mudar
   o mes muda o relatorio, e a proximidade e o que diz isso sem legenda. Icone
   sozinho, do mesmo tamanho de toque das setas. */
.mes-rel{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; min-height:44px;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); color:var(--gray-500); text-decoration:none;
}
.mes-rel svg{ width:19px; height:19px; }
.mes-rel:hover{ border-color:var(--gray-500); color:var(--navy-600); }
button.mes-rel{ padding:0; cursor:pointer; font:inherit; }
.rf-lista{ margin:8px 0 4px; padding-left:18px; font-size:var(--fs-sm); color:var(--gray-700); }
.rf-lista li{ margin-bottom:6px; }

/* Campo de busca com a lupa dentro. O texto comeca depois dela: placeholder
   por cima do icone e o tipo de detalhe que faz a tela parecer quebrada. */
.campo-lupa{ position:relative; display:inline-flex; align-items:center; }
.campo-lupa svg{
  position:absolute; left:12px; width:16px; height:16px;
  color:var(--gray-500); pointer-events:none;
}
/* A regra da barra da mesa (.mesa-dia .entrada) vem depois nesta folha e
   reescreve o padding inteiro - por isso o recuo da lupa precisa vir com o
   contexto junto, senao o texto volta a nascer em cima do icone. */
.campo-lupa .entrada,
.mesa-dia .campo-lupa .entrada,
.acoes-titulo .campo-lupa .entrada{ padding-left:36px; min-width:200px; }

/* Na linha do titulo o campo e menor: ali ele divide espaco com o nome da
   pagina, e nao com uma barra de filtros. */
.acoes-titulo .campo-lupa .entrada{ min-height:38px; }
.cl-contagem{ padding:10px 16px 0; }
.mesa-titulo{ display:flex; flex-direction:column; gap:2px; }
.cl-resumo{ margin:0; }

/* A barra da seleção: aparece com a primeira linha marcada e some com a
   última - botão de ação parado na tela o dia inteiro vira paisagem.

   Ela FLUTUA sobre a lista, e nao empurra a lista para baixo. No fluxo, o
   primeiro clique fazia a barra nascer e a tabela inteira descer uns 60px: a
   linha clicada saia de debaixo do cursor e o clique seguinte caia em outra.
   Selecionar tres predios virava um jogo de mira. */
.cl-selecao{
  position:fixed; z-index:60;
  left:50%; bottom:20px; transform:translateX(-50%);
  max-width:min(680px, calc(100vw - 140px));   /* 140px: o espaco do botao flutuante */
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px;
  border:1px solid var(--navy-600); border-radius:var(--radius);
  background:var(--navy-50, #EAF1F9);
  box-shadow:0 10px 28px rgba(14,27,48,.22);
}
.cl-selecao .ajuda{ margin-right:auto; }

@media (max-width:760px){
  /* No celular o botao flutuante fica no canto: a barra sobe um pouco e ocupa
     a largura toda, menos o espaco dele. */
  .cl-selecao{
    left:12px; right:84px; bottom:16px; transform:none; max-width:none;
  }
}

/* Com a barra na tela, o conteudo ganha a folga da altura dela - senao a
   ultima linha da lista fica embaixo da barra justamente quando alguem rolou
   ate o fim para selecionar. */
body.com-selecao .conteudo{ padding-bottom:96px; }

/* A coluna Emergencias diz duas coisas diferentes, e por isso elas se separam:
   dentro do sinal de alerta, o que chamou nos ultimos 30 dias - e o que manda o
   predio para o topo do ranking; fora dele, em letra miuda, o que o contrato
   acumulou desde que existe, que e historico e nao urgencia. Sinal, e nao
   carimbo: carimbo pinta um bloco no meio da tabela e faz a linha inteira
   parecer em alerta por uma emergencia ja atendida. */
.cl-emerg{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--red, #e30613); font-weight:700; cursor:help;
}
.cl-emerg svg{ width:14px; height:14px; flex:none; }
.cl-agenda{
  display:inline-flex; align-items:center; gap:6px;
  color:#52637A; white-space:nowrap;
}
.cl-agenda svg{ width:14px; height:14px; flex:none; }
.cl-sem-agenda{ font-weight:600; }

/* Os elevadores da demanda de repescagem, no modal. */
.dm-carros{ display:flex; flex-direction:column; gap:6px; }
.dm-carros .escolha{ padding:8px 10px; }
.dm-carros .escolha strong{ display:block; font-size:var(--fs-sm); }
.dm-carros .escolha .ajuda{ display:block; margin:0; }

/* O carimbo que e uma barra de evolucao: ele se enche na proporcao dos
   elevadores atendidos. Assim "Parcial" para de ser uma palavra e passa a ser
   uma quantidade - 1 de 4 e 3 de 4 sao situacoes muito diferentes, e a cor
   sozinha nao contava isso. */
.carimbo-evolucao{ position:relative; overflow:hidden; }
.carimbo-evolucao::before{
  content:''; position:absolute; inset:0 auto 0 0;
  width:var(--pct, 0%); background:rgba(232,114,12,.28);
}
.carimbo-evolucao b{ position:relative; font-weight:inherit; }

/* A agenda comeca um pouco mais a direita. Colada no carimbo da preventiva, a
   data e o nome do tecnico se liam como legenda dele - e sao outra coluna, com
   outra pergunta: "quando e com quem". O recuo separa as duas leituras sem
   mexer na largura de ninguem. */
#clTabela .col-agenda{ padding-left:64px; }

/* E a preventiva encosta mais a esquerda, pelo motivo espelhado: ela fecha a
   leitura do PREDIO (origem, cliente, bairro) e nao pode parecer o comeco do
   bloco da visita, que e o da agenda. */
#clTabela .col-preventiva{ padding-left:4px; }
#clTabela td.col-preventiva .carimbo{ transform:none; }

@media (max-width:760px){
  /* No cartao do celular cada celula ja e uma linha propria - o recuo aqui so
     afastaria o rotulo do valor. */
  #clTabela.tabela-cartoes .col-agenda{ padding-left:12px; }
  #clTabela.tabela-cartoes .col-preventiva{ padding-left:12px; }
}

/* No Panorama, o alerta e do PREDIO - e nao da selecao da linha.
   A regra geral do .linha-alerta cria uma tarja lateral vermelha para titulos
   vencidos. Em agosto isso parecia uma selecao travada nas linhas com
   emergencia. Aqui o alerta fica apenas no sinal da coluna Emergencias; a
   tarja lateral passa a ser exclusiva da linha realmente selecionada. */
/* Nada, e nao "outra sombra": a celula ja tem border-bottom como todas as
   outras, e repintar a linha de baixo por dentro dela deixava o traco do "#"
   mais escuro que o do resto da linha - virava enfase em cima da coluna que
   menos tem o que dizer. */
#clTabela tr.linha-alerta > td:first-child{ box-shadow:none; }
#clTabela tr.linha-alerta .num-mono{ color:inherit; }
#clTabela.tabela-selecionavel tbody tr.marcada > td{
  background:#EAF1FF;
  box-shadow:inset 0 -1px 0 #AFC5EA;
}
#clTabela.tabela-selecionavel tbody tr.marcada > td:first-child{
  box-shadow:inset 4px 0 0 var(--navy-600), inset 0 -1px 0 #AFC5EA;
}
#clTabela.tabela-selecionavel tbody tr.marcada:hover > td{ background:#DFE9FB; }

/* Congelado: a linha continua na lista, mas apagada - o predio existe, o
   atendimento e que parou. Opaca e nao escondida de proposito: some da lista
   quem foi encerrado; quem esta parado tem de continuar a vista, senao ninguem
   lembra de regularizar. */
.tabela tr.linha-congelada{ opacity:.55; }
.tabela tr.linha-congelada:hover{ opacity:1; }
.cl-gelo{ color:#17558F; font-weight:600; }

/* Alerta de reclamacao: triangulo e o numero, colados no nome do condominio. */
.cl-reclama{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:6px; padding:1px 6px 1px 4px;
  border:1px solid #F2B8BB; border-radius:999px;
  background:#FDECEC; color:#B00510;
  font-size:11px; font-weight:700; vertical-align:1px;
}
.cl-reclama svg{ width:12px; height:12px; }

/* O contrato reconhecido no campo de busca da reclamacao. */
.rc-ok{ color:#14713A; font-weight:600; }

/* Campo que se digita E se escolhe: a lista abre BRANCA logo abaixo dele, no
   mesmo desenho dos demais campos do sistema - e nao na caixinha cinza que o
   navegador desenha do jeito dele em cada maquina. */
.combo{ position:relative; }
/* A seta faz o campo ser também seletor: clicar nela abre a carteira inteira,
   sem precisar digitar nada. */
.combo-com-seta .entrada{ padding-right:38px; }
.combo-seta{
  position:absolute; top:0; right:0; bottom:0; width:36px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--gray-500); cursor:pointer;
}
.combo-seta:hover{ color:var(--ink); }
.combo-seta svg{ width:16px; height:16px; }
.combo-lista{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
  max-height:240px; overflow:auto;
  margin:0; padding:4px; list-style:none;
  background:var(--white);
  border:1px solid var(--gray-300); border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(20,24,31,.14);
}
.combo-lista li{
  padding:7px 9px; border-radius:6px; cursor:pointer;
  font-size:var(--fs-sm); line-height:1.35; color:var(--ink);
}
.combo-lista li strong{ font-variant-numeric:tabular-nums; }
.combo-lista li span{
  display:block; color:var(--gray-500); font-size:var(--fs-xs);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-lista li:hover,
.combo-lista li[aria-selected="true"]{ background:var(--gray-100, #f2f4f7); }

/* Consulta de saldo do score: anel, medidor e a simulacao do orcamento. */
.sc-resultado{ margin:6px 0 4px; }
.sc-topo{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sc-topo .score-donut{ flex:0 0 auto; }
.sc-numeros{ flex:1 1 220px; }
.sc-numeros strong{ display:block; font-size:22px; line-height:1.2; }
.sc-medidor{
  height:9px; margin:6px 0;
  background:var(--gray-100, #f2f4f7); border:1px solid var(--gray-300);
  border-radius:999px; overflow:hidden;
}
.sc-medidor span{ display:block; height:100%; background:var(--green); border-radius:999px; }
.sc-regra{ margin:10px 0; }
.sc-tabela{ margin:8px 0; }
.sc-tabela td{ padding:6px 8px; }
.sc-opcoes{ margin:4px 0 0; padding-left:18px; }
.sc-opcoes li{ margin-bottom:3px; }
.sc-alerta{ color:var(--red); }

/* Manifestações do SAC do cliente: uma ficha por registro, do mais novo ao
   mais antigo - é texto para ler, e não linha de tabela para conferir. */
.cl-reclama{ cursor:pointer; }
.mf-lista{ max-height:52vh; overflow:auto; margin:6px 0; }
.mf-itens{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mf-itens li{
  border:1px solid var(--gray-300); border-left:3px solid var(--red);
  border-radius:8px; padding:10px 12px; background:var(--white);
}
.mf-topo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mf-topo .carimbo{ margin-left:auto; }
.mf-teor{ margin:6px 0 4px; }
.mf-pe{ margin:0; }

/* --------------------------------------------------------------------------
   Relatorio do elevador

   Documento para ler, imprimir e mandar. Por isso ele monta em blocos largos
   e nao em cartoes: o que se le aqui e sequencia (capa, numeros, grafico,
   historico), e nao um painel para clicar.
   -------------------------------------------------------------------------- */
.rel-acoes{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.rel-janela{ display:inline-flex; gap:6px; margin-left:auto; }
.rel-janela .btn.ativo{ border-color:var(--navy-600); color:var(--navy-600); font-weight:700; }

.rel-capa{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:18px;
}
.rel-identidade h2{ margin:4px 0 6px; }
.rel-identidade .ajuda{ margin:2px 0; }
.rel-etiqueta{
  display:inline-block;
  font-size:11px; letter-spacing:.6px; text-transform:uppercase; font-weight:700;
  color:var(--gray-600, #5a6472);
}

.rel-nota{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:150px; padding:14px 18px;
  border:1px solid var(--gray-300); border-radius:12px;
  background:var(--gray-100, #f2f4f7);
}
.rel-nota-rotulo{ font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--gray-600); }
.rel-nota-valor{ font-size:40px; line-height:1; font-variant-numeric:tabular-nums; }
.rel-nota-otimo .rel-nota-valor,
.rel-nota-bom   .rel-nota-valor{ color:var(--green); }
.rel-nota-atencao .rel-nota-valor{ color:#7A5A00; }
.rel-nota-ruim  .rel-nota-valor{ color:var(--orange-500); }
.rel-nota-grave .rel-nota-valor{ color:var(--red); }

.rel-kpis{ margin-bottom:16px; }
.rel-duas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .rel-duas{ grid-template-columns:1fr; } }

.rel-simil{ list-style:none; margin:0; padding:12px 16px; display:grid; gap:8px; }
.rel-simil li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rel-simil strong{ text-transform:capitalize; }

.rel-rodape{ margin:16px 0 0; }
.tabela tr.linha-total td{ border-top:2px solid var(--gray-300); }

/* Grafico de barras em HTML puro - sem biblioteca, imprime igual. */
.graf-barras{
  display:flex; align-items:flex-end; gap:8px;
  padding:18px 16px 12px; min-height:180px; overflow-x:auto;
}
.graf-col{ flex:1 1 0; min-width:34px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.graf-pilha{
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  width:100%; height:120px;
}
.graf-barra{ width:12px; border-radius:3px 3px 0 0; min-height:2px; }
.graf-chamado{ background:var(--red); }
.graf-preventiva{ background:#A8D5B8; }
.graf-valor{ font-size:12px; font-variant-numeric:tabular-nums; color:var(--red); min-height:14px; }
.graf-rotulo{ font-size:11px; color:var(--gray-600, #5a6472); white-space:nowrap; }

@media print{
  .rel-acoes, .topo, header, .rodape-sistema{ display:none !important; }
  .bloco{ break-inside:avoid; }
}

/* --------------------------------------------------------------------------
   Termometro da demanda do mes

   Anda para tras: nasce cheio (100% da carteira) e desce a cada baixa. O que
   a barra pinta e o que FALTA - no dia 20 ninguem pergunta quanto ja foi.
   -------------------------------------------------------------------------- */
.termo{ padding:16px 18px; }
.termo-cabeca{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
/* Titulo curto e em negrito, mas sem peso de titulo de bloco: aqui quem tem de
   chamar a atencao e a barra, nao a palavra em cima dela. */
.termo-cabeca h2{ margin:0; font-size:var(--fs-sm, 13px); font-weight:700; }

.termo-trilho{
  position:relative;
  height:30px;
  border-radius:999px;
  background:var(--gray-100, #f2f4f7);
  border:1px solid var(--gray-300);
  overflow:visible;
}
.termo-nivel{
  position:relative;
  height:100%;
  min-width:3px;
  border-radius:999px 0 0 999px;
  transition:width .35s ease;
}
/* Cheio e alerta, vazio e trabalho feito. */
.termo-quente{ background:linear-gradient(90deg,#F2B8BB,var(--red)); }
.termo-morno { background:linear-gradient(90deg,#F0C79A,var(--orange-500)); }
.termo-frio  { background:linear-gradient(90deg,#A8D5B8,var(--green)); }

/* A etiqueta fica onde a medida esta - e a medida que se le, e nao a barra. */
.termo-marca{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:var(--fs-sm, 13px); white-space:nowrap;
}
.termo-marca strong{ font-size:15px; font-variant-numeric:tabular-nums; }
.termo-dentro{ right:10px; color:var(--white); }
.termo-fora{ left:100%; margin-left:10px; color:var(--ink); }

.termo-escala{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:8px;
  color:var(--gray-600, #5a6472); font-size:var(--fs-sm, 13px);
}

@media (max-width:640px){
  .termo-marca{ font-size:12px; }
  .termo-escala{ font-size:12px; }
}

/* Chave do predio: marca amarela ao lado do codigo do contrato. Amarelo e o
   unico da paleta que nao significa estado (vermelho alerta, verde ok), entao
   pode dizer "guardamos a chave" sem ser lido como aviso. */
.ic-chave{
  width:16px; height:16px; flex:0 0 auto;
  margin-left:6px; vertical-align:-3px;
  color:#E5A400;
}
.tabela tr.linha-alerta .num-mono .ic-chave{ color:#E5A400; }

/* Chave de boca: obra com equipe designada, gente na caixa. O emoji carrega a
   própria cor - o que a folha precisa é achá-lo de relance na coluna de
   códigos, e para isso basta o tamanho e o respiro ao lado do SM. */
.ic-montagem{
  margin-left:6px;
  font-size:13px;
  line-height:1;
  vertical-align:-1px;
  cursor:default;
}

/* --------------------------------------------------------------------------
   Carimbo de status
   Regra: dentro da mesma coluna, todos ficam com a largura do maior.
   A coluna encolhe ate o maior conteudo (width:1% + nowrap) e o carimbo
   ocupa 100% dela. Sem largura fixa em pixel, sem JavaScript: se amanha
   entrar um status com texto maior, a coluna inteira acompanha sozinha.
   -------------------------------------------------------------------------- */
.tabela th.col-status,
.tabela td.col-status{
  width:1%;
  white-space:nowrap;
}
.tabela td.col-status{ padding-right:14px; }

.carimbo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:92px;
  padding:5px 10px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.25;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Fora de tabela (ficha, cabecalho de registro) o carimbo acompanha o texto */
.carimbo-solto{ display:inline-flex; width:auto; }

/* --------------------------------------------------------------------------
   O CARIMBO QUE É TERMÔMETRO

   O mesmo selo, enchendo da esquerda para a direita conforme o trabalho anda
   (--pct). Um carimbo e uma barra separados eram duas leituras para a mesma
   resposta - e a barra sozinha não diz se aquilo foi anulado, liberado ou só
   agendado. Aqui a cor diz o estado, o preenchimento diz o quanto.

   O preenchimento vai ATRÁS do texto: escrever por cima de uma faixa que muda
   de largura é o caminho curto para a palavra ficar ilegível na metade.
   -------------------------------------------------------------------------- */
/* O texto começa à ESQUERDA, como o resto da tabela: centralizado, ele boiava
   sobre o preenchimento e desalinhava da coluna ao lado. */
.carimbo-term{ position:relative; overflow:hidden; justify-content:flex-start; }
.carimbo-term::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:var(--pct, 0%);
  background:currentColor;
  opacity:.22;
  transition:width .2s ease;
}
.carimbo-term > span{ position:relative; z-index:1; }

.carimbo-verde   { background:#E9F5ED; color:#14713A; border-color:#A8D5B8; }
.carimbo-vermelho{ background:#FDECEC; color:#B00510; border-color:#F2B8BB; }
.carimbo-amarelo { background:#FCF3D4; color:#7A5A00; border-color:#E3CE86; }
.carimbo-azul    { background:#EAF1F9; color:#17558F; border-color:#B4CCE6; }
.carimbo-laranja { background:#FDF2E4; color:#C25A00; border-color:#F0C79A; }
.carimbo-roxo    { background:#F1ECFA; color:#5B3A9B; border-color:#CDBCE8; }
.carimbo-ciano   { background:#E4F4F5; color:#0F6470; border-color:#A9D8DD; }
.carimbo-cinza   { background:#EEF1F4; color:#4A505A; border-color:#C9CFD7; }

/* --------------------------------------------------------------------------
   Balao de dica - o detalhe que so aparece quando alguem pergunta
   --------------------------------------------------------------------------
   Marque o elemento com data-balao="texto" (ver assets/js/soma.js). O balao e
   UM so, preso ao body e posicionado em position:fixed: dentro de tabela ele
   seria recortado, porque .tabela-rolagem esconde o que passa da caixa - e a
   dica nasce colada na borda de cima da linha.

   Serve onde o dado completo nao cabe na coluna: a coluna continua legivel de
   relance, e o detalhe fica a um passar de mouse. */
.balao-dica{
  position:fixed; left:0; top:0; z-index:200;
  max-width:min(300px, calc(100vw - 24px));
  padding:7px 10px;
  background:var(--navy-900); color:var(--white);
  font-size:var(--fs-xs); font-weight:500; line-height:1.45;
  /* O carimbo e caixa alta e espacado; o balao e texto corrido - sem isto ele
     herdaria o desenho do selo e viraria outro carimbo. */
  text-transform:none; letter-spacing:0; text-align:left; white-space:normal;
  border-radius:4px; box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none;
  transition:opacity .12s ease;
}
.balao-dica.aberto{ opacity:1; }

/* A seta aponta para o elemento, e nao para o meio do balao: perto da borda da
   tela o balao anda, o alvo nao (ver a variavel --seta, escrita pelo JS). */
.balao-dica::after{
  content:''; position:absolute; top:100%; left:var(--seta, 50%);
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--navy-900);
}
.balao-dica.abaixo::after{
  top:auto; bottom:100%;
  border-top-color:transparent; border-bottom-color:var(--navy-900);
}

/* O que tem dica avisa com o cursor - senao ninguem descobre que ha mais ali. */
[data-balao]{ cursor:help; }
/* Menos no campo em que se digita: ali o cursor tem de ser o de texto, senao a
   dica atrapalha justamente quem foi preencher. */
input[data-balao], select[data-balao], textarea[data-balao]{ cursor:auto; }

/* --------------------------------------------------------------------------
   Cabecalho da folha - competencia e observacao na linha do titulo
   --------------------------------------------------------------------------
   Os dois sao o cabecalho da FOLHA (de que mes ela e, e o que se anota sobre
   ela), e nao campos do quadro. Empilhados com rotulo em cima, empurravam a
   tabela para baixo e desalinhavam com o titulo ao lado - aqui eles dividem a
   linha com ele, na mesma altura da barra de filtros das outras telas. */
/* O mes que anda de um em um. Folha e sempre de um mes fechado - um seletor de
   data completa oferecia dia e intervalo que nao existem aqui.

   As duas linhas usam o mesmo desenho: o navegador de mes mora hoje no
   cabecalho de "Ultimas folhas" (.cfo-acoes), ao lado do botao de atualizar, e
   pode voltar para o cabecalho da folha (.cfo-cabecalho) sem virar outra
   coisa. Estilo preso a um so dos dois fazia o mes perder a caixa e a altura
   assim que mudasse de lugar - foi o que aconteceu. */
.cfo-cabecalho .mes-nav,
.cfo-acoes .mes-nav{
  display:inline-flex; align-items:center; height:38px; min-height:38px;
  padding:0; flex:0 0 auto; align-self:center;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); overflow:hidden;
}
.cfo-cabecalho .mes-seta,
.cfo-acoes .mes-seta{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:36px; align-self:auto;
  color:var(--gray-700); font-size:var(--fs-lg); line-height:1;
  text-decoration:none;
}
.cfo-cabecalho .mes-seta:hover,
.cfo-acoes .mes-seta:hover{ background:var(--gray-100); color:var(--ink); }
.cfo-cabecalho .mes-atual,
.cfo-acoes .mes-atual{
  padding:0 12px; min-width:120px; text-align:center;
  font-size:var(--fs-sm); font-weight:600; text-transform:capitalize;
  border-left:1px solid var(--gray-200, #E4E8EE);
  border-right:1px solid var(--gray-200, #E4E8EE);
  line-height:36px;
}

.cfo-cabecalho{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cfo-cabecalho .entrada{ width:auto; min-height:38px; height:38px; }

/* O botao de atualizar acompanha a altura do navegador de mes ao lado dele -
   uma linha de controles com alturas diferentes parece torta. */
.cfo-cabecalho .btn{ height:38px; min-height:38px; }
.cfo-cabecalho .btn-icone{ width:38px; flex:0 0 38px; }

/* O resumo do modal de validacao: o que se esta prestes a gerar, em tres
   numeros. Pares rotulo/valor em coluna, e nao um paragrafo - quem valida
   confere numero, e numero se le em varredura vertical. */
.vl-resumo{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:0 0 14px; padding:10px 12px;
  background:var(--gray-100, #F2F4F7); border-radius:var(--radius);
}
.vl-resumo > div{ flex:1 1 0; min-width:110px; }
.vl-resumo dt{
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gray-600, #6B7684); margin:0 0 2px;
}
.vl-resumo dd{
  margin:0; font-size:15px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* A linha do titulo DA TABELA: o tipo da folha e a impressora, juntos a
   direita. As duas mandam no quadro logo abaixo - o seletor troca a lista
   inteira, e a impressora tira dela o papel de conferencia -, e por isso ficam
   nele, e nao na linha do titulo da pagina. */
.cfo-acoes{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Seletor e impressora com a MESMA altura: eles ficam lado a lado na linha do
   titulo, e um mais alto que o outro faz a linha inteira parecer torta. A
   altura e fixada nos dois - o <select> e o <button> herdam alturas diferentes
   do navegador, e min-height sozinho nao iguala quem ja e maior. */
.cfo-acoes .entrada,
.cfo-acoes .btn{
  width:auto; height:38px; min-height:38px;
  align-self:center;
}
.cfo-acoes .btn-icone{ width:38px; flex:0 0 38px; }
.cfo-cabecalho .campo-busca input{
  width:min(320px, 42vw);
  height:38px;
  min-height:38px;
}

@media (max-width:640px){
  .cfo-cabecalho{ width:100%; }
  .cfo-cabecalho .entrada,
  .cfo-cabecalho .campo-busca{ flex:1 1 100%; }
  .cfo-cabecalho .campo-busca input{ width:100%; }
}

/* --------------------------------------------------------------------------
   Custos fixos - a faixa de centros de custo
   --------------------------------------------------------------------------
   Os indicadores do topo respondem "quanto por mes"; esta faixa responde "em
   que". Ela e uma linha corrida, e nao uma tabela: a lista de centros e curta
   e serve de leitura, nao de comparacao coluna a coluna. */
/* --------------------------------------------------------------------------
   Linha de provisionamento em Contas a Pagar
   --------------------------------------------------------------------------
   Titulo de custo fixo nao veio de fornecedor nenhum: ele nasceu de uma
   provisao que a casa cadastrou. Quem confere a carteira precisa ver isso de
   relance - procurar a nota de um aluguel provisionado e busca que nao
   termina.

   O amarelo e translucido e o relevo e sutil de proposito: ele diz "esta linha
   e de outra natureza" sem gritar como o vencido (vermelho) ou o alerta
   (laranja), que falam de urgencia. Por ser so fundo, convive com os dois. */
/* --------------------------------------------------------------------------
   Lista se refazendo - a busca que acontece enquanto se digita
   --------------------------------------------------------------------------
   A troca e por fetch e costuma levar menos de um piscar: sem sinal nenhum,
   quem digitou fica sem saber se a tela entendeu. Nao se esconde a lista - ela
   continua legivel, so recuada, porque o resultado anterior ainda serve
   enquanto o novo nao chega. */
[aria-busy="true"]{ opacity:.55; transition:opacity .12s ease; }
[aria-busy="true"] *{ pointer-events:none; }

/* --------------------------------------------------------------------------
   Segmentado em LINKS - o recorte que troca a lista
   --------------------------------------------------------------------------
   O segmentado original e de radio dentro de formulario. Aqui as opcoes sao
   enderecos - cada frente e uma lista, e trocar de frente e navegar. Mesmo
   desenho, para a mao nao aprender dois controles que fazem a mesma coisa. */
.segmentado a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px;
  background:var(--white);
  color:var(--gray-700);
  font-size:var(--fs-sm); font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.segmentado a + a{ border-left:1px solid var(--gray-300); }
.segmentado a:hover{ background:var(--gray-100); }
.segmentado a.ativo{ background:var(--navy-900); color:var(--white); }

/* A contagem e dado de apoio, e nao o rotulo: ela recua para o nome da frente
   continuar sendo o que se le primeiro. */
.segmentado-conta{
  padding:1px 7px; border-radius:99px;
  background:var(--gray-100); color:var(--gray-700);
  font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
.segmentado a.ativo .segmentado-conta{
  background:rgba(255,255,255,.18); color:var(--white);
}

.tabela tr.linha-provisao > td{
  background:linear-gradient(180deg, rgba(255,214,64,.20), rgba(255,196,0,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(176,132,0,.16);
}
/* A primeira celula leva a marca lateral - e ela que faz a linha se destacar
   no varrer de cima para baixo, sem precisar ler nada. */
.tabela tr.linha-provisao > td:first-child{
  box-shadow:inset 3px 0 0 rgba(214,158,0,.75),
             inset 0 1px 0 rgba(255,255,255,.7),
             inset 0 -1px 0 rgba(176,132,0,.16);
}
.tabela tr.linha-provisao:hover > td{
  background:linear-gradient(180deg, rgba(255,214,64,.30), rgba(255,196,0,.18));
}

.cf-faixa{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:-6px 0 16px; padding:10px 14px;
  border:1px solid var(--gray-200, #E4E8EE); border-radius:var(--radius);
  background:var(--white);
}
.cf-centro{ font-size:var(--fs-sm); color:var(--gray-700); }
.cf-centro strong{ color:var(--ink); }

/* --------------------------------------------------------------------------
   Previsibilidade dos proximos 12 meses - seis por vez
   --------------------------------------------------------------------------
   Doze colunas de dinheiro numa tela so cabem encolhendo o numero ate ninguem
   conseguir le-lo. A paginacao troca a pagina inteira, e nao rola a tabela:
   rolagem horizontal esconde justamente a coluna de total, que e a que se
   procura. */
.cf-prev-pager{ display:flex; align-items:center; gap:8px; }
.cf-prev-faixa{
  font-size:var(--fs-sm); color:var(--gray-700);
  font-variant-numeric:tabular-nums; min-width:112px; text-align:center;
}
.cf-prev-pager .btn-mini{ line-height:1; padding:6px 11px; font-size:15px; }
.cf-prev-pager .btn-mini[disabled]{ opacity:.4; cursor:default; }

.cf-prev-pagina{ display:none; }
.cf-prev-pagina.ativa{ display:block; }
.cf-prev-pagina th.col-num,
.cf-prev-pagina td.col-num{ text-align:right; }
.cf-prev-pagina .tabela th:first-child,
.cf-prev-pagina .tabela td:first-child{ white-space:nowrap; }
/* A ultima coluna e o total do semestre: fundo proprio para o olho achar ela
   sem contar celulas. */
.cf-prev-pagina .tabela th:last-child,
.cf-prev-pagina .tabela td:last-child{ background:var(--gray-50, #F6F8FB); }

/* --------------------------------------------------------------------------
   Tabela compacta - a que mora dentro de painel
   --------------------------------------------------------------------------
   Painel lateral tem meia largura de tela, e tabela de tela cheia ali vira
   rolagem horizontal - que esconde justamente a ultima coluna, que costuma ser
   a que importa (o valor contabil, no plano de depreciacao). Aqui as celulas
   apertam, o numero nao quebra e a tabela cabe: no painel se LE, e nao se
   compara com regua. */
.tabela-compacta{ width:100%; table-layout:auto; }
.tabela-compacta th,
.tabela-compacta td{ padding:6px 8px; font-size:var(--fs-xs); }
.tabela-compacta th{ white-space:nowrap; }
/* A direita e o padrao da compacta - numero se compara alinhado pela unidade.
   Mas quando a tabela pede esquerda (.tabela-esquerda), quem manda e ela: o
   pedido e da tela, e nao do tamanho da celula. */
.tabela-compacta:not(.tabela-esquerda) th.num,
.tabela-compacta:not(.tabela-esquerda) td.num{ text-align:right; }
.tabela-compacta .num-mono{ white-space:nowrap; }
/* Coluna de data: largura do conteudo e nada alem dela. Data nao cresce, e
   deixa-la disputar espaco com colunas de valor era o que empurrava a ultima
   para fora do painel. */
.tabela-compacta th.col-data,
.tabela-compacta td.col-data{ width:1%; white-space:nowrap; padding-right:10px; }
.tabela-compacta .origem-mini{ display:block; margin-top:1px; }
/* O carimbo dentro dela para de esticar: a largura minima de tela cheia era o
   que empurrava a tabela para fora do painel. */
.tabela-compacta .carimbo{ display:inline-flex; width:auto; min-width:0; }

/* Plano de depreciacao no drawer da frota: primeira/data ficam enxutas e os
   valores recebem a largura que precisam para nao atropelar os cabecalhos. */
.drawer-corpo .tabela-plano-depreciacao{
  table-layout:fixed;
  width:100%;
}
.tabela-plano-depreciacao .col-ano{ width:9%; }
.tabela-plano-depreciacao .col-data{ width:17%; }
.tabela-plano-depreciacao .col-valor{ width:24.666%; }
.drawer-corpo .tabela-plano-depreciacao th,
.drawer-corpo .tabela-plano-depreciacao td{
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.25;
}
.drawer-corpo .tabela-plano-depreciacao th{
  white-space:normal;
  vertical-align:bottom;
}
.drawer-corpo .tabela-plano-depreciacao td{ white-space:nowrap; }
.drawer-corpo .tabela-plano-depreciacao .col-data{ width:17%; padding-right:6px; }

/* --------------------------------------------------------------------------
   Frota - o cupom no fim da celula do documento
   --------------------------------------------------------------------------
   Lancar nota de posto e o gesto mais repetido da tela, e por isso ele fica NA
   LINHA e nao escondido no botao direito: enterrado, o hodometro seria
   atualizado uma vez por mes - que e como ele envelhece. Discreto ate a linha
   receber o mouse: a coluna e do documento, e nao do cupom. */
.fr-doc{ white-space:nowrap; }

/* O selo do documento e um flex de largura cheia (ver .carimbo): solto na
   celula, ele ocupa a linha inteira e joga o cupom para baixo. Aqui os dois
   dividem a mesma faixa e ficam centrados na mesma altura - o selo estica, o
   icone fica com o tamanho dele. */
.fr-doc-linha{ display:flex; align-items:center; gap:6px; }
.fr-doc-linha .carimbo{ flex:1 1 auto; min-width:0; }

.fr-cupom{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:26px; height:26px;
  padding:0; border:1px solid transparent; border-radius:5px;
  background:none; color:var(--gray-500); cursor:pointer;
  opacity:.45; transition:opacity .12s ease, background .12s ease, color .12s ease;
}
.fr-cupom svg{ width:16px; height:16px; display:block; }
tr:hover .fr-cupom{ opacity:1; }
.fr-cupom:hover{
  background:var(--navy-50, #EEF2F8); border-color:var(--gray-300, #C9CFD7);
  color:var(--red, #E30613);
}
.fr-cupom:focus-visible{ opacity:1; outline:2px solid var(--navy-500); outline-offset:1px; }

/* Variante cheia: use so quando o status precisa gritar na tela */
.carimbo-solido{ border-color:transparent; color:var(--white); }
.carimbo-solido.carimbo-verde   { background:var(--green); }
.carimbo-solido.carimbo-vermelho{ background:var(--red); }
.carimbo-solido.carimbo-azul    { background:var(--navy-600); }
.carimbo-solido.carimbo-laranja { background:var(--orange-500); }
.carimbo-solido.carimbo-cinza   { background:var(--gray-500); }

/* Faixa de indicadores em uma linha so.
   As telas do processo tem cinco ou seis indicadores; na grade de tres
   colunas eles quebram em duas fileiras e a segunda parece outro assunto.
   Aqui as colunas nascem do numero de cartoes - todos cabem lado a lado e
   dividem a largura por igual, com o cartao mais compacto para compensar. */
.kpis-linha{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:10px;
}
.kpis-linha .kpi{ padding:12px 14px; }
.kpis-linha .kpi-valor{ margin:4px 0 2px; font-size:21px; }
.kpis-linha .kpi-rotulo{ letter-spacing:.4px; }
.kpis-linha .kpi-nota{ display:block; line-height:1.35; }

/* Indicador que tambem lista - as vistorias do dia ficam DENTRO do cartao,
   nao em um bloco de agenda a parte. A altura e travada de proposito: o
   painel nao pode crescer e empurrar a carteira para fora da primeira tela. */
.kpi-lista .kpi-itens{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  max-height:72px;
  overflow:auto;
}
.kpi-lista .kpi-itens li{
  font-size:12px;
  line-height:1.5;
  color:var(--gray-700);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kpi-lista .kpi-itens li + li{ border-top:1px solid var(--gray-200); }
.kpi-lista .kpi-itens li .num-mono{ color:var(--navy-600); margin-right:4px; }
.kpi-lista .kpi-itens li.feita{ color:var(--gray-500); text-decoration:line-through; }

/* Faixa do modal de envio: diz qual revisao vai nascer ANTES de gravar.
   A numeracao e consequencia dos envios anteriores, nao um campo - por isso
   ela e um aviso, e nao uma caixa de texto. */
.aviso-revisao{
  margin:0 0 14px;
  padding:8px 12px;
  background:var(--gray-100, #F2F4F7);
  border-left:3px solid var(--navy-600);
  font-size:13px;
  color:var(--gray-700);
}
.aviso-revisao strong{ color:var(--navy-600); }

/* Em tela estreita a linha unica viraria seis colunas ilegiveis */
@media (max-width:1100px){
  .kpis-linha{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .kpis-linha{ grid-template-columns:repeat(2, 1fr); }
}

/* ==========================================================================
   Processo da Engenharia - projeto, vistorias, montagem e material

   As tres telas trabalham DENTRO do painel lateral: o operador abre a obra,
   preenche e grava sem sair da lista. Por isso o painel aqui e mais largo
   que o da carteira, que so mostra dados.
   ========================================================================== */
.drawer-largo{ width:min(680px, 100%); }

/* Recado curto depois de gravar. Some sozinho - nao e erro, e confirmacao */
.drawer-aviso{
  margin:0;
  padding:10px 22px;
  background:#E9F5ED;
  border-bottom:1px solid #A8D5B8;
  color:#14713A;
  font-size:var(--fs-sm);
  font-weight:600;
}

/* O mesmo painel, mas como pagina - a Lista de material de uma obra.
   Com quase cem pecas para conferir, a gaveta obrigava a rolar duas vezes e
   ainda entregava a lista numa coluna estreita. Em pagina ele deixa de ser
   caixa: nao rola por dentro, nao tem altura propria e usa a largura toda. */
.painel-pagina{ padding:0; }
.painel-pagina .drawer-aviso{ border-radius:var(--radius) var(--radius) 0 0; }
.painel-pagina .drawer-corpo{
  overflow:visible;
  padding:16px 18px 20px;
}

/* Formulario dentro do painel: uma, duas ou tres colunas conforme o campo */
.drawer-corpo .form-linha{ margin:0 0 10px; }
.drawer-corpo .form-linha .campo{ margin:0; }
.form-2, .form-3{ display:grid; gap:12px; }
.form-2{ grid-template-columns:1fr 1fr; }
.form-3{ grid-template-columns:1fr 1fr 1fr; }

/* Campo que ocupa duas colunas da linha. Razao social e logradouro nao cabem
   na mesma largura de um CEP, e espremer os tres em colunas iguais faz o nome
   do cliente ser lido pela metade justamente na tela em que ele e digitado. */
.form-2col{ grid-column:span 2; }
@media (max-width:560px){ .form-2col{ grid-column:auto; } }

/* Titulo que divide a ficha em assuntos. Uma ficha de emissao tem cliente,
   endereco, elevadores, licenca e valores - sem separacao ela vira uma coluna
   de trinta campos em que ninguem acha onde parou. */
.ficha-secao{
  margin:18px 0 8px; padding-bottom:5px;
  border-bottom:1px solid var(--gray-200, #e4e8ed);
  font-size:var(--fs-sm, 13px); font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--gray-500);
}
.ficha-secao:first-of-type{ margin-top:6px; }

/* Campo que o operador precisa corrigir antes de gravar. */
.entrada.invalido{ border-color:var(--red); background:var(--red-bg); }

.acoes-bloco{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 18px;
}
.acoes-bloco .btn{ flex:0 0 auto; }

/* Botao que fecha uma linha de campos: desce ate a base da linha para
   ficar alinhado com as caixas de texto, e nao com os rotulos delas */
.campo-botao{ display:flex; align-items:flex-end; }
.campo-botao .btn{ width:100%; }

/* As acoes do processo ficam na ordem do trabalho: enviar, aprovar, revisar */
.acoes-processo{ padding-top:4px; border-top:1px solid var(--gray-200); }

.entrada-mini{ width:auto; min-width:130px; padding:6px 10px; font-size:var(--fs-sm); }

.marcador{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-size:var(--fs-sm);
  cursor:pointer;
}
.marcador input{ width:16px; height:16px; }

/* Lista de revisao, vistoria, etapa de cronograma e item de material.
   Mesmo desenho para as quatro: sao a mesma leitura - o que e, em que pe
   esta e o que da para fazer com isso. */
.lista-processo{ margin:0 0 16px; padding:0; list-style:none; }
.lista-processo > li{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--gray-200);
}
.lista-processo > li:last-child{ border-bottom:0; }

.lp-corpo{ flex:1 1 220px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.lp-corpo strong{ font-size:var(--fs-sm); }
.lp-corpo .carimbo{ width:auto; min-width:0; }

.lp-nota{
  flex:1 1 100%;
  color:var(--gray-600);
  font-size:var(--fs-xs);
  line-height:1.5;
}

.lp-acoes{ display:flex; align-items:center; gap:6px; }
.lp-acoes .btn{ padding:6px 12px; font-size:var(--fs-xs); }

/* Concluido continua visivel, so para de disputar atencao */
.lp-feita .lp-corpo strong{ color:var(--gray-600); }

/* Etapa do cronograma concluida: a marca enche de verde e o check aparece.
   A regra existia so para a timeline da carteira (.etapa-feita), e aqui a
   linha usa outra classe - a caixa ficava vazia mesmo com a etapa fechada,
   que e justamente o que ela existe para responder. */
.lp-feita .etapa-marca{
  border-color:var(--green);
  background:var(--green);
  color:var(--white);
}
.lp-feita .etapa-marca:hover{ border-color:var(--green); color:var(--white); }

/* Um pouco maior que o ponto da timeline: aqui a marca e clicavel item a
   item, e 16px de alvo e pouco para uma lista de 24 etapas. */
.lista-processo .etapa-marca{ width:20px; height:20px; }
.lista-processo .etapa-marca svg{ width:11px; height:11px; }

/* Registro da vistoria: abre embaixo do item, nao em outra tela */
.lp-form{
  flex:1 1 100%;
  margin-top:8px;
  padding:12px;
  background:var(--gray-100);
  border-radius:var(--radius);
}

.evolucao-larga{ margin:0 0 14px; }

/* Estagio que vem de outra tela: mesma marca da timeline, sem o clique.
   Fica evidente que aquele visto foi conquistado por um registro, e nao
   por alguem ter carimbado a etapa na carteira. */
.etapa-marca-auto{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:default;
  background:transparent;
}
.etapa-marca-auto svg{ opacity:.9; }
/* Estagio automatico concluido enche igual ao manual: a marca informa que
   fechou, nao quem a marcou. Antes ficava so o anel, e o "check" branco
   sumia no fundo transparente. */
.etapa-feita > .etapa-marca-auto{ background:var(--green); }

/* Rotulo de um grupo de opcoes: nao aponta para um campo so, entao nao pode
   ser <label>, mas precisa parecer um. */
.rotulo-grupo{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-700);
  letter-spacing:.2px;
}

/* Pilha de aprovacoes do projeto.
   A revisao em vigor fica aberta, no fim da pilha; as anteriores recolhem
   para cima e abrem no clique. E a leitura que a obra pede: o que vale
   agora em primeiro plano, o historico ao alcance. */
.revisoes{ margin:0 0 18px; }
.revisoes details{
  border:1px solid var(--gray-200);
  border-bottom:0;
  background:var(--gray-050);
}
.revisoes details:last-child{ border-bottom:1px solid var(--gray-200); }
.revisoes details[open]{ background:var(--white); }

.revisoes summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  cursor:pointer;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-700);
  list-style:none;
}
.revisoes summary::-webkit-details-marker{ display:none; }
.revisoes summary strong{ color:var(--ink); }
.revisoes summary .rev-quando{
  margin-left:auto;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--gray-500);
  font-variant-numeric:tabular-nums;
}
.revisoes details[open] > summary{ border-bottom:1px solid var(--gray-200); }

/* Seta do cartao: como todos nascem recolhidos, precisa ficar claro que a
   linha abre. Ela aponta para baixo fechada e para cima aberta. */
.revisoes summary::after{
  content:'';
  flex:none;
  width:7px;
  height:7px;
  margin-left:10px;
  border-right:2px solid var(--gray-500);
  border-bottom:2px solid var(--gray-500);
  transform:rotate(45deg) translate(-2px, -2px);
  transition:transform .15s ease;
}
.revisoes details[open] > summary::after{ transform:rotate(-135deg); }

.rev-corpo{ padding:4px 12px 12px; }
.rev-corpo .par{ border-bottom:1px solid var(--gray-100); }
.rev-atual > summary strong{ color:var(--green); }

/* Acao destrutiva no menu de contexto: vermelha e sempre por ultimo */
.menu-perigo{ color:var(--red); }
.menu-perigo svg{ stroke:var(--red); }
.menu-perigo:hover{ background:#FDECEC; }

.entrega-ok{ color:#14713A; }

/* Relatorios de vistoria no roteiro: o nome "Vistoria 2" abre os documentos
   daquela visita - o que existe vira link, o que nao existe fica opaco. */
.etapa-link{
  padding:0; font:inherit; font-weight:700; color:var(--navy-600);
  background:none; border:0; cursor:pointer; text-align:left;
  text-decoration:underline; text-underline-offset:3px; text-decoration-style:dotted;
}
.etapa-link:hover{ color:var(--red); }
.etapa-link:focus-visible{ outline:2px solid var(--navy-500); outline-offset:2px; }

.etapa-docs{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:6px; padding:8px 10px;
  background:var(--gray-050); border-left:3px solid var(--navy-600);
}
.rel-off{ opacity:.45; }
.rel-off .rel-mini{ cursor:default; background:transparent; }
.rel-off .rel-mini:hover{ background:transparent; color:var(--gray-700); border-color:var(--gray-200); }

/* ==========================================================================
   Lista de material - faixa de busca e tabela editavel
   ========================================================================== */

/* Sem largura propria aqui: #areaLista e o mesmo contêiner da carteira, das
   vistorias e da montagem, e estreita-lo por causa da lista de material
   apertava as tabelas largas das outras tres. Todas seguem a largura padrao
   do sistema (--largura, em .conteudo). */

.lm-faixa{ padding-bottom:14px; }
.lm-busca{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }

/* A lupa e o campo de trabalho da tela: fica uma vez e meia o botao de
   copiar lista, que e acao ocasional. */
.lm-campo-busca{
  display:flex; align-items:center; gap:8px;
  flex:1.5 1 300px; min-width:260px;
  padding:0 12px; background:var(--white); border:1px solid var(--gray-200);
}
.lm-busca #lmNova{ flex:1 1 200px; }
.lm-busca .btn-primary{ flex:0 0 auto; }

/* Cabeca da lista: identificacao do equipamento a esquerda, o aviso de
   "lista de um elevador" a direita. */
.lm-cabeca{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.lm-cabeca h2{ margin:0 0 2px; }
.lm-cabeca .ajuda{ margin:0; }
.lm-por-elevador{
  margin:0; padding:8px 12px; text-align:right; font-size:var(--fs-sm);
  background:var(--gray-050); border-left:3px solid var(--navy-600);
}
.lm-por-elevador span{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }

/* O OK da lista, no fim - onde a conferencia termina. */
.lm-validar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-200);
}
.lm-campo-busca svg{ width:18px; height:18px; color:var(--gray-500); flex:none; }
.lm-campo-busca input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:var(--fs-md); padding:11px 0; color:var(--ink);
}

.lm-aberta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--gray-200);
  font-size:var(--fs-sm);
}
.lm-aberta strong{ font-family:var(--font-num); color:var(--navy-600); }

/* A celula editavel avisa que e clicavel sem virar campo o tempo todo -
   cem inputs na tela pesam e tiram a leitura da lista. */
.lm-editavel .lm-edit{
  display:block; min-height:18px; cursor:text;
  border-bottom:1px dotted var(--gray-300);
}
.lm-editavel .lm-edit:hover{ background:var(--gray-100); border-bottom-color:var(--navy-500); }
.lm-editavel .lm-input{ width:100%; }
.lm-editavel tr{ cursor:context-menu; }
.lm-editavel tr.marcada > td{ background:var(--gray-100); }

/* Validado e a linha conferida; anulado continua visivel, opaco e riscado -
   a decisao de nao comprar tambem e informacao. */
.lm-editavel tr.lm-validado > td{ background:#F2F9F4; }
.lm-editavel tr.lm-anulado > td{ opacity:.45; text-decoration:line-through; }
.lm-editavel tr.lm-anulado .lm-edit{ border-bottom-color:transparent; cursor:default; }

/* Drawer da conferencia: cabe sempre na largura do painel. As acoes da linha
   ficam no botao direito, entao a tabela nao precisa mais da coluna lateral
   que abria barra horizontal. */
.lm-drawer-wrap{
  overflow-x:hidden;
  padding-bottom:0;
}
.drawer-corpo .lm-drawer{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.drawer-corpo .lm-drawer th,
.drawer-corpo .lm-drawer td{
  padding:4px 6px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.drawer-corpo .lm-drawer th{
  padding-top:7px;
  padding-bottom:7px;
  white-space:nowrap;
}
.drawer-corpo .lm-drawer .entrada{
  min-width:0;
  box-sizing:border-box;
}
.drawer-corpo .lm-drawer .carimbo{
  max-width:100%;
  min-width:0;
  white-space:normal;
  line-height:1.15;
}
.drawer-corpo .lm-drawer tbody tr{ cursor:context-menu; }
.drawer-corpo .lm-drawer tr.marcada > td{ background:var(--gray-100); }

/* Quantidade do material editavel na propria linha da lista: mais, menos e
   o campo. Zero retira o item - e o jeito de "diminuir ate sumir". */
.mat-qtd{ display:inline-flex; align-items:center; gap:2px; }
.mat-passo{
  width:24px; height:28px; flex:none;
  font:inherit; font-size:15px; line-height:1; font-weight:700;
  color:var(--navy-600); background:var(--gray-100);
  border:1px solid var(--gray-200); cursor:pointer;
}
.mat-passo:hover{ background:var(--navy-600); border-color:var(--navy-600); color:var(--white); }
.mat-campo{ width:62px; text-align:center; font-family:var(--font-num); }
.mat-un{ font-size:var(--fs-xs); color:var(--gray-500); margin-left:2px; }

.rel-linha{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.rel-doc{ display:inline-flex; align-items:center; gap:6px; }
.rel-doc > a:first-child{ font-weight:700; color:var(--navy-600); text-decoration:none; }
.rel-doc > a:first-child:hover{ text-decoration:underline; }
.rel-mini{
  padding:1px 6px; font:inherit; font-size:11px; line-height:1.6;
  color:var(--gray-700); background:var(--gray-100);
  border:1px solid var(--gray-200); text-decoration:none; cursor:pointer;
}
.rel-mini:hover{ background:var(--navy-600); border-color:var(--navy-600); color:var(--white); }
.rel-vazio{ font-size:12px; color:var(--gray-500); }

@media (max-width:640px){
  .form-2, .form-3{ grid-template-columns:1fr; }
  .lp-acoes{ width:100%; }
}

/* ==========================================================================
   Calendario de vistorias (tela de Vistorias)

   O mes ocupa a tela: as seis semanas dividem a altura que sobra depois do
   cabecalho e dos indicadores, e nao a altura do conteudo. Dia cheio rola
   dentro da propria celula - a grade nunca muda de tamanho, senao o mes
   "pula" cada vez que uma visita e agendada.

   Prefixo vcal- de proposito: .cal- ja e do seletor de periodo do filtro.
   ========================================================================== */
.bloco-vcal{ display:flex; flex-direction:column; }

.vcal-topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.vcal-topo h2{ margin:0; min-width:210px; text-align:center; }

/* Titulo navegavel: mes e ano trocam pelas setas ao redor do proprio nome */
.vcal-titulo{ display:flex; align-items:center; gap:4px; }
.vcal-seta{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; font-size:18px; line-height:1;
  color:var(--navy-600); text-decoration:none;
  border:1px solid var(--gray-200); background:var(--white);
}
.vcal-seta:hover{ background:var(--navy-600); border-color:var(--navy-600); color:var(--white); }
.vcal-seta:focus-visible{ outline:2px solid var(--navy-500); outline-offset:1px; }
/* Botoes fixos do titulo: voltar ao mes corrente e trocar mes por lista.
   Ficam com a mesma caixa das setas para a linha nao ganhar degrau. */
.vcal-botao{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:var(--navy-600);
  border:1px solid var(--gray-200); background:var(--white);
}
.vcal-botao + .vcal-botao{ margin-left:4px; }
.vcal-titulo .vcal-botao:first-of-type{ margin-left:10px; }
.vcal-botao svg{ width:16px; height:16px; }
.vcal-botao:hover{ background:var(--navy-600); border-color:var(--navy-600); color:var(--white); }
.vcal-botao:focus-visible{ outline:2px solid var(--navy-500); outline-offset:1px; }
.vcal-botao-ativo{ background:var(--navy-600); border-color:var(--navy-600); color:var(--white); }
.vcal-botao-ativo:hover{ background:var(--navy-700); border-color:var(--navy-700); }

.vcal-legenda{ display:flex; align-items:center; gap:14px; margin:0; font-size:var(--fs-xs); }
.vcal-chave{ display:inline-flex; align-items:center; gap:6px; color:var(--gray-700); }
.vcal-chave::before{ content:""; width:10px; height:10px; background:var(--navy-600); }
.vcal-chave-atrasada::before{ background:var(--red); }
.vcal-chave-realizada::before{ background:var(--green); }

.vcal-navegacao{ display:flex; gap:6px; }

.vcal{ display:flex; flex-direction:column; min-height:0; }

.vcal-cabeca{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  border:1px solid var(--gray-200); border-bottom:0; background:var(--navy-900);
}
.vcal-nome-dia{
  padding:8px 10px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--white); text-align:center;
}

/* A linha da semana tem altura minima para as tres visitas do dia caberem
   inteiras (VISTORIAS_POR_DIA): o quadro do dia nunca rola por dentro - quem
   rola, se precisar, e a pagina. */
.vcal-grade{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  grid-auto-rows:minmax(132px, 1fr);
  gap:1px; background:var(--gray-200);
  border:1px solid var(--gray-200);
  min-height:calc(100vh - 330px);
}

.vcal-dia{
  display:flex; flex-direction:column; min-height:0;
  background:var(--white); padding:4px 5px 5px;
}
.vcal-dia.vcal-fds{ background:var(--gray-050); }
.vcal-dia.vcal-fora{ background:var(--gray-100); }

/* Feriado de Sao Paulo: nao recebe visita, e o nome fica na propria celula
   para ninguem tentar remarcar para ali e levar recusa do servidor. */
.vcal-dia.vcal-feriado{ background:var(--red-bg); }
.vcal-dia.vcal-feriado .vcal-numero{ color:var(--red-dark); }
/* O nome do feriado cabe em duas linhas: "Revolucao Constitucionalista"
   cortado no meio nao informa nada a quem esta escolhendo data. */
.vcal-marca-feriado{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  margin-top:2px; font-size:10px; line-height:1.15;
  font-weight:700; color:var(--red-dark); overflow:hidden;
}
.vcal-dia.vcal-fora .vcal-numero{ color:var(--gray-300); }
.vcal-dia.vcal-hoje{ box-shadow:inset 0 0 0 2px var(--red); }
.vcal-dia{ cursor:pointer; }
.vcal-dia:focus-visible{ outline:2px solid var(--navy-500); outline-offset:-2px; }

/* Quadro escolhido: o destaque e do dia inteiro, porque as acoes do botao
   direito valem para a agenda daquela data - e nao para uma visita solta. */
.vcal-dia.vcal-selecionado{ background:#EAF1F9; box-shadow:inset 0 0 0 2px var(--navy-600); }
.vcal-dia.vcal-selecionado.vcal-hoje{ box-shadow:inset 0 0 0 2px var(--red), inset 0 0 0 4px var(--navy-600); }

.vcal-cabeca-dia{ display:flex; align-items:center; justify-content:space-between; }
.vcal-numero{ font-size:var(--fs-sm); font-weight:700; color:var(--gray-700); }
.vcal-hoje .vcal-numero{ color:var(--red); }
.vcal-conta{
  font-size:11px; font-weight:700; color:var(--white); background:var(--navy-600);
  padding:0 5px; line-height:16px;
}
/* Dia no teto de visitas: quem procura data livre ve na hora que aqui nao da */
.vcal-conta.vcal-cheio{ background:var(--red); }

.vcal-itens{ display:flex; flex-direction:column; gap:3px; margin-top:4px; }

/* A visita e um botao: abre o painel da obra, igual a linha da tabela antiga */
.vcal-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:3px 6px; font:inherit; font-size:11px; line-height:1.25;
  border:0; border-left:3px solid var(--navy-600);
  background:var(--gray-100); color:var(--ink);
}
.vcal-item-sm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vcal-item:hover{ background:var(--gray-200); }
.vcal-item:focus-visible{ outline:2px solid var(--navy-500); outline-offset:1px; }
.vcal-item.marcada{ background:var(--navy-600); color:var(--white); }
.vcal-item.marcada .vcal-item-cliente,
.vcal-item.marcada .vcal-item-quem{ color:var(--gray-200); }
.vcal-item[disabled]{ cursor:default; opacity:.6; }

.vcal-item-sm{ display:block; font-weight:700; font-family:var(--font-num); }
.vcal-item-cliente,
.vcal-item-quem{
  display:block; color:var(--gray-700);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vcal-item-quem{ font-size:10px; color:var(--gray-500); }
.vcal-item-marca{
  display:inline-block; margin-top:2px; padding:0 4px;
  font-size:10px; font-weight:700; color:var(--green); background:var(--green-bg);
}

.vcal-item-atrasada{ border-left-color:var(--red); background:var(--red-bg); }
.vcal-item-atrasada:hover{ background:#F9DADA; }
.vcal-item-realizada{ border-left-color:var(--green); background:var(--green-bg); }
.vcal-item-realizada:hover{ background:#DCEDE3; }

.vcal-vazio{ margin:12px 0 0; }

/* Menu do botao direito no calendario: no segundo passo ele lista as obras
   do dia, que sao nomes longos - por isso mais largo que o menu da carteira */
.menu-vistoria{ min-width:260px; max-width:340px; }
.menu-vistoria button span{ white-space:normal; }
.menu-vistoria .menu-titulo{ white-space:nowrap; }

@media (max-width:900px){
  .vcal-grade{ height:auto; grid-auto-rows:minmax(84px, auto); }
  .vcal-legenda{ display:none; }
}

/* ==========================================================================
   Montagem - segmento, botao flutuante e ficha de cadastro

   O segmento troca um <select> de duas opcoes por dois botoes: quem executa
   a montagem e uma escolha que muda a tela inteira (contrato, equipe,
   valor), e escondida numa lista suspensa ela parecia detalhe.
   ========================================================================== */
.segmento{
  display:inline-flex;
  margin:0 0 14px;
  padding:3px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  background:var(--gray-50);
}
.seg-botao{
  padding:7px 16px;
  border:0;
  border-radius:calc(var(--radius) - 2px);
  background:transparent;
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--gray-700);
  cursor:pointer;
}
.seg-botao:hover{ color:var(--navy-900); }
.seg-ativo{
  background:var(--white);
  color:var(--red);
  box-shadow:var(--shadow-1);
}

/* Subtitulo dentro do painel: separa as fases do cronograma sem competir
   com os titulos de bloco. */
.sub-bloco{
  display:flex;
  align-items:center;
  gap:8px;
  margin:16px 0 6px;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy-900);
}

/* Cadastro de quem monta: nao pertence a obra nenhuma, entao mora num
   botao solto da tela e nao dentro do painel da obra.

   Classe propria (.fab-solto) e nao .fab: aquele ja e o botao redondo do
   grupo de acoes, com rotacao e submenu que nao valem aqui. */
.fab-solto{
  position:fixed;
  right:24px; bottom:24px;
  z-index:70;
  display:flex; align-items:center; gap:8px;
  padding:13px 20px;
  border:0;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  box-shadow:var(--shadow-3);
  cursor:pointer;
}
.fab-solto:hover{ filter:brightness(1.08); }
.fab-solto svg{ width:18px; height:18px; }

.modal-fundo{
  position:fixed;
  inset:0;
  z-index:95;
  background:rgba(14,27,48,.42);
  opacity:0;
  transition:opacity .18s ease;
}
.modal-fundo.aberto{ opacity:1; }

.modal{
  position:fixed;
  top:50%; left:50%;
  z-index:100;
  width:min(560px, calc(100vw - 32px));
  max-height:min(86vh, 780px);
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg, 10px);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-3);
  transform:translate(-50%, -46%);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.modal.aberto{ opacity:1; transform:translate(-50%, -50%); }

.modal-topo{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  background:var(--navy-900);
  color:var(--white);
}
.modal-topo h2{ margin:0; font-size:var(--fs-lg); font-weight:700; }

.modal-corpo{
  flex:1 1 auto;
  overflow-y:auto;
  padding:18px 20px 24px;
}
.modal-corpo h3{
  margin:20px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gray-700);
}

/* ==========================================================================
   CONCILIACAO BANCARIA - escolha do titulo

   Cada candidato e uma linha inteira clicavel, e nao um <select>: quem
   concilia precisa comparar valor, vencimento e nome lado a lado antes de
   decidir, e lista fechada esconde exatamente o que faz decidir.
   ========================================================================== */
.conc-candidatos{ display:flex; flex-direction:column; gap:8px; margin:4px 0 10px; }

.conc-candidato{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; cursor:pointer;
  border:1px solid var(--gray-200); background:var(--white);
}
.conc-candidato:hover{ border-color:var(--navy-500); background:var(--gray-050); }
.conc-candidato input{ margin-top:3px; accent-color:var(--navy-600); }
.conc-candidato.escolhido{ border-color:var(--navy-600); box-shadow:inset 0 0 0 1px var(--navy-600); }

.conc-candidato-corpo{ flex:1 1 auto; min-width:0; }
.conc-candidato-topo{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.conc-candidato-nome{ font-weight:700; color:var(--navy-900); }
.conc-candidato-valor{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.conc-candidato-nota{
  display:block; margin-top:2px;
  font-size:var(--fs-xs); color:var(--gray-700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* A aderencia e a razao pela qual aquele titulo esta no topo - fica visivel
   para o operador poder discordar dela. */
.conc-aderencia{ font-weight:700; }
.conc-aderencia.alta { color:var(--green); }
.conc-aderencia.media{ color:var(--orange-500); }
.conc-aderencia.baixa{ color:var(--gray-500); }

.conc-vazio{
  padding:14px; text-align:center;
  border:1px dashed var(--gray-300); color:var(--gray-700);
}

/* --------------------------------------------------------------------------
   Recursos Humanos - cadastro e filtro do quadro

   A ficha do funcionario tem muito campo curto (CEP, numero, UF, agencia):
   em uma coluna por linha o formulario viraria uma escada de trinta campos,
   e ninguem enxerga o conjunto. Dai a linha de quatro.
   -------------------------------------------------------------------------- */
.form-4{ display:grid; gap:12px; grid-template-columns:repeat(4, 1fr); }
@media (max-width:900px){ .form-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .form-4{ grid-template-columns:1fr; } }

/* Fora do painel, a linha do formulario precisa do proprio respiro: a regra
   que existia so valia dentro do .drawer-corpo. */
.modal-corpo .form-linha{ margin:0 0 10px; }
.modal-corpo .form-linha .campo{ margin:0; }

/* Filtro ao lado da busca: acompanha a altura do campo e nao estica pela
   barra inteira, como faria um .entrada solto. */
.entrada-filtro{ width:auto; min-width:170px; }

/* Quadro de funcionarios: as colunas curtas ficam enxutas e as de leitura
   recebem espaco previsivel. Sem isso, nome/funcao/telefone disputam largura e
   deixam separadores visuais aparecendo no meio da tabela. */
#rhFuncionarios{
  table-layout:fixed;
  min-width:1120px;
}
#rhFuncionarios .rh-col-matricula{ width:8%; }
#rhFuncionarios .rh-col-nome{ width:17%; }
#rhFuncionarios .rh-col-funcao{ width:15%; }
#rhFuncionarios .rh-col-setor{ width:12%; }
#rhFuncionarios .rh-col-admissao{ width:11%; }
/* Telefone cede espaco para a Situacao: o numero cabe em menos, e com isso o
   Banco de horas encosta mais a esquerda, perto da coluna que se le junto. */
#rhFuncionarios .rh-col-telefone{ width:11%; }
#rhFuncionarios .rh-col-banco{ width:10%; }
#rhFuncionarios .rh-col-situacao{ width:16%; }

/* O selo da Situacao recuado dentro da propria coluna: ele ganha ar em relacao
   ao Banco de horas sem que a coluna mude de tamanho. */
#rhFuncionarios th.col-status,
#rhFuncionarios td.col-status{ padding-left:26px; }
#rhFuncionarios th,
#rhFuncionarios td{
  padding-left:10px;
  padding-right:10px;
  vertical-align:middle;
}
#rhFuncionarios th:nth-child(5),
#rhFuncionarios td:nth-child(5){
  padding-right:22px;
}
#rhFuncionarios th:nth-child(6),
#rhFuncionarios td:nth-child(6){
  padding-left:22px;
}
#rhFuncionarios td.col-status .carimbo{
  width:100%;
  min-width:0;
  justify-content:center;
}

/* --------------------------------------------------------------------------
   Catalogo de EPI - Seguranca do Trabalho

   Largura fixa para as porcentagens do <th> valerem de fato: em table-layout
   automatico elas sao sugestao, e o navegador redistribui pelo conteudo -
   e ai a coluna do CA cresce quando entra um numero grande e a tabela inteira
   "anda" de um F5 para o outro.

   O carimbo da validade ocupa a coluna toda. Sem isso, "Vencido em 14/05/2026"
   e "28/08/2028" saem com larguras diferentes, e uma coluna de carimbos de
   tamanhos variados le-se como uma coluna torta - o olho compara a CAIXA antes
   de ler a data.
   -------------------------------------------------------------------------- */
#epiTabela{ table-layout:fixed; }
#epiTabela th,
#epiTabela td{
  text-align:left;
  vertical-align:middle;
}
#epiTabela .carimbo{
  display:inline-flex;
  width:100%;
  min-width:0;
  justify-content:flex-start;
}

/* Monitor de entregas dentro do modal de Entregar EPI.
   Altura limitada: a lista e consulta, e um historico longo empurraria o
   formulario para fora da tela justamente em quem entrega EPI toda semana. */
.ent-monitor{ margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-200); }
.ent-monitor h3{ margin:0 0 8px; font-size:var(--fs-sm); color:var(--gray-600); }
.ent-monitor #entLista{ max-height:34vh; overflow-y:auto; }
.ent-monitor table{ font-size:var(--fs-xs); }
.ent-monitor .carimbo{ min-width:0; }

/* O aviaozinho que copia o link de quem ainda nao assinou: menor que o botao
   de icone padrao, para caber na linha da tabela sem esticar a altura. */
.ent-monitor .btn-icone{ width:30px; min-height:30px; }
.ent-monitor .btn-icone svg{ width:15px; height:15px; }
.ent-monitor .btn-icone.btn-ok{
  color:var(--green); border-color:var(--green); background:var(--green-bg);
}

/* O "x" que tira a entrega da ficha: discreto e no alto da linha, para nao
   disputar atencao com o aviaozinho, que e a acao do dia a dia. */
.ent-monitor td.ent-x{ width:22px; padding:2px 0 0; text-align:right; vertical-align:top; }
.ent-monitor .ent-excluir{
  border:0; background:none; padding:0 2px; cursor:pointer;
  font-size:15px; line-height:1;
  color:var(--gray-300);
}
.ent-monitor .ent-excluir:hover{ color:var(--red); }
.ent-monitor .ent-excluir.armado{ color:var(--red); font-weight:700; }
.ent-monitor .ent-excluir[disabled]{ opacity:.5; cursor:default; }

/* O link do recibo de EPI, logo depois de gravar a entrega.
   Campo e botao na mesma linha: quem acabou de gravar vai copiar e mandar pelo
   WhatsApp, e o gesto e um so. */
.ent-link{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.ent-link .entrada{
  flex:1 1 auto;
  min-width:0;
  font-family:"Consolas","Courier New",monospace;
  font-size:var(--fs-xs);
}
.ent-link .btn{ flex:none; }
@media (max-width:640px){
  .ent-link{ flex-wrap:wrap; }
  .ent-link .entrada{ flex:1 1 100%; }
}

/* --------------------------------------------------------------------------
   Modal largo - a caixa que abre no tamanho em que vai ser usada

   O .modal-largo la de cima ja pedia a folha inteira, mas o .modal redefinido
   depois (largura de 560px, altura maxima e translate vertical) vencia por
   vir por ultimo: a caixa abria estreita e fora do lugar, e so ao arrastar -
   quando o modal.js troca o transform por left/top em pixels - ela se
   acomodava no tamanho certo. Parecia crescer sozinha.

   A dobra de classe (.modal.modal-largo) vence sem depender da ordem, e os
   dois estados do transform sao redefinidos junto: sem isso a animacao de
   abertura ainda puxaria a caixa meia tela para cima.
   -------------------------------------------------------------------------- */
.modal.modal-largo{
  top:24px;
  bottom:24px;
  left:50%;
  right:auto;
  width:min(calc(210mm + 40px), calc(100vw - 48px));
  max-width:none;
  max-height:calc(100vh - 48px);
  transform:translate(-50%, 10px);
}
.modal.modal-largo.aberto{ transform:translate(-50%, 0); }

/* O cadastro do funcionario tem linha de quatro campos: na largura de folha
   os campos curtos ficariam espremidos a ponto de o rotulo quebrar em duas
   linhas. */
#cadModal{ width:min(1040px, calc(100vw - 48px)); }

/* Escolha em dois quadrados - hora extra remunerada ou banco de horas.
   E a decisao do lancamento: fechada dentro de um <select>, so apareceria
   depois do clique, e e justamente ela que se confere antes de gravar. */
.escolha-dupla{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .escolha-dupla{ grid-template-columns:1fr; } }

.escolha{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
}
.escolha:hover{ border-color:var(--gray-500); }
.escolha input{ width:18px; height:18px; margin-top:2px; flex:none; cursor:pointer; }
.escolha span{ display:flex; flex-direction:column; gap:2px; }
.escolha strong{ font-size:var(--fs-sm); font-weight:700; }
.escolha small{ font-size:var(--fs-xs); color:var(--gray-700); }

/* O quadrado marcado se destaca: com dois lado a lado, a borda cinza em
   ambos deixa a escolha invisivel de relance. */
.escolha:has(input:checked){
  border-color:var(--navy-600);
  box-shadow:inset 0 0 0 1px var(--navy-600);
}
.escolha-solta{ display:inline-flex; }

/* Lancamentos dentro da ficha: uma linha por registro, com o gesto de
   apagar so aparecendo no hover - a lista se le muito mais do que se
   corrige. */
.reg-lista{ list-style:none; margin:0 0 4px; padding:0; }
.reg-lista li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:8px 0;
  border-top:1px solid var(--gray-200);
  font-size:var(--fs-sm);
}
.reg-lista li:first-child{ border-top:0; }
.reg-quando{ color:var(--gray-700); font-variant-numeric:tabular-nums; }
.reg-nota{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }
.reg-apagar{
  flex:none;
  border:0; background:transparent; padding:2px 6px;
  color:var(--gray-500); cursor:pointer; opacity:0;
  font-size:var(--fs-sm);
}
.reg-lista li:hover .reg-apagar,
.reg-apagar:focus{ opacity:1; }
.reg-apagar:hover{ color:var(--red); }

/* --------------------------------------------------------------------------
   Prazos de ferias - cartoes, e nao tabela

   Quem consulta isto costuma estar no celular, e uma tabela de sete colunas
   ali vira rolagem lateral: o nome fica visivel e o prazo - que e a razao da
   tela - sai da tela. O cartao empilha sozinho e mantem os dois juntos.
   -------------------------------------------------------------------------- */
.prazos{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}

.prazo{
  padding:14px 16px;
  border:1px solid var(--gray-200);
  border-left:4px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
}
.prazo header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-bottom:2px;
}
.prazo h3{ margin:0; font-size:var(--fs-sm); font-weight:700; }
.prazo-funcao{ margin:0 0 10px; font-size:var(--fs-xs); color:var(--gray-500); }

/* A cor da borda e o primeiro aviso: a lista se le de relance, e so depois
   se procura a data. */
.prazo-vencida{ border-left-color:var(--red); }
.prazo-urgente{ border-left-color:var(--orange-500); }
.prazo-atencao{ border-left-color:var(--navy-600); }
.prazo-ok{ border-left-color:var(--green); }

.prazo-dados{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0; }
.prazo-dados dt{ font-size:var(--fs-xs); color:var(--gray-500); }
.prazo-dados dd{ margin:0; font-size:var(--fs-sm); font-weight:600; }

.prazo-agendada{
  margin:10px 0 0; padding-top:8px;
  border-top:1px solid var(--gray-200);
  font-size:var(--fs-xs); color:var(--gray-700);
}

/* Totais do banco de horas e das horas pagas - o numero que se procura
   antes de ler a lista inteira. */
.reg-totais{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.reg-total{
  padding:6px 10px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  font-size:var(--fs-xs);
}
.reg-total strong{ font-size:var(--fs-sm); }

/* --------------------------------------------------------------------------
   Modais simples da carteira de Engenharia

   Estes cinco trazem o conteudo direto no .modal, sem o .modal-corpo que
   rola nos modais novos. Como .modal esconde o que passa da altura maxima,
   o registro de envio - seis campos - ficaria cortado em tela baixa, sem
   nenhuma forma de alcancar o botao. A rolagem vai no proprio modal.
   -------------------------------------------------------------------------- */
#dtModal, #ocModal, #enModal, #bxModal, #vsModal,
#epiModal, #hxModal, #frModal{ overflow-y:auto; }

/* ==========================================================================
   Almoxarifado e Logistica

   As duas telas que seguem a Lista de Material: a entrada do material no
   estoque e a saida dele em cargas para o canteiro.
   ========================================================================== */

/* Segunda linha dentro da celula - o detalhe que explica a primeira (a obra
   embaixo do cliente, a especificacao embaixo do item). Em coluna propria,
   cada um desses viraria uma coluna estreita a mais. */
.celula-nota{
  display:block; margin-top:2px;
  font-size:var(--fs-xs); color:var(--gray-500);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Linha que leva a algum lugar: o cursor avisa antes do clique. */
.linha-link{ cursor:pointer; }
.linha-link:hover{ background:var(--gray-50); }

/* ---- Almoxarifado: barra de selecao ------------------------------------- */
.alm-acoes{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 12px;
  background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius);
}
.alm-acoes .ajuda{ margin:0; flex:1; }
.alm-marcar{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); }
.alm-marcar input{ width:16px; height:16px; }

/* ---- Logistica: escolha do que vai na carga ------------------------------ */
.lg-itens{
  margin-top:14px; border-top:1px solid var(--gray-200); padding-top:12px;
  max-height:34vh; overflow-y:auto;
}
.lg-itens-cabeca{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px; font-size:var(--fs-sm);
}
.lg-itens-cabeca label{ display:inline-flex; align-items:center; gap:8px; }
.lg-tabela-itens .entrada{ height:30px; padding:0 8px; text-align:center; }
.lg-tabela-itens .celula-nota{ text-align:center; }

/* O modal da carga tem lista dentro: sem rolagem propria, o botao de gravar
   fica fora do alcance em tela baixa - mesmo motivo dos modais de registro. */
#lgModal{ overflow-y:auto; }

/* Ficha rotulo/valor do painel lateral. */
.drawer-tabela{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.drawer-tabela td{
  padding:6px 0; border-bottom:1px solid var(--gray-100);
  font-size:var(--fs-sm); vertical-align:top;
}
.drawer-tabela td:first-child{
  width:38%; color:var(--gray-500); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.4px; padding-top:8px;
}

/* ---- Mesa de controle da manutenção ---------------------------------------
   Mapa e lista lado a lado, mesma altura. Um responde "onde eu vou", o outro
   "o que eu tenho", e a mesa é a leitura dos dois juntos - empilhados, a lista
   ficaria abaixo da dobra e o mapa viraria enfeite. */
.mesa-grade{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  gap:16px;
  align-items:stretch;
}
.mesa-card{ display:flex; flex-direction:column; min-height:520px; padding:0; overflow:hidden; }

.mesa-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--gray-200);
}
.mesa-topo h2{ margin:0; font-size:var(--fs-md); font-weight:700; }

/* Voltar para hoje, ao lado do campo do dia - o caminho de volta fica no mesmo
   canto da tela por onde se saiu. Da a altura do campo, para os dois lerem como
   um controle so. */
.mesa-hoje{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); color:var(--navy-600);
}
.mesa-hoje svg{ width:18px; height:18px; }
.mesa-hoje:hover{ border-color:var(--navy-600); background:var(--navy-50, #EAF1F9); }

/* Fora do dia de hoje ele deixa de ser um recarregar e passa a ser um convite:
   fundo cheio, para se achar sem procurar. */
.mesa-hoje.longe{
  border-color:var(--navy-600); background:var(--navy-600); color:var(--white);
}
.mesa-hoje.longe:hover{ background:var(--navy-700); border-color:var(--navy-700); }

/* O calendário vive no título: é ali que se pergunta "e amanhã?". */
.mesa-dia{ display:flex; align-items:center; gap:8px; }

/* --------------------------------------------------------------------------
   Engenharia - a demanda da semana

   Cinco linhas (vistoria, projeto, montagem, entrega, compra) sobre os sete
   dias. O grafico e SVG desenhado no servidor: nao ha biblioteca a carregar, e
   ele imprime junto com a tela. */
/* O card e uma faixa, e nao um painel: ele abre a tela e a carteira comeca
   logo abaixo - por isso a altura do desenho e limitada em vez de crescer com
   a largura do monitor. */
.eng-demanda{ padding-bottom:12px; }

/* O grafico ocupa a linha; os dois numeros da carteira ficam a direita dele.
   Em tela estreita eles descem para baixo, lado a lado. */
.eng-topo{ display:flex; align-items:stretch; gap:14px; margin-bottom:18px; }
.eng-topo .eng-demanda{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.eng-kpis{ display:flex; flex-direction:column; gap:14px; width:230px; flex:none; }
.eng-kpis .kpi{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }

@media (max-width:900px){
  .eng-topo{ flex-direction:column; }
  .eng-kpis{ width:auto; flex-direction:row; }
}

/* Titulo e busca na MESMA linha, um em cada ponta - a pergunta "de que
   semana?" na altura do titulo que ela responde. O resumo vem embaixo, na
   margem da esquerda. */
.eng-demanda .dm-topo{ margin-bottom:8px; }
.eng-demanda .dm-linha{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px;
}
.eng-demanda .dm-linha h2{ margin:0; }
.eng-demanda .dm-topo .ajuda{ margin:6px 0 0; }

/* A busca da semana e UM controle, e nao tres pecas soltas: setas e lista
   dentro da mesma pilula, todas na mesma altura. Assim ela le como um
   seletor, e nao como uma fileira de botoes que sobrou no canto. */
.dm-busca{
  --dm-h:34px;
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
}

/* Canto vivo: e a caracteristica do sistema - a pilula arredondada destoava de
   tudo o que esta em volta. */
.dm-nav{
  display:inline-flex; align-items:stretch;
  height:var(--dm-h);
  border:1px solid var(--gray-200);
  background:var(--white); box-shadow:var(--shadow-1);
  overflow:hidden;
}

.dm-seta{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; color:var(--gray-600); text-decoration:none;
}
.dm-seta svg{ width:15px; height:15px; }
.dm-seta:hover{ background:var(--gray-100); color:var(--red); }

/* O calendario a esquerda diz do que se trata sem gastar um rotulo. */
.dm-campo{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 4px 0 8px;
  border-left:1px solid var(--gray-200); border-right:1px solid var(--gray-200);
  color:var(--gray-500);
}
.dm-campo svg{ width:15px; height:15px; flex:none; }
.dm-campo select{
  border:0; background:transparent; outline:0;
  height:calc(var(--dm-h) - 2px); padding:0 4px;
  font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  min-width:200px; cursor:pointer;
}
.dm-campo select:focus-visible{ outline:2px solid var(--navy-600); outline-offset:-2px; }

/* A semana em papel: fica a ESQUERDA da busca, na mesma altura dela. E a
   mesma semana que esta no grafico - por isso o botao mora colado nela, e nao
   no topo da tela com as acoes da pagina. */
.dm-lista{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--dm-h); height:var(--dm-h);
  border:1px solid var(--gray-200);
  background:var(--white); color:var(--gray-700);
  text-decoration:none; box-shadow:var(--shadow-1);
}
.dm-lista svg{ width:16px; height:16px; }

/* A bolinha do grafico e um link: clicar nela abre embaixo quem esta por tras
   do numero. A aberta fica com um anel, para nao se perder qual dia se esta
   lendo na tabela. */
a.dm-ponto{ cursor:pointer; }
a.dm-ponto circle{ transition:r .1s; }
a.dm-ponto:hover circle{ r:6.5; }
a.dm-ponto-aberto circle{ stroke:var(--white); stroke-width:2; }

.dm-recorte{ margin-top:14px; border-top:1px solid var(--gray-200); padding-top:12px; }
.dm-recorte-topo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px;
}
.dm-recorte-topo h3{ flex:1 1 auto; margin:0; font-size:var(--fs-md, 15px); }

/* A cotacao que perdeu a rodada: opaca e riscada, mas na lista. Aprovar um
   fornecedor reprova os outros da mesma necessidade - e o preco deles continua
   sendo a comparacao da proxima compra. */
tr.linha-reprovada > td{ opacity:.5; }
tr.linha-reprovada > td:not(:last-child){ text-decoration:line-through; }
tr.linha-reprovada:hover > td{ opacity:.75; }

/* O RELOGIO DO PEDIDO DE COMPRA
   Uma bolinha antes da origem, e nada mais: a linha nao se pinta - com noventa
   linhas acesas, nenhuma se destaca. A cor conta quanto falta para a
   data-limite de aprovacao (amarelo 6 semanas, laranja 2 semanas, roxo 2 dias,
   vermelho vencida) e e a MESMA cor do ponto no grafico da semana, acima. */
.orc-bolinha{
  display:inline-block; width:9px; height:9px; margin-right:7px;
  border-radius:50%; vertical-align:middle; cursor:help;
}
.orc-bolinha-radar{     background:#E7B416; box-shadow:0 0 0 2px #FBF0CE; }
.orc-bolinha-orcamento{ background:#E07A18; box-shadow:0 0 0 2px #FBE3CC; }
.orc-bolinha-revisao{   background:#2E7BC4; box-shadow:0 0 0 2px #D5E5F5; }
.orc-bolinha-aprovar{   background:#7A4BC4; box-shadow:0 0 0 2px #E7DCFA; }
.orc-bolinha-vencida{   background:#B42318; box-shadow:0 0 0 2px #F7D7D4; }

/* A RODADA DE COTACAO - a mesma necessidade em varios fornecedores
   Duplicar nao cria outra compra: cria outra PROPOSTA para a mesma. Na tela
   as irmas ficam grudadas como uma linha so, separadas por tracejado - e cada
   parte continua sendo uma linha inteira, com o seu fornecedor, o seu valor e
   o seu botao direito. E isso que permite vincular um fornecedor diferente em
   cada uma sem que a lista finja que sao tres compras. */
/* O tracejado entre as irmas comeca RECUADO, no alinhamento em que a origem e
   escrita: linha cheia de ponta a ponta separa registros diferentes; recuada,
   ela diz "isto continua a mesma solicitacao".

   O traco e o MESMO desenho em todas as celulas - um gradiente de 4px de
   risco e 4px de vao, na cor da borda da tabela. Misturar borda tracejada
   nativa numa celula com gradiente na outra dava dois ritmos diferentes na
   mesma linha, e era isso que aparecia torto. */
tr.orc-rodada-segue > td{
  border-bottom-color:transparent;
  background-image:repeating-linear-gradient(to right,
    var(--gray-300) 0 4px, transparent 4px 8px);
  background-size:100% 1px;
  background-position:left bottom;
  background-repeat:no-repeat;
}
/* So a primeira celula recua - e o recuo bate com o tronco da arvore. */
tr.orc-rodada-segue > td:first-child{
  background-size:calc(100% - 21px) 1px;
  background-position:21px bottom;
}
/* O realce do mouse e COR de fundo: sem isto o atalho `background` do hover
   apagaria o desenho do traco. */
.tabela tbody tr.orc-rodada-segue:hover > td{
  background-color:var(--gray-100);
}

/* A ARVORE DA RODADA
   A matriz e a necessidade da obra - o SM escrito uma vez. Dela desce um
   tronco, e cada proposta fica pendurada nele por um cotovelo. E a mesma
   leitura de uma pasta com subpastas: um pai, varios filhos, e nenhuma duvida
   sobre quem pertence a quem. */
/* O desenho da arvore vive todo na primeira celula, num EIXO unico de 21px -
   o centro da seta que abre e fecha o galho. Tronco, cotovelo e o recuo do
   tracejado saem todos dessa mesma vertical: e o que faz o bloco parecer um
   desenho so, e nao tres tracinhos perto um do outro. */
tr.orc-rodada > td:first-child{ position:relative; }

/* Matriz: o tronco nasce no meio dela e desce ate o fim da linha. */
tr.orc-rodada:not(.orc-rodada-parte) > td:first-child::after{
  content:''; position:absolute; left:21px; top:50%; bottom:0;
  border-left:1px solid var(--gray-400);
}

/* Galho: o tronco chega por cima e o cotovelo entra na proposta. */
tr.orc-rodada-parte > td:first-child{ padding-left:42px; }
tr.orc-rodada-parte > td:first-child::before{
  content:''; position:absolute; left:21px; top:0; height:50%;
  border-left:1px solid var(--gray-400);
}
tr.orc-rodada-parte > td:first-child::after{
  content:''; position:absolute; left:21px; top:50%; width:13px;
  border-top:1px solid var(--gray-400);
}

/* O galho do meio nao fecha o tronco: ele deixa a linha passar para a
   proposta de baixo. O ultimo nao tem esta marca, e o tronco morre no
   cotovelo dele - que e o que fecha o desenho da arvore. */
.orc-ramo{ display:none; }
.orc-ramo-segue{
  display:block; position:absolute; left:21px; top:50%; bottom:0; width:0;
  border-left:1px solid var(--gray-400);
}

/* A seta que abre e recolhe os galhos - tree table. */
.orc-arvore{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-right:4px; padding:0;
  border:0; border-radius:4px; background:transparent; color:var(--gray-600);
  cursor:pointer; vertical-align:middle;
}
.orc-arvore:hover{ background:var(--gray-200); color:var(--gray-800); }
.orc-arvore svg{ width:13px; height:13px; transition:transform .15s; }
.orc-arvore[aria-expanded="false"] svg{ transform:rotate(-90deg); }

/* Rodada RECOLHIDA: a linha que sobra volta a ser um registro inteiro, e o
   que a fecha e a linha CONTINUA da tabela - a mesma de todas as outras. O
   tracejado recuado prometia uma continuacao que nao esta mais na tela, e o
   tronco descia para o vazio. */
tr.orc-rodada-fechada > td{
  border-bottom-color:var(--gray-200);
  background-image:none;
}
tr.orc-rodada-fechada > td:first-child::after{ display:none; }

/* A legenda do grafico: o caminho do pedido na ordem em que ele acontece.
   Fica sob a faixa, em texto pequeno - ela se le uma vez e depois so a cor
   importa. */
.dm-legenda{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  margin:8px 0 0; padding-top:8px; border-top:1px solid var(--gray-200);
  font-size:var(--fs-sm); color:var(--gray-700);
}
.dm-legenda-item{ display:inline-flex; align-items:center; gap:6px; cursor:help; }
.dm-legenda-item i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dm-legenda-item small{ color:var(--gray-500); }

/* O PEDIDO PECA A PECA - previsto x cotado
   A lista pode ter sessenta linhas: ela rola dentro do modal, e o rodape com
   a comparacao fica sempre visivel - e ele o parametro da negociacao.

   E um modal de FORMULARIO largo, e nao o do documento A4 (.modal-largo, que
   zera o padding para virar folha): aqui o miolo precisa do respiro das
   bordas, senao a tabela encosta na moldura. */
.itens-modal{
  width:min(1080px, calc(100vw - 32px));
  max-width:none;
}
.itens-modal h2{ margin-top:0; }
.itens-rolagem{ max-height:52vh; overflow:auto; margin-bottom:12px; }
#itensTabela th, #itensTabela td{ padding-top:5px; padding-bottom:5px; text-align:left; }
.itens-campo{ width:100%; min-width:0; height:32px; min-height:32px; text-align:right; }

/* A lista de material dentro do cadastro do orcamento. */
#orcItensBloco{ margin:14px 0 4px; border-top:1px solid var(--gray-200); padding-top:12px; }
.orc-itens-topo{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 8px; }
.orc-itens-topo h3{ margin:0; font-size:var(--fs-md, 15px); }
#orcItensTabela th, #orcItensTabela td{ padding-top:5px; padding-bottom:5px; text-align:left; }

.itens-resumo{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  padding:10px 12px; margin:0 0 4px;
  border:1px solid var(--gray-200); border-radius:var(--radius); background:var(--gray-100);
  font-size:var(--fs-sm);
}
.itens-resumo strong{ font-variant-numeric:tabular-nums; }

/* Fechar abaixo do previsto e o ganho da compra - verde; acima e o que ainda
   ha para negociar - vermelho. */
.itens-abaixo{ color:#17864A; font-weight:700; }
.itens-acima{  color:#B42318; font-weight:700; }

/* Escolher um fornecedor da lista: a linha inteira e o alvo do clique, e nao
   so a bolinha do radio. */
.lp-escolha{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 6px; cursor:pointer;
}
.lp-escolha:hover{ background:var(--gray-100); }
.lp-escolha input{ margin-top:3px; }
.lp-escolha .ajuda{ display:block; margin:1px 0 0; }
.dm-lista:hover{ border-color:var(--gray-300); background:var(--gray-100); color:var(--red); }

.dm-hoje{
  display:inline-flex; align-items:center;
  height:var(--dm-h); padding:0 14px;
  border:1px solid var(--gray-200);
  background:var(--white); color:var(--gray-700);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  box-shadow:var(--shadow-1);
}
.dm-hoje:hover{ border-color:var(--gray-300); background:var(--gray-100); color:var(--red); }
/* Ja estando na semana corrente, "Hoje" nao e destino: ele se apaga em vez de
   sumir - sumir mudaria a largura da fileira a cada troca de semana. */
.dm-hoje.atual{ opacity:.5; pointer-events:none; }

/* A legenda e tambem o placar da semana: a cor sozinha nao diz o tamanho. Ela
   vive na linha do titulo, entre o nome do card e a busca - e o que se le
   antes de decidir trocar de semana. */
.dm-legenda{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px;
  flex:1 1 auto; justify-content:center;
  list-style:none; margin:0; padding:0;
  font-size:var(--fs-xs); color:var(--gray-700);
}
.dm-legenda li{ display:flex; align-items:center; gap:6px; }
.dm-legenda strong{ font-variant-numeric:tabular-nums; }
.dm-cor{ width:14px; height:3px; border-radius:2px; }

/* Em tela estreita o grafico rola na horizontal em vez de espremer sete dias
   num espaco onde os rotulos se encavalam. */
/* ==========================================================================
   Fornecedores - cadastro, grupo e condicoes
   ========================================================================== */

/* Inserir na linha do titulo, a direita: e a acao da tabela. */
.fornec-topo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.fornec-topo h2{ margin:0; }

/* Excluir fica solto e longe do Gravar: apagar um cadastro nao pode acontecer
   no impulso de gravar. */
.fornec-excluir{ margin:0; }

/* O codigo do grupo vai em texto, sem carimbo: numa coluna estreita ele ja se
   le sozinho, e o balao continua dizendo quem mais esta nele. */
.tabela [data-balao]{ cursor:help; }

/* A tabela de fornecedores: larguras fixas pelo colgroup (o conteudo manda o
   tamanho, e nao o acaso da primeira linha) e as colunas curtas sem quebra -
   "15 dias", "G1" e o carimbo nao podem partir em duas linhas. */
.forn-tabela{ table-layout:fixed; min-width:940px; }
.forn-tabela td{ vertical-align:middle; }
.forn-tabela td:nth-child(1),
.forn-tabela td:nth-child(3),
.forn-tabela td:nth-child(6),
.forn-tabela td:nth-child(7),
.forn-tabela td:nth-child(8){ white-space:nowrap; }

/* Nome, detalhe e contato cortam com reticencias em vez de esticar a linha. */
.forn-tabela td:nth-child(2),
.forn-tabela td:nth-child(4),
.forn-tabela td:nth-child(5){ overflow:hidden; text-overflow:ellipsis; }
.forn-tabela td:nth-child(2) .origem-mini{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Os dois quadrados na altura dos campos vizinhos - eles ocupam o lugar de um
   campo, e nao de um bloco de opcoes. */
.fornec-natureza{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px;
  min-height:38px;
}
.fornec-natureza label{
  display:inline-flex; align-items:center; gap:6px; margin:0;
  font-size:var(--fs-sm); color:var(--gray-700); cursor:pointer;
}
.fornec-natureza input{ width:16px; height:16px; margin:0; }

/* A janela do grupo: branca, abaixo do campo, com quem ja esta nele. Ela e
   conferencia - abre no foco e fecha ao sair. */
.fornec-grupo-campo{ position:relative; }
.fornec-grupo-janela{
  position:absolute; z-index:30; left:0; right:0; top:100%;
  margin-top:2px; padding:8px 10px;
  max-height:190px; overflow-y:auto;
  background:var(--white); border:1px solid var(--gray-300);
  box-shadow:var(--shadow-2, 0 6px 18px rgba(14,27,48,.14));
  font-size:var(--fs-xs);
}
.fornec-grupo-titulo{
  display:flex; justify-content:space-between; gap:8px;
  margin:0 0 6px; padding-bottom:4px;
  border-bottom:1px solid var(--gray-200);
  font-weight:700; color:var(--ink);
}
.fornec-grupo-titulo span{ font-weight:600; color:var(--gray-500); }
.fornec-grupo-janela ul{ list-style:none; margin:0; padding:0; }
.fornec-grupo-janela li{ padding:2px 0; color:var(--gray-700); }
.fornec-grupo-vazio{ margin:0; color:var(--gray-500); }

/* As condicoes sao MARCADAS de uma lista - o catalogo do configurador. Duas
   colunas: a lista inteira cabe sem rolagem na maioria das telas. */
.fornec-cond-lista{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
  max-height:210px; overflow-y:auto;
  padding:2px; margin-bottom:6px;
}
.fornec-cond-opcao{
  display:grid; grid-template-columns:18px 1fr 78px; gap:8px; align-items:center;
  padding:5px 8px; border:1px solid var(--gray-200); background:var(--white);
  cursor:pointer;
}
.fornec-cond-opcao:hover{ border-color:var(--gray-300); background:var(--gray-100); }
.fornec-cond-opcao.marcada{ border-color:var(--red); background:#FFF7F7; }
.fornec-cond-opcao strong{ display:block; font-size:var(--fs-sm); font-weight:600; }
.fornec-cond-opcao small{ display:block; font-size:var(--fs-xs); color:var(--gray-600); }
.fornec-cond-desc{ min-height:30px; height:30px; padding:0 6px; font-size:var(--fs-xs); }

@media (max-width:760px){
  .fornec-cond-lista{ grid-template-columns:1fr; }
}

/* O bloco do resto do cadastro fica fechado: endereco e banco sao preenchidos
   uma vez, e abertos empurravam as condicoes para fora da tela. */
.fornec-mais{ margin:14px 0 4px; }
.fornec-mais > summary{
  cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--gray-700);
  padding:6px 0;
}
.fornec-mais[open] > summary{ margin-bottom:8px; }

.fornec-convite{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--gray-200);
}
.fornec-convite .modal-acoes{ align-items:center; }

@media (max-width:860px){
  .fornec-cond{ grid-template-columns:1fr 1fr; }
}

/* O alerta de entrega atrasada: discreto, colado a esquerda da data e na mesma
   celula. Ele substitui a frase "atrasada ha 12d" - a contagem vive no balao,
   e a linha para de repetir em texto o que a cor ja diz. */
.ic-atraso{
  width:14px; height:14px; margin-right:5px; vertical-align:-2px;
  color:var(--red);
}

/* Uma linha so dizendo que a carteira esta recortada - a lista das obras e a
   propria tabela abaixo. */
.dm-aviso{ margin:8px 0 0; font-size:var(--fs-xs); color:var(--gray-700); }
.dm-aviso .ajuda{ display:inline; }

/* A bolinha e clicavel: ela e a porta para as obras daquele dia. */
.dm-grafico a{ cursor:pointer; }
.dm-grafico a:hover circle{ fill-opacity:1; }

/* O grafico ocupa a largura inteira do card - os sete dias abrem-se de ponta a
   ponta em vez de se apertarem na metade esquerda. */
.dm-grafico{ overflow-x:auto; text-align:left; }
.dm-grafico svg{
  display:block; width:100%; min-width:620px;
  margin:0; height:auto;
}

/* O balao das origens vem com uma linha por obra - sem isto elas viravam um
   paragrafo unico. Explicacao longa de tela pede largura maior que a dica de
   uma palavra. */
.balao-dica{ white-space:pre-line; text-align:left; max-width:min(460px, 92vw); }

/* Titulo que carrega a explicacao da tela no balao: a marca discreta avisa que
   ha o que ler ali - sem ela, ninguem passa o mouse por acaso. */
.titulo-ajuda{ cursor:help; }
.titulo-ajuda-marca{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:8px; vertical-align:2px;
  border:1px solid var(--gray-300); border-radius:50%;
  font-size:10px; font-weight:700; color:var(--gray-500);
  text-transform:none;
}
.titulo-ajuda:hover .titulo-ajuda-marca{ border-color:var(--red); color:var(--red); }

/* Historicos dentro dos modais do RH - folgas marcadas e faltas apontadas.
   Altura limitada pelo mesmo motivo do monitor de EPI: a lista e consulta, e um
   historico longo empurraria o formulario para fora da tela. */
.fg-marcadas,
.ft-historico{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-200);
}
.fg-marcadas h3,
.ft-historico h3{ margin:0 0 8px; font-size:var(--fs-sm); color:var(--gray-600); }
.fg-marcadas #fgLista,
.ft-historico #ftLista{ max-height:30vh; overflow-y:auto; }
.fg-marcadas table,
.ft-historico table{ font-size:var(--fs-xs); }

/* A relacao do mes: mes e visao lado a lado, e a tabela rolando dentro da
   propria caixa - ela e larga por natureza (uma coluna por mes no historico) e
   sem isso empurraria o modal para fora da tela. */
.fm-controles{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px;
  margin-bottom:14px;
}
.fm-controles .campo{ margin:0; }
.fm-controles .segmento{ margin:0; }
.fm-controles input[type="month"]{ min-width:190px; }

#fmLista{ max-height:48vh; overflow:auto; }
#fmLista table{ font-size:var(--fs-xs); }
#fmLista th{ position:sticky; top:0; z-index:1; }
/* Tabela rolando: o tremor do cabecalho (left/top) brigaria com o sticky. */
#fmLista th:hover{ animation:none; }

/* --------------------------------------------------------------------------
   TITULOS EM CAIXA ALTA E O TREMOR NO HOVER
   Titulo de pagina, titulo de bloco e cabecalho de tabela falam a mesma
   lingua: tudo em maiuscula. O tremor no hover e curto e volta ao lugar - ele
   diz "isto e um titulo", nao pede clique. O th ja era maiusculo, entao aqui
   ele so ganha o movimento. */
.titulo-pagina,
.bloco > h2,
.bloco > h3,
.cabecalho-pagina h1,
.cabecalho-pagina h2,
.cartao > h2,
.cartao > h3,
.tabela caption{
  text-transform:uppercase;
}

/* O tremor no hover saiu do sistema inteiro - titulo de pagina, de bloco, de
   card e cabecalho de tabela. Ele chamava atencao para onde nao havia acao:
   passar o mouse por cima de um titulo e so o caminho ate a tabela. Fica a
   CAIXA ALTA, que era o que dizia "isto e um titulo". */
.mesa-dia .entrada{ width:auto; padding:6px 10px; font-size:var(--fs-sm); }

/* O campo do dia e o botão de voltar para hoje tem a MESMA altura: sao um
   controle so, e um degrau de dois pixels entre eles e o tipo de desalinho que
   se ve antes de se saber explicar. A regra vale so para o campo de data - o
   .mesa-dia tambem embrulha a lupa de outras telas, que tem altura propria. */
.mesa-dia input[type="date"]{
  height:32px; min-height:32px; padding:0 10px; line-height:1;
}

/* Calendario proprio da Operacao do dia (2026-10-07): dia com demanda em
   amarelo claro - o do navegador nao deixa marcar dia nenhum. */
.mesa-cal{ position:relative; }
.mesa-cal #mesaDiaVer{
  height:32px; min-height:32px; padding:0 30px 0 10px; line-height:1; width:128px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 8px center / 15px;
}
.mesa-cal-pop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; width:252px; padding:10px;
  background:#fff; border:1px solid #e2e2e2; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.mesa-cal-pop[hidden]{ display:none; }
.mesa-cal-pop .mc-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mesa-cal-pop .mc-topo b{ font-size:var(--fs-sm); }
.mesa-cal-pop .mc-topo button{
  width:28px; height:28px; border:0; border-radius:6px; background:transparent; font-size:18px; cursor:pointer;
}
.mesa-cal-pop .mc-topo button:hover{ background:#f1f1f1; }
.mesa-cal-pop .mc-grade{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; }
.mesa-cal-pop .mc-grade i{ font-style:normal; font-size:11px; color:#888; padding:2px 0 4px; }
.mesa-cal-pop .mc-grade button{
  height:30px; border:1px solid transparent; border-radius:6px; background:transparent;
  font-size:var(--fs-sm); color:inherit; cursor:pointer;
}
.mesa-cal-pop .mc-grade button:hover{ background:#f1f1f1; }
.mesa-cal-pop .mc-grade button.dem{ background:#fff3b0; }
.mesa-cal-pop .mc-grade button.dem:hover{ background:#ffe97a; }
.mesa-cal-pop .mc-grade button.hoje{ border-color:#bbb; font-weight:700; }
.mesa-cal-pop .mc-grade button.sel{ border-color:#333; font-weight:700; }

/* ---- Mandar o dia para a rua ---------------------------------------------
   A equipe do dia em cartoes: capacete, primeiro nome e quantas visitas. O
   primeiro nome basta porque quem monta o dia conhece a equipe pelo nome, e o
   sobrenome so tomaria a largura do cartao. */
.en-equipe{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px; margin:6px 0 14px;
}
.en-tecnico{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 8px; cursor:pointer;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); font:inherit; color:var(--ink);
}
.en-tecnico svg{ width:30px; height:30px; color:var(--navy-600); }
.en-tecnico strong{ font-size:var(--fs-sm); }
.en-tecnico span{ font-size:var(--fs-xs); color:var(--gray-500); }
.en-tecnico:hover{ border-color:var(--navy-600); background:var(--gray-100, #f2f4f7); }
/* Bege: o dia dele ja saiu inteiro da mesa. E cor de coisa feita - nao pede
   nada, mas continua clicavel para quem quiser reenviar. Entrando visita nova
   depois, o cartao volta ao branco sozinho: o que mudou foi o dia dele, e a cor
   e quem conta isso sem ninguem ter de abrir. */
.en-tecnico.enviado{
  background:#F6F1E4; border-color:#E0D5BC; color:#6B5B3E;
}
.en-tecnico.enviado svg{ color:#A98F5B; }
.en-tecnico.enviado:hover{ background:#F0E8D4; border-color:#C9B78E; }

.en-tecnico.escolhido{
  border-color:var(--navy-600); background:var(--navy-50, #EAF1F9);
  box-shadow:inset 0 -3px 0 var(--navy-600);
}

/* O dia inteiro de uma vez - so aparece com dois predios ou mais, que e quando
   mandar um por um vira abrir a mesma conversa tres vezes. Fica no topo da
   lista porque e a acao que resolve tudo: quem quiser um so continua tendo o
   botao dele, logo abaixo. */
.en-todos{
  margin:0 0 10px; padding:10px 12px;
  border:1px solid var(--navy-600); border-radius:var(--radius);
  background:var(--navy-50, #EAF1F9);
}
.en-todos strong{ display:block; font-size:var(--fs-sm); }
.en-todos .ajuda{ display:block; margin:2px 0 0; }

/* Os links do tecnico escolhido - um por predio. */
.en-lista{ display:flex; flex-direction:column; gap:8px; }

/* A divisao entre o que falta mandar e o que ja foi. */
.en-secao{
  margin:6px 0 0; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--gray-500);
}
.en-secao:first-child{ margin-top:0; }
.en-visita{
  padding:10px 12px;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  background:var(--gray-050, #f7f8fa);
}
.en-visita.feita{ opacity:.6; }
.en-visita-topo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.en-visita-topo span{ font-size:var(--fs-xs); color:var(--gray-500); }

/* O nome da OS e o link: o endereco nao diz nada a ninguem, e o MN-0005/21-08
   diz tudo. Sublinhado, para ficar claro que da para clicar. */
.en-os{
  font-size:var(--fs-sm); font-weight:700;
  color:var(--navy-600); text-decoration:underline;
}
.en-os:hover{ color:var(--navy-700); }
.en-visita .ajuda{ display:block; margin:2px 0 0; }
.en-acoes{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* Abrir o mapa em tela cheia. O botao fica no topo do card, do lado direito -
   e dali que o card cresce. */
.mesa-expandir{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; margin-left:auto;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--white); color:var(--navy-600); cursor:pointer;
}
.mesa-expandir svg{ width:18px; height:18px; }
.mesa-expandir:hover{ border-color:var(--navy-600); background:var(--navy-50, #EAF1F9); }
.mesa-expandir.aberto{
  border-color:var(--navy-600); background:var(--navy-600); color:var(--white);
}
/* O botão do mapa de calor fica antes do tela cheia: ele puxa a margem
   automática, e o tela cheia encosta nele. Ligado, vermelho - a cor do calor. */
.mesa-calor + .mesa-expandir{ margin-left:6px; }
.mesa-calor.aberto{ border-color:#D7191C; background:#D7191C; color:var(--white); }

/* Preventiva padrão > Configurar técnico: cards da equipe e a ficha da operação. */
.tco-equipe{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.tco-card{ text-align:center; }
.tco-card .tco-modo{ margin-top:4px; font-weight:600; color:var(--gray-600); }
.tco-card.ativo{ border-color:#A8D5B8; background:#F2F8F4; }
.tco-card.ativo svg{ color:#14713A; }
.tco-card.ativo .tco-modo{ color:#14713A; }
.tco-rotulo{ margin:14px 0 6px; font-weight:700; font-size:var(--fs-sm); }
.tco-opcao input{ margin:0 0 6px; }
.tco-opcao:has(input:checked){
  border-color:var(--navy-600); background:var(--navy-50, #EAF1F9);
  box-shadow:inset 0 -3px 0 var(--navy-600);
}
#tcoForm .tc-escolha{ margin-bottom:10px; }

/* O card ocupa a janela inteira. Fixed, e nao a API de fullscreen do navegador:
   assim o mapa continua sendo parte da tela - o balao abre, o Esc fecha e nada
   depende de permissao. */
.mesa-card.mesa-cheia{
  position:fixed; inset:0; z-index:200;
  width:auto; min-height:0; margin:0; border-radius:0;
}
.mesa-card.mesa-cheia .mesa-mapa{ min-height:0; }

/* A pagina para de rolar atras do mapa - rolagem que acontece onde nao se ve e
   perda de lugar garantida ao voltar. */
body.mesa-com-mapa-cheio{ overflow:hidden; }

/* A paginacao da lista do dia: fica no pe do card, fora da area que rola -
   assim ela nao foge junto com as linhas. */
.mesa-pag{
  flex:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 18px; border-top:1px solid var(--gray-200);
}
/* A coluna da origem tem largura de conteudo, e nao de porcentagem: o codigo do
   contrato mais o icone da chave ocupam sempre o mesmo espaco, e uma fracao da
   tabela ora sobrava ora cortava o codigo pela metade - "MN-001..." nao serve
   para nada. Ela nao encolhe; quem cede a largura e o nome do cliente. */
#mesaTabela th.mesa-c-origem,
#mesaTabela td.mesa-c-origem,
#mesaAtivos th.mesa-c-origem,
#mesaAtivos td.mesa-c-origem{ width:104px; text-overflow:clip; }

/* Operação do dia (2026-10-04): o cliente deixava um vão largo antes do
   técnico. As colunas agora dividem a largura pelo que mostram - o cliente
   ainda é a maior (nome + nota embaixo), técnico e situação encostam nele. */
#mesaTabela th.mesa-c-cliente{ width:auto; }
#mesaTabela th.mesa-c-tecnico{ width:24%; }
#mesaTabela th.mesa-c-situacao{ width:172px; }
#mesaTabela td:last-child{ overflow:visible; text-overflow:clip; }
#mesaTabela td:last-child .carimbo{ white-space:nowrap; }
#mesaTabela td, #mesaTabela th{ vertical-align:middle; }
#mesaTabela tbody td{ padding-top:12px; padding-bottom:12px; }
#mesaTabela tbody td .celula-nota{ display:block; margin-top:2px; }
#mesaTabela tbody td .nota-antecipada{ display:inline-block; margin-top:4px; }

/* ---- Preventiva padrao: a carteira ganha dono -----------------------------
   A esquerda mostra a consolidada, a direita o lote aberto. As setas no meio
   fazem o gesto de transfer list. */
.pl-grade{
  display:grid; grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr); gap:0;
  align-items:stretch;
}
.pl-lado{ min-width:0; display:flex; flex-direction:column; }
.pl-lado + .pl-lado{ border-left:1px solid var(--gray-200); }
/* Os dois lados sao lidos em paralelo - consolidada de um lado, lote do outro -
   e para isso as tres faixas tem de bater na horizontal: o titulo, a linha dos
   campos e o cabecalho da tabela. Como o conteudo de cada lado tem tamanho
   diferente, quem garante o alinhamento e a ALTURA FIXA das faixas, e nao o
   acaso do que ha dentro delas. */
.pl-lado-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:46px; padding:10px 16px 8px;
}
.pl-lado-topo h3{ margin:0; font-size:var(--fs-md); }

.pl-filtros,
.pl-lote-acoes{
  display:grid; gap:8px; align-items:center;
  min-height:52px; padding:0 16px 12px;
}
.pl-filtros{ grid-template-columns:1fr 130px 120px; }

/* Campo e botao da mesma altura, dos dois lados: uma linha de campos com
   alturas diferentes e o que faz uma tabela comecar abaixo da outra. */
.pl-filtros .entrada,
.pl-lote-acoes .entrada,
.pl-lote-acoes .btn{
  min-height:34px; height:34px; font-size:var(--fs-sm);
}
.pl-lote-acoes .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding-top:0; padding-bottom:0;
}

/* As duas listas rolam por dentro: a carteira tem dezenas de linhas, e a tela
   nao pode crescer sem fim - quem distribui precisa ver os dois lados juntos. */
.pl-lista{ overflow:auto; max-height:520px; }
.pl-lista .tabela{ margin:0; }
.pl-com-dono{ background:var(--gray-50); }
.pl-transfer tbody tr{ cursor:pointer; }
.pl-transfer tbody tr:hover{ background:var(--gray-50); }
.pl-transfer tbody tr.selecionada{
  background:#F2F5FC; box-shadow:inset 3px 0 0 var(--navy-600);
}
.pl-check{ width:32px; text-align:center; }
.pl-check input{ width:15px; height:15px; vertical-align:middle; }

.pl-meio{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:10px 6px;
  border-left:1px solid var(--gray-200); border-right:1px solid var(--gray-200);
  background:var(--gray-50);
}
.pl-meio .btn{ width:46px; padding:8px 0; font-size:16px; }
.pl-meio .ajuda{ text-align:center; font-size:var(--fs-xs); }
.pl-lote-acoes{ grid-template-columns:minmax(0,1fr) minmax(120px,160px); }

/* ---- Os lotes -------------------------------------------------------------
   A carteira nao se distribui predio a predio: divide-se em lotes, e o lote e
   que ganha dono. O cartao mostra o peso dele (predios, atendimentos, meta por
   dia) e as zonas que ele cobre - e dois cliques abrem o vinculo. */
.pl-dividir{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pl-dividir label{ font-size:var(--fs-sm); color:var(--gray-600); }
/* Campo e botao na mesma altura - eles sao um gesto so, e alturas diferentes
   fazem a linha parecer torta. */
.pl-dividir .entrada,
.pl-dividir .btn{
  min-height:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  padding-top:0; padding-bottom:0;
}
.pl-dividir .entrada{ width:82px; text-align:center; }

/* Os dois atalhos ao lado do botao: quadrados, da mesma altura da linha. Icone
   so - eles nao sao a decisao principal, e um rotulo os faria competir com ela. */
.pl-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; cursor:pointer;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:#fff; color:var(--gray-600);
}
.pl-icone svg{ width:18px; height:18px; }
.pl-icone:hover{ border-color:var(--gray-500); background:var(--gray-50); color:var(--gray-900); }
.pl-icone:focus-visible{ outline:2px solid var(--navy-600); outline-offset:2px; }
/* Zerar apaga o desenho inteiro: a cor avisa antes do clique. */
.pl-icone-perigo:hover{ border-color:var(--red); color:var(--red); background:#FDECEC; }
/* Resetar lotes: botão com nome, na cor do que apaga. */
.pl-dividir .pl-resetar{ gap:6px; color:var(--red); border-color:#F2B8BB; }
.pl-dividir .pl-resetar svg{ width:16px; height:16px; }
.pl-dividir .pl-resetar:hover{ border-color:var(--red); background:#FDECEC; }

/* Fallback contra HTML antigo em cache: a escolha do lote agora e pelo select
   dentro da coluna direita, nao por cards. */
.pl-lotes,
.pl-lote{ display:none !important; }

.pl-lote-select{ min-width:0; width:100%; }

/* Os botoes da equipe: um por tecnico, com o rosto de operario. Clicar acende
   o tecnico - e acender e ao mesmo tempo escolher quem recebe a carteira
   selecionada e abrir o que ele ja tem. */
.pl-chips{
  display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px;
}
.pl-chip{
  display:flex; align-items:center; gap:6px;
  padding:7px 11px; text-decoration:none;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:#fff; color:var(--gray-700); font-size:var(--fs-sm);
}
.pl-chip svg{ width:18px; height:18px; color:var(--gray-500); }
.pl-chip strong{ color:var(--gray-900); }
.pl-chip span{
  min-width:22px; padding:1px 6px; text-align:center;
  background:var(--gray-100); color:var(--gray-600); font-size:var(--fs-xs);
}
.pl-chip:hover{ border-color:var(--gray-500); background:var(--gray-50); }
.pl-chip.escolhido{
  border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); background:#fff;
}
.pl-chip.escolhido svg{ color:var(--red); }

/* A faixa do tecnico aberto: o que ele carrega e o quanto isso da por dia. */
.pl-dono{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 16px 8px; padding:10px 12px;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:var(--gray-50);
}
.pl-dono strong{ display:block; }
.pl-dono .carimbo{ min-width:48px; }
.pl-dono-acoes{ padding:10px 16px 14px; }

/* O topo da tela: o mes que se organiza e o gesto que grava a agenda. */
.pl-topo-acoes{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.pl-filtros{ grid-template-columns:1fr 150px; }

@media (max-width:1100px){
  .pl-grade{ grid-template-columns:1fr; }
  .pl-lado + .pl-lado{ border-left:0; border-top:1px solid var(--gray-200); }
  .pl-meio{
    flex-direction:row; border:0; border-top:1px solid var(--gray-200);
  }
}

/* ---- Elevador parado ------------------------------------------------------
   O alerta OCUPA a celula da situacao, e nao um cantinho ao lado dela: predio
   sem elevador nao tem outra leitura que interesse mais, e "Concluida · parado"
   seria dar duas respostas para a mesma pergunta. Por isso ele e um carimbo
   como os outros - mesma caixa, mesma largura - com o icone dentro, que e o
   que o faz ser achado numa lista de trinta linhas. */
.carimbo-parado{ gap:4px; }

/* ---- Escolher o elevador do chamado ---------------------------------------
   O chamado e de UMA cabine. Um icone por elevador, numerado como o predio
   numera - o gesto e apontar o elevador, e nao ler uma lista. O que ja consta
   parado vem marcado: abrir um segundo chamado do mesmo carro e duplicar
   servico, e quem liga raramente sabe que ja ligaram. */
.ch-carros{
  display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 14px;
}
.ch-carro{
  flex:0 0 auto; width:112px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 8px; cursor:pointer;
  border:1px solid var(--gray-300); border-radius:var(--radius);
  background:#fff; color:var(--gray-700); font:inherit; text-align:center;
}
.ch-carro svg{ width:26px; height:26px; color:var(--gray-500); }
.ch-carro strong{ font-size:var(--fs-md); line-height:1.1; }
.ch-carro span{
  font-size:var(--fs-xs); color:var(--gray-500);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-carro:hover{ border-color:var(--gray-500); background:var(--gray-50); }
.ch-carro.escolhido{ border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }
.ch-carro.parado{ border-color:#F2B8BB; background:#FDECEC; color:#B00510; }
.ch-carro.parado svg{ color:#B00510; }
.carimbo-parado svg{ width:12px; height:12px; flex:none; }
.carimbo-parado b{ font-weight:700; }

/* O aviao da linha do chamado: um gesto so, e o unico da coluna de acao. Ele e
   vermelho porque manda uma URGENCIA para a rua - e nao um link qualquer.

   Quadrado e da altura de um carimbo: ele divide a linha com eles, e um botao
   mais alto puxava a linha inteira para baixo. A conta e a mesma do carimbo -
   texto de 12px com entrelinha 1.25, mais 5px de respiro de cada lado e a
   borda -, e a largura repete a altura para o quadrado fechar. */
.mesa-aviao{
  display:inline-flex; align-items:center; justify-content:center;
  width:calc(12px * 1.25 + 12px); height:calc(12px * 1.25 + 12px);
  padding:0; border:1px solid var(--red); border-radius:var(--radius);
  background:var(--red); color:#fff; cursor:pointer;
}
.mesa-aviao svg{ width:14px; height:14px; }
.mesa-aviao:hover{ filter:brightness(1.08); }
.mesa-aviao:focus-visible{ outline:2px solid var(--gray-500); outline-offset:2px; }

.mesa-pag-info{ font-size:var(--fs-xs); color:var(--gray-500); }
.mesa-pag .pag[disabled]{ opacity:.45; cursor:default; }

.mesa-mapa{ flex:1 1 auto; min-height:440px; background:var(--gray-100); z-index:0; }
.mesa-mapa-vazio{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px;
}

/* O balão do mapa é desenhado em SVG no próprio JS - o que fica aqui é só a
   sombra, que dá o descolamento do chão e faz a ponta parecer apoiada no
   endereço. */
/* A volta abre a tela de consulta: quem chegou ali veio de um lugar, e a
   primeira coisa que quer é voltar para ele. */
.cl-voltar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin-bottom:14px;
}

.mesa-balao{ background:none; border:0; }
.mesa-balao svg{ display:block; filter:drop-shadow(0 2px 3px rgba(14,27,48,.35)); }
.mesa-card > .ajuda{ margin:0; padding:8px 18px; border-top:1px solid var(--gray-100); }

/* A lista rola dentro do card - o card é que tem a altura do mapa, e não a
   carteira do dia, que num dia cheio passaria de trinta linhas. */
.mesa-lista{ flex:1 1 auto; overflow-y:auto; }
.mesa-lista table{ margin:0; }
.mesa-lista tbody tr{ cursor:pointer; }
.mesa-lista tbody tr:hover{ background:var(--gray-100); }
.mesa-lista tbody tr.marcada{ background:var(--gray-100); box-shadow:inset 3px 0 0 var(--red); }
/* Endereço que o mapa não achou: fica na lista, sem alfinete. */
.mesa-lista tbody tr.mesa-sem-ponto td:first-child{ box-shadow:inset 3px 0 0 var(--gray-300); }

@media (max-width:1100px){
  .mesa-grade{ grid-template-columns:1fr; }
  .mesa-card{ min-height:0; }
  .mesa-mapa{ min-height:320px; }
}

/* ---- Tabela da Logística --------------------------------------------------
   Largura fixa por coluna e tudo à esquerda. A régua da leitura é uma só: com
   número centralizado no meio de texto alinhado, o olho volta atrás a cada
   linha. E, sendo fixa, o nome comprido de uma obra não empurra as colunas
   vizinhas - ele é abreviado com reticências, e o texto inteiro fica no title,
   ao alcance do mouse. */
#lgTabela{ table-layout:fixed; width:100%; }

#lgTabela th,
#lgTabela td{
  text-align:left;
  padding:10px 12px;
  vertical-align:top;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#lgTabela th:first-child,
#lgTabela td:first-child{ padding-left:0; }
#lgTabela th:last-child,
#lgTabela td:last-child{ padding-right:0; }

/* O que está separado e ainda não foi. Vermelho porque é cobrança - material
   parado que já podia estar na obra -, e o risco cinza acima separa as duas
   contas: em cima o que já foi, embaixo o que pode ir. Só números: o que eles
   significam está no title da célula, ao alcance do mouse. */
/* Aviso de segunda ordem numa lista - o repasse cujo dinheiro do cliente ainda
   não entrou, por exemplo. É informação para a hora da baixa, não o estado da
   linha: fica em letra miúda, com um sinal âmbar, e explica-se no title. De
   carimbo vermelho ele disputava atenção com o vencido, que é quem manda. */
.fin-aviso{
  display:block;
  margin-top:2px;
  font-size:var(--fs-xs);
  color:var(--gray-500);
  cursor:help;
}
.fin-aviso::before{
  content:"⚠";
  margin-right:4px;
  color:var(--orange-500, #C25A00);
}

.nota-alerta,
.nota-quieta{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid var(--gray-200);
}
.nota-alerta{ color:var(--red); }
/* Zerada, a linha só ocupa o lugar dela: some do caminho da leitura sem
   deixar a coluna com duas alturas diferentes de linha para linha. */
.nota-quieta{ color:var(--gray-500); }

/* A nota da célula corta pelo mesmo critério da linha de cima. */
#lgTabela td .celula-nota{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ---- Situação: o carimbo É a barra ---------------------------------------
   O rótulo se enche até o quanto da obra já chegou. Um elemento só no lugar de
   três empilhados (carimbo, motivo e barra) - todos dizendo, em formatos
   diferentes, que a entrega não fechou a lista.

   O degradê vai do âmbar ao verde: quanto mais perto do fim, mais verde, e a
   cor sozinha já responde "está acabando?" antes de o olho ler o número. */
.sit-evolucao{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%;
  padding:5px 9px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  background:
    linear-gradient(90deg, #FBBF24 0%, #16A34A 100%) left / var(--pct, 0%) 100% no-repeat,
    var(--gray-100);
  font-size:var(--fs-xs);
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
}
/* Entrega que fechou a obra: barra cheia, sem meio-tom. */
.sit-evolucao.sit-completa{
  background:linear-gradient(90deg, #16A34A 0%, #0E8A4A 100%);
  border-color:#0E8A4A;
  color:var(--white);
}
.sit-rotulo{ font-weight:700; overflow:hidden; text-overflow:ellipsis; }
/* O número encosta na direita, fora da parte pintada na maioria dos casos -
   por isso ele fica na cor do texto normal, e não na do fundo. */
.sit-pct{ flex:0 0 auto; font-variant-numeric:tabular-nums; opacity:.85; }
.sit-completa .sit-pct{ opacity:.9; }

/* A barra de evolução é o único bloco que ocupa a largura toda da célula. */
#lgTabela td .evolucao{ white-space:normal; }
#lgTabela td .sit-evolucao{ white-space:nowrap; }

/* NA LOGÍSTICA A BARRA NÃO É COLORIDA. A tela já usa cor para o que exige
   decisão - o carimbo da situação, o frete -, e uma barra âmbar-verde em
   cada linha punha um segundo semáforo do lado dele. Aqui o preenchimento é
   só um cinza um pouco mais escuro que o fundo: mostra o quanto andou sem
   disputar a atenção, e o número continua escrito ao lado. */
#lgTabela td .sit-evolucao{
  background:
    linear-gradient(90deg, var(--gray-300) 0%, var(--gray-300) 100%)
      left / var(--pct, 0%) 100% no-repeat,
    var(--gray-100);
  color:var(--gray-700);
}
#lgTabela td .sit-evolucao.sit-completa{
  background:var(--gray-300);
  border-color:var(--gray-300);
  color:var(--gray-700);
}

/* No modo cartão (tela estreita) nada disso vale: ali a célula é uma linha
   inteira, e cortar texto esconderia o que há espaço de sobra para mostrar. */
@media (max-width:760px){
  #lgTabela th,
  #lgTabela td,
  #lgTabela td .celula-nota{ white-space:normal; overflow:visible; }
  #lgTabela td:first-child{ padding-left:12px; }
  #lgTabela td:last-child{ padding-right:12px; }
}

/* ---- A obra de mais de um elevador ocupa mais de uma linha ----------------
   É o MESMO desenho da rodada de Compras, e de propósito: quem lê as duas
   telas no mesmo dia não precisa aprender dois vínculos. A obra é a matriz -
   o SM escrito uma vez -, e de cada uma desce um tronco com um elevador
   pendurado em cada cotovelo.

   O traço entre as linhas do grupo é o mesmo gradiente de 4px de risco e 4px
   de vão que Compras usa: borda tracejada nativa numa célula e gradiente na
   outra davam dois ritmos na mesma linha. Recuado na primeira célula, ele diz
   "isto continua a mesma obra"; linha cheia de ponta a ponta separa obras. */
#lgTabela tr.lg-segue > td{
  border-bottom-color:transparent;
  background-image:repeating-linear-gradient(to right,
    var(--gray-200) 0 4px, transparent 4px 8px);
  background-size:100% 1px;
  background-position:left bottom;
  background-repeat:no-repeat;
}
#lgTabela tr.lg-segue > td:first-child{
  background-size:calc(100% - 21px) 1px;
  background-position:21px bottom;
}
/* O realce do mouse é COR de fundo: o atalho `background` apagaria o traço. */
.tabela tbody tr.lg-segue:hover > td{ background-color:var(--gray-100); }

/* A ÁRVORE, toda na primeira célula e num eixo único de 21px - o centro da
   seta que abre e fecha o grupo. */
#lgTabela tr.lg-grupo > td:first-child{ position:relative; }

/* A obra: o tronco nasce no meio dela e desce até o fim da linha. */
#lgTabela tr.lg-grupo:not(.lg-parte) > td:first-child::after{
  content:''; position:absolute; left:21px; top:50%; bottom:0;
  border-left:1px solid var(--gray-200);
}

/* O elevador: o tronco chega por cima e o cotovelo entra na linha. */
#lgTabela tr.lg-parte > td:first-child{ padding-left:42px; }
#lgTabela tr.lg-parte > td:first-child::before{
  content:''; position:absolute; left:21px; top:0; height:50%;
  border-left:1px solid var(--gray-200);
}
#lgTabela tr.lg-parte > td:first-child::after{
  content:''; position:absolute; left:21px; top:50%; width:13px;
  border-top:1px solid var(--gray-200);
}

/* O elevador do meio deixa o tronco passar para o de baixo. O último não tem
   esta marca, e o tronco morre no cotovelo dele - é o que fecha a árvore. */
#lgTabela .lg-ramo{ display:none; }
#lgTabela tr.lg-segue .lg-ramo{
  display:block; position:absolute; left:21px; top:50%; bottom:0; width:0;
  border-left:1px solid var(--gray-200);
}

/* Grupo RECOLHIDO: a linha que sobra volta a ser um registro inteiro, fechada
   pela linha contínua da tabela. O tracejado prometia uma continuação que não
   está mais na tela, e o tronco descia para o vazio. */
#lgTabela tr.lg-recolhida > td{
  border-bottom-color:var(--gray-200);
  background-image:none;
}
#lgTabela tr.lg-recolhida > td:first-child::after{ display:none; }

/* ---- Validar a entrega ----------------------------------------------------
   O visto de quem conferiu o canhoto - e não de quem descarregou. Fica numa
   coluna própria porque é ação, e não estado: a caixa se marca aqui mesmo, sem
   abrir a carga. */
.lg-check{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); color:var(--gray-600); cursor:pointer;
  white-space:nowrap;
}
.lg-check input{ width:15px; height:15px; accent-color:#16A34A; cursor:pointer; }
.lg-check input:disabled{ cursor:not-allowed; opacity:.45; }
.lg-check input:disabled + span{ opacity:.45; }
.lg-check input:checked + span{ color:#0E8A4A; font-weight:700; }

/* ---- Histórico de entregas da obra ---------------------------------------
   Uma linha por viagem: número, quando chegou, quem levou, se fechou a lista
   e o romaneio daquela entrega. O detalhe do que veio dentro está no romaneio
   - repeti-lo aqui era a mesma relação duas vezes na mesma tela. */
.entrega-blocos{ margin-bottom:6px; }

.entrega-bloco{
  padding:10px 12px;
  margin-bottom:8px;
  border:1px solid var(--gray-200);
  border-left:3px solid var(--gray-300);
  border-radius:var(--radius);
  background:var(--white);
}
/* A carga aberta no painel se identifica no meio das outras. */
.entrega-bloco.entrega-atual{ border-left-color:var(--red); background:var(--gray-100); }

/* Número, situação e km na mesma faixa: é o cabeçalho da viagem. */
.eb-topo{
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.eb-topo strong{ font-size:var(--fs-sm); }
.eb-km{
  margin-left:auto;
  font-size:var(--fs-xs); color:var(--gray-500);
  font-variant-numeric:tabular-nums;
}

.eb-linha{
  margin:0 0 4px;
  font-size:var(--fs-sm); line-height:1.35;
}
/* A nota fica curta de propósito - quem quer o detalhe abre o romaneio, que é
   o papel que a obra assinou. */
.eb-nota{
  display:block;
  font-size:var(--fs-xs); color:var(--gray-500); line-height:1.35;
}

.eb-acoes{
  display:flex; gap:14px;
  margin-top:8px; padding-top:7px;
  border-top:1px solid var(--gray-100);
}
.eb-acoes a{ font-size:var(--fs-xs); color:var(--navy-600); }

/* O convite para a viagem seguinte: fecha o histórico e é tracejado de
   propósito - é a entrega que ainda não existe, não mais um card. */
.entrega-proxima{
  padding:10px 12px;
  margin-bottom:8px;
  border:1px dashed var(--gray-300);
  border-radius:var(--radius);
  background:var(--gray-100);
}
.entrega-proxima .btn{ margin-top:8px; }
/* ---- Almoxarifado: separação por elevador -------------------------------- */
.sep-abas{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.sep-aba{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; font:inherit; font-size:var(--fs-sm);
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  cursor:pointer; color:var(--ink);
}
.sep-aba:hover{ border-color:var(--gray-500); }
.sep-aba.ativa{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.sep-aba span{ font-size:var(--fs-xs); opacity:.75; font-variant-numeric:tabular-nums; }

.sep-barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px; padding:9px 11px;
  background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius);
}
.sep-barra .ajuda{ margin:0; }
.sep-tabela .entrada{ height:30px; padding:0 8px; font-size:var(--fs-sm); }
.sep-tabela input[type="checkbox"]{ width:17px; height:17px; }

/* Linha da obra escolhida na tabela do almoxarifado - clicar seleciona, e a
   acao vem do botao direito. */
.alm-obras tbody tr{ cursor:context-menu; }
.alm-obras tbody tr.marcada > td{ background:var(--gray-100); }

/* Link de relatorio sem obra escolhida: visivel, mas claramente inerte. */
.btn-desligado{ opacity:.45; pointer-events:none; }
/* Lote em falta num item ja separado: o campo se acende ate ser preenchido.
   Sem o numero na peca, o material chega na obra sem se saber de qual volume
   ele saiu - e a conferencia no canteiro para. */
.sep-lote-falta{
  border-color:#E8A800; background:#FFFBF0;
}
.sep-lote-falta:focus{ border-color:#E8A800; }
.sep-alerta{
  font-size:var(--fs-xs); color:#8A6400;
  background:#FFF6E5; border:1px solid #F0D9A0; border-radius:var(--radius);
  padding:3px 9px;
}

/* ---- Chamados do mês na carteira: cinza claro sem chamado, amarelo com ---- */
.cl-ch{ display:inline-flex; align-items:center; gap:5px; color:#C9D0D8; font-weight:700; cursor:help; }
.cl-ch b{ min-width:10px; text-align:right; color:#AEB6C1; font-weight:700; }
.cl-ch svg{ width:18px; height:18px; flex:none; }
.cl-ch.cl-ch-tem{ color:#E8A800; }
.cl-ch.cl-ch-tem b{ color:#8A6400; }

/* ---- Enquete na carteira (manutencao/clientes.php) ------------------------ */
.cl-enq{
  display:inline-grid; place-content:center; width:30px; height:30px; padding:0; cursor:pointer;
  border:0; border-radius:6px; background:transparent; color:#C9D0D8;
}
.cl-enq svg{ width:20px; height:20px; }
.cl-enq:hover{ background:var(--gray-100, #f2f4f7); }
.cl-enq.cl-enq-ok{ color:#16A34A; }
.modal.cl-enq-modal{ width:min(720px, calc(100vw - 32px)); overflow-y:auto; }
.modal.cl-enq-modal > *{ flex:none; }
.cl-enq-elev{ border:1px solid var(--gray-200); padding:10px 12px; margin-bottom:10px; }
.cl-enq-elev h3{ margin:0 0 8px; font-size:var(--fs-sm); color:var(--navy-600); }
.cl-enq-elev dl{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px 12px; margin:0; }
@media (max-width:560px){ .cl-enq-elev dl{ grid-template-columns:1fr 1fr; } }
.cl-enq-elev dt{ font-size:var(--fs-xs); color:var(--gray-500); }
.cl-enq-elev dd{ margin:0; font-size:var(--fs-sm); font-weight:600; }

/* ---- Troca de peça: modais em blocos numerados (manutencao/trocas.php) ---- */
.modal.tp-modal{ width:min(660px, calc(100vw - 32px)); overflow-y:auto; height:auto !important; min-height:0 !important; }
.modal.tp-modal > *{ flex:none; }
/* Dentro do modal não há botão flutuante a desviar: a folga da .ficha sobra. */
.modal.tp-modal .ficha{ padding-bottom:0; }
.modal.tp-modal .modal-acoes{ bottom:-22px; padding-bottom:4px; }
.tp-sec{ border:1px solid var(--gray-200); border-radius:12px; background:var(--white);
         padding:12px 14px 4px; margin:0 0 12px; box-shadow:0 1px 3px rgba(14,27,48,.04); }
.tp-sec-cab{ display:flex; align-items:center; gap:10px; margin:0 0 10px; padding-bottom:9px;
             border-bottom:1px dashed var(--gray-200); }
.tp-sec-cab svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--navy-600); stroke-width:1.9;
                 stroke-linecap:round; stroke-linejoin:round; }
.tp-sec-cab strong{ display:block; font-size:var(--fs-sm); color:var(--navy-900, #0E1B30); letter-spacing:.2px; }
.tp-sec-cab small{ display:block; font-size:var(--fs-xs); color:var(--gray-500); margin-top:1px; }
.tp-num{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-content:center;
         background:var(--navy-600); color:#fff; font-size:12px; font-weight:800; }
.tp-sec .campo{ margin-bottom:12px; }
/* Campos que andam juntos ficam lado a lado dentro do bloco. */
.tp-sec .form-linha{ display:grid; gap:0 12px; align-items:end; }
.tp-sec .form-linha.form-2{ grid-template-columns:1fr 1fr; }
.tp-sec .form-linha.form-3{ grid-template-columns:1.2fr .8fr 1fr; }
.tp-sec .form-linha > .campo{ min-width:0; }
@media (max-width:560px){ .tp-sec .form-linha.form-2, .tp-sec .form-linha.form-3{ grid-template-columns:1fr; } }
.tp-sec .campo label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.4px; color:var(--gray-700); }
.tp-sec .ajuda{ font-size:var(--fs-xs); }
.tp-sec.tp-sec-terc{ background:#FFFCF4; border-color:#F0D9A0; }
.tp-sec.tp-sec-terc .tp-num{ background:#C27C00; }
.tp-sec.tp-sec-terc .tp-sec-cab svg{ stroke:#C27C00; }
.tp-opcao{ display:flex !important; flex-direction:column; gap:4px; padding:16px !important; border-radius:12px !important;
           transition:border-color .15s, box-shadow .15s, transform .15s; }
.tp-opcao svg{ width:28px; height:28px; fill:none; stroke:var(--navy-600); stroke-width:1.8; stroke-linecap:round;
               stroke-linejoin:round; margin-bottom:4px; }
.tp-opcao:hover{ box-shadow:0 6px 16px rgba(14,27,48,.10); transform:translateY(-1px); }
.tp-tipo{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
          background:var(--gray-100, #f2f4f7); margin:0 0 12px; }
.tp-tipo strong{ color:var(--navy-900, #0E1B30); }
.tp-rodape{ padding:10px 12px; border-left:3px solid var(--navy-600); background:var(--gray-100, #f2f4f7); border-radius:6px; }
/* ---- Termômetro da demanda do mês (manutencao/clientes.php) --------------- */
.termo2{ padding:16px 20px 18px; border-radius:14px; }
.t2-topo{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.t2-titulo{ display:flex; align-items:center; gap:16px; min-width:0; }
.t2-ic{ width:76px; height:76px; flex:none; display:grid; place-content:center; border-radius:12px;
        background:#FDECEC; color:#C1050F; }
.t2-ic svg{ width:38px; height:38px; }
.t2-titulo h2{ margin:0; font-size:22px; font-weight:800; color:var(--navy-900, #0E1B30); }
.t2-titulo p{ margin:4px 0 0; color:var(--gray-500); font-size:var(--fs-sm); }
.t2-kpis{ display:flex; gap:12px; flex-wrap:wrap; }
.t2-kpi{ display:flex; align-items:center; gap:12px; min-width:138px; padding:12px 16px; border-radius:12px;
         background:#F3F6FA; }
.t2-kpi.t2-kpi-alerta{ background:#FDECEC; }
.t2-kpi strong{ display:block; font-size:22px; line-height:1.05; font-weight:800; color:var(--navy-900, #0E1B30); }
.t2-kpi span{ display:block; font-size:var(--fs-sm); color:#3D4753; line-height:1.25; }
.t2-k-ic svg{ width:28px; height:28px; display:block; }
.termo2 .t2-verde svg{ stroke:#16A34A; color:#16A34A; } .termo2 .t2-azul svg{ stroke:#1A56DB; color:#1A56DB; } .termo2 .t2-vermelho svg{ stroke:#E30613; color:#E30613; }
.termo2 .t2-ic svg{ stroke:#C1050F; }
.t2-anel{ width:40px; height:40px; flex:none; }

.t2-barra-linha{ display:flex; align-items:flex-start; gap:22px; margin-top:22px; }
.t2-barra{ position:relative; flex:1 1 auto; }
.t2-trilho{ position:relative; height:30px; border-radius:999px; background:#F6E3E5; overflow:hidden; }
.t2-trilho i{ position:absolute; top:4px; bottom:4px; width:0; border-left:1.5px dashed rgba(255,255,255,.75); z-index:2; }
.t2-nivel{ position:absolute; top:0; bottom:0; right:0; border-radius:999px;
           background:linear-gradient(90deg, #F7C3C8 0%, #F08A93 45%, #E30613 100%); transition:left .4s; }
.t2-selo{ position:absolute; top:-3px; transform:translateX(-50%); z-index:3;
          min-width:54px; height:36px; padding:0 10px; display:grid; place-content:center; border-radius:999px;
          background:#E30613; color:#fff; font-weight:800; font-size:17px; box-shadow:0 3px 10px rgba(227,6,19,.35); }
.t2-escala{ position:relative; height:22px; margin-top:4px; }
.t2-escala span{ position:absolute; top:6px; transform:translateX(-50%); font-size:var(--fs-sm); color:var(--gray-500); }
.t2-escala span:first-child{ transform:none; } .t2-escala span:last-child{ transform:translateX(-100%); }
.t2-escala span:first-child::before{ left:2px; } .t2-escala span:last-child::before{ left:auto; right:2px; }
.t2-escala span::before{ content:""; position:absolute; left:50%; top:-8px; height:6px; border-left:1px solid #C9D0D8; }
.t2-resumo{ flex:none; min-width:150px; }
.t2-resumo strong{ display:block; color:#E30613; font-size:var(--fs-sm); font-weight:800; line-height:1.3; }
.t2-resumo span{ display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--gray-500); }
@media (max-width:860px){
  .t2-barra-linha{ flex-direction:column; gap:10px; }
  .t2-kpi{ min-width:0; flex:1 1 140px; }
}

/* ---- RIA: controle no modal da enquete (manutencao/clientes.php) ---------- */
.ria-titulo{ margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--gray-200);
             font-size:var(--fs-sm); color:var(--navy-600); text-transform:uppercase; letter-spacing:.5px; }
.ria-tabela{ width:100%; font-size:var(--fs-sm); }
.ria-tabela th, .ria-tabela td{ text-align:left; padding:6px 8px; vertical-align:middle; }
.ria-acoes{ text-align:right !important; }
.ria-acoes .ria-pdf-el{ margin:2px 0; white-space:nowrap; }
.ria-link{ border:1px solid var(--navy-600); background:var(--gray-100, #f2f4f7); padding:10px 12px; margin-bottom:10px; }
.ria-link label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy-600); margin-bottom:4px; }
.ria-link-linha{ display:flex; gap:8px; }
.ria-link-linha .entrada{ flex:1 1 auto; min-width:0; font-size:var(--fs-sm); background:var(--white); }
.ria-link-linha .btn{ flex:none; }
.ria-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300;
            max-width:min(640px, calc(100vw - 32px)); padding:12px 16px; border-radius:8px;
            background:#0E1B30; color:#fff; font-size:var(--fs-sm); box-shadow:0 8px 24px rgba(0,0,0,.25);
            word-break:break-all; }
.ria-toast.erro{ background:#B00510; }
.ria-toast[hidden]{ display:none; }

/* ---- Criar demanda (manutencao/plano.php) ---------------------------------- */
.modal.cd-modal{ width:min(680px, calc(100vw - 32px)); overflow-y:auto; }
.modal.cd-modal > *{ flex:none; }
.cd-tecnicos{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px;
  max-height:320px; overflow-y:auto; margin:8px 0;
}
.cd-tecnico{
  display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--gray-300); border-radius:var(--radius); background:var(--white);
}
.cd-tecnico:hover{ border-color:var(--navy-600); }
.cd-tecnico input{ width:16px; height:16px; margin:0; flex:none; accent-color:var(--navy-600); }
.cd-tecnico:has(input:checked){ border-color:var(--navy-600); background:var(--gray-100, #f2f4f7); }
.cd-avatar{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-content:center; font-weight:700;
  background:var(--navy-600); color:#fff;
}
.cd-nome{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.cd-nome strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-nome small{ color:var(--gray-500); font-size:var(--fs-xs); }
.cd-contador{ margin:4px 0 0; font-size:var(--fs-sm); font-weight:600; color:var(--navy-600); }
.cd-modos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width:560px){ .cd-modos{ grid-template-columns:1fr; } }
.cd-modo{
  text-align:left; cursor:pointer; padding:14px; font:inherit; color:var(--ink);
  border:1px solid var(--gray-300); border-radius:var(--radius); background:var(--white);
}
.cd-modo:hover{ border-color:var(--navy-600); background:var(--gray-100, #f2f4f7); }
.cd-modo strong{ display:block; margin-bottom:4px; color:var(--navy-600); }
.cd-modo span{ display:block; font-size:var(--fs-xs); color:var(--gray-500); }
.cd-processando .cd-modo{ opacity:.55; pointer-events:none; cursor:progress; }

/* ---- Cadastro de técnico compacto (includes/tecnico_cadastro_modal.php) ----
   Grade de 12 colunas, campos baixos e seções com título fino: a ficha cabe
   inteira na tela sem rolar. */
.modal.tc-compacto{ width:min(760px, calc(100vw - 32px)); max-width:none; overflow-y:auto; }
.modal.tc-compacto > *{ flex:none; }
/* A tabela dos cadastrados rola sozinha: a ficha acima nunca sai da tela. */
.tc-tabela-caixa{ max-height:230px; overflow-y:auto; border:1px solid var(--gray-200); }
.tc-tabela{ width:100%; margin:0; font-size:var(--fs-sm); }
.tc-tabela th{ position:sticky; top:0; z-index:1; background:var(--gray-100, #f2f4f7); text-align:left; }
.tc-tabela th, .tc-tabela td{ padding:6px 10px; text-align:left; }
.tc-tabela tbody tr{ cursor:context-menu; }
.tc-tabela tbody tr:hover{ background:var(--gray-100, #f2f4f7); }
.tc-tabela tr.tc-inativo td{ color:var(--gray-500); }
.tc-compacto .tc-aviso{ margin:0 0 8px; }
.tc-compacto h2{ margin-bottom:6px; }
.tc-compacto .tc-secao{
  margin:14px 0 8px; padding-bottom:5px;
  border-bottom:1px solid var(--gray-200);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--navy-600);
}
.tc-compacto .tc-secao span{
  margin-left:6px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--gray-500);
}
.tc-grade{ display:grid; grid-template-columns:repeat(12, 1fr); gap:8px 10px; }
.tc-grade .campo{ margin:0; min-width:0; }
.tc-c2{ grid-column:span 2; } .tc-c3{ grid-column:span 3; } .tc-c4{ grid-column:span 4; }
.tc-c6{ grid-column:span 6; } .tc-c7{ grid-column:span 7; } .tc-c8{ grid-column:span 8; }
.tc-compacto .campo label,
.tc-compacto .tc-rotulo{
  display:block; margin-bottom:3px;
  font-size:var(--fs-xs); font-weight:600; color:var(--gray-700);
}
.tc-compacto .entrada{ min-height:34px; height:34px; padding:0 9px; font-size:var(--fs-sm); }
.tc-compacto #tcCepAviso{ margin:6px 0 0; min-height:0; }
.tc-compacto #tcCepAviso:empty{ display:none; }

/* Atendimento: três caixas de marcar, uma só por vez. */
/* Mesma altura do seletor de Especialidade ao lado, e as três opções numa
   linha só, centradas nessa faixa. */
.tc-grade{ align-items:end; }
.tc-atendimento{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-around;
  gap:14px; height:34px;
}
.tc-check,
.tc-compacto .campo label.tc-check{
  display:inline-flex; align-items:center; gap:7px;
  margin:0; cursor:pointer; white-space:nowrap; line-height:1;
  font-size:var(--fs-sm); font-weight:400; color:var(--ink);
}
.tc-check:hover input{ border-color:var(--navy-600); }
.tc-check input{
  appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:16px; height:16px; border:1.5px solid var(--gray-500); border-radius:3px;
  background:var(--white); display:grid; place-content:center; cursor:pointer;
}
.tc-check input::after{
  content:''; width:9px; height:5px; margin-top:-2px;
  border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg); opacity:0;
}
.tc-check input:checked{ background:var(--navy-600); border-color:var(--navy-600); }
.tc-check input:checked::after{ opacity:1; }
.tc-check:has(input:checked){ font-weight:600; }

@media (max-width:640px){
  .tc-grade > .campo{ grid-column:span 12; }
  .tc-grade > .tc-c2, .tc-grade > .tc-c3{ grid-column:span 6; }
}