/* O que é só do Sistema Dryco Web: a casca (sidebar, barra superior, login,
   hall de setores, tela de carregamento) e o que cada aba tem de específico.
   A base (paleta, botões, modal, toast) está em dryco.css.

   Desde 28/09/2026 o tema é claro (o padrão da Alpha Piscinas): barras e
   cards brancos sobre o branco-gelo, o azul da DRY.CO de destaque. Nenhuma
   cor mora aqui — tudo vem dos tokens do tema.css (--barra, --veu, --realce,
   --accent-borda…). Da reforma de 22/09/2026 continua a forma: cantos
   retos, bordas finas, sem brilho colorido, sem vidro fosco e sem card que
   levanta no mouse. */

/* ── tela de carregamento: o símbolo da marca sobre o claro ─────────────── */
.carregando { flex-direction: column; gap: 20px; transition: opacity .3s ease; background: var(--bg); }
.carregando.saindo { opacity: 0; pointer-events: none; }
.carregando .logo { width: 104px; height: 104px; position: relative; opacity: .9; }
.carregando .barra { width: 180px; height: 2px; background: var(--borda); overflow: hidden; position: relative; }
.carregando .barra > div { width: 40%; height: 100%; background: var(--accent); animation: vai-e-volta 1.1s ease-in-out infinite alternate; }
.carregando .texto { font-size: 12px; color: var(--texto-fraco); letter-spacing: .02em; position: relative; }
@media (prefers-reduced-motion: reduce) { .carregando .barra > div { animation: none; } }

/* ── login ──────────────────────────────────────────────────────────────── */
/* Hierarquia: símbolo → card → campos → ENTRAR → voltar à área comercial.
   O voltar é uma ação de apoio: fica fora do bloco do formulário, separado
   por um fio, em cinza — nunca disputa com o botão principal. */
.login-fundo { position: fixed; inset: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 24px 18px; overflow: auto; z-index: 90; }
.login-caixa { width: 384px; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.login-logo { width: 62px; height: 62px; display: block; margin: 0 auto 20px; opacity: .92; }
.login { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px 30px 24px; text-align: left; }
.login h1 { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 500; color: var(--texto); letter-spacing: -.01em; }
.login .sub { font-size: 12px; color: var(--texto-fraco); margin: 4px 0 22px; }
.login label.rotulo { display: block; margin-bottom: 5px; }
.login .campo { margin-bottom: 14px; padding: 9px 11px; font-size: 14px; text-align: left; }
.login .erro { color: var(--vermelho); font-size: 12px; min-height: 16px; margin: 0 0 8px; text-align: left; }
.login .btn { padding: 10px 16px; font-size: 14px; }
.login .aviso { font-size: 11px; color: var(--texto-fraco); margin-top: 14px; line-height: 1.45; }
/* a ação de apoio, no pé do card */
.login .voltar-site {
  display: block; margin: 18px -30px -24px; padding: 13px 30px; font-size: 12px;
  text-align: center; color: var(--texto-suave); text-decoration: none;
  border-top: 1px solid var(--borda); background: transparent;
}
.login .voltar-site:hover { color: var(--accent-claro); background: var(--accent-fundo); }

/* campo de senha com o olho (login e trocar senha) */
.campo-senha { position: relative; }
.campo-senha .campo { padding-right: 44px; }
.campo-senha .olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: var(--raio); background: transparent; color: var(--texto-fraco); display: flex; align-items: center; justify-content: center; padding: 0; }
.campo-senha .olho svg { width: 19px; height: 19px; }
.campo-senha .olho:hover { color: var(--accent-claro); background: var(--accent-fundo); }
.campo-senha .olho[aria-pressed="true"] { color: var(--accent-claro); }
.login .campo-senha { margin-bottom: 14px; }
.login .campo-senha .campo { margin-bottom: 0; }
/* o olho acompanha o campo, que aqui tem 14px de folga embaixo */
.login .campo-senha .olho { top: 50%; }

/* ── a marca: monograma | RÓTULO DA ÁREA, na fonte da logo ──────────────── */
.marca { display: flex; align-items: center; gap: 12px; color: var(--sidebar-texto-forte); }
.marca img { width: 38px; height: 38px; display: block; flex-shrink: 0; }
.marca .divisor { width: 1px; height: 26px; background: var(--borda-forte); flex-shrink: 0; }
.marca .rotulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.15; white-space: nowrap; color: var(--texto-suave); margin-bottom: 0; }
.marca-lateral { padding: 16px 18px 14px; border-bottom: 1px solid var(--barra-linha); margin-bottom: 4px; }
.marca-lateral .rotulo { white-space: normal; font-size: 12px; letter-spacing: .12em; color: var(--sidebar-texto-forte); }

