/* Padrão visual único da Kelus. As CORES vêm da paleta do cliente (assets/paleta.css: --marinho, --azul, --verde, --verde-az, --claro);
   fonte, formas, espaços e tabelas são iguais em todos os clientes. Tons de cinza derivados da cor do cliente (color-mix). Desenvolvido por Kelus Consultoria. */
@font-face { font-family: Signika; font-style: normal; font-weight: 300 700; font-display: swap; src: url("signika.ttf") format("truetype"); }
:root {
  --fundo: color-mix(in srgb, var(--marinho, #0B295E) 4%, #fff);
  --linha: color-mix(in srgb, var(--marinho, #0B295E) 16%, #fff);
  --linha-campo: color-mix(in srgb, var(--marinho, #0B295E) 30%, #fff);
  --zebra: color-mix(in srgb, var(--marinho, #0B295E) 3.5%, #fff);
  --total: color-mix(in srgb, var(--verde, #4F7FD9) 38%, #fff);
}
body { font-family: Signika, "Segoe UI", system-ui, Arial, sans-serif; font-size: 14.5px; line-height: 1.45; background: var(--fundo); }
h1, h2, h3 { font-weight: 600; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1.05rem; }
.saudacao { font-size: 1.3rem; font-weight: 600; }

/* formas: cartões de 8 px e campos de 5 px, planos, borda fina, quase sem sombra; botões de ação em pílula */
.cartao, .cartao-menu, .acao-cx, .mais-cx, .card, .painel { border-radius: 8px; box-shadow: none; border: 1px solid var(--linha); }
.cartao-menu:hover, .acao-cx:hover, .mais-cx:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transform: none; }
/* botões de ação em pílula (decisão do Luis); cartões, campos e tabelas planos */
button, .botao, .pers, .bt, .botao-azul, .botao-branco { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
input, select, textarea, .campo input, .campo select, .filtros input, .filtros select { border-radius: 5px; border-color: var(--linha-campo); font-family: inherit; }
input[type=file], input[type=password] { border-radius: 5px; border-color: var(--linha-campo); }
.msg, .aviso, .msg-info, .msg-ok, .msg-erro, .msg-aviso { border-radius: 6px; }

/* tabelas: cabeçalho forte na cor do cliente, linhas zebradas, total em destaque */
table { font-size: .93rem; }
th { background: var(--marinho, #0B295E); color: #fff; font-weight: 600; padding: 8px 10px; }
td { padding: 7px 10px; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tr.total td, tfoot td { background: var(--total); font-weight: 600; }
.tabela { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden auto; }

/* tema escuro: as listras e o total acompanham */
html[data-tema="escuro"] { --zebra: #1e242a; --total: color-mix(in srgb, var(--verde, #4F7FD9) 32%, #1c2127); --linha-campo: #4a5662; }
html[data-tema="escuro"] th { background: color-mix(in srgb, var(--marinho, #0B295E) 55%, #000); }

/* menu em quadradinhos: ícones planos */
.res-janela { border-radius: 8px; }
.tile .cartao-icone { border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.estrela { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.cartao-icone { border-radius: 10px; }
.acao { font-weight: 500; }
.selo { border-radius: 999px; }   /* etiquetas de situação continuam em pílula */

/* janela de pergunta do sistema (kelusConfirma) */
.kdlg { border-radius: 8px; }
.kdlg-bt button { border-radius: 999px; }
.topo-app .tp-btn { border-radius: 6px; }
.topo-app .tp-menu { border-radius: 8px; }

/* tela inicial e Entrar ocupam a janela inteira (rodapé embaixo, faixa escura cresce); Login e Entrar em pílula larga */
body:has(main#conteudo > .hero-marca), body:has(.faixa-titulo) { min-height: 100vh; display: flex; flex-direction: column; }
main#conteudo:has(> .hero-marca) { flex: 1; display: flex; flex-direction: column; }
main#conteudo > .hero-marca { flex: 1; display: flex; align-items: center; }
main#conteudo > .hero-marca > .largura { width: 100%; }
body:has(.faixa-titulo) main { flex: 1; width: 100%; box-sizing: border-box; align-content: start; }
.topo .botao-azul, .topo-in nav a.cta, .cartao form:has(#senha) .acoes button { border-radius: 999px; padding: .8rem 2.1rem; font-size: 1.12rem; border: 2px solid transparent; }
/* Cadastrar (aviso da empresa) e Personalizar: pílula, mesmo tamanho, alinhados pela borda direita do cartão */
#aviso-empresa .botao, body .fav-cab .pers { border-radius: 999px; min-width: 132px; padding: .6rem 1.5rem; font-size: 1rem; text-align: center; justify-content: center; }
body .fav-cab .pers { right: 21px; }
@media (max-width: 640px) {
  #aviso-empresa { flex-wrap: wrap; } #aviso-empresa > div { flex: 1 1 180px; min-width: 0; } #aviso-empresa .botao { width: 100%; }
  .fav-cab { flex-direction: column; gap: 0; } body .fav-cab .pers { position: static; transform: none; margin-bottom: 8px; right: auto; }
}