/* AdminHaras -- identidade "Aureate": ouro, tinta, creme.
   O ouro e acento, nunca preenchimento largo: fio de 1px, marca, barra do grafico
   e anel de foco. Onde precisa de fundo dourado, entra o tom fechado (--ouro-forte),
   que suporta texto branco com contraste AA. */

:root{
  /* tinta e papel */
  --tinta:#1B1917;        /* quase-preto quente, casa com o ouro */
  --tinta-2:#4A453D;      /* texto secundario -- nunca cinza puro */
  --neutro:#6E6960;       /* texto terciario / rotulos */
  --creme:#FAF8F4;        /* fundo da pagina */
  --branco:#fff;
  --superficie-2:#F5F2EC; /* cabecalho de tabela, rodape, zebra */
  --linha:#EAE5DC;
  --linha-forte:#D9D3C7;

  /* ouro */
  --ouro:#B98F2B;         /* fios, marcas, barras */
  --ouro-forte:#8A6A16;   /* fundo solido + texto branco (AA) */
  --ouro-suave:#F6EFDC;   /* fundo tingido */
  --ouro-anel:rgba(185,143,43,.20);

  /* semantica */
  --verde:#15694A;   --verde-bg:#E6F1EB;  --verde-linha:#BCDBCA;
  --vermelho:#A82B21;--vermelho-bg:#FAEAE8;--vermelho-linha:#EBC7C3;
  --ambar:#8A6100;   --ambar-bg:#FBF1DA;  --ambar-linha:#E7D5AA;

  /* forma: cartoes 12, controles 8, selos e abas pilula */
  --r:12px; --r-sm:8px; --r-pill:999px;

  /* elevacao tingida na cor do papel, nunca preto puro */
  --sombra-1:0 1px 2px rgba(43,35,20,.04), 0 1px 1px rgba(43,35,20,.03);
  --sombra-2:0 1px 2px rgba(43,35,20,.04), 0 6px 16px -6px rgba(43,35,20,.10);
  --sombra-3:0 24px 60px -12px rgba(0,0,0,.45);

  --nav:252px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Sem esta linha o atributo hidden nao esconde .campo: a regra de autor
   (.campo{display:flex}) vence a do navegador ([hidden]{display:none}), que
   e de origem inferior. O !important devolve a palavra final ao hidden. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; color:var(--tinta); background:var(--creme);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:600;letter-spacing:-.018em;margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
strong{font-weight:600}

/* --- superficies do navegador: selecao, cursor, foco, barra de rolagem ---
   O que nao foi desenhado tambem faz parte do desenho. */
::selection{background:var(--ouro-suave);color:var(--tinta)}
:root{accent-color:var(--ouro-forte);caret-color:var(--ouro-forte)}
:focus-visible{outline:2px solid var(--ouro-forte);outline-offset:2px;border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--neutro);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* numeros: sempre tabulares, sempre alinhados na virgula */
.mono,.num,.kpi__valor,.tabela td.num,.tabela tfoot td.num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- sidebar ---------- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--nav);
  background:var(--tinta); color:#A9A49A; padding:18px 0 28px;
  overflow-y:auto; z-index:30;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
  scrollbar-color:#3A3630 transparent;
}
.sidebar::-webkit-scrollbar-thumb{background:#3A3630;background-clip:content-box}

/* A marca e a imagem inteira -- nome e assinatura ja estao dentro dela.
   A sidebar usa a versao creme (logo-claro.png): o logo original e verde
   escuro sobre transparente e sumiria no #1B1917. */
.brand{
  display:flex; align-items:center;
  padding:2px 20px 22px;
}
.brand img{width:100%;max-width:176px;height:auto;display:block}

.nav__grupo{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#948E83; padding:20px 20px 8px;
}
.nav__grupo:first-child{padding-top:6px}

.nav__item{
  display:flex; align-items:center; gap:10px;
  margin:1px 10px; padding:7px 10px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:450; color:#B4AFA5;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.nav__item svg{width:16px;height:16px;flex:0 0 auto;color:#7C776E;transition:color .14s var(--ease)}
.nav__item:hover{background:rgba(255,255,255,.05);color:var(--branco)}
.nav__item:hover svg{color:#C6C0B4}
.nav__item.is-ativo{background:#2C2823;color:var(--branco);font-weight:500}
.nav__item.is-ativo svg{color:var(--ouro)}
.nav__item.is-off{color:#767065;cursor:default}
.nav__item.is-off svg{color:#565043}
.nav__item.is-off:hover{background:none;color:#767065}
.nav__item.is-off:hover svg{color:#565043}

/* ---------- item de menu que abre ----------
   <details> nativo: sem uma linha de JS, funciona com teclado e sobrevive a
   pagina sem script. O estado nao persiste entre paginas de proposito -- o item
   ja abre sozinho quando se esta dentro dele, que e quando importa. */
.nav__ramo summary{cursor:pointer;list-style:none}
.nav__ramo summary::-webkit-details-marker{display:none}
/* a seta e o ultimo svg do summary: empurrada para a direita e girando ao abrir */
.nav__ramo summary svg:last-child{
  margin-left:auto;width:13px;height:13px;
  transition:transform .18s var(--ease),color .14s var(--ease);
}
.nav__ramo[open] summary svg:last-child{transform:rotate(90deg)}
.nav__filho{
  display:block;margin:1px 10px 1px 40px;padding:6px 10px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:400;color:#969086;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav__filho:hover{background:rgba(255,255,255,.05);color:var(--branco)}
.nav__filho.is-ativo{background:#2C2823;color:var(--branco);font-weight:500}
.nav__ramo[open]{padding-bottom:6px}

.tag-soon{
  margin-left:auto;
  font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;
  border:1px solid #46423A;border-radius:var(--r-pill);padding:1px 6px;color:#948E84;
}

/* ---------- estrutura ---------- */
.conteudo{margin-left:var(--nav);min-height:100vh;display:flex;flex-direction:column}
.topo{
  display:flex;align-items:center;gap:16px;
  padding:14px 28px; background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(8px); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:20;
}
.topo h1{font-size:19px;letter-spacing:-.022em}
.topo__sub{margin:1px 0 0;color:var(--neutro);font-size:12.5px}
.topo__dir{margin-left:auto;display:flex;align-items:center;gap:12px}
.usuario{
  text-align:right;line-height:1.3;padding-left:14px;
  border-left:1px solid var(--linha);
}
.usuario__nome{display:block;font-weight:500;font-size:13px}
.usuario__sair{font-size:11.5px;color:var(--neutro);transition:color .14s var(--ease)}
.usuario__sair:hover{color:var(--vermelho)}
.hamburguer{display:none;cursor:pointer;line-height:0;color:var(--tinta-2);padding:4px;margin:-4px}
.hamburguer svg{width:20px;height:20px}
.corpo{padding:24px 28px 64px;flex:1;max-width:1440px;width:100%}

/* ---------- cartoes ---------- */
.cartao{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sombra-1);overflow:hidden;
}
.cartao__topo{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--linha);
}
.cartao__topo h2{font-size:14px;font-weight:600;letter-spacing:-.01em}
/* icone do cabecalho do cartao: cada lugar que usa icone() declara o proprio
   tamanho, e sem regra o SVG assume o tamanho do viewBox e engole o cartao. */
.cartao__topo > svg{width:16px;height:16px;flex:0 0 auto;color:var(--ouro-forte)}
.cartao__topo .direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.cartao__corpo{padding:18px}

.grade{display:grid;gap:16px}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--21{grid-template-columns:2fr minmax(0,1fr)}
@media(max-width:1100px){.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grade--3,.grade--21{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.grade--4,.grade--2{grid-template-columns:minmax(0,1fr)}}

/* ---------- KPI ----------
   Sem barra colorida de 3px na lateral: um fio de 1px no topo diz a mesma coisa
   sem virar enfeite, e o valor ja carrega a cor. */
.kpi{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
  padding:15px 17px 16px;box-shadow:var(--sombra-1);position:relative;overflow:hidden;
  transition:box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.kpi:hover{box-shadow:var(--sombra-2);border-color:var(--linha-forte)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--linha-forte)}
.kpi--ouro::before{background:var(--ouro)}
.kpi--verde::before{background:var(--verde)}
.kpi--vermelho::before{background:var(--vermelho)}
.kpi--ambar::before{background:var(--ambar)}
.kpi__rotulo{
  font-size:12px;font-weight:500;color:var(--neutro);letter-spacing:-.005em;
}
.kpi__valor{
  font-size:25px;font-weight:600;letter-spacing:-.035em;margin-top:7px;line-height:1.1;
}
.kpi__nota{font-size:11.5px;color:var(--neutro);margin-top:5px}
.v-verde{color:var(--verde)} .v-vermelho{color:var(--vermelho)} .v-ambar{color:var(--ambar)}

/* ---------- tabela ---------- */
/* overflow-x:auto e nao hidden: no celular a tabela rola em vez de perder colunas. */
.tabela{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
  overflow-x:auto;box-shadow:var(--sombra-1);
}
.tabela table{font-size:13.2px}
.tabela th{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--neutro);text-align:left;padding:10px 14px;
  background:var(--branco);border-bottom:1px solid var(--linha-forte);white-space:nowrap;
}
.tabela td{padding:11px 14px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:none}
.tabela tbody tr{transition:background .12s var(--ease)}
.tabela tbody tr:hover{background:var(--creme)}
.tabela tfoot td{
  padding:11px 14px;background:var(--superficie-2);
  border-top:1px solid var(--linha-forte);font-weight:600;color:var(--tinta);
}
.num{text-align:right;white-space:nowrap}
.acoes{text-align:right;white-space:nowrap}
.acoes .btn + .btn{margin-left:6px}
.sub{display:block;color:var(--neutro);font-size:11.5px;margin-top:2px}
.vazio{padding:44px 18px;text-align:center;color:var(--neutro)}
.tabela a:hover,.cartao table a:hover{color:var(--ouro-forte);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* linhas de cartao sem a moldura .tabela */
.cartao table td{padding:11px 18px;border-bottom:1px solid var(--linha)}
.cartao table tbody tr:last-child td{border-bottom:none}
.cartao table tbody tr{transition:background .12s var(--ease)}
.cartao table tbody tr:hover{background:var(--creme)}

/* ---------- selos de situacao ---------- */
.selo{
  display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent;
}
.selo--pago{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-linha)}
.selo--pendente{background:var(--superficie-2);color:var(--tinta-2);border-color:var(--linha-forte)}
.selo--parcial{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar-linha)}
.selo--vencido{background:var(--vermelho-bg);color:var(--vermelho);border-color:var(--vermelho-linha)}
.selo--cancelado{background:var(--superficie-2);color:var(--neutro);border-color:var(--linha);text-decoration:line-through}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:-.005em;
  padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--linha-forte);background:var(--branco);color:var(--tinta);
  cursor:pointer;line-height:1.35;white-space:nowrap;
  box-shadow:var(--sombra-1);
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),box-shadow .14s var(--ease),transform .06s var(--ease);
}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn:hover{background:var(--creme);border-color:var(--linha-forte);box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(1px);box-shadow:none}

.btn--ouro{background:var(--ouro-forte);border-color:var(--ouro-forte);color:#fff}
.btn--ouro:hover{background:#7A5D11;border-color:#7A5D11;color:#fff}

.btn--tinta{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn--tinta:hover{background:#000;border-color:#000;color:#fff}

.btn--perigo{color:var(--vermelho);border-color:var(--vermelho-linha);background:var(--branco)}
.btn--perigo:hover{background:var(--vermelho);color:#fff;border-color:var(--vermelho)}

.btn--min{padding:4px 10px;font-size:12px}
.btn--min svg{width:13px;height:13px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn[aria-disabled=true]:hover{background:var(--branco);border-color:var(--linha-forte);box-shadow:none}

/* ---------- formularios ---------- */
.campos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 14px}
.campo{grid-column:span 12;display:flex;flex-direction:column;gap:6px;min-width:0}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c9{grid-column:span 9}
@media(max-width:760px){.c3,.c4,.c6,.c8,.c9{grid-column:span 12}}

label{font-size:12.5px;font-weight:500;color:var(--tinta-2);letter-spacing:-.005em}

input,select,textarea{
  font-family:inherit;font-size:13.5px;color:var(--tinta);
  padding:8px 11px;border:1px solid var(--linha-forte);border-radius:var(--r-sm);
  background:var(--branco);width:100%;min-width:0;
  box-shadow:inset 0 1px 1px rgba(43,35,20,.03);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--neutro);opacity:1}
input:disabled,select:disabled{background:var(--superficie-2);color:var(--tinta-2);box-shadow:none;cursor:default}
input:hover,select:hover,textarea:hover{border-color:var(--neutro)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ouro-forte);
  box-shadow:0 0 0 3px var(--ouro-anel);
}
input[type=file]{padding:6px;font-size:12.5px;box-shadow:none}
input[type=date]{font-variant-numeric:tabular-nums}
select{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6960' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
textarea{resize:vertical;min-height:72px;line-height:1.55}
.dica{font-size:11.5px;color:var(--neutro);line-height:1.5}
.acoes-form{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--linha);
}
/* Dentro de .campos e item de grid: sem o span cai numa coluna so (1/12) e o
   botao vira um quadrado com o texto vazando. Aqui, para todo formulario de uma vez. */
.campos > .acoes-form{grid-column:span 12}

/* filtros */
.filtros{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--sombra-1);
}
.filtros .campo{flex:0 0 auto;width:158px;grid-column:auto}

/* listas de marcar: quem assina o PDF, cotistas a puxar. Pilula inteira clicavel
   (e um <label>), e o estado marcado tinge a pilula, nao so a caixinha. */
.escolhas{display:flex;flex-wrap:wrap;gap:8px}
.escolha{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;
  border:1px solid var(--linha-forte);border-radius:var(--r-pill);background:var(--branco);
  font-size:12.5px;font-weight:500;color:var(--tinta-2);cursor:pointer;
  transition:border-color .14s var(--ease),background-color .14s var(--ease);
}
.escolha:hover{border-color:var(--neutro)}
.escolha:has(input:checked){background:var(--ouro-suave);border-color:var(--ouro);color:var(--tinta)}
.escolha:has(input:focus-visible){box-shadow:0 0 0 3px var(--ouro-anel)}
.escolha:has(input:disabled){cursor:default;opacity:.6}
.escolha input{width:15px;height:15px;padding:0;margin:0;flex:none;box-shadow:none;accent-color:var(--ouro-forte)}
.escolha small{font-size:11.5px;font-weight:400;color:var(--neutro)}
.puxar{margin-top:20px;padding-top:18px;border-top:1px solid var(--linha)}
.puxar__topo{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.puxar__topo strong{display:block;font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:2px}
.btn[hidden]{display:none}
.incluir-mais{margin-top:16px;max-width:460px}
.nova-gestao summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ouro-forte)}
.nova-gestao summary svg{width:14px;height:14px}
.nova-gestao[open] summary{margin-bottom:14px}
.escolhas:empty{display:none}

/* folha de assinaturas das telas impressas: a linha fica EM CIMA do nome, que
   e onde se assina. Nao parte entre duas paginas. */
.assinaturas-folha{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;
  margin:64px 0 12px;break-inside:avoid;page-break-inside:avoid;
}
.assinatura{display:flex;flex-direction:column;gap:3px;padding-top:7px;border-top:1px solid var(--tinta);text-align:center}
.assinatura__nome{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--tinta)}
.assinatura__cargo{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}
@media(max-width:760px){.assinaturas-folha{grid-template-columns:repeat(2,minmax(0,1fr))}}
.filtros .campo--largo{width:240px}
.filtros .fim{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* abas */
.abas{
  display:flex;gap:2px;margin-bottom:16px;flex-wrap:wrap;
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--r-pill);padding:3px;width:fit-content;max-width:100%;
}
.aba{
  padding:6px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;
  color:var(--tinta-2);transition:background .14s var(--ease),color .14s var(--ease),box-shadow .14s var(--ease);
}
.aba:hover{background:rgba(255,255,255,.7);color:var(--tinta)}
.aba.is-ativa{background:var(--branco);color:var(--tinta);box-shadow:var(--sombra-1)}

/* aviso de que o saldo e interno, nao vem do banco */
.aviso{
  display:flex;gap:9px;align-items:flex-start;
  margin:0 0 16px; padding:11px 14px; font-size:12.5px; line-height:1.55; color:#6B5A2E;
  background:var(--ouro-suave); border:1px solid var(--ambar-linha);
  border-radius:var(--r-sm);
}
.aviso svg{width:15px;height:15px;flex:0 0 auto;margin-top:1.5px;color:var(--ouro-forte)}
.aviso strong{color:#57491F;font-weight:600}
.cartao__corpo > .aviso:last-child{margin-bottom:0}

/* flash */
.flash{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 14px;border-radius:var(--r-sm);margin-bottom:16px;
  font-size:13.5px;font-weight:450;line-height:1.5;
}
.flash svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.flash--ok{background:var(--verde-bg);color:var(--verde);border:1px solid var(--verde-linha)}
.flash--erro{background:var(--vermelho-bg);color:var(--vermelho);border:1px solid var(--vermelho-linha)}

/* grafico de barras: divs, sem biblioteca */
.grafico{
  display:flex;align-items:flex-end;gap:10px;height:212px;padding:8px 2px 0;
  border-bottom:1px solid var(--linha);
}
.grafico__col{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:7px;height:100%;border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:background .14s var(--ease);
}
.grafico__col:hover{background:var(--creme)}
.grafico__barras{display:flex;align-items:flex-end;gap:3px;width:100%;height:100%;justify-content:center}
.barra{width:15px;max-width:40%;border-radius:3px 3px 0 0;min-height:2px;transition:opacity .14s var(--ease)}
.barra--rec{background:var(--ouro)}
.barra--desp{background:#3A362E}
.grafico__col:hover .barra{opacity:.82}
.grafico__rot{font-size:10.5px;letter-spacing:.02em;color:var(--neutro);font-variant-numeric:tabular-nums;padding-bottom:6px}
.legenda{display:flex;gap:16px;font-size:12px;color:var(--neutro);margin-top:12px;flex-wrap:wrap}
.legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}

/* barra de progresso do pago */
.progresso{
  height:4px;background:var(--linha);border-radius:var(--r-pill);overflow:hidden;
  margin-top:6px;width:110px;margin-left:auto;
}
.progresso i{display:block;height:100%;background:var(--ouro);border-radius:inherit}

/* login */
.login{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background:var(--tinta);
  position:relative;isolation:isolate;
}
/* Foto de fundo em position:fixed em vez de background-attachment:fixed --
   o attachment trava e pisca no Safari do iPhone. */
.login::before{
  content:'';position:fixed;inset:0;z-index:-2;
  /* 62% e nao 'center': puxa os cavalos para cima e traz o rosto deles para o
     quadro. Cortar um pedaco do alto e proposital -- calibrado na tela real. */
  background:url('../img/login-bg.jpg') center 62%/cover no-repeat;
}
/* Veu: a foto estoura de luz no centro, exatamente onde o cartao branco fica.
   Sem isso a borda do cartao some e o texto cinza perde contraste. */
.login::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(26,18,10,.52),rgba(26,18,10,.26) 42%,rgba(26,18,10,.74));
}
.login__caixa{
  width:100%;max-width:384px;border-radius:16px;padding:32px;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.45);
}
/* Sem desfoque o vidro vira so um veu leitoso e a foto vaza no texto:
   nesse caso o cartao volta a ser quase opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login__caixa{background:rgba(255,255,255,.95)}
}
/* Campo branco solido dentro de cartao translucido denuncia a colagem. */
.login__caixa input{background:rgba(255,255,255,.72)}
.login__caixa input:focus{background:rgba(255,255,255,.92)}

/* Olho da senha. O botao se ancora na CAIXA do input, nao no campo inteiro:
   ancorado no campo ele descia por cima da <span class="dica"> de baixo. */
.senha-caixa{position:relative;display:flex}
.senha-caixa input{padding-right:38px}
.senha-caixa .ver-senha{
  position:absolute;right:1px;top:1px;bottom:1px;width:36px;
  display:grid;place-items:center;
  background:none;border:0;padding:0;color:var(--neutro);cursor:pointer;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:color .14s var(--ease);
}
.senha-caixa .ver-senha:hover{color:var(--tinta)}
.senha-caixa .ver-senha:focus-visible{outline:2px solid var(--ouro);outline-offset:-2px}
.senha-caixa .ver-senha svg{width:17px;height:17px}

.login__rodape{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--linha);
  font-size:12.5px;color:var(--neutro);text-align:center;
}
.login__rodape a{color:var(--ouro-forte);font-weight:500}
.login__marca{display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.login__marca img{width:100%;max-width:148px;height:auto;display:block}
.login__caixa h1{font-size:20px;margin-bottom:5px;letter-spacing:-.022em}
.login__caixa p.dica{margin:0 0 22px}
.login__caixa .btn{width:100%;padding:10px 14px;font-size:13.5px}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s var(--ease);box-shadow:none}
  #nav-toggle:checked ~ .sidebar{transform:none;box-shadow:0 0 0 100vmax rgba(27,25,23,.4)}
  .conteudo{margin-left:0}
  .hamburguer{display:block}
  .corpo{padding:18px 16px 56px}
  .topo{padding:12px 16px}
  .topo h1{font-size:17px}
  .filtros .campo,.filtros .campo--largo{width:100%}
  .filtros .fim{margin-left:0;width:100%}
  .abas{width:100%;overflow-x:auto;flex-wrap:nowrap}
}