/* ── hall: o menu de setores depois do login ────────────────────────────── */
.hall { position: fixed; inset: 0; background: transparent; display: flex; flex-direction: column; overflow: auto; z-index: 80; }
.hall-topo { height: 58px; flex-shrink: 0; background: var(--barra); border-bottom: 1px solid var(--barra-linha); color: var(--sidebar-texto-forte); display: flex; align-items: center; gap: 16px; padding: 0 28px; }
.hall-topo .usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hall-topo .usuario .avatar { width: 32px; height: 32px; border-radius: var(--raio); background: var(--accent-fundo); color: var(--accent-claro); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.hall-topo .usuario .nome { font-weight: 600; font-size: 13px; line-height: 1.15; }
.hall-topo .usuario .perfil { font-size: 11px; color: var(--texto-fraco); }
.hall-topo .usuario .acoes { display: flex; gap: 4px; margin-left: 6px; }
.hall-topo .btn-fantasma { color: var(--sidebar-texto); }
.hall-corpo { width: 100%; max-width: 1080px; margin: 0 auto; padding: 44px 28px 32px; flex-grow: 1; }
.hall-corpo h1 { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.hall-corpo > .sub { color: var(--texto-fraco); margin: 4px 0 24px; font-size: 13px; }
.setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
/* o setor é um bloco sólido: borda fina, canto reto, sem levantar do plano */
.setor-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; }
.setor-card:hover { border-color: var(--accent-borda); }
.setor-card .ico { width: 34px; height: 34px; border-radius: var(--raio); background: var(--accent-fundo); color: var(--accent-claro); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.setor-card .ico svg { width: 19px; height: 19px; }
.setor-card h2 { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.setor-card .d { font-size: 12px; color: var(--texto-fraco); }
.setor-card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 14px; }
.setor-card .chip { font-size: 11px; padding: 2px 7px; border-radius: var(--raio); background: var(--superficie-alt); border: 1px solid var(--borda); color: var(--texto-suave); }
.setor-card .chip.leitura { color: var(--texto-fraco); border-style: dashed; }
.setor-card .btn { margin-top: auto; align-self: flex-start; padding: 7px 18px; }
.hall-rodape { text-align: center; font-size: 11px; color: var(--texto-fraco); padding: 14px; }

/* ── casca: sidebar + coluna com barra superior e área ──────────────────── */
/* 24/09/2026: a barra de cima virou trilha (Setores / setor / tela) + busca
   (Ctrl+K), a sidebar lista as sub-telas do setor e recolhe para só ícones,
   e cada tela rola como página — o cabeçalho sai de cena quando se desce,
   em vez de comer meia tela fixa (era o problema do Ponto). */
.app { background: transparent; }
.principal { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.sidebar { background: var(--barra); border-right: 1px solid var(--barra-linha); color: var(--sidebar-texto); transition: width .16s ease; overflow: hidden; }
.sidebar .menu { padding: 8px 8px; overflow-y: auto; flex-grow: 1; min-height: 0; }
.menu-grupo { font-size: 10px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .08em; padding: 12px 12px 5px; white-space: nowrap; }
.sidebar .menu-grupo:first-child { padding-top: 6px; }
.menu-item { align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--raio); color: var(--sidebar-texto); margin: 1px 0; white-space: nowrap; }
.menu-item .marca { display: none; }
.menu-item .ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; color: currentColor; opacity: .8; }
.menu-item .ico svg { width: 18px; height: 18px; }
.menu-item .corpo { padding: 8px 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.menu-item .t { font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.menu-item .t .nome { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-item .d { display: none; }
.menu-item .nivel { font-size: 9px; color: var(--texto-fraco); text-transform: uppercase; flex-shrink: 0; }
.menu-item .conta { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--raio); background: var(--vermelho-fundo); color: var(--vermelho); }
.menu-item .conta.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.menu-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto-forte); }
.menu-item.ativo { background: var(--sidebar-ativo); color: var(--sidebar-texto-forte); box-shadow: inset 2px 0 0 var(--accent-marca); }
.menu-item.ativo .ico { opacity: 1; color: var(--accent); }
.sidebar .rodape { margin-top: auto; padding: 10px 14px 12px; font-size: 11px; color: var(--texto-fraco); border-top: 1px solid var(--barra-linha); display: flex; align-items: flex-end; gap: 8px; }
.sidebar .rodape .textos { min-width: 0; flex-grow: 1; overflow: hidden; }
.recolher { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--borda); border-radius: var(--raio); background: transparent; color: var(--sidebar-texto); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.recolher svg { width: 16px; height: 16px; transition: transform .16s; }
.recolher:hover { color: var(--texto); background: var(--sidebar-hover); }

/* recolhida: só os ícones; o nome aparece no title do botão */
.app.recolhida .sidebar { width: var(--largura-sidebar-recolhida); }
.app.recolhida .sidebar .menu-item { justify-content: center; padding: 0; }
.app.recolhida .sidebar .menu-item .corpo,
.app.recolhida .sidebar .menu-grupo,
.app.recolhida .sidebar .marca-lateral .divisor,
.app.recolhida .sidebar .marca-lateral .rotulo,
.app.recolhida .sidebar .rodape .textos { display: none; }
.app.recolhida .sidebar .menu-item .corpo + .conta { display: none; }
.app.recolhida .sidebar .menu-item { height: 38px; }
.app.recolhida .sidebar .marca-lateral { justify-content: center; padding-left: 0; padding-right: 0; }
.app.recolhida .sidebar .rodape { justify-content: center; padding: 10px 0 12px; }
.app.recolhida .recolher svg { transform: rotate(180deg); }

.topo { height: var(--altura-topo); flex-shrink: 0; background: var(--barra); border-bottom: 1px solid var(--barra-linha); display: flex; align-items: center; gap: 14px; padding: 0 18px 0 20px; }
/* a trilha: Setores / Financeiro / Painel */
.trilha { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: 12px; color: var(--texto-fraco); }
.trilha .passo-trilha { background: transparent; border: 0; padding: 4px 6px; border-radius: var(--raio); color: var(--texto-fraco); white-space: nowrap; font-size: 12px; }
.trilha button.passo-trilha:hover { color: var(--accent-claro); background: var(--accent-fundo); }
.trilha .barra-trilha { color: var(--borda-forte); }
.trilha .atual { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* a busca: parece um campo, abre a paleta */
.abrir-busca { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; width: 300px; max-width: 34vw; padding: 6px 8px 6px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--bg); color: var(--texto-fraco); font-size: 12px; text-align: left; }
.abrir-busca:hover { border-color: var(--accent); color: var(--texto-suave); }
.abrir-busca svg { width: 15px; height: 15px; flex-shrink: 0; }
.abrir-busca .texto-busca { flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
kbd, .tecla { font-family: inherit; font-size: 10px; font-weight: 600; color: var(--texto-suave); padding: 1px 5px; border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: var(--raio); background: var(--superficie-alt); white-space: nowrap; }
.topo .usuario { display: flex; align-items: center; gap: 10px; }
.topo .usuario .avatar { width: 30px; height: 30px; border-radius: var(--raio); background: var(--accent-fundo); color: var(--accent-claro); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.topo .usuario .nome { font-weight: 600; font-size: 12px; line-height: 1.15; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .usuario .perfil { font-size: 11px; color: var(--texto-fraco); }
.topo .usuario .acoes { display: flex; gap: 4px; margin-left: 4px; }
.topo .usuario .acoes .btn { padding: 5px 10px; }
/* o botão de tema (claro/escuro): ícone de contraste + rótulo; ligado = escuro */
.btn-tema { gap: 6px; }
.btn-tema svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-tema svg path { fill: currentColor; stroke: none; }
.btn-tema[aria-pressed="true"] { color: var(--accent-claro); background: var(--accent-fundo); }
@media (max-width: 1100px) { .btn-tema .rotulo-tema { display: none; } }
@media (pointer: coarse) { .btn-tema { min-width: 40px; min-height: 40px; } }

/* ── a tela: cabeçalho compacto e rolagem de página ─────────────────────── */
.tela { padding: 16px 24px 28px; }
.tela > .titulo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px;
  align-items: end; margin-bottom: 14px;
}
.tela > .titulo > h1 { grid-column: 1; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.tela > .titulo > .sub { grid-column: 1; margin-top: 0; font-size: 12px; color: var(--texto-fraco); }
.tela > .titulo > .titulo-acoes { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.somente-leitura { background: var(--ambar-fundo); color: var(--ambar); font-size: 11px; padding: 6px 12px; margin-bottom: 10px; flex-shrink: 0; border-radius: var(--raio); border: 1px solid var(--ambar-borda); }

/* As abas internas (Cartão/Relatório do ponto, as sub-telas do financeiro e
   do painel de acessos) moram na sidebar no computador; no celular a sidebar
   vira uma faixa e elas voltam para dentro da tela. */
/* (24/09/2026: a faixa do menu no celular também lista as sub-telas, então
   as abas de dentro ficam escondidas em qualquer largura — continuam no HTML
   porque as conferências automáticas clicam nelas.) */
.abas-internas { display: none !important; }

/* ── rolagem sem barra ──────────────────────────────────────────────────── */
/* A barra continua escondida (pedido de 22/09/2026). O que avisa que há mais
   é a borda que se apaga: quem rola tem a ponta de baixo esmaecida enquanto
   houver conteúdo abaixo, e a de cima quando já desceu. */
[data-rola~="baixo"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
[data-rola~="cima"] { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 24px), transparent); }
[data-rola~="cima"][data-rola~="baixo"] { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); }
/* o botão "voltar ao topo" de página longa */
.ao-topo { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 36px; height: 36px; border-radius: var(--raio); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-suave); display: none; align-items: center; justify-content: center; padding: 0; }
.ao-topo.visivel { display: inline-flex; }
.ao-topo:hover { border-color: var(--accent); color: var(--accent-claro); }
.ao-topo svg { width: 16px; height: 16px; }

/* ── a paleta de comandos (Ctrl+K) ──────────────────────────────────────── */
.paleta-fundo { position: fixed; inset: 0; background: var(--veu); z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.paleta { width: 620px; max-width: 100%; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-flutuante); display: flex; flex-direction: column; max-height: 70vh; }
.paleta .entrada { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.paleta .entrada svg { width: 18px; height: 18px; color: var(--texto-fraco); flex-shrink: 0; }
.paleta .entrada input { flex-grow: 1; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--texto); -webkit-user-select: text; user-select: text; }
.paleta .resultados { overflow-y: auto; padding: 6px; }
.paleta .grupo-paleta { font-size: 10px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .08em; padding: 10px 10px 4px; }
.paleta .opcao { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: var(--raio); color: var(--texto); }
.paleta .opcao .ico { width: 18px; height: 18px; color: var(--texto-fraco); flex-shrink: 0; display: inline-flex; }
.paleta .opcao .ico svg { width: 18px; height: 18px; }
.paleta .opcao .t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta .opcao .d { font-size: 11px; color: var(--texto-fraco); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.paleta .opcao.foco { background: var(--accent-fundo); }
.paleta .opcao.foco .ico { color: var(--accent-claro); }
.paleta .rodape-paleta { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--texto-fraco); }
.paleta .nada { padding: 18px 12px; color: var(--texto-fraco); font-size: 12px; }

/* ── hall: o que precisa de gente hoje ──────────────────────────────────── */
.hall-busca { margin-left: auto; margin-right: 8px; }
.pendencias { margin: 0 0 26px; }
.pendencias .cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pendencias .cab h2 { font-size: 13px; font-weight: 700; }
.pendencias .lista-pend { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.pend { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; color: var(--texto); }
.pend:hover { border-color: var(--accent-borda); }
.pend .ico-est { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio); background: var(--superficie-alt); }
.pend.vermelho .ico-est { color: var(--vermelho); background: var(--vermelho-fundo); }
.pend.ambar .ico-est { color: var(--ambar); background: var(--ambar-fundo); }
.pend.accent .ico-est { color: var(--accent-claro); background: var(--accent-fundo); }
.pend .ico-est svg { width: 15px; height: 15px; }
.pend .t { font-weight: 600; font-size: 13px; }
.pend .d { font-size: 11px; color: var(--texto-fraco); }
.pend .grupo-pend { margin-left: auto; font-size: 10px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pendencias .tudo-certo { font-size: 12px; color: var(--texto-fraco); padding: 10px 12px; border: 1px dashed var(--borda); border-radius: var(--raio); }

/* ── serviços: levantamento de forro ────────────────────────────────────── */
.servicos-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--texto-fraco); }
.servicos-vazio .ico { width: 40px; height: 40px; color: var(--accent); opacity: .8; }
.servicos-vazio .t { font-size: 15px; font-weight: 600; color: var(--texto); }

/* o levantamento é tela de "aplicativo" (duas colunas que rolam por dentro)
   dentro de uma página: tem a altura da janela, não a do conteúdo */
.servicos-levantamento { height: calc(100vh - var(--altura-topo) - 124px); min-height: 520px; }

/* a coluna da esquerda (projeto + ambientes); no celular ela solta e empilha */
.servicos-lado { width: 460px; flex-shrink: 0; gap: 12px; min-height: 0; }

/* onde se solta o projeto */
.solta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 22px 16px; flex-shrink: 0;
  background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  color: var(--texto-fraco); cursor: pointer; transition: border-color .15s, background .15s;
}
.solta:hover, .solta:focus-visible { border-color: var(--accent); color: var(--texto-suave); outline: none; }
.solta.sobre { border-color: var(--accent); border-style: solid; background: var(--accent-fundo); color: var(--accent-claro); }
.solta.lendo { opacity: .6; pointer-events: none; }
.solta .ico { width: 30px; height: 30px; }
.solta .t { font-size: 14px; font-weight: 600; color: var(--texto); }
/* depois de ler: vira o painel das cotas, sem cara de "solte aqui" */
.solta.com-cotas { align-items: flex-start; cursor: default; border-style: solid; padding: 12px 14px; max-height: 210px; overflow: auto; }
.cotas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cota {
  background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto-suave); font-size: 12px; padding: 4px 9px; font-variant-numeric: tabular-nums;
}
.cota:hover { border-color: var(--accent); color: var(--accent-claro); }
.cota.escolhida { background: var(--accent); border-color: var(--accent); color: var(--accent-texto); }

/* a tabela dos ambientes medidos */
.amb-linha { display: grid; grid-template-columns: minmax(0, 1fr) 74px 74px 74px 30px; gap: 5px; align-items: center; padding: 3px 10px; }
.amb-linha.amb-cabeca { padding-top: 8px; padding-bottom: 2px; }
.amb-linha .campo { padding: 5px 7px; }
.amb-linha .amb-l1, .amb-linha .amb-l2, .amb-linha .amb-area { text-align: right; font-variant-numeric: tabular-nums; }
.amb-linha .amb-area { color: var(--texto-fraco); }
.amb-linha .amb-tirar { padding: 4px 0; justify-self: center; }
/* veio do projeto e o desenho não confirmou a medida: pede um olho humano
   antes de virar material. A marca some quando a pessoa mexe no campo. */
.amb-linha.conferir .campo { border-color: var(--ambar); }
.amb-linha.conferir .amb-local { background: var(--ambar-fundo); }

/* o modelo padrão: cada cômodo do projeto redesenhado do mesmo jeito
   (horizontal em cima, vertical do lado, área no meio) antes da conta */
