/* =====================================================================
   GIOPLAN — SISTEMA INTERNO
   =====================================================================

   Sistema de design em três camadas:

     1. FUNDAMENTOS  — cor, tipografia, espaçamento, elevação, raios
     2. COMPONENTES  — botões, campos, tabelas, cartões, painéis
     3. TELAS        — o que é específico de cada área

   Duas regras que valem para o arquivo inteiro:

   • Nada de número solto. Espaçamento, raio e sombra saem sempre de uma
     variável. É isso que faz o conjunto parecer desenhado por uma pessoa
     só, em vez de remendado.

   • Toda cor passa por variável. O tema escuro troca só as variáveis, e
     a interface inteira acompanha — sem regra duplicada por tela.

   Os DOCUMENTOS (contrato, orçamento, termos) não carregam este arquivo.
   Eles têm o próprio conjunto em documentos-tokens.css e continuam
   idênticos nos dois temas.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tipografia da marca
   ---------------------------------------------------------------------
   Jost é a fonte do logotipo e dos documentos; usá-la nos títulos amarra o
   sistema à identidade.

   Carregada de ARQUIVO LOCAL, não do Google. O @import que estava aqui
   antes era bloqueante: sem internet, o navegador esperava o tempo de
   desistir da conexão ANTES de pintar a primeira tela. Numa oficina sem
   sinal isso é a diferença entre abrir na hora e abrir depois de uma
   pausa parada.

   @font-face não bloqueia: a tela pinta imediatamente com a reserva e a
   Jost entra assim que estiver pronta (font-display:swap). Se o arquivo
   não existir, cai em silêncio para Century Gothic — que no Windows é
   geométrica quase igual — sem erro e sem espera.

   O src tenta primeiro a fonte instalada na máquina, depois o arquivo.
   --------------------------------------------------------------------- */
@font-face{
  font-family:"Jost";
  src:local("Jost"), local("Jost Regular"),
      url("/fonts/Jost-Variable.woff2") format("woff2-variations"),
      url("/fonts/Jost-Variable.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
}

/* =====================================================================
   1. FUNDAMENTOS
   ===================================================================== */

:root{
  /* ---- marca ---- */
  --grafite:#2C2A28;
  --grafite-claro:#423E3B;
  --madeira:#D0A280;
  /* Escurecida de #A5734A para #8C5F38. O tom antigo é a cor da marca, mas
     como COR DE TEXTO dava 4,08:1 no branco e 3,65:1 no creme — abaixo do
     mínimo legível de 4,5:1. E ela é texto em vinte lugares: todo título de
     seção, aba, legenda e nome de anexo. Agora dá 5,51:1 no branco e 4,94:1
     no creme. Onde ela é preenchimento (botão, gradiente, barra) o efeito é
     só ficar mais firme. O tom claro da marca continua em --madeira. */
  --madeira-escura:#8C5F38;
  --dourado:#D4A574;

  /* ---- neutros ----
     Levemente quentes, para conversar com o papel e a madeira da marca.
     Cinza puro ao lado do amadeirado parece sujo. */
  --bg:#F5F2ED;
  --superficie:#FFFFFF;
  --superficie-2:#FBF9F6;
  --superficie-3:#F1EDE6;
  --branco:#FFFFFF;
  --linha:#E6E0D7;
  --linha-forte:#D6CEC2;
  /* Rampa de texto. Os dois últimos degraus eram bonitos e ilegíveis:
     --texto-suave dava 3,83:1 e --texto-fraco 2,24:1 no branco, quando o
     mínimo é 4,5:1. Escurecidos mantendo o mesmo espaçamento visual entre
     os degraus: agora 15,8 / 7,3 / 5,7 / 4,8. Continua dando para
     distinguir os quatro níveis a olho. */
  --texto:#26231F;
  --texto-medio:#5C554D;
  --texto-suave:#6E665C;
  --texto-fraco:#7A7166;

  /* ---- módulos ---- */
  --azul:#3B7EA8;        --azul-escuro:#2A5D7E;
  --marrom:#B0793F;      --marrom-escuro:#8A5C2C;
  --salmao:#DC7B63;      --salmao-escuro:#B85D46;
  --verde:#4E9440;       --verde-escuro:#3A7030;
  --roxo:#7C5FA8;        --roxo-escuro:#5E4482;
  --ardosia:#5A7280;     --ardosia-escura:#41565F;

  /* ---- estado ---- */
  /* Estados escurecidos: o verde dava 4,30:1 e o vermelho 3,96:1 sobre o
     próprio fundo rosa do cartão de alerta. Agora 5,36:1 e 4,65:1. */
  --sucesso:#35792A;     --sucesso-fundo:#E6F2E1;
  --alerta:#9C6521;      --alerta-fundo:#FBEEDC;
  --perigo:#B34433;      --perigo-fundo:#FBE7E3;
  --vermelho:#B34433;

  /* ---- tipografia ---- */
  --fonte:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --fonte-display:"Jost","Century Gothic",Questrial,"Segoe UI",system-ui,sans-serif;
  --fonte-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  /* Escala subida um degrau inteiro. O corpo estava em 13,5px e os rótulos
     em 10,5px — apertado em monitor de oficina e pequeno demais para quem
     já não enxerga de perto. Nada aqui desce de 12px.

     --t-campo é separado de propósito: campo de formulário abaixo de 16px
     faz o iPhone dar zoom sozinho ao focar, e a tela inteira salta de
     lugar. 16px é o piso, não uma preferência. */
  --t-2xs:12px;    --t-xs:12.5px;  --t-sm:13.5px;  --t-base:15px;
  --t-md:16px;     --t-lg:18px;    --t-xl:21px;    --t-2xl:26px;   --t-3xl:32px;
  --t-campo:16px;

  /* ---- espaçamento (grade de 4) ---- */
  --e-1:4px;   --e-2:8px;   --e-3:12px;  --e-4:16px;
  --e-5:20px;  --e-6:24px;  --e-8:32px;  --e-10:40px; --e-12:48px;

  /* ---- raios ---- */
  --r-sm:8px;  --r-md:11px;  --r-lg:15px;  --r-xl:20px;  --r-full:999px;

  /* ---- elevação ----
     Sombras em duas camadas: uma rente (contorno) e uma difusa
     (profundidade). Uma sombra só sempre parece borrão. */
  --sombra-0:0 1px 2px rgba(44,42,40,.05);
  --sombra:0 1px 2px rgba(44,42,40,.05), 0 4px 12px rgba(44,42,40,.05);
  --sombra-alta:0 2px 4px rgba(44,42,40,.06), 0 12px 28px rgba(44,42,40,.10);
  --sombra-flutuante:0 4px 8px rgba(44,42,40,.08), 0 24px 48px rgba(44,42,40,.16);

  --anel:0 0 0 3px rgba(208,162,128,.22);
  --transicao:.16s cubic-bezier(.4,0,.2,1);

  /* Largura da barra lateral. Fica como variável porque três coisas
     dependem dela ao mesmo tempo: a própria barra, o recuo do corpo da
     página e o recuo da barra de cima. Mudar em um lugar só. */
  --lateral:230px;
}

*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  font-family:var(--fonte);
  font-size:var(--t-base);
  line-height:1.55;
  background:var(--bg);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ text-decoration:none; color:inherit }
button{ font-family:inherit }

/* ---- escala de títulos ----
   Jost nos títulos, com espaçamento negativo: fonte geométrica em corpo
   grande pede aperto, senão as letras parecem soltas. */
h1,h2,h3,h4{
  font-family:var(--fonte-display);
  margin:0;
  color:var(--texto);
  font-weight:500;
}
/* h1 e h2 partilham o tamanho: o título da tela virou h1 (antes toda tela
   começava no h2, sem nível 1), e os subtítulos de seção continuam h2. A
   aparência é a mesma de antes — mudou o significado, não o desenho. */
h1,h2{ font-size:var(--t-2xl); letter-spacing:-.02em; line-height:1.2 }
h3{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--madeira-escura); margin-bottom:var(--e-4);
}

::selection{ background:rgba(208,162,128,.30) }

/* Rolagem discreta, no tom do sistema */
*{ scrollbar-width:thin; scrollbar-color:var(--linha-forte) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:var(--linha-forte); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:var(--texto-fraco); background-clip:content-box }

/* Foco visível para quem navega por teclado — sem poluir o clique de mouse */
:focus-visible{ outline:2px solid var(--madeira-escura); outline-offset:2px; border-radius:var(--r-sm) }

/* =====================================================================
   2. COMPONENTES
   ===================================================================== */

/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  padding:var(--e-3) var(--e-6);
  background:var(--superficie);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:50;
}
/* O blur estava na regra de cima, mas no tema claro o fundo da barra é
   branco opaco — não havia nada atrás para borrar. Era uma camada de
   composição criada à toa em toda tela. No escuro o fundo é .92 e aí o
   efeito existe de verdade, então ele fica só lá. */
.topbar .marca{ display:flex; align-items:center; gap:var(--e-3); flex:0 0 auto }
.topbar .marca svg{ display:block; width:auto; transition:opacity var(--transicao) }
.topbar .marca:hover svg{ opacity:.78 }
.topbar .marca .marca-simbolo{ height:34px; color:#3E3E3E }
.topbar .marca .marca-texto{ height:22px; color:#1E1C1A }

.topbar .usuario-info{ display:flex; align-items:center; gap:var(--e-3); font-size:var(--t-sm) }
.nome-usuario{ font-weight:600; color:var(--texto-medio) }

.logout-link{
  display:inline-flex; align-items:center;
  font-size:var(--t-xs); font-weight:600; color:var(--texto-suave);
  min-height:36px; padding:var(--e-2) var(--e-4); border:1px solid var(--linha);
  border-radius:var(--r-full); transition:var(--transicao);
}
.logout-link:hover{ color:var(--perigo); border-color:var(--perigo); background:var(--perigo-fundo) }

.link-config{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-full);
  color:var(--texto-suave); border:1px solid var(--linha); transition:var(--transicao);
}
.link-config svg{ width:16px; height:16px; transition:transform .3s ease }
.link-config:hover{ color:var(--madeira-escura); border-color:var(--madeira); background:var(--superficie-2) }
.link-config:hover svg{ transform:rotate(45deg) }

/* ---------------------------------------------------------------------
   Barra lateral de navegação
   ---------------------------------------------------------------------
   Antes desta barra a navegação existia só no painel inicial, no fim da
   página, depois dos gráficos. Para ir de Pedidos a Clientes era preciso
   voltar ao início e rolar até embaixo. Agora as áreas ficam à vista em
   todas as telas, sempre no mesmo lugar.

   A barra é `fixed`: não entra no fluxo, então nenhuma tela precisou ser
   reestruturada. Quem reserva o espaço é `body.app` — a classe está nas
   24 telas do sistema e em nenhum documento, que continuam intocados. */
.lateral{
  position:fixed; left:0; top:0; bottom:0; width:var(--lateral); z-index:70;
  display:flex; flex-direction:column;
  padding:var(--e-4) var(--e-3);
  background:var(--superficie);
  border-right:1px solid var(--linha);
  overflow-y:auto; overscroll-behavior:contain;
  /* visibility entra na transição junto com transform: sem ela a gaveta
     sumia de uma vez no meio do deslize. Fechada, visibility:hidden também
     a tira da ordem do Tab — escondida no canto, mas focável, era pior. */
  transition:transform var(--transicao), visibility var(--transicao);
}

.lateral-marca{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-1) var(--e-3) var(--e-5);
}
.lateral-marca svg{ display:block; width:auto; transition:opacity var(--transicao) }
.lateral-marca:hover svg{ opacity:.78 }
.lateral-marca .marca-simbolo{ height:30px; color:#3E3E3E }
.lateral-marca .marca-texto{ height:19px; color:#1E1C1A }

.lateral-lista{
  list-style:none; margin:0 0 var(--e-3); padding:0 0 var(--e-3);
  display:flex; flex-direction:column; gap:2px;
  flex:1 1 auto;
  /* A lista cresce até o rodapé, então esta linha cai exatamente entre o
     que é trabalho do dia e o que é ajuste do sistema. */
  border-bottom:1px solid var(--linha);
}

.lateral-item{
  position:relative;
  display:flex; align-items:center; gap:var(--e-3);
  min-height:42px; padding:0 var(--e-3);
  border-radius:var(--r-md);
  font-size:var(--t-sm); font-weight:500; color:var(--texto-medio);
  transition:var(--transicao);
}
.lateral-item svg{ width:19px; height:19px; flex:0 0 auto; color:var(--texto-suave); transition:var(--transicao) }

/* A cor de cada área, herdada dos cartões grandes que ficavam no fim do
   painel. Ela vive numa pastilha de 28px, não no item inteiro: oito barras
   coloridas empilhadas viram ruído e o item aceso não teria como se
   destacar. Assim a cor identifica e o realce continua sendo realce.

   Os tons não são idênticos aos dos cartões: o cartão era grande e o ícone
   tinha um fundo branco translúcido por baixo. Aqui o traço é fino sobre a
   cor pura, então o tom claro de cada gradiente foi escurecido até o ícone
   branco passar de 4:1. A cor continua a mesma — só o brilho mudou. */
.lat-icone{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 auto;
  border-radius:9px;
  background:linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:var(--transicao);
}
.lateral-item .lat-icone svg{ width:16px; height:16px; color:#fff }
.lateral-item:hover .lat-icone{ transform:scale(1.06) }
.lateral-item:hover .lat-icone svg{ color:#fff }

.lat-inicio{     --c1:#A3754C; --c2:#8C5F38; --tinta:#F8F3EF; --cor-ativa:#8C5F38 }
.lat-pedidos{    --c1:#4285AD; --c2:#2A5D7E; --tinta:#EDF4F8; --cor-ativa:#2A5D7E }
.lat-orcamentos{ --c1:#A67441; --c2:#8A5C2C; --tinta:#F9F3EE; --cor-ativa:#8A5C2C }
.lat-clientes{   --c1:#8B6DB8; --c2:#5E4482; --tinta:#F3F0F8; --cor-ativa:#5E4482 }
.lat-estoque{    --c1:#C0654E; --c2:#B85D46; --tinta:#FCF3F0; --cor-ativa:#AD5742 }
.lat-medicao{    --c1:#5E8C93; --c2:#38585E; --tinta:#EDF4F5; --cor-ativa:#38585E }
.lat-catalogos{  --c1:#8C7BA6; --c2:#584A70; --tinta:#F3F0F7; --cor-ativa:#584A70 }
.lat-agenda{     --c1:#698390; --c2:#41565F; --tinta:#F0F3F4; --cor-ativa:#41565F }
.lat-gestao{     --c1:#4F8D42; --c2:#3A7030; --tinta:#EFF6EE; --cor-ativa:#3A7030 }
/* Configurações não tinha cartão: fica em cinza de propósito, para não
   competir com as áreas de trabalho do dia. */
.lat-instalar{   --c1:#7E8C6A; --c2:#4A5638; --tinta:#F1F4EC; --cor-ativa:#4A5638 }
.lat-config{     --c1:#7C736A; --c2:#57504A; --tinta:#F4F1EE; --cor-ativa:#4A443E }
.lateral-item:hover{ background:var(--superficie-2); color:var(--texto) }

/* Onde o usuário está. Cor sozinha não basta — vem junto o traço à
   esquerda, o peso da fonte e o aria-current no HTML. O tom é o da área:
   quem está em Estoque vê o realce no vermelho do Estoque. */
.lateral-item.ativo{ background:var(--tinta); color:var(--cor-ativa); font-weight:600 }
.lateral-item.ativo::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--c2);
}

.lateral-rodape{ margin-top:auto }

/* Véu por cima da página quando a gaveta abre no celular. Fica sempre no
   HTML e some por visibilidade, não por display: display não anima. */
.lateral-fundo{
  position:fixed; inset:0; z-index:65;
  background:rgba(20,18,16,.48);
  opacity:0; visibility:hidden;
  transition:opacity var(--transicao), visibility var(--transicao);
}

.abrir-lateral{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  background:none; border:1px solid var(--linha); border-radius:var(--r-md);
  color:var(--texto-medio); cursor:pointer; transition:var(--transicao);
}
.abrir-lateral svg{ width:20px; height:20px }
.abrir-lateral:hover{ color:var(--madeira-escura); border-color:var(--madeira); background:var(--superficie-2) }

/* ---------------------------------------------------------------------
   Estrutura de página
   --------------------------------------------------------------------- */
/* O espaço da lateral. Só nas telas do sistema — login e documentos não
   têm a classe e continuam ocupando a largura inteira. */
body.app{ padding-left:var(--lateral) }
/* A barra de cima atravessa por baixo da lateral; o recuo é só do
   conteúdo dela. O logo já está na lateral, então some daqui. */
/* Sem o logo, sobra um filho só na barra: com space-between ele encostava
   à esquerda. O canto do usuário é o direito, em toda tela. */
.topbar.com-lateral .marca{ display:none }
.topbar.com-lateral .usuario-info{ margin-left:auto }

.container{ max-width:1240px; margin:0 auto; padding:var(--e-6) var(--e-6) var(--e-12) }

.voltar{
  display:inline-flex; align-items:center; gap:var(--e-1);
  margin-bottom:var(--e-5); font-size:var(--t-sm); font-weight:500;
  color:var(--texto-suave); transition:var(--transicao);
}
.voltar:hover{ color:var(--madeira-escura); gap:6px }

.cabecalho-pagina{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e-4); flex-wrap:wrap; margin-bottom:var(--e-6);
  padding-bottom:var(--e-4); border-bottom:1px solid var(--linha);
}
.cabecalho-pagina > div{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap }
.cabecalho-pagina > div:first-child{ align-items:baseline }
.sub-pagina{ margin:var(--e-1) 0 0; font-size:var(--t-base); color:var(--texto-suave); width:100% }

.titulo-secao{
  margin:var(--e-8) 0 var(--e-4);
  display:flex; align-items:center; gap:var(--e-3);
}
.titulo-secao::after{ content:""; flex:1; height:1px; background:var(--linha) }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  min-height:42px;
  padding:10px 18px; border-radius:var(--r-md); border:1px solid transparent;
  font-size:var(--t-base); font-weight:600; letter-spacing:.01em;
  color:#fff; cursor:pointer; white-space:nowrap;
  transition:var(--transicao); box-shadow:var(--sombra-0);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sombra) }
.btn:active{ transform:translateY(0); box-shadow:var(--sombra-0) }
.btn svg{ width:16px; height:16px }

/* Os botões coloridos usavam o tom CLARO de cada módulo com texto branco
   em cima. Medido: azul 4,43:1, verde 3,73:1, marrom 3,72:1, salmão
   2,98:1 — todos abaixo de 4,5:1. O tom claro funciona como preenchimento
   de cartão grande, não atrás de texto de 15px.

   A base passa a ser o tom escuro (que já existia, usado no hover) e o
   hover escurece mais um degrau. Agora: azul 7,08 · verde 5,93 · marrom
   5,76 · roxo 8,00. O salmão precisou de um tom próprio: mesmo o escuro
   dele parava em 4,48:1. */
.btn-azul{ background:var(--azul-escuro) }     .btn-azul:hover{ background:#204A64 }
.btn-verde{ background:var(--verde-escuro) }   .btn-verde:hover{ background:#2D5825 }
.btn-marrom{ background:var(--marrom-escuro) } .btn-marrom:hover{ background:#6E4922 }
.btn-salmao{ background:#AC543E }              .btn-salmao:hover{ background:#8F4433 }
.btn-roxo{ background:var(--roxo-escuro) }     .btn-roxo:hover{ background:#4A3568 }
.btn-marca{ background:var(--grafite) }    .btn-marca:hover{ background:#1C1A18 }
.btn-vermelho{ background:var(--perigo) }  .btn-vermelho:hover{ background:#A3402F }

/* Secundário: contorno, para não competir com a ação principal */
.btn-cinza{
  background:var(--superficie); color:var(--texto-medio); border-color:var(--linha-forte);
}
.btn-cinza:hover{ background:var(--superficie-2); border-color:var(--texto-fraco); color:var(--texto) }

.acoes-topo{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-5) }
.acoes-form{ display:flex; gap:var(--e-3); margin-top:var(--e-6); flex-wrap:wrap; align-items:center }

/* Botão discreto, para ações dentro de tabelas e painéis */
.mini{
  display:inline-flex; align-items:center; gap:5px;
  min-height:34px; padding:7px 13px; border-radius:var(--r-sm);
  font-size:var(--t-xs); font-weight:600; color:var(--texto-medio);
  border:1px solid var(--linha); background:var(--superficie);
  cursor:pointer; white-space:nowrap; transition:var(--transicao);
}
.mini:hover{ border-color:var(--madeira); color:var(--madeira-escura); background:var(--superficie-2) }
.mini.perigo{ color:var(--texto-suave) }
.mini.perigo:hover{ border-color:var(--perigo); color:var(--perigo); background:var(--perigo-fundo) }
.mini.ativo{ border-color:var(--madeira); color:var(--madeira-escura); background:rgba(208,162,128,.14) }

/* ---------------------------------------------------------------------
   Barra de ferramentas (busca e filtros)
   --------------------------------------------------------------------- */
.barra-ferramentas{
  display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); padding:var(--e-3) var(--e-4);
  margin-bottom:var(--e-5); box-shadow:var(--sombra-0);
}
.campo-busca{ position:relative; flex:1 1 280px; display:flex; align-items:center; min-width:0 }
.campo-busca svg{
  position:absolute; left:14px; width:16px; height:16px;
  color:var(--texto-fraco); pointer-events:none; transition:var(--transicao);
}
.campo-busca input{
  width:100%; padding:10px 14px 10px 40px;
  font-size:var(--t-base); font-family:inherit;
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-2); color:var(--texto); transition:var(--transicao);
}
.campo-busca input::placeholder{ color:var(--texto-fraco) }
.campo-busca input:focus{
  outline:none; border-color:var(--madeira); background:var(--superficie); box-shadow:var(--anel);
}
.campo-busca input:focus + svg,
.campo-busca:focus-within svg{ color:var(--madeira-escura) }

/* Tinha white-space:nowrap. Serve para etiqueta curta de filtro ("Somente
   com saldo"), mas na entrada de estoque esta mesma classe embrulha uma
   frase inteira — e com o corpo em 15px a frase passou a não caber,
   empurrando a página para fora e criando barra de rolagem horizontal.
   (Regressão do aumento de fonte: em 13,5px ainda cabia por pouco.)

   Quebrar a frase em duas linhas é melhor do que rolar a página inteira de
   lado. O que não pode encolher é a caixa de marcar, por isso o
   flex-shrink:0 nela. */
.filtro-rapido{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-sm); font-weight:500; color:var(--texto-medio);
  cursor:pointer; user-select:none;
  max-width:100%;
  padding:8px 12px; border-radius:var(--r-md); border:1px solid transparent;
  transition:var(--transicao);
}
.filtro-rapido:hover{ background:var(--superficie-2); border-color:var(--linha) }
.filtro-rapido input{
  accent-color:var(--madeira-escura); width:15px; height:15px; cursor:pointer;
  flex-shrink:0;
}

.filtro-status{ position:relative }
#btn-filtro{
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:10px 15px; font-size:var(--t-sm); font-weight:600;
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-2); color:var(--texto-medio); cursor:pointer;
  transition:var(--transicao);
}
#btn-filtro:hover{ border-color:var(--madeira); color:var(--madeira-escura) }
#btn-filtro svg{ width:13px; height:13px; transition:transform var(--transicao) }
.painel-filtro.aberto ~ #btn-filtro svg{ transform:rotate(180deg) }

.painel-filtro{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:30;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); box-shadow:var(--sombra-flutuante);
  padding:var(--e-2); min-width:268px;
  animation:surgir .16s cubic-bezier(.4,0,.2,1);
}
.painel-filtro.aberto{ display:block }
@keyframes surgir{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

.painel-filtro-acoes{
  display:flex; gap:var(--e-1); padding:var(--e-1) var(--e-1) var(--e-2);
  border-bottom:1px solid var(--linha); margin-bottom:var(--e-1);
}
.painel-filtro-acoes button{
  flex:1; padding:6px; font-size:var(--t-2xs); font-weight:600;
  border:1px solid var(--linha); border-radius:var(--r-sm);
  background:var(--superficie-2); color:var(--texto-suave); cursor:pointer;
  transition:var(--transicao);
}
.painel-filtro-acoes button:hover{ border-color:var(--madeira); color:var(--madeira-escura) }

.opcao-status{
  display:flex; align-items:center; gap:var(--e-2);
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:var(--t-sm); cursor:pointer; transition:var(--transicao);
}
.opcao-status:hover{ background:var(--superficie-3) }
.opcao-status input{ accent-color:var(--madeira-escura); cursor:pointer }
.opcao-status .ponto{ width:13px; height:13px; border-radius:5px; border:1.5px solid; flex:0 0 auto }

.resumo-lista{
  font-size:var(--t-xs); font-weight:500; color:var(--texto-suave);
  margin-left:auto; white-space:nowrap;
}

/* ---------------------------------------------------------------------
   Tabelas
   --------------------------------------------------------------------- */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-0);
}
th,td{ text-align:left; padding:13px var(--e-4); font-size:var(--t-base) }
th{
  background:var(--superficie-2);
  font-family:var(--fonte-display);
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texto-suave); white-space:nowrap;
  border-bottom:1px solid var(--linha);
}
td{ border-bottom:1px solid var(--linha); color:var(--texto-medio) }
tbody tr:last-child td{ border-bottom:0 }
tbody tr{ transition:background var(--transicao) }
tbody tr:hover td{ background:var(--superficie-2) }

td.dir,th.dir{ text-align:right }
td.num{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; color:var(--texto) }
td.nome{ font-weight:500; color:var(--texto) }
td.acoes{ white-space:nowrap; text-align:right }
td.acoes .mini + .mini,
td.acoes form{ margin-left:var(--e-1) }
td.acoes form{ display:inline }
.vazio-inline{ color:var(--texto-fraco); font-style:italic }

.vazio{
  padding:var(--e-12) var(--e-6); text-align:center;
  color:var(--texto-suave); font-size:var(--t-base);
  background:var(--superficie); border:1px dashed var(--linha-forte);
  border-radius:var(--r-lg);
}

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */
form.card-form{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); box-shadow:var(--sombra);
  padding:var(--e-2) var(--e-6) var(--e-6); max-width:980px;
}
.bloco-form{ border:0; border-top:1px solid var(--linha); margin:0; padding:var(--e-5) 0 var(--e-1) }
.bloco-form:first-of-type{ border-top:0 }
.bloco-form legend{
  font-family:var(--fonte-display);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--madeira-escura); padding:0 var(--e-2) 0 0;
}

.campo{ margin-bottom:var(--e-4) }
.campo label{
  display:block; font-size:var(--t-sm); font-weight:600;
  margin-bottom:6px; color:var(--texto-medio);
}
.campo input, .campo select, .campo textarea{
  width:100%; min-height:42px; padding:10px 13px;
  font-size:var(--t-campo); font-family:inherit; color:var(--texto);
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--texto-fraco) }
.campo textarea{ min-height:88px; resize:vertical; line-height:1.6 }
.campo input:hover, .campo select:hover, .campo textarea:hover{ border-color:var(--linha-forte) }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--madeira); background:var(--superficie); box-shadow:var(--anel);
}
.campo input:disabled, .campo-calculado{
  background:var(--superficie-3); color:var(--texto-suave); cursor:not-allowed; border-style:dashed;
}
.campo .ajuda{
  display:block; margin-top:6px; font-size:var(--t-xs);
  color:var(--texto-suave); line-height:1.5;
}

.linha-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--e-5) }
.linha-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 var(--e-5) }
.select-status{ font-weight:600 }
.campo-calculado{ font-weight:600 }

