/* ============================================================
   ALUGUEL 2 — o visual inteiro mora aqui.

   POR QUE UM CSS SÓ, SEPARADO: no aluguel1 o estilo vive dentro do
   painel.html de 472 KB, junto com engine e telas. Toda vez que se mexe
   numa cor abre-se o arquivo do sistema inteiro. Aqui o visual é um
   arquivo que ninguém precisa abrir pra mexer em cálculo — e vice-versa.

   ⚠️ DARK MODE — a lição de 10/09/2026, com foto.
   O Chrome do André roda com dark mode FORÇADO. O aluguel1 se declara
   `color-scheme:light`, e por isso o Chrome conclui que a página não sabe
   se virar no escuro e inverte tudo à força — foi isso que sempre lavou as
   cores chapadas dele (daí o hábito de pintar tudo com gradiente, que o
   inversor não mexe).

   Aqui a saída é outra e é definitiva: a página declara
   `color-scheme: light dark` e TRAZ a própria paleta escura, logo abaixo.
   O Chrome então tira a mão e quem manda no escuro é este arquivo.

   ⚠️ MAS ATENÇÃO — testado na tela dele em 10/09/2026, com foto:
   o Chrome do André force-darkeia MESMO ASSIM. Medido no próprio painel:
   TODO elemento recebe `background-color: rgb(33,33,31)` injetado, e TODO
   texto vira `rgb(255,255,255)`. O `light dark` fica valendo para telas
   honestas (celular, outro PC); na dele, não adianta.

   Daí as três regras que mandam neste arquivo:

   1. SUPERFÍCIE GRANDE É CHAPADA (fundo da página, lateral, cartão,
      moldura). Nunca gradiente. Motivo: o force-dark pinta o MESMO cinza
      em todos os elementos, inclusive nos `<p>` de dentro. Se o pai tem
      gradiente e o filho leva cinza chapado, aparece uma FAIXA atrás de
      cada texto — foi exatamente o que aconteceu na primeira versão desta
      tela. Chapado em cima de chapado = tudo igual, sem faixa. A separação
      entre cartão e fundo passa a vir da BORDA, que sobrevive.
   2. ELEMENTO COLORIDO PEQUENO É GRADIENTE (chip, item ativo do menu,
      selo). Gradiente é imagem, e imagem o inversor não reescreve — é a
      única cor que chega inteira na tela dele.
   3. EMOJI CARREGA SIGNIFICADO. Como todo texto vira branco, a hierarquia
      não pode depender de `--dim` × `--muted`: ela vem de tamanho, peso,
      caixa alta e emoji.

   Toda cor nasce como token no `:root` e é REDEFINIDA no bloco escuro.
   Nunca definir uma cor só dentro do @media — no claro ela some.
   ============================================================ */