.modal-modelo .conteudo { padding-top: 8px; }
.modelo { display: flex; flex-direction: column; gap: 10px; }
.modelo-paginas { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.modelo-rotulo { font-weight: 600; color: var(--texto-suave); margin-right: 4px; }
.modelo-total { position: sticky; top: -12px; z-index: 1; padding: 9px 12px; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); font-size: 13px; }
.modelo-grupo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: var(--texto); margin-top: 6px; }
.modelo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.modelo-cartao { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 9px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; transition: border-color .15s; }
.modelo-cartao:hover { border-color: var(--borda-forte); }
.modelo-cartao.marcado { border-color: var(--accent-borda); }
.modelo-cartao:not(.marcado) .modelo-desenho { opacity: .55; }
.modelo-cabeca { display: flex; align-items: center; gap: 7px; min-width: 0; }
.modelo-cabeca input { flex-shrink: 0; accent-color: var(--accent); }
.modelo-nome { font-weight: 600; font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.modelo-selo { flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: var(--raio); border: 1px solid var(--borda); color: var(--texto-fraco); }
.modelo-cartao.entra .modelo-selo { color: var(--verde); background: var(--verde-fundo); border-color: var(--verde-borda); }
.modelo-cartao.conferir .modelo-selo { color: var(--ambar); background: var(--ambar-fundo); border-color: var(--ambar-borda); }
/* o desenho de cada cômodo (.modelo-desenho, .mp-*) mora em modelo.css: é o mesmo no site */
.modelo-pe { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.modelo-cartao.conferir .modelo-motivo { color: var(--ambar); }
.modelo-cartao.fora .modelo-motivo, .modelo-cartao.entra .modelo-motivo { color: var(--texto-suave); }
.modelo-aviso { color: var(--ambar); }
/* o recorte da planta com o cômodo achado pela hachura (sem nome escrito, é ele que diz qual é) */
.modelo-recorte { display: block; width: 100%; max-height: 120px; object-fit: contain; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-alt); }
.modelo-cartao:not(.marcado) .modelo-recorte { opacity: .55; }
/* outros serviços da legenda (sanca, recorte de luminária…) */
.modelo-servicos { display: flex; flex-direction: column; gap: 4px; }
.modelo-servico { display: grid; grid-template-columns: auto 92px 1fr; align-items: start; gap: 8px; padding: 6px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.modelo-servico.marcado { border-color: var(--accent-borda); }
.modelo-servico input { margin-top: 2px; accent-color: var(--accent); }
.modelo-servico .ms-qtd { font-weight: 700; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.modelo-servico .ms-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.modelo-servico.conferir .ms-motivo { color: var(--ambar); }
.modelo-servico.fora { opacity: .7; }
.modelo-servico.fora .ms-motivo { color: var(--texto-suave); }
@media (max-width: 560px) { .modelo-servico { grid-template-columns: auto 1fr; } .modelo-servico .ms-nome { grid-column: 1 / -1; } }

/* a lista de material */
.mat-totais { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; border-bottom: 1px solid var(--borda); color: var(--texto-fraco); }
.mat-totais b { color: var(--texto); font-variant-numeric: tabular-nums; }
.mat-linha { display: grid; grid-template-columns: minmax(0, 1fr) 84px 92px 92px 110px; gap: 8px; align-items: center; padding: 3px 14px; }
.mat-linha.mat-cabeca { padding-top: 9px; padding-bottom: 3px; }
.mat-linha .campo { padding: 5px 7px; text-align: right; font-variant-numeric: tabular-nums; }
.mat-linha .mat-calc, .mat-linha .mat-total { text-align: right; font-variant-numeric: tabular-nums; }
.mat-linha .mat-total { font-weight: 600; }
/* a comparação entre os dois métodos de levantamento da casa (as cores
   .ambar e .vermelho já vêm do dryco.css) */
.mat-linha .num { text-align: right; font-variant-numeric: tabular-nums; }
.mat-linha .mat-calc.usar { cursor: pointer; color: var(--accent-claro); text-decoration: underline dotted; }
#servicos-resumo { gap: 16px; }
/* a conta de venda na aba Proposta (Servicos\Precificacao): filete, não card */
.conta-venda { max-width: 720px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.conta-venda .num { text-align: right; font-variant-numeric: tabular-nums; }
.venda-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 84px 96px 30px; gap: 6px; align-items: center; padding: 3px 0; }
.venda-linha .campo { padding: 5px 7px; min-width: 0; }
.venda-linha .v-tirar { padding: 4px 0; justify-self: center; }
.venda-fech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.venda-fech label { display: flex; flex-direction: column; gap: 4px; }
.venda-fech .campo { padding: 5px 7px; }
.venda-res { border-top: 1px solid var(--borda); }
.venda-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--borda); }
.venda-item.soma { color: var(--texto-suave); }
.venda-item.total { font-weight: 700; font-size: 15px; border-bottom: none; padding-top: 8px; }
.venda-item.total.ambar .num { color: var(--ambar); }
.venda-pend { margin-top: 10px; padding: 8px 10px; background: var(--ambar-fundo); border: 1px solid var(--ambar-borda); border-radius: var(--raio); color: var(--ambar); display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 640px) {
  .venda-linha { grid-template-columns: minmax(0, 1fr) 72px 72px 30px; }
  .venda-linha .v-trecho, .venda-linha.venda-cabeca span:nth-child(2) { display: none; }
  .venda-fech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venda-item { grid-template-columns: minmax(0, 1fr) 110px; }
  .venda-item > span:nth-child(2) { grid-column: 1; grid-row: 2; }
}

/* ── colaboradores ──────────────────────────────────────────────────────── */
.busca { font-size: 16px; padding: 10px 12px; }
/* A barra de cima: busca, filtro, e só duas ações à vista — importar/exportar
   (coisa de computador) moram no "···". */
.barra-colab { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.barra-colab .busca { flex: 1 1 280px; max-width: 460px; }
#colab-filtro { width: auto; max-width: 300px; padding: 5px 8px; }
.menu-mais { position: relative; }
.menu-mais > summary { list-style: none; cursor: pointer; letter-spacing: .12em; min-width: 40px; text-align: center; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; padding: 4px 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.menu-mais-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 14px; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.menu-mais-lista button:hover, .menu-mais-lista button:focus-visible { background: var(--realce); outline: none; }
.menu-mais-lista button:disabled { color: var(--texto-fraco); cursor: default; background: none; }

/* A ficha (colaborador e empresa): nome, etiquetas, dados, documentos, ações. */
.ficha-topo { padding: 22px 24px 14px; border-bottom: 1px solid var(--borda); }
.ficha-nome-linha { display: flex; align-items: flex-start; gap: 8px; }
.ficha-nome { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; flex: 1; min-width: 0; }
.ficha-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ficha-tags:empty { display: none; }
.ficha-corpo { padding: 2px 24px 8px; }
.ficha-obs { padding: 10px 0; white-space: pre-line; }
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 24px 18px; border-top: 1px solid var(--borda); }
.ficha-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 28px; column-gap: 12px; align-items: center; padding: 3px 0; min-height: 30px; }
.ficha-linha .r { font-size: 11px; color: var(--texto-fraco); }
.ficha-linha .v { word-break: break-word; }
.ficha-linha.larga { grid-template-columns: 190px minmax(0, 1fr) 28px; }
.ficha-secao { font-size: 11px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; padding: 16px 0 6px; }

/* copiar: um ícone quieto que aparece por inteiro no hover da linha (no toque, sempre) */
.btn-copiar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 6px; border: 0; border-radius: var(--raio); background: none; color: var(--texto-fraco); opacity: .45; cursor: pointer; flex-shrink: 0; }
.btn-copiar svg { width: 100%; height: 100%; }
.ficha-linha:hover .btn-copiar, .ficha-nome-linha:hover .btn-copiar, .btn-copiar:focus-visible { opacity: 1; }
.btn-copiar:hover { color: var(--accent-claro); background: var(--realce); }
.btn-copiar.copiado { opacity: 1; color: var(--verde); }
@media (hover: none) { .btn-copiar { opacity: .8; width: 36px; height: 36px; padding: 9px; } .ficha-linha { grid-template-columns: 110px minmax(0, 1fr) 36px; } }

/* Documentos da ficha (links do Drive no Supabase) — 29/09/2026. Lista de
   linhas finas, não caixas: o estado é o pontinho à esquerda. */
.docs { padding-bottom: 8px; }
.docs-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.docs-conta { font-size: 12px; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docs-conta.t-completo { color: var(--verde); }
.docs-conta.t-zero { color: var(--vermelho); }
.docs-barra { height: 3px; background: var(--borda); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.docs-barra > span { display: block; height: 100%; background: var(--accent-marca); }
.docs-barra.t-completo > span { background: var(--verde); }
.docs-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 28px; }
.docs-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.docs-est { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--borda); }
.est-ok .docs-est { background: var(--verde); }
.est-falta .docs-est { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vermelho); }
.est-nota .docs-est { background: var(--texto-fraco); opacity: .5; }
.est-opcional .docs-est { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto-fraco); }
.docs-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.docs-nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-ok .docs-nome > span { font-weight: 600; }
.docs-nome small { font-size: 11px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-falta .docs-nome small { color: var(--vermelho); }
.docs-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.docs-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--accent-claro); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.docs-btn:hover { background: var(--realce); border-color: var(--accent-borda); }
.docs-btn svg { width: 13px; height: 13px; }
.docs-add { color: var(--texto-suave); border-style: dashed; }
.docs-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: var(--raio); background: none; color: var(--texto-fraco); cursor: pointer; }
.docs-ico svg { width: 100%; height: 100%; }
.docs-ico:hover { color: var(--accent-claro); background: var(--realce); }
.docs-btn:focus-visible, .docs-ico:focus-visible { outline: 2px solid var(--accent-marca); outline-offset: 1px; }
.docs-rodape { margin: 8px 0 0; font-size: 11px; color: var(--texto-fraco); }

/* colar o link: a linha vira um campo, ali mesmo */
.docs-form { display: block; padding: 10px 0 12px; grid-column: 1 / -1; }
.docs-form form { display: flex; flex-direction: column; gap: 8px; }
.docs-form-rotulo { font-size: 12px; font-weight: 600; }
.docs-form-linha { display: flex; gap: 8px; }
.docs-form-linha .campo { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; }
.docs-form-extra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.docs-form-extra .link { font-size: 12px; min-height: 28px; }
.link.vermelho { color: var(--vermelho); }
.docs-erro { margin: 0; font-size: 12px; color: var(--vermelho); }
.docs-erro:empty { display: none; }
.docs-form.gravando { opacity: .6; }
.docs-form-datas { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.docs-form-datas label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; }
.docs-form-datas .campo { font-size: 14px; padding: 7px 10px; min-width: 150px; }
.docs-dica { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--texto-fraco); }

/* validade das NRs: o pontinho e a segunda linha seguem o prazo (o mesmo âmbar/vermelho dos avisos) */
.docs-item.val-vencendo .docs-est { background: var(--ambar); }
.docs-item.val-vencido .docs-est { background: var(--vermelho); }
.docs-item.val-sem_data .docs-est { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ambar); }
.docs-nome small.val-vencido { color: var(--vermelho); font-weight: 600; }
.docs-nome small.val-vencendo { color: var(--ambar); font-weight: 600; }
.docs-nome small.val-sem_data { color: var(--ambar); }
.docs-quadro .q-sinal, .docs-quadro-legenda .q-sinal { display: inline-block; margin-left: 3px; font-size: 11px; font-weight: 700; cursor: help; }
.q-sinal.q-vencido { color: var(--vermelho); }
.q-sinal.q-vencendo, .q-sinal.q-sem_data { color: var(--ambar); }
.docs-datas td { vertical-align: top; }
.docs-datas .campo { width: 138px; font-size: 12.5px; padding: 5px 6px; }
.docs-datas .campo.invalido { border-color: var(--vermelho); }
.docs-datas-sinal { display: block; margin-top: 2px; min-height: 14px; }
.docs-datas small { font-size: 10.5px; }
.docs-datas small.val-vencido { color: var(--vermelho); font-weight: 600; }
.docs-datas small.val-vencendo, .docs-datas small.val-sem_data { color: var(--ambar); font-weight: 600; }
.docs-datas small.val-ok { color: var(--texto-fraco); }

/* o quadro de quem falta o quê */
.docs-quadro-filtros { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.docs-quadro-rola { overflow: auto; max-height: 60vh; border: 1px solid var(--borda); }
.docs-quadro { border-collapse: collapse; font-size: 12px; width: 100%; }
.docs-quadro th, .docs-quadro td { border-bottom: 1px solid var(--borda); padding: 6px; text-align: center; }
.docs-quadro thead th { position: sticky; top: 0; background: var(--superficie-alt); font-size: 10.5px; font-weight: 600; color: var(--texto-suave); vertical-align: bottom; z-index: 1; }
.docs-quadro th:first-child, .docs-quadro td.nome { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 2; white-space: nowrap; }
.docs-quadro thead th:first-child { background: var(--superficie-alt); z-index: 3; }
.docs-quadro td.nome .link { font-size: 12px; }
.docs-quadro td.q-ok a { color: var(--verde); font-weight: 700; text-decoration: none; display: block; }
.docs-quadro td.q-falta { color: var(--vermelho); }
.docs-quadro td.q-nota { color: var(--texto-fraco); }
.docs-quadro td.total { font-variant-numeric: tabular-nums; color: var(--texto-suave); white-space: nowrap; font-weight: 600; }
.docs-quadro td.total.t-completo { color: var(--verde); }
.docs-quadro-lista { display: none; list-style: none; margin: 0; padding: 0; }
.docs-quadro-lista li { border-bottom: 1px solid var(--borda); }
.docs-quadro-pessoa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 10px 2px; background: none; border: 0; text-align: left; font: inherit; color: var(--texto); cursor: pointer; }
.docs-quadro-pessoa .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-quadro-pessoa .falta { grid-column: 1 / -1; font-size: 11.5px; color: var(--texto-fraco); }
.docs-quadro-legenda { margin: 10px 0 0; font-size: 11px; color: var(--texto-fraco); }
.docs-quadro-legenda .q-ok { color: var(--verde); font-weight: 700; }
.docs-quadro-legenda .q-falta { color: var(--vermelho); font-weight: 700; }