/* No celular o topo tem hamburguer + titulo + acoes + usuario em 375px.
   O titulo cede espaco (elipse) e o nome do usuario sai; o botao "Sair" fica. */
@media(max-width:640px){
  .topo{gap:10px}
  .topo > div{min-width:0}
  .topo h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topo__sub{display:none}
  .topo__dir{gap:8px;min-width:0}
  .usuario{padding-left:10px}
  .usuario__nome{display:none}
  .btn{padding:7px 11px}
  .acoes-form .btn{flex:1 1 auto;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.logo-impressao{display:none}
@media print{
  .sidebar,.topo,.filtros,.acoes,.abas,.btn,.flash,.hamburguer,.nao-imprime{display:none !important}
  .logo-impressao{display:block;height:44px;width:auto;margin:0 0 14px}
  .conteudo{margin:0}
  .corpo{padding:0;max-width:none}
  .cartao,.tabela,.kpi{border:1px solid #ddd;box-shadow:none}
  .kpi::before{display:none}
  body{background:#fff;font-size:11px}
  th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* marca inline na celula da tabela: anexo, animal ligado */
.marca{display:inline-flex;vertical-align:-2px;margin-left:5px;color:var(--neutro)}
.marca svg{width:13px;height:13px}

/* paginacao */
.paginacao{display:flex;gap:10px;align-items:center;margin-top:16px}

/* ---------- estados de linha ---------- */
.is-arquivado{opacity:.5}
.tabela tbody tr.is-atual,.cartao table tbody tr.is-atual{background:var(--ouro-suave)}
.tabela tbody tr.is-futuro{background:#FCFBF8}
.is-previsto{color:var(--neutro)}
.linha-abertura{color:var(--neutro)}
.tabela tbody tr.grupo td{
  background:var(--superficie-2);font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);
}
td.recuo{padding-left:30px}

/* ficha de dados: rotulo a esquerda, valor a direita */
.ficha{margin-top:16px;font-size:13px}
.ficha td{padding:6px 0;border-bottom:1px solid var(--linha)}
.ficha td:first-child{color:var(--neutro)}
.ficha tr:last-child td{border-bottom:none}

.par-valores{display:flex;gap:28px;margin-top:14px}
.par-valores strong{font-size:15px;font-variant-numeric:tabular-nums}

/* anexos */
.anexo{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--linha)}
.anexo a{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.anexo a svg{width:14px;height:14px;flex:0 0 auto;color:var(--neutro)}
.anexo a:hover{color:var(--ouro-forte);text-decoration:underline;text-underline-offset:2px}
.anexo .dica{white-space:nowrap}
.anexo-envio{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* filtro compacto dentro do cabecalho de um cartao */
.filtro-linha{display:flex;gap:6px;align-items:center}
.filtro-linha input{width:auto}

.progresso--larga{margin-left:0;width:100%}

/* ---------- chamada de acao ----------
   Uma por tela, no maximo. Existe para o mes que nao foi fechado, que e a
   unica falha do sistema que custa dinheiro de verdade. */
.chamada{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;margin-bottom:20px;
  background:var(--branco);border:1px solid var(--ambar-linha);
  border-radius:var(--r);box-shadow:var(--sombra-1);
}
.chamada > svg{width:22px;height:22px;flex:0 0 auto;color:var(--ouro-forte)}
.chamada > div{flex:1;min-width:0}
.chamada strong{display:block;font-size:13.5px;font-weight:600}
.chamada .sub{margin-top:2px}
.chamada .btn{flex:0 0 auto}
@media(max-width:640px){
  .chamada{flex-wrap:wrap}
  .chamada .btn{width:100%;justify-content:center}
}

/* ---------- fatura do fechamento ---------- */
.fatura{margin-bottom:14px}
.fatura__total{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fatura table input{padding:6px 9px;font-size:13px}
.fatura .entrada-valor{text-align:right;font-variant-numeric:tabular-nums}
.fatura tr.linha-acao td{padding-top:0;padding-bottom:10px;border-bottom:1px solid var(--linha)}
.fatura tbody tr:hover{background:transparent}

/* cotas dos condominos */
.cotas th{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--neutro);text-align:left;padding:0 0 8px;
}
.cotas td{padding:0 0 8px}
.cotas td:first-child{padding-right:10px}
.cotas .num input{text-align:right;font-variant-numeric:tabular-nums}

/* item de fatura resumido na ficha do cliente */
.item-fatura{display:block;font-size:11.5px;color:var(--neutro);line-height:1.6}
.item-fatura b{color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* lista de passos numerada, usada nas telas de ajuda */
.passos{margin:0;padding-left:20px;font-size:12.5px;color:var(--neutro);line-height:1.7}
.passos li{margin-bottom:6px}
.passos strong{color:var(--tinta-2)}
.passos li:last-child{margin-bottom:0}


/* =========================================================================
   Porteira -- a cortina que atravessa a TROCA DE PAGINA.

   Ela fecha sobre a tela de login no instante em que a senha e aceita, o
   navegador troca de pagina atras dela fechada, e o painel abre com ela ja no
   lugar. O truque nao esta no giro e sim no veu: as duas pontas terminam e
   comecam no MESMO veu opaco, entao a emenda nao tem o que denunciar. Por isso
   ele e opaco de verdade (#0F0A04/#241708) e nao translucido -- com alfa a foto
   dos cavalos vazava de um lado e o painel do outro, e a troca aparecia.

   Fecha em 420ms, abre em 780ms. O giro e curto (58 graus) porque quem tira a
   folha da frente e o FADE, nao a rotacao: esperar a madeira sair inteira do
   quadro custava 88 graus e o dobro do tempo. Girar pouco e sumir e mais suave
   e menos da metade da espera.

   A madeira e a foto de verdade, cortada em duas folhas no vinco do meio
   (assets/img/porteira-esq|dir.webp). O corte cai em x=880/888 do original,
   que e a fresta transparente entre os dois montantes centrais: cada metade
   fica com madeira ate a borda de dentro, entao encostadas na tela nao sobra
   risco preto no meio. A tranca de ferro atravessa o vinco na foto -- ela se
   parte sozinha quando as folhas separam, que e o que uma tranca faz mesmo.
   ========================================================================= */
.porteira{
  position:fixed;inset:0;z-index:900;
  perspective:1600px;perspective-origin:50% 46%;
  pointer-events:none;              /* impaciente clica atravessando */
  visibility:hidden;                /* dormente: na tela de login so acorda no envio */
}
.porteira--abre,.porteira--fecha{visibility:visible}

/* Opaco, nao translucido: e a superficie que cobre a troca de pagina. */
.porteira__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#0F0A04,#241708 45%,#0F0A04);
}
/* 'cover' ancorado na borda de DENTRO e o que faz a foto servir em qualquer
   tela sem esticar: o corte sempre cai do lado do mocao, nunca no vinco. Em
   tela larga sobra o mocao inteiro; em celular em pe a foto e cortada nos
   lados e o que se ve e o meio da porteira, de perto -- que continua certo. */
.porteira__meia{
  position:absolute;top:0;bottom:0;width:50%;
  background-repeat:no-repeat;background-size:cover;
  will-change:transform,opacity;
}
.porteira__meia--esq{
  left:0;transform-origin:left center;
  background-image:url('../img/porteira-esq.webp');background-position:right center;
}
.porteira__meia--dir{
  right:0;transform-origin:right center;
  background-image:url('../img/porteira-dir.webp');background-position:left center;
}

/* ---- ABRE: no painel, uma vez, logo depois do login ---- */
.porteira--abre{animation:porteira-fim .86s linear forwards}
.porteira--abre .porteira__veu{animation:porteira-veu .86s cubic-bezier(.4,0,.2,1) forwards}
.porteira--abre .porteira__meia{
  animation-duration:.78s;
  animation-timing-function:cubic-bezier(.25,.6,.3,1);   /* ease-out: sai firme, alivia no fim */
  animation-fill-mode:forwards;
}
.porteira--abre .porteira__meia--esq{animation-name:porteira-esq}
.porteira--abre .porteira__meia--dir{animation-name:porteira-dir;animation-delay:70ms}

@keyframes porteira-fim{ to{ visibility:hidden } }
/* O veu segura opaco no comeco: sem essa pausa a folha e o fundo somem juntos e
   nao sobra revelacao nenhuma -- ja se via tudo antes da porteira sair. */
@keyframes porteira-veu{ 0%,18%{opacity:1} 100%{opacity:0} }
/* A opacidade so comeca a cair depois de 35%: primeiro a folha VIRA, dai some.
   Sumindo desde o quadro zero ela viraria um fade comum com madeira em cima. */
@keyframes porteira-esq{
  0%  {transform:rotateY(0);opacity:1}
  46% {transform:rotateY(-25deg);opacity:1}
  100%{transform:rotateY(-58deg);opacity:0}
}
@keyframes porteira-dir{
  0%  {transform:rotateY(0);opacity:1}
  46% {transform:rotateY(25deg);opacity:1}
  100%{transform:rotateY(58deg);opacity:0}
}

/* ---- FECHA: na tela de login, quando a senha passa ---- */
.porteira--fecha .porteira__veu{animation:porteira-veu-fecha .42s linear forwards}
.porteira--fecha .porteira__meia{
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.3,0,.2,1);
  animation-fill-mode:both;
}
.porteira--fecha .porteira__meia--esq{animation-name:porteira-esq-fecha}
.porteira--fecha .porteira__meia--dir{animation-name:porteira-dir-fecha}

/* Quadros proprios em vez de animation-direction:reverse -- rodar ao contrario
   inverteria tambem a curva, e a folha sairia rapida para chegar devagar. */
@keyframes porteira-esq-fecha{
  0%  {transform:rotateY(-58deg);opacity:0}
  55% {transform:rotateY(-25deg);opacity:1}
  100%{transform:rotateY(0);opacity:1}
}
@keyframes porteira-dir-fecha{
  0%  {transform:rotateY(58deg);opacity:0}
  55% {transform:rotateY(25deg);opacity:1}
  100%{transform:rotateY(0);opacity:1}
}
/* O veu tem de estar OPACO antes da folha encostar, nao junto: e ele que cobre
   a troca de pagina, e ela pode acontecer no quadro seguinte ao ultimo. */
@keyframes porteira-veu-fecha{ 0%{opacity:0} 70%,100%{opacity:1} }

/* A porteira e enfeite puro, entao quem pediu menos movimento simplesmente nao
   a recebe -- nem a cortina, nem a espera dela (o JS desiste junto, veja
   app.js). Nao adianta encurtar: a regra global la de cima ja corta toda
   duracao para .01ms com !important, e o que sobraria e um piscao de um quadro. */
@media(prefers-reduced-motion:reduce){ .porteira{display:none} }

/* ---------- indice de relatorios ----------
   A arvore do sistema antigo, sem a arvore: grupo no topo do cartao, um link por
   linha. Nao vira <details> porque nada aqui e para ficar fechado -- o ponto e
   ver tudo de uma vez e clicar uma so. */
.indice{list-style:none;margin:0;padding:6px 0}
.indice li{border-bottom:1px solid var(--linha)}
.indice li:last-child{border-bottom:none}
.indice a{
  display:block;padding:9px 18px;font-size:13px;color:var(--tinta-2);
  transition:background .12s var(--ease),color .12s var(--ease);
}
.indice a:hover{background:var(--creme);color:var(--tinta)}
.indice__filho a{padding-left:34px;color:var(--neutro);font-size:12.5px}
.indice__filho a::before{content:'└ ';color:var(--linha-forte)}

/* grade do orcamento: doze colunas de numero cabem porque o campo encolhe */
.orc{width:78px;padding:5px 7px;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}