:root{
  color-scheme: light dark;

  /* ---- CLARO — paleta herdada do aluguel1 de propósito: os dois sistemas
     vão conviver por meses e trocar de aba não pode parecer trocar de
     empresa. ---- */
  --bg:#f5f3ee; --bg2:#efece4;
  --card:#ffffff; --card2:#f6f4ed;
  --border:#e4e0d4; --border2:#d2cdbf;
  --text:#33302a; --dim:#6e6a5f; --muted:#9b968a;
  --accent:#1f7a68; --success:#2f8a57; --warning:#b9770e;
  --danger:#c34a3e; --info:#33648f; --roxo:#6d5aa8;

  --grad-accent:linear-gradient(135deg,#1f7a68,#2f9c86);
  --grad-info:linear-gradient(135deg,#33648f,#4a7fae);
  --grad-ciano:linear-gradient(135deg,#0e7f8c,#26a0ad);
  --grad-success:linear-gradient(135deg,#2f8a57,#45a06a);
  --grad-warning:linear-gradient(135deg,#b9770e,#d29128);
  --grad-danger:linear-gradient(135deg,#a8392e,#c34a3e);
  --grad-roxo:linear-gradient(135deg,#6d5aa8,#8a76c4);
  --grad-head:linear-gradient(135deg,#4a463f,#5b564d);

  --sombra:0 1px 2px rgba(60,55,45,.05),0 4px 16px rgba(60,55,45,.06);
  --sombra-alta:0 2px 6px rgba(60,55,45,.08),0 12px 32px rgba(60,55,45,.10);
  --raio:14px;
}

/* ---- ESCURO — mesma família, papel virado noite. Só os tokens mudam;
   nenhuma regra de layout se repete aqui embaixo. ---- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171512; --bg2:#1b1916;
    --card:#221f1b; --card2:#2a2621;
    --border:#37322b; --border2:#4a443b;
    --text:#ece7dc; --dim:#b0a898; --muted:#847d70;
    --accent:#3fae96; --success:#5cb782; --warning:#d9a13f;
    --danger:#e0776a; --info:#6b9dc9; --roxo:#a08fd4;

    --grad-accent:linear-gradient(135deg,#1f7a68,#35a08a);
    --grad-info:linear-gradient(135deg,#2e5c84,#4a7fae);
    --grad-ciano:linear-gradient(135deg,#0d6f7b,#1f8f9c);
    --grad-success:linear-gradient(135deg,#2b7d4f,#3f9a63);
    --grad-warning:linear-gradient(135deg,#a76a10,#c98c24);
    --grad-danger:linear-gradient(135deg,#9d3527,#c05243);
    --grad-roxo:linear-gradient(135deg,#5f4e97,#7d69b4);
    --grad-head:linear-gradient(135deg,#4f483d,#645c4e);

    --sombra:0 1px 2px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.30);
    --sombra-alta:0 2px 6px rgba(0,0,0,.34),0 12px 32px rgba(0,0,0,.40);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  color:var(--text);
  /* chapado de propósito — ver regra 1 no topo */
  background:var(--bg);
}
button{font-family:inherit}

/* ============================================================
   ESQUELETO — barra lateral fixa + área da tela
   ============================================================ */
.layout{display:flex;min-height:100vh;align-items:stretch}

.sidebar{
  width:238px;flex:0 0 238px;
  background:var(--card);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:16px 12px 12px;box-shadow:var(--sombra);
}

/* -------- marca -------- */
.marca{padding:2px 8px 0;line-height:1.1}
.marca .nome{font-size:20px;font-weight:800;letter-spacing:.2px}
.marca .nome b{
  background-image:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.marca .sub{
  display:block;margin-top:3px;
  font-size:9.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);
}

/* -------- seletor de imóvel --------
   Fica no TOPO, acima do menu, porque a pergunta "de qual imóvel a gente
   está falando?" vem antes de qualquer outra. Este sistema nasce servindo
   dois prédios (São Martinho e Cambuí); esconder isso num canto seria
   repetir o erro de tratar um imóvel como se fosse o mundo. */
.sel-imovel{display:flex;flex-direction:column;gap:4px}
.sel-imovel > .rot{
  padding:0 10px;font-size:9px;font-weight:800;letter-spacing:1.1px;
  color:var(--muted);text-transform:uppercase;
}
.imovel{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;
  padding:8px 10px;background:var(--card2);
  font-size:13px;font-weight:700;color:var(--dim);
  text-align:left;width:100%;line-height:1.2;
}
.imovel:hover{border-color:var(--border2);color:var(--text)}
.imovel .emoji{font-size:15px;flex:0 0 18px;text-align:center}
.imovel small{display:block;font-size:9px;font-weight:600;opacity:.75;letter-spacing:.3px}
.imovel.on{
  color:#fff;border-color:transparent;background-image:var(--grad-accent);
  box-shadow:var(--sombra);
}
.imovel.on small{opacity:.85}

/* -------- menu -------- */
.menu{display:flex;flex-direction:column;gap:3px}
.menu > .rot{
  padding:2px 10px 3px;font-size:9px;font-weight:800;letter-spacing:1.1px;
  color:var(--muted);text-transform:uppercase;
}
/* grupos do menu (07/10/2026): separação visível entre painel, banco e sistema */
.menu > .rot + .item{margin-top:0}
.menu > .item + .rot{margin-top:12px;padding-top:8px;border-top:1px solid var(--border)}
.item{
  display:flex;align-items:center;gap:9px;cursor:pointer;width:100%;
  border:1px solid transparent;border-radius:9px;background:none;
  padding:7px 10px;font-size:13px;font-weight:700;color:var(--dim);
  text-align:left;line-height:1.25;
}
.item:hover{background:var(--card2);color:var(--text)}
.item .emoji{width:19px;flex:0 0 19px;text-align:center;font-size:14px}
.item small{display:block;font-size:9px;font-weight:600;opacity:.7;letter-spacing:.2px}
.item.on{color:#fff;border-color:transparent;box-shadow:var(--sombra)}
.item.on.inicio{background-image:var(--grad-head)}
.item.on.leituras{background-image:var(--grad-ciano)}

/* -------- rodapé da lateral -------- */
.rodape{
  margin-top:auto;padding:10px 10px 0;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--muted);line-height:1.45;
}
.rodape b{color:var(--dim)}

/* ============================================================
   ÁREA DA TELA
   ============================================================ */
.main{flex:1;min-width:0;padding:26px 30px 70px;max-width:1180px}

.cabeca{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cabeca h1{margin:0;font-size:23px;font-weight:800;letter-spacing:.2px;line-height:1.2}
.cabeca .desc{margin:5px 0 0;font-size:12.5px;color:var(--dim);max-width:62ch;line-height:1.5}
.cabeca .selo{
  margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.8px;
  padding:5px 12px;border-radius:999px;color:#fff;
  background-image:var(--grad-warning);white-space:nowrap;box-shadow:var(--sombra);
}

/* -------- barra do mês --------
   Mês é MM/AAAA e é SEMPRE o mês do CONSUMO (regra do aluguel1 — a régua
   do vencimento é outra coisa e quem responde por ela é engine, não tela). */
.mesbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-radius:var(--raio);
  padding:11px 16px;margin:0 0 22px;box-shadow:var(--sombra);
}
.mesbar .seta{
  background:var(--card2);border:1px solid var(--border);color:var(--text);
  font-size:16px;font-weight:800;width:36px;height:36px;border-radius:10px;cursor:pointer;
}
.mesbar .seta:hover{border-color:var(--accent);color:var(--accent)}
.mesbar .qual{display:flex;flex-direction:column;line-height:1.25}
.mesbar .qual .m{font-size:18px;font-weight:800}
.mesbar .qual .s{font-size:11px;color:var(--dim)}
.mesbar .hoje{
  margin-left:auto;font-size:11.5px;color:var(--muted);
  background:none;border:1px solid transparent;border-radius:8px;
  padding:5px 10px;cursor:pointer;font-weight:700;
}
.mesbar .hoje:hover{border-color:var(--border);color:var(--dim)}

/* -------- títulos de seção -------- */
h2.sec{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);margin:30px 0 12px;font-weight:800;
}

/* -------- cartão -------- */
.cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--raio);
  padding:18px 20px;box-shadow:var(--sombra);
}

/* -------- VAZIO — o estado padrão deste projeto hoje --------
   Não é erro nem "carregando": é a moldura esperando a engine.
   Tracejado de propósito, pra ninguém confundir espaço reservado com
   dado de verdade que zerou. */
.vazio{
  border:1.5px dashed var(--border2);border-radius:var(--raio);
  background:var(--card2);
  padding:40px 26px;text-align:center;
}
.vazio .icone{font-size:30px;line-height:1;opacity:.75}
.vazio .titulo{margin:12px 0 0;font-size:15px;font-weight:800;color:var(--dim)}
.vazio .texto{
  margin:8px auto 0;font-size:12.5px;color:var(--muted);
  max-width:56ch;line-height:1.6;
}
.vazio code{
  background:var(--card2);border:1px solid var(--border);border-radius:5px;
  padding:1px 5px;font-size:11.5px;color:var(--dim);
}

/* ============================================================
   RESPONSIVO — a lateral vira faixa em cima
   ============================================================ */
@media(max-width:900px){
  .layout{flex-direction:column}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;
    padding:12px;gap:10px;
  }
  .menu,.sel-imovel{flex-direction:row;flex-wrap:wrap;gap:6px}
  .menu > .rot,.sel-imovel > .rot{display:none}
  .item,.imovel{flex:1 1 auto;width:auto;justify-content:center}
  .rodape{margin-top:6px}
  .main{padding:18px 16px 50px}
  .cabeca .selo{margin-left:0}
}

/* ============================================================
   PEÇAS DE DADO — tabela, chips, avisos.
   Lembrete das regras do topo: superfície grande CHAPADA (senão o
   force-dark do Chrome cria faixa atrás de cada texto); cor só em
   elemento pequeno, e sempre com background-image (gradiente).
   ============================================================ */

/* -------- selo do imóvel em foco (canto do cabeçalho) -------- */
.cabeca .selo-imovel{
  margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.5px;
  padding:6px 14px;border-radius:999px;color:#fff;white-space:nowrap;
  background-image:var(--grad-accent);box-shadow:var(--sombra);
}

/* -------- botões que abrem um bloco dentro da tela -------- */
.subs{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 20px}
.sub-btn{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;font-size:13.5px;font-weight:700;color:var(--dim);
  text-align:left;line-height:1.25;box-shadow:var(--sombra);
}
.sub-btn:hover{border-color:var(--border2);color:var(--text)}
.sub-btn .emoji{font-size:17px}
.sub-btn small{display:block;font-size:9.5px;font-weight:600;opacity:.75}
.sub-btn.on{color:#fff;border-color:transparent;background-image:var(--grad-ciano)}

/* -------- chips de resumo -------- */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.chip{
  font-size:11px;font-weight:800;letter-spacing:.3px;
  padding:4px 11px;border-radius:999px;color:#fff;white-space:nowrap;
}
.chip.info{background-image:var(--grad-info)}
.chip.luz,.chip.warning{background-image:var(--grad-warning)}
.chip.agua,.chip.ciano{background-image:var(--grad-ciano)}
.chip.roxo{background-image:var(--grad-roxo)}
.chip.head{background-image:var(--grad-head)}
.chip.ok{background-image:var(--grad-success)}

/* -------- aviso (amarelo) e erro (vermelho) -------- */
.aviso{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--warning);border-radius:12px;
  padding:14px 16px;margin:0 0 18px;font-size:12.5px;line-height:1.6;
  box-shadow:var(--sombra);
}
.aviso .ic{font-size:20px;line-height:1.2}

.erro{
  background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--danger);border-radius:var(--raio);
  padding:26px 24px;box-shadow:var(--sombra);
}
.erro .icone{font-size:28px;line-height:1}
.erro .titulo{margin:10px 0 0;font-size:16px;font-weight:800}
.erro .texto{margin:8px 0 0;font-size:12.5px;line-height:1.6;max-width:66ch}

.btn{
  margin-top:14px;cursor:pointer;border:1px solid transparent;border-radius:9px;
  padding:8px 16px;font-size:12.5px;font-weight:800;color:#fff;
  background-image:var(--grad-accent);box-shadow:var(--sombra);
}

/* -------- tabela --------
   A rolagem horizontal fica NUM container próprio: a página em si nunca
   rola de lado, nem no celular. */
.tabela-rolagem{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--raio);
  background:var(--card);box-shadow:var(--sombra);
}
.tabela{border-collapse:collapse;width:100%;font-size:12.5px;min-width:760px}
.tabela th{
  text-align:left;font-size:9.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--border2);white-space:nowrap;
}
.tabela td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:none}
.tabela tbody tr:hover{background:var(--card2)}
.cel-casa{font-weight:800;white-space:nowrap}
.cel-num{white-space:nowrap}
.cel-num b{font-size:14px}
.cel-num small{color:var(--muted);font-size:10.5px;font-weight:600}
.cel-dim{color:var(--dim);font-size:11.5px}