/* No celular a ficha é página: sem rolagem por dentro, tudo à vista descendo. */
@media (max-width: 900px) {
  .barra-colab .busca { flex-basis: 100%; max-width: none; }
  #colab-filtro { flex: 1 1 100%; max-width: none; }
  .barra-colab .cresce { display: none; }
  .barra-colab .so-largo { display: none; }
  .barra-colab > .marcar { margin-right: auto; }
  .tela #ficha, .tela #empresa-ficha { max-height: none; overflow: visible; }
  .tela #ficha .ficha-corpo, .tela #empresa-ficha .ficha-corpo { overflow: visible; flex: none; }
  .tela[data-tela=colaboradores] .card.coluna:has(#lista-colaboradores) { max-height: 44vh; }
  .ficha-topo { padding: 18px 16px 12px; }
  .ficha-nome { font-size: 18px; }
  .ficha-corpo { padding: 0 16px 6px; }
  .ficha-acoes { padding: 12px 16px 16px; }
  .ficha-acoes .btn { flex: 1 1 140px; }
  .ficha-linha, .ficha-linha.larga { grid-template-columns: 104px minmax(0, 1fr) 36px; column-gap: 8px; }
  .docs-lista { grid-template-columns: 1fr; }
  .docs-form-linha .campo, .docs-form-datas .campo { font-size: 16px; }
}
@media (max-width: 640px) {
  .docs-quadro-rola { display: none; }
  .docs-quadro-lista { display: block; max-height: 62vh; overflow: auto; }
  .docs-quadro-legenda .so-tabela { display: none; }
}
.form-grade { display: grid; grid-template-columns: 140px 1fr; gap: 8px 10px; align-items: center; }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 10px; }
.form-2 .celula.larga { grid-column: span 2; }
.form-2 .rotulo, .form-3 .rotulo { margin-bottom: 4px; }

/* ── ponto ──────────────────────────────────────────────────────────────── */
/* três colunas: quem | o cartão | o que saiu. A do meio tem a altura do mês
   (a página rola); as laterais ficam paradas ao lado e rolam por dentro. */
.ponto-cartao { display: grid; grid-template-columns: 250px minmax(0, 1fr) 226px; gap: 12px; align-items: start; }
.ponto-lateral { position: sticky; top: 0; max-height: calc(100vh - var(--altura-topo) - 34px); min-height: 260px; }
.ponto-centro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ponto-cabeca { display: flex; align-items: center; gap: 10px 14px; padding: 10px 14px; flex-wrap: wrap; }
.ponto-cabeca .quem { flex: 1 1 240px; min-width: 0; }
.ponto-cabeca .quem .passo > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto-grade-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 12px 12px; }
.grade-ponto { display: grid; grid-template-columns: 40px repeat(4, minmax(56px, 1fr)) 64px minmax(96px, 1.3fr); gap: 2px; align-content: start; max-width: 760px; margin-inline: auto; }
.grade-ponto.cabecalho { text-align: center; position: sticky; top: -16px; z-index: 3; background: var(--superficie); padding: 10px 0 5px; }
.grade-ponto .cel { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 12px; }
.grade-ponto input.cel { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-align: center; width: 100%; padding: 0; outline: none; -webkit-user-select: text; user-select: text; caret-color: var(--accent-claro); }
.grade-ponto input.cel:focus { border-color: var(--accent); }
.grade-ponto input.cel:read-only { color: var(--texto-suave); }
.grade-ponto input.cel.vermelho { color: var(--vermelho); }
.grade-ponto input.cel.ambar { color: var(--ambar); }
.grade-ponto .descanso { background: var(--superficie-alt); }
.grade-ponto .descanso input.cel { background: var(--superficie-alt); }
.guia-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--texto-suave); padding: 1px 0; }
.guia-item .tag { width: 46px; text-align: center; padding: 2px 0; }
.rel-cartoes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.rel-cartao { background: var(--superficie-alt); border: 1px solid var(--borda); padding: 8px 10px; min-height: 62px; }
.rel-cartao .r { font-size: 11px; color: var(--texto-fraco); min-height: 28px; }
.rel-cartao .v { font-size: 17px; font-weight: 700; color: var(--accent-claro); margin-top: 1px; }
.rel-cartao .v.alerta { color: var(--ambar); }
.rel-faixa { padding: 6px 12px; font-weight: 700; margin-top: 16px; background: var(--accent-fundo); color: var(--accent-claro); }
.rel-faixa.verde { color: var(--verde); background: var(--verde-fundo); }
.rel-faixa.ambar { color: var(--ambar); background: var(--ambar-fundo); }
.rel-empresa { display: flex; justify-content: space-between; align-items: center; background: var(--superficie-alt); border: 1px solid var(--borda); padding: 7px 12px; margin-top: 18px; font-weight: 700; }
.rel-empresa .cnpj { font-weight: 400; font-size: 11px; color: var(--texto-fraco); }
.rel-conta { background: var(--superficie); border: 1px solid var(--borda); padding: 8px 12px; font-size: 11px; color: var(--texto-fraco); margin-top: 10px; }
.historico-linha { display: grid; grid-template-columns: 150px 70px 70px 70px 70px 60px; gap: 6px; font-size: 12px; padding: 3px 0; }
.historico-linha.cabecalho { font-size: 11px; color: var(--texto-fraco); }

/* ── termos ─────────────────────────────────────────────────────────────── */
.termo-tipo { padding: 7px 12px; }
.termo-item { display: flex; align-items: center; gap: 10px; padding: 5px 14px; }
.termo-item.desligado .nome { color: var(--texto-fraco); }
.termo-item .nome { display: block; }
.termo-item .legenda { display: block; font-size: 11px; color: var(--texto-fraco); }

/* ── financeiro ─────────────────────────────────────────────────────────── */
.btn.tipo { background: var(--superficie-alt); color: var(--texto-fraco); padding: 10px 22px; border-color: var(--borda); }
.btn.tipo .fraco { font-weight: 400; }
.btn.tipo.ativo[data-tipo=Saida] { background: var(--accent-fundo); color: var(--accent-claro); border-color: var(--accent); }
.btn.tipo.ativo[data-tipo=Entrada] { background: var(--accent-fundo); color: var(--verde); border-color: var(--verde); }
.form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 10px; }
.form-3 .celula.larga { grid-column: span 3; }
.form-3 .campo { padding: 6px 9px; }
.form-3 .campo.valor { font-size: 20px; font-weight: 700; }
select.campo.venda:disabled { color: var(--texto-fraco); background: var(--superficie-alt); }
.tiles { display: flex; gap: 10px; flex-shrink: 0; }
.tile { flex: 1 1 0; background: var(--superficie); border: 1px solid var(--borda); padding: 12px 16px; }
.tile .v { font-size: 21px; font-weight: 700; margin-top: 4px; }
.tile .d { font-size: 11px; color: var(--texto-fraco); }
/* a lista de lançamentos: uma tabela de linhas finas dentro de um quadro só */
#lancamentos-lista { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
#lancamentos-lista > .vazio, #lancamentos-lista > .small { padding-left: 14px; padding-right: 14px; }
.lanc { position: relative; background: var(--superficie); border: 0; border-bottom: 1px solid var(--borda); margin: 0; padding: 8px 12px 8px 16px; display: flex; align-items: center; gap: 12px; }
.lanc:last-child { border-bottom: 0; }
.lanc:hover { background: var(--superficie-alt); }
.lanc .faixa { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.lanc .data { width: 88px; flex-shrink: 0; }
.lanc .meio { flex-grow: 1; min-width: 0; }
.lanc .meio .desc { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lanc .meio .det { font-size: 11px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lanc .valor { width: 128px; text-align: right; font-size: 14px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lanc .acoes { display: flex; gap: 4px; flex-shrink: 0; }
.lanc .acoes .btn-sm { padding: 3px 8px; }
.grupo-dup .lanc { border: 1px solid var(--borda); margin: 3px 0; }
.lanc .meio .det.dup { color: var(--texto-suave); }
.grupo-dup { border: 1px solid var(--vermelho); margin: 10px 0; padding: 8px 10px 10px; background: var(--superficie-alt); }
.grupo-dup .cabeca { font-size: 12px; font-weight: 700; color: var(--vermelho); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.grupo-dup .cabeca > span { flex-grow: 1; min-width: 0; }
/* já conferido: continua agrupado para dar para comparar, mas sem o alarme */
.grupo-dup.conferido { border-color: var(--borda); }
.grupo-dup.conferido .cabeca { color: var(--texto-fraco); }
/* aqui o texto inteiro importa: é comparando nome, lote e diferença que se decide qual apagar */
.grupo-dup .lanc .meio .desc,
.grupo-dup .lanc .meio .det { white-space: normal; overflow: visible; text-overflow: clip; }
.cal-dia { border: 1px solid var(--borda); padding: 6px 8px; min-height: 58px; display: flex; flex-direction: column; gap: 1px; font-size: 11px; background: var(--superficie); cursor: default; }
.cal-dia.tem { cursor: pointer; }
.cal-dia.alt { background: var(--superficie-alt); }
.cal-dia.verde { background: var(--verde-fundo); }
.cal-dia.ambar { background: var(--ambar-fundo); }
.cal-dia.vermelho { background: var(--vermelho-fundo); }
.cal-dia.hoje { border-color: var(--accent); }
.cal-dia .n { font-weight: 700; font-size: 13px; }
.cal-dia.fora .n { font-weight: 400; font-size: 11px; color: var(--texto-fraco); }
.cal-cab { font-size: 11px; color: var(--texto-fraco); padding: 0 4px 4px; }
.rel-linha { background: var(--superficie); border: 1px solid var(--borda); margin: 2px 0; padding: 8px 14px; display: flex; align-items: center; gap: 12px; }
.rel-linha .nome { width: 300px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-linha .barra { flex-grow: 1; height: 8px; background: var(--superficie-alt); }
.rel-linha .barra > div { height: 8px; background: var(--accent); }
.rel-linha .barra > div.entrada { background: var(--verde); }
.rel-linha .q { width: 40px; text-align: right; font-size: 11px; color: var(--texto-fraco); }
.rel-linha .t { width: 130px; text-align: right; font-weight: 700; }
pre.saida { background: var(--superficie-alt); border: 1px solid var(--borda); color: var(--texto-suave); font-family: Consolas, monospace; font-size: 12px; padding: 10px 12px; margin: 0; overflow: auto; white-space: pre-wrap; }
.lote { background: var(--superficie-alt); border: 1px solid var(--borda); padding: 9px 12px; margin: 3px 0; }
.slot { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 3px 0; }
.sub-abas { margin-bottom: 12px; flex-shrink: 0; }
.sub-tela { display: none; flex-direction: column; min-height: 0; flex-grow: 1; }
.tela.pagina #cal-grade { grid-template-rows: auto; grid-auto-rows: minmax(78px, auto) !important; }
.tela.pagina #imp-saida { min-height: 260px; }
.tela.pagina #imp-lotes { max-height: 420px; }
/* a linha de lançamento, com cara de linha de tabela */
.lanc .cat { font-size: 10px; font-weight: 600; color: var(--texto-suave); background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1px 6px; white-space: nowrap; }
.sub-tela.ativa { display: flex; }
.fluxo { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 2px 10px; font-size: 12px; padding: 4px 0 10px; }
.fluxo .cab { font-size: 11px; color: var(--texto-fraco); }
.fluxo .d { text-align: right; }
/* a linha da lista abre o painel do lançamento */
.lanc.abre { cursor: pointer; }
/* no celular os botões espremiam a descrição até sumir: a linha quebra em duas
   e as ações ficam no painel (um toque na linha abre) */
@media (max-width: 640px) {
  .lanc { flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px 10px 16px; }
  .lanc .meio { order: -1; flex-basis: 100%; }
  .lanc .meio .desc { white-space: normal; }
  .lanc .data { width: auto; display: flex; gap: 8px; align-items: baseline; }
  .lanc .valor { width: auto; margin-left: auto; }
  .lanc.abre .acoes { display: none; }
}
.lanc.abre:focus-visible { outline: 2px solid var(--accent-marca); outline-offset: -2px; }
.lanc.aberto { background: var(--accent-fundo); }

/* ── lançamentos: marcar vários e mexer em todos (15/10/2026) ──────────── */
.lanc .sel { display: flex; align-items: center; flex-shrink: 0; margin: -8px 0 -8px -6px; padding: 8px 6px; cursor: pointer; }
.lanc .sel input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--accent-marca); }
.lanc.marcado { background: var(--accent-fundo); }
.filtro-par { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* 23/10/2026: filtros que cruzam os dados (Painel e Lançamentos). Campo escolhido fica em destaque, para
   ninguém esquecer um filtro ligado e achar que o número está errado. */
.painel-cruzar { row-gap: 6px; background: transparent; border-style: dashed; }
.barra-ferramentas .campo.filtrando, .campo.filtrando { border-color: var(--accent); background: var(--accent-fundo); }
input[type="date"].campo { min-width: 128px; }
:root[data-tema="escuro"] input[type="date"] { color-scheme: dark; }
.lote-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--borda); }
.lote-linha[hidden], .lote-acoes[hidden], .lote-feito[hidden] { display: none; }
.lote-todos { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-suave); cursor: pointer; }
.lote-todos input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-marca); }
.lote-info { font-size: 12px; color: var(--texto); font-variant-numeric: tabular-nums; }
.lote-acoes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.lote-feito { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; font-size: 12px; background: var(--accent-fundo); border: 1px solid var(--accent-borda); border-radius: var(--raio); }
.lote-feito .btn-icone { padding: 4px 8px; }
.lote-feito .btn-icone svg { width: 14px; height: 14px; display: block; }
.lote-form { width: 100%; }
.lote-form p { margin: 0 0 12px; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.lote-resumo { margin-bottom: 14px; padding: 8px 10px; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); }
.lote-campo { margin-bottom: 14px; }
.lote-campo .campo { width: 100%; }
.lote-limpar { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--texto-suave); cursor: pointer; }
.lote-limpar input { margin: 0; accent-color: var(--accent-marca); }
@media (max-width: 640px) {
  .lote-acoes { margin-left: 0; }
}

