:root{--bg:#f4f7fb;--panel:#fff;--ink:#17212b;--mut:#657487;--line:#dce4ec;--blue:#0b5cab;--blue2:#08305c;--ok:#1a8f3c;--bad:#c0392b;--warn:#c98a00}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;max-width:100%}
img,video,svg{max-width:100%}
#printArea img{max-width:none}
.hidden{display:none!important}
.login{min-height:100vh;background:#0b5cab;display:grid;place-items:center;padding:20px}
.login-card{width:380px;max-width:100%;background:#fff;border-radius:10px;padding:24px;box-shadow:0 18px 60px rgba(0,0,0,.25)}
.mark{width:46px;height:46px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;margin:0 auto 10px}
.ordem-lista{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.ordem-linha{display:flex;align-items:center;gap:10px;margin:0;font-weight:600;color:var(--ink);font-size:14px;text-transform:none;
  background:#fff;border:1px solid #dbe6f0;border-radius:8px;padding:4px 8px;cursor:grab;user-select:none;touch-action:pan-y}
.ordem-linha input{width:70px;flex:0 0 auto;text-align:center;font-weight:600;padding:6px}
.ordem-nome{flex:1;min-width:0}
/* 🕒 O horário do ponto embaixo do nome: ordenar sem ver a hora é ordenar às
   cegas — a rota das 07:30 e a das 22:30 passam pelos mesmos lugares. */
.ordem-hora{display:block;font-weight:600;font-size:11px;color:#7c8b99;letter-spacing:.01em}
/* ▲▼ com alvo de dedo (40px), porque esta tela abre no celular. Arrastar falha
   no toque — as setas são o caminho que sempre funciona. */
.ordem-bts{display:flex;gap:4px;flex:0 0 auto}
.ordem-bts button{min-width:40px;min-height:40px;padding:0;font-size:14px;line-height:1}
.ordem-bts button[disabled]{opacity:.35}
.ordem-pegar{color:#9fb5cf;font-size:18px;letter-spacing:-2px;flex:0 0 auto}
/* Linha "na mao": levantada, para nao restar duvida do que esta sendo movido. */
.ordem-linha.arrastando{cursor:grabbing;border-color:var(--blue);background:#eef4fb;box-shadow:0 6px 16px rgba(11,92,171,.25);transform:scale(1.02)}
/* Enquanto arrasta, a lista para de rolar e nada e selecionado sem querer. */
body.arrastando-ordem{user-select:none}
body.arrastando-ordem .ordem-lista{touch-action:none}
.clonar-box{background:#f6f9fc;border:1px solid #dbe6f0;border-radius:8px;padding:10px 12px;margin:0 0 12px}
.modal-voltar{background:#eef2f6;color:var(--blue2);border:none;border-radius:8px;width:34px;height:34px;min-height:0;padding:0;font-size:20px;line-height:1;flex:0 0 auto;margin-right:8px;cursor:pointer}
.modal-voltar:hover{background:#dde5ee}
.contrato-tag{text-align:center;font-size:13px;color:var(--blue);background:#eef4fb;border:1px solid #cfe0f3;border-radius:20px;padding:5px 12px;margin:0 auto 10px;max-width:100%;font-weight:600}
.contrato-tag:empty{display:none}
.contrato-tag.plataforma{color:#5b4a9e;background:#f2eefc;border-color:#d9cef5}
.contrato-tag.clicavel{cursor:pointer;transition:transform .08s,filter .08s}
.contrato-tag.clicavel:hover{filter:brightness(.97);border-color:var(--blue)}
.contrato-tag.clicavel:active{transform:scale(.98);filter:brightness(.92)}
.contrato-troca{opacity:.7;margin-left:4px}
.login-card h1{text-align:center;margin:0}.login-card p{text-align:center;color:var(--mut);font-size:14px}
/* 🔒 O botao de acao da tela de login preenche a linha (regra do dono). Ele
   nascia com a largura do texto, encolhido no canto esquerdo, enquanto os dois
   links abaixo dele ocupavam a largura toda — a ACAO principal parecia menos
   importante que os atalhos. E num celular, alvo pequeno no canto e alvo que
   se erra. Vale para Entrar, Enviar cadastro, Recuperar e Salvar nova senha. */
/* 🔧 21/09/2026 — "botão colado": o Entrar foi para dentro de #loginCampos (a
   escolha de conta esconde os campos) e deixou de ser filho direto do cartão;
   a regra parou de pegar nele e ele ficou colado na senha, estreito. */
.login-card > button.primary,.login-card > #loginCampos > button.primary{width:100%;margin-top:16px;padding:13px;font-size:15px}
label{display:block;margin:10px 0 4px;color:var(--mut);font-size:12px;font-weight:600}
input,select,textarea{width:100%;border:1px solid #d6dee7;border-radius:8px;padding:9px 10px;background:#fff;font:inherit;font-size:14px}
textarea{min-height:84px;resize:vertical}
/* 🔴 ATENCAO AO `justify-content:center` ABAIXO (06/09/2026, print do dono:
   *"feias essas bolotas azuis, coloque-as alinhadas a esquerda"*).
   Ele vale para TODO botao do app. Um botao que vira `display:flex` com
   conteudo proprio (avatar + texto, icone + titulo) e escreve `text-align:left`
   NAO se desfaz dele: `text-align` nao governa item de flex. O conteudo fica
   centralizado, e como cada cartao tem texto de tamanho diferente, cada um para
   num lugar — foi assim que as tres bolotas do login sairam desalinhadas.
   🔒 Botao com conteudo proprio alinhado a esquerda declara
      `justify-content:flex-start` EXPLICITAMENTE. Ver .conta-btn, .entrada-btn,
      .escolha e o `nav button` (que ja fazia isso desde sempre). */
button,.button{border:none;border-radius:8px;padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .06s ease,filter .06s ease}
.primary{background:var(--blue);color:#fff}.secondary{background:#fff;color:var(--blue);border:1px solid var(--blue)}.ghost{background:#eef2f6;color:#33424f;border:1px solid #aebccb}.danger{background:#fff6f5;color:var(--bad);border:1px solid #f3c9c4}
/* Botao nunca e mudo: responde ao toque e mostra quando esta trabalhando. */
button:active:not(:disabled),.button:active:not(:disabled){transform:scale(.98);filter:brightness(.92)}
button:disabled,.button:disabled{opacity:.6;cursor:not-allowed}
button.drg-ocupado,.button.drg-ocupado{cursor:progress;filter:saturate(.7);pointer-events:none}
/* Resposta do formulario: precisa ser legivel, nao um sussurro cinza de 12px. */
.hint{font-size:12px;color:var(--mut);margin-top:8px}
.form-msg{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.4}
.form-msg:empty{display:none}
.error{color:var(--bad)}
.form-msg.drg-msg--ok{background:#e8f5ec;color:#10633a;border:1px solid #9fd6b4;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600}
.form-msg.drg-msg--info{background:#eef4fb;color:#1d4f86;border:1px solid #b9d0ea;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600}
.form-msg.drg-msg--erro{background:#fdecec;color:#9b1c1c;border:1px solid #f0a9a9;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600}
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
aside{background:var(--blue2);color:#d6e8fb;padding:14px 10px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;color:#fff;padding:4px 8px 12px}/* 🔤 31/08/2026, ordem do dono: *"faça diferenciação entre letra maiúscula e
   minúscula, by é minúsculo"*. O `text-transform:uppercase` transformava
   "by DR Global" em "BY DR GLOBAL" — o nome da empresa se escreve como se
   escreve, e caixa alta imposta pelo CSS apaga a diferença que o dono digitou. */
.brand small{display:block;color:#97bae2;font-size:10.5px;font-weight:600;letter-spacing:.4px}.shield{width:36px;height:36px;border-radius:9px;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:600}
nav{display:flex;flex-direction:column;gap:3px;flex:1}nav button{justify-content:flex-start;text-align:left;background:transparent;color:#d6e8fb;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav button.on,nav button:hover{background:var(--blue);color:#fff}nav button.on{font-weight:600}
.exit{background:rgba(255,255,255,.15);color:#fff}
.hamburger{display:none;border:none;cursor:pointer}
main{min-width:0;padding:22px 20px 80px}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}header h1{margin:0;font-size:24px}header p{margin:4px 0 0;color:var(--mut);font-size:14px}.header-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 🔒 O toast era um elemento comum no topo do <main>. No celular, com a tela
   rolada ate o formulario, ele nascia MUITO acima da area visivel: a mensagem
   existia e o usuario nunca a via. "Registrei a multa e nada aconteceu" era
   isso — o registro funcionava, o aviso e que era invisivel. Agora ele e fixo
   na base da tela, onde o polegar esta, e nao depende de rolagem. */
.toast{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:9999;max-width:min(560px,92vw);padding:14px 16px;border-radius:10px;font-size:15px;font-weight:600;box-shadow:0 6px 24px rgba(10,25,50,.28)}
.toast.on{display:block;background:#0f7a3d;color:#fff}
.toast.err{display:block;background:#b3261e;color:#fff}
.screen{display:block;min-width:0}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
/* 🔒 CONTORNO QUE SE VE. A borda era `--line` (#dce4ec) sobre fundo branco: de
   longe o card nao tinha limite, e a tela virava um borrao de texto solto — nao
   dava para dizer onde um bloco terminava e o outro comecava. Os itens de lista
   ja tinham sido corrigidos para 2px/#c9d6e5 pelo mesmo motivo; os cards e os
   numeros do painel ficaram para tras. Agora seguem o mesmo contorno. */
.metric,.card{background:#fff;border:2px solid #c9d6e5;border-radius:10px;box-shadow:0 1px 4px rgba(20,40,70,.07)}
.metric{transition:border-color .12s ease}
.metric:hover{border-color:#aebfd4}
.metric{padding:14px}.metric span{font-size:12px;color:var(--mut);display:block}.metric b{font-size:28px}
.grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;align-items:start}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.card{padding:14px;min-width:0;overflow-wrap:break-word}.card h2{font-size:16px;margin:0 0 10px}.card h3{font-size:14px;margin:16px 0 8px;color:#33424f}
/* Cada item da lista e um CONJUNTO fechado (um QR com seus papeis, um
   colaborador com seus dados). A borda antiga era #edf1f5 — quase branco sobre
   fundo branco — e nao dava para ver onde um bloco terminava e o outro comecava. */
.list{display:flex;flex-direction:column;gap:12px}
.item{border:2px solid #c9d6e5;border-radius:10px;padding:14px;background:#fff;box-shadow:0 1px 4px rgba(20,40,70,.07)}
.item:hover{border-color:#9fb5cf}
/* Sub-bloco dentro do card: os papeis daquele QR (posto/ronda/conservacao). */
.qr-papeis{display:flex;flex-direction:column;gap:8px;margin:10px 0;padding:10px 12px;background:#f6f9fc;border:1px solid #dbe6f0;border-radius:8px}
.qr-papeis label{display:flex;align-items:center;margin:0}
/* Numero da ordem no roteiro de ronda. */
.roteiro-n{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;margin-right:6px;background:var(--blue);color:#fff;border-radius:13px;font-size:13px;font-weight:600;vertical-align:middle}
/* ---- Condominio ativo no cabecalho ---- */
.condominio-chip{background:#fff;color:var(--blue2);border:2px solid var(--blue);flex-direction:column;align-items:flex-start;gap:0;padding:6px 14px;line-height:1.2;text-align:left}
.condominio-chip b{font-size:15px;display:block}
.condominio-rot{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.condominio-chip.na-plataforma{border-color:#7a5cc0;color:#4b2e83;background:#f7f4ff}
.condominio-chip.sem-troca,.condominio-chip:disabled{cursor:default;opacity:1;filter:none;transform:none}
/* ---- Configuracao em blocos ---- */
.cfg-grupo{margin-bottom:22px}
.cfg-grupo h2{font-size:17px;margin:0 0 2px}
.cfg-grupo-sub{margin:0 0 10px;font-size:13px;color:var(--mut)}
/* ---- Interruptor de operacao do condominio (arrastar para ligar/desligar) ---- */
.interruptor{border:2px solid #9fd6b4;background:#f2fbf5}
.interruptor.pausado{border-color:#f0d9a0;background:#fffaf0}
.interruptor-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.switch{position:relative;display:inline-block;width:62px;height:34px;flex:0 0 auto;margin:0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#c98a00;border-radius:34px;transition:background .2s ease}
.switch .slider:before{content:"";position:absolute;width:26px;height:26px;left:4px;top:4px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider:before{transform:translateX(28px)}
.switch input:focus-visible + .slider{outline:3px solid var(--blue);outline-offset:2px}
.item .qr{margin-top:2px;border:2px solid #c9d6e5}
.item-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid #e6edf5;margin-bottom:8px}
.item b{font-size:15px}.meta{font-size:12px;color:var(--mut);line-height:1.5;margin-top:4px;overflow-wrap:break-word}/* 🔒 Botao preenche a linha (regra do dono). auto-fit com minimo de 132px: em
   telas largas os botoes se dividem por igual; no celular quebram sozinhos, sem
   ficar um botao gigante e outro minusculo na mesma fila. Botao solto continua
   com largura natural — esticar UM botao pela linha inteira e feio. */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;margin-top:8px;align-items:stretch}
.actions > *{width:100%}
.actions:has(> :only-child){display:flex}
.actions.livre{display:flex;flex-wrap:wrap}
.pill{font-size:11px;font-weight:600;border-radius:20px;padding:3px 8px;background:#eef2f6;color:#506273;white-space:nowrap}.pill.ok{background:#e8f6ec;color:var(--ok)}.pill.warn{background:#fff7e5;color:var(--warn)}.pill.bad{background:#fde8e6;color:var(--bad)}
.aut-pastas{grid-template-columns:repeat(auto-fit,minmax(156px,1fr))}
.aut-pasta{--aut-cor:var(--blue);background:#fff;color:var(--aut-cor);border:1px solid var(--aut-cor);min-height:54px;font-size:15px}
.aut-pasta.on,.aut-pasta:hover{background:var(--aut-cor);color:#fff}
.aut-pasta.on .pill,.aut-pasta:hover .pill{background:rgba(255,255,255,.88);color:var(--aut-cor)}
.aut-consulta{--aut-cor:var(--blue);border-color:var(--aut-cor);border-width:3px;margin-bottom:14px}
.aut-consulta h2{color:var(--aut-cor)}
.aut-busca input{font-size:18px;font-weight:600;border-width:2px;border-color:var(--aut-cor);min-height:48px}
.aut-busca button{min-height:48px}
.aut-fotos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.aut-foto{width:78px;height:78px;border:2px solid #d6e2ef;border-radius:8px;overflow:hidden;background:#f7fafc;display:inline-flex;align-items:center;justify-content:center}
.aut-foto img{width:100%;height:100%;object-fit:cover;display:block}
.aut-foto:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* 📥 A fila de sinal (05/09/2026). Azul, nao vermelho: o registro guardado
   NAO e um erro — e uma prova em transito. Vermelho ali ensinaria o
   rondante a achar que perdeu a passagem e a bater o ponto de novo. */
.pill.aguardando{background:#e9f1fb;color:#1c5fa8}
.pill.alerta{background:#fff7e5;color:var(--warn)}
.rota-linha.na-fila{background:#f6faff}
.card.fila-sinal{border-left:4px solid #1c5fa8}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th,.tbl td{padding:8px;border-bottom:1px solid #eef2f6;text-align:left;vertical-align:top}.tbl th{font-size:11px;text-transform:uppercase;color:#7c8b99}
.qr{width:96px;height:96px;border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:8px}
.scanner{display:none;margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#000}.scanner.on{display:block}.scanner video{width:100%;max-height:260px;display:block}
/* ---- Marca da passagem no card do posto ----
   Faixa fina, separada dos ocupantes: sao duas perguntas diferentes ("quem esta
   aqui" e "a troca foi fechada"), e misturar as duas numa linha so faria a
   segunda passar batida. */
.pass-marca{margin-top:8px;padding:6px 8px;border-radius:6px;font-size:12px;line-height:1.4;border-left:3px solid var(--line);background:#f7f9fc}
.pass-marca .meta{font-size:11px}
.pass-ok{border-left-color:#2e9e5b;background:#f1f9f4}
.pass-pend{border-left-color:#e0a300;background:#fdf6e6}
.pass-div{border-left-color:#c0392b;background:#fdf3f2}
/* 📦 Arquivada: cinza de propósito. Assunto encerrado não disputa atenção com
   o que ainda espera providência — a cor aqui é o contrário de um alerta. */
.pass-arq{border-left-color:#8794a5;background:#f2f4f7;color:#4a5563}
.pass-nenhuma{color:#7c8b99}
/* ---- Roteiro de implantacao ----
   Amarelo de "obra em andamento", nao vermelho de erro: nada esta quebrado,
   falta terminar de montar. O passo obrigatorio pendente e o unico que ganha
   borda forte — e ele que segura a operacao. */
.implantacao{border:2px solid #e0a300;background:#fffdf5}
.passo-imp{border-left-width:4px}
.passo-ok{border-left-color:#2e9e5b;opacity:.75}
.passo-falta{border-left-color:#c0392b}
.passo-aviso{border-left-color:#e0a300}
.passo-imp .item-head .meta{font-size:11px;text-transform:uppercase;letter-spacing:.02em}
/* ---- Ocupacao dos postos ----
   O posto VAZIO precisa gritar tanto quanto o posto lotado: ele nao aparece em
   lista de turno aberto, e foi ele que passou a noite sem ninguem notar. */
.ocup{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.ocup-item{border:2px solid #c9d6e5;border-left-width:5px;border-radius:10px;padding:9px 11px;background:#fff;font-size:13px;box-shadow:0 1px 4px rgba(20,40,70,.07)}
.ocup-ok{border-left-color:#2e9e5b}
.ocup-vazio{border-left-color:#c0392b;background:#fdf3f2}
/* ⏸️ Rendição em curso: azul, não vermelho nem âmbar. O posto está sem
   ninguém AGORA, mas com responsável conhecido e hora de volta — é informação de
   rotina, e rotina pintada de alarme ensina a ignorar alarme. */
.ocup-pausado{border-left-color:#2a6fb0;background:#f3f8fd}
.ocup-excedido{border-left-color:#e0a300;background:#fdf6e6}
/* ---- Blocos e unidades: as unidades aparecem como fichas ----
   Uma lista vertical de 120 apartamentos empurraria o proximo bloco para fora
   da tela. Em ficha, o cadastro inteiro se confere de um olhar. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;background:#eef4fb;border:1px solid #cfe0f3;color:#194a7a;border-radius:999px;padding:3px 4px 3px 10px;font-size:12px;font-weight:600}
.chip-x{border:0;background:transparent;color:#7a93ad;font-size:15px;line-height:1;cursor:pointer;padding:0;width:22px;height:22px;border-radius:50%}
.chip-x:hover{background:#d9e6f4;color:#a3352a}
/* ---- Ocorrencia: duas vozes e reincidencia ----
   O relato do colaborador e o comunicado ao morador precisam ser distinguiveis
   NUM RELANCE. Quando os dois eram texto corrido igual, a linha entre "o que a
   equipe anotou" e "o que o morador vai ler" simplesmente nao existia na tela —
   e foi assim que o relato interno acabou dentro do PDF do morador. */
.voz{border-left:4px solid var(--line);border-radius:0 8px 8px 0;padding:8px 10px;margin:8px 0;background:#f7f9fc;color:var(--ink);font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.voz-tag{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.02em;font-weight:600;margin-bottom:4px;color:#5b6b7c}
.voz-interna{border-left-color:#8a94a0;background:#f4f6f8}
/* ⚖️ A fundamentação tem cor própria: ela não é relato nem comunicado — é o
   dispositivo que sustenta os dois, e quem valida precisa achá-la de relance. */
.voz-fund{border-left-color:#8a5a00;background:#fdf7ec}
.voz-morador{border-left-color:#2a7ac0;background:#eef4fb}
.voz-morador .voz-tag{color:#1c5e97}
/* Rascunho e "alterado depois do envio" pedem cor de ATENÇÃO, não a mesma do
   comunicado enviado: texto na tela com cara de enviado faz o supervisor achar
   que já avisou — e ninguém avisa duas vezes o que acha que já avisou. */
/* Prévia da via do morador. Alto o bastante para ler o documento sem sair do
   formulário — sair para conferir e voltar é onde se perde o texto digitado. */
/* 👁️ A faixa da PRÉ-VISUALIZAÇÃO. Fixa e vermelha de propósito: esquecer que se
   está vendo com os olhos de outro e concluir que "o app não deixa fazer nada"
   é o defeito óbvio deste recurso. Fica por cima de tudo, inclusive do modal. */
.faixa-preview{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#8a1c12;color:#fff;
  font-size:14px;font-weight:600;box-shadow:0 -2px 12px rgba(0,0,0,.25)}
.faixa-preview button{background:#fff;color:#8a1c12;border:0;font-weight:600}
body.em-preview main{padding-bottom:64px}
/* ===== 📊 CARDS DO PAINEL: DOIS POR LINHA, LETRA GRANDE ==================
   Ordem do dono (14/08/2026): "botões na tela dois por linha com letras grandes
   — colaboradores com deficiência visual trabalham no posto e vamos padronizar
   isso; títulos fáceis de ver". */
/* 📊 CARDS MENORES E ALINHADOS (16/08/2026, ordem do dono: "diminua o tamanho
   destes cards e alinhe eles — coloque-os na primeira linha e os que não
   servir, vai adicionando abaixo").
   🔒 `auto-fill` com largura mínima, e não um número fixo de colunas: assim a
      primeira linha se enche sozinha com quantos couberem na tela, e o resto
      desce. Com `repeat(2, ...)` — como estava — sobrava metade da largura
      vazia no monitor dele e um card órfão embaixo.
   🔒 A altura é a mesma para todos (`align-items:stretch` do grid + padding
      igual): card de rótulo comprido crescia e desalinhava a linha inteira. */
.cards-2{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cards-2 .metric{padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;min-height:78px}
.cards-2 .metric span{font-size:13px;font-weight:600;line-height:1.25}
.cards-2 .metric b{font-size:26px;line-height:1.05}
@media(max-width:420px){ .cards-2{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
/* ↕️ A ordem dos cards, na Configuração. Setas em vez de arrastar: arrastar
   exige mouse preciso e falha no toque, e esta tela também abre no celular. */
.ord-lista{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.ord-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--bd);border-radius:10px;padding:8px 10px;background:#fff}
.ord-bts{display:flex;gap:4px;flex:0 0 auto}
.ord-bts button{min-width:38px;min-height:34px}
/* 📊 O gráfico de encomendas: rola na horizontal quando há muitos períodos —
   o corpo da página NUNCA rola de lado (regra da casa). */
.gr-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.gr-filtros select{margin:0;flex:0 1 auto;min-width:130px}
.gr-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-bottom:6px}
.gr-legenda i{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;margin-right:4px}
.gr-totais{margin:4px 0 8px;display:grid;gap:4px}
.gr-total-geral{background:#eef5ff;border:1px solid #cfe0f5;border-radius:8px;padding:8px 10px;font-size:15px;color:#0b1f3a;line-height:1.5}
.gr-total-geral span{white-space:nowrap}
.gr-total-periodo{font-size:13px;color:var(--mut)}
.gr-rolo{overflow-x:auto;padding-bottom:4px}
/* 📦 Os três fluxos do posto: alvo grande, cor por ação. */
.fluxos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.fluxo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 16px;border-radius:12px;
  border:2px solid transparent;text-align:left;box-shadow:0 2px 8px rgba(20,40,70,.10);color:#fff}
.fluxo span{font-size:26px;line-height:1}
.fluxo b{font-size:17px;letter-spacing:.3px}
.fluxo small{font-size:13px;font-weight:600;opacity:.9}
.fluxo-receber{background:#0b5cab}
.fluxo-entregar{background:#0b7a3b}
/* ===== 🗂️ LISTA DE ESCOLHA (21/08/2026) ================================
 * Uma opção por linha: ícone, título e a explicação embaixo, tudo alinhado à
 * esquerda. Nasceu porque o modal "Mover para..." reaproveitou o `.fluxo` — o
 * botão colorido gigante da tela de turno —, que só tem cor quando vem com a
 * classe do fluxo dele. Sem ela, o resultado foi uma caixa azul com o título
 * centralizado de um lado e a descrição do outro: ilegível e sem cara de app.
 * 🔒 Componente PRÓPRIO, não um `.fluxo` remendado: o `.fluxo` é para AÇÃO
 *    (abrir turno, encerrar), este é para ESCOLHER entre alternativas. Duas
 *    coisas diferentes com a mesma roupa acabam divergindo na primeira mudança.
 * 🔒 Alvo de dedo: a linha inteira é clicável e tem 56px de altura mínima.
 */
.escolhas{display:flex;flex-direction:column;gap:8px;margin:12px 0}
/* ⚠️ NAO acrescente `justify-content` aqui sem olhar a linha ~805: existe uma
   SEGUNDA regra `.escolha` (o container do fechamento, `flex-direction:column`)
   que vem depois e vence no `display`/`flex-direction`. Ou seja: este botao ja
   renderiza em COLUNA, e ali `justify-content` governa o eixo VERTICAL — mudar
   para `flex-start` empurraria o conteudo para o topo do botao. Duas coisas
   diferentes dividem o nome `escolha`; enquanto isso nao for separado, este
   bloco nao e a verdade sozinho. */
.escolha{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:56px;
  padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);text-align:left;font-weight:600;font-size:14px;cursor:pointer;
  transition:border-color .12s ease,background .12s ease,transform .06s ease}
.escolha:hover{border-color:#b9cde4;background:#fbfdff}
.escolha:active{transform:scale(.995)}
.escolha-ico{font-size:20px;line-height:1.2;flex:0 0 auto}
.escolha-txt{flex:1;min-width:0}
.escolha-txt b{display:block;font-size:15px;line-height:1.3}
.escolha-txt small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--mut);line-height:1.4}
/* Onde ela está agora: marcada, não "selecionada de mentira" — a diferença tem
   de ser visível de relance, no celular, com pouca luz. */
.escolha.aqui{border-color:var(--blue);background:#eef5fd}
.escolha.aqui .escolha-txt b{color:var(--blue2)}
.escolha-tag{flex:0 0 auto;align-self:center;font-size:11px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--blue);background:#dcebfb;border-radius:20px;padding:4px 10px}
@media(max-width:520px){
  .escolha-tag{display:none}
  .escolha.aqui .escolha-txt b::after{content:' · está aqui';font-size:11px;color:var(--blue)}
}
/* ⬆️ "Há versão nova": no ALTO, por cima de tudo, e clicável inteira. Fica
   acima da faixa de prévia porque é a única que consegue consertar a outra. */
.faixa-versao{position:fixed;left:10px;right:10px;bottom:10px;z-index:10000;cursor:pointer;
  background:#8a5a00;color:#fff;padding:8px 10px;text-align:left;font-size:12px;line-height:1.35;
  border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.faixa-versao:hover{filter:brightness(1.08)}
/* 🧠 A faixa da MEMÓRIA. Mesmo lugar e mesmo comportamento da faixa de versão
   (fixa no alto, clicável inteira), cor diferente porque o problema é outro:
   ali o app está velho, aqui a aba está prestes a morrer. */
.faixa-memoria{position:fixed;left:10px;right:10px;bottom:10px;z-index:10001;cursor:pointer;
  background:#7a1f6a;color:#fff;padding:8px 10px;text-align:left;font-size:12px;line-height:1.35;
  border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.faixa-memoria:hover{filter:brightness(1.08)}
.arquivo-frame{width:100%;height:min(72vh,720px);border:1px solid #e3e8ef;border-radius:10px;background:#fff}
@media(max-width:520px){.arquivo-frame{height:calc(100dvh - 230px);min-height:360px}}
/* ===== 🔗🎨 A LINHA DO RELATÓRIO: cor por registro, e clicável (23/08/2026) ==
   Ordem do dono: *"a fila precisa ser clicável para levar ao card da multa — e
   cada linha deve ter uma cor diferente para facilitar a visualização e a
   identificação."*
   🔒 A cor entra como TOM CLARO de fundo mais uma faixa forte à esquerda: o
      texto continua preto sobre claro (legível para quem enxerga pouco, que é
      quem trabalha no posto) e a folha impressa não vira um arco-íris.
   🔒 `--linha` vem do id do registro (ver `corDaLinha`): a mesma multa tem
      sempre a mesma cor — cor que muda a cada clique não identifica nada. */
.tbl-colorida tbody tr{background:var(--linha,#fff)}
.tbl-colorida tbody tr>td:first-child{box-shadow:inset 4px 0 0 0 rgba(0,0,0,.18)}
.rep-linha{cursor:pointer}
.rep-linha:hover{filter:brightness(.96)}
.rep-linha:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
/* No papel, a cor de fundo some (tinta) e fica só a faixa: ela basta para
   separar as linhas com o olho. */
@media print{
  .tbl-colorida tbody tr{background:#fff}
  .tbl-colorida tbody tr>td:first-child{box-shadow:inset 3px 0 0 0 #999}
}
/* ===== 🏠💚 O APP DO MORADOR (23/08/2026) ================================
   "O app do morador pode ser verde para não confundir com os outros." A cor
   principal vem das variáveis (o servidor manda verde no estado dele); aqui
   ficam os detalhes que não são variável — e a faixa que diz, sem ler nada,
   em qual app a pessoa está. */
.fluxo-morador{background:linear-gradient(180deg,#1f7a45,#186038);color:#fff}
.fluxo-morador small{color:#dff3e6}
body.app-morador .header-actions .button.secondary{border-color:#1f7a45;color:#1f7a45}
body.app-morador #userLabel{color:#c9efd8}
/* 🔒 O morador não tem posto: a bolinha de turno do menu não faz sentido nele
   e sumiria sozinha por falta de dado — escondê-la aqui evita o ponto cinza. */
body.app-morador .turno-dot{display:none}
/* 🔎 A lupa da equipe: campo largo e o "Limpar" ao lado, não embaixo. */
.busca-colab{margin:12px 0 4px;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.busca-colab label{display:block;width:100%;margin:0 0 4px}
.busca-colab input{flex:1 1 220px;margin:0}
/* 🔘 O turno no mesmo padrão: cor por ação, para responder antes da leitura. */
.fluxo-render{background:#b06a00}
.fluxo-encerrar{background:#b3261e}
.fluxo:hover{filter:brightness(1.08)}
/* 🔒 Qual está aberto. Sem a marca, o formulário embaixo parece ter aparecido
   sozinho e a pessoa não sabe de qual botão ele veio. */
.fluxo.ativo{border-color:#0b1f3a;box-shadow:0 0 0 3px rgba(11,31,58,.22),0 2px 8px rgba(20,40,70,.18)}
.fluxo.ativo::after{content:'▾';position:absolute;right:14px;bottom:8px;font-size:20px;line-height:1;opacity:.85}
.fluxo{position:relative}
/* ===== 🔓 A PORTA DE ENTRADA — dois botões e nada mais ===================
   Letra grande e alvo grande de propósito: colaboradores com baixa visão
   trabalham no posto, e esta é a primeira tela do dia para todos. */
.entrada{max-width:560px;margin:0 auto;padding:8px 0 20px}
.entrada h2{font-size:20px;text-align:center;margin:6px 0 16px}
.entrada-btn{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;text-align:left;
  padding:22px 18px;margin-bottom:14px;border-radius:14px;border:2px solid transparent;
  font-size:19px;line-height:1.25;box-shadow:0 2px 10px rgba(20,40,70,.10)}
.entrada-btn b{display:block;font-size:21px;letter-spacing:.3px}
.entrada-btn small{display:block;font-size:14px;font-weight:600;opacity:.85;margin-top:3px}
.entrada-ico{font-size:30px;line-height:1}
.entrada-abrir{background:#0b7a3b;color:#fff}
.entrada-abrir:hover{background:#0a6a34}
.entrada-editar{background:#fff;color:var(--ink);border-color:var(--line)}
.entrada-editar:hover{border-color:var(--blue)}
.pescar-tit{font-size:15px;margin:18px 0 8px}
.pescar-tit small{font-weight:600;color:var(--mut)}
.pescar-item{display:block;width:100%;text-align:left;padding:16px 16px;margin-bottom:10px;
  border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:17px}
.pescar-item b{display:block;font-size:18px}
.pescar-item small{display:block;font-size:13px;color:var(--mut);font-weight:600;margin-top:3px}
.pescar-item:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(20,40,70,.12)}
.pescar-passagem{border-left:5px solid #e0a300;background:#fffdf5}
@media(max-width:520px){
  .entrada h2{font-size:18px}
  .entrada-btn{padding:20px 14px;font-size:18px}
  .entrada-btn b{font-size:19px}
}
/* ===== 🧤📦 MARCAR ACHADOS PARA O BLOCO (24/08/2026) =====================
   A caixinha fica FORA do card, numa coluna própria: dentro dela disputaria o
   clique com os botões de ação da linha. Alvo de 40px no toque, como os ícones
   dentro da bolha da conversa — quem marca treze objetos marca com o dedo. */
.ach-linha{display:flex;gap:8px;align-items:flex-start}
.ach-linha>.item{flex:1;min-width:0}
.ach-sel{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
  margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.ach-sel:hover{border-color:var(--blue)}
.ach-sel input{width:20px;height:20px;margin:0;cursor:pointer}
/* A barra da seleção nasce escondida e só aparece com algo marcado: barra fixa
   dizendo "0 marcados" come a tela do celular para não dizer nada. */
.ach-barra{margin:8px 0;padding:10px 12px;border:2px solid var(--blue);border-radius:10px;background:#f2f7ff}
.ach-barra .actions{margin-top:6px}
/* ☑️ "Selecionar todos": uma linha clicável inteira, não uma caixinha de 13px
   perdida ao lado de um texto. Alvo de dedo em toda a faixa. */
.ach-todos{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;min-height:44px}
.ach-todos:hover{border-color:var(--blue)}
.ach-todos input{width:20px;height:20px;margin:0;cursor:pointer}
.bloco-lista{margin:8px 0;padding-left:22px}
.bloco-lista li{margin-bottom:3px;line-height:1.35}
/* ✔️ A coluna de marcar do relatório: alvo de dedo, e não rouba largura das
   colunas que carregam a informação. */
.rep-col-chk{width:34px;text-align:center;padding-left:4px;padding-right:4px}
.rep-col-chk input{width:18px;height:18px;margin:0;cursor:pointer}
.rep-col-chk label{display:block;margin:0;padding:6px 0;cursor:pointer}
.previa-doc{width:100%;height:62vh;min-height:320px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:6px}
/* 📄 23/09/2026 — PDF desenhado pelo app (pdf-na-tela.js) em vez de iframe: o
   Chrome do Android nao tem visualizador de PDF e mostrava a folha triste. */
.pdf-paginas{overflow:auto;-webkit-overflow-scrolling:touch;padding:8px;background:#eef1f5}
.pdf-pagina{display:block;width:100%;height:auto;margin:0 0 8px;border:1px solid #e3e8ef;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pdf-resto{font-size:12.5px;color:#5b6573;margin:4px 0 8px;text-align:center}
.arquivo-frame-plano-b{width:100%;height:100%;min-height:300px;border:0;background:#fff}
@media(max-width:900px){.previa-doc{height:46vh;min-height:240px}}
.voz-rascunho{border-left-color:#e0a300;background:#fdf6e6}
.voz-rascunho .voz-tag{color:#8a6100}
.reinc{border:1px solid #f0d9a8;background:#fdf6e6;color:#6b4e10;border-radius:8px;padding:8px 10px;margin:8px 0;font-size:13px;line-height:1.5}
.reinc .meta{color:#7a5c1c}
.reinc-duvida{border-color:#cfe0f3;background:#eef4fb;color:#194a7a}
.reinc-duvida .meta{color:#2a6098}
/* 🔑 A caixa que a recusa manda preencher. Rolar ate ela nao basta se ela nao
   se distingue do resto da tela — alerta tem de LEVAR ao conserto. */
.pisca{outline:3px solid #e0a300;outline-offset:3px;border-radius:8px;transition:outline-color .3s}
/* 🔒 A barra de "pesque a passagem": fica no alto da tela ATUAL, em qualquer
   modulo, enquanto a trava valer. Trava silenciosa e a pessoa descobrindo que
   nao grava no meio de um lancamento. */
.barra-pescar{border-color:#e0a300;background:#fdf6e6;color:#6b4a00;margin-bottom:12px}
.barra-pescar .btn-xs{margin-left:8px}
/* Ocorrencia citada na reincidencia pisca quando a pessoa clica no "#12". */
.item.destaque{outline:3px solid var(--blue);outline-offset:2px;transition:outline-color .3s}
#printArea{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  aside{position:sticky;top:0;height:auto;z-index:30;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0)) 10px 8px}
  .brand{order:1;flex:1 1 0;min-width:0;padding:0;overflow:hidden}
  .brand>div{min-width:0;overflow:hidden}
  .brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hamburger{order:2;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.15);color:#fff;font-size:20px;border-radius:8px}
  .exit{order:3;position:static;width:auto;padding:8px 12px;min-height:44px}
  nav{order:4;flex-basis:100%;display:none;flex-direction:column;gap:4px;margin-top:4px}
  nav.open{display:flex}
  nav button{justify-content:flex-start;min-height:44px;font-size:15px}
  .cards,.grid,.grid2,.grid3{grid-template-columns:1fr}
  header{flex-direction:column;align-items:stretch}
  .header-actions{flex-wrap:wrap}
  main{padding:14px 12px calc(64px + env(safe-area-inset-bottom,0))}
  input,select,textarea{font-size:16px}
  button,.button{min-height:44px}
  .btn-xs{min-height:0}
  .metric b{font-size:24px}
  /* modal cola no topo: com o teclado aberto o centralizado some da tela */
  .modal-root{padding:10px;align-items:flex-start;padding-top:16px}
  /* botao em lista/acao ocupa a linha inteira */
  .actions button,.actions .button{flex:1 1 140px}
  .header-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .header-actions .button,.header-actions button{width:100%}
  .item-head{flex-wrap:wrap}
  .notif-panel{left:0;right:auto;width:min(340px,calc(100vw - 24px));max-width:none}
  .tbl{font-size:12px}
}
@media(max-width:520px){
  main{padding:12px 10px calc(60px + env(safe-area-inset-bottom,0))}
  header h1{font-size:20px}
  .card,.metric{padding:12px}
  .cards{gap:8px}
  .grid2,.grid3{grid-template-columns:1fr}
  .header-actions .button{flex:1 1 auto}
  .perm-grid{grid-template-columns:1fr}
  .cfg-menu{grid-template-columns:1fr}
  .brand-row{flex-wrap:wrap}
  .anexo-row input[type=file]{min-width:0;flex:1 1 100%}
  .qr{width:88px;height:88px}
}
/* 🖨️ IMPRESSÃO POR LISTA DE INCLUSÃO — 21/08/2026.
   🔴 A regra anterior era uma lista de EXCLUSÃO:
      `aside,header,nav,.screen,.toast,.modal-root,.faixa-versao,.faixa-preview,
        .notif-panel{display:none}`
      Cada elemento `position:fixed` novo sobrevivia a ela e vazava para o papel,
      e so entrava na lista depois que alguem via a folha feia — aconteceu tres
      vezes (o modal em 18/08, as duas faixas antes disso). Lista de exclusao
      falha ABERTA: esquecer e o padrao.
   ✅ Agora so sai no papel o que esta dentro de #printArea, que e filho direto
      do <body> (index.html). Elemento novo nasce fora da folha sem ninguem
      precisar se lembrar dele — falha FECHADA.
   🔒 Nao trocar por seletor de classe/id: e o `body > *` que garante que o
      proximo overlay tambem fique de fora. */
/* ===== 🖨️ A FOLHA NAO ESTOURA (23/08/2026) ==============================
   Print do dono: o relatorio de encomendas ENTREGUES saindo PARA FORA da
   pagina nos dois lados. Duas causas, e as duas viviam aqui:
   🔴 `table-layout:auto` deixa a tabela crescer alem da folha para caber o
      conteudo — e uma celula com o link da assinatura (180 caracteres de
      token, sem espacos) empurra a tabela inteira para fora. Com `fixed` +
      `width:100%` a tabela NAO PODE passar da folha: e a largura que manda,
      e o texto quebra dentro dela.
   🔴 Sem `overflow-wrap:anywhere` uma palavra sem espaco nao quebra: ela sai
      da celula e leva a coluna junto.
   🖨️ E a folha nasce em PAISAGEM: relatorio de portaria e largo por
      natureza, e obrigar quem imprime a achar a opcao no dialogo do Chrome e
      transferir para ele um problema que e nosso. */
@media print{body>*:not(#printArea){display:none!important}
/* 🔒 A regra de INCLUSAO vem PRIMEIRO e nao se mexe nela (ver test/rastro-imprime):
   e ela que garante que elemento novo nasce FORA do papel. O @page entra depois. */
@page{size:A4 landscape;margin:9mm}#printArea{display:block;color:#111;background:#fff}#printArea h1{font-size:16px;margin:0 0 3px}#printArea .when{font-size:10px;color:#555;margin-bottom:8px}
#printArea table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:8.5px}
#printArea th,#printArea td{border:1px solid #8a9099;padding:3px 4px;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
/* 🔒 Contorno em TODOS os campos (24/08/2026, ordem do dono). Doze colunas
   alinhadas so pela posicao fazem o olho perder a linha na terceira coluna —
   e numa folha de conferencia isso e ler o dado da linha de cima. O
   cabecalho com fundo e a faixa alternada existem pela mesma razao.
   🔴 `-webkit-print-color-adjust` porque o Chrome remove fundo na impressao
      por padrao: sem isso a faixa some justamente no papel. */
#printArea thead th{background:#e8eaee;border-color:#5b616a;font-weight:600}
#printArea tbody tr:nth-child(even) td{background:#f4f6f8}
#printArea table.folha{-webkit-print-color-adjust:exact;print-color-adjust:exact}
#printArea a{color:#0b3d91;text-decoration:underline}
#printArea thead{display:table-header-group}#printArea tr{break-inside:avoid}
#printArea .print-nota{margin-top:8px;font-size:9px;color:#555;border-top:1px solid #ccc;padding-top:5px}
/* 🔒 O RECORTE VAI EM DESTAQUE, NO ALTO. Folha que sai filtrada e nao diz que
   saiu filtrada faz quem le concluir "so tem estas" — e ele nao tem como
   desconfiar. Moldura preta porque a folha sai em preto e branco na impressora
   da portaria. */
#printArea .print-recorte{margin:0 0 8px;padding:4px 6px;border:1.5px solid #111;font-size:10px;font-weight:600}
/* Quem conferiu assina: folha de conferencia sem assinatura nao prova nada. */
#printArea .print-assina{margin-top:14px;font-size:10px;letter-spacing:.2px}
#printArea .table-wrap{overflow:visible!important}#printArea .card,#printArea .metric,#printArea .item{box-shadow:none;border:1px solid #bbb;break-inside:avoid}#printArea .grid,#printArea .grid2,#printArea .grid3,#printArea .cards{display:block}#printArea button,#printArea input,#printArea select,#printArea textarea,#printArea video,#printArea .scanner,#printArea .actions{display:none!important}#printArea .list{gap:6px}}

/* ---- Branding / logo ---- */
.login{background:var(--blue2)}
.brand-logo{display:block;width:64px;height:auto;margin:0 auto 12px}
.brand-mark{width:40px;height:40px;display:block}
/* ---- Login extras ---- */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:74px}
.pw-toggle{position:absolute;right:6px;background:transparent;color:var(--blue);font-size:12px;font-weight:600;padding:6px 8px}
.link-btn{display:block;width:100%;margin-top:10px;background:transparent;color:var(--blue);font-weight:600;font-size:13px}
/* ---- Botoes compactos em listas ---- */
.btn-xs{padding:5px 9px;font-size:12px;border-radius:6px}
/* ---- Swatch de cor ---- */
.swatch{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.brand-row{display:flex;gap:8px;align-items:center}
/* ---- Modal ---- */
/* flex (nao grid): em grid a coluna "auto" cresce com o conteudo e o max-width:100% do card
   passa a valer sobre uma faixa maior que a tela -> modal cortado no celular. */
.modal-root{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,20,36,.55)}
/* 🔒 O CABECALHO DO MODAL FICA FIXO — vale para TODOS os modais do app.
 * O card inteiro rolava (`overflow:auto` nele), entao numa lista longa — 42
 * encomendas para conferir, 126 unidades, as permissoes de um colaborador — o
 * titulo, a setinha de voltar e o X saiam da tela nos primeiros dedos de
 * rolagem. Quem estava no meio da lista nao sabia mais em que tela estava, e
 * para fechar tinha de rolar tudo de volta. No celular isso e pior: a pessoa
 * tenta o "voltar" do sistema e perde o que preencheu.
 * Agora quem rola e SO o corpo: cabecalho em cima, botoes embaixo, os dois
 * sempre ao alcance. E a mesma corrente de altura da tela do SOS — flex com
 * `min-height:0`, nao `position:fixed`, que briga com o teclado do celular. */
.modal-card{position:relative;z-index:1;width:min(460px,100%);min-width:0;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word;
  background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:0}
.modal-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:#fff;border-radius:12px 12px 0 0}
.modal-head b{font-size:16px;min-width:0;overflow-wrap:anywhere}
.modal-x{background:transparent;color:var(--mut);font-size:22px;line-height:1;padding:0 6px;flex:0 0 auto}
/* 🔒 `min-height:0` e o elo que faz a rolagem morar AQUI. Sem ele o flex nao
   deixa o filho encolher, o corpo empurra o card e o cabecalho volta a subir. */
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px}
/* Os botoes acompanham o cabecalho: acao fora de alcance no fim de uma lista
   longa e o mesmo que botao que nao existe (regra nº 1). */
.modal-actions{flex:0 0 auto;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;
  padding:12px 16px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 12px 12px}
.modal-actions:empty{display:none;padding:0;border:none}
.arquivo-root{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.arquivo-root.hidden{display:none}
.arquivo-backdrop{position:absolute;inset:0;background:rgba(8,20,36,.62)}
.arquivo-card{position:relative;z-index:1;width:min(560px,100%);min-width:0;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.42);padding:0}
.arquivo-card.arquivo-largo{width:min(860px,100%)}
.arquivo-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);background:#fff;border-radius:12px 12px 0 0}
.arquivo-head b{font-size:16px;min-width:0;overflow-wrap:anywhere}
.arquivo-x{background:transparent;color:var(--mut);font-size:24px;line-height:1;padding:0 6px;flex:0 0 auto}
.arquivo-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px}
.arquivo-actions{flex:0 0 auto;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 12px 12px}
.arquivo-actions:empty{display:none;padding:0;border:none}
/* 🔴 Estas tres linhas moravam num @media LA EM CIMA, antes da regra base — e
   por isso nunca valiam: mesma especificidade, e quem vem depois ganha. O
   resultado silencioso era a regra do dono ("botoes preenchem a linha") nao
   valendo dentro de modal nenhum no celular. Media query so vence se vier
   depois do que ela pretende ajustar. */
@media(max-width:900px){
  .modal-card{width:100%;max-height:calc(100dvh - 32px)}
  .modal-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .modal-actions button{width:100%}
  .arquivo-card{width:100%;max-height:calc(100dvh - 32px)}
  .arquivo-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .arquivo-actions button{width:100%}
}
/* 📷 A câmera dentro do app (25/09/2026) — ver `armarCameraNaTela`. Tela cheia
   e acima do modal que pediu a foto; o palco rola nada: o vídeo cabe inteiro. */
.cam-root{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;height:100dvh;background:#0b1422;color:#fff}
.cam-root.hidden{display:none}
.cam-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px}
.cam-head b{font-size:16px}
.cam-x{background:transparent;color:#fff;font-size:30px;line-height:1;padding:4px 10px;min-width:44px;min-height:44px}
.cam-palco{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.cam-video,.cam-previa{max-width:100%;max-height:100%;object-fit:contain;display:none}
.cam-root[data-modo=vivo] .cam-video{display:block}
.cam-root[data-modo=previa] .cam-previa{display:block}
.cam-root.cam-espelho .cam-video{transform:scaleX(-1)}
.cam-msg{flex:0 0 auto;padding:8px 16px 0;font-size:15px;line-height:1.35;text-align:center}
.cam-msg:empty{display:none}
.cam-msg.erro{color:#ffb4ab;font-weight:600}
.cam-botoes{flex:0 0 auto;display:none;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.cam-botoes button{width:100%;min-height:52px;font-size:16px}
.cam-botoes .ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.45)}
.cam-botoes .hidden{display:none}
.cam-root[data-modo=vivo] .cam-so-vivo,.cam-root[data-modo=previa] .cam-so-previa,.cam-root[data-modo=falhou] .cam-so-falhou{display:grid}
.modal-body .hint{margin-top:10px}
.temp-pass{font-family:ui-monospace,Consolas,monospace;font-weight:600;font-size:16px;background:#eef4fb;border:1px dashed var(--blue);border-radius:8px;padding:8px 10px;text-align:center;margin-top:8px;user-select:all}
/* ---- Anexo + camera ---- */
.anexo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.anexo-row input[type=file]{flex:1;min-width:150px}
/* ---- Badge de contador (pendencias) ---- */
.nav-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:600;text-align:center;vertical-align:middle}
/* ---- Botao de panico ---- */
.panic{background:var(--bad);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(192,57,43,.35)}
.panic:hover{filter:brightness(1.05)}
/* ---- Menu de configuracao (tiles) ---- */
.cfg-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cfg-search{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.cfg-search input{margin:0}
.cfg-search button{margin:0;white-space:nowrap}
.cfg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(20,40,70,.05);color:var(--ink)}
.cfg-tile:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(20,40,70,.12)}
.cfg-tile b{font-size:15px}
.cfg-tile span{font-size:12px;color:var(--mut);font-weight:600}
/* Modal largo: telas com muitos cards (permissoes) respiram sem virar rolagem infinita. */
.modal-card.modal-largo{width:min(760px,100%)}
/* ---- Permissoes (card: nome em cima, nivel embaixo) ----
   O nome NUNCA divide espaco horizontal com o seletor: era isso que espremia
   a coluna e picotava a palavra ("Ocorrenci as"). Agora cada card e vertical. */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:6px 0 10px}
.perm-grid>*{min-width:0}
.perm-row{display:flex;flex-direction:column;gap:6px;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.perm-row:hover{border-color:#b9c6d8}
.perm-row.ativa{border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 3px rgba(11,92,171,.10)}
.perm-row .chk{width:100%;min-width:0;align-items:flex-start}
.perm-desc{font-size:12px;color:var(--mut);line-height:1.35;font-weight:600}
.perm-niv{width:100%;padding:7px 9px;font-size:13px;font-weight:600;border-radius:8px;background:#f7fafd}
.perm-niv:disabled{opacity:.45}
/* Palavra inteira, sempre: quebra entre palavras, nunca dentro delas. */
.chk{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:14px;font-weight:600;text-transform:none;word-break:normal;overflow-wrap:break-word;hyphens:none}
.chk input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--blue)}
.chk input[type=checkbox]{width:17px;height:17px}
.chk>span{min-width:0}
@media(max-width:420px){.perm-grid{grid-template-columns:1fr}}
.perm-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.perm-conta{font-size:12px;color:var(--mut);font-weight:600}
.avisos-btn{margin-bottom:2px}
/* ---- Modo somente visualizacao ---- */
.ro-banner{background:#eef4fb;border:1px solid #cfe0f3;color:#194a7a;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px}
/* 📡 O indicador que substituiu o botao Atualizar (06/09/2026). Discreto por
   projeto: ele nao compete com Panico nem com o nome do condominio, mas fica
   AMBAR na hora em que a tela para de receber novidades — que e o unico
   momento em que ele precisa ser visto. */
/* 🔓 22/09/2026 — ele agora aparece SEMPRE (ordem do dono), então ganhou a
   moldura discreta dos outros botões do cabeçalho: sem ela, "🔄 Atualizar"
   boiaria no azul como texto solto — o mesmo defeito de 07/09 do estado âmbar.
   Alvo de dedo de 32px: é tocado no celular. */
/* 🔴 23/09/2026, ordem do dono (print do cabeçalho): *"dê vida ao botão
   atualizar"*. Ele estava pintado de BRANCO TRANSLÚCIDO — vestido para um
   cabeçalho ESCURO, num cabeçalho BRANCO. Entre "Pânico" e "NotebookLM", que
   têm borda e cor, ele saía cinza-claro sobre branco: parecia DESABILITADO, e
   botão que parece desligado ninguém toca. Agora veste o mesmo uniforme dos
   vizinhos (fundo branco, borda e texto azuis) e se comporta como botão.
   🔒 As variantes de alerta (`.pulso-segurado`, `.pulso-parado`) continuam por
      cima desta regra: âmbar quando há novidade ou a tela parou. */
.pulso{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:8px 14px;min-height:38px;border-radius:8px;white-space:nowrap;cursor:pointer;user-select:none;color:var(--blue);background:#fff;border:1px solid var(--blue)}
.pulso:hover{background:#eef4fb}
.pulso:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pulso:empty{display:none}
/* Os botoes que ABREM a prova na linha do ponto cumprido: pilulas, para nao
   competirem com o botao de acao de quem ainda esta no trajeto. Alvo de dedo
   de 32px de altura — sao tocados no celular, com a mao ocupada. */
.pill-abre{border:1px solid #cfe0f3;background:#eef4fb;color:#1c5fa8;min-height:32px;padding:4px 10px;cursor:pointer}
.pill-abre:hover{background:#e0ecf9;border-color:var(--blue)}
.rota-linha.feita .rota-acao{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* 📷 O visor da prova dentro do modal (06/09/2026). A foto cabe na tela sem
   estourar o cartao — no celular deitado ou em pe. O limite de altura vai em
   "vh" porque o que aperta aqui e a ALTURA da tela, nao a largura. */
.prova-visor{display:flex;justify-content:center;align-items:center;background:#0d1620;border-radius:10px;padding:6px}
.prova-visor img{max-width:100%;max-height:68vh;height:auto;border-radius:6px;display:block}
.prova-conta{text-align:center;margin:4px 0 12px;font-size:12px;color:var(--mut);font-weight:600}
/* As setas do carrossel: por CIMA da foto, com alvo de dedo de 44px. Fora da
   foto elas empurrariam a imagem para cima num celular em pe, que e onde a
   altura ja e o que falta. */
.prova-visor{position:relative}
.prova-seta{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.prova-seta:hover{background:rgba(0,0,0,.75)}
.prova-seta:active{transform:translateY(-50%) scale(.94)}
.prova-seta.esq{left:8px}.prova-seta.dir{right:8px}
/* O link das fotos da volta: rodape do bloco, discreto — quem esta no trajeto
   quer os botoes dos pontos, nao este. Quem confere procura por ele. */
.volta-fotos{padding:8px 12px 10px;border-top:1px solid var(--line);background:#fbfdff}
/* 👥 As pessoas a mais na notificacao: cada uma num quadro proprio, para nao
   virar uma parede de campos onde ninguem sabe qual e de quem. */
.dest-linha{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:10px 12px;margin:8px 0;background:#fbfdff}
.dest-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.dest-topo b{font-size:13px;color:var(--blue2)}
.dest-topo button{margin-left:auto}
.pulso:active{transform:scale(.98);filter:brightness(.92)}
/* 🔴 12/09/2026, print do dono: *"olhe esse botão amarelo"*. Ele era um TEXTO
   amarelo solto no cabeçalho azul — sem caixa, sem contorno, espremido entre o
   nome do condomínio e o Visualizar/imprimir, e cortado no celular.
   🔴 A causa é de 07/09: quando ele mandou *"coloque um contorno neste botão"*,
      o contorno entrou só no estado "sem atualizar" (`.pulso-parado`). Este
      aqui — o outro estado do MESMO elemento — ficou para trás. Dois estados de
      uma coisa só não podem ter dois desenhos.
   🔒 Mesma caixa do irmão, cor diferente: este é AVISO (há novidade esperando
      você terminar de digitar), não ALERTA (a tela parou de receber). */
.pulso-segurado{background:#fff7e6;color:#7a4a08;border:2px solid #f0c98a;
  border-radius:10px;padding:8px 12px;box-shadow:0 1px 3px rgba(20,40,70,.18)}
.pulso-segurado:hover{background:#ffefd0;border-color:#d9a441}
/* 🔴 07/09/2026, do dono, com o print e a marca verde em volta: *"coloque um
   contorno neste botão"*. Ele fica no cabecalho, ao lado do NotebookLM e do
   Panico — que sao caixas com borda. Sem contorno, a pilula ambar boiava no
   azul, parecendo um respingo em vez de um aviso que se pode TOCAR.
   🔒 A borda tambem diz que ele e clicavel: tocar nele forca a atualizacao, e
      era o unico elemento acionavel do cabecalho sem moldura. */
.pulso-parado{background:#fff3d6;color:#8a5b00;border:2px solid #d9a441;
  border-radius:10px;padding:8px 12px;box-shadow:0 1px 3px rgba(20,40,70,.18)}
.pulso-parado:hover{background:#ffe9b8;border-color:#b8860b}
/* 🔒 Recebimento de passagem travado: o app so libera depois de conferido. */
.ro-trava{background:#fff7e6;border-color:#f0c98a;color:#7a4a08}
.pass-linha{font-size:13px;margin:6px 0;line-height:1.45}
.modal-nega{animation:negaModal .28s ease}
@keyframes negaModal{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.ro-screen button:disabled,.ro-screen input:disabled,.ro-screen select:disabled,.ro-screen textarea:disabled{opacity:.55;cursor:not-allowed}
.ro-off{opacity:.55;pointer-events:none}
.nav-ver{font-size:11px;opacity:.85}
/* 🎨 O ícone do menu: largura fixa para os nomes começarem todos na mesma
   coluna — sem isso "Perdidos e achados" e "Logs" desalinham a lista inteira.
   Levemente apagado porque ele é reconhecimento, não o conteúdo: quem lê, lê a
   palavra; quem já conhece, acha pela forma. */
.nav-ic{display:inline-block;width:22px;margin-right:6px;text-align:center;font-size:14px;opacity:.9;flex:0 0 auto}
/* Turno aberto x fechado no MENU: cor + bolinha. A cor sozinha nao basta —
   quem nao distingue verde de vermelho (8% dos homens) leria os dois iguais;
   por isso a bolinha muda de forma junto (cheia x vazada) e o title diz. */
.turno-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;flex:0 0 auto}
nav button.turno-aberto{background:rgba(24,160,88,.22);color:#c9f7dd}
nav button.turno-aberto .turno-dot{background:#25c26e;box-shadow:0 0 0 2px rgba(37,194,110,.35)}
nav button.turno-colega{background:rgba(214,158,32,.20);color:#ffe6ac}
nav button.turno-colega .turno-dot{background:#e0a92b;border:2px solid #ffd77a}
nav button.turno-fechado{background:rgba(214,58,48,.20);color:#ffd3cf}
nav button.turno-fechado .turno-dot{background:transparent;border:2px solid #ff6b60}
nav button.turno-aberto.on,nav button.turno-colega.on,nav button.turno-fechado.on{background:var(--blue);color:#fff}
.faixa-meu,.faixa-coberto{border-color:#25c26e;border-width:2px;background:#eefaf3}
.faixa-colega{border-color:#e0a92b;border-width:2px;background:#fff8e8}
.faixa-ninguem{border-color:#d63a30;border-width:2px;background:#fdecea}

/* ---- Sino de notificacoes ---- */
.title-wrap{display:flex;align-items:center;gap:10px}
.bell-wrap{position:relative}
.bell{position:relative;background:transparent;border:0;cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:8px}
.bell:hover{background:var(--bg)}
.bell-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}
.notif-panel{position:absolute;top:38px;left:0;width:340px;max-width:86vw;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(8,48,92,.18);z-index:60;padding:6px}
.notif-panel h4{margin:6px 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--line)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--bg)}
.notif-item .ni-ic{font-size:18px;line-height:1.2}
.notif-item .ni-tx{flex:1;font-size:13px;color:var(--ink);font-weight:600}
.notif-item .ni-wh{font-size:11px;color:var(--mut);font-weight:400;margin-top:2px}
.notif-empty{padding:18px;text-align:center;color:var(--mut);font-size:13px}
@media(max-width:900px){.notif-panel{left:0;right:auto;width:min(340px,calc(100vw - 24px));max-width:none}}

/* Arquivo acima do limite: o aviso aparece ANTES de subir, nao depois. */
.erro-anexo{color:var(--bad);font-weight:600}

/* Numero do painel que LEVA a origem. O cursor e o realce dizem que da para
   clicar — card que parece decorativo ninguem tenta. */
.metric-link{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .06s}
.metric-link:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(20,60,120,.14)}
.metric-link:active{transform:scale(.99)}
.metric-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Linha de log que LEVA ao registro que ela descreve. */
.item-link{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.item-link:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(20,60,120,.12)}
.item-link:active{transform:scale(.995)}
.item-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Metodos de prova ao lado do QR: etiquetas compactas, sem descricao. A cor de
   fundo diz o que esta ligado sem precisar enxergar o quadradinho. */
.metodos-qr{display:flex;flex-direction:column;gap:5px;min-width:150px}
.met-chip{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1.5px solid var(--line);
          border-radius:8px;font-size:13px;font-weight:600;color:#4a5b6b;cursor:pointer;
          background:#fff;white-space:nowrap;transition:border-color .12s,background .12s}
.met-chip:hover{border-color:#9fb5cf}
.met-chip input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:var(--blue)}
.met-chip.ativa{border-color:var(--blue);background:#eef5ff;color:#12395f}

/* Foto e video sao provas de naturezas diferentes: uma congela o instante, a
   outra mostra o que aconteceu. Merecem cores distintas — no meio de uma
   ocorrencia ninguem le rotulo, reconhece a cor. Mesmo tamanho porque nenhuma
   das duas e a opcao principal: quem escolhe e a situacao, nao o app. */
.anexo-botoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1 1 100%}
.anexo-botoes > button{width:100%}
.btn-foto{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn-video{background:#fff;color:#7b3fb5;border:1px solid #7b3fb5}
.btn-video:hover{background:#f6f0fc}
.btn-foto:hover{background:#eef5ff}

/* Filtro nao e botao: nao entra no grid de acoes.
   Era isso que deixava a tela de relatorios horrivel — o bloco de filtros e os
   seis botoes dividiam o mesmo grid, e como o grid estica tudo para a altura da
   celula mais alta, cada botao virava um retangulo gigante com uma palavra no
   meio. Aqui os filtros tem a propria linha, que quebra sozinha no celular. */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px}
.filtro-campo{display:flex;flex-direction:column;gap:3px;flex:1 1 140px;min-width:130px}
.filtro-campo > label{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:#7c8b99}
.filtro-campo > input,.filtro-campo > select{margin:0;width:100%}
.actions > button[disabled]{opacity:.45;cursor:not-allowed}

/* O bloco para onde o aviso levou. Navegar nao basta quando a pessoa ja estava
   na tela ou o bloco esta abaixo da dobra — sem isto o clique parece quebrado. */
@keyframes drg-destaca{0%{box-shadow:0 0 0 0 rgba(214,58,48,.55)}70%{box-shadow:0 0 0 12px rgba(214,58,48,0)}100%{box-shadow:0 0 0 0 rgba(214,58,48,0)}}
.destaque{animation:drg-destaca 1.5s ease-out 2;border-color:var(--bad)!important;scroll-margin-top:80px}
@media (prefers-reduced-motion:reduce){.destaque{animation:none;outline:3px solid var(--bad);outline-offset:2px}}

/* O roteiro da ronda: uma volta por linha, botao retangular, empilhados.
   A bolinha e a informacao principal — quem esta no meio da madrugada olha a
   cor, nao le rotulo. */
.voltas{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.volta{display:grid;grid-template-columns:18px 1fr auto;grid-template-areas:"dot num hora" "dot est est";gap:2px 10px;align-items:center;
  width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.volta:active{transform:scale(.99);filter:brightness(.97)}
.volta-dot{grid-area:dot;width:14px;height:14px;border-radius:50%;border:2px solid #b8c4d0;background:#fff}
.volta-num{grid-area:num;font-weight:600;font-size:15px;color:var(--ink)}
.volta-hora{grid-area:hora;font-weight:600;font-size:17px;color:var(--blue);font-variant-numeric:tabular-nums}
.volta-est{grid-area:est;font-size:12px;color:#7c8b99}
.volta-branca .volta-dot{background:#fff;border-color:#b8c4d0}
.volta-amarela{border-color:var(--warn);background:#fffdf5}
.volta-amarela .volta-dot{background:var(--warn);border-color:var(--warn)}
.volta-vermelha{border-color:var(--bad);background:#fff7f6}
.volta-vermelha .volta-dot{background:var(--bad);border-color:var(--bad)}
.volta-vermelha .volta-est{color:var(--bad);font-weight:600}
.volta-verde{border-color:var(--ok);background:#f6fdf8}
.volta-verde .volta-dot{background:var(--ok);border-color:var(--ok)}
.volta-verde .volta-est{color:var(--ok);font-weight:600}

/* A tela de consulta: rotulo e valor, um par por linha, sem campo de formulario
   por perto — quem esta conferindo prova nao deve esbarrar em algo que altera. */
.ver{display:flex;flex-direction:column;gap:2px}
.ver-linha{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:10px;padding:7px 0;border-bottom:1px solid #eef2f6}
.ver-rot{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:#7c8b99;font-weight:600}
.ver-val{font-size:14px;color:var(--ink)}
.ver-bloco{margin-top:10px;padding:10px 12px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px}
.ver-bloco > b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:#7c8b99;margin-bottom:4px}
.ver-bloco > div{font-size:14px;color:var(--ink);white-space:pre-wrap}
@media (max-width:560px){.ver-linha{grid-template-columns:1fr;gap:2px}}

/* A barra da lixeira: marcar todos de um lado, as duas saidas do outro. */
.lixeira-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:8px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc}
.lixeira-barra .actions{flex:1 1 260px}
.lixeira-todos{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:#506273;white-space:nowrap}
.lixeira-todos input{width:auto;margin:0}
.lx-marca{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:#7c8b99}
.lx-marca input{width:auto;margin:0}
/* Linha marcavel da transferencia de setor: alvo de dedo grande e o texto
   alinhado pelo topo — com 15 caixas na lista, caixinha pequena e leitura
   apertada e onde o operador erra qual esta indo. */
.tr-linha{display:flex;gap:10px;align-items:flex-start;padding:8px 2px;border-bottom:1px solid #eef2f6;font-size:13px;cursor:pointer}
.tr-linha:last-child{border-bottom:0}
.tr-linha input{width:auto;min-width:20px;height:20px;margin:2px 0 0}
.tr-linha .meta{display:block;font-size:12px}

/* "Fechado" e so metade do ato: quem transfere a responsabilidade e o colega
   seguinte RECEBER. Esta faixa responde isso sem ninguem precisar cruzar duas
   telas na mao — e a cor diz antes da leitura. */
.entrega{margin-top:8px;padding:7px 10px;border-radius:7px;border:1px solid;font-size:13px;line-height:1.45}
.entrega-bom{background:#f2fbf5;border-color:#bfe6cd;color:#14683a}
.entrega-atencao{background:#fffaef;border-color:#f0dda6;color:#7a5a09}
.entrega-ruim{background:#fdf3f2;border-color:#f3c9c4;color:#a4302a}

/* Quem nunca criou senha nao entra — e isso precisa saltar do card, senao o
   supervisor vai atras do e-mail, do spam e do diagnostico, e nunca da causa. */
.alerta-sem-senha{color:var(--bad)}

/* A assinatura de quem retira a encomenda: dedo na tela, no celular da portaria. */
.assinatura{width:100%;height:170px;border:1px dashed var(--line);border-radius:8px;background:#fff;touch-action:none;display:block}

/* Onde estao as encomendas: um cartao por setor, o numero grande porque e ele
   que se procura, e o proprio setor destacado. */
.setores{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0}
.setor-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.setor-card:active{transform:scale(.98);filter:brightness(.97)}
.setor-card.meu{border-color:var(--blue);background:#f4f8ff}
.setor-nome{font-weight:600;font-size:13px;color:var(--ink);text-align:center}
.setor-qtd{font-size:30px;font-weight:600;line-height:1.1;color:var(--blue)}
.setor-rot{font-size:11px;color:#7c8b99}
/* O codigo do lote: e digitado por quem esta com pressa, precisa ser grande. */
.cod-lote{font-size:30px;font-weight:600;letter-spacing:.08em;color:var(--blue);font-variant-numeric:tabular-nums;margin-top:2px}

/* A escolha do fechamento: duas opcoes grandes, com a consequencia escrita ao
   lado. Radio pequeno com rotulo curto e o que faz a pessoa marcar no automatico
   e so descobrir o que escolheu depois. */
.escolha{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.escolha-op{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;margin:0;font-weight:400}
.escolha-op input{width:auto;margin:2px 0 0;flex:0 0 auto}
.escolha-op.ativa{border-color:var(--blue);background:#f4f8ff;box-shadow:inset 0 0 0 1px var(--blue)}
.escolha-op .meta{font-size:12px}
.entrega-neutro{background:#f5f7fa;border-color:#dde3ea;color:#506273}

/* Quem saiu da empresa nao pode ter o mesmo peso visual de quem esta no posto:
   a lista fica apagada, e volta ao normal quando o olho pousa nela. */
.lista-inativa{opacity:.72;transition:opacity .15s}
.lista-inativa:hover{opacity:1}

/* Miniaturas dos anexos. Foto em tamanho real empurra o formulario para fora da
   tela e some com o botao de fechar; 72px cabe numa linha e nao rouba o lugar
   de nada. Quem precisa conferir toca e ve grande. */
.tiras{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.tira{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:#f7f9fc;display:block;flex:0 0 auto}
.tira-ver{width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tira img{width:100%;height:100%;object-fit:cover;display:block}
.tira-ic{font-size:26px}
.tira-x{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;line-height:18px;border-radius:50%;
  border:0;background:rgba(20,25,35,.72);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.tira-x:hover{background:var(--bad)}
.anexo-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ---- Chip de anexo (etapa da obra): o arquivo e a acao de tirar, juntos ----
   🔒 O 🗑 era um `.link-btn` (block, 100%) e caia numa linha propria, longe do
      arquivo. Aqui os dois sao UMA peca, em linha, que quebra sozinha no
      celular. 🔒 No toque a lixeira vira alvo de dedo; no mouse fica discreta. */
.anexos-linha{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.anexo-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 3px 1px 10px}
.anexo-chip>a{color:var(--blue);font-weight:600;font-size:12px;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anexo-chip>a:hover{text-decoration:underline}
.anexo-x{width:26px;height:26px;min-height:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;opacity:.55}
.anexo-chip:hover .anexo-x{opacity:1}
.anexo-x:hover{background:#fdeceb;color:var(--bad);opacity:1}
@media (hover:none){.anexo-x{width:38px;height:38px;font-size:15px;opacity:1}}
@media (max-width:480px){.anexo-tres{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}}
.btn-arq{background:#fff;color:#506273;border:1px solid #c3ccd6}
.btn-arq:hover{background:#f2f5f9}
/* O anexo em tamanho grande cabe na tela, sem estourar a altura do modal. */
.anexo-grande{text-align:center}
.anexo-grande img,.anexo-grande video{max-width:100%;max-height:62vh;border-radius:8px;display:block;margin:0 auto}
/* 🕰️ Registro retroativo: informa, não acusa. Cinza-âmbar discreto. */
.retro{border-left:3px solid #dce4ec;padding:2px 0 2px 9px;margin-top:5px;line-height:1.45}
/* 📄 Ficha de relatório: passagem de posto sai inteira, como foi escrita. */
.fichas{display:flex;flex-direction:column;gap:12px}
.ficha{border:2px solid #c9d6e5;border-radius:10px;padding:12px 14px;background:#fff}
.ficha-topo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #e3eaf2}
.ficha-topo b{font-size:15px}
.ficha-status{margin-left:auto;font-size:12px;font-weight:600;color:var(--blue);background:#eef4fb;border:1px solid #cfe0f3;border-radius:20px;padding:2px 10px}
.ficha-linha{font-size:13px;margin:3px 0;line-height:1.45}
.ficha-bloco{margin:8px 0}
.ficha-bloco > b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut)}
.ficha-bloco > div{white-space:pre-wrap;font-size:13px;line-height:1.5;background:#f6f9fc;border-left:3px solid #cfe0f3;border-radius:6px;padding:7px 10px;margin-top:3px;overflow-wrap:anywhere}
.fichas-print .ficha{break-inside:avoid;page-break-inside:avoid}
/* 📕 Motivo pelo qual a caixa está na fila de conferência. */
.conf-motivos{background:#fff6f5;border-left:3px solid #e08a80;border-radius:6px;padding:6px 9px;margin:0 0 6px;color:#8a2c20;line-height:1.5;font-weight:600}
/* 📕 "Não é deste endereço": marca que abre o campo do endereço da etiqueta. */
.chk-fora{display:flex;align-items:flex-start;gap:9px;background:#fff6f5;border:1px solid #f0cdc7;border-radius:8px;padding:9px 11px;margin:10px 0;font-size:13px;line-height:1.45;cursor:pointer}
.chk-fora input{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
/* 🔒 Sem turno aberto: a porta de entrada em destaque, o resto fora do menu. */
.trava-turno{border-color:#e0a800;border-width:2px;background:#fffdf5}
.trava-turno h2{color:#7a4a08}
.trava-turno p{font-size:14px;line-height:1.55;margin:8px 0}
/* 🎨 Os três momentos do plantão, um card por cor: verde entra, âmbar pausa,
   vermelho sai. Mesma semântica do painel de postos logo acima — quem usa o
   painel já foi treinado nela sem saber. */
.card-entrar{border-left:6px solid var(--ok);background:#f4fbf6}
.card-refeicao{border-left:6px solid var(--warn);background:#fffcf3}
.card-encerrar{border-left:6px solid var(--bad);background:#fdf6f5}
.passo{display:flex;align-items:center;gap:9px;margin-top:0}
.passo-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue2);color:#fff;font-size:14px;font-weight:600;flex:0 0 auto}
.card-entrar .passo-n{background:var(--ok)}
.card-refeicao .passo-n{background:var(--warn)}
.card-encerrar .passo-n{background:var(--bad)}
/* Botão de ação do momento: alvo de dedo, não de mouse. */
button.grande{width:100%;padding:14px;font-size:16px;margin-top:12px}
/* 📦 A conta que fecha, no topo do mapa: quantas existem, e onde estão. */
/* 🔎 03/11/2026 — a lupa do "Onde estão": campo largo + botão da mesma altura, na mesma linha */
.mapa-lupa{display:flex;gap:8px;align-items:stretch;margin:0 0 6px}
.mapa-lupa input{flex:1;min-width:0;min-height:44px;font-size:16px}
.mapa-lupa button{min-height:44px;white-space:nowrap}
.mapa-total{background:#eef4fb;border:1px solid #cfe0f3;border-radius:8px;padding:9px 12px;margin:0 0 10px;font-size:14px;line-height:1.5}
.mapa-alerta{color:var(--bad)}
/* 🔎 O rastro da caixa: a história inteira, em linha do tempo. */
.rastro{display:flex;flex-direction:column;gap:2px;border-left:2px solid #dbe6f0;padding-left:4px;margin:6px 0}
.rastro-item{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid #eef2f6}
.rastro-item:last-child{border-bottom:none}
.rastro-ico{font-size:18px;flex:0 0 24px;text-align:center;line-height:1.3}
.rastro-tit{font-size:14px;line-height:1.45}
.rastro-fonte{font-size:11px;color:#93a3b5}
.ro-banner.ro-alerta{background:#fdf0ee;border-color:#f0bdb5}
/* Conferência de caixas: marcado = está aqui. O resumo só aparece quando algo
   foi desmarcado — numa lista de 92 linhas ninguém vê uma caixinha aberta. */
.conf-barra{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.conf-resumo{margin:8px 0;font-size:13px;line-height:1.45}
.conf-resumo:empty{display:none}
.conf-ok{display:block;background:#e8f5ec;color:#10633a;border:1px solid #9fd6b4;border-radius:8px;padding:9px 11px}
.conf-falta{display:block;background:#fdecec;color:#9b1c1c;border:1px solid #f0a9a9;border-radius:8px;padding:9px 11px;font-weight:600}
/* 📟 Bipagem do lote (14/10/2026) */
.bip-linha{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.bip-linha input{font-size:1.1rem;letter-spacing:.04em}
.bip-placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:10px 0}
.bip-item{padding:8px 10px;border-radius:8px;margin:4px 0;border:1px solid var(--line,#dde3ea)}
.bip-item .meta{display:block}
.bip-ok{background:#e8f5ec;border-color:#9fd6b4}
.bip-pend{background:#fff8e6;border-color:#f0d58a}
.bip-fora{background:#fdecec;color:#9b1c1c;border:1px solid #f0a9a9;border-radius:8px;padding:9px 11px;margin:8px 0;font-weight:600;word-break:break-all}
/* Grupo de rendição: a lista de postos pareados fica recuada, para ler como um
   sub-bloco do posto e não como mais uma caixinha solta na linha. */
.rend-box{margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f8fafc}
.rend-box .perm-row{margin-top:4px}
/* Contagem que leva à lista: sublinhada e com alvo de dedo, senão ninguém
   descobre que dá para clicar num número. */
.link-conta{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 0;min-height:24px}

/* 🔑 A prateleira de passagens para herdar (16/08/2026). Alvo de dedo, uma por
   linha: no balcão às 7h, caixa de marcar pequena é caixa que não se marca. */
.pass-lista{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.pass-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--bd);
  border-radius:10px;background:#fff;cursor:pointer;line-height:1.35}
.pass-item input{width:22px;height:22px;margin:0;flex:0 0 auto}
.pass-item:has(input:checked){border-color:#0b5cab;background:#eef5ff}
/* 🧍 Assumir posto cobrindo falta: âmbar, distinto de abrir o próprio turno. */
.fluxo-assumir{background:#b06a00}

/* ⚠️ A pendência do posto é um link, e tem de parecer um. */
.pend-link{color:#8a5a00;text-decoration:none;display:inline-block}
.pend-link:hover{text-decoration:underline}

/* ⬅️ Seta de voltar: alvo de dedo de 40px (regra do toque), discreta ao lado do
   titulo mas nunca menor que o dedo. */
.voltar{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;border:1px solid var(--linha,#d9e2ec);background:#fff;color:#0b3d63;border-radius:10px;cursor:pointer;padding:0}
.voltar:hover{background:#eef5fb}
.voltar:active{transform:scale(.98);filter:brightness(.92)}

/* 🖨️ A folha do rastro: documento, nao captura de tela. */
.rastro-folha{width:100%;border-collapse:collapse;margin:8px 0 14px}
.rastro-folha th,.rastro-folha td{border:1px solid #ccc;padding:6px 8px;text-align:left;vertical-align:top;font-size:12px}
.rastro-folha th{background:#f2f5f8;white-space:nowrap}
.rastro-folha .q{white-space:nowrap;width:130px}
.rastro-folha .f{width:120px;color:#555}
.rastro-folha .d{color:#555}
/* 🔒 A linha do tempo nao pode ser cortada no meio pela quebra de pagina. */
.rastro-folha.linha tr{page-break-inside:avoid}
.rodape{font-size:11px;color:#555;margin-top:10px}

/* 🖨️ A FOLHA DO RASTRO — documento, nao captura de tela.
   🔴 18/08/2026: a primeira versao saiu FEIA e com o modal impresso atras. A
      causa nao era o layout: `@media print` escondia aside/header/nav/.screen
      e ESQUECIA `.modal-root`, que e `position:fixed` e sobrevivia a tudo.
      Todo print tirado de dentro de um modal saia assim — o botao novo so
      revelou o defeito antigo. */
@media print{
  @page{margin:14mm 12mm}
  #printArea{font-family:Arial,Helvetica,sans-serif;color:#111}
  #printArea h1{font-size:17px;margin:0;letter-spacing:-.2px}
  #printArea .when{font-size:10px;color:#555;margin:2px 0 0;border-bottom:1.5px solid #111;padding-bottom:8px}
  #printArea h2{font-size:12px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:.6px;color:#333}
  /* A ficha da caixa e um bloco de dados, nao uma tabela de grade cheia. */
  .rastro-folha{width:100%;border-collapse:collapse;margin:10px 0 0;font-size:11px}
  .rastro-folha th,.rastro-folha td{border:0;border-bottom:1px solid #e2e2e2;padding:5px 0;text-align:left;vertical-align:top}
  .rastro-folha th{width:150px;color:#555;font-weight:600;background:none;white-space:nowrap}
  /* A linha do tempo, sim, e tabela: e nela que se confere elo por elo. */
  .rastro-folha.linha{margin-top:0}
  .rastro-folha.linha thead th{border-bottom:1px solid #111;color:#111;font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding-bottom:4px;width:auto}
  .rastro-folha.linha td{padding:7px 10px 7px 0;border-bottom:1px solid #ececec}
  .rastro-folha.linha tr{page-break-inside:avoid}
  /* 🔒 O cabecalho da tabela se repete a cada pagina: coluna sem titulo na
     folha 2 vira duvida sobre o que aquele dado e. */
  .rastro-folha.linha thead{display:table-header-group}
  .rastro-folha .q{white-space:nowrap;width:112px;color:#333;font-variant-numeric:tabular-nums}
  .rastro-folha .f{width:118px;color:#666;font-size:10px}
  .rastro-folha .d{color:#555;font-size:10px;line-height:1.45}
  .rodape{font-size:9.5px;color:#666;margin-top:14px;border-top:1px solid #ddd;padding-top:6px}
}

/* ===== 👤 CONTAS SALVAS NA TELA DE ENTRAR (01/09/2026) ====================
   O app deixou de entrar sozinho: quem está salvo neste aparelho vira cartão
   para ESCOLHER. No aparelho da portaria, que passa de mão em mão, entrar
   sozinho punha uma pessoa dentro da conta de outra — e tudo que ela fizesse
   sairia assinado com o nome errado.
   🔒 Alvo de dedo de verdade (56px de altura): esta tela abre no celular, e o
      × de esquecer fica separado do corpo do cartão para ninguém apagar a
      própria conta querendo entrar nela. */
.contas{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.contas-tit{font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.conta-linha{display:flex;align-items:stretch;gap:6px}
.conta-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:56px;
  cursor:pointer;transition:.15s;color:var(--ink);font:inherit}
.conta-btn:hover{border-color:var(--blue);background:#f7fbff}
.conta-btn:active{transform:scale(.98);filter:brightness(.96)}
.conta-btn:disabled{opacity:.6;cursor:progress}
.conta-ini{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:14px}
.conta-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
/* 🏢 A linha do condomínio é a que DISTINGUE dois cartões da mesma pessoa —
   por isso ela não é cinza-apagada como o e-mail: é ela que se lê. */
.conta-onde{color:var(--blue);font-weight:600}
.conta-onde:empty{display:none}
.conta-txt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-txt .meta{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-x{flex:0 0 auto;width:44px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--mut);font-size:20px;line-height:1;cursor:pointer;transition:.15s}
.conta-x:hover{border-color:var(--bad);color:var(--bad);background:#fff5f4}
.conta-x:active{transform:scale(.96)}

/* ===== 🚩 O ROTEIRO DA RONDA, EM LINHA (02/09/2026) ======================
   "esse modelo de ronda está muito trabalhoso" — o programa do turno passa a
   aparecer inteiro, cada ponto numa linha, com o botão do que AQUELE ponto
   exige. A tela é usada no escuro, andando, com uma mão: alvo grande, número
   da ordem à esquerda e nada de decoração no meio do caminho. */
.volta-bloco{border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0;overflow:hidden}
.volta-bloco[open]{box-shadow:0 2px 10px rgba(11,92,171,.06)}
.volta-cab{display:flex;align-items:center;gap:8px;padding:12px;cursor:pointer;font-weight:600;
  color:var(--ink);list-style:none;min-height:52px;user-select:none}
.volta-cab::-webkit-details-marker{display:none}
.volta-num{flex:0 0 auto}
.volta-hora{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--blue);font-weight:600}
.volta-est{flex:1;text-align:right;font-weight:600;font-size:12px;color:var(--mut)}
.volta-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#c9d4de}
.volta-branca .volta-dot{background:#c9d4de}
.volta-amarela .volta-dot{background:#e8b62c}
.volta-verde .volta-dot{background:var(--ok)}
.volta-vermelha .volta-dot{background:var(--bad)}
.volta-vermelha{border-color:#e3b5b0}
.volta-amarela{border-color:#e8d59a}
.rota{border-top:1px solid var(--line)}
.rota-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid #eef3f8}
.rota-linha:last-child{border-bottom:none}
.rota-linha.feita{background:#f6fbf7}
.rota-pos{flex:0 0 auto;min-width:28px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.rota-nome{flex:1;min-width:8rem;font-weight:600;color:var(--ink)}
.rota-acao{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap}
/* Alvo de dedo: esta é a tela da madrugada, andando. */
.rota-acao .btn-xs{min-height:44px;padding:10px 14px;font-size:14px}
.rota-nao{flex:0 0 auto;font-size:12px;color:var(--mut);background:none;border:none;cursor:pointer;text-decoration:underline}
.rota-nao:hover{color:var(--bad)}
.rota-msg{flex-basis:100%}
@media (max-width:420px){
  .rota-acao{width:100%}
  .rota-acao .btn-xs{width:100%}
}
/* 🔓 A pasta ".volta-feitas" (voltas concluídas recolhidas no fim da tela) SAIU
   em 06/09/2026: tirar a volta feita da sequência fazia ronda cumprida parecer
   ronda perdida — a numeração pulava de 4ª para 6ª e quem olhava contava os
   blocos e concluía que o app tinha perdido duas rondas. A volta concluída
   voltou para o lugar dela, verde e fechada. O CSS foi removido junto para não
   sobrar regra descrevendo uma pasta que não existe mais. */
/* A hora prevista do ponto, colada no nome: é o que diz se está adiantado. */
.rota-hora{display:block;font-weight:600;font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums}

/* 📜 O RODAPÉ DA LISTA LONGA (16/09/2026). A lista não nasce inteira na tela —
   ver `listaLonga` em app.js. Este é o degrau entre uma página e a próxima:
   largura cheia porque é um alvo de dedo, e ele diz QUANTO falta, que é a
   informação que o rodapé de uma lista de volume tem de dar. */
.lista-mais{width:100%;padding:12px;font-weight:600}
.lista-mais:active{transform:scale(.98);filter:brightness(.92)}

/* ===== 💧 O CARD DE ÁGUA (DRG-Hidro) no Painel ============================
   A barra é o dado principal: de longe, num mural de portaria, a cor e o
   comprimento se leem antes do número. Por isso ela tem altura de verdade
   (10px) e não um fiapo decorativo.
   🔒 `min-width:0` na coluna do nome: nome comprido de reservatório empurrava o
      percentual para fora no celular — e o percentual é o que a pessoa veio
      ler. Em 390px isto é a diferença entre caber e não caber. */
.hidro-res{padding:8px 0;border-top:1px solid var(--line)}
.hidro-res:first-child{border-top:0}
.hidro-res-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hidro-res-topo>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidro-pct{font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.hidro-barra{height:10px;border-radius:5px;background:rgba(100,116,139,.18);margin:6px 0 4px;overflow:hidden}
.hidro-barra>i{display:block;height:100%;border-radius:5px;transition:width .3s ease}
.hidro-rodape{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.hidro-bts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hidro-bts a.btn-xs{text-decoration:none;display:inline-flex;align-items:center}
/* Regra nº 1: botão que se aperta responde ao dedo. */
.hidro-bts button:active,.hidro-bts a:active{transform:scale(.98);filter:brightness(.92)}
@media (max-width:480px){
  /* No celular o rodapé vira duas linhas e os botões ocupam a largura toda —
     alvo de dedo, não alvo de mouse. */
  .hidro-rodape{flex-direction:column;align-items:stretch}
  .hidro-bts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .hidro-bts button,.hidro-bts a.btn-xs{width:100%;justify-content:center;min-height:40px}
}
/* 🗂️ CARD DA OCORRÊNCIA: FICHA EM TABELA + UM CARD POR ANDAMENTO (21/09/2026,
   ordem do dono: "linhas negritadas dividindo na horizontal e na vertical, tipo
   tabela, um card para cada andamento do processo").
   A grade da ficha usa sombra de 1px em cada célula: duas células vizinhas
   somam 2px de linha, e a moldura de 2px fecha por fora — sem célula-fantasma
   escura quando a última linha não enche. */
.oc-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));border:2px solid #3d4f63;border-radius:8px;overflow:hidden;margin:6px 0 12px;background:#fff}
.oc-cel{padding:8px 10px;box-shadow:0 0 0 1px #3d4f63;min-width:0}
.oc-cel.largo{grid-column:1/-1}
.oc-rot{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5b6b7c;margin-bottom:2px}
.oc-val{font-size:14px;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.oc-val .meta{margin-top:2px}
.oc-proc{display:grid;gap:12px;counter-reset:passo}
.oc-passo{border:2px solid #3d4f63;border-radius:8px;overflow:hidden;background:#fff}
.oc-passo-h{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;margin:0;padding:8px 12px;background:#eef2f6;border-bottom:2px solid #3d4f63;color:var(--ink)}
.oc-passo-h b{font-size:14px}
.oc-passo-n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:#3d4f63;color:#fff;font-size:12px;font-weight:600}
.oc-passo-d{margin-left:auto;font-size:12.5px;font-weight:600;color:#3d4f63}
.oc-tom-ok .oc-passo-h{background:#e3f4ea}
.oc-tom-pend .oc-passo-h{background:#fcefcf}
.oc-tom-div .oc-passo-h{background:#fbe1de}
.oc-tom-arq .oc-passo-h{background:#e6e9ee}
.oc-tom-morador .oc-passo-h{background:#dde9f7}
/* Dentro do card, cada bloco vira uma LINHA da tabela: sem margem, sem a
   borda lateral e sem cantos, separado do de cima por traço forte. A cor de
   fundo de cada bloco fica — ela diz se é ok, pendência ou problema. */
.oc-passo-b{color:var(--ink);font-size:13.5px}
.oc-passo-b>.pass-marca,.oc-passo-b>.voz,.oc-passo-b>.reinc,.oc-passo-b>.meta,.oc-passo-b>.hint,.oc-passo-b>.oc-linha{margin:0;border:0;border-radius:0;padding:10px 12px;font-size:13.5px}
/* 🗂️ Obras (22/09/2026): o mesmo desenho; `.oc-linha` e a linha de texto solto
   de um andamento ("por Fulano", "assinado com o CPF..."). */
.oc-passo-b>.oc-linha{color:var(--ink);line-height:1.5}
.oc-passo-b>.voz{white-space:pre-wrap}
.oc-passo-b>*+*{border-top:2px solid #3d4f63 !important}
.oc-passo-b .pass-marca>.meta{display:block;margin-top:4px;font-size:12px}
.oc-alegado{margin:4px 0 2px;padding:8px 10px;border:1px solid #d9a9a3;border-radius:6px;background:#fff;white-space:pre-wrap;line-height:1.5}
@media (max-width:520px){.oc-passo-d{margin-left:32px;flex-basis:100%}}
/* O "Acrescentado no envio" mora dentro da .voz (pre-wrap, que respeita a
   quebra da carta) e herdava as quebras do próprio template: um palmo de
   branco entre o link e a frase do recurso. */
.voz .hint{white-space:normal}
/* 🖨️ A OCORRÊNCIA NO PAPEL (21/09/2026): retrato, cores das faixas mantidas
   (dizem ok/pendência/problema sem ler) e o card sem a moldura da tela. Um
   andamento curto não se parte entre duas folhas; um longo (a carta, o
   recurso) quebra onde precisar — segurá-lo inteiro jogaria uma folha em branco. */
@page retrato{size:A4 portrait;margin:12mm}
@media print{
  #printArea .oc-print{page:retrato;font-size:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printArea .oc-print>.item{border:0!important;padding:0;break-inside:auto}
  #printArea .oc-print .item-head{margin-top:8px}
  #printArea .oc-print .oc-ficha{break-inside:avoid}
  #printArea .oc-print .oc-proc{display:block}
  #printArea .oc-print .oc-passo{margin-bottom:8px;break-inside:auto}
  #printArea .oc-print .oc-passo-h{break-after:avoid}
  #printArea .oc-print .oc-passo-b>*{break-inside:avoid}
  #printArea .oc-print .voz{break-inside:auto}
}
/* 🔎 Resultados da busca pelo nome no recebimento: um por linha, largura toda.
   Alvo de dedo: é tocado no balcão, com a caixa na outra mão. */
.busca-morador{display:grid;gap:6px;margin:6px 0 4px}
.busca-morador>button{justify-content:flex-start;text-align:left;min-height:40px;font-weight:600}
/* 📱 26/10/2026: a lista inteira de blocos/unidades no celular vira grade de botões (não uma coluna de 60). */
.busca-morador.chips{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));max-height:240px;overflow:auto}
.busca-morador.chips>.meta{grid-column:1/-1}
.busca-morador.chips>button{justify-content:center;text-align:center}

/* ===== 👥 VISITANTES, PRESTADORES E A BUSCA GERAL (22/09/2026) ============ */

/* A linha de busca: campo largo + botão, e no celular um embaixo do outro —
   com os dois lado a lado em 390px o campo fica com 90px e ninguém lê o que
   digitou. */
.busca-linha{display:flex;gap:8px;align-items:stretch}
.busca-linha input{flex:1 1 auto;min-width:0;margin:0}
.busca-linha button{flex:0 0 auto;white-space:nowrap}
/* 🔴 23/09/2026, ordem do dono: *"puxar o botão de procurar bem para a
   esquerda"*. No monitor da portaria (1920px) o campo esticava a linha inteira
   e o "Procurar" ficava colado na borda direita — o dedo/mouse atravessava a
   tela toda para sair de um campo que ele acabou de preencher, e num CPF de 11
   dígitos o campo largo não serve para nada. Aqui o campo tem um TETO e o botão
   vem logo atrás dele; a sobra fica à direita, vazia.
   🔒 `flex-shrink` continua 1: em tela estreita ele encolhe normalmente, e
      abaixo de 520px a regra de baixo empilha os dois. */
.busca-geral .busca-linha{justify-content:flex-start;flex-wrap:wrap}
.busca-geral .busca-linha input{flex:0 1 460px;max-width:460px}
/* 📏 O card de busca é o primeiro do painel: cada pixel dele empurra o resto da
   tela para baixo. Com tudo numa linha só, o respiro de card comum vira altura
   sobrando — aqui ele é justo. */
.busca-geral{padding:12px 14px}
.busca-geral .bg-cabeca{margin-bottom:8px}
.busca-geral .form-msg:empty{display:none;margin:0}
@media (max-width:520px){
  .busca-linha{flex-direction:column}
  .busca-linha button{width:100%}
  /* 🔴 23/09/2026 — O CAMPO VIROU UMA CAIXA DE 460px DE ALTURA NO CELULAR.
   * Print do dono: o "Quem está na portaria?" ocupando três quartos da tela.
   *
   * 🔴 A CAUSA, e ela é do flexbox: `flex: 0 1 460px` define o `flex-basis`, e
   *    `flex-basis` acompanha a DIREÇÃO do eixo principal. Em linha (o desktop)
   *    ele é LARGURA — que era a intenção, dar um teto ao campo. Aqui em cima a
   *    regra acabou de virar `flex-direction: column`, e o mesmo 460px passou a
   *    ser ALTURA. Um número escrito para uma direção, aplicado na outra.
   * 🔒 Então o teto é desfeito junto com a linha: empilhado, o campo tem a
   *    largura toda e a altura natural de um `<input>`. Teto de largura só faz
   *    sentido enquanto a linha É uma linha. */
  .busca-geral .busca-linha input{flex:0 0 auto;max-width:none;width:100%}
}
.busca-geral{border-color:#0b5cab;border-width:2px}
.busca-geral .bg-label{font-size:15px;font-weight:600}

/* A ficha: foto à esquerda, dados à direita. */
.pessoa-linha{display:flex;gap:10px;align-items:flex-start}
.pessoa-dados{flex:1 1 auto;min-width:0}
.pessoa-destino{display:inline-block;margin:0 0 6px;padding:5px 10px;border-radius:8px;background:#e8f1fb;border:1px solid #b9d3f0;color:#0d3d73;font-size:15px;line-height:1.35}
.pessoa-destino b{font-size:16px}
.pessoa-destino-agora{background:#e7f6ea;border-color:#9fd3aa;color:#14532d}
.pessoa-destino-vazio{background:#f4f5f7;border-color:#d9dde3;color:#5b6573}
.pessoa-destino-morador,.pessoa-destino-quando{font-size:13px;font-weight:400;opacity:.85}
.pessoa-foto{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:86px;height:86px;flex:0 0 auto;border:2px solid #d6e2ef;border-radius:8px;
  overflow:hidden;background:#f7fafc}
.pessoa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pessoa-foto:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.pessoa-foto-vazia{color:#8aa0b6;font-size:11px;text-align:center}
/* 🔒 No celular a foto CRESCE, não encolhe. Em 390px, espremida ao lado do
   texto ela sobra com uns 70px — pequena demais para conferir um rosto, que é a
   única coisa que ela existe para fazer. Então ela sai da linha e vai para
   cima, com o dobro do tamanho. */
@media (max-width:480px){
  .pessoa-linha{flex-direction:column;align-items:center;text-align:center}
  .pessoa-linha .pessoa-foto{width:150px!important;height:150px!important}
  .pessoa-dados{width:100%;text-align:left}
  .pessoa-tarja{font-size:12px;padding:4px 0}
}
/* 🔒 A TARJA MORA DENTRO DA FOTO (ordem do dono: *"a foto deve vir também com a
   informação do aviso de bloqueio"*). Quem confere um rosto olha a foto; aviso
   que mora ao lado dela é aviso que não é lido no instante em que decide. */
.pessoa-foto-bloqueada{border-color:#c0392b;border-width:3px}
.pessoa-tarja{position:absolute;left:0;right:0;bottom:0;background:#c0392b;color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.04em;text-align:center;padding:2px 0;
  line-height:1.2}

/* O aviso de bloqueio: vermelho, largura toda, impossível de confundir com o
   resto do card. */
.bloq-aviso{background:#fdecea;border:2px solid #c0392b;border-radius:8px;
  padding:10px 12px;margin:8px 0 0;color:#7d2018}
.bloq-titulo{font-weight:600;font-size:14px;letter-spacing:.01em;margin-bottom:4px}
.bloq-linha{font-size:13px;line-height:1.45}
.bloq-compacto{padding:8px 10px}
.bloq-compacto .bloq-titulo{font-size:13px}
.bloq-inline{color:#a03027;font-weight:600}

/* 📜 O cabeçalho do card de busca: rótulo à esquerda, o botão do log à direita.
   O log é ferramenta de auditoria, não parte do trabalho do balcão — fica
   discreto, fora do caminho do dedo que vai digitar o CPF. */
.bg-cabeca{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bg-cabeca .bg-label{margin:0}

/* ➕ OS DOIS ATALHOS DE CADASTRO, NA MESMA LINHA DA BUSCA (23/09/2026, ordem do
   dono: *"diminua a altura do card, coloque os botões na mesma linha da cx da
   procura"*).
   🔓 A versão anterior, preservada aqui porque regra se sobrescreve à vista:
      eram dois CARDS de duas linhas (`.bg-atalhos` em grid `auto-fit`, com
      ícone grande e subtítulo), e juntos empurravam o card de busca para ~230px
      de altura. No alto do painel isso é altura roubada de tudo que vem depois.
   🔒 O subtítulo virou `title`: a explicação continua a um passe do mouse, sem
      ocupar a tela o tempo todo.
   🔒 A MESMA ALTURA do "Procurar" (38px): botões de alturas diferentes na mesma
      linha é o tipo de desalinho que se vê de longe. */
.bg-atalho{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  min-height:38px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;
  border:1px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer}
.bg-atalho:hover{background:#eef4fb}
.bg-atalho:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* 🎨 23/09/2026, do dono: *"dá para deixar diferente os botões?"* — os dois eram
   o MESMO contorno azul, primos do "Procurar". Cada um ganha a cor do próprio
   ícone (👥 roxo, 👷 laranja), preenchido: na correria do balcão se acerta o
   botão pela cor, antes de ler. Contraste do texto ≥ 4.5:1 nos dois. */
.bg-atalho{border-width:1.5px}
.bg-atalho:active{transform:scale(.98);filter:brightness(.92)}
.bg-atalho-visitante{background:#f1eafb;border-color:#6d3fb5;color:#4f2a8a}
.bg-atalho-visitante:hover{background:#e4d6f7}
.bg-atalho-visitante:focus-visible{outline-color:#6d3fb5}
.bg-atalho-prestador{background:#fff1e0;border-color:#c2620a;color:#8a4200}
.bg-atalho-prestador:hover{background:#ffe2bf}
.bg-atalho-prestador:focus-visible{outline-color:#c2620a}


/* ✏️ A marca da correção de um log: fica NA LINHA, não escondida no log novo.
   Cinza e menor que o texto — é nota de rodapé do registro, não o registro. */
.log-editado{display:block;margin-top:4px;font-size:12px;color:#8a5b00;
  background:#fff8e8;border-left:3px solid #e0a92b;padding:4px 8px;border-radius:0 6px 6px 0}
/* 📅 Atalhos de período dos relatórios (23/09/2026): preenchem a linha, mesma altura. */
.periodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin:8px 0 4px}
.periodos button{width:100%;min-height:36px;margin:0}

/* 🔎 A lupa das listas (24/09/2026): campo na largura toda, botão Limpar ao lado. */
.lupa-lista{display:flex;gap:8px;align-items:stretch;margin:0 0 10px}
.lupa-lista input{flex:1 1 auto;min-width:0;margin:0;min-height:40px;font-size:15px}
.lupa-lista button{flex:0 0 auto;white-space:nowrap}
.lupa-linha td{background:transparent;border:0;padding:4px 0}

/* 📁 Resultado da consulta de autorizados com a pasta de origem (24/09/2026). */
.aut-achado{border-left:5px solid var(--aut-cor,#0b5cab);padding-left:8px;margin-bottom:10px}
.aut-achado-pasta{font-size:13px;color:var(--aut-cor,#0b5cab);margin:2px 0 4px}
.aut-achado-bloq{border-left-color:#b3261e}
.aut-achado-bloq .aut-achado-pasta{background:#fdecec;color:#b3261e;font-weight:600;padding:6px 8px;border-radius:6px}

/* 🚪 No prédio agora (24/09/2026): os dois botões preenchem a linha, mesma altura. */
.no-predio-botoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.no-predio-btn{width:100%;min-height:48px;margin:0;display:flex;align-items:center;justify-content:center;gap:6px}
.np-lista .pessoa-linha{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px}
.np-lista .pessoa-foto{width:72px!important;height:72px!important;flex:0 0 72px;margin:0!important}
.np-lista .pessoa-dados{flex:1 1 auto;min-width:0}

/* 🛵 Novo entregador (24/09/2026): verde-azulado, distinto do roxo e do laranja. */
.bg-atalho-entregador{background:#e3f6f4;border-color:#0f766e;color:#0b5f58}
.bg-atalho-entregador:hover{background:#c9ede9}
.bg-atalho-entregador:focus-visible{outline-color:#0f766e}
/* 🚪 Visitante novo em página única: o que é raro (RG, placa, motivo) fica
   recolhido — o balcão enxerga só os campos obrigatórios. */
.pe-mais{margin:8px 0;border:1px dashed var(--line,#d5dde3);border-radius:10px;padding:6px 10px}
.pe-mais>summary{cursor:pointer;font-size:13px;min-height:32px;display:flex;align-items:center;color:var(--muted,#5b6770)}
/* 🏢 Destino: unidade ou Administração — os dois botões preenchem a linha. */
.destino-tipo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px;margin:4px 0 8px}
.destino-opcao{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--line,#d5dde3);border-radius:10px;cursor:pointer;font-weight:600;margin:0}
.destino-opcao:has(input:checked){border-color:#0b5cad;background:#e8f1fb}
.destino-opcao input{width:auto;margin:0;flex:0 0 auto}
/* 🏷️ A busca de pessoas é genérica (26/09/2026): o cartão diz o que a pessoa é. */
.tipo-pessoa{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;white-space:nowrap}
.tipo-visitante{background:#efe9fb;color:#5b3aa6}
.tipo-prestador{background:#fdf0e1;color:#8a4b00}
.tipo-entregador{background:#e3f5f1;color:#0b6b57}
/* ➕ A ocorrência mora atrás do botão (27/09/2026, ordem do dono). */
.oc-abrir{width:100%;min-height:56px;font-size:17px;font-weight:600;letter-spacing:.02em}
.oc-form-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oc-form-topo h2{margin:0}
/* 📅 No iPhone, date/time nativos têm largura mínima própria e vazavam do
   cartão (print do dono, 27/09). Encaixa no container como os outros campos. */
input[type=date],input[type=time],input[type=datetime-local]{min-width:0;max-width:100%;box-sizing:border-box}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;min-height:44px;text-align:left}}
/* 🔎 Penalidade da unidade em OUTRO assunto (27/09/2026): a caixa de
   reincidência não afirma "não há anterior" sem mostrar a dúvida. */
.reinc-duvida{margin-top:8px;padding:10px 12px;border:1px solid #e0a300;border-radius:10px;background:#fff7e0;color:#5c4200;font-size:14px;line-height:1.45}
.reinc-duvida .actions{margin-top:8px}
/* 📜 A fonte da regra (27/09/2026): um campo para a fonte, outro para o texto. */
.fonte-box{margin:6px 0 4px;padding:10px 12px;border:1px solid var(--line,#d5dde3);border-radius:10px;background:#f7f9fc}
.fonte-box>label:first-child{margin-top:0}
.fonte-campos{margin-top:6px}
.fonte-rotulo{margin-top:6px;font-size:14px;color:#1f3a5f}
.fonte-rotulo:empty{display:none}
.fonte-falta{color:#a3372e;font-weight:600}
/* 🖥️ No computador (27/09/2026, print do dono: "no pc ficou horrível"): com a
   ocorrência FECHADA, o botão vira uma faixa fina na largura toda e a lista
   ocupa a tela inteira — sem a coluna de 360px vazia. Aberta, volta o lado a
   lado de antes (formulário à esquerda, lista à direita). Celular: igual. */
@media(min-width:901px){
  .oc-grid.oc-fechado{grid-template-columns:minmax(0,1fr)}
  .oc-grid.oc-fechado .oc-card-nova{padding:10px 14px}
  .oc-grid.oc-fechado .oc-abrir{width:auto;min-height:46px;padding:0 28px;font-size:16px}
  .oc-grid.oc-fechado #oc_abrir_box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .oc-grid.oc-fechado #oc_abrir_box[hidden]{display:none}
  .oc-grid.oc-fechado #oc_abrir_rasc{margin:0}
}
.tipo-pessoa-linha{margin:-2px 0 6px}
.tipo-pessoa-linha .tipo-pessoa{margin-left:0}
/* 🏷️ O cargo no app (28/09/2026). */
.cargo-selo{display:inline-block;padding:2px 10px;border-radius:999px;background:#e8f1fb;color:#0b4a8c;font-weight:600;font-size:13px}
/* 🗜️ Turnos: o resto das ações mora atrás de ⚙️ Ações (29/09/2026). */
.acoes-extra{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px}
.acoes-extra[hidden]{display:none}
/* 🗜️ Últimos logs do Painel: uma linha por log (29/09/2026). */
.log-linha{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line,#e3e8ee);font-size:14px;min-width:0}
.log-linha:last-child{border-bottom:0}
.log-linha-link{cursor:pointer}
.log-linha-link:hover{background:#f3f7fc}
.log-quando{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#4a5566;font-weight:600}
.log-texto{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-linha .pill{flex:0 0 auto}
@media(max-width:600px){.log-texto{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}

/* 📞 Interfone virtual (04/10/2026): o botão na entrada e o andamento da ligação. */
.interfone-box { display: grid; gap: 6px; margin: 8px 0 4px; }
.interfone-box > button, .interfone-box > select { width: 100%; }
.interfone-box > label { margin: 0; }
.interfone-st:empty { display: none; }
.interfone-st { padding: 10px 12px; border-radius: 10px; background: #eef4ff; color: #12325f; font-size: 15px; line-height: 1.4; }
.interfone-st.ok { background: #e7f6ec; color: #135c2c; }
.interfone-st.erro { background: #fdecec; color: #8e1d1d; }
.interfone-st.aviso { background: #fff5e0; color: #6b4a00; }
.interfone-st .btn-xs { margin-left: 6px; }

/* 📑 Configuração em índice (04/10/2026; refeito 05/10 — "precisa ficar mais profissional").
   Colunas que se encaixam (sem buracos entre caixas), rótulo de assunto discreto,
   linhas com traço fino e a seta de navegação. */
.cfg-grupo-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.cfg-grupo-cab h2{font-size:18px;margin:0;letter-spacing:-.01em}
.cfg-grupo-cab .cfg-grupo-sub{margin:0}
.cfg-indice{columns:3 320px;column-gap:18px}
.cfg-indice-curto{columns:3 320px}
.cfg-caixa{break-inside:avoid;display:inline-block;width:100%;min-width:0;margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.cfg-caixa h3{margin:0;padding:12px 16px 10px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:#f7f9fc;border-bottom:1px solid var(--line)}
.cfg-linhas{display:flex;flex-direction:column}
.cfg-linha{min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:52px;text-align:left;background:#fff;border:0;border-radius:0;padding:11px 16px;color:var(--ink);box-shadow:none;cursor:pointer}
.cfg-linha + .cfg-linha{border-top:1px solid #eef1f6}
.cfg-linha:hover,.cfg-linha:focus-visible{background:#f3f7fe}
.cfg-linha:hover .cfg-seta{color:var(--blue);transform:translateX(2px)}
.cfg-linha-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cfg-linha-txt b{font-size:14.5px;font-weight:600;line-height:1.3}
.cfg-linha-txt small{font-size:12.5px;color:var(--mut);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cfg-seta{flex:none;font-size:22px;line-height:1;color:#b6c0cf;transition:transform .12s,color .12s}
@media (max-width:600px){.cfg-indice,.cfg-indice-curto{columns:1}}
.cfg-indice-geral{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(320px,calc((100% - 36px) / 3)),1fr));gap:18px;align-items:start}
.cfg-indice-geral .cfg-caixa{margin:0}
@media (max-width:600px){.cfg-indice-geral{grid-template-columns:minmax(0,1fr)}}

/* 🚦 Semáforo do robô no Painel (05/10/2026): faixa fina, só para o acesso total. */
.robo-faixa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px 7px 12px;margin:0 0 12px;font-size:13px}
.robo-faixa-alerta{border-color:#e7a7a0;background:#fff6f5}
.robo-luz{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.robo-verde{background:#1f9d55;box-shadow:0 0 0 3px rgba(31,157,85,.18)}
.robo-amarela{background:#e0a100;box-shadow:0 0 0 3px rgba(224,161,0,.2)}
.robo-vermelha{background:#d1302a;box-shadow:0 0 0 3px rgba(209,48,42,.22);animation:roboPisca 1.2s infinite}
.robo-cinza{background:#b6c0cf}
.robo-txt{flex:1;min-width:0}
.robo-reset{margin-left:auto}
@keyframes roboPisca{50%{opacity:.35}}
/* 🔤 06/10/2026 (do dono, print do Painel: "diminui estas fontes, está horrível"): o negrito do
   RODAPÉ do card ("4 vencida(s)", "2 novo(s) para conferir") herdava o tamanho do NÚMERO
   (`.metric b`, 26–28px). Dentro do rodapé o negrito fica do tamanho do rodapé.
   E o número fica sempre logo abaixo do título, com o rodapé no pé — antes, card com
   rodapé subia o número e card sem rodapé o jogava para baixo. */
.metric small b,.cards-2 .metric small b{font-size:inherit;line-height:inherit;font-weight:600}
.metric small{font-size:12px;line-height:1.35}
.cards-2 .metric{justify-content:flex-start;gap:4px}
.cards-2 .metric small{margin-top:auto}

/* ↕️ Ordenar os cards (06/10/2026): o botão discreto embaixo dos cards e o número na lista. */
.cards-ordenar{display:flex;justify-content:flex-end;margin:-4px 0 12px}
.ord-num{display:inline-block;min-width:22px;color:var(--mut);font-weight:600}

/* ✏️ 07/10/2026: motivos prontos para tocar ao corrigir/designar quem assume o posto. */
.dg-motivos{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.dg-motivos button{flex:1 1 auto;min-height:40px}

/* 📞 Registro das ligações do interfone (09/10/2026): tabela no desktop, cartões no celular. */
.tabela-ligacoes { overflow-x: auto; }
.tabela-ligacoes table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-ligacoes th, .tabela-ligacoes td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
@media (max-width: 640px) {
  .tabela-ligacoes thead { display: none; }
  .tabela-ligacoes tr { display: block; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; padding: 6px 8px; }
  .tabela-ligacoes td { display: flex; gap: 8px; border: 0; padding: 2px 0; }
  .tabela-ligacoes td::before { content: attr(data-rot); font-weight:600; color: #64748b; min-width: 82px; }
}

/* 🍔 Delivery chegou (09/10/2026) — mesmo desenho dos atalhos da busca da portaria. */
.bg-atalho-delivery { background: #fff4e5; border-color: #f0b25a; color: #8a4b00; }

/* 🔴 Posto ocupado na tela de assumir (12/10/2026): aparece, com quem está lá. */
.pescar-item.pescar-ocupado { border-left: 6px solid #c0392b; background: #fdf2f1; }
/* 🚨 BLOCO E APTO GRITANDO na entrega (22/10/2026, ordem do dono: "cor forte e piscando") —
   é para o MORADOR ver, sem ler nada, se a caixa é dele. */
.unid-alerta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;align-items:center;
  background:#c62828;color:#fff;border:4px solid #ffeb3b;border-radius:14px;padding:12px 14px;margin:6px 0 12px;
  text-align:center;animation:unidPisca 1s steps(1,end) infinite}
.unid-alerta .ua-campo span{display:block;font-size:.85rem;font-weight:600;letter-spacing:.14em;opacity:.95}
.unid-alerta .ua-campo b{display:block;font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.05;font-weight:600;letter-spacing:.02em}
.unid-alerta .ua-qtd{font-size:1.1rem;font-weight:600}
@keyframes unidPisca{0%{background:#c62828;color:#fff;border-color:#ffeb3b}50%{background:#ffeb3b;color:#b71c1c;border-color:#c62828}}
.eb-item .unid-alerta{padding:6px 10px;margin:0 0 6px;border-width:3px}
.eb-item .unid-alerta .ua-campo b{font-size:clamp(1.8rem,7vw,2.4rem)}
.eb-item .meta{display:block}
@media (prefers-reduced-motion: reduce){.unid-alerta{animation:none;outline:4px dashed #ffeb3b;outline-offset:2px}}
/* 🚨 22/10/2026 (dono): o destaque É o campo "Bloco/Unidade de quem retirou" — sem faixa duplicada, grandão. */
.unid-campos>div{background:#c62828;border:4px solid #ffeb3b;border-radius:14px;padding:8px 10px 10px;animation:unidPisca 1s steps(1,end) infinite}
.unid-campos label{color:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;margin-top:0}
.unid-campos>div{color:#fff}
.unid-campos input{font-size:clamp(2.4rem,11vw,3.6rem);font-weight:600;text-align:center;color:#b71c1c;background:#fff;
  border:3px solid #fff;border-radius:10px;padding:4px 6px;min-height:0;height:auto;line-height:1.1}
@media (prefers-reduced-motion: reduce){.unid-campos>div{animation:none;outline:4px dashed #ffeb3b;outline-offset:2px}}
/* 🔒 23/10/2026 (dono): o bloco/apto piscando é SÓ LEITURA — vem da caixa, não se digita por cima na entrega. */
.unid-campos output{display:block;font-size:clamp(2.4rem,11vw,3.6rem);font-weight:600;text-align:center;color:#b71c1c;background:#fff;
  border-radius:10px;padding:4px 6px;line-height:1.1;user-select:none}
.unid-travada .ua-qtd{text-align:center;color:inherit;font-weight:600}

/* 🖱️ 26/10/2026 (print do dono: "esse menu não rola, eu tenho de ficar diminuindo a
   tela para acessá-lo"). A barra lateral tem a altura da tela (sticky, 100vh) e o
   menu não tinha rolagem própria: com 24 seções, o que passava da altura ficava
   cortado e nenhuma roda de mouse ou touchpad chegava lá.
   🔒 Quem rola é SÓ o menu: a marca no alto e Meus avisos / Meu local / Sair
      embaixo ficam sempre à vista. `min-height:0` é o que deixa um item flex
      encolher e rolar — sem ele, o overflow não acontece. */
aside{height:100vh;height:100dvh}
nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
nav button{flex:0 0 auto}
aside>.brand,aside>.exit{flex:0 0 auto}
@media(max-width:900px){
  aside{height:auto}
  /* No celular, o menu aberto pelo ☰ também rola dentro dele, e não some da tela. */
  nav.open{max-height:calc(100dvh - 150px);overflow-y:auto}
}

/* ===== ☑️ CHECKBOX AO LADO DO TEXTO (27/10/2026, print do dono: "está feio") =====
   O `input{width:100%}` global esticava a caixinha de `<label><input> texto</label>`
   e ela ia parar ACIMA do texto, centralizada. Toda caixinha solta dentro de um
   label volta a ficar À ESQUERDA do texto, alinhada. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
label > input[type=checkbox], label > input[type=radio]{width:18px;height:18px;margin:0;flex:none;accent-color:var(--blue)}

/* 🔘 CARTÃO DE OPÇÃO: escolha com ícone, título e uma linha de apoio. */
.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:6px 0 2px}
.opcoes > label.opcao{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;min-height:56px}
.opcoes > label.opcao:hover{border-color:#b9c6d8}
.opcoes > label.opcao:has(input:checked){border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 3px rgba(11,92,171,.10)}
.opcoes > label.opcao:has(input:disabled){opacity:.55;cursor:not-allowed;background:#f6f7f9}
label.opcao .op-ic{font-size:20px;line-height:1;flex:none}
label.opcao .op-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
label.opcao .op-tx small{font-weight:600;color:var(--mut);font-size:12px;line-height:1.3}

/* 📊 PRÉVIA DO COMUNICADO */
.previa-cm{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#f8fafc}
.previa-cm .pv-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--ink)}
.previa-cm .pv-num{font-size:28px;font-weight:600;color:var(--blue);line-height:1}
.previa-cm .pv-sub{color:var(--mut);font-size:13px;font-weight:600}
.previa-cm .pv-aviso{margin-top:8px;font-size:13px;color:#8a5a00;font-weight:600}
.previa-cm .pv-neutro{color:var(--mut);font-size:13px}

/* 🕘 FAIXAS DE HORÁRIO DO ESPAÇO */
.faixa-esp{display:grid;grid-template-columns:110px 110px 1fr 40px;gap:8px;align-items:end;margin:6px 0}
.faixa-esp button{height:44px}
@media (max-width:520px){.faixa-esp{grid-template-columns:1fr 1fr 40px}.faixa-esp .fx-reg{grid-column:1/-1;grid-row:2}}
.regras-faixa{margin-top:8px;border-left:4px solid #f5c518;background:#fffbea;border-radius:8px;padding:8px 10px;font-size:13px}
.regras-faixa b{white-space:nowrap}
/* 📱 No celular, cartão de opção um por linha: dois lado a lado quebravam a palavra
   no meio ("aprovaçã-o", "condomí-nio"). Quem precisa de grade compacta (dias da
   semana, canais) declara a própria grade no style e continua igual. */
@media (max-width:520px){.opcoes{grid-template-columns:1fr}}
/* ===== 💰 FINANCEIRO (29/10/2026) ==========================================
   Ordem do dono, com o print da Visão geral do DRG-Condo: o botão do
   Financeiro no menu é sempre o verde-petróleo do "Nova cobrança" do Condo.
   🔀 29/10/2026 (do dono): a tela NÃO força mais a paleta do Condo — segue a
   escolha de cada usuário na chavinha do topo (`body.paleta-condo`). Antes:
   ao abrir a tela o app inteiro vestia a paleta do Condo (tema claro: barra
   #20303F, acento #2A7182, fundo #E7ECEA, cartão #F4F7F5). Sai da tela, volta
   a cor do contrato.
   🔒 As variáveis vão no BODY: a cor do contrato/morador é gravada no <html>
      (`setProperty('--blue')`), e o body, mais perto, vence só aqui. */
nav button[data-screen="financeiro"]{background:#2A7182;color:#fff}
nav button[data-screen="financeiro"]:hover,nav button[data-screen="financeiro"].on{background:#235F6D;color:#fff;box-shadow:inset 3px 0 0 #8FD0DD}
body.paleta-condo{--bg:#E7ECEA;--panel:#F4F7F5;--ink:#243138;--mut:#54616A;--line:#C9D2CE;--blue:#2A7182;--blue2:#20303F;--ok:#3C7C5E;--bad:#AD473C;--warn:#8A6E28;background:#E7ECEA}
body.paleta-condo aside{background:#20303F;color:#DDE6F2}
body.paleta-condo nav button{color:#DDE6F2}
body.paleta-condo nav button:not([data-screen="financeiro"]):hover{background:#2A3E50}
body.paleta-condo .card,body.paleta-condo .metric,body.paleta-condo .item{background:#F4F7F5;border-color:#C9D2CE}
/* 🔓 30/10/2026 (pedido do dono): do DRG-Condo fica SÓ A PALETA. O Painel do
   Financeiro voltou à estrutura do Guard e as classes de LAYOUT da casca do Condo
   (v593: .fin, .fin-head, .fin-btn, .fin-kpi, .fin-grid, .fin-box, .fin-tbl, .fin-ops,
   .fin-saude…) saíram. Ficam as que só carregam COR. As cores das abas, dos botões
   e do positivo/negativo vêm das variáveis da paleta de cada usuário (acima). */
.fin-verde{--fin-c:#3C7C5E}.fin-ouro{--fin-c:#8A6E28}.fin-teal{--fin-c:var(--blue)}.fin-verm{--fin-c:#AD473C}
.fin-ok{background:#DCEBE3;color:#2D6249}.fin-amb{background:#F1E7CF;color:#6E5718}.fin-red{background:#F3DDDA;color:#8E3329}.fin-mut{background:#DDE4E1;color:var(--mut)}
.fin-neg{color:#AD473C!important}
/* 📊 Cartões do Painel do Financeiro (30/10/2026): o mesmo cartão claro do Guard, com
   ícone e valor em destaque. `--tom` é a cor de atenção — só aparece no valor e no
   ícone quando o número pede (classe fin-bom / fin-alerta / fin-ruim). */
.fin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fin-cards+.fin-cards{margin-top:12px}
.fin-card{--tom:var(--blue);background:var(--panel);border:1.5px solid #8fa1b3;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-height:120px;min-width:0;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.fin-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.08);border-color:var(--tom)}
.fin-card:active{transform:scale(.98);filter:brightness(.96)}
.fin-card:focus-visible{outline:2px solid var(--tom);outline-offset:2px}
.fin-card-top{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:13px;line-height:1.3}
.fin-card-ico{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--bg);background:color-mix(in srgb,var(--tom) 12%,transparent)}
.fin-card-v{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.3px;overflow-wrap:anywhere}
.fin-card-sub{color:var(--mut);font-size:12.5px;line-height:1.35;margin-top:auto}
.fin-bom{--tom:var(--ok)}.fin-alerta{--tom:var(--warn)}.fin-ruim{--tom:var(--bad)}
.fin-bom .fin-card-v,.fin-alerta .fin-card-v,.fin-ruim .fin-card-v{color:var(--tom)}
@media (max-width:520px){.fin-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fin-card{padding:12px;min-height:110px}.fin-card-v{font-size:20px}
  .fin-cards>.fin-card:last-child:nth-child(odd){grid-column:1/-1}}
/* ===== 🎨 PALETA ESCOLHIDA PELO OPERADOR (29/10/2026) =====================
   Ordem do dono: *"uma opção de cor padrão do Guard para ser escolhida pelo
   operador entre a paleta do Guard e a do Condo, um botão resolve isso"*.
   `body.paleta-condo` reaproveita as regras do tema do Financeiro (acima); a
   tela de login também veste a escolha (ela vem guardada no aparelho). */
body.paleta-condo .login{background:#20303F}
body.paleta-condo .mark,body.paleta-condo .shield{color:#2A7182}
.paleta-escolha{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:4px 0 6px}
.paleta-op{justify-content:flex-start;text-align:left;gap:12px;background:#fff;color:var(--ink);border:2px solid #c9d6e5;padding:12px 14px;min-height:64px;font-weight:600}
.paleta-op small{display:block;color:var(--mut);font-size:12px;font-weight:500;margin-top:2px}
.paleta-op.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,113,130,.18)}
.paleta-op.on b::after{content:" ✓";color:var(--ok)}
.paleta-amostra{display:inline-flex;flex:0 0 auto;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.paleta-amostra i{display:block;width:16px;height:34px}
.paleta-am-guard i:nth-child(1){background:#08305c}.paleta-am-guard i:nth-child(2){background:#0b5cab}.paleta-am-guard i:nth-child(3){background:#f4f7fb}
.paleta-am-condo i:nth-child(1){background:#20303F}.paleta-am-condo i:nth-child(2){background:#2A7182}.paleta-am-condo i:nth-child(3){background:#E7ECEA}
/* 🎨 A chavinha do topo: trilho com a bolinha de cada paleta nas pontas e o
   pino que desliza para a escolhida (azul = Guard, verde-petróleo = Condo). */
.paleta-chave{position:relative;width:64px;min-width:64px;height:38px;padding:0;border-radius:999px;background:#fff;border:1px solid var(--blue);display:inline-block;flex:0 0 auto}
.paleta-chave i{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;opacity:.45}
.paleta-chave .pc-g{left:10px;background:#0b5cab}.paleta-chave .pc-c{right:10px;background:#2A7182}
.paleta-chave .pc-pino{position:absolute;top:50%;left:4px;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#0b5cab;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .18s ease,background .18s ease}
.paleta-chave.condo .pc-pino{left:30px;background:#2A7182}
.paleta-chave.salvando .pc-pino{animation:pcPulsa .7s ease-in-out infinite alternate}
.paleta-chave:disabled{opacity:1;cursor:progress}
.paleta-chave:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@keyframes pcPulsa{from{transform:scale(1)}to{transform:scale(.8)}}
/* 🖼️ LOGO DA CASA NO CHIP DO CONDOMÍNIO (29/10/2026, ordem do dono). */
.condominio-chip.com-logo{flex-direction:row;align-items:center;gap:10px;padding:5px 14px 5px 6px}
.condominio-logo{width:38px;height:38px;object-fit:contain;border-radius:8px;background:#fff;flex:0 0 auto}
.condominio-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.logo-cond-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0}
.logo-cond-prev{width:88px;height:88px;border:2px dashed #c9d6e5;border-radius:12px;display:grid;place-items:center;background:#fff;flex:0 0 auto;overflow:hidden}
.logo-cond-prev img{width:100%;height:100%;object-fit:contain}
.logo-cond-bts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;flex:1 1 240px}

/* 🏷️ A marca no papel impresso pela tela (29/10/2026) — ver public/marca-impressao.js.
   🏢 condomínio em destaque, 🏛️ administradora menor à direita, 🛡️ DRG-Guard no rodapé.
   A moldura é neutra: não herda borda, fundo zebrado nem a letra miúda das tabelas do #printArea. */
#printArea table.drg-moldura{width:100%;table-layout:auto;border-collapse:collapse;font-size:inherit;margin:0}
#printArea table.drg-moldura>tbody>tr>td,#printArea table.drg-moldura>tfoot>tr>td{border:0;padding:0;background:none!important}
#printArea table.drg-moldura>tfoot>tr>td{height:11mm}
#printArea .drg-marca-topo{display:flex;align-items:center;gap:14px;border-bottom:1px solid #d1d5db;padding:0 0 6px;margin:0 0 8px}
#printArea .drg-marca-topo img{max-height:40px;max-width:110px;object-fit:contain}
#printArea .drg-marca-topo b{display:block;font-size:14px;color:#111}
#printArea .drg-marca-topo small{display:block;font-size:9px;color:#5b6472}
#printArea .drg-marca-cond{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
#printArea .drg-marca-adm{display:flex;align-items:center;gap:6px;text-align:right}
#printArea .drg-marca-adm b{font-size:11px}
#printArea .drg-marca-adm img{max-height:30px;max-width:90px}
#printArea .drg-marca-qr svg{width:52px;height:52px;display:block}
#printArea .drg-marca-rodape{position:fixed;bottom:0;left:0;right:0;height:8mm;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #d1d5db;font-size:8px;color:#6b7280;background:#fff}
#printArea .drg-marca-rodape img{width:11px;height:11px;vertical-align:-2px;margin-right:4px}
@media screen{#printArea .drg-marca-rodape{position:static}}

/* 🏠 App do morador numa tela só (30/10/2026): resumo clicável + abas que preenchem a linha */
.mapp-teste{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 12px;padding:12px;border:2px dashed #1f7a45;border-radius:12px;background:#f1f8f3}
.mapp-teste button{width:100%;min-height:44px;background:#1f7a45;border-color:#1f7a45}
.faixa-preview.teste{background:#1f7a45}.faixa-preview.teste button{color:#1f7a45}
.mapp-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 12px}
.mapp-num{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--panel,#fff);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink);min-height:64px}
.mapp-num b{font-size:22px;line-height:1;color:var(--blue)}
.mapp-num span{font-size:12px;color:var(--mut)}
.mapp-num.alerta{border-color:#e0a300;background:#fdf6e6}
.mapp-num.alerta b{color:#8a5a00}
.mapp-num:active,.mapp-aba:active{transform:scale(.98);filter:brightness(.92)}
.mapp-abas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin:0 0 14px;padding:4px;background:var(--bg,#eef2f6);border-radius:12px;position:sticky;top:0;z-index:2}
.mapp-aba{border:0;border-radius:9px;padding:10px 8px;min-height:42px;font-weight:600;font-size:14px;background:transparent;color:var(--mut);cursor:pointer}
.mapp-aba.ativa{background:var(--panel,#fff);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mapp-salvar{position:sticky;bottom:0;background:var(--panel,#fff);border-top:1px solid var(--line);padding:10px 0 4px;margin-top:14px}
.mapp-salvar .primary{width:100%}

/* 🌳 Clientes da DR Systems em árvore (30/10/2026) */
.arvore{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 14px;background:var(--panel,#fff)}
.arv-raiz{font-size:15px;margin-bottom:6px}
.arv-no{margin:4px 0 4px 10px;border-left:2px solid var(--line);padding-left:10px}
.arv-no>summary{cursor:pointer;padding:6px 0;min-height:32px}
.arv-filhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin:4px 0 8px 6px}
.arv-cond{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);background:var(--bg,#f4f7fa)}
.arv-cond:hover{border-color:var(--blue)}
.arv-cond:active{transform:scale(.98);filter:brightness(.92)}
/* 🧭 Financeiro em 5 grupos (31/10/2026): portas grandes, mesma altura, enchendo a linha */
.fin-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fin-grupo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:58px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}
.fin-grupo b{font-size:15px}.fin-grupo small{font-size:12px;opacity:.75;font-weight:600}
.fin-grupo.ativo{background:var(--blue);border-color:var(--blue);color:#fff}.fin-grupo.ativo small{opacity:.9}
.fin-grupo:active{transform:scale(.98);filter:brightness(.92)}

/* 💰 31/10/2026: o Financeiro fixo acima de "Meus avisos" acende como item do menu quando aberto */
/* 💚 🔓 31/10/2026 (pedido do dono): o botão do Financeiro é SEMPRE verde-petróleo do Condo,
   em qualquer paleta. Antes: azul #0b5cab (on #084a8c) na paleta Guard. */
aside .exit.financeiro-fixo{font-weight:600;background:#2A7182;color:#fff}
aside .exit.financeiro-fixo.on{background:#235F6D;box-shadow:inset 3px 0 0 #8FD0DD;color:#fff}
/* 🎨 🔓 31/10/2026: o botão usa a cor escolhida PARA O FINANCEIRO (Guard azul / Condo petróleo) */
aside .exit.financeiro-fixo.fin-condo{background:#2A7182}
aside .exit.financeiro-fixo.fin-condo.on{background:#235F6D;box-shadow:inset 3px 0 0 #8FD0DD}

/* 💰 menu próprio da aba do Financeiro (31/10/2026) */
body.aba-financeiro nav button.nav-sub{text-align:left;justify-content:flex-start;padding-left:22px;padding-right:8px;font-size:.9em;opacity:.92;min-height:38px}
body.aba-financeiro nav button.nav-sub.on{opacity:1}
body.aba-financeiro nav button.fin-voltar-guard{border:1px dashed rgba(255,255,255,.35);margin-bottom:8px}
body.aba-financeiro nav button .fin-seta{margin-left:auto;padding-left:8px;opacity:.75;font-size:.85em}
/* 📱 31/10/2026: no celular, as grades do Financeiro com colunas fixas (Carnê, Pasta, Declaração…)
   empurravam a página para 465px — e o modal aberto por cima perdia o lado direito, com o X.
   Viram 2 colunas, e botões/ações descem para uma linha inteira, quebrando se preciso. */
@media (max-width: 640px) {
  #screen-financeiro .grid2[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  #screen-financeiro .grid2 > .actions, #screen-financeiro .grid2 > button { grid-column: 1 / -1; }
  #screen-financeiro .grid2 > .actions { flex-wrap: wrap; }
}

/* 📱 02/11/2026 (print do dono: "o hamburguer deve vir em primeiro lugar na linha de baixo, financeiro em 2º,
   meus avisos em 3º e sair em 4º, todos na mesma linha"): no celular a marca fica sozinha na 1ª linha e os
   quatro botões dividem a 2ª — ☰ do tamanho do dedo, os outros repartem o resto. O menu aberto vem embaixo. */
@media(max-width:900px){
  aside>.brand{order:1;flex:1 1 100%}
  aside>.hamburger{order:2}
  aside>.exit.financeiro-fixo{order:3}
  aside>.exit.avisos-btn:not(.financeiro-fixo){order:4}
  aside>.exit:not(.avisos-btn){order:5}
  aside>.exit{flex:1 1 auto;min-width:0;padding:8px 8px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;justify-content:center;text-align:center}
  aside>nav{order:6}
}
/* 🗂️ 02/11/2026 (do dono: "todos alinhados pelo emoji à esquerda"): as pastas das obras começam todas na
   mesma coluna, em vez de centralizadas no botão. */
.abas-obra button{justify-content:flex-start;text-align:left}

/* 🖼️ 02/11/2026: a logo do condomínio na entrada do Portal do Morador (no lugar do escudo do Guard) */
#login .brand-logo.logo-condominio-login{width:auto;max-width:180px;max-height:120px;object-fit:contain;border-radius:10px}
.btn-foto-relogio{margin-top:0;min-width:40px;min-height:40px;font-size:20px}
/* 🪶 03/11/2026 (do dono: "as letras deste menu muito pesadas… poderiam ser menos negritadas e as letras
   servirem em uma só linha", "e em todas as páginas também"): o app inteiro desceu um degrau de peso
   (900/800/700 → 600) e o negrito do texto corrido também. O menu fica em 500 e numa linha só (coluna de
   264px, submenu com recuo de 22px em vez de 40px). */
b,strong{font-weight:600}

/* Modelos de despesa fixa (Financeiro → Lançar): grade de colunas iguais com linhas retas
   separando linhas e colunas (dono, 04/11/2026: "botões em linhas retas paralelas, dividindo
   os botões em linhas verticais"). Linha = sombra de 1px de cada célula; o painel corta a sobra. */
.modelos-grade{--grade-linha:#8fa1b3;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));border:1.5px solid var(--grade-linha);border-radius:10px;overflow:hidden;background:var(--panel)}
.modelo-cel{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:48px;padding:10px 14px;margin:0;border:0;border-radius:0;background:transparent;color:var(--blue2);font-weight:600;font-size:14px;text-align:left;cursor:pointer;box-shadow:1.5px 0 0 var(--grade-linha),0 1.5px 0 var(--grade-linha)}
.modelo-cel:hover{background:#eef5fc}
.modelo-cel:active{transform:scale(.98);filter:brightness(.92)}
@media (max-width:520px){.modelos-grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.modelo-cel{font-size:13px;padding:10px}}

/* 📷 Foto do medidor na tabela de leituras (dono, 04/11/2026): ícones sem o card azul de
   fundo, lado a lado e na mesma linha do número do apartamento; "enviar foto já tirada" é a
   seta para cima (padrão de upload). O <label> geral do app é bloco com margem: aqui não. */
.co-foto-btns{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
label.co-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;padding:0;border-radius:8px;background:transparent;color:var(--blue);font-size:18px;line-height:1;cursor:pointer}
label.co-ico:hover{background:#eef5fc}
label.co-ico:active{transform:scale(.94);filter:brightness(.92)}
@media (pointer:coarse){label.co-ico{width:40px;height:40px}}
tr[id^="co_r_"] > td{vertical-align:middle}
/* 💰 Na aba do Financeiro não aparece nada do Social (dono, 04/11/2026): o 🚨 Pânico é da portaria. */
body.aba-financeiro .panic{display:none!important}
/* ✏️🚫🗑️ Ações da despesa (dono, 04/11/2026: "faça os botões bonitos"): ícone + nome, mesma altura, cor por ação */
td.fin-acoes-td{min-width:544px}
.fin-acoes{display:grid;grid-template-columns:repeat(5,104px);gap:6px;align-items:center;justify-content:end}
.fin-acoes .s1{grid-column:1}.fin-acoes .s2{grid-column:2}.fin-acoes .s3{grid-column:3}.fin-acoes .s4{grid-column:4}.fin-acoes .s5{grid-column:5}
.fin-acoes-banco{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:6px}
.fin-acoes-banco .fin-ac{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:700;width:auto}
.fin-acoes .fin-ac{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;width:100%;margin:0;padding:6px 8px;border-radius:9px;font-size:13px;font-weight:700;line-height:1.1;white-space:nowrap;cursor:pointer;background:var(--panel);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06);transition:background .15s,color .15s,border-color .15s}
.fin-acoes .fin-ac.pagar{background:var(--blue);border-color:var(--blue);color:#fff}
.fin-acoes .fin-ac.pagar:hover{filter:brightness(1.08)}
.fin-acoes .fin-ac.editar{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
.fin-acoes .fin-ac.editar:hover{background:color-mix(in srgb,var(--blue) 10%,var(--panel))}
.fin-acoes .fin-ac.cancelar{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.fin-acoes .fin-ac.cancelar:hover{background:color-mix(in srgb,var(--warn) 10%,var(--panel))}
.fin-acoes .fin-ac.excluir{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.fin-acoes .fin-ac.excluir:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.fin-acoes .fin-ac.neutro{color:var(--mut)}
.fin-acoes .fin-ac.neutro:hover{color:var(--ink);border-color:var(--mut)}
.fin-motivo{margin-top:4px;font-style:italic;text-align:right}
@media (pointer:coarse),(max-width:600px){.fin-acoes .fin-ac{min-height:40px;padding:8px 6px}}
/* 🖨️ RPA/Recibo: a palavra na coluna Doc. é o link de imprimir (dono, 04/11/2026) */
.fin-doc-link{display:inline;width:auto;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;font:inherit;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fin-doc-link:hover{text-decoration-thickness:2px}
/* 💲 dinheiro em tabela, formato contábil (dono, 04/11/2026): R$ numa coluna, números alinhados pelo último dígito.
   A coluna encolhe até o maior valor dela (width:1%), então o R$ fica colado no maior número. Ver moeda-alinhada.js */
td.td-moeda{width:1%;white-space:nowrap}
.moeda{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;width:100%;white-space:nowrap;font-variant-numeric:tabular-nums}
.moeda-n{text-align:right}

/* 🧮 05/11/2026 (do dono: "em formato de planilha — com uma linha de uma cor e a outra de outra"): tabela de
   saldos e extrato da conta ordinária com cara de planilha. Cores em transparência: vale no tema claro e no escuro. */
.fin-planilha{border:1px solid rgba(120,140,160,.35);border-radius:10px;margin:6px 0 10px}
.fin-planilha .tbl{table-layout:fixed;min-width:620px;font-variant-numeric:tabular-nums;font-size:13.5px}
.fin-planilha .tbl th{background:rgba(120,140,160,.16);color:inherit;opacity:.9;padding:9px 10px;border-bottom:1px solid rgba(120,140,160,.35)}
.fin-planilha .tbl td{padding:8px 10px;border-bottom:1px solid rgba(120,140,160,.18);vertical-align:middle}
.fin-planilha .tbl th+th,.fin-planilha .tbl td+td{border-left:1px solid rgba(120,140,160,.18)}
.fin-planilha .tbl tbody tr:nth-child(even){background:rgba(120,140,160,.08)}
.fin-planilha .tbl tbody tr:hover{background:rgba(11,92,171,.08)}
.fin-planilha .tbl .n{text-align:right;white-space:nowrap}
.fin-planilha .tbl tr.ini td{font-style:italic}
.fin-planilha .tbl tr.tot td{background:rgba(120,140,160,.2);font-weight:600;border-top:2px solid rgba(120,140,160,.45);border-bottom:0}
.fin-tag-ord{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;background:rgba(11,92,171,.12);color:var(--blue,#0b5cab);vertical-align:1px}
/* ✓ liquidado × agendado no extrato da conta ordinária (05/11/2026) */
.fin-tag-liq,.fin-tag-ag{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;font-size:11px;font-style:normal;vertical-align:1px;white-space:nowrap}
.fin-tag-liq{background:rgba(31,122,69,.14);color:#1f7a45}
.fin-tag-ag{background:rgba(196,140,20,.16);color:#8a5a00}
.fin-planilha .tbl tr.liq td{opacity:.92}
.fin-planilha .tbl tr.hoje td{background:rgba(11,92,171,.10);font-weight:600;font-style:normal}
.fin-planilha .fin-comp{display:inline;width:auto;margin:0 0 0 4px;font-size:12px;padding:0}

/* 📎 vários documentos na despesa (05/11/2026) — alvo de dedo de 40px, botões preenchendo a linha */
.fin-anx-lista{display:flex;flex-direction:column;gap:6px}
.fin-anx-item{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(120px,170px) auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line,#d9e0e8);border-radius:8px;background:var(--panel,#fff)}
.fin-anx-item.erro{border-color:#f0a9a9;background:#fdecec;color:#9b1c1c}
.fin-anx-ic{font-size:1.2rem;text-align:center}
.fin-anx-nome{display:block;width:100%;background:none;border:0;padding:0 2px;min-height:40px;line-height:40px;text-align:left;color:var(--blue);font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
span.fin-anx-nome{color:inherit;cursor:default;white-space:normal;line-height:1.3;padding:6px 2px}
.fin-anx-item select{margin:0;min-height:40px}
.fin-anx-x{min-width:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin:0;cursor:pointer}
.fin-anx-x:active{transform:scale(.98);filter:brightness(.92)}
.fin-anx-acoes{display:flex;gap:6px;justify-content:flex-end}
.fin-anx-botoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:8px}
.fin-anx-bt{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;margin:0}
.fin-anx-bt:active{transform:scale(.98);filter:brightness(.92)}
@media (max-width:520px){.fin-anx-item{grid-template-columns:28px minmax(0,1fr) auto}.fin-anx-item select,.fin-anx-item>.meta{grid-column:2/3}}

/* 📅 vencimentos do dia (05/11/2026) — LEVEMENTE destacada: âmbar bem claro + faixa à esquerda, sem gritar */
.fin-hoje{margin:14px 0 6px;padding:12px 14px 6px;border:1px solid rgba(214,158,46,.45);border-left:5px solid #d69e2e;border-radius:12px;background:rgba(255,196,0,.07)}
.fin-hoje .fin-planilha{background:var(--panel,#fff)}
.fin-hoje .fin-planilha .tbl tbody tr.fin-hoje-l{cursor:pointer}
.fin-hoje .fin-planilha .tbl tbody tr.fin-hoje-l:hover{background:rgba(214,158,46,.14)}
.fin-hoje .fin-planilha .tbl tbody tr.fin-hoje-l.paga{opacity:.72}
.fin-hoje-pagar{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(214,158,46,.18);color:#8a5a00;font-weight:600;font-size:12.5px}
.fin-hoje-conta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){
  /* 📅 no celular cabe inteira, sem rolar de lado: some o Nº e a Conta; fornecedor, valor e situação ficam */
  .fin-hoje .fin-planilha .tbl{min-width:0}
  .fin-hoje .fin-planilha col:nth-child(1),.fin-hoje .fin-planilha col:nth-child(3),
  .fin-hoje .fin-planilha th:nth-child(1),.fin-hoje .fin-planilha td:nth-child(1),
  .fin-hoje .fin-planilha th:nth-child(3),.fin-hoje .fin-planilha td:nth-child(3){display:none}
  .fin-hoje .fin-planilha col:nth-child(4){width:108px!important}
  .fin-hoje .fin-planilha col:nth-child(5){width:96px!important}
  .fin-hoje{padding:10px 8px 4px}
}

/* 💵 vencimentos do dia: duas partes — A pagar e A receber (05/11/2026) */
.fin-hoje-sub{margin:10px 0 4px;font-size:15px}
.fin-hoje-sub .meta{font-weight:400}
.fin-hoje-receber{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(31,122,69,.12);color:#1f6b3d;font-weight:600;font-size:12.5px}
.fin-hoje-c.recolhida tr.fin-hoje-mais{display:none}
.fin-hoje-ver{width:100%;min-height:42px;margin:0 0 8px}
.fin-hoje-ver:active{transform:scale(.98);filter:brightness(.92)}
/* 🏦 despesa paga cuja baixa está em conta desativada: o botão Conta chama a atenção (05/11/2026) */
.fin-ac.fin-ac-alerta{border-color:var(--bad,#b42318)!important;color:var(--bad,#b42318)!important;background:rgba(180,35,24,.08)!important}

/* ===== 📸 ESTEIRA DE LEITURA DE MEDIDORES (07/11/2026) ===== */
.est-root .est-video{display:block}
.est-cont{margin-left:auto;margin-right:8px;font-size:14px;opacity:.9;white-space:nowrap}
.est-abas{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;padding:0 12px 8px}
.est-abas button{min-height:42px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px;font-size:14px;font-weight:600}
.est-abas button.on{background:#fff;color:#0b1422}
.est-vista{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.est-vista.hidden{display:none}
.est-palco{position:relative}
.est-alvo{position:absolute;left:12px;right:12px;top:12px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.62);font-size:17px;line-height:1.3;text-align:center}
.est-alvo.qr{background:rgba(22,128,61,.88)}
.est-alvo.aviso{background:rgba(183,121,31,.92)}
.est-flash{animation:estFlash .25s}
@keyframes estFlash{from{filter:brightness(2.2)}to{filter:none}}
.est-ultimos{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0}
.est-ultimos:empty{display:none}
.est-chip{flex:0 0 auto;min-height:34px;padding:6px 10px;border-radius:17px;border:0;background:rgba(255,255,255,.14);color:inherit;font-size:13px;white-space:nowrap}
.est-chip.ok{background:#16803d;color:#fff}.est-chip.conferir{background:#b7791f;color:#fff}.est-chip.erro{background:#ba1a1a;color:#fff}
.est-ultimos-claro{flex-wrap:wrap;padding:10px 0 0}.est-ultimos-claro .est-chip{background:#eef1f5;color:#1b1b1b}
.est-ultimos-claro .est-chip.ok,.est-ultimos-claro .est-chip.conferir,.est-ultimos-claro .est-chip.erro{color:#fff}
.est-root .cam-botoes.est-sempre,.est-root #es_cam_falhou:not(.hidden){display:grid}
.est-root #es_cam_falhou.hidden{display:none}
.est-label-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;text-align:center}
.est-lista{flex:1 1 auto;min-height:0;overflow:auto;background:var(--panel,#fff);color:var(--ink,#1b1b1b);padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
.est-resumo{font-size:15px;margin-bottom:8px}
.est-acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.est-acoes button{width:100%;min-height:48px}
.est-conf-lista{display:grid;gap:8px}
.est-conf-item{display:flex;gap:10px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line,#d6dbe3);border-radius:10px;background:transparent;color:inherit;min-height:72px}
.est-conf-item img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.est-conf-item small{display:block;opacity:.8;margin-top:2px}
.est-conf-foto{display:block;width:100%;max-height:48vh;object-fit:contain;background:#000;border-radius:8px;margin:10px 0 4px}
.est-opcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:4px 0 10px}
.est-opc{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--line,#d6dbe3);border-radius:10px;cursor:pointer;min-height:52px}
.est-opc:has(input:checked){border-color:var(--blue,#2A7182);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue,#2A7182) 25%,transparent)}
.est-opc small{display:block;font-weight:400;opacity:.75;font-size:12px}
.est-root .cam-botoes.est-sempre{display:flex;flex-wrap:wrap}
.est-root .est-sempre>button{flex:1 1 0;min-width:0}
.est-root .est-sempre>button.hidden{display:none}
.est-root #es_disparo{flex:1 1 100%;order:-1;min-height:64px;font-size:19px}
.est-abas button{line-height:1.15;padding:4px 6px}
.est-chip.sinal{background:#475569;color:#fff}.est-ultimos-claro .est-chip.sinal{color:#fff}

/* 🔢 cartão "medidor novo" da esteira (07/11/2026) */
.est-medidor{flex:0 0 auto;margin:0 12px 8px;padding:12px;border-radius:10px;background:var(--panel,#fff);color:var(--ink,#1b1b1b);box-shadow:0 4px 18px rgba(0,0,0,.35);max-height:48dvh;overflow:auto}
.est-medidor.hidden{display:none}
.est-med-tit{font-size:16px;font-weight:600}
.est-med-sub{font-size:13px;opacity:.8;margin:4px 0 8px}
.est-medidor select{width:100%;min-height:44px;font-size:16px}
.est-med-bts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.est-med-bts button{width:100%;min-height:46px}

/* 📤 exportar · baixar · compartilhar a planilha (07/11/2026) */
.planilha-acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 4px}
.planilha-acoes button{width:100%;min-height:46px}
.planilha-box{margin:8px 0;padding:8px 10px;border:1px solid var(--line,#d6dbe3);border-radius:8px}
.planilha-box>summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.est-planilha-arq{margin-top:12px;padding:10px;border:1px solid var(--line,#d6dbe3);border-radius:8px}