.aviso-suave{
  font-size:var(--t-base); color:var(--madeira-escura); background:rgba(208,162,128,.10);
  border:1px solid rgba(208,162,128,.32); border-left:3px solid var(--madeira);
  padding:var(--e-3) var(--e-4); border-radius:var(--r-md); margin:0 0 var(--e-5); line-height:1.55;
}
.erro-login{
  color:var(--perigo); background:var(--perigo-fundo); border:1px solid rgba(192,80,63,.28);
  font-size:var(--t-sm); padding:10px var(--e-3); border-radius:var(--r-sm); margin-bottom:var(--e-4);
}
.aviso-sucesso{
  background:var(--sucesso-fundo); border:1px solid rgba(62,138,49,.28);
  border-left:3px solid var(--sucesso); color:var(--sucesso);
  font-size:var(--t-base); padding:10px var(--e-4); border-radius:var(--r-md); margin-bottom:var(--e-4);
}

/* ---------------------------------------------------------------------
   Cartões e detalhe
   --------------------------------------------------------------------- */
.grade-detalhe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--e-4) }
.cartao{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); box-shadow:var(--sombra-0); padding:var(--e-5) var(--e-6);
}
.detalhe-box{ margin:0 }
.detalhe-box dt{
  font-family:var(--fonte-display);
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texto-suave); margin-top:var(--e-3);
}
.detalhe-box dt:first-child{ margin-top:0 }
.detalhe-box dd{ margin:3px 0 0; font-size:var(--t-base); line-height:1.55; color:var(--texto) }
.detalhe-box.discreto{ margin-top:var(--e-4); padding-top:var(--e-3); border-top:1px solid var(--linha) }
.detalhe-box.discreto dd{ font-size:var(--t-sm); color:var(--texto-suave) }
.valor-forte{ font-size:var(--t-xl) !important; font-weight:600; letter-spacing:-.01em }
.valor-pendente{ color:var(--perigo); font-weight:600 }
.valor-quitado{ color:var(--sucesso); font-weight:600 }
.texto-observacao{ margin:0; font-size:var(--t-base); line-height:1.65; white-space:pre-wrap; color:var(--texto-medio) }

/* ---------------------------------------------------------------------
   Etiquetas e marcadores
   --------------------------------------------------------------------- */
.etiqueta-status{
  display:inline-block; padding:4px 12px; border-radius:var(--r-full);
  border:1.5px solid; background:rgba(255,255,255,.55);
  font-size:var(--t-xs); font-weight:700; white-space:nowrap; letter-spacing:.01em;
}
.etiqueta-status.grande{ font-size:var(--t-base); padding:6px 16px }

.etiqueta-papel{
  display:inline-block; padding:3px 11px; border-radius:var(--r-full);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.03em; border:1.5px solid;
}
.etiqueta-papel.admin{ background:#DCEAF3; border-color:#8CB6CE; color:#28607F }
.etiqueta-papel.user{ background:var(--superficie-3); border-color:var(--linha-forte); color:var(--texto-medio) }

.etiqueta-arquivado{
  display:inline-block; margin-left:7px; padding:2px 9px; border-radius:var(--r-full);
  background:var(--superficie-3); border:1px solid var(--linha-forte); color:var(--texto-suave);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.etiqueta-baixo{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:var(--r-full);
  background:var(--alerta-fundo); color:var(--alerta);
  font-size:var(--t-2xs); font-weight:700; text-transform:uppercase;
}
.cat-tag{
  display:inline-block; padding:3px 10px; border-radius:var(--r-full);
  font-size:var(--t-2xs); font-weight:500;
  background:var(--superficie-3); color:var(--texto-suave); white-space:nowrap;
}
.tag{ display:inline-block; padding:4px 11px; border-radius:var(--r-full); font-size:var(--t-xs); font-weight:700; color:#fff }
.tag.andamento{ background:var(--azul) }
.tag.concluido,.tag.fechado{ background:var(--verde) }
.tag.aberto{ background:var(--marrom) }
.tag.convertido{ background:var(--texto-suave) }

.codigo-material{
  font-family:var(--fonte-mono); font-size:var(--t-sm);
  color:var(--madeira-escura); letter-spacing:-.02em;
}
.colmeia{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 9px; border-radius:var(--r-sm);
  background:var(--grafite); color:#F2EAE0;
  font-size:var(--t-base); font-weight:700; font-variant-numeric:tabular-nums;
}
.colmeia.vazia{ background:transparent; color:var(--texto-fraco); font-weight:400 }

.prazo-data{ font-variant-numeric:tabular-nums; white-space:nowrap }
.prazo-indefinido{ display:flex; flex-direction:column; line-height:1.3; white-space:nowrap }
.prazo-indefinido small{ font-size:var(--t-2xs); color:var(--texto-fraco); font-style:italic }
.contagem{
  display:inline-block; padding:4px 10px; border-radius:var(--r-sm);
  font-size:var(--t-xs); font-weight:700; white-space:nowrap; background:rgba(255,255,255,.7);
}
.contagem.tranquilo{ color:var(--sucesso) }
.contagem.apertado{ color:var(--alerta) }
.contagem.atrasado{ color:var(--perigo); background:rgba(192,80,63,.16) }

.sem-valor{ color:var(--texto-fraco); font-size:var(--t-md); letter-spacing:.12em; cursor:help }
.sem-acesso{
  font-size:var(--t-sm); color:var(--texto-suave); font-style:italic; line-height:1.55;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--superficie-3); border:1px dashed var(--linha-forte);
}

/* ---------------------------------------------------------------------
   Janela flutuante (usada por agenda, finanças e IA)
   --------------------------------------------------------------------- */
.ia-fundo{
  position:fixed; inset:0; z-index:120; padding:var(--e-6);
  background:rgba(30,28,26,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  animation:aparecer .18s ease;
}
/* Sem esta linha a janela NUNCA fecha: o display:flex acima vence a regra
   padrão do navegador para o atributo hidden, então esconder no JavaScript
   não tinha efeito nenhum — a janela da agenda abria sozinha e o botão
   Cancelar não fazia nada. */
.ia-fundo[hidden]{ display:none }
@keyframes aparecer{ from{ opacity:0 } to{ opacity:1 } }
.ia-caixa{
  background:var(--superficie); border-radius:var(--r-xl);
  padding:var(--e-6) var(--e-6) var(--e-5);
  width:min(880px,100%); max-height:88vh; overflow:auto;
  box-shadow:var(--sombra-flutuante); border:1px solid var(--linha);
  animation:subir .22s cubic-bezier(.4,0,.2,1);
}
@keyframes subir{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.ia-caixa h3{ margin-bottom:var(--e-4) }
.ia-colunas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-4) }
.ia-rot{
  display:block; font-size:var(--t-2xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texto-suave); margin-bottom:7px;
}
.ia-texto{
  border:1px solid var(--linha); border-radius:var(--r-md); padding:13px 15px;
  font-size:var(--t-base); line-height:1.65; min-height:140px; white-space:pre-wrap; color:var(--texto);
}
.ia-original{ background:var(--superficie-3); color:var(--texto-suave) }
.ia-sugerido{ background:var(--superficie); border-color:var(--madeira); outline:none }
.ia-sugerido:focus{ box-shadow:var(--anel) }
.ia-nota{ font-size:var(--t-sm); color:var(--texto-suave); margin:var(--e-4) 0 0; line-height:1.55 }
.ia-acoes{ display:flex; justify-content:flex-end; gap:var(--e-2); margin-top:var(--e-5) }
.ia-acoes button{
  padding:11px 20px; border-radius:var(--r-md); font-size:var(--t-base); font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:var(--transicao);
}
.ia-cancelar{ background:var(--superficie); border-color:var(--linha-forte); color:var(--texto-medio) }
.ia-cancelar:hover{ background:var(--superficie-2); border-color:var(--texto-fraco) }
.ia-usar{ background:var(--madeira-escura); color:#fff; box-shadow:var(--sombra-0) }
.ia-usar:hover{ background:#8F6134; transform:translateY(-1px); box-shadow:var(--sombra) }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--e-5);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(208,162,128,.16), transparent 55%),
    linear-gradient(150deg,#1E1C1A 0%,#2C2A28 45%,#4A3A2C 100%);
}
.login-box{
  background:var(--superficie); padding:var(--e-10) var(--e-8) var(--e-8);
  border-radius:var(--r-xl); width:368px; text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.18);
  animation:subir .4s cubic-bezier(.16,1,.3,1);
}
.login-box svg.logo-login,
.login-box img.logo-login{ width:100%; max-width:196px; height:auto; margin-bottom:var(--e-5); color:#3E3E3E }
/* Virou h1: a tela não tinha nenhum título de nível 1, então a página não
   tinha nome para leitor de tela nem para índice de cabeçalhos. O texto e
   a aparência são exatamente os mesmos — mudou só o significado da tag.
   Cor subida de --texto-fraco para --texto-suave: em caixa alta de 12,5px
   o tom mais claro ficava difícil de ler. */
.login-box h1.sub{
  font-family:var(--fonte);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-suave); margin:0 0 var(--e-6);
}
.login-box form{ text-align:left }
/* Substitui o style="width:100%" que estava escrito na tag do botão.
   Largura é aparência: sai do HTML e vem para cá, como todo o resto. */
.btn-largo{ width:100% }
.login-box .btn{ width:100%; padding:12px; margin-top:var(--e-1) }

/* ---------------------------------------------------------------------
   Aviso de permissão
   --------------------------------------------------------------------- */
.cartao-aviso{ max-width:540px; margin:var(--e-12) auto; text-align:center; padding:var(--e-10) var(--e-8) }
.cartao-aviso h2{ margin:0 0 var(--e-3) }
.cartao-aviso p{ color:var(--texto-suave); font-size:var(--t-md); line-height:1.65; margin:0 0 var(--e-6) }
.icone-cadeado{
  width:68px; height:68px; margin:0 auto var(--e-5); border-radius:var(--r-full);
  background:var(--superficie-3); color:var(--madeira-escura);
  display:flex; align-items:center; justify-content:center;
}
.icone-cadeado svg{ width:31px; height:31px }

/* ---------------------------------------------------------------------
   Gerenciamento de usuários
   --------------------------------------------------------------------- */
.painel-usuario td{ background:var(--superficie-2); padding:var(--e-4) }
.acoes-usuario{ display:flex; flex-wrap:wrap; gap:var(--e-5); align-items:flex-end }
.linha-acao{ display:flex; flex-direction:column; gap:6px }
.linha-acao label{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--texto-suave);
}
.linha-acao input, .linha-acao select{
  padding:9px 12px; font-size:var(--t-base); font-family:inherit;
  border:1px solid var(--linha); border-radius:var(--r-sm);
  background:var(--superficie); color:var(--texto); transition:var(--transicao);
}
.linha-acao input:focus, .linha-acao select:focus{
  outline:none; border-color:var(--madeira); box-shadow:var(--anel);
}
.linha-acao button{ align-self:flex-start }

/* Escolha de tema */
.escolha-tema{ display:flex; gap:var(--e-3); flex-wrap:wrap }
.opt-tema{
  flex:1 1 158px; display:flex; flex-direction:column; gap:var(--e-3); cursor:pointer;
  padding:var(--e-3); border:2px solid var(--linha); border-radius:var(--r-lg);
  background:var(--superficie); transition:var(--transicao); text-align:left;
}
.opt-tema:hover{ border-color:var(--madeira); transform:translateY(-2px) }
.opt-tema.ativo{ border-color:var(--madeira); box-shadow:var(--anel) }
.opt-tema .amostra{
  height:58px; border-radius:var(--r-sm); display:flex; overflow:hidden;
  border:1px solid var(--linha);
}
.opt-tema .amostra i{ display:block; height:100% }
.amostra-clara i:nth-child(1){ width:26%; background:#F5F2ED }
.amostra-clara i:nth-child(2){ width:48%; background:#FFFFFF }
.amostra-clara i:nth-child(3){ width:26%; background:#2C2A28 }
.amostra-escura i:nth-child(1){ width:26%; background:#141210 }
.amostra-escura i:nth-child(2){ width:48%; background:#1E1B18 }
.amostra-escura i:nth-child(3){ width:26%; background:#D0A280 }
.opt-tema .nome-tema{ font-size:var(--t-base); font-weight:600; color:var(--texto) }
.opt-tema .desc-tema{ font-size:var(--t-sm); color:var(--texto-suave); line-height:1.5 }

/* =====================================================================
   3. TELAS
   ===================================================================== */

/* ---------------------------------------------------------------------
   Painel inicial
   --------------------------------------------------------------------- */
.painel-topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e-5); flex-wrap:wrap; margin-bottom:var(--e-6);
}
.painel-data{
  display:block; font-family:var(--fonte-display);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--madeira-escura); margin-bottom:var(--e-2);
}
.painel-topo h2{ font-size:var(--t-3xl) }
.painel-topo p{ margin:var(--e-2) 0 0; color:var(--texto-suave); font-size:var(--t-md) }
.frase-alerta{ color:var(--perigo) !important; font-weight:600 }
.painel-acoes{ display:flex; gap:var(--e-2); flex-wrap:wrap }

.atalho{
  display:inline-flex; align-items:center; gap:var(--e-2);
  min-height:42px; padding:10px 18px; border:1px solid var(--linha); border-radius:var(--r-full);
  background:var(--superficie); font-size:var(--t-sm); font-weight:600;
  color:var(--texto-medio); transition:var(--transicao); box-shadow:var(--sombra-0);
}
.atalho svg{ width:16px; height:16px }
.atalho:hover{
  color:var(--madeira-escura); border-color:var(--madeira);
  transform:translateY(-1px); box-shadow:var(--sombra);
}
.atalho-config{
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:10px 18px; border:1px solid var(--linha); border-radius:var(--r-full);
  background:var(--superficie); font-size:var(--t-sm); font-weight:600; color:var(--texto-medio);
}
.atalho-config svg{ width:16px; height:16px }
.atalho-config:hover{ color:var(--madeira-escura); border-color:var(--madeira) }

/* Faixa de indicadores — leitura rápida, tipo painel de acompanhamento */
/* Era grid com auto-fit. Quando a quantidade de cartões não fechava a
   linha — 9 cartões em 8 colunas, que é o caso do administrador — a última
   linha ficava com um cartão só e as colunas restantes viravam um retângulo
   bege, porque o fundo do container (a cor do fio de 1px) aparecia onde não
   havia cartão.

   Flex resolve de vez: no flex os itens da última linha CRESCEM para
   preencher a largura. Não sobra célula vazia em nenhuma largura de tela,
   com qualquer quantidade de cartões. O fio de 1px entre eles continua
   sendo o fundo aparecendo pelo gap. */
.faixa-indicadores{
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--e-5);
  box-shadow:var(--sombra-0);
}
.indicador{
  flex:1 1 150px; min-width:0;
  background:var(--superficie); padding:var(--e-4) var(--e-4);
  display:flex; flex-direction:column; gap:6px; transition:var(--transicao);
  position:relative;
}
.indicador:hover{ background:var(--superficie-2) }
a.indicador::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--madeira); transform:scaleX(0); transition:transform var(--transicao);
}
a.indicador:hover::after,
a.indicador:focus-visible::after{ transform:scaleX(1) }
.ind-valor{
  font-family:var(--fonte-display);
  font-size:var(--t-2xl); font-weight:500; line-height:1;
  color:var(--texto); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.ind-rotulo{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-suave);
}
/* O alerta era comunicado só por cor: fundo rosa e número vermelho. Quem
   não separa vermelho de cinza via nove cartões iguais. Agora vem também
   uma barra na lateral e um sinal antes do rótulo — a informação chega por
   forma, não só por matiz. */
.indicador.alerta{ background:var(--perigo-fundo); box-shadow:inset 3px 0 0 var(--perigo) }
.indicador.alerta .ind-valor{ color:var(--perigo) }
.indicador.alerta .ind-rotulo{ color:var(--perigo) }
.indicador.alerta .ind-rotulo::before{
  content:"! "; font-weight:700; letter-spacing:0;
}
.indicador.carregando .ind-valor{ color:var(--texto-fraco) }
.ind-valor.entrada{ color:var(--sucesso) }
.ind-valor.saida{ color:var(--perigo) }

.painel-duplo{
  display:grid; grid-template-columns:1.1fr 1fr; gap:var(--e-4); margin-bottom:var(--e-6);
}
.bloco-painel{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:var(--sombra-0); padding:var(--e-5); min-height:210px;
}
.bloco-cabecalho{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  margin-bottom:var(--e-4);
}
.bloco-cabecalho h3{ margin:0 }
.atualizado{ font-size:var(--t-2xs); color:var(--texto-fraco); white-space:nowrap }
/* Cor sobe para --texto-medio: esta mensagem também aparece dentro do
   calendário da agenda, cujo fundo é a cor de fio (#E6E0D7), mais escura
   que o cartão branco. Sobre ela o tom anterior parava em 4,31:1. */
.carregando-bloco{ padding:var(--e-8) 0; text-align:center; color:var(--texto-medio); font-size:var(--t-base) }

/* Módulos */
.painel-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4) }
.modulo{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); padding:var(--e-5) var(--e-5) var(--e-5);
  min-height:164px; display:flex; flex-direction:column; gap:var(--e-3);
  color:#fff; box-shadow:var(--sombra);
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.modulo::after{
  content:""; position:absolute; z-index:-1; right:-46px; top:-56px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 68%);
}
a.modulo:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta) }
.modulo-icone{
  width:48px; height:48px; border-radius:var(--r-md); flex:0 0 auto;
  background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transicao);
}
a.modulo:hover .modulo-icone{ background:rgba(255,255,255,.28); transform:scale(1.04) }
.modulo-icone svg{ width:24px; height:24px }
.modulo-texto{ display:flex; flex-direction:column; gap:var(--e-1); margin-top:auto }
.modulo-texto strong{ font-family:var(--fonte-display); font-size:var(--t-xl); font-weight:500; letter-spacing:-.01em }
.modulo-texto small{ font-size:var(--t-sm); line-height:1.5; opacity:.90 }
.modulo-seta{
  position:absolute; right:var(--e-5); bottom:var(--e-5); width:28px; height:28px;
  border-radius:var(--r-full); background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(-6px); transition:var(--transicao);
}
.modulo-seta svg{ width:14px; height:14px }
a.modulo:hover .modulo-seta{ opacity:1; transform:translateX(0) }