/* ── lançar pelo boleto (01/10/2026): solta, escolhe ou cola ───────────── */
.leitor-boleto {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px; flex-shrink: 0;
  background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.leitor-boleto:hover, .leitor-boleto:focus-visible { border-color: var(--accent); outline: none; }
.leitor-boleto.sobre { border-style: solid; border-color: var(--accent); background: var(--accent-fundo); }
.leitor-boleto.lendo { cursor: progress; border-style: solid; }
.leitor-boleto .ico { width: 34px; height: 34px; color: var(--accent-marca); flex-shrink: 0; }
.leitor-boleto .leitor-texto { min-width: 0; }
.leitor-boleto .t { font-size: 15px; font-weight: 700; color: var(--texto); }
.leitor-boleto .d { font-size: 12px; color: var(--texto-suave); margin-top: 3px; line-height: 1.55; max-width: 70ch; }
kbd { font: 600 11px/1 var(--fonte-texto); padding: 2px 5px; border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 3px; background: var(--superficie-alt); color: var(--texto); }
.leitor-estado { margin-left: auto; width: 230px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--texto-suave); }
.leitor-estado:empty { display: none; }
.leitor-estado .barra { height: 3px; background: var(--superficie-alt); margin-top: 6px; overflow: hidden; }
.leitor-estado .barra > div { height: 100%; width: 0; background: var(--accent-marca); transition: width .25s var(--ease-saida); }
.leitor-estado .barra.indefinida > div { width: 35%; animation: dry-vai-e-vem 1.1s ease-in-out infinite alternate; }
@keyframes dry-vai-e-vem { from { transform: translateX(-10%); } to { transform: translateX(200%); } }
@media (prefers-reduced-motion: reduce) { .leitor-estado .barra.indefinida > div { animation: none; width: 100%; opacity: .5; } }
.form-titulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); margin: 0 0 12px; }

/* a revisão: o documento à esquerda, o que vai ser gravado à direita */
.revisao-boleto { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 20px; width: 1080px; max-width: 88vw; }
.revisao-previa { position: sticky; top: 0; align-self: start; max-height: 66vh; overflow: auto; background: var(--superficie-alt); border: 1px solid var(--borda); padding: 8px; }
.revisao-previa canvas, .revisao-previa img { display: block; width: 100%; height: auto; margin-bottom: 8px; border: 1px solid var(--borda); }
.revisao-previa .legenda { font-size: 11px; color: var(--texto-fraco); line-height: 1.45; overflow-wrap: anywhere; }
.revisao-previa .sem-arquivo { padding: 28px 12px; text-align: center; font-size: 12px; color: var(--texto-fraco); }
.revisao-faixa { display: flex; gap: 8px; align-items: baseline; padding: 8px 11px; margin-bottom: 12px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--verde-borda); background: var(--verde-fundo); color: var(--verde); border-radius: var(--raio); }
.revisao-faixa.aviso { border-color: var(--ambar-borda); background: var(--ambar-fundo); color: var(--ambar); }
.revisao-faixa.perigo { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); color: var(--vermelho); }
.revisao-faixa b { font-weight: 700; }
.revisao-tipo { display: flex; gap: 8px; margin-bottom: 12px; }
.revisao-boletos { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 12px; }
.revisao-boletos th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); padding: 4px 6px; border-bottom: 1px solid var(--borda-forte); }
.revisao-boletos td { padding: 5px 6px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.revisao-boletos tr.fora td { opacity: .55; }
.revisao-boletos input.campo { padding: 4px 7px; }
.revisao-boletos .status { font-size: 11px; line-height: 1.35; }
.campo.mono, .mono { font-family: Consolas, ui-monospace, monospace; letter-spacing: .01em; }
.revisao-linha { display: flex; gap: 8px; align-items: center; }
.revisao-linha .campo { flex: 1; }
.selo-dv { font-size: 11px; white-space: nowrap; }
.origem-campo { display: block; font-size: 10.5px; color: var(--texto-fraco); margin-top: 3px; line-height: 1.3; }
.origem-campo.lido { color: var(--verde); }
.origem-campo.conferir { color: var(--ambar); }
.revisao-fornecedor { font-size: 11px; margin-top: 3px; color: var(--texto-fraco); }
@media (max-width: 820px) {
  .revisao-boleto { grid-template-columns: minmax(0, 1fr); }
  .revisao-previa { position: static; max-height: 200px; }
  .leitor-boleto { flex-wrap: wrap; }
  .leitor-estado { width: 100%; margin-left: 50px; text-align: left; }
}

/* o painel do lançamento: abre ao lado ao clicar na linha (por cima da tela, abaixo das janelas) */
.gaveta-fundo { position: fixed; inset: 0; z-index: 110; background: var(--veu); display: flex; justify-content: flex-end; }
/* aberto de dentro da revisão do boleto (uma janela, 130): fica por cima dela, só para consulta */
.gaveta-fundo.sobre-janela { z-index: 135; }
.gaveta { width: 540px; max-width: 100vw; height: 100%; display: flex; flex-direction: column; background: var(--superficie);
  border-left: 1px solid var(--borda-forte); box-shadow: var(--sombra-flutuante); }
.gaveta > .topo { display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--borda); }
.gaveta > .topo .onde { font-size: 11px; color: var(--texto-fraco); margin-right: auto; font-variant-numeric: tabular-nums; }
.gaveta .btn-icone { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.gaveta .btn-icone svg { width: 16px; height: 16px; }
.gaveta > .corpo { flex: 1; overflow: auto; padding: 18px 20px 26px; }
.gaveta > .rodape { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--borda); }
.gaveta .cab { display: flex; align-items: flex-start; gap: 12px; }
.gaveta .cab h2 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.gaveta .cab .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gaveta .valor-grande { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 12px 0 2px; letter-spacing: -.01em; }
.gaveta .valor-grande.entrada { color: var(--verde); }
.gaveta .sob-valor { font-size: 12px; color: var(--texto-suave); }
.gaveta .gv-bloco { margin-top: 20px; }
.gaveta .gv-bloco > h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); margin: 0 0 8px; }
.gaveta dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.gaveta dt { color: var(--texto-fraco); font-size: 12px; }
.gaveta dd { margin: 0; overflow-wrap: anywhere; }
.gaveta .vazio-campo { color: var(--texto-fraco); font-style: italic; }
.gaveta .linha-boleto { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--superficie-alt); border: 1px solid var(--borda); font-size: 12.5px; }
.gaveta .linha-boleto .mono { flex: 1; overflow-wrap: anywhere; }
.gaveta .arquivo { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.gaveta .arquivo:last-child { border-bottom: 0; }
.gaveta .miniatura { width: 92px; min-height: 60px; background: var(--superficie-alt); border: 1px solid var(--borda); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--texto-fraco); overflow: hidden; }
.gaveta .miniatura canvas { display: block; width: 100%; height: auto; }
.gaveta .miniatura:focus-visible { outline: 2px solid var(--accent-marca); }
.gaveta .lista-mini { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.gaveta .lista-mini li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.gaveta .lista-mini li:last-child { border-bottom: 0; }
.gaveta .lista-mini li.atual { font-weight: 700; }
.gaveta .lista-mini .v { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gaveta .lista-mini button.link { text-align: left; }
.gaveta .tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borda); font-size: 12px; }
.gaveta .tempo li { position: relative; padding: 0 0 10px; }
.gaveta .tempo li::before { content: ""; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--accent-marca); }
.gaveta .tempo .q { color: var(--texto-fraco); font-size: 11px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .gaveta { width: 100vw; border-left: 0; }
  .gaveta dl { grid-template-columns: 104px minmax(0, 1fr); }
  .gaveta > .corpo { padding: 16px; }
}

/* ── acessos ────────────────────────────────────────────────────────────── */
.matriz { border-collapse: collapse; width: 100%; }
.matriz th, .matriz td { padding: 5px 8px; font-size: 12px; text-align: left; border-bottom: 1px solid var(--borda); }
.matriz th { font-size: 11px; color: var(--texto-fraco); font-weight: 400; }
.matriz select.campo { padding: 3px 6px; width: auto; }
.matriz .grupo { color: var(--texto-fraco); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
/* o que o perfil vê DENTRO do módulo (Acesso::RECURSOS): uma linha recolhível embaixo do nível */
.matriz tr.com-recursos td { border-bottom: 0; }
.matriz tr.recursos > td { padding: 0 8px 8px; }
.dentro > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-size: 12px; color: var(--accent-claro); padding: 2px 0; }
.dentro > summary::-webkit-details-marker { display: none; }
.dentro > summary::before { content: "▸"; color: var(--texto-fraco); transition: transform 160ms var(--ease-saida, ease-out); }
.dentro[open] > summary::before { transform: rotate(90deg); }
.dentro > summary:focus-visible { outline: 2px solid var(--accent-marca); outline-offset: 2px; }
.dentro .resumo { color: var(--texto-fraco); }
.recursos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 6px 0 2px 16px; }
label.marcar.recurso { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: var(--raio); white-space: normal; }
.marcar.recurso:hover { background: var(--realce); }
.marcar.recurso input { margin-top: 2px; }
.marcar.recurso .t { display: block; font-size: 12px; color: var(--texto); }
.marcar.recurso .d { display: block; font-size: 11px; color: var(--texto-fraco); line-height: 1.35; }
.marcar.recurso:has(input:disabled) { opacity: .5; }
.recursos-atalhos { display: flex; gap: 14px; margin: 2px 0 0 22px; font-size: 11px; }
.perfil-oculto { margin-top: 6px; line-height: 1.5; }
@media (max-width: 640px) { .recursos-grade { grid-template-columns: minmax(0, 1fr); margin-left: 4px; } }
.linha-usuario { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px 120px auto; gap: 8px; align-items: center; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--borda); margin: 3px 0; font-size: 12px; }
.linha-usuario.inativo { opacity: .55; }
.token-novo { background: var(--verde-fundo); border: 1px solid var(--verde-borda); color: var(--verde); padding: 10px 12px; font-family: Consolas, monospace; font-size: 12px; word-break: break-all; }

