/* Tema do sistema: vem DEPOIS do bootstrap.min.css (base.html). Aqui ficam só (1) as variáveis do Bootstrap
   trocadas pela identidade visual, (2) o layout com sidebar e (3) o que o Bootstrap não traz (select com busca,
   grade de permissões). Componentes (botão, tabela, formulário, modal, toast, badge) são do Bootstrap. */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("fontes/figtree-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("fontes/figtree-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("fontes/figtree-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("fontes/figtree-latin-700.woff2") format("woff2"); }

:root {
  /* identidade (tema padrão). O administrador troca a paleta em Administração > Aparência: app/tema.py injeta
     um <style> com estas mesmas variáveis. Para mudar o padrão do template, edite aqui E a paleta "verde-azulado" em tema.py */
  --primaria: #1f9aa0;
  --primaria-rgb: 31, 154, 160;
  --primaria-escura: #167b80;
  --primaria-escura-rgb: 22, 123, 128;
  --primaria-ativa: #12676b;
  --primaria-profunda: #0f5a5e;
  --primaria-profunda-rgb: 15, 90, 94;
  --primaria-clara: #e3f4f4;
  --escuro: #0d1f21;
  --destaque: #2cc5b9;
  --destaque-rgb: 44, 197, 185;
  --fundo: #f2f3f3;
  --painel: #ffffff;
  --borda: #e6e8e8;
  --borda-forte: #d7dbdb;
  --texto: #14191a;
  --suave: #6b7476;
  --fraco: #9aa2a3;
  --raio-painel: 20px;
  --sidebar: 252px;

  /* tokens semânticos: os componentes usam SÓ estes; o modo escuro (bloco html[data-bs-theme="dark"]) troca os valores */
  --primaria-texto: var(--primaria-escura); --primaria-texto-rgb: var(--primaria-escura-rgb);   /* texto e ícone na cor do tema */
  --primaria-texto-forte: var(--primaria-profunda); --primaria-texto-forte-rgb: var(--primaria-profunda-rgb);
  --primaria-suave: var(--primaria-clara);   /* fundo suave na cor do tema */
  --zero: #c3c9ca; --cinza-pilula: #eceeee; --hover-linha: #fafbfb; --interruptor: #d9dddd; --perigo-borda: #f3c9c1; --ok-vivo: #22c55e;

  /* menu lateral (estilo padrão "Claro"). Em Administração > Aparência o administrador troca o estilo: app/tema.py injeta estas
     mesmas variáveis. Valores como var(--primaria-clara) fazem o menu acompanhar a cor do sistema. */
  --sb-fundo: #f2f3f3; --sb-texto: #2d3436; --sb-suave: #6b7476; --sb-label: #747d7f; --sb-hover: rgba(0, 0, 0, .06);
  --sb-ativo-bg: rgba(0, 0, 0, .09); --sb-ativo-texto: #14191a; --sb-ativo-icone: var(--primaria-escura); --sb-borda: rgba(0, 0, 0, .09);
  --sb-cartao-bg: #ffffff; --sb-cartao-borda: rgba(0, 0, 0, .09); --sb-cartao-texto: #14191a;
  --sb-botao-bg: #ffffff; --sb-botao-borda: rgba(0, 0, 0, .12); --sb-botao-texto: #6b7476;
  --sb-campo-bg: #f2f5f5; --sb-logo-bg: var(--escuro); --sb-logo-texto: #14191a; --sb-esquema: light;

  /* Bootstrap 5.3: só --bs-primary não recolore botões, links e foco; por isso as variáveis abaixo */
  --bs-font-sans-serif: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9rem;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fundo);
  --bs-primary: var(--primaria);
  --bs-primary-rgb: var(--primaria-rgb);
  --bs-link-color: var(--primaria-texto);
  --bs-link-color-rgb: var(--primaria-texto-rgb);
  --bs-link-hover-color: var(--primaria-texto-forte);
  --bs-link-hover-color-rgb: var(--primaria-texto-forte-rgb);
  --bs-border-color: var(--borda);
  --bs-secondary-color: var(--suave);
  --bs-focus-ring-color: rgba(var(--primaria-rgb), .25);
}
.btn-primary {
  --bs-btn-bg: var(--primaria); --bs-btn-border-color: var(--primaria); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--primaria-escura); --bs-btn-hover-border-color: var(--primaria-escura); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--primaria-ativa); --bs-btn-active-border-color: var(--primaria-ativa); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--primaria); --bs-btn-disabled-border-color: var(--primaria);
  --bs-btn-focus-shadow-rgb: var(--primaria-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--primaria-texto); --bs-btn-border-color: var(--primaria);
  --bs-btn-hover-bg: var(--primaria); --bs-btn-hover-border-color: var(--primaria); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--primaria-escura); --bs-btn-active-border-color: var(--primaria-escura); --bs-btn-active-color: #fff;
}
.text-bg-primary { background-color: var(--primaria) !important; }
.form-check-input:checked { background-color: var(--primaria); border-color: var(--primaria); }
.form-control:focus, .form-select:focus { border-color: var(--primaria); box-shadow: 0 0 0 .25rem rgba(var(--primaria-rgb), .2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.card { --bs-card-bg: var(--painel); --bs-card-border-color: var(--borda); --bs-card-border-radius: 14px; --bs-card-inner-border-radius: 13px; }

body { -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .2rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- estrutura */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; transition: grid-template-columns .2s; background: var(--sb-fundo); }
.painel { margin: 12px 12px 12px 0; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio-painel); min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: .75rem; padding: 1rem 2rem; border-bottom: 1px solid var(--borda); min-height: 64px; }
.conteudo { padding: 2rem; max-width: 1240px; width: 100%; }

/* ---------- sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; overflow-y: auto; overflow-x: hidden; }
.sb-topo { display: flex; align-items: center; gap: .5rem; padding: 0 6px 14px; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--sb-logo-texto); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.logo-marca { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--sb-logo-bg); flex: none; }
.logo-marca img { width: 28px; height: 28px; object-fit: contain; display: block; }
.sb-recolher { margin-left: auto; }
.sb-recolher, .icone-botao { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--borda); background: var(--painel); color: var(--suave); cursor: pointer; padding: 0; }
.sb-recolher:hover, .icone-botao:hover { color: var(--texto); border-color: var(--borda-forte); }
.sidebar .sb-recolher, .sidebar .icone-botao { background: var(--sb-botao-bg); border-color: var(--sb-botao-borda); color: var(--sb-botao-texto); }
.sidebar .sb-recolher:hover, .sidebar .icone-botao:hover { color: var(--sb-ativo-texto); border-color: var(--sb-texto); }
.sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sb-secao { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; font-size: .78rem; color: var(--sb-label); padding: 0; margin: 16px 0 6px; font-weight: 500; text-align: left; }
.sb-secao { padding-left: 10px; padding-right: 10px; }
.sb-seta { width: 14px; height: 14px; transition: transform .15s; }
.sb-grupo:not(.fechado) .sb-seta { transform: rotate(90deg); }
.sb-grupo.fechado .sb-itens { display: none; }
.sb-itens { display: flex; flex-direction: column; gap: 2px; }
.sb-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 99px; color: var(--sb-texto); text-decoration: none; font-weight: 500; white-space: nowrap; }
.sb-item .ic { color: var(--sb-suave); }
.sb-item:hover { background: var(--sb-hover); color: var(--sb-ativo-texto); }
.sb-item.ativo { background: var(--sb-ativo-bg); color: var(--sb-ativo-texto); font-weight: 600; }
.sb-item.ativo .ic { color: var(--sb-ativo-icone); }
.sb-empresa { background: var(--sb-cartao-bg); border: 1px solid var(--sb-cartao-borda); color: var(--sb-cartao-texto); color-scheme: var(--sb-esquema); border-radius: 14px; padding: 12px; margin-top: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.sb-empresa-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sb-vazio { color: var(--sb-suave); font-size: .85rem; margin: 0; }
.sb-usuario { display: flex; align-items: center; gap: .6rem; padding: 12px 6px 0; margin-top: 10px; border-top: 1px solid var(--sb-borda); }
.sb-usuario form { margin: 0 0 0 auto; }
.sb-usuario-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-usuario-nome strong { color: var(--sb-ativo-texto); font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-usuario-nome small { color: var(--sb-label); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; background: var(--primaria-suave); color: var(--primaria-texto); font-weight: 700; flex: none; }
.sb-fundo, .so-celular { display: none; }

/* sidebar recolhida (só ícones) */
.recolhida .app { grid-template-columns: 76px 1fr; }
.recolhida .sb-topo { flex-direction: column; padding-bottom: 8px; }
.recolhida .sb-recolher { margin: 6px 0 0; }
.recolhida .logo-nome, .recolhida .sb-item span, .recolhida .sb-secao,
.recolhida .sb-empresa, .recolhida .sb-usuario-nome { display: none; }
.recolhida .sb-grupo.fechado .sb-itens { display: flex; }
.recolhida .sb-item { justify-content: center; padding: .6rem; }
.recolhida .sb-usuario { flex-direction: column; }
.recolhida .sb-usuario form { margin: 0; }

/* ---------- barra superior */
.trilha { display: flex; align-items: center; gap: .35rem; color: var(--suave); font-size: .9rem; min-width: 0; }
.trilha a { color: var(--suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borda-forte); }
.trilha span { color: var(--texto); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-trilha { width: 14px; height: 14px; color: var(--fraco); flex: none; }
.pilula-status { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--ok); background: var(--ok-fundo); padding: .3rem .8rem; border-radius: 8px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.pilula-status i { width: 7px; height: 7px; border-radius: 99px; background: var(--ok-vivo); flex: none; }

/* ---------- listas e formulários */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.filtros .busca { position: relative; flex: 1 1 260px; max-width: 360px; margin: 0; }
.filtros .busca .ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--fraco); pointer-events: none; }
.filtros .busca input { padding-left: 2.4rem; }
.filtro-select { width: auto; min-width: 200px; }
tbody tr:not(.sem-clique) { cursor: pointer; }
a.principal { font-weight: 600; color: var(--texto); text-decoration: none; }
a.principal:hover { color: var(--primaria-texto); }
.vazio, .vazio-bloco { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--suave); text-align: center; }
.vazio .ic, .vazio-bloco .ic { width: 28px; height: 28px; }
.obrig { color: var(--erro); font-style: normal; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.card-link { color: inherit; transition: border-color .12s, box-shadow .12s; }
.card-link:hover { border-color: var(--primaria); box-shadow: 0 4px 16px rgba(13, 31, 33, .08); color: inherit; }
.card-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primaria-suave); color: var(--primaria-texto); flex: none; }