/* linha cujo valor repete uma leitura anterior */
.tabela tr.rep td{background:rgba(185,119,14,.07)}
.tag-rep{
  display:inline-block;font-size:10px;font-weight:800;white-space:nowrap;
  padding:3px 9px;border-radius:999px;color:#fff;
  background-image:var(--grad-warning);
}

.btn-foto{
  display:inline-block;text-decoration:none;font-size:10.5px;font-weight:800;
  padding:3px 10px;border-radius:999px;color:#fff;white-space:nowrap;
  background-image:var(--grad-info);
}
.btn-foto:hover{filter:brightness(1.12)}

.nota-rodape{
  margin:12px 2px 0;font-size:11px;color:var(--muted);line-height:1.6;max-width:80ch;
}
.nota-rodape code{
  background:var(--card2);border:1px solid var(--border);border-radius:5px;
  padding:1px 5px;font-size:10.5px;
}

.rodape a{cursor:pointer;text-decoration:none;font-weight:700}

/* -------- etiqueta de COMO a leitura entrou --------
   👤 lida · ✍️ ajuste · 🤖 estimada. A estimada é âmbar de propósito:
   é a única que NÃO é medição, e essa diferença não pode passar batida. */
.tag-tipo{
  display:inline-block;font-size:10px;font-weight:800;white-space:nowrap;
  padding:3px 9px;border-radius:999px;color:#fff;
  background-image:var(--grad-head);
}
.tag-tipo.estimada{background-image:var(--grad-warning)}
.tag-tipo.ajuste{background-image:var(--grad-roxo)}
.tag-trava{font-size:11px;opacity:.85}

/* ============================================================
   🗓️ GRADE casa × rodada (modelo excel_alugueis2, 11/09/2026)

   Data é COLUNA. A casa vira uma faixa de 5 linhas que se lê da esquerda
   (mais antigo) para a direita (mais novo).

   ⚠️ AS DUAS PRIMEIRAS COLUNAS SÃO GRUDADAS. Rolando para o lado atrás de
   uma rodada antiga, sem isso você perde de vista de que casa e de que
   campo está olhando — e a rolagem lateral vira adivinhação.
   Grudado exige fundo OPACO, senão o conteúdo rolando aparece por baixo.
   ============================================================ */
.grade-rolagem{overflow-x:auto;overflow-y:visible}
.grade{border-collapse:separate;border-spacing:0;font-size:12.5px;width:auto;min-width:100%}

.grade th{
  position:sticky;top:0;z-index:2;
  background:var(--card2);
  text-align:left;font-size:9.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);
  padding:10px 14px;border-bottom:2px solid var(--border2);white-space:nowrap;
}
.grade td{
  padding:7px 14px;border-bottom:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;
}

/* --- as duas colunas grudadas --- */
.grade .col-casa{
  position:sticky;left:0;z-index:3;
  background:var(--card2);min-width:74px;
  border-right:1px solid var(--border);
  font-size:14px;vertical-align:top;padding-top:11px;
}
.grade .col-campo{
  position:sticky;left:74px;z-index:3;
  background:var(--card2);min-width:158px;
  border-right:2px solid var(--border2);
  font-size:10.5px;font-weight:700;color:var(--dim);
}
.grade thead .col-casa{z-index:4}
.grade thead .col-campo{z-index:4}
.grade .col-rodada{min-width:150px}