/* ── componentes de painel, lista e filtro (24/09/2026) ─────────────────── */
/* Barra de filtros: uma linha, acima do conteúdo que ela filtra. `.fixa`
   gruda no topo quando a página rola — os filtros ficam à mão na lista longa. */
.barra-ferramentas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 12px; }
.barra-ferramentas.fixa { position: sticky; top: -16px; z-index: 5; }
.barra-ferramentas .rotulo { margin: 0 2px 0 6px; }
.barra-ferramentas .campo { width: auto; padding: 5px 8px; }
.barra-ferramentas .separador { width: 1px; align-self: stretch; background: var(--borda); margin: 0 4px; }
.campo-busca { position: relative; display: inline-flex; align-items: center; }
.campo-busca svg { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--texto-fraco); pointer-events: none; }
.campo-busca .campo { padding-left: 28px !important; width: 240px; }

/* botões lado a lado de escolha única (Mês | Trimestre | Ano) */
.segmentado { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; flex-shrink: 0; }
.segmentado button { background: transparent; border: 0; border-right: 1px solid var(--borda-forte); color: var(--texto-suave); font-size: 12px; padding: 5px 11px; white-space: nowrap; }
.segmentado button:last-child { border-right: 0; }
.segmentado button:hover { color: var(--accent-claro); background: var(--accent-fundo); }
.segmentado button.ativo { background: var(--accent); color: var(--accent-texto); }
.navegar-mes { display: inline-flex; align-items: center; gap: 2px; }
.navegar-mes .btn { padding: 4px 9px; }
.navegar-mes .rotulo-mes { min-width: 128px; text-align: center; font-weight: 700; font-size: 13px; }

/* chips de filtro rápido (com contagem) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: var(--raio); background: transparent; border: 1px solid var(--borda-forte); color: var(--texto-suave); white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent-claro); }
.chip.ativo { background: var(--accent-fundo); border-color: var(--accent); color: var(--accent-claro); }
.chip .n { font-size: 10px; font-weight: 700; color: var(--texto-fraco); }
.chip.ativo .n { color: var(--accent-claro); }
.chip .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* selo de situação: o ponto colorido + o texto (nunca só a cor) */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 2px 8px 2px 7px; border-radius: var(--raio); background: var(--superficie-alt); color: var(--texto-suave); border: 1px solid var(--borda); }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-fraco); flex-shrink: 0; }
.estado.verde { color: var(--verde); background: var(--verde-fundo); border-color: transparent; }
.estado.verde::before { background: var(--verde); }
.estado.ambar { color: var(--ambar); background: var(--ambar-fundo); border-color: transparent; }
.estado.ambar::before { background: var(--ambar); }
.estado.vermelho { color: var(--vermelho); background: var(--vermelho-fundo); border-color: transparent; }
.estado.vermelho::before { background: var(--vermelho); }
.estado.accent { color: var(--accent-claro); background: var(--accent-fundo); border-color: transparent; }
.estado.accent::before { background: var(--accent); }

/* bloco: o card com cabeçalho (título à esquerda, ação à direita) */
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); display: flex; flex-direction: column; min-width: 0; }
.bloco > .cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; min-height: 36px; }
.bloco > .cab h2 { font-size: 13px; font-weight: 700; }
.bloco > .cab .sub { font-size: 11px; color: var(--texto-fraco); }
.bloco > .cab .acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.bloco > .corpo-bloco { padding: 10px 14px 14px; min-width: 0; }
.bloco > .pe { border-top: 1px solid var(--borda); padding: 8px 14px; font-size: 11px; color: var(--texto-fraco); display: flex; gap: 12px; align-items: center; }

/* a grade do painel: 12 colunas, os blocos dizem quantas ocupam */
.grade-painel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.grade-painel > .c3 { grid-column: span 3; }
.grade-painel > .c4 { grid-column: span 4; }
.grade-painel > .c5 { grid-column: span 5; }
.grade-painel > .c6 { grid-column: span 6; }
.grade-painel > .c7 { grid-column: span 7; }
.grade-painel > .c8 { grid-column: span 8; }
.grade-painel > .c12 { grid-column: span 12; }
@media (max-width: 1280px) {
  .grade-painel > .c3 { grid-column: span 6; }
  .grade-painel > .c4, .grade-painel > .c5 { grid-column: span 6; }
  .grade-painel > .c7, .grade-painel > .c8 { grid-column: span 12; }
}

/* indicador (stat tile): rótulo, número, variação contra o período anterior */
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; }
.kpi .rotulo-kpi { font-size: 11px; color: var(--texto-fraco); display: flex; align-items: center; gap: 6px; }
.kpi .rotulo-kpi .marca-serie { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.kpi .valor-kpi { font-size: 23px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .linha-kpi { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-fraco); min-height: 16px; }
.kpi .delta { font-weight: 700; white-space: nowrap; }
.kpi .delta.bom { color: var(--verde); }
.kpi .delta.ruim { color: var(--vermelho); }
.kpi .delta.neutro { color: var(--texto-suave); }
.kpi .faisca { position: absolute; right: 12px; top: 12px; width: 84px; height: 26px; opacity: .9; }
.kpi.clicavel { cursor: pointer; }
.kpi.clicavel:hover { border-color: var(--accent-borda); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* gráficos em SVG desenhados à mão (graficos.js) */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico .eixo text, .grafico text.eixo { fill: var(--texto-fraco); font-size: 10px; font-family: var(--fonte); }
.grafico .grade-linha { stroke: var(--grade-grafico); stroke-width: 1; }
.grafico .base-linha { stroke: var(--eixo-grafico); stroke-width: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover, .grafico .alvo.foco { fill: var(--realce); }
.grafico .rotulo-valor { fill: var(--texto-suave); font-size: 10px; font-family: var(--fonte); }
.dica { position: absolute; z-index: 20; pointer-events: none; background: var(--superficie-alt); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 8px 10px; font-size: 11px; color: var(--texto); box-shadow: var(--sombra-flutuante); min-width: 150px; white-space: nowrap; }
.dica .t { font-weight: 700; margin-bottom: 4px; }
.dica .l { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dica .l .n { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); }
.dica .l b { font-variant-numeric: tabular-nums; }
.dica .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--texto-suave); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .sw { width: 10px; height: 10px; border-radius: 2px; }
.legenda .sw.linha { height: 2px; border-radius: 0; }

/* barras horizontais com nome, valor e parte do total */
.barras-h { display: flex; flex-direction: column; gap: 2px; }
.barra-h { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 96px 44px; gap: 10px; align-items: center; padding: 4px 6px; border-radius: var(--raio); font-size: 12px; }
.barra-h.clicavel { cursor: pointer; }
.barra-h.clicavel:hover { background: var(--superficie-alt); }
.barra-h .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); }
.barra-h .trilho { height: 10px; background: transparent; position: relative; }
.barra-h .trilho > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; min-width: 2px; }
.barra-h .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-h .p { text-align: right; color: var(--texto-fraco); font-size: 11px; font-variant-numeric: tabular-nums; }
.barra-h.outras .nome { color: var(--texto-fraco); font-style: italic; }

/* tabela moderna: cabeçalho fixo, linhas de 34px, números à direita */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.tabela th { position: sticky; top: 0; z-index: 2; background: var(--superficie); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); padding: 8px 10px; border-bottom: 1px solid var(--borda-forte); white-space: nowrap; }
.tabela td { padding: 7px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover td { background: var(--realce); }
.tabela .d, .tabela th.d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .c, .tabela th.c { text-align: center; }
.tabela .forte-num { font-weight: 700; }
.tabela .fraco { color: var(--texto-fraco); font-size: 11px; }
.tabela .sub-l { display: block; font-size: 11px; color: var(--texto-fraco); margin-top: 1px; }
.tabela .acoes-l { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }
.tabela tr.cancelada td { opacity: .5; }
.tabela .cel-cliente { max-width: 320px; }
.tabela .corta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--borda-forte); background: var(--superficie-alt); }
.envolve-tabela { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; }

/* barra de progresso da obra: medido e recebido sobre o contrato */
.progresso-obra { height: 6px; background: var(--superficie-alt); position: relative; border-radius: 1px; overflow: hidden; margin-top: 4px; }
.progresso-obra > i { position: absolute; left: 0; top: 0; bottom: 0; }
.progresso-obra > i.medido { background: var(--serie-1); opacity: .45; }
.progresso-obra > i.recebido { background: var(--serie-entrada); }