/* ---------- grade de permissões (cadastro de Funções) */
.permissoes { border: 1px solid var(--borda); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; }
.perm-linha { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; gap: .5rem; padding: .55rem 1rem; border-top: 1px solid var(--borda); }
.perm-linha:first-child { border-top: 0; }
.perm-cabeca { background: var(--superficie); font-weight: 600; font-size: .85rem; }

/* ---------- toasts (Bootstrap): flutuam por cima do conteúdo */
/* toasts: centralizados no topo, cartão pastel com ícone, botão de fechar discreto, entrada suave e barra de tempo */
.toast-container { z-index: 1090; width: max-content; max-width: calc(100vw - 1rem); }
.toast { --bs-toast-max-width: 440px; --bs-toast-border-radius: 14px; --bs-toast-padding-x: 0; --bs-toast-padding-y: 0;
  --t-bg: var(--painel); --t-borda: var(--borda); --t-texto: var(--texto); --t-icone-bg: var(--cinza-pilula); --t-icone: #6b7476; --t-barra: #9aa2a3;
  position: relative; overflow: hidden; background: var(--t-bg); color: var(--t-texto); border: 1px solid var(--t-borda);
  box-shadow: 0 1px 2px rgba(13, 31, 33, .06), 0 14px 34px rgba(13, 31, 33, .14); font-size: .9rem; font-weight: 500; }
.toast.show { animation: toast-entra .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.toast-linha { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .8rem .8rem .85rem; }
.toast-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--t-icone-bg); color: var(--t-icone); }
.toast-icone .ic { width: 17px; height: 17px; }
.toast-body { padding: .2rem 0 0; line-height: 1.4; flex: 1; min-width: 0; }
.toast .btn-close { flex: none; width: 26px; height: 26px; padding: 0; margin: 0; border-radius: 50%; background-size: .6em; opacity: .5; transition: opacity .12s, background-color .12s; }
.toast .btn-close:hover, .toast .btn-close:focus-visible { opacity: .9; background-color: rgba(0, 0, 0, .07); box-shadow: none; }
.toast-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--t-barra); opacity: .55; transform-origin: left center;
  animation: toast-barra var(--duracao, 3000ms) linear forwards; }
