/* ============================================================
   LINDE UI · a régua da casa
   Uma medida só para todo o sistema — mesma altura, mesmo raio,
   mesmo respiro em cada tela. Carrega SEMPRE por último (depois
   do <style> da página) para ser a palavra [cliente].
   Um tema só: .tema-verde (o teal da casa). O tema marrom, que
   nenhuma página usava mais, saiu na Etapa 0 da limpeza (09/10/2026).
   ============================================================ */
:root{
  --ui-h:40px;        /* altura de TODO controle: chip, campo, botão */
  --ui-r:8px;         /* raio de campo e botão */
  --ui-pill:20px;     /* raio de pílula (metade da altura = pílula perfeita) */
  --ui-fs:13px;       /* corpo dos controles */
  --ui-padx:14px;     /* respiro horizontal */
  /* ---- ETAPA 0 · RÉGUA VISUAL (09/10/2026) ---- */
  --ui-h-sm:32px;     /* botão dentro de tabela (e o .mini) */
  --ui-card-r:12px;   /* cartão: seção, resumo, bloco */
  --rot-fs:10px;      /* A régua de rótulo: rótulo de campo, cabeçalho de coluna, */
  --rot-fw:700;       /* rótulo do cartão de resumo, sobretítulo e o rótulo do    */
  --rot-ls:.08em;     /* cartão do celular — 10 px, negrito, caixa alta, uma só.  */
  /* cor é função: cinco estados (C3 do apanhado) */
  --st-ok:#1E7A45;   --st-ok-bg:#E3F3E8;   --st-ok-line:#BFE0CB;
  --st-warn:#8A6A1F; --st-warn-bg:#FBF6E9; --st-warn-line:#EAD9AE;
  --st-bad:#B0433A;  --st-bad-bg:#F8ECEB;  --st-bad-line:#E9C4BF;
  --st-run:#1F6B72;  --st-run-bg:#EAF4F5;  --st-run-line:#D5E9EB;
  --st-neu:#696158;  --st-neu-bg:#F1F0EF;
}

/* ---------- TEMA VERDE (o teal da casa) ---------- */
body.tema-verde{
  --teal:#2C9199; --teal-d:#1F6B72; --teal-x:#16494D; --teal-xx:#0F3538;
  --soft:#EAF4F5; --line:#D5E9EB; --bg:#F4F8F8;
  --ink:#16494D; --ink2:#2E6167; --mut:#566E76;
}
/* NÃO forçamos o fundo do body: cada página escolhe o seu (ex.: o login é
   escuro). Os temas trocam só as VARIÁVEIS — a página se re-veste sozinha. */

/* ============================================================
   CONTROLES — a mesma barra em toda tela
   ============================================================ */

/* ---- campos de formulário (input / select) ---- */
body .lt-fld>input, body .lt-fld>select,
body .fld>input, body .fld>select,
body .linha-add>input, body .linha-add>select,
body .premio-linha>input,
body.ui-form-wide main input[type=text], body.ui-form-wide main input[type=date],
body.ui-form-wide main input[type=email], body.ui-form-wide main input[type=password],
body.ui-form-wide main input[type=search], body.ui-form-wide main select,
body.ui-form-wide .box input{
  height:var(--ui-h); box-sizing:border-box; margin:0;
  padding:0 var(--ui-padx);
  border:1px solid var(--line); border-radius:var(--ui-r);
  font:500 var(--ui-fs)/1.1 var(--sans);
  background:#fff; color:var(--ink);
}
body .lt-fld>select, body .fld>select, body .linha-add>select,
body.ui-form-wide main select{ padding-right:32px; }

/* ---- pílulas de filtro + busca (a régua base do MarketView) ---- */
body .filtros button, body .filtros input{
  height:var(--ui-h); box-sizing:border-box; margin:0;
  padding:0 16px; border:1px solid var(--line); border-radius:var(--ui-pill);
  font:600 var(--ui-fs)/1 var(--sans); background:#fff; color:var(--ink2);
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
}
body .filtros input{ font-weight:500; justify-content:flex-start; }