/* --- a faixa da casa: 5 linhas que se leem como um bloco --- */
.grade tr.l-leitura td{border-top:2px solid var(--border2);padding-top:10px}
.grade tr.l-leitura .n{font-size:15px}
.grade tr.l-foto td{padding-bottom:10px}
.grade tbody tr:hover td{background:var(--card2)}
.grade tbody tr:hover .col-casa,
.grade tbody tr:hover .col-campo{background:var(--card)}

/* célula sem leitura: NINGUÉM leu essa casa nessa rodada. É informação —
   desenhada apagada, nunca escondida e nunca confundida com zero. */
.grade .cel-nada{color:var(--muted);opacity:.45;text-align:center}

@media(max-width:900px){
  .grade .col-campo{min-width:120px;left:64px}
  .grade .col-casa{min-width:64px}
  .grade .col-rodada{min-width:128px}
}

/* quantas versões aquela casa/dia teve (append-only à vista) */
.tag-ver{
  display:inline-block;font-size:10px;font-weight:800;white-space:nowrap;
  padding:2px 8px;border-radius:999px;color:#fff;
  background-image:var(--grad-roxo);
}

/* ============================================================
   FORMULÁRIOS — login e cadastro de usuário
   ============================================================ */
.form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin-bottom:14px}
.form label{
  display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--dim);
}
.form label small{font-weight:600;opacity:.75;letter-spacing:0}
.form input,.form select{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--card2);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;
}
.form input:focus,.form select:focus{outline:none;border-color:var(--accent)}

/* ============================================================
   🧾 A FICHA — e o vermelho que sobrevive ao dark forçado

   André, 20/09/2026: *"ao entrar no cadastro mostra os campos em vermelho
   que faltam"*.

   ⚠️ `color: var(--danger)` no texto NÃO funciona na tela dele: o Chrome
   force-darkeia e pinta TODO texto de branco. O que sobrevive, medido em
   10/09/2026, é (a) a BORDA, (b) o EMOJI e (c) o GRADIENTE em elemento
   pequeno. Então o "falta" é dito três vezes, de três formas diferentes:
   barra vermelha à esquerda, 🔴 no rótulo e selo com gradiente.

   Quem depende de UMA delas fica sem aviso justamente na tela de quem pediu
   o aviso. */
.ficha-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;max-width:none;margin-bottom:14px;
}
.ficha-grade label{
  display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--dim);
  padding-left:9px;border-left:3px solid transparent;
}
.ficha-grade input,.ficha-grade select{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--card2);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;width:100%;box-sizing:border-box;
}
.ficha-grade input:focus,.ficha-grade select:focus{
  outline:none;border-color:var(--accent);
}

/* ★ O CAMPO QUE FALTA — borda grossa à esquerda (sobrevive), campo com
   contorno vermelho (sobrevive) e o 🔴 no rótulo (sobrevive). */
.ficha-grade label.falta{border-left-color:var(--danger)}
.ficha-grade label.falta input,
.ficha-grade label.falta select{border-color:var(--danger);border-width:1.5px}