/* a fila do que vence */
.fila { display: flex; flex-direction: column; }
.fila .item-fila { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--borda); font-size: 12px; }
.fila .item-fila:last-child { border-bottom: 0; }
.fila .item-fila.clicavel { cursor: pointer; }
.fila .item-fila.clicavel:hover { background: var(--superficie-alt); }
.fila .quando { font-size: 11px; color: var(--texto-fraco); line-height: 1.2; }
.fila .quando b { display: block; font-size: 12px; color: var(--texto); }
.fila .quando.vermelho b { color: var(--vermelho); }
.fila .quando.ambar b { color: var(--ambar); }
.fila .o-que { min-width: 0; }
.fila .o-que .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .o-que .d { font-size: 11px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .quanto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* despesa por grupo no painel: nome e valor, a barra, e a comparação embaixo */
.grupo-painel { padding: 8px 6px 10px; border-bottom: 1px solid var(--borda); border-radius: var(--raio); }
.grupo-painel:last-child { border-bottom: 0; }
.grupo-painel.clicavel { cursor: pointer; }
.grupo-painel.clicavel:hover { background: var(--superficie-alt); }
.grupo-painel .topo-g { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.grupo-painel .topo-g b { font-variant-numeric: tabular-nums; }
.grupo-painel .trilho-g { height: 8px; margin: 6px 0 5px; position: relative; }
.grupo-painel .trilho-g > i { position: absolute; inset: 0 auto 0 0; background: var(--serie-1); border-radius: 0 3px 3px 0; }
.grupo-painel .pe-g { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--texto-fraco); flex-wrap: wrap; }

/* números pequenos lado a lado (a receber, contas fixas, qualidade) */
.mini-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mini { background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; min-width: 0; }
.mini .r { font-size: 11px; color: var(--texto-fraco); }
.mini .v { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini.clicavel { cursor: pointer; }
.mini.clicavel:hover { border-color: var(--accent-borda); }
.mini.alerta .v { color: var(--vermelho); }
.mini.atencao .v { color: var(--ambar); }

/* a lista do que atrapalha o controle */
.qualidade .item-q { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 12px; }
.qualidade .item-q:last-child { border-bottom: 0; }
.qualidade .item-q .n { width: 52px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.qualidade .item-q .t { flex-grow: 1; min-width: 0; color: var(--texto-suave); }
.qualidade .item-q .t small { display: block; color: var(--texto-fraco); font-size: 11px; }
.qualidade .medidor { width: 70px; height: 5px; background: var(--superficie-alt); flex-shrink: 0; position: relative; }
.qualidade .medidor > i { position: absolute; inset: 0 auto 0 0; background: var(--ambar); }
.qualidade .medidor.ok > i { background: var(--verde); }

/* contas fixas: a matriz do ano */
.matriz-ano { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.matriz-ano th { position: sticky; top: 0; background: var(--superficie); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); padding: 7px 6px; border-bottom: 1px solid var(--borda-forte); font-weight: 700; }
.matriz-ano th.mes-atual { color: var(--accent-claro); }
.matriz-ano td { padding: 3px; border-bottom: 1px solid var(--borda); text-align: center; }
.matriz-ano td.nome { text-align: left; padding: 6px 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.matriz-ano td.nome small { display: block; font-size: 10px; color: var(--texto-fraco); }
.celula-mes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 34px; border-radius: var(--raio); border: 1px solid transparent; background: transparent; color: var(--texto-fraco); font-size: 10px; padding: 2px; }
.celula-mes .ic { font-size: 11px; font-weight: 700; line-height: 1; }
.celula-mes.verde { background: var(--verde-fundo); color: var(--verde); }
.celula-mes.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.celula-mes.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.celula-mes.accent { background: var(--accent-fundo); color: var(--accent-claro); }
.celula-mes.neutro { border-color: var(--borda); }
.celula-mes:hover { border-color: var(--accent); }
.matriz-ano tfoot td { font-weight: 700; font-size: 11px; color: var(--texto-suave); border-top: 1px solid var(--borda-forte); padding: 7px 4px; font-variant-numeric: tabular-nums; }

/* cartão de uma conta fixa no mês */
.cf-linha { display: grid; grid-template-columns: 64px minmax(0, 1fr) 130px 150px auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.cf-linha:last-child { border-bottom: 0; }
.cf-linha .dia { text-align: center; line-height: 1.1; }
.cf-linha .dia b { display: block; font-size: 18px; }
.cf-linha .dia span { font-size: 10px; color: var(--texto-fraco); text-transform: uppercase; }
.cf-linha .nome-cf { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cf-linha .nome-cf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-linha .det-cf { font-size: 11px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-linha .valor-cf { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-linha .valor-cf small { display: block; font-weight: 400; font-size: 10px; color: var(--texto-fraco); }
.cf-linha .acoes-cf { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.cf-linha .sugestao { grid-column: 2 / -1; font-size: 11px; background: var(--accent-fundo); border: 1px solid var(--accent-borda); border-radius: var(--raio); padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.selo-importante { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); border: 1px solid var(--ambar-borda); padding: 0 4px; border-radius: var(--raio); flex-shrink: 0; }

/* cartões de obra */
.obras-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.obra-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.obra-card:hover { border-color: var(--accent-borda); }
.obra-card .topo-obra { display: flex; align-items: flex-start; gap: 10px; }
.obra-card h3 { font-size: 14px; font-weight: 700; margin: 0; }
.obra-card .cliente { font-size: 11px; color: var(--texto-fraco); }
.obra-card .numeros-obra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: 11px; color: var(--texto-fraco); }
.obra-card .numeros-obra b { display: block; font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; }
.obra-card .acoes-obra { display: flex; gap: 6px; margin-top: 2px; }

/* Serviços › Orçamentos do site: um pedido por linha, com o modelo visual do
   projeto ao lado (o mesmo desenho que o visitante viu em orcar.php) */
.site-lista { display: flex; flex-direction: column; gap: 12px; }
.obra-card.com-modelo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 20px; row-gap: 8px; align-content: start; }
.obra-card.com-modelo > :not(.site-modelo) { grid-column: 1; }
.obra-card.com-modelo > .site-modelo { grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.site-modelo .modelo-mini { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 900px) {
  .obra-card.com-modelo { grid-template-columns: minmax(0, 1fr); }
  .obra-card.com-modelo > .site-modelo { grid-column: 1; grid-row: auto; }
}

/* área para soltar arquivos (medição assinada, nota) */
.soltar-arquivos { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 14px; text-align: center; color: var(--texto-fraco); font-size: 12px; cursor: pointer; }
.soltar-arquivos:hover, .soltar-arquivos.sobre { border-color: var(--accent); color: var(--accent-claro); background: var(--accent-fundo); }
.arquivos-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.arquivo-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 8px; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); }
.arquivo-item .nome-arq { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clipe { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent-claro); background: none; border: 0; padding: 0; }
.clipe svg { width: 13px; height: 13px; }
.clipe:hover { text-decoration: underline; }

/* formulário em grade dentro de modal */
.form-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.form-grade-2 .larga { grid-column: 1 / -1; }
.form-grade-2 label.rotulo, .form-grade-4 label.rotulo { display: block; margin-bottom: 4px; }
.form-grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.form-grade-4 .larga { grid-column: 1 / -1; }
.form-grade-4 .dupla { grid-column: span 2; }
.dica-campo { font-size: 11px; color: var(--texto-fraco); margin-top: 3px; }

.vazio-bloco { padding: 26px 16px; text-align: center; color: var(--texto-fraco); font-size: 12px; }
.vazio-bloco .t { color: var(--texto); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.vazio-bloco .btn { margin-top: 12px; }

/* ── telas pequenas ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--barra-linha); }
  .sidebar .menu { flex-direction: row; flex-wrap: wrap; flex-grow: 1; padding: 6px; }
  .menu-grupo { display: none; }
  .menu-item { width: auto; }
  .sidebar .rodape { display: none; }
  .topo { padding: 6px 12px; height: auto; min-height: 48px; flex-wrap: wrap; gap: 8px 10px; }
  .topo .usuario { margin-left: auto; gap: 8px; }
  .topo .usuario > div, .topo #btn-trocar-senha { display: none; }   /* no celular: avatar + Sair */
  .marca img { width: 32px; height: 32px; }
  .marca .rotulo { font-size: 12px; letter-spacing: .12em; }
  .marca-lateral { padding: 10px 12px; border: 0; margin: 0; }
  .hall-topo { padding: 0 12px; gap: 10px; }
  .hall-topo .usuario { gap: 8px; }
  .hall-topo .usuario > div, .hall-topo #btn-trocar-senha-hall { display: none; }
  .hall-corpo { padding: 24px 16px; }
  .hall-corpo h1 { font-size: 21px; }
  .login-fundo { align-items: flex-start; padding: 32px 16px 24px; }
  .login-caixa { width: 100%; }
  .login { padding: 24px 20px 20px; }
  .login .voltar-site { margin: 18px -20px -20px; padding: 14px 20px; }
  /* barras de ferramentas e colunas das abas: quebram linha e empilham,
     sem mexer no HTML de cada aba */
  .tela .linha { flex-wrap: wrap; }
  .tela .linha.cresce { flex-direction: column; flex-wrap: nowrap; align-items: stretch !important; }
  .tela .linha.cresce > *, .tela .corpo.linha > * { min-width: 0; }
  .tela section.card, .tela aside.card { width: auto !important; min-width: 0; }
  .tela .card.coluna, .tela aside.card, .tela .card.lista { max-height: 60vh; }
  .tela .busca { flex-basis: 100%; }
  .tela .titulo h1 { font-size: 19px; }
  .tela .abas { flex-wrap: wrap; }
  .tela .abas .resto { display: none; }
  .tela .aba { padding: 8px 12px; }
  .app { width: 100%; }   /* 100vw conta a barra de rolagem e sobra 10px de rolagem horizontal */
  /* a grade do cartão de ponto: colunas mais justas e, se ainda faltar, rola dentro dela */
  .grade-ponto { grid-template-columns: 36px 50px 50px 50px 50px 52px 64px; overflow-x: auto; }
  .ponto-cartao { grid-template-columns: 1fr; }
  .ponto-lateral { position: static; max-height: 60vh; }
  .grade-ponto.cabecalho { position: static; }
  .tela .lista { overflow-x: auto; }
  .area { position: static; }
  .tela { position: static; padding: 16px; }
  .tela > .corpo.linha { flex-direction: column; }
  .servicos-lado { width: auto; }
  .servicos-levantamento { height: auto; }
  .amb-linha { grid-template-columns: minmax(0, 1fr) 62px 62px 62px 26px; gap: 4px; padding: 3px 8px; }
  .mat-linha { grid-template-columns: minmax(0, 1fr) 62px 70px 70px 84px; gap: 5px; padding: 3px 8px; }
  .mat-totais { padding: 10px 8px; }
  .solta.com-cotas { max-height: 160px; }
  .rel-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-3, .form-2 { grid-template-columns: 1fr; }
  .form-3 .celula.larga, .form-2 .celula.larga { grid-column: span 1; }
  .linha-usuario { grid-template-columns: 1fr 1fr; }
  /* painel, contas fixas, notas e obras numa coluna só */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grade-painel > * { grid-column: 1 / -1 !important; }
  .barra-ferramentas.fixa { position: static; }
  .abrir-busca { width: auto; max-width: none; flex: 1 1 auto; }
  .abrir-busca .texto-busca, .abrir-busca kbd { display: none; }
  .trilha .passo-trilha:not(.atual), .trilha .barra-trilha { display: none; }
  .cf-linha { grid-template-columns: 48px minmax(0, 1fr); }
  .cf-linha .valor-cf { text-align: left; }
  .cf-linha > div:nth-child(n+3) { grid-column: 2; }
  .cf-linha .acoes-cf { justify-content: flex-start; }
  .tela > .titulo { grid-template-columns: 1fr; }
  .tela > .titulo > .titulo-acoes { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  .sidebar .menu-item .corpo { padding: 6px 0; }
  .sidebar .menu-grupo { display: none; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr !important; }
  .barra-h { grid-template-columns: minmax(0, 1fr) 70px 88px; }
  .barra-h .p { display: none; }
  .obras-grade { grid-template-columns: 1fr; }
}

/* ── movimento (28/09/2026): dinâmico e discreto ─────────────────────────
   Tudo curto, só transform/opacity, e nada disso roda para quem pede menos
   movimento no sistema. O que se usa o dia inteiro pelo teclado (paleta
   Ctrl+K, digitação) não anima. Nenhuma regra aqui muda layout nem esconde
   nada de vez: o estado final de toda animação é o elemento como sempre foi. */
@media (prefers-reduced-motion: no-preference) {
  /* troca de tela e de sub-tela: entra com um deslize curto */
  .tela.ativa > .titulo { animation: dry-entra 240ms var(--ease-saida) both; }
  .tela.ativa > .corpo { animation: dry-entra 280ms var(--ease-saida) 40ms both; }
  .sub-tela.ativa { animation: dry-entra 240ms var(--ease-saida) both; }
  /* login e hall: a primeira coisa que se vê depois de abrir o sistema */
  .login-fundo:not(.escondido) .login-caixa { animation: dry-entra 420ms var(--ease-saida) both; }
  .hall:not(.escondido) .hall-corpo > h1,
  .hall:not(.escondido) .hall-corpo > .sub { animation: dry-entra 380ms var(--ease-saida) both; }
  .hall:not(.escondido) .pend,
  .hall:not(.escondido) .setor-card { animation: dry-entra 420ms var(--ease-saida) both; }
  .hall .lista-pend .pend:nth-child(2), .hall .setores .setor-card:nth-child(2) { animation-delay: 45ms; }
  .hall .lista-pend .pend:nth-child(3), .hall .setores .setor-card:nth-child(3) { animation-delay: 90ms; }
  .hall .lista-pend .pend:nth-child(4), .hall .setores .setor-card:nth-child(4) { animation-delay: 135ms; }
  .hall .lista-pend .pend:nth-child(5), .hall .setores .setor-card:nth-child(5) { animation-delay: 180ms; }
  .hall .lista-pend .pend:nth-child(n+6), .hall .setores .setor-card:nth-child(n+6) { animation-delay: 225ms; }
  /* números do painel em cascata; gráfico: colunas crescem da base, a linha se traça */
  .kpis > * { animation: dry-entra 360ms var(--ease-saida) both; }
  .kpis > :nth-child(2) { animation-delay: 40ms; }
  .kpis > :nth-child(3) { animation-delay: 80ms; }
  .kpis > :nth-child(4) { animation-delay: 120ms; }
  .kpis > :nth-child(n+5) { animation-delay: 160ms; }
  .grafico svg.anima .barra { transform-box: fill-box; transform-origin: 50% 100%; animation: dry-cresce 560ms var(--ease-saida) both; animation-delay: calc(var(--i, 0) * 28ms); }
  .grafico svg.anima .barra.neg { transform-origin: 50% 0; }
  .grafico svg.anima .traco, .faisca .traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dry-traca 900ms var(--ease-saida) 220ms forwards; }
  .grafico svg.anima .ponto { animation: dry-surge 260ms ease-out both; animation-delay: calc(420ms + var(--i, 0) * 30ms); }
  .faisca .ponto { animation: dry-surge 260ms ease-out 900ms both; }
  .barra-h .trilho > i, .grupo-painel .trilho-g > i { transform-origin: left; animation: dry-cresce-h 600ms var(--ease-saida) both; }
  /* janela e aviso: aparecem, não pulam na tela */
  .modal-fundo { animation: dry-surge 160ms ease-out both; }
  .modal { animation: dry-janela 200ms var(--ease-saida) both; }
  /* o painel do lançamento entra pela direita, de onde ele vem */
  .gaveta-fundo { animation: dry-surge 160ms ease-out both; }
  .gaveta { animation: dry-gaveta 240ms var(--ease-saida) both; }
  .gaveta > .corpo.troca { animation: dry-surge 180ms ease-out both; }
  .toast { animation: dry-janela 200ms var(--ease-saida) both; }
}
@keyframes dry-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes dry-janela { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes dry-gaveta { from { opacity: 0; transform: translateX(28px); } }
@keyframes dry-surge { from { opacity: 0; } }
@keyframes dry-cresce { from { transform: scaleY(0); } }
@keyframes dry-cresce-h { from { transform: scaleX(0); } }
@keyframes dry-traca { to { stroke-dashoffset: 0; } }
/* troca de tema: o novo tema se abre em círculo a partir do botão (app.js,
   View Transitions); aqui só se desliga o cross-fade padrão do navegador */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── Financeiro › Produção (07/10/2026): a folha do mês como grade ──────── */
.params-prod { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; }
.params-prod .param-prod { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); }
.params-prod .param-prod .campo { padding: 4px 8px; text-align: right; }
.params-prod .fraco { color: var(--texto-fraco); font-size: 11px; }
.tabela-producao td { padding: 4px 3px; vertical-align: top; }
.tabela-producao th { padding: 8px 3px; }
.tabela-producao td:first-child, .tabela-producao th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 160px; max-width: 200px; padding-left: 10px; }
.tabela-producao thead th:first-child { z-index: 3; }
.tabela-producao tfoot td:first-child { background: var(--superficie-alt); }
.tabela-producao .nome-prod { padding-top: 7px; }
.tabela-producao .nome-prod .corta { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; }
.cel-prod { width: 82px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-align: right; padding: 4px 6px; font: inherit; font-variant-numeric: tabular-nums; border-radius: var(--raio); outline: none; caret-color: var(--accent-claro); }
.cel-prod.dias { width: 38px; text-align: center; }
.cel-prod:focus { border-color: var(--accent); }
.cel-prod::placeholder { color: var(--texto-fraco); }
.cel-prod:read-only { background: var(--superficie-alt); color: var(--texto-suave); }
.cel-prod.erro { border-color: var(--vermelho); color: var(--vermelho); }
.tabela-producao .calc { display: block; min-height: 13px; font-size: 10px; color: var(--texto-fraco); text-align: right; white-space: nowrap; }
.tabela-producao .total-prod { display: inline-block; padding-top: 5px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabela-producao .total-prod.negativo { color: var(--vermelho); }
.tabela-producao .sit-prod { padding-top: 7px; white-space: nowrap; }
.chips-fin { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; max-width: 82px; margin-left: auto; }
.chip-fin { font: inherit; font-size: 10px; line-height: 16px; border: 1px solid var(--accent-borda); color: var(--accent-claro); background: var(--accent-fundo); padding: 0 5px; border-radius: var(--raio); cursor: pointer; white-space: nowrap; }
.chip-fin:disabled { cursor: default; opacity: .7; }
.chip-fin.fraco { border-color: var(--borda); color: var(--texto-fraco); background: transparent; cursor: help; }
.selo-cesta { font-size: 10px; font-weight: 600; color: var(--ambar); background: var(--ambar-fundo); padding: 0 5px; border-radius: var(--raio); margin-left: 6px; white-space: nowrap; }
.lancar-prod .lista-lancar { max-height: 46vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.lancar-prod .item-lancar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--borda); font-size: 12px; cursor: pointer; }
.lancar-prod .item-lancar:last-child { border-bottom: 0; }
.lancar-prod .aviso-lancar { flex-basis: 100%; font-size: 11px; color: var(--ambar); padding-left: 24px; }
@media (max-width: 640px) {
  .tabela-producao td:first-child, .tabela-producao th:first-child { min-width: 120px; max-width: 140px; }
  .params-prod .fraco.cresce { display: none; }
}
/* notas de célula (o comentário do Excel): o canto marcado e o balão ao passar o mouse */
.tabela-producao td { position: relative; }   /* o cabeçalho já é sticky (posicionado): o canto da nota funciona nele também */
.tabela-producao td:first-child { position: sticky; }
.tabela-producao .tem-nota::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent var(--ambar) transparent transparent; pointer-events: none; }
.balao-prod { position: fixed; z-index: 400; max-width: 340px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-flutuante); padding: 10px 12px; font-size: 12px; line-height: 1.45; pointer-events: none; }
.balao-prod .titulo-balao { font-weight: 700; margin-bottom: 4px; }
.balao-prod .nota-balao { background: var(--ambar-fundo); border-left: 3px solid var(--ambar); padding: 6px 8px; margin: 4px 0; white-space: normal; overflow-wrap: anywhere; color: var(--texto); }
.balao-prod .conta-balao { font-family: Consolas, ui-monospace, monospace; font-size: 11px; color: var(--texto-suave); margin-top: 4px; }
.balao-prod .soma-balao { border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 3px; color: var(--texto); }
.balao-prod .dica-balao { margin-top: 6px; font-size: 10px; color: var(--texto-fraco); }
.tabela-producao .fixo-prod { color: var(--ambar); font-weight: 600; }
.tabela-producao .total-prod { cursor: default; }
.aviso-prod { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--accent-fundo); border: 1px solid var(--accent-borda); color: var(--texto); border-radius: var(--raio); padding: 8px 12px; margin-bottom: 12px; font-size: 12px; }
.aviso-prod > span { flex: 1 1 320px; }
.tabela-antiga td.col-paga, .tabela-antiga th.col-paga { background: var(--accent-fundo); }
.tabela-antiga td { white-space: nowrap; }
.legenda .sw.col-paga-sw { background: var(--accent-fundo); border: 1px solid var(--accent-borda); }
.notas-linha { margin-top: 10px; padding: 8px 10px; background: var(--ambar-fundo); border-radius: var(--raio); font-size: 12px; display: grid; gap: 4px; }
/* envelopes: o texto de cada um para conferir antes de imprimir */
.envelopes-prod .lista-envelopes { max-height: 52vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.envelopes-prod .item-envelope { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-bottom: 1px solid var(--borda); cursor: pointer; font-size: 11px; line-height: 1.45; }
.envelopes-prod .item-envelope:last-child { border-bottom: 0; }
.envelopes-prod .item-envelope input { margin-top: 2px; }
.envelopes-prod .item-envelope.sem-valor { opacity: .6; }
.envelopes-prod .texto-envelope { -webkit-user-select: text; user-select: text; }

/* ── Caixa de entrada (Financeiro): uma fila de boletos para lançar ───────────────────────────
   Uma linha por boleto: quem · quanto · quando vence · Lançar. Só tokens do tema. */
.cx-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cx-saude { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-suave); }
.cx-saude i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex-shrink: 0; }
.cx-saude.ruim i { background: var(--vermelho); }
.cx-saude.atencao i { background: var(--ambar); }
.cx-saude.buscando i { background: var(--accent-marca); animation: cx-pulsa 1.1s ease-in-out infinite; }
@keyframes cx-pulsa { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cx-saude.buscando i { animation: none; } }
.cx-aviso { border: 1px solid var(--vermelho-borda, var(--vermelho)); background: var(--vermelho-fundo); color: var(--texto); padding: 9px 14px; font-size: 13px; margin-bottom: 12px; }
.cx-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 0; }
.cx-aba { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 16px; font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.cx-aba:hover { color: var(--texto); }
.cx-aba.ativa { color: var(--texto); border-bottom-color: var(--accent-marca); }
.cx-aba .n { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--superficie-alt); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cx-aba .n.alvo { background: var(--accent-fundo); color: var(--accent-claro); }
.cx-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.cx-chip { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: transparent; color: var(--texto-suave); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.cx-chip:hover { border-color: var(--accent-borda); color: var(--texto); }
.cx-chip.ativo { background: var(--accent-fundo); border-color: var(--accent-borda); color: var(--accent-claro); }
.cx-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.cx-chip.pendente i { background: var(--ambar); }
.cx-chip.sem i { background: var(--borda-forte); }
.cx-fila { border: 1px solid var(--borda); background: var(--superficie); }
.cx-linha { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px auto; gap: 16px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--borda); }
.cx-linha:last-child { border-bottom: 0; }
.cx-linha:hover { background: var(--superficie-alt); }
.cx-linha.pronto { cursor: pointer; }
.cx-quem { min-width: 0; }
.cx-quem b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-quem small { display: block; font-size: 12px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fora { color: var(--ambar); font-size: 11px; font-weight: 400; margin-left: 6px; }
.cx-valor { text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-valor small { display: block; font-size: 11px; font-weight: 400; color: var(--texto-fraco); }
.cx-venc { font-size: 13px; white-space: nowrap; }
.cx-venc small { display: block; font-size: 11px; color: var(--texto-fraco); }
.cx-venc.vencido, .cx-venc.vencido small { color: var(--vermelho); }
.cx-venc.logo, .cx-venc.logo small { color: var(--ambar); }
.cx-acoes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.cx-alerta { grid-column: 1 / -1; font-size: 12px; color: var(--ambar); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-linha.lendo .cx-quem b, .cx-linha.lendo .cx-valor, .cx-linha.lendo .cx-venc { color: var(--texto-fraco); font-weight: 400; }
.cx-mais { position: relative; }
.cx-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 170px; background: var(--superficie); border: 1px solid var(--borda-forte); padding: 4px; display: flex; flex-direction: column; }
.cx-menu button { text-align: left; background: none; border: 0; font: inherit; font-size: 13px; padding: 7px 10px; color: var(--texto); cursor: pointer; }
.cx-menu button:hover { background: var(--superficie-alt); }
.cx-grupo { margin-top: 14px; }
.cx-grupo > summary { cursor: pointer; font-size: 13px; color: var(--texto-suave); padding: 6px 0; }
.cx-vazio { padding: 38px 16px; text-align: center; color: var(--texto-suave); }
.cx-vazio b { display: block; font-size: 16px; color: var(--texto); margin-bottom: 4px; }
.cx-desfazer { position: sticky; bottom: 12px; margin-top: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--texto); color: var(--superficie); padding: 9px 14px; font-size: 13px; }
.cx-desfazer button { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cx-manual { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.cx-manual:last-child { border-bottom: 0; }
.cx-manual label { display: flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 13px; cursor: pointer; }
.cx-manual.feito { color: var(--texto-fraco); }
@media (max-width: 860px) {
  .cx-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .cx-valor { text-align: right; }
  .cx-venc { grid-column: 1; }
  .cx-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}