/* ---- botões nas barras de ação ---- */
body .lt-row>.btn, body .linha-add>.btn, body .btnrow>.btn{
  height:var(--ui-h); box-sizing:border-box;
  padding:0 18px; border-radius:var(--ui-r);
  font:600 var(--ui-fs)/1 var(--sans);
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---- exceção: campos sobre o cartão-gradiente continuam translúcidos ---- */
body .destaque .fld>input, body .destaque .fld>select{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#fff;
}
body .destaque .fld>input::placeholder{ color:rgba(255,255,255,.55); }

/* ---- foco: o mesmo anel em tudo ---- */
body input:focus, body select:focus, body textarea:focus{
  outline:2px solid var(--teal); outline-offset:1px;
}

/* ---- rótulos de campo: mesma voz, mesmo tamanho ---- */
body .lt-fld>label, body .fld>label{
  font:var(--rot-fw) var(--rot-fs) var(--sans); letter-spacing:var(--rot-ls); text-transform:uppercase;
  color:var(--mut); margin:0 0 4px; white-space:nowrap;
}

/* ===== marca padrao (igual a home): simbolo 30px + wordmark branco ===== */
.lc-wm{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;font-family:var(--sans)}
@media(max-width:760px){.lc-wm{display:none}}

/* O cartão de celular da tabela de contratos MORA NA PRÓPRIA contratos.html.
   Aqui existia uma cópia antiga (rótulo AO LADO do valor, 88px de coluna) e, como este
   arquivo carrega depois do <style> da página, era a cópia velha que vencia: "[cliente]" saía quebrado no meio da palavra. Uma regra, um lugar. */

/* ============================================================
   ETAPA 0 · A RÉGUA VISUAL (09/10/2026)
   Só desenho: nenhuma função, nenhum texto, nenhum número muda.
   Tudo em @media screen — o papel (impressão da própria página)
   continua com as regras dele; os relatórios abrem documento
   próprio e não carregam esta folha.
   ============================================================ */
@media screen{

/* ---- BOTÕES: quatro famílias, UMA geometria ----
   40 px de altura (32 dentro de tabela e no .mini), raio 8, 13 px negrito.
   Primário = teal cheio (o que grava ou avança) · Secundário = branco com borda teal
   (.ghost; o .fant do manual era o mesmo vazado com outro nome) · Perigo = branco com
   borda e texto vermelhos (.perigo) · Terciário = link (não é .btn). A altura é FIXA
   (não depende do padding nem do glifo do emoji) — era daí que saíam 21, 22, 31, 39, 41. */
body .btn{
  height:var(--ui-h); min-height:0; box-sizing:border-box;
  padding:0 16px; border:1px solid var(--teal); border-radius:var(--ui-r);
  background:var(--teal); color:#fff;
  font-family:var(--sans); font-size:var(--ui-fs); font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; vertical-align:middle; text-decoration:none; cursor:pointer;
}
body .btn:hover{background:var(--teal-d); border-color:var(--teal-d)}
body .btn.ghost, body .btn.fant{background:#fff; color:var(--teal-d); border-color:var(--teal); font-weight:600}
body .btn.ghost:hover, body .btn.fant:hover{background:var(--soft); border-color:var(--teal)}
body .btn.perigo, body .btn.ghost.perigo{background:#fff; color:var(--st-bad); border-color:var(--st-bad)}
body .btn.perigo:hover, body .btn.ghost.perigo:hover{background:#FDF1F1; border-color:var(--st-bad)}
body .btn:disabled, body .btn[disabled]{opacity:.5; cursor:not-allowed}
/* o atributo hidden continua escondendo: o display acima venceria o [hidden] do navegador
   (achado do cético: o «⛶ tela cheia» do Risco aparecia morto onde não há tela cheia) */
body .btn[hidden], body .pill[hidden], body .fchip[hidden], body .pn-chip[hidden], body .ie-chip[hidden], body .etiqueta[hidden]{display:none}
/* compacto: dentro de tabela e o .mini */
body td .btn, body th .btn, body .btn.mini{height:var(--ui-h-sm); padding:0 12px; font-size:12px}
/* barras que já pediam a geometria (agora é a do .btn; ficam por compatibilidade) */
body .lt-row>.btn, body .linha-add>.btn, body .btnrow>.btn{height:var(--ui-h); padding:0 16px}
body .btnrow>.btn.mini, body .lt-row>.btn.mini{height:var(--ui-h-sm); padding:0 12px}

/* ---- PÍLULA: uma fonte, uma forma, cinco estados ----
   (antes: mono 10 px na mesa, sans 10–11 px no farol e no Painel, três raios) */
body .pill, body .fchip, body .pn-chip, body .ie-chip, body .etiqueta{
  display:inline-block; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:0; padding:1px 9px; border-radius:var(--ui-pill);
  white-space:nowrap; vertical-align:baseline;
}
/* feito · ok */
body .pill.entregue, body .pill.recebido, body .fchip.ok, body .pn-chip.ok{background:var(--st-ok-bg); color:var(--st-ok)}
/* em curso */
body .pill.aembarcar, body .pn-chip.nao{background:var(--st-run-bg); color:var(--st-run)}
/* atenção */
body .pill.emembarque, body .pill.pendente, body .fchip.warn, body .pn-chip.conf, body .ie-chip{background:var(--st-warn-bg); color:var(--st-warn); border:0}
/* atraso · erro */
body .pill.atraso, body .fchip.bad, body .pn-chip.atr, body .ie-chip.red{background:var(--st-bad-bg); color:var(--st-bad); border:0}
/* encerrado · neutro */
body .pill.washout, body .fchip, body .pn-chip.sem{background:var(--st-neu-bg); color:var(--st-neu)}
/* «no prazo» do Painel continua no amarelo da fatia da esteira (a legenda da barra é a cor da pílula) */
body .pn-chip.dia{background:#FFF1C9; color:var(--st-warn)}
/* etiqueta SEM estado (grupo, emissor, tipo, fonte): borda fina, texto escuro, nenhuma cor de estado.
   (.etiqueta é o nome novo; .tag já tem outro sentido no Câmbio, na porta e no Horizon) */
body .etiqueta, body .pill.grp{background:#fff; color:var(--ink); border:1px solid var(--line); padding:0 8px; font-size:10.5px; font-weight:700}
body .pill.grp-mae{background:var(--teal-x); color:#fff; border-color:var(--teal-x)}

/* ---- CARTÃO DE RESUMO: sem borda colorida (só a vermelha, quando carrega atraso) ----
   a dourada («dinheiro») e a teal saem; raio de cartão 12 */
body .kpis>.kpi, body .pn-kpi{border-left:1px solid var(--line); border-radius:var(--ui-card-r)}
body .kpis>.kpi.dourado{border-left-color:var(--line)}
body .kpis>.kpi.rubro{border-left:3px solid var(--st-bad); padding-left:13px}
body .pn-kpi.atr{border-left:3px solid var(--st-bad); padding-left:10px}
/* a régua de rótulo nos cartões que o Painel injeta */
body .pn-kpi small, body .pn-en small{font-size:var(--rot-fs); font-weight:var(--rot-fw); letter-spacing:var(--rot-ls)}

/* ---- CAIXA DE AVISO: três, não nove ----
   informação (fundo claro + filete teal) · atenção (creme + filete âmbar) · erro (rosado + filete vermelho).
   Os nomes de cada tela continuam; o desenho é um dos três. .av-info/.av-atencao/.av-erro para o que vier
   (.caixa, .aviso e .barra já têm outro sentido em outras telas — por isso nomes próprios). */
body .av-info, body .if-cx, body .pn-est-membro, body .cg-resumo{
  background:var(--st-run-bg); border:1px solid var(--st-run-line); border-left:3px solid var(--teal);
  border-radius:var(--ui-r); color:var(--ink)}
body .av-atencao, body .ie-av, body .lt-sh-conf, body .iv-repcx{
  background:var(--st-warn-bg); border:1px solid var(--st-warn-line); border-left:3px solid var(--st-warn);
  border-radius:var(--ui-r); color:var(--ink)}
body .av-erro, body .alerta, body .ie-av.red, body .iv-delcx{
  background:var(--st-bad-bg); border:1px solid var(--st-bad-line); border-left:3px solid var(--st-bad);
  border-radius:var(--ui-r); color:var(--ink)}
body .av-info, body .av-atencao, body .av-erro{padding:10px 12px; margin:8px 0; font-size:12.5px; line-height:1.5}

/* ---- BARRA DE PROGRESSO: 6 px em toda tela (eram 4, 6 e 12) ---- */
body .kpi .barra, body .prog, body .farol .fb{height:6px; border-radius:3px}

/* ---- AVISO FLUTUANTE: um desenho só ----
   (eram cinco: raio 20 na mesa, 9 no Risco e na Valuation, sombra preta ou teal…)
   Mostrar/esconder continua com cada tela; aqui é só a cara. No app, sobe acima da barra de abas. */
body .toast, body .rk-toast, body .pn-rel-toast, body #lxd-toast{
  background:var(--teal-x); color:#fff; border-radius:var(--ui-r);
  font-family:var(--sans); font-size:13px; font-weight:500; line-height:1.4;
  padding:10px 18px; box-shadow:0 8px 24px rgba(15,53,56,.28);
  max-width:min(560px, calc(100vw - 32px)); box-sizing:border-box; text-align:center}
body.com-abas .toast, body.com-abas .rk-toast, body.com-abas .pn-rel-toast, body.com-abas #lxd-toast{
  bottom:calc(74px + env(safe-area-inset-bottom, 0px))}

/* ---- o véu dos pop-ups era marrom (resto do tema que saiu): agora é o do modal ---- */
body .acao-veu, body .pn-est-veu, body .pn-rel-veu{background:rgba(15,53,56,.55)}

}