.selo-falta{
  display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.4px;
  padding:1px 6px;border-radius:6px;margin-left:5px;color:#fff;
  background-image:var(--grad-danger,linear-gradient(135deg,#c34a3e,#e0776a));
}

.ficha-bloco{
  border:1px solid var(--border);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:14px;background:var(--card2);
}
.ficha-bloco > h4{
  margin:0 0 12px;font-size:12px;font-weight:900;letter-spacing:.5px;
  text-transform:uppercase;color:var(--dim);
}

/* a linha da tabela que está aberta — borda, não fundo */
tr.aberta > td{border-top:2px solid var(--accent);border-bottom:0}

.btn-mini{
  cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:800;
  padding:4px 9px;border-radius:8px;margin:1px 2px 1px 0;white-space:nowrap;
  color:var(--text);background:var(--card2);border:1px solid var(--border);
}
.btn-mini:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   🔎 GRADE COMPACTA (André, 18/09/2026)
   *"as tabelas estão completas mas muito grandes, precisamos remodelar
     pra ficar mais compacto e visível sem rolar muito a tela"*

   A altura da grade antiga não dependia da quantidade de dado: era
   `casas × campos`. Com 5 campos e 10 casas, a luz tinha 50 linhas, e o
   Telegram gastava 82 linhas de tabela para mostrar 20 leituras.

   No compacto a casa ocupa UMA linha. O número é o conteúdo; procedência,
   autoria e foto viram marca pequena + `title`. Nada é escondido — o que
   sai da tela entra na dica da célula.

   ⚠️ DARK MODE FORÇADO DO CHROME (ver o topo deste arquivo): as marcas são
   elementos PEQUENOS e coloridos, então levam `background-image:gradient`,
   que o inversor não reescreve. Nada de superfície grande com gradiente.
   ============================================================ */

/* -- cabeçalho de coluna em duas linhas: é o que deixa ~92px bastar -- */
.grade th .cd{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.4px}
.grade th .ca{display:block;font-size:8.5px;color:var(--muted);letter-spacing:.6px;font-weight:700}
.grade th.rod-mes .cd{color:var(--roxo)}
.grade .col-rodada{min-width:104px}

/* -- o título da seção ganha a unidade (some da célula, 150× repetida) -- */
h2.sec .sec-un{
  display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;
  background-image:var(--grad-head);color:#fff;font-size:9.5px;letter-spacing:.5px;
}
h2.sec .sec-dim{margin-left:9px;color:var(--muted);font-weight:700;letter-spacing:.6px}

/* -- botão de densidade -- */
.dens{display:flex;align-items:center;gap:7px;margin:4px 0 2px}
.dens-rot{
  font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
.btn-dens{
  border:1px solid var(--border);background:var(--card);color:var(--dim);
  border-radius:999px;padding:5px 12px;cursor:pointer;
  font-size:11px;font-weight:800;letter-spacing:.3px;
}
.btn-dens:hover{border-color:var(--border2);color:var(--text)}
.btn-dens.on{
  border-color:transparent;color:#fff;background-image:var(--grad-accent);
}

/* -- a tabela compacta: uma linha por casa -- */
.grade.compacta td{padding:5px 10px;border-bottom:1px solid var(--border)}
.grade.compacta .col-casa{padding-top:5px;vertical-align:middle;min-width:62px;font-size:13px}
.grade.compacta tbody tr:nth-child(even) td{background:var(--card2)}
.grade.compacta tbody tr:nth-child(even) .col-casa{background:var(--bg2)}
.grade.compacta tbody tr:hover td{background:var(--bg2)}
.grade.compacta .n{font-size:14px;font-variant-numeric:tabular-nums}
.grade.compacta .cel-c{white-space:nowrap}

/* -- as marcas: só a EXCEÇÃO ganha tinta --
   leitura normal não leva selo nenhum. Se todas levassem, a 🤖 estimada
   deixaria de saltar aos olhos — e ela é a única que NÃO é medição. */
.grade .marcas{margin-left:5px;display:inline-flex;gap:3px;vertical-align:middle}
.grade .mc{
  display:inline-block;font-size:9px;line-height:1.5;
  padding:1px 4px;border-radius:6px;color:#fff;
  background-image:var(--grad-head);text-decoration:none;
}
.grade .mc.estimada{background-image:var(--grad-warning)}
.grade .mc.ajuste{background-image:var(--grad-roxo)}
.grade .mc.mes{background-image:var(--grad-roxo)}
.grade .mc.rep{background-image:var(--grad-info)}
.grade .mc.ver{background-image:var(--grad-ciano)}
.grade .mc.foto{background-image:var(--grad-success);cursor:pointer}
.grade .mc.foto:hover{filter:brightness(1.12)}

@media(max-width:900px){
  .grade .col-rodada{min-width:92px}
  .grade.compacta .col-casa{min-width:52px}
}

/* a coluna grudada acompanha o hover (o zebrado par tem especificidade
   maior que a regra genérica de hover — sem isto a casa "descola" da linha) */
.grade.compacta tbody tr:hover td,
.grade.compacta tbody tr:hover .col-casa{background:var(--bg2)}

/* ============================================================
   🤖 A FONTE DIA A DIA (interpolada) — 18/09/2026

   ⚠️ A HIERARQUIA AQUI NÃO PODE VIR DE COR. O Chrome do André força dark
   mode e lava --dim e --muted para o mesmo branco (ver o topo deste
   arquivo). Então o que separa "alguém leu" de "o sistema calculou" é:

     âncora     → PESO (negrito), reto, + selo colorido (gradiente sobrevive)
     calculado  → leve, ITÁLICO, sem selo

   Tire toda a cor da tela e a diferença continua de pé. Era isso que faltava
   quando o aluguel1 carimbou "ESTIMADA" numa leitura humana com foto.
   ============================================================ */
.grade .n.interp{
  font-style:italic;font-weight:500;opacity:.9;
  font-variant-numeric:tabular-nums;
}
.grade .mc.lida{background-image:var(--grad-success)}
/* uma coluna por DIA: cabem ~31 e a rolagem lateral tem de ser curta */
.grade .col-rodada{min-width:96px}

/* selo do canal da âncora na fonte 🤖: 📲 bot · 👤 painel · ✍️ ajuste */
.grade .mc.bot{background-image:var(--grad-ciano)}

/* a nota da régua — diz de quais canais saíram as âncoras */
.nota-regua{
  margin:6px 0 2px;font-size:11.5px;color:var(--dim);line-height:1.6;
  border-left:3px solid var(--border2);padding-left:10px;
}

/* o hash de topo dentro do cartão do lacre */
.lacre-topo{margin-top:6px;font-size:11px;color:var(--dim)}
.lacre-topo code{font-family:ui-monospace,Consolas,monospace;font-size:11px;word-break:break-all}


/* ============================================================
   📷 VISOR DE FOTO flutuante (03/10/2026)
   Cores CHAPADAS e borda, não gradiente: é superfície grande, e o dark
   mode forçado do Chrome do André reescreve fundos (ver o topo deste
   arquivo). A hierarquia vem da borda e do peso da fonte.
   ============================================================ */
#visor-foto{
  position:fixed; right:16px; top:72px; width:min(440px, 92vw); height:min(560px, 80vh);
  min-width:220px; min-height:160px; max-width:96vw; max-height:94vh;
  display:none; flex-direction:column; z-index:60;
  background:var(--card); border:1.5px solid var(--border2); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden;
  resize:both;                       /* o canto inferior direito redimensiona */
}
#visor-foto .vf-barra{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:var(--card2); border-bottom:1px solid var(--border);
  cursor:grab; user-select:none; touch-action:none; flex:0 0 auto;
}
#visor-foto .vf-barra:active{cursor:grabbing}
#visor-foto .vf-legenda{flex:1 1 auto; font-size:12.5px; font-weight:700; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#visor-foto .vf-abrir, #visor-foto .vf-fechar{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; border:1px solid var(--border2);
  background:var(--card); color:var(--text); font:inherit; font-size:14px; font-weight:800;
  display:grid; place-items:center; text-decoration:none; cursor:pointer;
}
#visor-foto .vf-abrir:hover, #visor-foto .vf-fechar:hover{border-color:var(--text)}
#visor-foto .vf-corpo{flex:1 1 auto; overflow:auto; background:#111; display:grid; place-items:center}
#visor-foto img{max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; display:block}
#visor-foto img.real{max-width:none; max-height:none; cursor:zoom-out}


/* ============================================================
   🔌 CONTAS / RELÓGIOS (03/10/2026)
   Cartões clicáveis: superfície chapada + borda (dark mode forçado);
   o que distingue o aberto é a borda grossa, não a cor de fundo.
   ============================================================ */
/* ⚠️ NÃO chamar de `.relogios`: o botão do menu leva a classe do id da tela
   (`item relogios`) e a grade vazava para ele (03/10/2026). */