.modulo-pedidos{    background:linear-gradient(145deg,#4B93BE,#2A5D7E) }
.modulo-clientes{   background:linear-gradient(145deg,#8B6DB8,#5E4482) }
.modulo-orcamentos{ background:linear-gradient(145deg,#C08A54,#8A5C2C) }
.modulo-estoque{    background:linear-gradient(145deg,#E0876D,#B85D46) }
.modulo-agenda{     background:linear-gradient(145deg,#6C8794,#41565F) }
.modulo-gestao{     background:linear-gradient(145deg,#5FA451,#3A7030) }
.modulo-financas{   background:linear-gradient(145deg,#5FA451,#3A7030) }
.modulo-equipe{     background:linear-gradient(145deg,#8B6DB8,#5E4482) }
.modulo-fixas{      background:linear-gradient(145deg,#C08A54,#8A5C2C) }
.modulo-planilha{   background:linear-gradient(145deg,#6C8794,#41565F) }
.modulo.bloqueado{
  background:linear-gradient(145deg,#B0AAA2,#8E8880); cursor:not-allowed; box-shadow:var(--sombra-0);
}
.modulo.bloqueado:hover{ transform:none }

/* Painel da marca */
.tile-marca{
  background:linear-gradient(155deg,var(--grafite) 12%,var(--grafite-claro));
  border:1px solid rgba(212,165,116,.20);
  gap:0; justify-content:space-between; color:#EFE7D9;
}
.tile-marca::after{ display:none }
.marca-agua{
  position:absolute; z-index:-1; right:-30px; bottom:-38px;
  width:180px; height:180px; opacity:.11; pointer-events:none; color:var(--madeira);
}
.marca-agua svg{ width:100%; height:100%; display:block }
.tile-marca-topo{ display:flex; align-items:center }
.tile-lockup{ height:21px; width:auto; display:block; color:var(--dourado) }
.tile-numeros{ display:flex; gap:var(--e-5); margin-top:var(--e-4); flex-wrap:wrap }
.tile-num{ display:flex; flex-direction:column }
.tile-num .v{
  font-family:var(--fonte-display); font-size:var(--t-2xl); font-weight:500;
  line-height:1; color:#FFF8F0; font-variant-numeric:tabular-nums;
}
.tile-num .r{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(212,165,116,.92); margin-top:6px;
}
.tile-alerta{
  margin-top:var(--e-3); padding-top:var(--e-3);
  border-top:1px solid rgba(212,165,116,.22); font-size:var(--t-sm); color:#E8B9A6;
}

/* Pendências */
.lista-pendencias{ display:flex; flex-direction:column; gap:var(--e-2); max-height:352px; overflow-y:auto; padding-right:var(--e-1) }
.pendencia{
  display:flex; align-items:center; gap:var(--e-3); padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.pendencia:hover{ border-color:var(--madeira); background:var(--superficie); transform:translateX(2px) }
.pend-marca{ width:4px; align-self:stretch; border-radius:var(--r-full); flex:0 0 auto }
.pendencia.critico .pend-marca{ background:var(--perigo) }
.pendencia.atencao .pend-marca{ background:var(--alerta) }
.pendencia.aviso .pend-marca{ background:var(--texto-fraco) }
.pend-corpo{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.pend-titulo{ font-size:var(--t-base); font-weight:600; color:var(--texto) }
.pend-sub{ font-size:var(--t-xs); color:var(--texto-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pend-lado{
  font-size:var(--t-xs); font-weight:700; white-space:nowrap; padding:5px 10px;
  border-radius:var(--r-full); background:var(--superficie-3); color:var(--texto-suave);
}
.pendencia.critico .pend-lado{ background:var(--perigo-fundo); color:var(--perigo) }
.pendencia.atencao .pend-lado{ background:var(--alerta-fundo); color:var(--alerta) }

.tudo-certo{
  display:flex; flex-direction:column; align-items:center; gap:var(--e-3);
  padding:var(--e-10) var(--e-4); color:var(--sucesso); font-size:var(--t-base); text-align:center;
}
.tudo-certo svg{ width:38px; height:38px; opacity:.75 }
.tudo-certo.suave{ color:var(--texto-suave) }

/* Agenda no painel */
.legenda-agenda{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-bottom:var(--e-3) }
.leg-item{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); color:var(--texto-suave) }
.leg-cor{ width:11px; height:11px; border-radius:4px; border:1.5px solid }
.cor-entrada{ background:var(--verde); border-color:var(--verde) }
.cor-saida{ background:var(--salmao); border-color:var(--salmao) }

.lista-agenda{ display:flex; flex-direction:column; gap:var(--e-3); max-height:352px; overflow-y:auto; padding-right:var(--e-1) }
.dia-agenda{ display:flex; flex-direction:column; gap:6px }
.dia-rot{
  font-family:var(--fonte-display); font-size:var(--t-2xs); font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--madeira-escura);
}
.compromisso{
  display:flex; flex-direction:column; gap:2px; padding:10px 13px;
  border:1px solid; border-radius:var(--r-md); transition:var(--transicao);
}
.compromisso:hover{ filter:brightness(.97); transform:translateX(2px) }
.comp-tipo{ font-size:var(--t-xs); font-weight:700; letter-spacing:.04em }
.comp-info{ font-size:var(--t-sm); color:#4A4540 }

/* ---------------------------------------------------------------------
   Agenda (tela cheia)
   --------------------------------------------------------------------- */
.periodo-atual{ font-size:var(--t-base); font-weight:600; color:var(--texto-medio) }
.calendario{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-0);
}
.dia-cel{
  background:var(--superficie); min-height:126px; padding:10px;
  display:flex; flex-direction:column; gap:6px;
}
.dia-cel.hoje{ background:rgba(208,162,128,.09) }
.dia-cab{ display:flex; align-items:center; gap:6px }
.dia-num{ font-family:var(--fonte-display); font-size:var(--t-md); font-weight:600; color:var(--texto) }
.dia-sem{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.07em; color:var(--texto-fraco) }
.dia-add{
  margin-left:auto; width:22px; height:22px; border-radius:var(--r-sm); cursor:pointer;
  border:1px dashed var(--linha-forte); background:transparent; color:var(--texto-fraco);
  font-size:15px; line-height:1; padding:0; transition:var(--transicao);
}
.dia-add:hover{ border-color:var(--madeira); color:var(--madeira-escura); border-style:solid; background:var(--superficie-2) }

.cel-item{
  border:1px solid; border-radius:var(--r-sm); padding:8px 9px;
  display:flex; flex-direction:column; gap:2px; transition:var(--transicao);
}
.cel-item:hover{ filter:brightness(.98) }
.cel-item.concluido{ opacity:.5 }
.cel-item.concluido .cel-cliente{ text-decoration:line-through }
.cel-topo{ display:flex; align-items:baseline; gap:6px }
.cel-tipo{ font-size:var(--t-2xs); font-weight:700; letter-spacing:.04em }
.cel-hora{ font-size:var(--t-2xs); color:var(--texto-medio); margin-left:auto; font-variant-numeric:tabular-nums }
.cel-cliente{ font-size:var(--t-sm); font-weight:600; color:#33302C }
.cel-pedido{ font-size:var(--t-2xs); color:var(--texto-medio); font-variant-numeric:tabular-nums }
.cel-obs{ font-size:var(--t-2xs); color:var(--texto-medio); line-height:1.4 }
.cel-acoes{ display:flex; gap:5px; margin-top:5px; flex-wrap:wrap }
.cel-acoes button{
  font-size:var(--t-2xs); padding:4px 8px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.65); color:#4A4540;
  transition:var(--transicao);
}
.cel-acoes button:hover{ background:#fff }
.cel-acoes button.perigo{ color:var(--perigo) }

.escolha-tipo{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.opt-tipo{
  padding:9px 16px; border-radius:var(--r-md); border:1.5px solid; cursor:pointer;
  font-size:var(--t-base); font-weight:600; opacity:.55; transition:var(--transicao);
}
.opt-tipo:hover{ opacity:.8 }
.opt-tipo.ativo{ opacity:1; box-shadow:var(--anel) }

/* ---------------------------------------------------------------------
   Pedido: abas, documentos, anexos, pagamentos
   --------------------------------------------------------------------- */
.abas{
  display:flex; gap:var(--e-1); margin-bottom:var(--e-5);
  border-bottom:1px solid var(--linha); flex-wrap:wrap;
}
.aba{
  padding:12px 20px; border:0; background:transparent; cursor:pointer;
  font-size:var(--t-base); font-weight:600; color:var(--texto-suave);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transicao);
}
.aba:hover{ color:var(--madeira-escura); background:var(--superficie-2) }
.aba.ativa{ color:var(--texto); border-bottom-color:var(--madeira) }
.conta-aba{
  display:inline-block; min-width:19px; padding:1px 7px; border-radius:var(--r-full);
  background:var(--madeira); color:#fff; font-size:var(--t-2xs); font-weight:700; margin-left:6px;
}
.conta-aba:empty{ display:none }

.lista-documentos{ display:flex; flex-direction:column; gap:var(--e-3) }
.doc-item{
  display:flex; align-items:center; gap:var(--e-4); padding:var(--e-5);
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:var(--sombra-0); flex-wrap:wrap; transition:var(--transicao);
}
.doc-item:hover{ border-color:var(--linha-forte); box-shadow:var(--sombra) }
.doc-icone{
  width:52px; height:52px; border-radius:var(--r-md); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.doc-icone svg{ width:24px; height:24px }
.doc-contrato{    background:linear-gradient(145deg,#5FA451,#3A7030) }
.doc-contratacao{ background:linear-gradient(145deg,#C08A54,#8A5C2C) }
.doc-entrega{     background:linear-gradient(145deg,#4B93BE,#2A5D7E) }
/* Verde do Gestão: o plano de corte é documento de produção, não de
   negociação com o cliente — a cor separa os dois grupos de um relance. */
.doc-corte{       background:linear-gradient(145deg,#4F8D42,#3A7030) }
/* Cinza-azulado: a ficha é o documento de chão de fábrica, e fica
   visualmente separada tanto dos documentos de cliente quanto do plano
   de corte. */
.doc-ficha{       background:linear-gradient(145deg,#698390,#41565F) }
.doc-texto{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:210px }
.doc-texto strong{ font-family:var(--fonte-display); font-size:var(--t-md); font-weight:600 }
.doc-texto small{ font-size:var(--t-sm); color:var(--texto-suave) }
.doc-estado{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--texto-fraco); margin-top:var(--e-1);
}
.doc-estado.ok{ color:var(--sucesso) }
.doc-acoes{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap }

.area-envio{
  border:2px dashed var(--linha-forte); border-radius:var(--r-lg); padding:var(--e-8) var(--e-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--e-2);
  color:var(--texto-suave); text-align:center; transition:var(--transicao); background:var(--superficie-2);
}
.area-envio svg{ width:34px; height:34px; color:var(--madeira) }
.area-envio.arrastando{ border-color:var(--madeira); background:rgba(208,162,128,.10); transform:scale(1.01) }
.envio-titulo{ font-size:var(--t-md); font-weight:600; color:var(--texto) }
.envio-sub{ font-size:var(--t-sm) }
.link-envio{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--t-sm); font-weight:600; color:var(--madeira-escura); text-decoration:underline;
}
.status-envio{ margin-top:var(--e-3); font-size:var(--t-base); padding:10px 14px; border-radius:var(--r-sm); background:var(--superficie-3) }
.status-envio.ok{ background:var(--sucesso-fundo); color:var(--sucesso) }
.status-envio.erro{ background:var(--perigo-fundo); color:var(--perigo) }

.grade-anexos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(226px,1fr)); gap:var(--e-3) }
.anexo{
  position:relative; border:1px solid var(--linha); border-radius:var(--r-md);
  overflow:hidden; background:var(--superficie); display:flex; flex-direction:column;
  transition:var(--transicao);
}
.anexo:hover{ border-color:var(--madeira); box-shadow:var(--sombra) }
.anexo-capa{ height:124px; background:var(--superficie-3); display:flex; align-items:center; justify-content:center; overflow:hidden }
.anexo-capa img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease }
.anexo:hover .anexo-capa img{ transform:scale(1.04) }
.anexo-pdf{
  font-family:var(--fonte-display); font-size:var(--t-md); font-weight:700; letter-spacing:.12em;
  color:var(--madeira-escura); border:2px solid var(--madeira); padding:10px 16px; border-radius:var(--r-sm);
}
.anexo-info{ padding:12px 13px; display:flex; flex-direction:column; gap:3px }
.anexo-nome{ font-size:var(--t-sm); font-weight:600; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anexo-nome:hover{ color:var(--madeira-escura) }
.anexo-desc{ font-size:var(--t-xs); color:var(--madeira-escura); font-style:italic }
.anexo-meta{ font-size:var(--t-2xs); color:var(--texto-fraco) }
.anexo-excluir{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:var(--r-full);
  border:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--perigo);
  font-size:13px; line-height:1; box-shadow:var(--sombra); opacity:0; transition:var(--transicao);
}
.anexo:hover .anexo-excluir{ opacity:1 }
.anexo-excluir:hover{ background:var(--perigo); color:#fff }

/* Pagamentos */
.barra-pagamento{ margin-bottom:var(--e-5) }
.bp-trilho{ height:15px; border-radius:var(--r-full); background:var(--superficie-3); overflow:hidden; border:1px solid var(--linha) }
.bp-preenchido{
  height:100%; border-radius:var(--r-full); transition:width .28s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,var(--madeira),var(--madeira-escura));
}
.bp-preenchido.quitado{ background:linear-gradient(90deg,#6FBF5F,var(--verde-escuro)) }
.bp-numeros{ display:flex; align-items:baseline; gap:var(--e-3); margin-top:10px; flex-wrap:wrap }
.bp-pago{ font-size:var(--t-md); font-weight:600; color:var(--texto) }
.bp-pct{
  font-size:var(--t-xs); font-weight:700; padding:3px 10px; border-radius:var(--r-full);
  background:rgba(208,162,128,.20); color:var(--madeira-escura);
}
.bp-total{ font-size:var(--t-sm); color:var(--texto-suave) }

.falta-receber{
  display:flex; align-items:baseline; gap:var(--e-3); padding:var(--e-4) var(--e-5);
  border-radius:var(--r-md); background:var(--superficie-3);
  border:1px solid var(--linha); border-left:4px solid var(--madeira-escura); flex-wrap:wrap;
}
.fr-rotulo{ font-size:var(--t-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-suave) }
.fr-valor{ font-family:var(--fonte-display); font-size:var(--t-2xl); font-weight:500; color:var(--perigo); font-variant-numeric:tabular-nums }

.aviso-quitado{
  display:flex; align-items:center; gap:var(--e-3); padding:var(--e-4) var(--e-5);
  border-radius:var(--r-md); background:var(--sucesso-fundo);
  border:1px solid rgba(62,138,49,.30); color:var(--sucesso); font-size:var(--t-md); font-weight:600;
}
.aviso-quitado svg{ width:23px; height:23px; flex:0 0 auto }

/* Materiais do pedido */
.numeros-resumo{ display:flex; gap:var(--e-6); margin-bottom:var(--e-2) }
.numeros-resumo .numero{ display:flex; flex-direction:column }
.numeros-resumo .valor{
  font-family:var(--fonte-display); font-size:var(--t-3xl); font-weight:500;
  line-height:1; color:var(--texto); font-variant-numeric:tabular-nums;
}
.numeros-resumo .rotulo{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texto-suave); margin-top:6px;
}

/* ---------------------------------------------------------------------
   Gestão e Finanças
   --------------------------------------------------------------------- */
.cartoes-resumo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:var(--e-3); margin-bottom:var(--e-3);
}
.cartoes-resumo.secundarios{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.cartao-num{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:var(--e-4) var(--e-5); display:flex; flex-direction:column; gap:5px;
  box-shadow:var(--sombra-0); border-left:4px solid var(--linha-forte);
  transition:var(--transicao);
}
.cartao-num:hover{ box-shadow:var(--sombra) }
.cartao-num.entrada,.cartao-num.positivo{ border-left-color:var(--verde) }
.cartao-num.saida,.cartao-num.negativo{ border-left-color:var(--salmao) }
.cartao-num.neutro{ border-left-color:var(--madeira) }
.cartao-num.destaque{
  border-left-color:var(--madeira-escura);
  background:linear-gradient(135deg,var(--superficie),rgba(208,162,128,.10));
}
.cn-rotulo{ font-size:var(--t-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave) }
.cn-valor{
  font-family:var(--fonte-display); font-size:var(--t-2xl); font-weight:500;
  color:var(--texto); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.cartao-num.pequeno .cn-valor{ font-size:var(--t-lg) }
.cn-nota{ font-size:var(--t-xs); color:var(--texto-suave); line-height:1.45 }
.cartao-num.positivo .cn-valor{ color:var(--sucesso) }
.cartao-num.negativo .cn-valor{ color:var(--perigo) }

.filtro-periodo{ display:inline-flex; align-items:center; gap:var(--e-2); font-size:var(--t-sm); color:var(--texto-suave) }
.filtro-periodo input{
  padding:9px 12px; font-size:var(--t-base); font-family:inherit;
  border:1px solid var(--linha); border-radius:var(--r-sm);
  background:var(--superficie-2); color:var(--texto); transition:var(--transicao);
}
.filtro-periodo input:focus{ outline:none; border-color:var(--madeira); box-shadow:var(--anel) }
.atalhos-periodo{ display:inline-flex; gap:var(--e-1) }
/* Os três botões de filtro do extrato não quebravam de linha: em 375px o
   "Só saídas" saía 6px para fora e a página inteira ganhava rolagem
   lateral. Com flex-wrap ele desce para a linha de baixo. */
.filtros-extrato{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.valor-entrada{ color:var(--sucesso); font-weight:600 }
.valor-saida{ color:var(--perigo); font-weight:600 }

/* Clientes devendo */
.painel-devedores{
  border-radius:var(--r-lg); padding:var(--e-5); margin-top:var(--e-5);
  border:1px solid var(--linha); background:var(--superficie); box-shadow:var(--sombra-0);
}
.painel-devedores.com-pendencia{ border-left:4px solid var(--alerta) }
.painel-devedores.tranquilo{ border-left:4px solid var(--sucesso) }
.dev-cabecalho{ display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap }
.dev-icone{ width:46px; height:46px; border-radius:var(--r-md); flex:0 0 auto; display:flex; align-items:center; justify-content:center }
.painel-devedores.com-pendencia .dev-icone{ background:var(--alerta-fundo); color:var(--alerta) }
.painel-devedores.tranquilo .dev-icone{ background:var(--sucesso-fundo); color:var(--sucesso) }
.dev-icone svg{ width:23px; height:23px }
.dev-texto{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:210px }
.dev-texto strong{ font-family:var(--fonte-display); font-size:var(--t-md); font-weight:600 }
.dev-texto small{ font-size:var(--t-sm); color:var(--texto-suave); line-height:1.55 }

.dev-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(286px,1fr)); gap:var(--e-2); margin-top:var(--e-4) }
.dev-lista.compacta{ grid-template-columns:1fr; margin-top:0 }
.dev-item{
  display:flex; flex-direction:column; gap:7px; padding:12px 14px;
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.dev-item:hover{ border-color:var(--madeira); background:var(--superficie); transform:translateX(2px) }
.dev-linha1{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-2) }
.dev-cliente{ font-size:var(--t-base); font-weight:600; color:var(--texto) }
.dev-falta{ font-size:var(--t-md); font-weight:600; color:var(--perigo); font-variant-numeric:tabular-nums; white-space:nowrap }
.dev-barra{ height:6px; border-radius:var(--r-full); background:var(--superficie-3); overflow:hidden }
.dev-barra-cheia{ height:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--madeira),var(--madeira-escura)); transition:width .28s cubic-bezier(.4,0,.2,1) }
.dev-linha2{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); font-size:var(--t-xs); color:var(--texto-suave); flex-wrap:wrap }
.dev-forma{ padding:2px 9px; border-radius:var(--r-full); background:var(--superficie-3); white-space:nowrap }

/* Reposição do estoque */
.painel-reposicao{
  border-radius:var(--r-lg); padding:var(--e-5); margin-bottom:var(--e-5);
  border:1px solid var(--linha); background:var(--superficie); box-shadow:var(--sombra-0);
}
.painel-reposicao.com-alerta{ border-left:4px solid var(--alerta) }
.painel-reposicao.tranquilo{ border-left:4px solid var(--sucesso) }
.rep-cabecalho{ display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap }
.rep-icone{ width:46px; height:46px; border-radius:var(--r-md); flex:0 0 auto; display:flex; align-items:center; justify-content:center }
.painel-reposicao.com-alerta .rep-icone{ background:var(--alerta-fundo); color:var(--alerta) }
.painel-reposicao.tranquilo .rep-icone{ background:var(--sucesso-fundo); color:var(--sucesso) }
.rep-icone svg{ width:23px; height:23px }
.rep-texto{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:210px }
.rep-texto strong{ font-family:var(--fonte-display); font-size:var(--t-md); font-weight:600 }
.rep-texto small{ font-size:var(--t-sm); color:var(--texto-suave); line-height:1.55 }
.rep-itens{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4) }
.rep-item{
  display:flex; flex-direction:column; gap:2px; padding:9px 13px;
  border-radius:var(--r-md); border:1px solid; font-size:var(--t-sm); transition:var(--transicao);
}
.rep-item:hover{ filter:brightness(.97); transform:translateY(-1px) }
.rep-item.zerado{ background:var(--perigo-fundo); border-color:rgba(192,80,63,.34); color:var(--perigo) }
.rep-item.baixo{ background:var(--alerta-fundo); border-color:rgba(180,118,42,.34); color:var(--alerta) }
.rep-nome{ font-weight:600 }
.rep-qtd{ font-size:var(--t-xs); opacity:.86 }
.rep-qtd em{ font-style:normal; opacity:.75 }
.rep-dica{ margin:var(--e-4) 0 0; font-size:var(--t-sm); color:var(--texto-suave); line-height:1.55 }

/* Histórico de alterações */
.etiqueta-acao{
  display:inline-block; padding:3px 10px; border-radius:var(--r-full);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.04em;
  background:var(--superficie-3); color:var(--texto-medio);
}
.acao-criou{ background:var(--sucesso-fundo); color:var(--sucesso) }
.acao-alterou{ background:var(--alerta-fundo); color:var(--alerta) }
.acao-excluiu{ background:var(--perigo-fundo); color:var(--perigo) }
.acao-anexou{ background:#EDE3F7; color:#5E4482 }
.acao-entrada{ background:var(--sucesso-fundo); color:var(--sucesso) }
.acao-saída{ background:#DCEAF3; color:#28607F }
.tipo-entidade{ font-size:var(--t-xs); color:var(--texto-suave); margin-left:6px }
.desc-auditoria{ font-size:var(--t-sm); color:var(--texto-suave) }
.lista-mudancas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px }
.lista-mudancas li{ font-size:var(--t-xs); line-height:1.5 }
.lista-mudancas .de{ text-decoration:line-through; color:var(--texto-fraco) }
.lista-mudancas .seta{ color:var(--madeira); margin:0 4px }
.lista-mudancas .para{ color:var(--texto); font-weight:600 }

/* Financeiro / planilha incorporada */
.financeiro-frame{ width:100%; height:78vh; border:1px solid var(--linha); border-radius:var(--r-lg); background:var(--superficie) }

/* Seletor de cliente nos formulários */
.campo-com-acao{ display:flex; gap:var(--e-2); align-items:stretch }
.campo-com-acao input{ flex:1 1 auto }
.seletor-cliente{
  flex:0 0 auto; max-width:260px; padding:10px 13px;
  font-size:var(--t-sm); font-family:inherit; font-weight:600; cursor:pointer;
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-3); color:var(--madeira-escura); transition:var(--transicao);
}
.seletor-cliente:hover{ border-color:var(--madeira) }

/* ---------------------------------------------------------------------
   Gráficos
   --------------------------------------------------------------------- */
.grafico{ width:100%; height:auto; display:block; overflow:visible }
.g-grade{ stroke:var(--linha); stroke-width:1 }
.g-zero{ stroke:var(--texto-fraco); stroke-width:1.2; stroke-dasharray:4 3 }
/* Os rótulos dos gráficos ficaram para trás quando a escala do sistema
   subiu: eixo em 10px e miolo da rosca em 9,5px. Número de gráfico é
   justamente o que a gente lê de relance e de longe. Subidos junto com o
   resto, nada abaixo de 12px. */
.g-eixo{ font-size:12px; fill:var(--texto-suave) }
.g-rotulo{ font-size:12px; fill:var(--texto-suave) }
.g-rotulo-lado{ font-size:12.5px; fill:var(--texto-medio) }
.g-valor-lado{ font-size:12.5px; fill:var(--texto-medio) }
.g-barra-entrada{ fill:var(--verde) }
.g-barra-saida{ fill:var(--salmao) }
.g-linha{ stroke:var(--madeira-escura); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round }
.g-area{ fill:var(--madeira); opacity:.16 }
.g-ponto{ fill:var(--madeira-escura); stroke:var(--superficie); stroke-width:2 }
.g-ponto.neg{ fill:var(--salmao) }
.g-fatia{ stroke:var(--superficie); stroke-width:2; transition:opacity var(--transicao) }
.g-fatia:hover{ opacity:.85 }
.g-miolo{ fill:var(--superficie) }
.g-centro{ font-family:var(--fonte-display); font-size:18px; font-weight:500; fill:var(--texto) }
.g-centro-sub{ font-size:12px; fill:var(--texto-suave); text-transform:uppercase; letter-spacing:.11em }
.g-legenda{ font-size:12.5px; fill:var(--texto-medio) }
.g-legenda-val{ font-size:12px; fill:var(--texto-suave) }
.g-trilho{ fill:var(--superficie-3) }
.g-dica-txt{ font-size:12.5px; fill:var(--texto-suave) }

/* =====================================================================
   TEMA ESCURO
   =====================================================================
   Só troca as variáveis — a interface inteira acompanha.

   Duas escolhas que fazem diferença aqui:

   • O fundo não é preto, é um grafite quente (#141210). Preto puro com
     texto branco cansa a vista e faz o amadeirado da marca parecer sujo.

   • As cores dos módulos são levemente dessaturadas. A mesma cor que fica
     equilibrada sobre branco vibra e "pula" sobre fundo escuro.

   Os DOCUMENTOS não carregam este arquivo: contrato, orçamento e termos
   saem idênticos nos dois temas, que é como tem que ser.
   ===================================================================== */

html.tema-escuro{
  --bg:#141210;
  --superficie:#1E1B18;
  --superficie-2:#252119;
  --superficie-3:#2C2721;
  --branco:#1E1B18;
  --linha:#332E28;
  --linha-forte:#413A32;
  --texto:#F0EBE4;
  --texto-medio:#C4BBB0;
  --texto-suave:#948A7E;
  --texto-fraco:#8E8478;   /* era #6B6259: 2,87:1, ilegível. Agora 4,67:1 */

  /* Faltava aqui. --madeira-escura é a cor de TODO título de seção do
     sistema, e ela vinha do tema claro sem alteração: um marrom feito
     para fundo branco, aplicado sobre fundo quase preto. Dava 4,20:1
     antes, e depois de escurecer a versão clara ficaria pior ainda.
     Uma cor de acento nunca serve os dois fundos — o escuro precisa da
     versão clara do mesmo tom. Agora 6,75:1. */
  --madeira-escura:#C79A6E;

  --grafite:#F0EBE4;
  --grafite-claro:#C4BBB0;

  --azul:#4E97C6;        --azul-escuro:#35708F;
  --marrom:#C08A54;      --marrom-escuro:#9A6C3E;
  --salmao:#E2876F;      --salmao-escuro:#C2694F;
  --verde:#5FAE51;       --verde-escuro:#458537;
  --roxo:#9070C4;        --roxo-escuro:#6C4F96;
  --ardosia:#6C8794;     --ardosia-escura:#4E656F;

  --sucesso:#72C462;     --sucesso-fundo:#1C2A18;
  --alerta:#E0A65E;      --alerta-fundo:#2E2317;
  --perigo:#E8836F;      --perigo-fundo:#2E1B17;
  --vermelho:#E8836F;

  --sombra-0:0 1px 2px rgba(0,0,0,.28);
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.26);
  --sombra-alta:0 2px 4px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.42);
  --sombra-flutuante:0 4px 8px rgba(0,0,0,.36), 0 24px 48px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* Logo: no escuro, a parte cinza fica clara — é a versão para fundo
   escuro do manual da marca, sem precisar de um segundo arquivo. */
html.tema-escuro .topbar{
  background:rgba(26,23,20,.92); border-bottom-color:var(--linha);
  backdrop-filter:saturate(180%) blur(8px);
}
html.tema-escuro .topbar .marca .marca-simbolo{ color:#C9C8CA }
html.tema-escuro .topbar .marca .marca-texto{ color:#FFFFFF }
html.tema-escuro .lateral-marca .marca-simbolo{ color:#C9C8CA }
html.tema-escuro .lateral-marca .marca-texto{ color:#FFFFFF }

/* No escuro, a tinta do item aceso não pode ser o mesmo bege claro: sobre
   fundo escuro ela viraria um bloco brilhante. Aqui a cor da área é
   diluída no próprio fundo, e o texto é a versão clara dela. */
html.tema-escuro .lat-inicio{     --tinta:#342B22; --cor-ativa:#CEAD8E }
html.tema-escuro .lat-pedidos{    --tinta:#242C2F; --cor-ativa:#81B3D2 }
html.tema-escuro .lat-orcamentos{ --tinta:#352B20; --cor-ativa:#D3AD87 }
html.tema-escuro .lat-clientes{   --tinta:#2D262E; --cor-ativa:#AE99CD }
html.tema-escuro .lat-estoque{    --tinta:#392A24; --cor-ativa:#E9AB99 }
html.tema-escuro .lat-medicao{    --tinta:#232E30; --cor-ativa:#93BDC4 }
html.tema-escuro .lat-catalogos{  --tinta:#2C2733; --cor-ativa:#B5A5CE }
html.tema-escuro .lat-agenda{     --tinta:#292A29; --cor-ativa:#98ABB4 }
html.tema-escuro .lat-gestao{     --tinta:#272E20; --cor-ativa:#8FBF85 }
html.tema-escuro .lat-instalar{  --tinta:#2A2F24; --cor-ativa:#A8C293 }
html.tema-escuro .lat-config{     --tinta:#2A2724; --cor-ativa:#BFB6AC }
html.tema-escuro .login-box svg.logo-login{ color:#3E3E3E }

/* Etiquetas de status vêm com cor clara de fundo, vinda do cadastro.
   No escuro, escurecemos o preenchimento e deixamos a borda dar a
   identidade da cor — o texto continua legível. */
html.tema-escuro .etiqueta-status{ background:rgba(0,0,0,.28) }
html.tema-escuro .tabela-pedidos tbody tr{ filter:saturate(.80) brightness(.42) }
html.tema-escuro .tabela-pedidos tbody tr:hover{ filter:saturate(.88) brightness(.52) }
html.tema-escuro .tabela-pedidos tbody tr td{ color:#F0EBE4 }
html.tema-escuro .contagem{ background:rgba(0,0,0,.24) }
html.tema-escuro .cel-item{ filter:saturate(.85) brightness(.55) }
html.tema-escuro .cel-cliente,
html.tema-escuro .cel-pedido,
html.tema-escuro .cel-obs,
html.tema-escuro .cel-hora{ color:#F0EBE4 }
html.tema-escuro .cel-acoes button{ background:rgba(0,0,0,.30); color:#F0EBE4; border-color:rgba(255,255,255,.16) }
html.tema-escuro .compromisso{ filter:saturate(.85) brightness(.55) }
html.tema-escuro .comp-info{ color:#EDE7DF }
html.tema-escuro .rep-item{ filter:none }
html.tema-escuro .opt-tipo{ filter:saturate(.85) brightness(.62) }
html.tema-escuro .opt-tipo.ativo{ filter:saturate(.95) brightness(.8) }

html.tema-escuro .dia-cel.hoje{ background:rgba(208,162,128,.07) }
html.tema-escuro .anexo-excluir{ background:rgba(30,27,24,.92) }
html.tema-escuro .aviso-suave{ background:rgba(208,162,128,.07) }

/* =====================================================================
   TELAS MENORES
   ===================================================================== */

/* Abaixo de 1024px a lateral fixa comeria a largura que as tabelas
   precisam. Ela vira gaveta: sai do caminho e volta pelo botão da barra
   de cima, que só existe aqui. */
@media (max-width:1023px){
  body.app{ padding-left:0 }
  .topbar.com-lateral .marca{ display:flex }
  .abrir-lateral{ display:inline-flex }

  .lateral{
    width:min(84vw, 288px);
    transform:translateX(-100%); visibility:hidden;
    box-shadow:var(--sombra-flutuante);
  }
  body.menu-aberto .lateral{ transform:none; visibility:visible }
  body.menu-aberto .lateral-fundo{ opacity:1; visibility:visible }
  /* Com a gaveta aberta, rolar a página por baixo é desorientador. */
  body.menu-aberto{ overflow:hidden }
}

@media (max-width:1100px){
  .painel-grade{ grid-template-columns:repeat(2,1fr) }
  .painel-duplo{ grid-template-columns:1fr }
  .calendario{ grid-template-columns:repeat(4,1fr) }

  /* A regra geral de tabela rolante só valia abaixo de 820px de janela.
     Com a lateral ocupando 230px, uma janela de 1024px deixa só 746px de
     conteúdo — menos do que os 820px que a regra antiga considerava
     apertado. Sem isso, uma tabela cheia empurraria a PÁGINA inteira para
     o lado. Vale só onde a lateral existe. */
  body.app table{ display:block; overflow-x:auto; white-space:nowrap }
}

@media (max-width:820px){
  .container{ padding:var(--e-4) var(--e-4) var(--e-10) }
  .topbar{ padding:var(--e-3) var(--e-4) }
  .topbar .marca .marca-simbolo{ height:28px }
  .topbar .marca .marca-texto{ height:18px }
  .nome-usuario{ display:none }

  .linha-2,.linha-3{ grid-template-columns:1fr }
  .painel-grade{ grid-template-columns:1fr }
  .calendario{ grid-template-columns:repeat(2,1fr) }
  .cabecalho-pagina{ flex-direction:column; align-items:stretch }
  .painel-topo{ flex-direction:column; align-items:flex-start }
  .painel-topo h2{ font-size:var(--t-2xl) }
  .barra-ferramentas{ align-items:stretch }
  .resumo-lista{ margin-left:0 }
  .ia-colunas{ grid-template-columns:1fr }
  .doc-item{ flex-direction:column; align-items:flex-start }
  .campo-com-acao{ flex-direction:column }
  .seletor-cliente{ max-width:none }
  .modulo{ min-height:0 }
  .abas{ overflow-x:auto; flex-wrap:nowrap }
  .aba{ white-space:nowrap }

  /* Tabela larga rola na horizontal em vez de espremer as colunas */
  table{ display:block; overflow-x:auto; white-space:nowrap }
}

@media (max-width:520px){
  .calendario{ grid-template-columns:1fr }
  /* A faixa virou flex; grid-template-columns aqui não fazia mais nada.
     Em flex quem manda na quebra é a base de cada cartão. 46% garante dois
     por linha e deixa os da última linha crescerem para fechar a fileira. */
  .indicador{ flex-basis:46% }
  .login-box{ width:100%; padding:var(--e-8) var(--e-5) var(--e-6) }

  /* Em 375px a barra superior estourava 5px para fora e a página inteira
     ganhava rolagem lateral. O nome do usuário já some em 820px; aqui sai
     também a etiqueta do perfil, que é informativa e não comando — ela
     continua visível em Configurações. */
  .topbar{ padding:var(--e-2) var(--e-3) }
  .usuario-info .etiqueta-papel{ display:none }
  .usuario-info{ gap:var(--e-2) }
}

/* Impressão de tela de sistema (raro, mas não pode sair quebrada) */
@media print{
  .topbar,.voltar,.barra-ferramentas,.acoes-topo,.acoes-form,
  .painel-acoes,.modulo-seta,.aba,.abas,
  .lateral,.lateral-fundo,.abrir-lateral{ display:none !important }
  body{ background:#fff }
  /* Sem a lateral na folha, o recuo que reservava o espaço dela viraria
     uma margem esquerda enorme. */
  body.app{ padding-left:0 }
  .cartao,.bloco-painel,table{ box-shadow:none; border-color:#DDD }
}

/* ---------------------------------------------------------------------
   Utilitários
   --------------------------------------------------------------------- */

/* Linha de registro arquivado/desligado: presente, mas em segundo plano */
.linha-arquivada{ opacity:.52 }
.linha-arquivada:hover{ opacity:.78 }

/* Conteúdo de cada aba na tela do pedido */
.painel-aba{ animation:surgir .2s cubic-bezier(.4,0,.2,1) }
.painel-aba[hidden]{ display:none }

/* Espaçamento do painel inicial */
.painel{ padding-top:var(--e-5) }

/* ---------------------------------------------------------------------
   Regra geral: o atributo hidden tem que esconder
   ---------------------------------------------------------------------
   Qualquer seletor que define display (flex, grid, block) vence a regra
   padrão do navegador para [hidden]. O resultado é um elemento que o
   JavaScript "esconde" mas continua na tela — foi o que travou a janela
   da agenda.

   Esta regra vale para o arquivo inteiro e evita que o problema volte a
   cada componente novo.
   --------------------------------------------------------------------- */
[hidden]{ display:none !important }

/* ---------------------------------------------------------------------
   Cabeçalho ordenável e divisão em páginas
   --------------------------------------------------------------------- */
th.ordenavel{ cursor:pointer; user-select:none; transition:var(--transicao); position:relative }
th.ordenavel:hover{ background:var(--superficie-3); color:var(--madeira-escura) }
th.ordenavel.ativa{ color:var(--madeira-escura) }
.th-conteudo{ display:inline-flex; align-items:center; gap:5px }
th.dir .th-conteudo{ flex-direction:row-reverse }
.th-seta{ font-size:8px; opacity:.85; line-height:1 }
/* Seta fantasma ao passar o mouse: mostra que a coluna é clicável sem
   precisar de um ícone permanente em toda a tabela. */
th.ordenavel:not(.ativa):hover .th-seta::after{ content:'▲'; opacity:.35 }

.paginacao{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-3); flex-wrap:wrap; margin-top:var(--e-3);
  padding:var(--e-2) var(--e-1);
}
.pag-info{ font-size:var(--t-xs); color:var(--texto-suave); font-variant-numeric:tabular-nums }
.pag-botoes{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto }
.pag-btn{
  min-width:34px; padding:7px 11px; border-radius:var(--r-sm);
  border:1px solid var(--linha); background:var(--superficie);
  font-size:var(--t-xs); font-weight:600; color:var(--texto-medio);
  cursor:pointer; transition:var(--transicao);
}
.pag-btn:hover:not(:disabled){ border-color:var(--madeira); color:var(--madeira-escura); background:var(--superficie-2) }
.pag-btn:disabled{ opacity:.38; cursor:default }
.pag-btn.num{ min-width:32px; padding:7px 9px }
.pag-btn.ativa{
  background:var(--madeira-escura); border-color:var(--madeira-escura); color:#fff;
}
.pag-btn.ativa:hover{ background:#8F6134; color:#fff }

@media (max-width:620px){
  .paginacao{ justify-content:center }
  .pag-botoes{ margin-left:0 }
  .pag-btn.num{ display:none }
  .pag-btn.num.ativa{ display:inline-block }
}

/* ---------------------------------------------------------------------
   Aviso ao cliente por WhatsApp
   --------------------------------------------------------------------- */
.aviso-whatsapp{
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
  padding:var(--e-4) var(--e-5); margin-bottom:var(--e-5);
  border:1px solid var(--linha); border-left:4px solid #25D366;
  border-radius:var(--r-lg); background:var(--superficie); box-shadow:var(--sombra-0);
}
.aw-icone{
  width:44px; height:44px; border-radius:var(--r-md); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,211,102,.12); color:#128C4A;
}
html.tema-escuro .aw-icone{ background:rgba(37,211,102,.14); color:#4FD98A }
.aw-icone svg{ width:24px; height:24px }
.aw-texto{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:230px }
.aw-texto strong{ font-family:var(--fonte-display); font-size:var(--t-md); font-weight:600 }
.aw-texto small{ font-size:var(--t-sm); color:var(--texto-suave); line-height:1.5 }
.aw-acoes{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap }
.aw-sem-telefone{
  font-size:var(--t-sm); color:var(--alerta); font-weight:600;
  padding:6px 12px; border-radius:var(--r-full); background:var(--alerta-fundo);
}
.btn-whatsapp{ background:#25D366; color:#06331A }
.btn-whatsapp:hover{ background:#1EBE5A; color:#06331A }

/* Apresentação do projeto */
.doc-apresentacao{ background:linear-gradient(145deg,#8B6DB8,#5E4482) }

/* Tela de documento ainda por desenhar */
.em-construcao{ max-width:620px; margin:0 auto; text-align:center; padding:var(--e-10) var(--e-8) }
.em-construcao p{ color:var(--texto-suave); font-size:var(--t-base); line-height:1.7; margin:0 0 var(--e-4) }
.ec-icone{
  width:76px; height:76px; margin:0 auto var(--e-5); border-radius:var(--r-full);
  background:var(--superficie-3); color:var(--madeira-escura);
  display:flex; align-items:center; justify-content:center;
}
.ec-icone svg{ width:36px; height:36px }
.ec-nota{
  font-size:var(--t-sm) !important; padding:var(--e-3) var(--e-4);
  background:var(--superficie-3); border-radius:var(--r-md);
  border-left:3px solid var(--madeira);
}


/* =====================================================================
   ACESSIBILIDADE — regras que valem para o arquivo inteiro
   =====================================================================
   Ficam no fim de propósito: são as últimas a ser lidas pelo navegador e
   por isso vencem qualquer regra anterior sem precisar de !important
   (menos as duas em que ele é inevitável, marcadas abaixo).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Dedo em vez de mouse
   ---------------------------------------------------------------------
   Em tela de toque não existe hover e não existe mira: o alvo precisa ter
   44px. No monitor com mouse, 44px em cada botãozinho de tabela deixaria a
   tela inchada sem ganho nenhum — mouse acerta 30px sem esforço.

   pointer:coarse é o navegador dizendo "quem está apontando aqui é um
   dedo". Celular e tablet entram; o desktop do escritório não.
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  .btn, .atalho, .mini,
  .campo input, .campo select, .campo textarea{ min-height:44px }
  .mini{ padding:11px 15px }
  .logout-link{ min-height:44px }
  .link-config{ width:44px; height:44px }
  /* 8px de folga entre alvos vizinhos, para não errar o toque */
  .painel-acoes{ gap:var(--e-2) }
}

/* ---------------------------------------------------------------------
   Quem pediu menos movimento
   ---------------------------------------------------------------------
   Windows, Android e iPhone têm a opção "reduzir animações". Quem liga
   isso costuma ter motivo — enjoo, vertigem, enxaqueca. O sistema inteiro
   ignorava o pedido.

   Aqui a animação é cortada, não a mudança: o estado final continua
   acontecendo, só chega sem o percurso.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;   /* inevitável: sobrepõe regra de componente */
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------
   Atalho do teclado
   ---------------------------------------------------------------------
   Quem navega por Tab hoje passa pela barra superior inteira antes de
   chegar ao conteúdo, em toda tela. Este link fica escondido até receber
   foco, e aí aparece no canto — é o primeiro Tab da página.
   --------------------------------------------------------------------- */
.pular-conteudo{
  position:absolute; left:var(--e-4); top:-100px; z-index:100;
  /* Cor fixa, não var(--grafite): no tema escuro essa variável vira clara
     (#F0EBE4) e o link ficava branco sobre branco. Erro meu, na primeira
     versão deste bloco. */
  background:#2C2A28; color:#fff;
  padding:12px 18px; border-radius:var(--r-md);
  font-size:var(--t-sm); font-weight:600;
  transition:top var(--transicao);
}
.pular-conteudo:focus{ top:var(--e-3) }

/* O contorno de foco precisa aparecer em cima de qualquer fundo. Nas
   superfícies escuras (cartões de módulo, barra do login) o marrom some,
   então lá ele vira claro. */
.modulo:focus-visible, .login-box :focus-visible{
  outline:2px solid #FFFFFF; outline-offset:3px;
}

/* Texto que existe só para o leitor de tela: fica fora da vista mas dentro
   do documento. display:none não serve — o leitor também ignoraria. */
/* Texto que só o leitor de tela enxerga.
   ---------------------------------------------------------------------
   position:absolute sem âncora faz o elemento se posicionar onde ele
   cairia no fluxo — e se isso for dentro de uma tabela larga com
   rolagem, ele escapa da caixa rolante e estica a PÁGINA. Foi assim que
   apareceu uma rolagem lateral de 128 px na ficha, causada por um
   rótulo invisível de 1 px.

   clip-path:inset(50%) faz o mesmo recorte do clip antigo, mas sem
   depender de position:absolute. O clip fica junto porque navegador
   antigo ainda o usa, e os dois convivem sem conflito. */
.apenas-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
  /* Ancorar à esquerda impede que ele estique a página a partir de
     qualquer coluna distante em que tenha caído. */
  left:0; top:auto;
}

/* ---------------------------------------------------------------------
   Botões cheios no tema escuro
   ---------------------------------------------------------------------
   Duas variáveis mudam de lado entre os temas e quebravam o botão:

   --grafite é escura no tema claro e CLARA no escuro (é a cor do texto
   lá). O .btn-marca — o "Entrar" do login — virava um botão quase branco
   com letra branca: 1,19:1, ilegível. Aqui ele inverte de propósito:
   fundo claro, letra escura.

   --perigo no escuro é um salmão claro, feito para ser TEXTO sobre fundo
   escuro. Como preenchimento de botão com letra branca dava 2,66:1. Passa
   a usar o vermelho do tema claro, que com branco dá 5,54:1 e ainda se
   destaca do fundo.
   --------------------------------------------------------------------- */
html.tema-escuro .btn-marca{ background:#F0EBE4; color:#1E1B18 }
html.tema-escuro .btn-marca:hover{ background:#FFFFFF; color:#1E1B18 }
html.tema-escuro .btn-vermelho{ background:#B34433; color:#fff }
html.tema-escuro .btn-vermelho:hover{ background:#943527 }

/* =====================================================================
   PLANO DE CORTE — tela de edição
   =====================================================================
   Uma lista de corte tem centenas de linhas e é preenchida olhando o
   projeto, não a tela. Por isso aqui a densidade importa mais do que o
   respiro: campo baixo, sem sombra, sem animação de foco. O que precisa
   saltar é o erro, não o formulário. */

.pc-material{ padding:0; overflow:hidden; margin-bottom:var(--e-6) }

.pc-material-topo{
  display:grid; gap:var(--e-4);
  grid-template-columns:2fr 1fr 1fr auto;
  align-items:end;
  padding:var(--e-5);
  background:var(--superficie-2);
  border-bottom:1px solid var(--linha);
}
.pc-material-topo .campo{ margin:0 }
.pc-material-acoes{ display:flex; gap:var(--e-2); align-items:center }

/* A tabela é larga por natureza. Rolar só ela é melhor do que rolar a
   página inteira de lado — o cabeçalho e os totais ficam no lugar. */
.tabela-rolante{ overflow-x:auto; -webkit-overflow-scrolling:touch }

.pc-tabela{ width:100%; border-collapse:collapse; min-width:900px }
.pc-tabela th{
  position:sticky; top:0; z-index:2;
  background:var(--superficie-3);
  font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto-medio); text-align:left;
  padding:var(--e-3); border-bottom:1px solid var(--linha); white-space:nowrap;
}
.pc-tabela td{ padding:4px var(--e-2); border-bottom:1px solid var(--linha) }
.pc-linha:hover{ background:var(--superficie-2) }

.pc-tabela input[type=text],
.pc-tabela input[type=number],
.pc-tabela select{
  width:100%; min-height:36px; padding:0 var(--e-2);
  font-size:var(--t-sm); font-family:inherit; color:var(--texto);
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-sm);
}
.pc-tabela input:focus, .pc-tabela select:focus{
  outline:none; border-color:var(--madeira-escura); box-shadow:var(--anel);
}
.pc-tabela .pc-qtd{ width:70px }
.pc-tabela .pc-comp, .pc-tabela .pc-larg{ width:110px }
.pc-tabela .pc-veio{ min-width:150px }

/* ---- Filetagem: o desenho da peça ----
   Quatro botões formando as bordas de um retângulo. Marcar "a de cima" é
   uma decisão espacial, igual à que se toma olhando a peça — enquanto
   quatro caixinhas em fila obrigam a lembrar qual é qual. */
.pc-fita{
  position:relative; width:58px; height:40px; margin:0 auto;
  display:block; flex:0 0 auto;
}
.pc-fita-centro{
  position:absolute; inset:6px 8px;
  border-radius:2px; background:var(--superficie-3); pointer-events:none;
}
.pc-borda{
  position:absolute; padding:0; cursor:pointer;
  background:var(--linha); border:0; border-radius:2px;
  transition:var(--transicao);
}
.pc-borda:hover{ background:var(--madeira) }
.pc-borda[aria-pressed="true"]{ background:var(--madeira-escura) }
.pc-borda:focus-visible{ outline:2px solid var(--madeira-escura); outline-offset:2px }
.pc-b-c1{ top:0;    left:8px;  right:8px; height:5px }
.pc-b-c2{ bottom:0; left:8px;  right:8px; height:5px }
.pc-b-l1{ left:0;   top:6px;   bottom:6px; width:5px }
.pc-b-l2{ right:0;  top:6px;   bottom:6px; width:5px }

.pc-calc{ white-space:nowrap; font-size:var(--t-sm); color:var(--texto-medio) }
.pc-calc .pc-area{ display:block; font-variant-numeric:tabular-nums }
.pc-calc .pc-fitam{ display:block; font-size:var(--t-xs); color:var(--texto-suave) }

.pc-acoes-linha{ white-space:nowrap; text-align:right }
.pc-acoes-linha .mini + .mini{ margin-left:var(--e-2) }

.pc-material-rodape{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  flex-wrap:wrap; padding:var(--e-4) var(--e-5); background:var(--superficie-2);
  border-top:1px solid var(--linha);
}
.pc-totais{ display:flex; gap:var(--e-5); flex-wrap:wrap; font-size:var(--t-sm); color:var(--texto-medio) }
.pc-totais strong{ color:var(--texto); font-variant-numeric:tabular-nums }
.pc-vazio{ color:var(--texto-suave); font-style:italic }

.aviso-erro{ border-left-color:#B34433; color:var(--texto) }

.bloco-ajuda{
  margin-top:var(--e-8); padding:var(--e-4) var(--e-5);
  background:var(--superficie-2); border:1px solid var(--linha); border-radius:var(--r-md);
  font-size:var(--t-sm); color:var(--texto-medio);
}
.bloco-ajuda summary{ cursor:pointer; font-weight:600; color:var(--texto) }
.bloco-ajuda ul{ margin:var(--e-3) 0 0; padding-left:var(--e-5); line-height:1.7 }
.bloco-ajuda strong{ color:var(--texto) }

@media (max-width:900px){
  .pc-material-topo{ grid-template-columns:1fr 1fr; }
  .pc-material-acoes{ grid-column:1 / -1 }
}

/* Campos do cabeçalho do material. Herdam o .campo do sistema; aqui só o
   que é específico da densidade desta tela. */
.pc-mat-nome, .pc-mat-marca, .pc-mat-espessura{ min-height:40px }
.pc-mat-nome{ font-weight:600 }

/* Colunas de texto: a descrição é a que mais recebe conteúdo, então é a
   que ganha espaço quando sobra largura. */
.pc-corpo{ vertical-align:top }
.pc-ambiente{ min-width:120px }
.pc-descricao{ min-width:190px }

/* Ações. As de remover ficam em tom de alerta e por último — apagar 200
   linhas por engano custa uma tarde de digitação. */
.pc-nova-peca{ flex:0 0 auto }
.pc-duplicar{ white-space:nowrap }
.pc-remover, .pc-remover-material{ white-space:nowrap }
.pc-colar{ white-space:nowrap }

/* ---- Plano de corte: configuração da chapa ---- */
.pc-chapa{ border-bottom:1px solid var(--linha); background:var(--superficie) }
.pc-chapa > summary{
  cursor:pointer; padding:var(--e-3) var(--e-5);
  font-size:var(--t-sm); color:var(--texto-medio);
}
.pc-chapa > summary:hover{ background:var(--superficie-2); color:var(--texto) }
.pc-chapa-resumo{ font-variant-numeric:tabular-nums }
.pc-chapa-campos{
  display:grid; gap:var(--e-4); padding:0 var(--e-5) var(--e-4);
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:end;
}
.pc-chapa-campos .campo{ margin:0 }
.pc-chapa-c, .pc-chapa-l, .pc-kerf, .pc-refile{ min-height:40px }
.pc-chapa-atalhos{ grid-column:1 / -1; display:flex; gap:var(--e-2); flex-wrap:wrap }
.pc-preset{ white-space:nowrap }

.pc-sobras{ padding:0 var(--e-5) var(--e-5) }
.pc-sobras h4{
  margin:0 0 var(--e-2); font-size:var(--t-sm); color:var(--texto-medio); font-weight:600;
}
.pc-sobras-tab{ width:100%; border-collapse:collapse; margin-bottom:var(--e-3) }
.pc-sobras-tab th{
  text-align:left; font-size:var(--t-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--texto-suave); padding:0 var(--e-2) var(--e-1);
}
.pc-sobras-tab td{ padding:2px var(--e-2) }
.pc-sobras-tab input{
  width:100%; min-height:36px; padding:0 var(--e-2); font-size:var(--t-sm); font-family:inherit;
  color:var(--texto); background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-sm);
}
.pc-sobra-nome{ min-width:180px }
.pc-sobra-c, .pc-sobra-l, .pc-sobra-q{ font-variant-numeric:tabular-nums }
.pc-nova-sobra{ white-space:nowrap }
.pc-remover-sobra{ white-space:nowrap }

/* ---- Plano de corte: prévia dos desenhos ---- */
.pc-titulo-plano{ margin:var(--e-8) 0 var(--e-4) }
.pc-plano-mat{ margin-bottom:var(--e-6) }
.pc-plano-mat h3{ margin:0 0 var(--e-1) }
.pc-plano-linha{ margin:0 0 var(--e-4); color:var(--texto-medio); font-size:var(--t-sm) }
.pc-chapas-grade{ display:grid; gap:var(--e-5); grid-template-columns:repeat(auto-fit, minmax(340px,1fr)) }
.pc-chapa-item{ margin:0 }
.pc-chapa-item figcaption{
  font-size:var(--t-xs); color:var(--texto-medio); margin-bottom:var(--e-2);
  font-variant-numeric:tabular-nums;
}
.pc-chapa-item svg{ width:100%; height:auto; display:block; background:var(--superficie) }
.pc-fora{
  border-left:3px solid var(--perigo); background:var(--superficie-2);
  padding:var(--e-3) var(--e-4); margin-bottom:var(--e-4); font-size:var(--t-sm);
}
.pc-fora ul{ margin:var(--e-2) 0 0; padding-left:var(--e-5); line-height:1.6 }

@media (max-width:900px){
  .pc-chapa-campos{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
.pc-sobras-corpo{ vertical-align:top }
.pc-sobra:hover td{ background:var(--superficie-2) }

/* ---- Plano de corte: painel de etiquetas ---- */
.pc-etiquetas{ margin-top:var(--e-6) }
.pc-etiquetas h3{ margin:0 0 var(--e-1) }
.pc-etq-campos{
  display:grid; gap:var(--e-4); grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  margin-bottom:var(--e-4);
}
.pc-etq-campos .campo{ margin:0 }
.pc-etq-campos input, .pc-etq-campos select{ min-height:42px }
.pc-etq-ajuste{
  border:1px solid var(--linha); border-radius:var(--r-md);
  padding:var(--e-3) var(--e-4); margin-bottom:var(--e-4); background:var(--superficie-2);
}
.pc-etq-ajuste summary{ cursor:pointer; font-weight:600; font-size:var(--t-sm); color:var(--texto) }
.pc-etq-ajuste .pc-etq-campos{ margin-top:var(--e-3) }
.pc-etq-aviso{
  font-size:var(--t-sm); color:var(--texto-medio);
  border-left:3px solid var(--verde-escuro); padding-left:var(--e-3); margin:0 0 var(--e-2);
}
.pc-etq-aviso.erro{ border-left-color:var(--perigo); color:var(--texto) }

/* =====================================================================
   FICHA DE PRODUÇÃO — tela de edição
   ===================================================================== */
.fi-ambiente{ padding:0; overflow:hidden; margin-bottom:var(--e-6); min-width:0 }

.fi-topo{
  display:grid; gap:var(--e-4); grid-template-columns:2fr 1fr auto; align-items:end;
  padding:var(--e-5); background:var(--superficie-2); border-bottom:1px solid var(--linha);
}
.fi-campo-nome, .fi-campo-vol{ margin:0 }
.fi-nome{ font-weight:600 }
.fi-nome, .fi-volumes{ min-height:42px }
.fi-topo-acoes{ display:flex; align-items:center }
.fi-remover-ambiente{ white-space:nowrap }

.fi-volumes-nomes{
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--linha); background:var(--superficie);
}
.fi-volumes-nomes summary{ cursor:pointer; font-size:var(--t-sm); color:var(--texto-medio) }
.fi-volumes-nomes summary:hover{ color:var(--texto) }
.fi-vol-resumo{ font-weight:500 }
.fi-dica{ font-size:var(--t-sm); color:var(--texto-medio); margin:var(--e-3) 0 }
.fi-dica-inline{ font-size:var(--t-xs); color:var(--texto-suave) }
.fi-vol-grade{
  display:grid; gap:var(--e-2); grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  padding-bottom:var(--e-3);
}
.fi-vol-item{ display:flex; align-items:center; gap:var(--e-2) }
.fi-vol-num{
  width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--superficie-3); color:var(--madeira-escura);
  font-size:var(--t-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
.fi-vol-item input{
  flex:1; min-width:0; min-height:34px; padding:0 var(--e-2);
  font-size:var(--t-sm); font-family:inherit; color:var(--texto);
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-sm);
}

.fi-bloco{ padding:var(--e-5); border-bottom:1px solid var(--linha); min-width:0 }
.fi-bloco:last-child{ border-bottom:0 }
.fi-bloco h4{
  margin:0 0 var(--e-3); font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--texto-medio);
}

/* Vistas técnicas */
.fi-imagens{
  display:grid; gap:var(--e-3); grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  margin-bottom:var(--e-3);
}
.fi-img{ margin:0 }
.fi-img img{
  width:100%; height:130px; object-fit:contain; display:block;
  background:#fff; border:1px solid var(--linha); border-radius:var(--r-sm);
}
.fi-img figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-2);
  font-size:var(--t-xs); color:var(--texto-suave); margin-top:var(--e-1);
}
.fi-sem-imagem{
  margin:0 0 var(--e-3); padding:var(--e-4);
  border:1px dashed var(--linha); border-radius:var(--r-md);
  font-size:var(--t-sm); color:var(--texto-medio); background:var(--superficie-2);
}
.fi-img-acoes{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap }
.fi-add-imagem{ white-space:nowrap }
.fi-arquivo{ display:none }
.fi-remover-imagem{ white-space:nowrap }

/* Materiais.
   A tabela tem quatro campos de texto e não encolhe abaixo de uns 500px.
   Sem a caixa rolante, ela empurrava a PÁGINA inteira para o lado no
   celular — 128 px de rolagem lateral, medidos. Rolar só a tabela mantém
   o resto da tela no lugar. */
/* min-width:0 é o que faz a caixa rolante funcionar. Sem ele, a largura
   mínima da tabela (520px) vaza para o pai e empurra a página inteira —
   é a mesma armadilha de grade sem altura definida, mas na horizontal.
   Sem isto a rolagem lateral era de 128 px no celular, medidos. */
.fi-mat-rolar{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin-bottom:var(--e-3); max-width:100%; min-width:0;
}
.fi-mat-tab{ width:100%; border-collapse:collapse; min-width:520px }
.fi-mat-tab th{
  text-align:left; font-size:var(--t-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--texto-suave); padding:0 var(--e-2) var(--e-1);
}
.fi-mat-tab td{ padding:2px var(--e-2) }
.fi-mat-corpo{ vertical-align:top }
.fi-material:hover td{ background:var(--superficie-2) }
.fi-mat-tab input{
  width:100%; min-height:38px; padding:0 var(--e-2); font-size:var(--t-sm); font-family:inherit;
  color:var(--texto); background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-sm);
}
.fi-mat-cor{ font-weight:600 }
.fi-mat-marca, .fi-mat-esp, .fi-mat-aplic{ min-width:0 }
.fi-nova-material{ white-space:nowrap }
.fi-remover-material{ white-space:nowrap }

.fi-obs{
  width:100%; padding:var(--e-3); font-size:var(--t-campo); font-family:inherit; line-height:1.6;
  color:var(--texto); background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-sm); resize:vertical;
}

@media (max-width:900px){
  .fi-topo{ grid-template-columns:1fr 1fr }
  .fi-topo-acoes{ grid-column:1 / -1 }
}

/* ---------------------------------------------------------------------
   Resumo do pagamento (formulário de pedido)
   ---------------------------------------------------------------------
   O extrato do dinheiro do pedido, embaixo da forma de pagamento: preço
   à vista, acréscimo do cartão, total a cobrar, o que sobra depois da
   taxa e o saldo.

   Toda cor sai de variável, então o tema escuro acompanha sozinho — não
   há uma única regra duplicada aqui embaixo. Foi assim que já apareceu
   botão branco sobre branco no escuro: cor escrita à mão numa regra só.
   --------------------------------------------------------------------- */
.resumo-pagamento{
  margin-top:var(--e-5);
  padding:var(--e-4) var(--e-5);
  background:var(--superficie-2);
  border:1px solid var(--linha);
  border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:var(--e-1);
}
.rp-linha{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-4); padding:var(--e-2) 0;
  font-size:var(--t-sm); color:var(--texto-medio);
}
.rp-linha + .rp-linha{ border-top:1px solid var(--linha) }
.rp-linha strong{
  font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:var(--t-base); color:var(--texto); font-weight:600;
}

/* O acréscimo é o número que o cliente vai questionar: fica em cor de
   alerta, não de erro. Não é problema, é informação que precisa saltar. */
.rp-acrescimo strong{ color:var(--alerta) }

/* Total e saldo são os dois números que decidem conversa com cliente. */
.rp-total{ font-size:var(--t-base) }
.rp-total strong{ font-size:var(--t-lg); font-family:var(--fonte-display) }
.rp-saldo strong{ font-size:var(--t-lg); font-family:var(--fonte-display); color:var(--madeira-escura) }

/* O líquido é o único número que diz se o negócio fecha. Verde quando
   sobra igual ou mais que o preço à vista; vermelho quando a taxa comeu
   mais do que o repasse cobriu. A classe .abaixo é posta pelo script. */
.rp-liquido strong{ color:var(--sucesso) }
.rp-liquido.abaixo strong{ color:var(--perigo) }
.rp-liquido.abaixo span{ color:var(--perigo) }

/* ---------------------------------------------------------------------
   Contas a Receber e Taxas do Cartão
   ---------------------------------------------------------------------
   Tudo por variável, então o tema escuro acompanha sem uma regra
   duplicada. O pino colorido distingue as duas naturezas da linha:
   dinheiro contratado (cliente já pagou) x projeção (ainda não pagou).
   --------------------------------------------------------------------- */
.modulo-receber{ background:linear-gradient(145deg,#4B93BE,#2A5D7E) }

.aviso-receber{
  margin:var(--e-5) 0; padding:var(--e-4) var(--e-5);
  background:var(--alerta-fundo); border:1px solid var(--alerta);
  border-radius:var(--r-md); color:var(--texto);
  font-size:var(--t-sm); line-height:1.6;
}

.legenda-receber{
  display:flex; flex-wrap:wrap; gap:var(--e-5);
  margin:var(--e-5) 0 var(--e-4);
  font-size:var(--t-sm); color:var(--texto-medio);
}
.legenda-receber .leg-item{ display:inline-flex; align-items:center; gap:var(--e-2) }

.pino{
  display:inline-block; width:9px; height:9px; border-radius:var(--r-full);
  flex:none; vertical-align:baseline;
}
.pino-cartao{ background:var(--azul) }
.pino-previsto{ background:var(--texto-fraco) }

.mes-receber{
  margin-bottom:var(--e-6); background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:var(--sombra-0); overflow:hidden;
}
.mes-cabecalho{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--e-4); padding:var(--e-4) var(--e-5);
  background:var(--superficie-2); border-bottom:1px solid var(--linha);
}
.mes-cabecalho h3{
  margin:0; font-family:var(--fonte-display); font-size:var(--t-lg);
  font-weight:500; color:var(--madeira-escura); text-transform:capitalize;
}
.mes-numeros{ display:flex; flex-wrap:wrap; gap:var(--e-5) }
.mn-item{ display:flex; flex-direction:column; gap:2px; font-size:var(--t-2xs); color:var(--texto-suave) }
.mn-item strong{ font-size:var(--t-base); color:var(--texto); font-variant-numeric:tabular-nums }
.mn-taxa{ color:var(--texto-medio) }
.mn-forte strong{ font-size:var(--t-lg); color:var(--sucesso); font-family:var(--fonte-display) }

.tabela-receber{ width:100%; border-collapse:collapse; font-size:var(--t-sm) }
.tabela-receber th{
  text-align:left; padding:var(--e-3) var(--e-4);
  font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-suave); border-bottom:1px solid var(--linha); font-weight:600;
}
.tabela-receber td{ padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--linha); color:var(--texto) }
.tabela-receber tbody tr:last-child td{ border-bottom:none }
.tabela-receber .dir{ text-align:right }
.tabela-receber .nowrap{ white-space:nowrap }
.tabela-receber .col-taxa{ color:var(--texto-medio); font-variant-numeric:tabular-nums }
.tabela-receber .col-liquido{ font-weight:600; font-variant-numeric:tabular-nums }
.linha-atrasada{ background:var(--perigo-fundo) }
.tag-atraso{
  display:inline-block; margin-left:var(--e-2); padding:1px var(--e-2);
  border-radius:var(--r-full); background:var(--perigo); color:var(--branco);
  font-size:var(--t-2xs); font-weight:600;
}
html.tema-escuro .tag-atraso{ color:var(--bg) }

.nota-rodape{
  margin-top:var(--e-6); padding-top:var(--e-4);
  border-top:1px solid var(--linha);
  font-size:var(--t-sm); color:var(--texto-medio); line-height:1.6;
}

/* ---- tela de taxas ---- */
.explica-taxas{
  margin:var(--e-5) 0; padding:var(--e-4) var(--e-5);
  background:var(--superficie-2); border:1px solid var(--linha);
  border-radius:var(--r-md); font-size:var(--t-sm);
  color:var(--texto-medio); line-height:1.65;
}
.explica-taxas p{ margin:0 0 var(--e-3) }
.explica-taxas p:last-child{ margin-bottom:0 }
.exemplo-taxa{
  padding:var(--e-3) var(--e-4); background:var(--superficie-3);
  border-radius:var(--r-sm); font-family:var(--fonte-mono); font-size:var(--t-xs);
}
.alerta-conferir{
  padding:var(--e-3) var(--e-4); background:var(--alerta-fundo);
  border-left:3px solid var(--alerta); border-radius:var(--r-sm); color:var(--texto);
}

.tabela-taxas{ width:100%; border-collapse:collapse; font-size:var(--t-sm) }
.tabela-taxas th{
  text-align:left; padding:var(--e-3); font-size:var(--t-2xs);
  text-transform:uppercase; letter-spacing:.04em; color:var(--texto-suave);
  border-bottom:1px solid var(--linha); font-weight:600;
}
.tabela-taxas td{ padding:var(--e-2) var(--e-3); border-bottom:1px solid var(--linha) }
.tabela-taxas .dir{ text-align:right }
.tabela-taxas .nowrap{ white-space:nowrap }
.tabela-taxas .ideal{ color:var(--texto-suave); font-variant-numeric:tabular-nums }
.campo-taxa{
  width:92px; text-align:right; padding:var(--e-2);
  font-size:var(--t-campo); font-family:var(--fonte);
  border:1px solid var(--linha-forte); border-radius:var(--r-sm);
  background:var(--superficie); color:var(--texto);
}
.campo-taxa:focus{ outline:none; border-color:var(--madeira); box-shadow:var(--anel) }
.sobra-boa{ color:var(--sucesso); font-weight:600; font-variant-numeric:tabular-nums }
.sobra-ruim{ color:var(--perigo); font-weight:600; font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------------
   Abatimento de parcelas
   ---------------------------------------------------------------------
   Usado no pedido (aba Pagamentos) e em Contas a Receber. Mesma marcação
   nos dois lugares, para o abatimento funcionar igual nos dois — foi o
   pedido explícito.

   Tudo por variável: o tema escuro acompanha sem regra duplicada.
   --------------------------------------------------------------------- */
.bloco-abatimento{
  margin-top:var(--e-5); padding:var(--e-4) var(--e-5);
  background:var(--superficie-2); border:1px solid var(--linha);
  border-radius:var(--r-md);
}
.ab-topo{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--e-3) }
.ab-topo strong{ font-size:var(--t-sm); color:var(--texto) }

.ab-parcelas{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.ab-parcela{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  padding:var(--e-2) var(--e-3); min-height:42px;
  background:var(--superficie); border:1px solid var(--linha-forte);
  border-radius:var(--r-sm); cursor:pointer; text-align:left;
  font-family:var(--fonte); color:var(--texto);
}
.ab-parcela:hover{ border-color:var(--madeira) }
.ab-parcela.escolhida{ border-color:var(--madeira-escura); background:var(--madeira-fraca); box-shadow:var(--anel) }
.ab-num{ font-size:var(--t-2xs); color:var(--texto-suave); font-weight:600 }
.ab-val{ font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums }
.ab-data{ font-size:var(--t-2xs); color:var(--texto-suave) }
@media (pointer:coarse){ .ab-parcela{ min-height:44px } }

.ab-modo{
  margin-top:var(--e-4); padding-top:var(--e-3);
  border-top:1px solid var(--linha); display:flex; flex-wrap:wrap; gap:var(--e-3);
}
.ab-modo-titulo{ flex-basis:100%; font-size:var(--t-sm); color:var(--texto-medio) }
.ab-opcao{ display:flex; align-items:center; gap:var(--e-2); cursor:pointer; min-height:42px }
.ab-opcao span{ display:flex; flex-direction:column }
.ab-opcao strong{ font-size:var(--t-sm) }
.ab-opcao small{ font-size:var(--t-2xs); color:var(--texto-suave) }
@media (pointer:coarse){ .ab-opcao{ min-height:44px } }

.ab-previa{ margin-top:var(--e-3) }
.ab-previa-titulo{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-suave); font-weight:600; margin-bottom:var(--e-2) }
.ab-previa-linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-2) 0; border-bottom:1px solid var(--linha); font-size:var(--t-sm);
}
.ab-previa-linha:last-child{ border-bottom:none }
.ab-previa-linha strong{ font-variant-numeric:tabular-nums }
.ab-previa-linha em{ font-style:normal; font-size:var(--t-2xs); color:var(--texto-suave) }
.ab-previa-linha.quita em{ color:var(--sucesso); font-weight:600 }
.ab-previa-sobra{
  margin-top:var(--e-2); padding:var(--e-2) var(--e-3);
  background:var(--alerta-fundo); border-radius:var(--r-sm);
  font-size:var(--t-2xs); color:var(--texto);
}

/* ---- painel flutuante de abatimento (Contas a Receber) ---- */
.painel-abatimento{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--e-6) var(--e-4); overflow-y:auto;
}
.pa-caixa{
  width:100%; max-width:620px;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); box-shadow:var(--sombra-2);
  padding:var(--e-5);
}
.pa-cabecalho{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e-4); margin-bottom:var(--e-4);
  padding-bottom:var(--e-3); border-bottom:1px solid var(--linha);
}
.pa-cabecalho strong{
  display:block; font-family:var(--fonte-display);
  font-size:var(--t-lg); color:var(--madeira-escura);
}
.btn-fechar{
  flex:none; width:42px; height:42px; line-height:1;
  font-size:24px; color:var(--texto-medio);
  background:transparent; border:1px solid var(--linha);
  border-radius:var(--r-sm); cursor:pointer;
}
.btn-fechar:hover{ background:var(--superficie-2); color:var(--texto) }
@media (pointer:coarse){ .btn-fechar{ width:44px; height:44px } }

/* ---------------------------------------------------------------------
   Contas a Pagar
   ---------------------------------------------------------------------
   A fatura do cartão é um <details>: fechada mostra um valor só, aberta
   mostra o que tem dentro. Foi o pedido — não poluir a página com o
   extrato inteiro, como no aplicativo do banco.
   --------------------------------------------------------------------- */
.modulo-pagar{ background:linear-gradient(145deg,#C87F6A,#8C4A38) }
/* O valor fica FORA do fluxo, alinhado com o ícone lá em cima.
   Como item de flex ele empurrava o bloco de texto para cima, e o cartão
   sem valor (Resumo e lançamentos) ficava com o título mais embaixo que
   os outros dois. Absoluto, os três títulos nascem na mesma altura. */
.modulo-lado{
  position:absolute; right:var(--e-5); top:var(--e-5);
  height:48px; display:flex; align-items:center;
  font-variant-numeric:tabular-nums;
  font-size:var(--t-base); font-weight:600; color:#fff;
}

/* Duas linhas de descrição em todos, mesmo quando o texto ocupa uma só.
   Sem isto o cartão de descrição curta encolhe e desalinha de novo. */
.modulo-texto small{ min-height:3em }
.acoes-cabecalho{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.mn-atraso{ color:var(--perigo) }

.config-cartao{
  margin:var(--e-5) 0; padding:var(--e-3) var(--e-4);
  background:var(--superficie-2); border:1px solid var(--linha);
  border-radius:var(--r-md);
}
.config-cartao > summary{
  cursor:pointer; font-size:var(--t-sm); color:var(--texto-medio);
  min-height:42px; display:flex; align-items:center;
}
.config-cartao form{ margin-top:var(--e-3) }
@media (pointer:coarse){ .config-cartao > summary{ min-height:44px } }

.fatura{
  border-bottom:1px solid var(--linha); background:var(--superficie);
}
.fatura:last-of-type{ border-bottom:none }
.fatura > summary{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); min-height:42px; cursor:pointer;
}
.fatura.atrasada > summary{ background:var(--perigo-fundo) }
.fat-icone{ flex:none; width:22px; height:22px; color:var(--azul) }
.fat-icone svg{ width:100%; height:100% }
.fat-texto{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.fat-texto strong{ font-size:var(--t-sm); color:var(--texto) }
.fat-texto small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.fat-valor{
  margin-left:auto; font-size:var(--t-base); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--texto);
}
@media (pointer:coarse){ .fatura > summary{ min-height:44px } }

.fat-itens{ padding:0 var(--e-5) var(--e-4); background:var(--superficie-2) }
.fat-linha{
  display:flex; align-items:baseline; gap:var(--e-3);
  padding:var(--e-2) 0; border-bottom:1px solid var(--linha); font-size:var(--t-sm);
}
.fat-linha:last-of-type{ border-bottom:none }
.fl-desc{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 }
.fl-desc small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.fl-desc em, .fl-parc{
  font-style:normal; font-size:var(--t-2xs); color:var(--texto-suave);
  border:1px solid var(--linha-forte); border-radius:var(--r-full);
  padding:0 var(--e-2); margin-left:var(--e-2);
}
.fl-valor{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600 }
.fl-acoes{ flex:none }
.fl-pago{ font-style:normal; font-size:var(--t-2xs); color:var(--sucesso); font-weight:600 }
.fat-rodape{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3);
  margin-top:var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--linha);
}

/* Cabeçalho clicável para ordenar. A seta some no toque para não competir
   com o texto numa tela estreita. */
th.ordenavel{ cursor:pointer; user-select:none }
th.ordenavel:hover{ color:var(--texto) }
th.ordenavel.asc::after{ content:' ▲'; font-size:.7em }
th.ordenavel.desc::after{ content:' ▼'; font-size:.7em }

/* ---- extrato do estoque ---- */
.filtros-extrato{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--e-3);
  margin:var(--e-5) 0; padding:var(--e-4) var(--e-5);
  background:var(--superficie-2); border:1px solid var(--linha);
  border-radius:var(--r-md);
}
.ex-tipo{
  display:inline-block; padding:1px var(--e-2); border-radius:var(--r-full);
  font-size:var(--t-2xs); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
}
.ex-tipo.entrada{ background:var(--sucesso-fundo); color:var(--sucesso) }
.ex-tipo.saida{ background:var(--alerta-fundo); color:var(--texto) }
.ex-obs{ display:block; font-size:var(--t-2xs); color:var(--texto-suave) }

/* Botão de ação destrutiva: vermelho só na borda, para não competir com
   os botões normais da linha. */
.mini.perigo{ border-color:var(--perigo); color:var(--perigo) }
.mini.perigo:hover{ background:var(--perigo); color:var(--branco) }
html.tema-escuro .mini.perigo:hover{ color:var(--bg) }

/* Campo de busca solto, sem a lupa da barra de ferramentas. Usado nos
   extratos, onde a busca fica logo acima da tabela. */
.busca-lista{
  width:100%; margin-bottom:var(--e-3);
  padding:var(--e-3) var(--e-4);
  font-size:var(--t-campo); font-family:var(--fonte);
  color:var(--texto); background:var(--superficie);
  border:1px solid var(--linha-forte); border-radius:var(--r-md);
}
.busca-lista::placeholder{ color:var(--texto-fraco) }
.busca-lista:focus{ outline:none; border-color:var(--madeira); box-shadow:var(--anel) }

/* Seletor de quantos meses mostrar, nas contas a pagar e a receber. */
.seletor-meses{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  margin:var(--e-5) 0 var(--e-4); font-size:var(--t-sm); color:var(--texto-medio);
}
.seletor-meses .mini.ativo{
  background:var(--madeira-escura); border-color:var(--madeira-escura); color:#fff;
}

/* Aviso sobre a margem na aba de materiais do pedido. */
.aviso-margem{
  margin:var(--e-4) 0; padding:var(--e-3) var(--e-4);
  background:var(--superficie-2); border-left:3px solid var(--linha-forte);
  border-radius:var(--r-sm); line-height:1.6;
}
.aviso-margem.alerta{ background:var(--alerta-fundo); border-left-color:var(--alerta) }
.sem-custo{ color:var(--perigo); font-style:italic }

/* ---------------------------------------------------------------------
   Editor das cláusulas do contrato
   ---------------------------------------------------------------------
   Bloco cinza = campo que o sistema preenche, não editável. A diferença
   visual tem que ser óbvia: reescrever à mão o que devia vir do pedido é
   o jeito mais fácil de quebrar um contrato.
   --------------------------------------------------------------------- */
.cl-clausula{
  margin-bottom:var(--e-5); background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:var(--sombra-0); overflow:hidden;
}
.cl-cabecalho{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4);
  background:var(--superficie-2); border-bottom:1px solid var(--linha);
}
.cl-numero{
  flex:none; width:30px; height:30px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--madeira-escura); color:#fff;
  font-family:var(--fonte-display); font-weight:600; font-size:var(--t-sm);
}
.cl-cabecalho input{
  flex:1; min-width:0; padding:var(--e-2) var(--e-3);
  font-size:var(--t-campo); font-family:var(--fonte-display);
  color:var(--texto); background:var(--superficie);
  border:1px solid var(--linha-forte); border-radius:var(--r-sm);
}
.cl-cabecalho input:focus{ outline:none; border-color:var(--madeira); box-shadow:var(--anel) }

.cl-itens{ padding:var(--e-3) var(--e-4) }
.cl-item{
  display:flex; align-items:flex-start; gap:var(--e-3);
  padding:var(--e-3) 0; border-bottom:1px solid var(--linha);
}
.cl-item:last-child{ border-bottom:none }
.cl-num{
  flex:none; min-width:34px; padding-top:var(--e-2);
  font-family:var(--fonte-display); font-weight:600;
  font-size:var(--t-sm); color:var(--madeira-escura);
  font-variant-numeric:tabular-nums;
}
.cl-corpo{ flex:1; min-width:0 }
.cl-corpo textarea{
  width:100%; padding:var(--e-3);
  font-size:var(--t-campo); font-family:var(--fonte); line-height:1.6;
  color:var(--texto); background:var(--superficie);
  border:1px solid var(--linha-forte); border-radius:var(--r-sm);
  resize:vertical; overflow:hidden;
}
.cl-corpo textarea:focus{ outline:none; border-color:var(--madeira); box-shadow:var(--anel) }

.cl-item.fixo .cl-corpo{
  padding:var(--e-3); background:var(--superficie-3);
  border:1px dashed var(--linha-forte); border-radius:var(--r-sm);
}
.cl-bloco{ display:block; font-size:var(--t-sm); color:var(--texto-medio); font-weight:600 }
.cl-item.fixo small{ display:block; font-size:var(--t-2xs); color:var(--texto-suave); margin-top:2px }

.cl-acoes{ flex:none; display:flex; flex-wrap:wrap; gap:var(--e-1) }
.cl-rodape{
  padding:var(--e-3) var(--e-4);
  border-top:1px solid var(--linha); background:var(--superficie-2);
}

/* ---------------------------------------------------------------------
   Fornecedores e catálogos
   ---------------------------------------------------------------------
   Cartão que expande, igual ao da fatura do cartão em Contas a Pagar.
   Tudo por variável: o tema escuro acompanha sem regra duplicada.
   --------------------------------------------------------------------- */
.modulo-fornecedores{ background:linear-gradient(145deg,#7E8C6A,#4A5638) }
.modulo-catalogos{ background:linear-gradient(145deg,#8C7BA6,#584A70) }

.forn-cartao, .cat-fornecedor{
  margin-bottom:var(--e-3); background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:var(--sombra-0); overflow:hidden;
}
.forn-cartao > summary, .cat-fornecedor > summary{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); min-height:42px; cursor:pointer;
}
.forn-cartao > summary:hover, .cat-fornecedor > summary:hover{ background:var(--superficie-2) }
@media (pointer:coarse){
  .forn-cartao > summary, .cat-fornecedor > summary{ min-height:44px }
}
.forn-nome, .cat-nome{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 }
.forn-nome strong, .cat-nome strong{
  font-family:var(--fonte-display); font-size:var(--t-base); color:var(--texto);
}
.forn-nome small, .cat-nome small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.forn-contagem, .cat-contagem{
  margin-left:auto; display:flex; flex-wrap:wrap; gap:var(--e-2);
  font-size:var(--t-2xs); color:var(--texto-suave); white-space:nowrap;
}
.forn-tag{
  padding:1px var(--e-2); border:1px solid var(--linha-forte);
  border-radius:var(--r-full);
}

.forn-corpo, .cat-corpo{
  padding:var(--e-4) var(--e-5); background:var(--superficie-2);
  border-top:1px solid var(--linha);
}
.forn-acoes{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-4) }
.forn-dados{
  display:grid; gap:var(--e-2); margin-bottom:var(--e-4);
  font-size:var(--t-sm); color:var(--texto-medio);
}
.forn-dados .rot{
  font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-suave); margin-right:var(--e-2);
}

/* ---- caixa de envio ---- */
.forn-envio{
  padding:var(--e-4); margin-bottom:var(--e-4);
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-md);
}
.fe-tipo{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); margin-bottom:var(--e-3) }
.fe-rotulo{ font-size:var(--t-sm); font-weight:600; color:var(--texto) }
.fe-opcao{ display:flex; align-items:center; gap:var(--e-2); cursor:pointer; min-height:42px; font-size:var(--t-sm) }
@media (pointer:coarse){ .fe-opcao{ min-height:44px } }

.fe-solta{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--e-5); text-align:center; cursor:pointer;
  border:2px dashed var(--linha-forte); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.fe-solta:hover, .fe-solta.arrastando{ border-color:var(--madeira); background:var(--madeira-fraca) }
.fe-solta strong{ font-size:var(--t-sm); color:var(--texto) }
.fe-solta small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.fe-solta.enviando{ opacity:.55; pointer-events:none }
.fe-erro{ margin-top:var(--e-2); font-size:var(--t-2xs); color:var(--perigo) }

.forn-grupo{ margin-top:var(--e-4) }
.forn-grupo h4{
  margin:0 0 var(--e-2); font-family:var(--fonte-display);
  font-size:var(--t-sm); font-weight:500; color:var(--madeira-escura);
}
.forn-arquivos{ list-style:none; margin:0; padding:0 }
.forn-arquivos li{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-2) 0; border-bottom:1px solid var(--linha); font-size:var(--t-sm);
}
.forn-arquivos li:last-child{ border-bottom:none }
.forn-arquivos small{ color:var(--texto-suave); font-size:var(--t-2xs); margin-left:auto; white-space:nowrap }

/* ---- abas do catálogo ---- */
.cat-abas{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-4) }
.cat-aba{
  display:flex; align-items:center; gap:var(--e-2);
  padding:var(--e-2) var(--e-4); min-height:42px;
  font-family:var(--fonte); font-size:var(--t-sm); color:var(--texto-medio);
  background:var(--superficie); border:1px solid var(--linha-forte);
  border-radius:var(--r-full); cursor:pointer;
}
.cat-aba:hover{ border-color:var(--madeira) }
.cat-aba.ativa{ background:var(--madeira-escura); border-color:var(--madeira-escura); color:#fff }
.cat-badge{
  padding:0 var(--e-2); border-radius:var(--r-full);
  background:var(--superficie-3); color:var(--texto-medio); font-size:var(--t-2xs);
}
.cat-aba.ativa .cat-badge{ background:rgba(255,255,255,.22); color:#fff }
@media (pointer:coarse){ .cat-aba{ min-height:44px } }

.cat-vazio{
  padding:var(--e-4); font-size:var(--t-sm); color:var(--texto-medio);
  background:var(--superficie); border:1px dashed var(--linha-forte);
  border-radius:var(--r-md); text-align:center;
}
.cat-arquivos{ list-style:none; margin:0; padding:0 }
.cat-arquivo{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-2); border-bottom:1px solid var(--linha);
}
.cat-arquivo:last-child{ border-bottom:none }
.cat-arquivo:hover{ background:var(--superficie) }
.cat-link{ display:flex; align-items:center; gap:var(--e-3); flex:1; min-width:0; text-decoration:none }
.cat-icone{
  flex:none; width:38px; height:38px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--madeira-fraca); color:var(--madeira-escura);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.03em;
}
.cat-texto{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.cat-texto strong{ font-size:var(--t-sm); color:var(--texto) }
.cat-texto small{ font-size:var(--t-2xs); color:var(--texto-suave) }

/* ---- janela de pré-visualização ---- */
.cat-previa{
  position:fixed; z-index:70; width:380px; height:480px;
  display:flex; flex-direction:column;
  background:var(--superficie); border:1px solid var(--linha-forte);
  border-radius:var(--r-md); box-shadow:var(--sombra-2); overflow:hidden;
}
.cp-topo{
  padding:var(--e-2) var(--e-3); font-size:var(--t-2xs); font-weight:600;
  color:var(--texto); background:var(--superficie-2);
  border-bottom:1px solid var(--linha);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cp-corpo{ flex:1; overflow:auto; background:var(--superficie-3) }
.cp-corpo iframe{ width:100%; height:100%; border:0 }
.cp-corpo img{ width:100%; display:block }
.cp-rodape{
  padding:var(--e-2) var(--e-3); font-size:var(--t-2xs); color:var(--texto-suave);
  background:var(--superficie-2); border-top:1px solid var(--linha); text-align:center;
}
/* Em tela de toque não existe passar o mouse: a janela só atrapalharia. */
@media (pointer:coarse){ .cat-previa{ display:none } }

/* Painel de cada aba do catálogo. Sem margem própria: quem separa é a
   lista de arquivos, e o painel só existe para mostrar ou esconder. */
.cat-painel{ margin-top:var(--e-2) }

/* ---------------------------------------------------------------------
   Projeto 3D do pedido
   --------------------------------------------------------------------- */
.pj-solta{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--e-7) var(--e-5); text-align:center; cursor:pointer;
  border:2px dashed var(--linha-forte); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.pj-solta:hover, .pj-solta.arrastando{ border-color:var(--madeira); background:var(--madeira-fraca) }
.pj-solta strong{ font-size:var(--t-base); color:var(--texto) }
.pj-solta small{ font-size:var(--t-2xs); color:var(--texto-suave) }

.pj-progresso{ margin-top:var(--e-4) }
.pj-barra{
  height:8px; border-radius:var(--r-full); overflow:hidden;
  background:var(--superficie-3);
}
.pj-barra span{
  display:block; height:100%; width:0;
  background:var(--madeira-escura); transition:width .2s ease;
}

.pj-cabecalho{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--e-3); margin-bottom:var(--e-4);
  padding-bottom:var(--e-3); border-bottom:1px solid var(--linha);
}
.pj-cabecalho strong{ display:block; font-size:var(--t-base); color:var(--texto) }
.pj-cabecalho small{ display:block; font-size:var(--t-2xs); color:var(--texto-suave) }
.pj-acoes{ display:flex; flex-wrap:wrap; gap:var(--e-2) }

.pj-visor{
  position:relative; width:100%; height:min(70vh, 560px);
  border:1px solid var(--linha); border-radius:var(--r-md);
  background:var(--superficie-3); overflow:hidden;
}
.pj-visor canvas{ display:block; width:100%; height:100% }
.pj-carregando{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:var(--t-sm); color:var(--texto-medio); background:var(--superficie-3);
}
.pj-ajuda{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-4);
  margin-top:var(--e-3); font-size:var(--t-2xs); color:var(--texto-suave);
}

.pj-falhou{
  padding:var(--e-4) var(--e-5);
  background:var(--alerta-fundo); border-left:3px solid var(--alerta);
  border-radius:var(--r-sm); font-size:var(--t-sm); line-height:1.6;
}
.pj-falhou p{ margin:var(--e-2) 0 0 }

/* Saída quando o .skp não abre: o caminho que funciona vem em destaque,
   e o detalhe técnico fica recolhido — quem quer resolver não precisa
   ler byte em hexadecimal. */
.pj-solucao{
  margin-top:var(--e-3); padding:var(--e-3) var(--e-4);
  background:var(--superficie); border-left:3px solid var(--sucesso);
  border-radius:var(--r-sm);
}
.pj-diagnostico{ margin-top:var(--e-3) }
.pj-diagnostico > summary{
  cursor:pointer; font-size:var(--t-2xs); color:var(--texto-medio);
  min-height:42px; display:flex; align-items:center;
}
.pj-diagnostico code{
  font-family:var(--fonte-mono); font-size:var(--t-2xs);
  padding:1px var(--e-2); border-radius:var(--r-sm);
  background:var(--superficie-3); color:var(--texto);
}
.pj-trocar{ margin-top:var(--e-3) }
@media (pointer:coarse){ .pj-diagnostico > summary{ min-height:44px } }

/* Remanejar o resto de uma parcela: os botões ficam colados na parcela a
   que pertencem, e só aparecem onde sobrou algo. */
.ab-caixa{ display:flex; flex-direction:column; gap:var(--e-1) }
.ab-remanejar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1);
  font-size:var(--t-2xs); color:var(--texto-suave);
}

/* Destino do pedaço da parcela que o pagamento não cobriu. Aparece na
   prévia, no momento de digitar o valor — que é onde a dúvida nasce. */
.ab-resto{
  margin-top:var(--e-3); padding:var(--e-3) var(--e-4);
  background:var(--alerta-fundo); border-left:3px solid var(--alerta);
  border-radius:var(--r-sm);
  display:flex; flex-wrap:wrap; gap:var(--e-3);
}
.ab-resto-titulo{ flex-basis:100%; font-size:var(--t-sm); color:var(--texto) }

/* Erro do visualizador 3D: diz o que faltou, em vez de só avisar que
   falhou. Erro genérico faz procurar no escuro. */
.pj-erro-3d{
  display:flex; flex-direction:column; gap:var(--e-2);
  padding:var(--e-5); max-width:520px; text-align:center;
}
.pj-erro-3d strong{ font-size:var(--t-sm); color:var(--texto) }
.pj-erro-3d small{ font-size:var(--t-2xs); color:var(--texto-suave); line-height:1.5 }

/* Lista de projetos do pedido. Cliente pode fechar cozinha e dormitório:
   são dois projetos, e a escolha é por nome. */
.pj-abas{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-4) }
.pj-aba{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  padding:var(--e-2) var(--e-4); min-height:42px; cursor:pointer;
  font-family:var(--fonte); text-align:left;
  background:var(--superficie); border:1px solid var(--linha-forte);
  border-radius:var(--r-md); color:var(--texto);
}
.pj-aba:hover{ border-color:var(--madeira) }
.pj-aba.ativa{ background:var(--madeira-escura); border-color:var(--madeira-escura); color:#fff }
.pj-aba-nome{ font-size:var(--t-sm); font-weight:600 }
.pj-aba-meta{ font-size:var(--t-2xs); color:var(--texto-suave) }
.pj-aba.ativa .pj-aba-meta{ color:rgba(255,255,255,.75) }
@media (pointer:coarse){ .pj-aba{ min-height:44px } }

.pj-envio{
  padding:var(--e-4); margin-bottom:var(--e-4);
  background:var(--superficie-2); border:1px solid var(--linha);
  border-radius:var(--r-md);
}

/* Material parado no estoque. Recolhido por padrão: é aviso, não tarefa
   do dia — aberto sempre, viraria paisagem e ninguém leria. */
.parado-caixa{
  margin:var(--e-5) 0; background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--r-md);
  box-shadow:var(--sombra-0);
}
.parado-caixa > summary{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); min-height:42px; cursor:pointer;
}
.parado-caixa > summary strong{ font-size:var(--t-sm); color:var(--texto) }
.parado-caixa > summary small{ font-size:var(--t-2xs); color:var(--texto-suave) }
@media (pointer:coarse){ .parado-caixa > summary{ min-height:44px } }

.parado-grupo{
  padding:var(--e-4) var(--e-5);
  border-top:1px solid var(--linha); background:var(--superficie-2);
}
.parado-grupo h4{
  margin:0 0 var(--e-2); font-family:var(--fonte-display);
  font-size:var(--t-sm); font-weight:500; color:var(--madeira-escura);
}
.parado-lista{ list-style:none; margin:var(--e-3) 0 0; padding:0 }
.parado-lista li{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-2) 0; border-bottom:1px solid var(--linha); font-size:var(--t-sm);
}
.parado-lista li:last-child{ border-bottom:none }
.pl-nome{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0 }
.pl-nome small{ font-size:var(--t-2xs); color:var(--texto-suave) }

/* Relatório do contador, no fim da barra de filtros. Coisa de uma vez por
   ano: não rouba espaço do uso diário, mas fica à vista. */
.filtro-relatorio{
  display:flex; align-items:flex-end; gap:var(--e-2);
  margin-left:auto; padding-left:var(--e-4);
  border-left:1px solid var(--linha);
}

/* Texto de apoio na tela de login. */
.ajuda-login{
  display:block; margin-top:var(--e-2);
  font-size:var(--t-2xs); color:var(--texto-suave); line-height:1.5;
}

/* Segundo fator: QR ao lado do código manual, para quem não consegue ler
   a imagem poder digitar. */
.mfa-qr{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-5);
  padding:var(--e-4); background:var(--superficie-2);
  border:1px solid var(--linha); border-radius:var(--r-md);
}
.mfa-qr img{ display:block; border-radius:var(--r-sm); background:#fff }
.mfa-manual{ display:flex; flex-direction:column; gap:var(--e-2); min-width:0 }
.mfa-manual code{
  font-family:var(--fonte-mono); font-size:var(--t-sm); letter-spacing:.08em;
  padding:var(--e-2) var(--e-3); word-break:break-all;
  background:var(--superficie-3); border-radius:var(--r-sm); color:var(--texto);
}

/* Conta sem e-mail cadastrado: o administrador precisa ver de relance
   quem ainda entra pelo login antigo. */
.sem-email{
  display:block; font-size:var(--t-2xs); color:var(--alerta); margin-top:2px;
}

/* Navegação de páginas do histórico. */
.paginacao-historico{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  margin-top:var(--e-5); padding-top:var(--e-4);
  border-top:1px solid var(--linha);
}
.paginacao-historico .mini.ativo{
  background:var(--madeira-escura); border-color:var(--madeira-escura); color:#fff;
}
/* Botão desligado continua visível, mas não responde: sumir com ele faria
   os outros pularem de lugar a cada página. */
.paginacao-historico .mini.desligado{
  opacity:.4; pointer-events:none;
}
.paginacao-historico .reticencia{ color:var(--texto-suave); padding:0 var(--e-1) }

/* Aviso no topo da página de configurações. role="alert" faz o leitor de
   tela anunciar assim que aparece. */
.aviso-topo{
  margin:var(--e-4) 0; padding:var(--e-4) var(--e-5);
  background:var(--alerta-fundo); border-left:3px solid var(--alerta);
  border-radius:var(--r-sm); color:var(--texto);
  font-size:var(--t-sm); line-height:1.6;
}

/* ---------------------------------------------------------------------
   Biblioteca de cores e texturas
   ---------------------------------------------------------------------
   Amostra de material se escolhe pelo olho, não pelo nome. Por isso a
   imagem é grande e o texto pequeno — ao contrário do resto do sistema.
   --------------------------------------------------------------------- */
.tex-trilha{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  margin-bottom:var(--e-4); font-size:var(--t-sm); color:var(--texto-medio);
}
.tex-trilha a{ color:var(--madeira-escura); text-decoration:none }
.tex-trilha a:hover{ text-decoration:underline }
.tex-trilha strong{ color:var(--texto) }
.tex-seta{ color:var(--texto-suave) }

.tex-pastas{
  display:grid; gap:var(--e-3); margin-bottom:var(--e-5);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.tex-pasta{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-md); box-shadow:var(--sombra-0); overflow:hidden;
}
.tex-pasta-link{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); min-height:42px; text-decoration:none;
}
.tex-pasta-link:hover{ background:var(--superficie-2) }
@media (pointer:coarse){ .tex-pasta-link{ min-height:44px } }
.tex-icone{ flex:none; width:26px; height:26px; color:var(--madeira-escura) }
.tex-icone svg{ width:100%; height:100% }
.tex-pasta-texto{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.tex-pasta-texto strong{ font-size:var(--t-sm); color:var(--texto) }
.tex-pasta-texto small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.tex-pasta-acoes{
  display:flex; flex-wrap:wrap; gap:var(--e-1);
  padding:var(--e-2) var(--e-4); background:var(--superficie-2);
  border-top:1px solid var(--linha);
}

.tex-solta{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--e-5); margin-bottom:var(--e-5); text-align:center; cursor:pointer;
  border:2px dashed var(--linha-forte); border-radius:var(--r-md);
  background:var(--superficie-2); transition:var(--transicao);
}
.tex-solta:hover, .tex-solta.arrastando{ border-color:var(--madeira); background:var(--madeira-fraca) }
.tex-solta strong{ font-size:var(--t-sm); color:var(--texto) }
.tex-solta small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.tex-aviso-raiz{
  padding:var(--e-4); margin-bottom:var(--e-5);
  background:var(--superficie-2); border:1px dashed var(--linha-forte);
  border-radius:var(--r-md);
}

/* A grade das amostras. Quadrados grandes: cor de MDF se compara de
   relance, e miniatura pequena engana. */
.tex-grade{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.tex-cartao{
  margin:0; background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sombra-0);
}
.tex-imagem{ display:block; aspect-ratio:1/1; background:var(--superficie-3) }
.tex-imagem img{ width:100%; height:100%; object-fit:cover; display:block }
.tex-cartao figcaption{ padding:var(--e-2) var(--e-3) }
.tex-cartao figcaption strong{
  display:block; font-size:var(--t-2xs); color:var(--texto); line-height:1.35;
}
.tex-cartao figcaption small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.tex-cartao-acoes{
  display:flex; flex-wrap:wrap; gap:var(--e-1);
  padding:var(--e-2) var(--e-3); background:var(--superficie-2);
  border-top:1px solid var(--linha);
}

/* Seletor da biblioteca dentro da apresentação. */
.ea-linha-biblioteca{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3);
  margin-bottom:var(--e-3);
}
.ea-modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:var(--e-4); background:rgba(20,18,16,.55);
}
.ea-modal-caixa{
  display:flex; flex-direction:column;
  width:min(880px, 100%); max-height:min(88vh, 760px);
  background:var(--superficie); border-radius:var(--r-lg);
  box-shadow:var(--sombra-2); overflow:hidden;
}
.ea-modal-topo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) var(--e-5);
  background:var(--superficie-2); border-bottom:1px solid var(--linha);
}
.ea-modal-trilha{
  padding:var(--e-2) var(--e-5); font-size:var(--t-2xs); color:var(--texto-medio);
  border-bottom:1px solid var(--linha);
}
.ea-modal-trilha a{ color:var(--madeira-escura); text-decoration:none }
.ea-modal-corpo{ flex:1; overflow:auto; padding:var(--e-4) var(--e-5) }
.ea-modal-rodape{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  padding:var(--e-3) var(--e-5);
  background:var(--superficie-2); border-top:1px solid var(--linha);
}
.ea-modal-conta{ font-size:var(--t-sm); color:var(--texto-medio) }

.ea-modal-pastas{
  display:grid; gap:var(--e-2); margin-bottom:var(--e-4);
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
}
.ea-modal-pasta{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:var(--e-3); min-height:42px; cursor:pointer; text-align:left;
  font-family:var(--fonte);
  background:var(--superficie-2); border:1px solid var(--linha-forte);
  border-radius:var(--r-sm); color:var(--texto);
}
.ea-modal-pasta:hover{ border-color:var(--madeira) }
.ea-modal-pasta strong{ font-size:var(--t-sm) }
.ea-modal-pasta small{ font-size:var(--t-2xs); color:var(--texto-suave) }

.ea-modal-grade{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
}
.ea-modal-tex{
  padding:0; cursor:pointer; overflow:hidden; font-family:var(--fonte);
  background:var(--superficie); border:2px solid var(--linha);
  border-radius:var(--r-sm); transition:var(--transicao);
}
.ea-modal-tex img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }
.ea-modal-tex span{
  display:block; padding:var(--e-2); font-size:var(--t-2xs);
  color:var(--texto); line-height:1.3; text-align:left;
}
.ea-modal-tex:hover{ border-color:var(--madeira) }
/* Escolhida: borda grossa na cor da marca. Só mudar o fundo não se vê
   por baixo da imagem, que ocupa o cartão inteiro. */
.ea-modal-tex.escolhida{
  border-color:var(--madeira-escura);
  box-shadow:0 0 0 2px var(--madeira-fraca) inset;
}

/* Atalho para a biblioteca de texturas, dentro de Tabelas e Catálogos. */
.cat-atalho{
  display:flex; align-items:center; gap:var(--e-4);
  padding:var(--e-4) var(--e-5); margin-bottom:var(--e-4);
  background:var(--superficie); border:1px solid var(--linha);
  border-left:3px solid var(--madeira-escura);
  border-radius:var(--r-md); box-shadow:var(--sombra-0);
  text-decoration:none; transition:var(--transicao);
}
.cat-atalho:hover{ background:var(--superficie-2); border-left-color:var(--madeira) }
.cat-atalho-icone{ flex:none; width:30px; height:30px; color:var(--madeira-escura) }
.cat-atalho-icone svg{ width:100%; height:100% }
.cat-atalho-texto{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0 }
.cat-atalho-texto strong{ font-family:var(--fonte-display); font-size:var(--t-base); color:var(--texto) }
.cat-atalho-texto small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.cat-atalho-seta{ flex:none; width:18px; height:18px; color:var(--texto-suave) }
.cat-atalho-seta svg{ width:100%; height:100% }

/* Motivo do cancelamento de uma conta fixa. */
.motivo-cancel{
  display:block; margin-top:2px;
  font-size:var(--t-2xs); color:var(--texto-suave); font-style:italic;
}

/* O botão de instalar é um <button>, e não um link: precisa herdar a
   aparência dos itens da lateral, que são <a>. */
.lat-instalar{
  width:100%; border:0; cursor:pointer;
  font-family:var(--fonte); font-size:inherit; text-align:left;
}

/* ---------------------------------------------------------------------
   Medições do pedido
   --------------------------------------------------------------------- */
.doc-medicao{ background:linear-gradient(145deg,#5E8C93,#38585E) }

.med-vazio{
  padding:var(--e-6) var(--e-5); margin-bottom:var(--e-5); text-align:center;
  background:var(--superficie-2); border:1px dashed var(--linha-forte);
  border-radius:var(--r-md);
}
.med-vazio p{ margin:0 0 var(--e-2) }

.med-lista{ display:grid; gap:var(--e-3); margin-bottom:var(--e-5) }
.med-cartao{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-md); box-shadow:var(--sombra-0); overflow:hidden;
}
/* O cartão inteiro é clicável: a pessoa quer o arquivo, não um botão
   pequeno no canto. */
.med-abrir{
  display:flex; align-items:center; gap:var(--e-4);
  padding:var(--e-4) var(--e-5); text-decoration:none; min-height:42px;
}
.med-abrir:hover{ background:var(--superficie-2) }
@media (pointer:coarse){ .med-abrir{ min-height:44px } }
.med-icone{
  flex:none; width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--madeira-fraca); color:var(--madeira-escura);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.04em;
}
.med-texto{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.med-texto strong{ font-size:var(--t-base); color:var(--texto) }
.med-texto small{ font-size:var(--t-2xs); color:var(--texto-suave) }
.med-clique{ color:var(--madeira-escura) !important; font-weight:600 }
.med-acoes{
  display:flex; flex-wrap:wrap; gap:var(--e-2);
  padding:var(--e-2) var(--e-5); background:var(--superficie-2);
  border-top:1px solid var(--linha);
}

/* Socorro do carnê: discreto, porque é para o dia em que algo saiu
   errado — não é ação do dia a dia. */
.ab-socorro{ margin-top:var(--e-2); text-align:right }
.ab-socorro .mini{ font-size:var(--t-2xs); opacity:.75 }
.ab-socorro .mini:hover{ opacity:1 }