@keyframes toast-barra { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-ok { --t-bg: #effaf3; --t-borda: #c5ecd4; --t-texto: #14532d; --t-icone-bg: #cdeedb; --t-icone: #15803d; --t-barra: #22c55e; }
.toast-erro { --t-bg: #fff1f0; --t-borda: #fbd0cd; --t-texto: #7f1d1d; --t-icone-bg: #fcd9d6; --t-icone: #dc2626; --t-barra: #ef4444; }
.toast-aviso { --t-bg: #fffaeb; --t-borda: #f6e3a8; --t-texto: #7a4b00; --t-icone-bg: #fbeab2; --t-icone: #b45309; --t-barra: #f59e0b; }
.toast-info { --t-bg: var(--primaria-clara); --t-borda: rgba(var(--primaria-rgb), .3); --t-texto: var(--primaria-profunda);
  --t-icone-bg: rgba(var(--primaria-rgb), .16); --t-icone: var(--primaria-escura); --t-barra: var(--primaria); }
@media (prefers-reduced-motion: reduce) { .toast.show { animation: none; } .toast-barra { animation: none; display: none; } }
.toast-body { white-space: pre-line; } /* mensagem com várias linhas (lista de campos a corrigir) */

/* ---------- login */
.entrada { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: var(--painel); }
/* painel da marca: cartão escuro arredondado, grade fina e brilho da cor primária no canto de baixo */
.entrada-marca {
  background-color: var(--escuro); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; gap: 2.5rem; margin: 12px; border-radius: var(--raio-painel); overflow: hidden; position: relative;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.entrada-marca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 15% 100%, rgba(var(--primaria-rgb), .28), transparent 70%);
}
.entrada-logo { position: relative; z-index: 1; width: min(280px, 70%); height: auto; display: block; }
.entrada-marca-rodape { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; }
.entrada-sobre { color: #9fb3b4; margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; }
.entrada-titulo { font-size: clamp(2.75rem, 6vw, 4.25rem); font-weight: 600; letter-spacing: -.035em; line-height: .95; margin: 0; display: block; color: #fff; }
.entrada-titulo span { color: var(--destaque); }
.entrada-frase { font-size: 1.05rem; max-width: 34ch; color: #dbe6e6; margin: 0; line-height: 1.5; }
.entrada-form { display: grid; place-items: center; padding: 2rem 16px; background: var(--painel); }
.entrada-cartao { width: 100%; max-width: 380px; }

/* ---------- select com pesquisa (static/select_busca.js): o <select> original fica escondido */
select.ss-nativo { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; padding: 0; overflow: hidden; }
.ss-envolve { position: relative; display: block; }
.filtros .ss-envolve { display: inline-block; min-width: 220px; max-width: 320px; }
.ss-botao { display: block; width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--texto); padding: .375rem 2.2rem .375rem .75rem; background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7476' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat right .85rem center / 15px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.ss-botao .ss-texto { display: block; min-height: 1.5em; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-botao.ss-vazio { color: var(--suave); }
.ss-botao:focus, .ss-botao[aria-expanded=true] { outline: none; border-color: var(--primaria); background-color: var(--painel); box-shadow: 0 0 0 .25rem rgba(var(--primaria-rgb), .2); }
.ss-botao:disabled { color: var(--suave); cursor: default; }
.ss-botao.ss-com-x { padding-right: 3.9rem; }
.ss-painel { position: fixed; z-index: 1080; display: flex; flex-direction: column; gap: .4rem; padding: .5rem; background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 12px 40px rgba(13, 31, 33, .18); max-height: min(360px, 70vh); }
.ss-busca { flex: none; width: 100%; font: inherit; font-size: 1rem; color: var(--texto); padding: .5rem .75rem .5rem 2.15rem; background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7476' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat left .7rem center / 16px; border: 1px solid var(--borda); border-radius: 10px; -webkit-appearance: none; appearance: none; }
.ss-busca::placeholder { color: var(--suave); }
.ss-busca:focus { outline: none; border-color: var(--primaria); background-color: var(--painel); box-shadow: 0 0 0 .2rem rgba(var(--primaria-rgb), .2); }
.ss-busca::-webkit-search-cancel-button { -webkit-appearance: none; }
.ss-lista { overflow-y: auto; overscroll-behavior: contain; }
.ss-grupo { padding: .55rem .7rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.ss-opcao { padding: .45rem .7rem; border-radius: 10px; cursor: pointer; font-size: .9rem; }
.ss-opcao.ativa { background: var(--primaria-suave); color: var(--primaria-texto); }
.ss-opcao.selecionada { font-weight: 700; }
.ss-opcao.ss-limpar { color: var(--suave); }
.ss-opcao.desligada { opacity: .45; cursor: default; }
.ss-nada { padding: .7rem; color: var(--suave); font-size: .88rem; }
.ss-x { position: absolute; top: 50%; right: 2.4rem; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--suave); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.ss-x:hover, .ss-x:focus-visible { background: var(--primaria-suave); color: var(--primaria-texto); outline: none; }
.ss-x[hidden] { display: none; }

/* ---------- aparência de listas e formulários (referência: Chef Maker) ---------- */
:root { --campo: #f6f9f9; --superficie: #f6f7f7; --erro: #c2341f; --erro-fundo: #fdeeeb; --ok: #15803d; --ok-fundo: #e7f7ec; --azul: #1d5fa8; --azul-fundo: #e6f0fb; }

/* cabeçalho da página: título + descrição à esquerda, ação à direita, linha embaixo */
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--borda); }
.contador { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .45rem; border-radius: 8px; background: var(--cinza-pilula); color: var(--suave); font-size: .8rem; font-weight: 600; letter-spacing: 0; }

/* botões: primário com brilho, contorno branco em pílula */
.btn { font-weight: 500; --bs-btn-border-radius: 8px; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: .9rem; }
.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; }
.btn-primary { font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(var(--primaria-rgb), .25); }
.btn-contorno {
  --bs-btn-bg: var(--painel); --bs-btn-color: var(--texto); --bs-btn-border-color: var(--borda);
  --bs-btn-hover-bg: var(--painel); --bs-btn-hover-color: var(--texto); --bs-btn-hover-border-color: var(--borda-forte);
  --bs-btn-active-bg: var(--superficie); --bs-btn-active-color: var(--texto); --bs-btn-active-border-color: var(--borda-forte);
}
.btn-contorno .ic { color: var(--suave); }
.btn-sm.btn-contorno { padding: .38rem .85rem; font-size: .85rem; }
.btn-sm.btn-contorno .ic { width: 15px; height: 15px; }
.btn-contorno.perigo { --bs-btn-color: var(--erro); --bs-btn-border-color: var(--perigo-borda); --bs-btn-hover-color: var(--erro); --bs-btn-hover-bg: var(--erro-fundo); --bs-btn-hover-border-color: var(--perigo-borda); }

/* situação: pílula com bolinha */
.status { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 6px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.status.ok { color: var(--ok); background: var(--ok-fundo); }
.status.erro { color: var(--erro); background: var(--erro-fundo); }
.status.off { color: var(--suave); background: var(--cinza-pilula); }
.natureza { display: inline-block; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 6px; vertical-align: middle; }
.natureza-provento { color: var(--ok); background: var(--ok-fundo); }
.natureza-desconto { color: var(--erro); background: var(--erro-fundo); }
.natureza-adiantamento { color: var(--azul); background: var(--azul-fundo); }

/* campos: pílula cinza-clara, sem borda até o hover */
.form-control, .form-select { padding: .6rem .9rem; background-color: var(--campo); border: 1px solid var(--borda); border-radius: 8px; transition: border-color .12s, background-color .12s; }
.form-control:hover, .form-select:hover { border-color: var(--borda-forte); }
.form-control:focus, .form-select:focus { background-color: var(--painel); border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
textarea.form-control { resize: vertical; }
.form-select { padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7476' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 16px; background-position: right .8rem center; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--erro); background-color: var(--erro-fundo); box-shadow: none; }
.form-control.is-invalid { background-image: none; padding-right: 1rem; }
.form-select.is-invalid { padding-right: 2.2rem; }
fieldset:disabled .form-control, fieldset:disabled .form-select { color: var(--suave); background-color: var(--campo); opacity: 1; }
.form-label { font-size: .82rem; color: var(--suave); font-weight: 500; margin-bottom: .35rem; }
.form-text { font-size: .8rem; color: var(--fraco); }
.obrig { color: var(--erro); font-style: normal; }
.input-group > .form-control { border-radius: 0 8px 8px 0; }
.input-group > .input-group-text { border: 1px solid var(--borda); border-right: 0; border-radius: 8px 0 0 8px; background: var(--campo); color: var(--fraco); font-weight: 500; padding-left: .9rem; }

/* interruptor (switch): cinza desligado, verde-azulado ligado, bolinha branca */
.form-switch .form-check-input { --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); width: 2.25rem; height: 1.3rem; background-color: var(--interruptor); border-color: transparent; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--primaria); border-color: var(--primaria); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px var(--primaria-suave); border-color: transparent; }
.form-switch { display: flex; align-items: center; gap: .65rem; padding-left: 0; min-height: 1.5rem; }
.form-switch .form-check-input { margin: 0; flex: none; float: none; }
.form-switch .form-check-label { cursor: pointer; }

/* busca da lista: pílula com lupa */
.filtros { gap: 1rem; margin-bottom: 1rem; }
.filtros .busca { flex: 0 1 320px; max-width: 320px; }
/* o select com pesquisa herda .ss-botao (100%): nas listas ele fica ao lado da busca, com largura limitada */
.filtros:not(.filtros-hist) .ss-botao.filtro-select { width: auto; min-width: 200px; max-width: 280px; }

/* tags da ação no histórico */
.badge[class*="acao-"] { font-weight: 600; padding: .4em .75em; border-radius: 8px; }
.acao-criou { color: var(--ok); background: var(--ok-fundo); }
.acao-alterou { color: var(--primaria-texto); background: var(--primaria-suave); }
.acao-desativou { color: var(--erro); background: var(--erro-fundo); }
.acao-reativou { color: #7a4b00; background: #fffaeb; }
html[data-bs-theme="dark"] .acao-reativou { color: #fde68a; background: #2b2108; }

/* tabela: cartão arredondado, cabeçalho cinza-claro, linhas separadas, primeira coluna em negrito */
.tabela-cartao { border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--painel); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--borda); --bs-table-hover-bg: var(--hover-linha); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table thead th { --bs-table-bg: var(--superficie); text-align: left; font-size: .78rem; color: var(--suave); font-weight: 500; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.table thead th.text-end { text-align: right; }
.table tbody tr:last-child > * { border-bottom-width: 0; }
.table td.text-end { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.inativo td { color: var(--fraco); }
tr.inativo .principal { color: var(--suave); }

/* formulário: cartão, rótulo de seção, rodapé com linha */
.formulario { border-radius: 14px; }
.formulario .card-body { padding: 1.5rem; }
.rotulo-secao { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); margin: 0 0 1rem; }
.formulario .card-footer { background: transparent; border: 0; margin: 0 1.5rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--borda); }
.zona { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); }
.zona > div { display: flex; flex-direction: column; }

/* ---------- Aparência (Administração): escolha da cor do sistema */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.paleta { position: relative; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--painel); cursor: pointer; margin: 0; transition: border-color .12s, box-shadow .12s; }
.paleta:hover { border-color: var(--borda-forte); }
.paleta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paleta .amostra { width: 28px; height: 28px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.paleta-nome { font-weight: 500; font-size: .9rem; }
.paleta:has(input:checked) { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(var(--primaria-rgb), .2); }
.paleta:has(input:checked) .paleta-nome { font-weight: 700; }
.paleta:has(input:focus-visible) { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* pré-visualização: miniatura do painel do login e amostras de controles, com as mesmas variáveis do sistema */
.previa { display: grid; grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: 1rem; align-items: stretch; }
.previa-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .4rem; justify-content: flex-end; min-height: 160px; padding: 1.25rem; border-radius: 14px; color: #fff; background-color: var(--escuro);
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 22px 22px; }
.previa-marca::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 15% 100%, rgba(var(--primaria-rgb), .35), transparent 70%); }
.previa-marca > * { position: relative; z-index: 1; }
.previa-sobre { color: #9fb3b4; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 600; }
.previa-titulo { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.previa-titulo span { color: var(--destaque); }
.previa-frase { color: #dbe6e6; font-size: .85rem; }
.previa-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1.25rem; border: 1px solid var(--borda); border-radius: 14px; align-content: center; }
@media (max-width: 700px) { .previa { grid-template-columns: 1fr; } }

/* cabeçalho de tabela ordenável */
.table thead th a.ord { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; white-space: nowrap; }
.table thead th a.ord .ic { width: 13px; height: 13px; opacity: .35; transition: opacity .12s; }
.table thead th a.ord:hover { color: var(--texto); }
.table thead th a.ord:hover .ic { opacity: .75; }
.table thead th a.ord.ativa { color: var(--texto); font-weight: 600; }
.table thead th a.ord.ativa .ic { opacity: 1; color: var(--primaria-texto); }
.table thead th a.ord:focus-visible { outline: 2px solid var(--primaria); outline-offset: 3px; border-radius: 4px; }

/* lista de empresas dentro do cartão do menu: acompanha o estilo (claro ou escuro) */
.sb-empresa .form-select, .sb-empresa .form-select:focus { background-color: var(--sb-campo-bg); color: var(--sb-cartao-texto); border-color: var(--sb-cartao-borda); }
/* a lista nativa abre sobre fundo do sistema, não do menu: sem isto o texto claro do menu some nela */
.sb-empresa .form-select option { background-color: var(--painel); color: var(--texto); }

/* miniatura do menu nas opções de Aparência */
.mini-menu { position: relative; display: block; width: 46px; height: 32px; flex: none; overflow: hidden; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .14); background: var(--painel); }
.mini-menu::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 17px; background:
  linear-gradient(var(--a), var(--a)) 3px 13px / 11px 4px no-repeat,
  linear-gradient(color-mix(in srgb, var(--t) 60%, transparent), color-mix(in srgb, var(--t) 60%, transparent)) 3px 6px / 11px 3px no-repeat,
  linear-gradient(color-mix(in srgb, var(--t) 60%, transparent), color-mix(in srgb, var(--t) 60%, transparent)) 3px 21px / 11px 3px no-repeat,
  var(--f); }

/* ---------- modo escuro (automático | claro | escuro)
   O atributo data-bs-theme vem do inicio.js (preferência do navegador, guardada em localStorage; padrão: automático). O Bootstrap
   troca os componentes dele sozinho; aqui só se trocam os VALORES dos tokens do sistema (as classes não mudam). As cores de texto e ícone
   na cor do tema usam o --destaque da paleta (feito para ter contraste sobre fundo escuro: tests/test_modo_escuro.py). */
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --fundo: #0e1214; --painel: #161b1e; --superficie: #1c2225; --campo: #1e2629;
  --borda: #2a3236; --borda-forte: #3a454a;
  --texto: #e6ecec; --suave: #9aa6a8; --fraco: #6f7c7f;
  --azul: #7db5f0; --azul-fundo: #12263b; --ok: #4ade80; --ok-fundo: #11301e; --ok-vivo: #22c55e; --erro: #f87171; --erro-fundo: #3a1a17; --perigo-borda: #6b2a24;
  --cinza-pilula: #283034; --hover-linha: #1a2023; --interruptor: #3a454a;
  --primaria-texto: var(--destaque); --primaria-texto-rgb: var(--destaque-rgb);
  --primaria-texto-forte: var(--destaque); --primaria-texto-forte-rgb: var(--destaque-rgb);
  --primaria-suave: rgba(var(--primaria-rgb), .2);
}
/* menus claros viram o escuro neutro; os que já são escuros (Grafite, Carvão, Azul-noite, do tema) ficam como o administrador escolheu */
html[data-bs-theme="dark"][data-menu="claro"], html[data-bs-theme="dark"][data-menu="areia"], html[data-bs-theme="dark"][data-menu="tom-do-tema"] {
  --sb-fundo: #0e1214; --sb-texto: #e6ecec; --sb-suave: rgba(255, 255, 255, .7); --sb-label: rgba(255, 255, 255, .6);
  --sb-hover: rgba(255, 255, 255, .08); --sb-ativo-bg: rgba(255, 255, 255, .14); --sb-ativo-texto: #ffffff; --sb-ativo-icone: var(--destaque);
  --sb-borda: rgba(255, 255, 255, .14); --sb-cartao-bg: rgba(255, 255, 255, .07); --sb-cartao-borda: rgba(255, 255, 255, .14); --sb-cartao-texto: #ffffff;
  --sb-botao-bg: rgba(255, 255, 255, .08); --sb-botao-borda: rgba(255, 255, 255, .16); --sb-botao-texto: rgba(255, 255, 255, .8);
  --sb-campo-bg: rgba(255, 255, 255, .1); --sb-logo-bg: rgba(255, 255, 255, .12); --sb-logo-texto: #ffffff; --sb-esquema: dark;
}
html[data-bs-theme="dark"] .text-secondary { color: var(--suave) !important; }
html[data-bs-theme="dark"] .text-danger { color: var(--erro) !important; }
html[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--suave); --bs-btn-border-color: var(--borda-forte); --bs-btn-hover-bg: var(--superficie);
  --bs-btn-hover-color: var(--texto); --bs-btn-hover-border-color: var(--borda-forte); --bs-btn-active-bg: var(--cinza-pilula); --bs-btn-active-color: var(--texto); }
html[data-bs-theme="dark"] .toast { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .55); }
html[data-bs-theme="dark"] .toast-ok { --t-bg: #0f2a1a; --t-borda: #1f5a37; --t-texto: #bbf7d0; --t-icone-bg: #14532d; --t-icone: #86efac; --t-barra: #22c55e; }
html[data-bs-theme="dark"] .toast-erro { --t-bg: #2f1513; --t-borda: #6b2a24; --t-texto: #fecaca; --t-icone-bg: #5b1f1b; --t-icone: #fca5a5; --t-barra: #ef4444; }
html[data-bs-theme="dark"] .toast-aviso { --t-bg: #2b2108; --t-borda: #6b5410; --t-texto: #fde68a; --t-icone-bg: #4a3a0a; --t-icone: #fcd34d; --t-barra: #f59e0b; }
html[data-bs-theme="dark"] .toast-info { --t-bg: color-mix(in srgb, var(--primaria) 22%, var(--painel)); --t-borda: rgba(var(--primaria-rgb), .5); --t-texto: var(--texto);
  --t-icone-bg: rgba(var(--primaria-rgb), .3); --t-icone: var(--destaque); --t-barra: var(--primaria); }
.modal { --bs-modal-bg: var(--painel); --bs-modal-color: var(--texto); --bs-modal-border-color: var(--borda); }

/* botão que alterna automático → claro → escuro (barra do sistema e telas públicas); mostra só o ícone do modo atual */
.modo-botao .modo-icone { display: none; }
html[data-modo="auto"] .modo-botao .modo-auto, html[data-modo="claro"] .modo-botao .modo-claro, html[data-modo="escuro"] .modo-botao .modo-escuro { display: block; }
.modo-publico { position: fixed; top: 14px; right: 14px; z-index: 1060; }

/* filtros da tela de histórico: lado a lado, como nas listas dos cadastros */
.filtro-busca { width: auto; flex: 1 1 320px; max-width: 560px; }
.filtros-acoes { flex: 1 0 100%; display: flex; justify-content: flex-end; gap: .5rem; }
/* filtros do histórico: grade de 5 colunas (busca ocupa 2); campos preenchem a célula e as ações ficam na última */
.filtros-hist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .75rem 1rem; }
.filtros-hist .filtro-busca { grid-column: span 2; max-width: none; width: 100%; }
.filtros-hist .filtro-select, .filtros-hist .ss-envolve, .filtros-hist label:not(.busca), .filtros-hist label:not(.busca) .form-control { width: 100%; min-width: 0; max-width: none; }
.filtros-hist .ss-envolve { display: block; }
.filtros-hist .filtros-acoes { flex: none; justify-self: end; }
@media (max-width: 1100px) { .filtros-hist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filtros-hist .filtro-busca, .filtros-hist .filtros-acoes { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .filtros-hist { grid-template-columns: minmax(0, 1fr); } }
.filtros label:not(.busca) { display: flex; flex-direction: column; gap: .15rem; margin: 0; font-size: .78rem; color: var(--suave); }
.filtros label:not(.busca) .form-control { width: 150px; }
.filtros label:not(.busca) .form-control[type=number] { width: 110px; }
/* o rótulo do filtro é pequeno, mas o campo (inclusive o select com pesquisa) usa a fonte padrão dos campos */
.filtros label:not(.busca) .form-control, .filtros label:not(.busca) .form-select, .filtros label:not(.busca) .ss-botao { font-size: 1rem; }

/* ---------- celular */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .painel { margin: 0; border-radius: 0; border: 0; }
  .barra { padding: .75rem 1rem; }
  .conteudo { padding: 1.25rem 1rem; }
  .so-celular { display: grid; }
  .sidebar { position: fixed; z-index: 1050; inset: 0 auto 0 0; width: 280px; background: var(--sb-fundo); transform: translateX(-100%); transition: transform .2s; }
  .menu-aberto .sidebar { transform: none; }
  .menu-aberto .sb-fundo { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(13, 31, 33, .45); }
  .recolhida .app { grid-template-columns: 1fr; }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada-marca { min-height: 0; padding: 1.5rem; margin: 10px; }
  .entrada-marca-rodape { display: none; }
  .entrada-logo { width: 200px; }
  .pilula-status { max-width: 55%; }
}

/* ---------- celular, parte 2: tabela em cartões, áreas de toque e fonte dos campos */
.ordem-mobile { display: none; }
.entrada-cartao a.small { display: inline-block; padding: .6rem .25rem; }  /* links pequenos do login: área de toque maior */

/* tabela vira uma lista de cartões (cada linha, um cartão com "rótulo: valor"); o cabeçalho fica só para leitores de tela */
@media (max-width: 767.98px) {
  .ordem-mobile { display: block; width: auto; flex: 1 1 150px; }
  .tabela-cartao { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .tabela-cartao .table-responsive { overflow: visible; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table tbody tr:not(.sem-clique) { background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; padding: .4rem 0; margin-bottom: .75rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
  .table tbody tr > td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 1rem; border: 0; text-align: right; }
  .table tbody td::before { content: attr(data-label); flex: none; color: var(--suave); font-size: .78rem; font-weight: 500; text-align: left; }
  .table tbody td:not([data-label])::before { display: none; }
  .table tbody td:first-child { justify-content: flex-start; font-size: 1.02rem; padding-top: .55rem; }
  .table tbody td.text-end:last-child { justify-content: flex-end; padding-top: .55rem; padding-bottom: .55rem; border-top: 1px solid var(--borda); margin-top: .35rem; }
  .table tbody td:first-child a.principal { width: 100%; padding: .35rem 0; min-height: 44px; display: flex; align-items: center; }  /* o nome inteiro é área de toque */
  .table tbody tr.inativo { opacity: .7; }
  .table tbody tr.sem-clique, .table tbody tr.sem-clique td { background: transparent; border: 0; }
}

/* áreas de toque de pelo menos 44 px e campos de 16 px (o iPhone dá zoom em campo menor que isso) */
@media (max-width: 900px), (pointer: coarse) {
  .icone-botao, .sb-recolher, .so-celular { width: 44px; height: 44px; }
  .trilha a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }
  .table thead th a.ord { min-height: 44px; }
  .btn-sm { min-height: 40px; padding-left: 1rem; padding-right: 1rem; }
  .form-switch { min-height: 44px; }
  .sb-item { padding-top: .7rem; padding-bottom: .7rem; }
  .sb-secao { min-height: 40px; }
  .toast .btn-close { width: 36px; height: 36px; }
  .sb-empresa .form-select, .sb-empresa .form-select:focus { font-size: 1rem; }
}

/* Paginação compacta: alvos de 44 px e reticencias sem acao. */
.paginacao .page-link { min-width: 44px; min-height: 44px; padding: .5rem .25rem; text-align: center; }
.paginacao .reticencias { min-width: 16px; padding-inline: 0; }

.paginacao { flex-wrap: wrap; justify-content: center; }
/* o paginador do Bootstrap tem as próprias variáveis de cor (azul padrão): ligadas ao tema do sistema */
.pagination { --bs-pagination-color: var(--primaria-texto); --bs-pagination-hover-color: var(--primaria-texto-forte); --bs-pagination-focus-color: var(--primaria-texto-forte);
  --bs-pagination-bg: var(--painel); --bs-pagination-disabled-bg: var(--superficie); --bs-pagination-disabled-border-color: var(--borda);
  --bs-pagination-active-bg: var(--primaria); --bs-pagination-active-border-color: var(--primaria); --bs-pagination-active-color: #fff;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--primaria-rgb), .25); --bs-pagination-border-color: var(--borda);
  --bs-pagination-hover-bg: var(--primaria-suave); --bs-pagination-hover-border-color: var(--borda); }

.tabela-cartao nav[aria-label] { max-width: 100%; }

/* Historico: abas acessiveis ao toque e valores longos nos cartoes. */
.nav-tabs [data-bs-target="#dados-registro"], .nav-tabs [data-bs-target="#historico-registro"] { min-height: 44px; min-width: 44px; }
.historico-alteracoes { min-width: 0; overflow-wrap: anywhere; }

/* Lista em cascata (centros de custo): recuo por nível, número e ramo discretos */
.arvore-no { display: inline-flex; align-items: center; gap: .5rem; }
.arvore-codigo, .arvore-ramo { color: var(--suave); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Apontamentos em lote: linha com problema, cabeçalho de grupo da consulta e bloco de aviso */
.linha-invalida td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
.grupo-cab td { background: var(--hover-linha); }
.aviso-bloco { border: 1px solid var(--borda); border-left: 4px solid var(--erro); border-radius: 8px; padding: 1rem; }

/* Ícones coloridos da situação do apontamento (máscara SVG + cor do token; acompanham o modo escuro) */
:root { --sit-agua: #0e7490; --sit-ambar: #b45309; --sit-roxo: #7e22ce; --sit-azul: #1d4ed8; --sit-rosa: #be185d; --sit-cinza: #475569; }
html[data-bs-theme="dark"] { --sit-agua: #22d3ee; --sit-ambar: #fbbf24; --sit-roxo: #c084fc; --sit-azul: #60a5fa; --sit-rosa: #f472b6; --sit-cinza: #94a3b8; }
.ico-sit { display: inline-block; flex: none; width: 1.1rem; height: 1.1rem; vertical-align: -.2em; background-color: var(--sit-cor, currentColor); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sit-presente { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); --sit-cor: var(--ok); }
.sit-meia-diaria { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E"); --sit-cor: var(--sit-agua); }
.sit-falta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); --sit-cor: var(--erro); }
.sit-folga { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E"); --sit-cor: var(--sit-ambar); }
.sit-atestado { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M12 11v6M9 14h6'/%3E%3C/svg%3E"); --sit-cor: var(--sit-roxo); }
.sit-ferias { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 18 0z'/%3E%3Cpath d='M12 12v7a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); --sit-cor: var(--sit-azul); }
.sit-feriado { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); --sit-cor: var(--sit-rosa); }
.sit-desligado { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); --sit-cor: var(--suave); }
.sit-afastado { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M17 11h5'/%3E%3C/svg%3E"); --sit-cor: var(--sit-cinza); }
.ss-botao.ss-com-ico { display: flex; align-items: center; gap: .5rem; }
.ss-botao.ss-com-ico .ss-texto { flex: 1 1 auto; min-width: 0; }
.ss-opcao.ss-com-ico { display: flex; align-items: center; gap: .55rem; }
/* grade de apontamentos: colunas com largura para o texto dos selects não ficar cortado */
.grade-apontamentos th, .grade-apontamentos td { vertical-align: middle; }
.grade-apontamentos .col-nome { min-width: 11rem; }
.grade-apontamentos .col-situacao { min-width: 11.5rem; }
.grade-apontamentos .col-item { min-width: 12rem; }
.grade-apontamentos .col-centro { min-width: 15rem; }
.grade-apontamentos .col-ref { min-width: 8rem; }
.grade-apontamentos .col-valor { min-width: 9.5rem; }
.previa-valor { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Observação em modal na grade de apontamentos: ícone de info com tooltip quando há texto */
.obs-info { display: inline-flex; vertical-align: middle; margin-left: .4rem; color: var(--primaria-texto); cursor: help; }
.obs-info .ic { width: 1.05rem; height: 1.05rem; }
.tooltip-obs .tooltip-inner { max-width: 24rem; text-align: left; white-space: pre-line; }

/* Ícone de info no canto inferior direito do cartão, em cor fraca (ganha força ao passar o mouse) */
.card-link { position: relative; }
.dica-canto { position: absolute; right: .6rem; bottom: .5rem; display: inline-flex; color: var(--suave); opacity: .4; cursor: help; transition: opacity .15s; }
.dica-campo { display: inline-flex; margin-left: .35rem; vertical-align: middle; color: var(--suave); cursor: help; }
.dica-campo .ic { width: 1rem; height: 1rem; }
.dica-canto .ic { width: 1.05rem; height: 1.05rem; }
.card-link:hover .dica-canto, .dica-canto:hover, .dica-canto:focus-visible { opacity: .9; }

/* ---------------------------------------------------------------- relatórios: zero esmaecido e tela cheia da tabela */
.zero { color: var(--zero); }
html[data-bs-theme="dark"] { --zero: #5b6567; }
.tabela-barra { display: flex; justify-content: flex-end; padding: .5rem .75rem; border-bottom: 1px solid var(--borda); }
.tabela-barra .tc-fechar { display: none; }
.tabela-cartao.tela-cheia { position: fixed; inset: 0; z-index: 1070; display: flex; flex-direction: column; border-radius: 0; border: 0; margin: 0; }
.tabela-cartao.tela-cheia .table-responsive { flex: 1 1 auto; overflow: auto; }
.tabela-cartao.tela-cheia thead th { position: sticky; top: 0; z-index: 2; background: var(--painel); }
.tabela-cartao.tela-cheia tfoot td { position: sticky; bottom: 0; background: var(--painel); }
.tabela-cartao.tela-cheia .tc-abrir { display: none; }
.tabela-cartao.tela-cheia .tc-fechar { display: inline; }
body.sem-rolagem { overflow: hidden; }
@media (max-width: 767.98px) { .tabela-barra { display: none; } }  /* no celular a tabela já vira lista de cartões */

/* Contracheque (demonstrativo de pagamento): quadro com linhas finas, só tokens do tema */
.contracheque { background: var(--painel); color: var(--texto); border: 1px solid var(--borda-forte); font-size: .9rem; max-width: 960px; }
.contracheque table { width: 100%; border-collapse: collapse; }
.contracheque td { padding: .25rem .5rem; border: 1px solid var(--borda); vertical-align: top; }
.cc-forte { font-weight: 700; }
.cc-centro { text-align: center; }
.cc-direita { text-align: right; font-variant-numeric: tabular-nums; }
.cc-rotulo { display: block; font-size: .72rem; color: var(--suave); }
.cc-ev { width: 4.5rem; text-align: right; }
.cc-cab td { font-size: .78rem; color: var(--suave); }
.cc-eventos tbody td { border-top: 0; border-bottom: 0; }
.cc-eventos tbody tr:last-child td { padding-bottom: 2rem; }
.cc-informativo td { color: var(--suave); font-style: italic; }
.cc-eventos tfoot td { font-weight: 600; }
.cc-liquido td { font-size: 1.05rem; }
.cc-rodape { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--borda); border-top: 0; }
.cc-rodape div { padding: .25rem .5rem; text-align: right; font-variant-numeric: tabular-nums; border-right: 1px solid var(--borda); }
.cc-rodape div:last-child { border-right: 0; }
.cc-assinatura { margin: 0; padding: .75rem .5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) {
  .cc-rodape { grid-template-columns: repeat(2, 1fr); }
  .cc-rodape div { border-bottom: 1px solid var(--borda); }
  .contracheque { overflow-x: auto; }
}
@media print {
  .sidebar, .barra, .cabeca, .toast-container { display: none !important; }
  .painel { margin: 0 !important; padding: 0 !important; }
  .contracheque { max-width: none; border-color: var(--texto); }
}

/* Relatórios: texto das colunas (nome, centro, rubrica) em uma linha só no computador; a tabela rola na horizontal se faltar espaço. No celular vira cartão. */
@media (min-width: 768px) {
  .tabela-relatorio th, .tabela-relatorio td { white-space: nowrap; }
  .tabela-relatorio td:not(.text-end) { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }
}

.linha-subtotal td { font-weight: 600; background: var(--primaria-suave); }

/* Filtros dos relatórios: campos alinhados pelo topo (a caixa de grupos é mais alta) e o botão na altura dos campos, com um espaçador no lugar do rótulo */
.filtros.filtros-topo { align-items: flex-start; }
.filtros .filtro-botao { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; }
.filtros .filtro-botao span { visibility: hidden; }

.filtros label[hidden] { display: none !important; }

.filtros[hidden] { display: none !important; }

/* Barra de ações do relatório: botões compactos para ficar na mesma linha do título; no celular quebra normalmente */
.acoes-relatorio { align-items: center; }
@media (min-width: 992px) {
  .cabeca:has(> .acoes-relatorio) { flex-wrap: nowrap; align-items: flex-start; }
  .cabeca:has(> .acoes-relatorio) > div:first-child { min-width: 0; }
  .cabeca > .acoes-relatorio { flex-wrap: nowrap; flex-shrink: 0; margin-top: .3rem; }
}

/* Janela "Colaboradores exibidos": lista com rolagem própria e item que some ao filtrar */
.lista-colaboradores { max-height: 40vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; padding: .25rem .75rem; }
.lista-colaboradores .item-colaborador { margin: 0; padding-left: 0; }
.lista-colaboradores .item-colaborador[hidden] { display: none !important; }

.lista-colaboradores .item-colaborador { cursor: pointer; }
.lista-colaboradores .item-colaborador span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .barra-colaboradores { margin-left: 0 !important; width: 100%; justify-content: flex-start !important; } }

/* ---------------------------------------------------------------- Dashboard (gráficos sem biblioteca: SVG e barras em HTML)
   Cores de série: paleta categórica de 8 matizes em ordem fixa, validada com validate_palette.js contra as superfícies deste app (claro #ffffff, escuro #161b1e):
   passa lightness, croma, separação para daltônicos (>= 8) e piso de visão normal (>= 15). Contraste < 3:1 de aqua, amarelo e magenta no claro: o alívio é o rótulo visível
   e a tabela alternativa de todo gráfico. A cor segue a entidade (Bruto é sempre a série 1...), nunca a posição. Texto nunca usa a cor da série. */
:root {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #6250d6; --serie-8: #e34948;
  --sobre-serie: #ffffff; --sobre-serie-amarelo: #0b0b0b;
  --dash-bom: #006300; --dash-ruim: #d03b3b; --dash-icone-bom: #0ca30c; --dash-icone-aviso: #fab219;
}
html[data-bs-theme="dark"] {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767;
  --dash-bom: #0ca30c;
}
.serie-1 { --c: var(--serie-1); } .serie-2 { --c: var(--serie-2); } .serie-3 { --c: var(--serie-3); } .serie-4 { --c: var(--serie-4); }
.serie-5 { --c: var(--serie-5); } .serie-6 { --c: var(--serie-6); } .serie-7 { --c: var(--serie-7); } .serie-8 { --c: var(--serie-8); }
.dash-resumo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.dash-resumo > :first-child { grid-column: 1 / -1; }
@media (min-width: 1200px) { .dash-resumo { grid-template-columns: minmax(230px, 1.5fr) repeat(5, minmax(0, 1fr)); } .dash-resumo > :first-child { grid-column: auto; } }
.dash-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
@media (min-width: 1200px) { .dash-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dash-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dash-card { height: 100%; }
.dash-card .card-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.dash-card .dash-tabela { margin-top: auto; padding-top: .7rem; }
.dash-tile-rotulo { font-size: .8rem; color: var(--suave); margin-bottom: .15rem; }
.dash-tile-valor { font-size: 1.35rem; font-weight: 600; line-height: 1.2; color: var(--texto); white-space: nowrap; }
.dash-hero .dash-tile-valor { font-size: 2.3rem; line-height: 1.1; white-space: nowrap; }
.dash-sub { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); margin: 0 0 .5rem; }
.dash-delta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; font-size: .78rem; color: var(--suave); margin-top: .2rem; }
.dash-delta.bom { color: var(--dash-bom); }
.dash-delta.ruim { color: var(--dash-ruim); }
.dash-delta-contra { color: var(--fraco); }
.dash-spark { display: block; width: 96px; height: 28px; margin-top: .4rem; }
.dash-spark path { fill: none; stroke: var(--fraco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-spark circle { fill: var(--serie-1); stroke: var(--painel); stroke-width: 2; }
.dash-grade { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; align-items: stretch; }
@media (min-width: 992px) { .dash-grade-folha { grid-template-columns: 2fr 1fr; } .dash-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grade-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.dash-secao { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 .75rem; color: var(--texto); }
.dash-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dash-card-topo .rotulo-secao { margin-bottom: .5rem; }
.dash-ver { font-size: .78rem; }
.dash-figura { margin: 0; }
.dash-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--suave); margin: 0 0 .5rem; }
.dash-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.dash-legenda .chave { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.dash-legenda-nomes { margin: .7rem 0 0; }
.dash-legenda-nomes .chave { width: 10px; height: 10px; border-radius: 3px; }
.dash-linha { display: block; width: 100%; height: auto; overflow: visible; }
.dash-linha .grade { stroke: var(--borda); stroke-width: 1; }
.dash-linha .base { stroke: var(--borda-forte); stroke-width: 1; }
.dash-linha .eixo { fill: var(--fraco); font-size: 11px; }
.dash-linha .direto { fill: var(--suave); font-size: 11px; }
.dash-linha .serie { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-linha .area { fill: var(--c); opacity: .1; stroke: none; }
.dash-linha .fim, .dash-linha .ponto { fill: var(--c); stroke: var(--painel); stroke-width: 2; }
.dash-linha .pt { outline: none; }
.dash-linha .pt .acerto { fill: transparent; }
.dash-linha .pt .cruz { stroke: var(--borda-forte); stroke-width: 1; opacity: 0; }
.dash-linha .pt .ponto { opacity: 0; }
.dash-linha .pt:hover .cruz, .dash-linha .pt:hover .ponto, .dash-linha .pt:focus-visible .cruz, .dash-linha .pt:focus-visible .ponto { opacity: 1; }
.dash-barras { display: grid; gap: .1rem; }
.dash-barra { display: grid; grid-template-columns: minmax(96px, 38%) 1fr auto; gap: .65rem; align-items: center; padding: .3rem .25rem; border-radius: 8px; outline: none; }
.dash-barra:hover, .dash-barra:focus-visible { background: var(--hover-linha); }
.dash-barra .rot { font-size: .86rem; line-height: 1.25; color: var(--texto); overflow-wrap: anywhere; }
.dash-barra .trilha { display: block; height: 14px; }
.dash-barra .preenche { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.dash-barra:hover .preenche, .dash-barra:focus-visible .preenche { filter: brightness(1.15); }
.dash-barra .val { font-size: .84rem; color: var(--texto); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dash-segmentos { display: flex; gap: 2px; height: 28px; }
.dash-segmentos .seg { display: flex; align-items: center; padding: 0 .5rem; min-width: 0; background: var(--c); color: var(--sobre-serie); font-size: .78rem; font-weight: 600; border-radius: 4px; white-space: nowrap; outline: none; }
.dash-segmentos .seg.serie-4 { color: var(--sobre-serie-amarelo); }
.dash-segmentos .seg:hover, .dash-segmentos .seg:focus-visible { filter: brightness(1.12); }
.dash-tabela summary { cursor: pointer; font-size: .8rem; color: var(--suave); margin-top: .7rem; }
.dash-tabela .table { margin-top: .5rem; font-size: .8rem; }
.dash-tabela .table th, .dash-tabela .table td { padding: .3rem .4rem; }
.dash-tabela .table td:not(:first-child), .dash-tabela .table th:not(:first-child) { white-space: nowrap; }
.dash-avisos { font-size: .86rem; color: var(--suave); }
.dash-avisos summary { cursor: pointer; }
.dash-alertas { list-style: none; margin: 0; padding: 0; }
.dash-alertas li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--borda); }
.dash-alertas li:first-child { border-top: 0; }
.dash-alertas strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.dash-sem-alertas { display: flex; align-items: center; gap: .6rem; }
.status-icone { display: inline-flex; flex: none; }
.status-icone .ic { width: 1.15rem; height: 1.15rem; }
.status-icone.bom { color: var(--dash-icone-bom); }
.status-icone.aviso { color: var(--dash-icone-aviso); }
#tooltip-grafico { position: fixed; z-index: 1090; pointer-events: none; max-width: 300px; padding: .5rem .7rem; background: var(--painel); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: .82rem; }
#tooltip-grafico[hidden] { display: none; }
.dash-tt-titulo { color: var(--suave); margin-bottom: .25rem; }
.dash-tt-linha { display: flex; align-items: baseline; gap: .5rem; }
.dash-tt-linha i { display: inline-block; flex: none; width: 12px; height: 3px; border-radius: 2px; background: var(--c); align-self: center; }
.dash-tt-linha strong { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-tt-linha span { color: var(--suave); }
@media print { .dash-tabela:not([open]) { display: none; } .dash-tabela summary { display: none; } }