.grade-relogios{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:0 0 6px}
.item.on.relogios{background-image:var(--grad-ciano)}
.relogio{
  display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer;
  font:inherit;color:var(--text);
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--raio);
  padding:14px 16px;box-shadow:var(--sombra);
}
.relogio:hover{border-color:var(--border2)}
.relogio.on{border-color:var(--text);border-width:2.5px;padding:13px 15px}
.relogio.inativa{opacity:.6}
.relogio .r-topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.relogio .r-emoji{font-size:20px}
.relogio .r-nome{font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.relogio .r-mod{font-size:11.5px;font-weight:700;color:var(--muted)}
.relogio .r-linha{font-size:13px;display:flex;gap:8px;align-items:baseline}
.relogio .r-linha small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted);min-width:42px}
.relogio .r-falta{font-size:11.5px;font-weight:800;color:var(--danger)}
.quadro{width:100%;border-collapse:collapse;font-size:13px}
.quadro th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);padding:9px 14px 9px 0;vertical-align:top;white-space:nowrap;width:1%}
.quadro td{padding:9px 0;border-bottom:1px solid var(--border)}
.quadro th{border-bottom:1px solid var(--border)}
.quadro tr:last-child th,.quadro tr:last-child td{border-bottom:0}
.quadro td small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.q-falta{color:var(--danger);font-weight:800}
.q-origem{font-size:11.5px;color:var(--muted);margin:12px 0 0}

.rel-form{margin:14px 0 0;border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:var(--card)}
.rel-form > summary{cursor:pointer;font-size:12.5px;font-weight:800;padding:2px 0}
.rel-form[open] > summary{margin-bottom:12px}
.rel-form .btn{margin-top:12px}

/* 🧾 contas de cada relógio (03/10/2026) */
.relogio-coluna{display:flex;flex-direction:column;gap:8px}
.relogio-coluna .relogio{flex:1 1 auto}
.conta-incluir{width:100%;justify-content:center;text-align:center}
.conta-mes{font-size:12.5px;line-height:1.45;border:1px solid var(--border);border-left:4px solid var(--border2);
  border-radius:10px;padding:8px 12px;background:var(--card)}
.conta-mes.ok{border-left-color:var(--success)}
.conta-mes.erro{border-left-color:var(--danger);font-weight:700}
.conta-mes small{display:block;font-size:11px;color:var(--muted)}
.conferencia .robo{display:block;font-size:10px;font-weight:700;letter-spacing:.2px;margin:1px 0 3px;color:var(--muted)}
.conferencia label.falta .robo{color:var(--danger)}
.conf-check{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700;margin-top:12px}
.conf-botoes{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tab-contas{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.tab-contas th{text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);padding:6px 14px 8px 0;border-bottom:1.5px solid var(--border2)}
.tab-contas td{padding:8px 14px 8px 0;border-bottom:1px solid var(--border)}
.tab-contas tr:last-child td{border-bottom:0}
.tab-contas small{color:var(--muted)}
.senha-pdf{display:flex;gap:6px;margin:6px 0 2px}
.senha-pdf input{flex:1 1 auto;min-width:0;font:inherit;padding:5px 8px;border-radius:8px;
  border:1px solid var(--border2);background:var(--card2);color:var(--text)}

/* 📄 PDF no visor flutuante (04/10/2026) */
#visor-foto iframe{display:none;width:100%;height:100%;border:0;background:#fff}
#visor-foto.pdf iframe{display:block}
#visor-foto.pdf img{display:none}
#visor-foto.pdf .vf-corpo{display:block;overflow:hidden}
#visor-foto.arrastando iframe{pointer-events:none}

/* 🗂️ todas as contas (04/10/2026) */
.btn-todas-contas{font:inherit;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer;width:100%;white-space:nowrap;
  border:1px solid var(--border2);color:#fff;
  background-image:linear-gradient(135deg,#3a4f7a,#2b3a5c)}
.btn-todas-contas.on{background-image:linear-gradient(135deg,#5b4fa8,#3f357d)}
.chip-alerta{background-image:linear-gradient(135deg,#a8442f,#7d2f1f)!important;color:#fff}

/* 🟢🔴 fila das 3 últimas contas + botão do mês (05/10/2026). Pequenos e
   coloridos = GRADIENTE, que o dark forçado do Chrome não reescreve. */
.fila-contas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.q-conta{font:inherit;font-size:12.5px;font-weight:800;text-align:center;padding:6px 4px;
  border-radius:8px;border:1px solid transparent;color:#fff;white-space:nowrap}
.q-conta.tem{background-image:linear-gradient(135deg,#2f9e5b,#1f7a43);cursor:pointer}
.q-conta.falta{background-image:linear-gradient(135deg,#c2412d,#8f2a1c)}
.q-conta.corrente{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.conta-incluir.falta{background-image:linear-gradient(135deg,#c2412d,#8f2a1c)}
.conta-incluir.tem{background-image:linear-gradient(135deg,#2f9e5b,#1f7a43)}

/* 📈 histórico de consumo (05/10/2026). Barras = elemento pequeno colorido
   → gradiente (sobrevive ao dark forçado). Cartão = chapado. */
.btn-consumo{background-image:linear-gradient(135deg,#2b5c63,#1f4549)}
.btn-consumo.on{background-image:linear-gradient(135deg,#5b4fa8,#3f357d)}
/* direction:rtl no contêiner faz a rolagem NASCER no fim (os meses mais
   recentes, que é o que se quer ver); o conteúdo volta a ltr por dentro */
.grafico-consumo{overflow-x:auto;direction:rtl}
.grafico-consumo>*{direction:ltr}
.gc-barras{display:flex;align-items:stretch;gap:4px;min-width:min-content;height:220px}
.gc-col{flex:1 0 34px;display:flex;flex-direction:column;align-items:center;min-width:34px}
.gc-valor{font-size:10.5px;font-weight:800;white-space:nowrap;height:16px}
.gc-barra-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.gc-barra{width:72%;border-radius:5px 5px 0 0;
  background-image:linear-gradient(180deg,#3fb3c9,#2a7f9e)}
.gc-buraco{width:72%;height:100%;border:1px dashed var(--danger);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.gc-rot{font-size:10.5px;margin-top:4px;white-space:nowrap}
.gc-col.falta .gc-rot{font-weight:800}

/* 🏘️ ficha da casa: ligação com o relógio da companhia (05/10/2026) */
.linha-clicavel{cursor:pointer}
.linha-clicavel.on td{border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.grade-ligacoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.ligacao-form select,.rel-form select{font:inherit;padding:5px 8px;border-radius:8px;
  border:1px solid var(--border2);background:var(--card2);color:var(--text);width:100%}

/* ⭐ Início: um card por casa (06/10/2026). Superfície = cor chapada + borda. */
.inicio-casas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.inicio-casa{border:1px solid var(--border2);border-radius:12px;background:var(--card);
  padding:14px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.inicio-casa .ic-morador{grid-column:2;font-size:12.5px;line-height:1.35;word-break:break-word}
.inicio-casa .ic-emoji{font-size:22px}
.inicio-casa .ic-num{font-size:16px;font-weight:800}
.inicio-toggle{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}

/* 💸 despesas mensais (06/10/2026) */
.dp-casa{margin-top:10px}
.dp-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dp-cab .dp-total{margin-left:auto;font-size:12.5px}
.dp-orfa{border-color:var(--danger)}
.dp-acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dp-editar summary{cursor:pointer;list-style:none;padding:3px 8px;border:1px solid var(--border);border-radius:8px}
.dp-editar input{font:inherit;padding:4px 8px;border-radius:8px;border:1px solid var(--border2);
  background:var(--card2);color:var(--text);margin:4px 4px 0 0;width:140px}
.dp-form{margin-top:10px}
.dp-historico{margin-top:8px}
.dp-historico summary{cursor:pointer;font-size:12px;color:var(--dim)}
.inicio-casa .ic-linha{grid-column:2;font-size:12px;line-height:1.35;color:var(--dim)}
.inicio-casa .ic-linha b{color:var(--text)}

/* 🧾 comprovantes (08/10/2026): uma linha de cards por casa, os 9 mais recentes */
.cp-casa{margin-top:10px}
.cp-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cp-cab .btn-mini{margin-left:auto}
.cp-orfa{border-color:var(--danger)}
.cp-linha{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px}
.cp-card{flex:0 0 150px;border:1px solid var(--border2);border-radius:10px;background:var(--card2);
  padding:8px 10px;font-size:12px;line-height:1.4}
.cp-card.sem-pagador{border-color:var(--danger)}
.cp-card .cp-valor{font-size:14px;margin:2px 0}
.cp-card .cp-acoes{display:flex;gap:6px;align-items:center;margin-top:4px}
.cp-editar summary{cursor:pointer;list-style:none;padding:2px 7px;border:1px solid var(--border);border-radius:8px}
.cp-editar input{font:inherit;padding:4px 8px;border-radius:8px;border:1px solid var(--border2);
  background:var(--card);color:var(--text);margin:4px 0 0;width:100%}
.cp-form{margin-top:10px}
.cp-form input[type=file]{font:inherit;color:var(--text)}
.cp-detalhes{margin-top:4px;font-size:11.5px}
.cp-detalhes summary{cursor:pointer;color:var(--dim)}
.cp-detalhes div{margin-top:2px}
.cp-detalhes .cp-a1{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
.cp-itens{margin-top:4px;font-size:11px}
.cp-card:has(.cp-detalhes[open]){flex-basis:360px}

/* -- 📋 extrato por casa (histórico de pagamento, pág. 2) -- */
.hx-casas{margin-top:-4px}
.hx-tab td,.hx-tab th{vertical-align:top}
.hx-tab tfoot td{border-top:2px solid var(--border2);padding-top:8px}
.hx-tab small{font-size:11px;line-height:1.3}
.hx-vaga td{opacity:.75}
.hx-sobra{color:var(--ok, #2e9c5a)}
.hx-comps{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* ★ 13/10/2026 — o layout estourava: a tabela era `width:auto` (layout automático) e
   o chip do comprovante em `nowrap` + a grade das 4 barrinhas na linha do painel
   (colspan) alargavam a tabela além do cartão. Agora a tabela é FIXA em 100% com
   larguras por coluna; o que não cabe quebra linha dentro da célula; em tela
   estreita o cartão rola na horizontal em vez de vazar. */
.hx-cartao{padding:0;overflow:hidden}
.hx-rolagem{overflow-x:auto;overflow-y:visible;padding:0 6px 6px}
.hx-tab{table-layout:fixed;width:100%;min-width:720px}
.hx-c-mes{width:18%}.hx-c-dev{width:22%}.hx-c-num{width:10%}.hx-c-comp{width:30%}   /* = 100%; DEVIDO leva as barrinhas */
.hx-tab td,.hx-tab th{overflow-wrap:anywhere}
.hx-tab .col-casa{position:static;min-width:0}
.hx-tab td{white-space:normal}          /* a grade herda nowrap do `.grade td`; aqui tudo quebra linha */
.hx-painel .hx-item{white-space:normal}
.hx-bar-rot{flex-wrap:wrap}
.hx-bar-rot > span:last-child{white-space:nowrap}
.hx-tab .cel-num b{white-space:nowrap}
.hx-painel-linha td{overflow-wrap:normal}
.hx-painel .hx-barras{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hx-painel input,.hx-painel select{max-width:100%;min-width:0}
.hx-comp{display:inline-block;max-width:100%;border:1px solid var(--border2);border-radius:8px;padding:3px 8px;font-size:11.5px;background:var(--card2);white-space:normal;line-height:1.35}
.hx-comp.sem-pagador{border-color:var(--danger)}



/* -- 🔏 chancela do rateio (faixa no painel; botões na tela de banco) -- */
.ch-faixa{margin:8px 0}
.ch-faixa.ch-ok{border-left-color:var(--ok, #2e9c5a)}
.ch-faixa .ch-tab{margin:6px 0;width:auto;min-width:320px}
.rt-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-6px 0 20px}
.rt-acoes input{min-width:260px}
.rt-aceitar{display:flex;gap:6px;align-items:center}


/* -- 💰 destinação do comprovante (12/10/2026) -- */
.cp-card .cp-dest{font-size:11px;margin:2px 0;line-height:1.3;white-space:normal}
.cp-card .cp-dest-ok{color:var(--ok, #2e9c5a)}
.cp-card.cp-voucher{border-style:dashed}
.cp-card.cp-aberto{border-color:var(--accent, #7c5cff);box-shadow:0 0 0 2px var(--border2)}
.dest-painel{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--border2);border-radius:12px;background:var(--card)}
.dest-cab{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dest-cab .btn-mini{margin-left:auto}
.dest-lista{margin:8px 0;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.dest-item.pendente{border-left:3px solid var(--warning, #d8a300);padding-left:6px}
.dest-item.salvo{border-left:3px solid var(--ok, #2e9c5a);padding-left:6px}
.dest-sobra{font-size:12.5px;margin:6px 0}
.dest-sobra.ok{color:var(--ok, #2e9c5a)}
.dest-tipos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.dest-tab{margin:4px 0 8px}
.dest-tab input{font:inherit;padding:3px 6px;border-radius:6px;border:1px solid var(--border2);background:var(--card2);color:var(--text)}
.dest-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}


/* -- 💰 o painel do mês no histórico (13/10/2026): as quatro barrinhas -- */
.hx-painel-linha td{padding:0 0 10px;background:transparent}
.hx-barras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:8px 0}
.hx-bar{border:1px solid var(--border2);border-radius:10px;padding:8px 10px;background:var(--card2);font-size:12px}
.hx-bar-rot{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
/* ★ 13/10/2026 — a barrinha enche e muda de cor: 🔴 vazia · 🟡 parcial · 🟢 cheia
   (André: "pra bater o olho e ver o que está vazio, meio vazio e cheio"). O
   preenchimento é GRADIENTE (imagem): o dark mode forçado do Chrome reescreve
   background-color, não background-image. O trilho vazio ganha uma borda
   colorida (box-shadow), que também sobrevive. */
.hx-trilho{display:block;height:9px;border-radius:999px;background:var(--border);margin:6px 0;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border2);min-width:60px}
.hx-cheio{display:block;height:100%;border-radius:999px;background-image:var(--grad-accent);transition:width .35s ease}
.n-vazia .hx-trilho{box-shadow:inset 0 0 0 1.5px #d9534f}
.n-vazia .hx-cheio{background-image:linear-gradient(90deg,#c0392b,#e74c3c)}
.n-parcial .hx-trilho{box-shadow:inset 0 0 0 1.5px #d4a017}
.n-parcial .hx-cheio{background-image:linear-gradient(90deg,#c9900c,#f1c40f)}
.n-cheia .hx-trilho{box-shadow:inset 0 0 0 1.5px #2e9c5a}
.n-cheia .hx-cheio{background-image:linear-gradient(90deg,#1f8a4c,#3ddc84)}
.n-nada .hx-trilho{opacity:.35}
.n-nada .hx-cheio{background-image:linear-gradient(90deg,#8a8a8a,#b5b5b5)}
.n-semAlvo .hx-trilho{background:transparent;box-shadow:none;border:1.5px dashed #d9534f;opacity:.8}
.n-semAlvo .hx-cheio{width:0 !important}
.n-semConta .hx-trilho{background:transparent;box-shadow:none;border:1px dashed var(--border2);opacity:.45}
.n-semConta .hx-cheio{width:0 !important}
/* o rascunho (ainda não gravado) entra listrado, logo depois do gravado */
.hx-trilho{display:flex}
.hx-cheio.rasc{border-radius:0 999px 999px 0;background-image:repeating-linear-gradient(45deg,#f1c40f 0 4px,rgba(0,0,0,.25) 4px 8px)}
.n-cheia .hx-cheio.rasc{background-image:repeating-linear-gradient(45deg,#3ddc84 0 4px,rgba(0,0,0,.25) 4px 8px)}
.hx-bar.n-cheia{border-color:#2e9c5a}
.hx-bar.n-vazia{border-color:#d9534f}
.hx-bar.n-parcial{border-color:#d4a017}
.hx-selo{font-size:11px;line-height:1}
/* as mini barrinhas da linha do mês */
.hx-mini{display:flex;flex-direction:column;gap:2px;margin-top:5px;text-align:left}
.hx-mini-b{display:grid;grid-template-columns:16px minmax(48px,1fr) auto;gap:5px;align-items:center;font-size:10.5px;line-height:1.2}
.hx-mini-b .hx-trilho{margin:0;height:8px}
.hx-mini-ic{text-align:center}
.hx-mini-val{white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-mini-b.n-nada .hx-mini-val,.hx-mini-b.n-semAlvo .hx-mini-val,.hx-mini-b.n-semConta .hx-mini-val{opacity:.75}
.hx-mini-b .hx-trilho{min-width:48px}
.hx-bar-leg{line-height:1.4}
.hx-item{display:inline-block;border:1px solid var(--border);border-radius:6px;padding:0 5px;margin:2px 2px 0 0}
.hx-item.pendente{border-color:var(--warning, #d8a300)}
.hx-usar{display:flex;gap:6px;align-items:center;margin-top:6px}
.hx-usar input{font:inherit;width:90px;padding:3px 6px;border-radius:6px;border:1px solid var(--border2);background:var(--card);color:var(--text)}
.hx-escolha{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.hx-rascunho{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
\n

/* -- 📒 extrato: um cabeçalho por ESTADIA (13/10/2026) -- */
.hx-grupo td{background:var(--card2)!important;border-top:2px solid var(--border2);padding:8px 10px;font-size:12.5px}
.hx-grupo .btn-mini{margin-left:8px}

/* -- 📦 comprovantes arquivados (13/10/2026) -- */
.cp-arquivados{margin-top:6px;font-size:12px}
.cp-arquivados summary{cursor:pointer;color:var(--dim)}
.cp-arq{padding:4px 0 4px 10px;border-left:2px dashed var(--border2);margin-top:4px;opacity:.85}
.cp-arq .btn-mini{margin-left:6px}

/* -- 🔎 leitor de comprovante (13/10/2026): campo sugerido fica em cinza até a pessoa mexer -- */
.cp-form input.sugerido{color:var(--dim);border-style:dashed}
.cp-form input.sugerido:focus{color:var(--text);border-style:solid}
.cp-ocr{font-size:12px;line-height:1.45;margin:4px 0 8px;padding:6px 10px;border-left:3px solid var(--border2)}
.cp-texto{white-space:pre-wrap;font-size:11px;max-height:220px;overflow:auto;background:var(--card2);padding:6px;border-radius:6px}

/* -- ⚠ quadro dos arquivos repetidos (13/10/2026) -- */
.chip-botao{cursor:pointer;font:inherit}
.chip-botao.on{outline:2px solid var(--border2)}
.cp-modal{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:9000;width:min(820px,94vw);max-height:80vh;overflow:auto;
  background:var(--card);border:1px solid var(--border2);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:12px 14px;font-size:12.5px}
.cp-modal-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cp-modal-cab .btn-mini{margin-left:auto}
.cp-grupo{border-top:1px dashed var(--border);padding:8px 0}
.cp-grupo-item{padding:3px 0 3px 10px;border-left:2px solid var(--border2);margin-top:3px}

/* -- revisão 13/10/2026 -- */
.hx-desvio{font-size:11px;margin-top:2px;padding-left:6px;border-left:2px solid var(--warning, #d8a300)}
.hx-futuro td{opacity:.8}