/* ═══════════════════════════════════════════════════════════════════
Duos Contabilidade | Lenitech · Design system
Tema claro/escuro via [data-tema] no
PALETA DA MARCA: grafite #383E43, coral #FA5F46, escuro #303239.
O coral da marca é COR DE DESENHO: sobre branco ele dá 3,1:1, pouco para
texto e para rótulo de botão. Onde o coral precisa ser LIDO, a --primaria
usa o tom fechado (#C93D25, 5:1) — mesma família, legível.
═══════════════════════════════════════════════════════════════════ */
:root {
--fonte: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Marca */
--grafite: #383e43;
--grafite-2: #303239;
--coral: #fa5f46; /* o coral da marca — desenho e realce */
--coral-forte: #c93d25; /* o mesmo coral, fechado o bastante para LER */
--coral-suave: #fdece8;
--fundo: #f5f5f6;
--superficie: #ffffff;
--superficie-2: #eeeef0;
--borda: #e3e4e7;
--texto: #262b31;
--texto-2: #5a6169;
--texto-3: #969ba3;
--primaria: #c93d25;
--primaria-forte: #a82f1b;
--primaria-suave: #fdece8;
--ok: #16a34a; --ok-suave: #e8f7ee;
--alerta: #d97706; --alerta-suave: #fdf3e3;
--perigo: #dc2626; --perigo-suave: #fdeaea;
--info: #0284c7; --info-suave: #e6f4fb;
--raio: 12px;
--sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
--sombra-alta: 0 12px 32px rgba(16, 24, 40, .16);
}
html[data-tema="escuro"] {
--fundo: #24272e;
/* A superfície é o PRÓPRIO fundo da arte da marca */
--superficie: #303239;
--superficie-2: #383e43;
--borda: #454a52;
--texto: #f7f7f9;
--texto-2: #b2b7be;
--texto-3: #7d838b;
/* No escuro a primária volta a ser o coral da marca: sobre a superfície ele
dá 4,1:1 (link) e o tom fechado do tema claro sumiria no fundo. */
--primaria: #fa5f46;
--primaria-forte: #ff8874;
--primaria-suave: #3a2620;
--coral: #fa5f46;
--coral-forte: #ff8874;
--coral-suave: #3a2620;
--ok-suave: #10301e;
--alerta-suave: #33260e;
--perigo-suave: #391616;
--info-suave: #0e2a3a;
--sombra: 0 1px 2px rgba(0, 0, 0, .4);
--sombra-alta: 0 12px 32px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--fonte);
background: var(--fundo);
color: var(--texto);
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--primaria); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea {
font-family: inherit; font-size: 14px;
background: var(--superficie); color: var(--texto);
border: 1px solid var(--borda); border-radius: 8px;
padding: 9px 12px; outline: none;
transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
border-color: var(--primaria);
box-shadow: 0 0 0 3px var(--primaria-suave);
}
/* ── Layout ─────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.sidebar {
width: 248px; flex-shrink: 0;
background: var(--superficie);
border-right: 1px solid var(--borda);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh;
overflow-y: auto;
}
.sidebar-topo {
display: flex; justify-content: center;
padding: 12px 12px 8px;
}
/* ── Marca ──────────────────────────────────────────────
A assinatura é o PNG original (ver marca.php), posto como FUNDO e não como
![]()
— só assim o tema por atributo consegue trocar a arte.
⚠️ Proporção da arte: 900×246 (3,66:1). Ela era 1,7:1 no logotipo anterior —
as medidas abaixo mudaram por causa disso, não por gosto: na proporção nova,
112px de largura dariam 30px de altura e o "CONTABILIDADE" sumiria. */
.logotipo {
display: block; flex-shrink: 0;
background: center / contain no-repeat url(marca.png);
}
/* O símbolo é o "▮▮D" da Duos — quadrado, para onde não cabe a assinatura */
.logotipo-simbolo {
display: block; flex-shrink: 0;
background: center / contain no-repeat url(simbolo.png);
}
html[data-tema="escuro"] .logotipo { background-image: url(marca-clara.png); }
html[data-tema="escuro"] .logotipo-simbolo { background-image: url(simbolo-claro.png); }
.logotipo-compacto { width: 212px; height: 58px; }
.logotipo-destaque { width: 300px; height: 82px; }
.menu { flex: 1; padding: 4px 10px 16px; }
/* Grupos recolhíveis */
.menu-grupo {
display: flex; align-items: center; justify-content: space-between;
width: calc(100% - 4px); margin: 14px 2px 3px; padding: 4px 6px;
background: none; border: none; border-radius: 6px; text-align: left;
font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--texto-3);
transition: background .12s, color .12s;
}
.menu-grupo:hover { background: var(--superficie-2); color: var(--texto-2); }
.chevron { font-size: 10px; transition: transform .2s ease; opacity: .7; }
.grupo-itens { overflow: hidden; max-height: 420px; transition: max-height .24s ease, opacity .18s ease; }
.grupo.recolhido .grupo-itens { max-height: 0; opacity: 0; }
.grupo.recolhido .chevron { transform: rotate(-90deg); }
/* Aviso de pendência quando o grupo está fechado */
.grupo.recolhido .menu-grupo.tem-badge::after {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--perigo); margin-left: 6px; flex-shrink: 0;
}
.menu a {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; border-radius: 8px;
color: var(--texto-2); font-weight: 500; font-size: 14px;
transition: background .12s, color .12s;
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a.ativo { background: var(--primaria-suave); color: var(--primaria); font-weight: 600; }
/* Item dependente do de cima (ex.: Folha analítica sob RH e Folha) */
.menu a.submenu {
margin-left: 14px; padding-left: 8px; font-size: 13px;
border-left: 2px solid var(--borda);
}
.menu a.submenu.ativo { border-left-color: var(--primaria); }
.badge {
margin-left: auto; min-width: 19px; text-align: center;
background: var(--perigo); color: #fff;
border-radius: 20px; font-size: 11px; font-weight: 700;
padding: 1px 6px; display: none;
}
.badge.on { display: inline-block; }
.sidebar-rodape { padding: 12px 16px; border-top: 1px solid var(--borda); }
.sidebar-rodape a { color: var(--texto-2); font-size: 13.5px; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ── Topbar ─────────────────────────────────────────────── */
.topo {
display: flex; align-items: center; gap: 12px;
padding: 12px 22px;
background: var(--superficie);
border-bottom: 1px solid var(--borda);
position: sticky; top: 0; z-index: 40;
}
.busca { flex: 1; max-width: 460px; position: relative; }
.busca input { width: 100%; background: var(--superficie-2); border-color: transparent; }
.busca-resultados {
display: none; position: absolute; top: 44px; left: 0; right: 0;
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); box-shadow: var(--sombra-alta);
max-height: 340px; overflow-y: auto; z-index: 60;
}
.busca-resultados.on { display: block; }
.busca-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--borda); color: var(--texto); cursor: pointer; }
.busca-item:hover { background: var(--superficie-2); }
.busca-item small { color: var(--texto-3); display: block; }
/* Botão seletor de empresa (abre o modal de busca) */
.sel-empresa {
display: flex; align-items: center; gap: 8px;
max-width: 280px; padding: 8px 12px;
background: var(--superficie-2); border: 1px solid transparent;
border-radius: 9px; color: var(--texto);
font-family: inherit; font-size: 13.5px; font-weight: 600;
transition: border-color .12s, background .12s;
}
.sel-empresa:hover { border-color: var(--primaria); background: var(--primaria-suave); }
.sel-empresa .emp-icone { flex-shrink: 0; }
.sel-empresa .emp-nome {
flex: 1; min-width: 0; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel-empresa .emp-seta { color: var(--texto-3); font-size: 11px; flex-shrink: 0; }
.sel-empresa.unica .emp-seta { display: none; }
/* Lista dentro do modal de troca */
.emp-lista { max-height: 340px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.emp-item {
display: block; width: 100%; text-align: left;
background: none; border: 1px solid var(--borda); border-radius: 9px;
padding: 10px 13px; color: var(--texto); font-family: inherit;
transition: background .1s, border-color .1s;
}
.emp-item:hover, .emp-item.marcado { background: var(--primaria-suave); border-color: var(--primaria); }
.emp-item.atual { border-left: 3px solid var(--ok); }
.emp-item-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; }
.emp-item small { color: var(--texto-3); font-size: 12px; }
.emp-parcial {
text-align: center; color: var(--texto-3); font-size: 12px;
padding: 8px 0 2px; border-top: 1px dashed var(--borda); margin-top: 4px;
}
.btn-icone {
width: 38px; height: 38px; border-radius: 9px;
background: transparent; border: 1px solid transparent;
font-size: 17px; position: relative;
transition: background .12s;
}
.btn-icone:hover { background: var(--superficie-2); }
.sino-wrap { position: relative; }
.ponto {
position: absolute; top: 6px; right: 7px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--perigo); display: none;
}
.ponto.on { display: block; }
.sino-painel {
display: none; position: absolute; right: 0; top: 46px; width: 370px;
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); box-shadow: var(--sombra-alta);
z-index: 60;
/* ⚠️ ROLA em vez de esconder o que passa: com seis avisos e o rodapé, o
`overflow: hidden` de antes cortava o "Ver todas" — e é o rodapé que
leva ao painel inteiro. A altura limitada também é o que faz o
`position: sticky` do rodapé funcionar. */
max-height: min(70vh, 520px); overflow-y: auto;
}
@media (max-width: 480px) {
/* No celular a largura fixa passaria da tela */
.sino-painel { width: calc(100vw - 24px); right: -8px; }
}
.sino-painel.on { display: block; }
.notif { padding: 11px 14px; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.notif small { color: var(--texto-3); }
.notif.nova { background: var(--primaria-suave); }
.avatar {
width: 38px; height: 38px; border-radius: 50%;
background: var(--primaria); color: #fff;
font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.faixa-demo {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
color: #451a03; font-size: 13px; font-weight: 600;
text-align: center; padding: 7px 16px;
}
.faixa-demo code { background: rgba(255,255,255,.4); padding: 1px 5px; border-radius: 4px; }
/* ── Conteúdo ───────────────────────────────────────────── */
.conteudo { padding: 24px; max-width: 1240px; width: 100%; margin: 0 auto; animation: surgir .25s ease; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.titulo-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.titulo-secao h1 { font-size: 22px; font-weight: 700; }
.titulo-secao p { color: var(--texto-2); font-size: 13.5px; }
.carregando { text-align: center; color: var(--texto-3); padding: 60px 0; }
/* Cards */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cartao {
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra);
transition: transform .12s, box-shadow .12s;
}
.cartao.click { cursor: pointer; }
.cartao.click:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cartao .rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.cartao .valor { font-size: 24px; font-weight: 800; margin-top: 4px; }
.cartao .sub { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.cartao.perigo .valor { color: var(--perigo); }
.cartao.alerta .valor { color: var(--alerta); }
.cartao.ok .valor { color: var(--ok); }
.painel {
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); box-shadow: var(--sombra);
padding: 18px; margin-bottom: 18px;
}
.painel h2 { font-size: 15.5px; font-weight: 700; margin-bottom: 12px; }
.grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
text-align: left; padding: 9px 12px;
color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: var(--superficie-2); }
/* Etiquetas de status */
.tag {
display: inline-block; padding: 3px 10px; border-radius: 20px;
font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tag-ok { background: var(--ok-suave); color: var(--ok); }
.tag-alerta { background: var(--alerta-suave); color: var(--alerta); }
.tag-perigo { background: var(--perigo-suave); color: var(--perigo); }
.tag-info { background: var(--info-suave); color: var(--info); }
.tag-neutra { background: var(--superficie-2); color: var(--texto-2); }
/* Botões */
.btn {
display: inline-flex; align-items: center; gap: 6px;
border-radius: 9px; border: 1px solid transparent;
font-weight: 600; font-size: 13.5px; padding: 8px 15px;
transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(1.06); }
.btn-primario { background: var(--primaria); color: #fff; }
.btn-suave { background: var(--primaria-suave); color: var(--primaria); }
.btn-fantasma { background: transparent; border-color: var(--borda); color: var(--texto-2); }
.btn-perigo { background: var(--perigo-suave); color: var(--perigo); }
.btn-mini { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-largo { width: 100%; justify-content: center; }
/* Filtros */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros select, .filtros input { min-width: 140px; }
/* ── Calendário ─────────────────────────────────────────── */
.cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-nav strong { font-size: 17px; min-width: 170px; text-align: center; text-transform: capitalize; }
.cal-grade {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.cal-dia-nome { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; padding: 4px 0; }
.cal-dia {
min-height: 92px; background: var(--superficie);
border: 1px solid var(--borda); border-radius: 9px; padding: 6px;
font-size: 12px;
}
.cal-dia.fora { opacity: .38; }
.cal-dia.hoje { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-suave); }
.cal-dia .num { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.cal-evento {
display: block; width: 100%; text-align: left; border: none;
border-radius: 5px; padding: 2.5px 6px; margin-bottom: 3px;
font-size: 11px; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-alta { background: var(--perigo); }
.ev-media { background: var(--alerta); }
.ev-baixa { background: var(--info); }
.ev-pago { background: var(--ok); opacity: .75; }
/* ── Pendências / certidões / parcelamentos ─────────────── */
.lista-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pend-topo { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 8px; }
.pend-topo strong { font-size: 14.5px; }
.progresso { height: 8px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.progresso > div { height: 100%; background: var(--primaria); border-radius: 6px; transition: width .4s; }
/* ── Tarefas ────────────────────────────────────────────── */
.tarefa-linha {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; border-bottom: 1px solid var(--borda); cursor: pointer;
}
.tarefa-linha:hover { background: var(--superficie-2); }
.tarefa-linha:last-child { border-bottom: none; }
.tarefa-linha .info { flex: 1; min-width: 0; }
.tarefa-linha .info strong { display: block; font-size: 14px; }
.tarefa-linha .info small { color: var(--texto-3); }
.timeline { margin: 14px 0; }
.tl-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.tl-item::before {
content: ''; position: absolute; left: 5px; top: 16px; bottom: 0;
width: 2px; background: var(--borda);
}
.tl-item:last-child::before { display: none; }
.tl-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--primaria); flex-shrink: 0; margin-top: 4px; }
.tl-corpo small { color: var(--texto-3); display: block; font-size: 12px; }
/* ── Documentos ─────────────────────────────────────────── */
.pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pasta {
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); padding: 14px; cursor: pointer; text-align: center;
transition: transform .12s, box-shadow .12s;
}
.pasta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.pasta .icone { font-size: 26px; }
.pasta strong { display: block; font-size: 13px; margin-top: 5px; }
.pasta small { color: var(--texto-3); font-size: 11.5px; }
.pasta.ativa { border-color: var(--primaria); background: var(--primaria-suave); }
.zona-upload {
border: 2px dashed var(--borda); border-radius: var(--raio);
padding: 26px; text-align: center; color: var(--texto-2);
margin-bottom: 18px; cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-upload.sobre, .zona-upload:hover { border-color: var(--primaria); background: var(--primaria-suave); }
/* ── Abas ───────────────────────────────────────────────── */
.abas {
display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px;
border-bottom: 1px solid var(--borda); padding-bottom: 2px;
}
.aba {
background: none; border: none; border-bottom: 2px solid transparent;
padding: 9px 14px; border-radius: 8px 8px 0 0;
font-size: 13.5px; font-weight: 600; color: var(--texto-2);
transition: color .12s, background .12s, border-color .12s;
}
.aba:hover { background: var(--superficie-2); color: var(--texto); }
.aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }
/* Cabeçalho ordenável: a seta some para não competir com o rótulo, e só
aparece de verdade na coluna que está ordenando */
.tabela th.fa-ord { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela th.fa-ord:hover { color: var(--primaria); }
.tabela th.fa-ord.ativa { color: var(--primaria); }
.fa-seta { margin-left: 4px; font-size: 9px; opacity: .35; }
.tabela th.fa-ord.ativa .fa-seta { opacity: 1; }
.tabela th.fa-ord:hover .fa-seta { opacity: .8; }
/* Competência dentro do detalhe de um funcionário */
.fa-comp { margin-bottom: 10px; }
.fa-comp > summary { font-size: 14px; padding: 7px 2px; }
.fa-comp > summary > span:first-of-type { margin-right: auto; }
.fa-comp-liq { font-weight: 500; font-size: 13px; color: var(--texto-2); }
/* "Carregar todos" no rodapé do detalhe: o aviso e o botão na mesma linha,
quebrando no celular */
.fa-mais {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 8px;
}
/* Barra de geração em lote, no rodapé de um detalhe aberto */
.fa-lote {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda);
}
.fa-lote > .sub:first-child { margin-right: 2px; }
/* O rótulo do multi mostra nome e cargo em duas alturas: com 40 homônimos, o
cargo é o que desempata */
.multi-lista label .sub { display: block; margin-left: 22px; font-size: 11.5px; }
/* Aviso em linha, dentro de uma visão — nem toast (some) nem modal (interrompe) */
.fa-aviso {
padding: 11px 14px; margin-bottom: 12px; border-radius: 10px;
background: var(--alerta-suave); border: 1px solid var(--borda);
font-size: 13.5px; color: var(--texto);
}
.fa-aviso ul { margin: 6px 0 0 18px; }
/* ── Líquidos: quadro de pagamento ──────────────────────── */
.fa-pag { margin-bottom: 14px; }
/* O carrega o resumo: recolhido, ele já responde "falta alguém para
pagar?". O título e o resumo se separam nas pontas e quebram no celular. */
.fa-pag > summary {
font-size: 15px; padding: 4px 2px; flex-wrap: wrap;
}
.fa-pag > summary > span:first-of-type { margin-right: auto; }
.fa-pag-resumo {
font-weight: 500; font-size: 13px; color: var(--texto-2);
}
.fa-pag-topo {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin: 10px 0 12px;
}
.fa-pag-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-pag-alerta { color: var(--alerta); font-weight: 600; }
/* Os dois botões de copiar ficam lado a lado e não quebram: quem paga alterna
entre eles e o banco dezenas de vezes seguidas */
.fa-pag-copiar { white-space: nowrap; }
.fa-pag-copiar .btn { margin-right: 4px; font-variant-numeric: tabular-nums; }
.tabela tr.fa-pg-ok > td { background: var(--ok-suave, rgba(34,197,94,.07)); }
/* Filtro de colunas da visão por dia — em linha, acima da tabela */
.pt-filtro-col {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
background: var(--superficie); border: 1px solid var(--borda);
font-size: 13px;
}
.pt-chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pt-chk input { margin: 0; }
/* Visão por dia: a linha inteira é clicável, e o dia sem ponto nenhum fica
apagado para a vista pular direto para os que têm conteúdo */
.pt-dia-tabela tr[data-dia] { cursor: pointer; }
.pt-dia-tabela tr[data-dia]:hover > td { background: var(--superficie-2); }
.pt-dia-tabela tr.aberta > td { background: var(--primaria-suave); }
.pt-dia-tabela tr.pt-dia-vazio > td { color: var(--texto-3); }
.pt-dia-det > td { background: var(--superficie-2); padding: 12px 14px; }
.pt-dia-det .tabela { font-size: 12.5px; background: var(--superficie); }
.pt-dia-det .tabela th { font-size: 11px; }
/* Feriados da competência — em destaque, porque é o que explica um mês com
menos dias úteis do que se esperava */
.pt-feriados {
margin-bottom: 12px; padding: 12px 14px; border-radius: 12px;
background: var(--ok-suave); border: 1px solid var(--borda);
font-size: 13.5px;
}
.pt-feriados.vazia { background: var(--superficie-2); }
.pt-feriados .sub { display: block; margin-top: 2px; }
.pt-feriados-lista {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px;
}
.pt-feriado-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px; font-size: 12.5px;
background: var(--superficie); border: 1px solid var(--borda);
}
/* ── Ponto: barra de fechamento e edição em lote ────────── */
.pt-fechamento {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
padding: 14px 16px; border-radius: 12px;
background: var(--superficie); border: 1px solid var(--borda);
}
.pt-fechamento .sub { margin-top: 3px; max-width: 62ch; }
.pt-fechamento-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* A barra de lote fica GRUDADA no topo da lista rolável: com 40 funcionários,
marcar lá embaixo e ter de rolar de volta para aplicar é o caminho do erro */
.pt-lote {
display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
background: var(--superficie-2); border: 1px solid var(--borda);
}
.pt-lote > b { font-size: 13px; color: var(--texto-2); padding-bottom: 7px; }
.pt-lote .pt-campo { margin: 0; }
/* Modal de espera: sem botão de fechar, porque fechar não cancela o trabalho */
.pt-progresso { text-align: center; padding: 22px 10px 6px; }
.pt-progresso .spinner { margin: 0 auto; width: 34px; height: 34px; }
.pt-progresso .modal-sub { max-width: 46ch; margin-inline: auto; }
/* ── Formulários em grade (modais de cadastro) ──────────── */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grade label { min-width: 0; }
@media (max-width: 560px) { .form-grade { grid-template-columns: 1fr; } }
.check-linha { display: flex; gap: 14px; flex-wrap: wrap; }
.check-linha label {
display: flex; align-items: center; gap: 6px;
margin: 0; font-weight: 500; font-size: 13px; text-transform: capitalize;
}
.check-linha input[type="checkbox"] { width: auto; margin: 0; }
.modal textarea { font-family: inherit; resize: vertical; }
.modal textarea[readonly] { font-family: ui-monospace, monospace; font-size: 12px; }
/* ── Subobrigações ──────────────────────────────────────── */
.ob-linha.ob-sub {
padding-left: 26px; background: var(--superficie-2);
border-left: 2px solid var(--borda);
}
.ob-linha.ob-sub .info strong { font-size: 13.5px; font-weight: 600; }
.linha-sub td:first-child { padding-left: 26px; }
.linha-inativa { opacity: .55; }
/* ── Painel de responsáveis ─────────────────────────────── */
.rs-empresa h2 { font-size: 15px; }
.rs-linhas { display: flex; flex-direction: column; gap: 4px; }
.rs-linha {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) minmax(140px, 190px) 84px 84px 34px;
gap: 8px; align-items: center;
padding: 7px 8px; border-radius: 8px;
transition: background .15s;
}
.rs-linha:hover { background: var(--superficie-2); }
.rs-linha.sem-resp { background: var(--alerta-suave); }
.rs-linha.salvando { opacity: .55; }
.rs-linha.salvo { background: var(--ok-suave); }
.rs-linha.rs-sub .rs-nome { padding-left: 14px; }
.rs-nome { min-width: 0; }
.rs-nome strong {
display: block; font-size: 13.5px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-nome small { color: var(--texto-3); font-size: 11.5px; }
.rs-linha select, .rs-linha input[type="text"], .rs-linha .rs-ini, .rs-linha .rs-fim {
font-size: 12.5px; padding: 5px 7px; min-width: 0; width: 100%;
}
.rs-linha input[type="checkbox"] { width: auto; margin: 0; }
.check-inline {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--texto-2); font-weight: 500;
}
.check-inline input { width: auto; margin: 0; }
@media (max-width: 780px) {
.rs-linha { grid-template-columns: 22px 1fr; gap: 6px; }
.rs-linha select, .rs-linha .rs-ini, .rs-linha .rs-fim, .rs-linha .rs-hist {
grid-column: 2; }
}
/* ── Panorama do escritório ─────────────────────────────── */
.pn-card.com-atraso { border-left: 3px solid var(--perigo); }
.pn-numeros {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 6px; text-align: center; margin-top: 4px;
}
.pn-numeros > div {
background: var(--superficie-2); border-radius: 8px; padding: 7px 3px;
}
.pn-n { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; }
.pn-numeros small { font-size: 10.5px; color: var(--texto-3); }
.dt-lista { max-height: 52vh; overflow-y: auto; }
.dt-contagem {
font-size: 12.5px; color: var(--texto-3);
padding: 2px 2px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 4px;
}
/* ── Fila de sincronização ──────────────────────────────── */
.fila-vazia { text-align: center; color: var(--texto-2); font-size: 13.5px; }
.fila-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-bottom: 1px solid var(--borda);
}
.fila-item:last-child { border-bottom: none; }
.fila-item .info { flex: 1; min-width: 0; }
.fila-item .info strong { display: block; font-size: 14px; }
.fila-item .info small { color: var(--texto-3); }
.fila-spin { width: 22px; text-align: center; flex-shrink: 0; }
.spinner {
display: inline-block; width: 14px; height: 14px;
border: 2px solid var(--primaria-suave); border-top-color: var(--primaria);
border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* ── Aviso informativo ──────────────────────────────────── */
.aviso-info {
background: var(--info-suave); color: var(--texto-2);
border-left: 3px solid var(--info); border-radius: 8px;
padding: 11px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.6;
}
.aviso-info code {
background: var(--superficie); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, monospace; font-size: 12px;
}
/* Campo "por página" dentro dos filtros */
.fe-porpag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--texto-2); font-weight: 500;
}
.fe-porpag input { width: 64px; min-width: 0; }
/* ── Seleção em lote ────────────────────────────────────── */
.barra-lote {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; background: var(--primaria-suave);
border: 1px solid var(--primaria); border-radius: var(--raio);
padding: 11px 15px; margin-bottom: 14px;
}
.barra-lote strong { color: var(--primaria); font-size: 13.5px; }
.lote-log {
max-height: 260px; overflow-y: auto; margin: 12px 0;
border: 1px solid var(--borda); border-radius: 9px; padding: 8px;
font-size: 12.5px; display: flex; flex-direction: column; gap: 3px;
}
.lote-item { padding: 4px 7px; border-radius: 5px; }
.lote-item.ok { background: var(--ok-suave); color: var(--ok); }
.lote-item.erro { background: var(--perigo-suave); color: var(--perigo); }
/* ── Modelo de mensagem ─────────────────────────────────── */
.marcadores { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.marcador {
background: var(--superficie-2); border: 1px solid var(--borda);
border-radius: 6px; padding: 4px 9px;
font-family: ui-monospace, monospace; font-size: 12px; color: var(--primaria);
}
.marcador:hover { border-color: var(--primaria); background: var(--primaria-suave); }
#ml-texto { width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; }
.previa-zap {
background: #dcf8c6; color: #111b21; border-radius: 12px 12px 12px 4px;
padding: 13px 15px; white-space: pre-wrap; font-size: 14px; line-height: 1.5;
margin: 10px 0; max-height: 400px; overflow-y: auto;
}
/* ── Paginação ──────────────────────────────────────────── */
.paginacao {
display: flex; align-items: center; justify-content: center; gap: 14px;
padding: 14px 8px 4px; font-size: 13px; color: var(--texto-2); flex-wrap: wrap;
}
.abas-sub { margin-bottom: 12px; }
/* ── De/para de colunas (módulo Dados) ──────────────────── */
.mapa-colunas { display: flex; flex-direction: column; gap: 9px; margin: 8px 0; }
.mapa-linha { display: flex; flex-direction: column; gap: 5px; }
.mapa-par { display: flex; align-items: center; gap: 8px; }
.mapa-par select { flex: 1; min-width: 0; font-size: 13px; padding: 7px 9px; }
.mapa-seta { color: var(--texto-3); font-weight: 700; flex-shrink: 0; }
.mapa-par .mp-x, .mapa-par .mp-lk { flex-shrink: 0; padding: 5px 9px; }
/* Painel de conversão de referência (FK lookup) */
.mapa-lookup {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-left: 6px; padding: 8px 11px;
background: var(--info-suave); border-left: 3px solid var(--info);
border-radius: 8px; font-size: 12px; color: var(--texto-2);
}
.mapa-lookup select { font-size: 12px; padding: 5px 7px; min-width: 90px; }
.modal code, .cartao code {
background: var(--superficie-2); padding: 1px 5px; border-radius: 4px;
font-size: 12px; font-family: ui-monospace, monospace;
}
/* ── Notícias (iframe) ──────────────────────────────────── */
.iframe-wrap { padding: 0; overflow: hidden; }
.iframe-wrap iframe {
display: block; width: 100%; border: 0; background: #fff;
height: calc(100vh - 190px); min-height: 480px;
}
/* ── Chat IA ────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 420px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 78%; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; font-size: 14px; }
.msg.eu {
align-self: flex-end; background: var(--primaria); color: #fff;
border-bottom-right-radius: 4px;
}
.msg.ia {
align-self: flex-start; background: var(--superficie);
border: 1px solid var(--borda); border-bottom-left-radius: 4px;
}
.msg.digitando { color: var(--texto-3); font-style: italic; }
.chat-sugestoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.chat-sugestoes button {
background: var(--superficie); border: 1px solid var(--borda);
border-radius: 20px; padding: 6px 13px; font-size: 12.5px; color: var(--texto-2);
}
.chat-sugestoes button:hover { border-color: var(--primaria); color: var(--primaria); }
.chat-entrada { display: flex; gap: 10px; padding-top: 10px; }
.chat-entrada input { flex: 1; }
/* ── Modal ──────────────────────────────────────────────── */
.modal-fundo {
display: none; position: fixed; inset: 0; z-index: 100;
background: rgba(10, 14, 22, .55); backdrop-filter: blur(3px);
align-items: center; justify-content: center; padding: 18px;
}
.modal-fundo.on { display: flex; }
.modal {
background: var(--superficie); border-radius: 16px;
box-shadow: var(--sombra-alta); position: relative;
width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
padding: 24px; animation: surgir .18s ease;
}
.modal h3 { font-size: 17px; margin-bottom: 4px; }
.modal .modal-sub { color: var(--texto-2); font-size: 13px; margin-bottom: 14px; }
.modal label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.modal input, .modal textarea, .modal select { width: 100%; }
.modal.largo { max-width: 840px; }
.modal-fechar {
position: absolute; top: 14px; right: 14px;
background: var(--superficie-2); border: none;
width: 30px; height: 30px; border-radius: 8px; color: var(--texto-2);
}
.modal-acoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.detalhe-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.detalhe-linha span:first-child { color: var(--texto-2); }
.detalhe-linha:last-child { border-bottom: none; }
/* ── Toasts ─────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: var(--texto); color: var(--fundo);
padding: 11px 17px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
box-shadow: var(--sombra-alta); animation: surgir .2s ease;
}
.toast.ok { background: var(--ok); color: #fff; }
.toast.erro { background: var(--perigo); color: #fff; }
/* ── Login ──────────────────────────────────────────────── */
.tela-login {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
/* Grafite nos DOIS temas: é a porta de entrada, a única tela em que a marca
é o assunto — e o cartão claro em cima dela mostra a versão escura do
logotipo, com o coral aparecendo. */
background: radial-gradient(120% 90% at 50% 0%, #454a52 0%, var(--grafite) 45%, var(--grafite-2) 100%);
padding: 18px;
}
.login-card {
background: var(--superficie); border: 1px solid var(--borda);
border-radius: 18px; box-shadow: var(--sombra-alta);
padding: 34px; width: 100%; max-width: 400px; text-align: center;
}
.login-card .logotipo { margin: 0 auto 16px; }
.login-sub { color: var(--texto-2); font-size: 13.5px; margin: 6px 0 20px; }
.login-card form { text-align: left; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.login-card input { width: 100%; margin-top: 4px; }
.login-card .btn { margin-top: 6px; }
.login-demo { margin-top: 10px; }
.login-erro {
background: var(--perigo-suave); color: var(--perigo);
border-radius: 9px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}
.login-rodape { margin-top: 18px; font-size: 12.5px; color: var(--texto-3); }
/* ── Responsivo ─────────────────────────────────────────── */
.so-mobile { display: none; }
.sidebar-fundo { display: none; }
@media (max-width: 900px) {
.so-mobile { display: inline-flex; }
.sidebar {
position: fixed; left: 0; top: 0; z-index: 90; height: 100vh;
transform: translateX(-100%); transition: transform .22s ease;
box-shadow: var(--sombra-alta);
}
.sidebar.aberta { transform: none; }
.sidebar-fundo.on {
display: block; position: fixed; inset: 0; z-index: 80;
background: rgba(10, 14, 22, .45);
}
.grade-2 { grid-template-columns: 1fr; }
.conteudo { padding: 16px; }
.sel-empresa { max-width: 140px; }
.busca { max-width: none; }
.cal-dia { min-height: 64px; }
.msg { max-width: 92%; }
}
@media (max-width: 560px) {
.cartoes { grid-template-columns: repeat(2, 1fr); }
.cal-grade { gap: 3px; }
.cal-evento { font-size: 9px; padding: 1.5px 3px; }
.topo { padding: 10px 12px; gap: 8px; }
}
/* ── Importação de PDF ───────────────────────────────────── */
.imp-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.imp-chip {
display: flex; align-items: center; gap: 7px; padding: 7px 13px;
border: 1px solid var(--borda); border-radius: 999px;
background: var(--superficie); font-size: 13px; font-weight: 600;
color: var(--texto-2); cursor: pointer; transition: border-color .12s, color .12s;
}
.imp-chip:hover { border-color: var(--primaria); color: var(--texto); }
.imp-chip.ativo { border-color: var(--primaria); color: var(--primaria); }
.imp-chip b { font-size: 15px; }
.imp-conf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.imp-barra { width: 46px; height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.imp-barra i { display: block; height: 100%; border-radius: 3px; }
/* Conferência: prévia do PDF ao lado dos campos */
.imp-conferir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; }
.imp-previa {
background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
padding: 8px; max-height: 62vh; overflow: auto; text-align: center;
}
.imp-previa img { max-width: 100%; border-radius: 6px; box-shadow: var(--sombra); }
@media (max-width: 860px) { .imp-conferir { grid-template-columns: 1fr; } }
/* Editor visual de modelos */
.ed-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .ed-grade { grid-template-columns: 1fr; } }
.ed-palco {
position: relative; display: inline-block; line-height: 0;
border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
cursor: crosshair; user-select: none; max-width: 100%;
}
.ed-palco img { display: block; width: 100%; height: auto; }
.ed-caixa {
position: absolute; border: 2px solid var(--primaria);
background: color-mix(in srgb, var(--primaria) 14%, transparent);
border-radius: 3px; pointer-events: none;
}
.ed-caixa span {
position: absolute; top: -19px; left: -2px; font-size: 10.5px; font-weight: 700;
line-height: 1; padding: 3px 6px; border-radius: 4px; white-space: nowrap;
background: var(--primaria); color: #fff;
}
.ed-caixa.desenhando { border-style: dashed; }
.ed-campos { display: flex; flex-direction: column; gap: 10px; }
.ed-campo {
border: 1px solid var(--borda); border-radius: 9px; padding: 10px;
background: var(--superficie); display: flex; flex-direction: column; gap: 7px;
}
.ed-campo.sel { border-color: var(--primaria); }
.ed-campo-topo { display: flex; align-items: center; gap: 8px; }
.ed-campo-topo select, .ed-campo-topo input { font-size: 12.5px; padding: 6px 8px; }
.ed-lido {
font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--superficie-2); border-radius: 6px; padding: 6px 8px;
color: var(--texto-2); word-break: break-word; min-height: 28px; white-space: pre-wrap;
}
.ed-lido.vazio { color: var(--perigo); }
.ed-dica { font-size: 12px; color: var(--texto-3); line-height: 1.5; }
/* ── RH: ficha do funcionário ────────────────────────────── */
.rh-cabeca {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; margin-bottom: 16px;
background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
}
.rh-avatar {
width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--superficie-2); color: var(--texto-2);
font-size: 21px; font-weight: 700; object-fit: cover;
}
.rh-cabeca h2 { margin: 0 0 3px; font-size: 19px; }
.rh-cabeca .sub { margin: 0; }
.rh-cabeca-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rh-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 900px) { .rh-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rh-grade { grid-template-columns: 1fr; } }
.rh-grade label { min-width: 0; }
.rh-grade input:disabled, .rh-grade select:disabled, .rh-grade textarea:disabled {
background: var(--superficie-2); color: var(--texto); opacity: 1;
border-color: transparent; cursor: default;
}
.rh-secao { margin-bottom: 8px; }
.rh-secao > summary {
cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 2px;
list-style: none; display: flex; align-items: center; gap: 7px;
}
.rh-secao > summary::-webkit-details-marker { display: none; }
.rh-secao > summary::before { content: '▸'; color: var(--texto-3); transition: transform .15s; }
.rh-secao[open] > summary::before { transform: rotate(90deg); }
.rh-vazio { color: var(--texto-3); font-style: italic; }
.rh-linha-total {
display: flex; justify-content: space-between; gap: 12px;
padding: 9px 0; font-size: 14px;
}
.rh-linha-total.forte { font-weight: 700; border-top: 1px solid var(--borda); margin-top: 4px; }
/* ── Folha analítica ─────────────────────────────────────── */
.fa-filtros {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; align-items: end; margin-bottom: 16px;
padding: 14px; background: var(--superficie);
border: 1px solid var(--borda); border-radius: 12px;
}
.fa-filtros label { margin: 0; font-size: 12px; color: var(--texto-2); }
.fa-filtros label > * { margin-top: 4px; }
.fa-acoes { display: flex; gap: 8px; align-items: end; }
.fa-grafico { position: relative; height: 260px; }
.fa-barra-pct {
height: 5px; border-radius: 3px; background: var(--superficie-2);
overflow: hidden; margin-top: 4px; min-width: 60px;
}
.fa-barra-pct i { display: block; height: 100%; border-radius: 3px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desconto { color: var(--perigo); }
/* Rodapé de totais: fica preso ao rolar a tabela na horizontal e não some
junto com o hover das linhas. */
.tabela tfoot td {
background: var(--superficie-2); border-top: 2px solid var(--borda);
border-bottom: none; font-size: 13.5px;
}
.tabela tfoot tr:hover td { background: var(--superficie-2); }
/* Lançamento informativo (prov_desc = I): não compõe o líquido */
.tabela tr.fa-info > td:not(.desconto) { color: var(--texto-2); }
/* Opções do diálogo de exportação */
.fa-op-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
label.fa-op {
display: inline-flex; align-items: center; gap: 6px; margin: 0;
font-size: 13px; font-weight: 500; cursor: pointer;
padding: 5px 9px; border: 1px solid var(--borda); border-radius: 8px;
}
label.fa-op:hover { border-color: var(--primaria); }
label.fa-op input { width: auto; margin: 0; flex-shrink: 0; }
label.fa-op:has(input:checked) {
border-color: var(--primaria); background: var(--primaria-suave);
color: var(--primaria);
}
/* Linha que abre detalhe dentro da própria tabela (folha analítica) */
.tabela tr[data-det] { cursor: pointer; }
.tabela tr[data-det]:hover > td { background: var(--superficie-2); }
.tabela tr[data-det] > td:first-child { position: relative; padding-left: 18px; }
.tabela tr[data-det] > td:first-child::before {
content: '▸'; position: absolute; left: 6px; top: 50%;
transform: translateY(-50%); color: var(--texto-3);
transition: transform .15s, color .15s;
}
.tabela tr[data-det].aberta > td { background: var(--primaria-suave); }
.tabela tr[data-det].aberta > td:first-child::before {
transform: translateY(-50%) rotate(90deg); color: var(--primaria);
}
.tabela tr.fa-det > td {
background: var(--superficie-2); padding: 14px 16px;
border-top: 0; box-shadow: inset 0 1px 0 var(--borda);
}
.tabela tr.fa-det .tabela { font-size: 12.5px; background: var(--superficie); }
.tabela tr.fa-det .tabela th { font-size: 11px; }
/* ── Ponto/Eventos ───────────────────────────────────────── */
.pt-barra {
display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
padding: 12px 14px; margin-bottom: 14px;
background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
}
.pt-barra label { margin: 0; font-size: 12px; color: var(--texto-2); font-weight: 600; }
.pt-barra label > input { margin-top: 4px; }
.pt-barra-acoes {
margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.pt-barra-acoes .sub { white-space: nowrap; }
/* A grade do mês é densa de propósito: 31 linhas têm de caber numa tela sem
rolagem infinita, e quem preenche o ponto vai de campo em campo com Enter. */
.pt-wrap { padding: 0; }
table.pt-tabela { font-size: 13px; }
.pt-tabela th { padding: 8px 6px; font-size: 10.5px; }
.pt-tabela td { padding: 3px 6px; }
.pt-tabela tr:hover > td { background: transparent; }
/* ── Cenário fiscal (Inteligência Tributária) ────────────
Onze colunas de dinheiro em sequência ficam ilegíveis sem separar o que é
MOVIMENTO do que é APURADO — daí o cabeçalho em duas alturas, com o grupo
por cima. O traço vertical marca onde um bloco termina. */
.trib-tabela th.trib-grupo {
text-align: center; border-left: 1px solid var(--borda);
color: var(--texto-2); font-weight: 700;
}
.trib-tabela thead tr:first-child th { padding-bottom: 5px; }
.trib-tabela thead tr:last-child th { padding-top: 3px; white-space: nowrap; }
.trib-tabela td, .trib-tabela th { font-variant-numeric: tabular-nums; }
.trib-tabela .trib-carga { font-weight: 700; color: var(--primaria); }
.trib-tabela tfoot .trib-total td {
background: var(--superficie-2); border-top: 2px solid var(--borda);
border-bottom: none;
}
.trib-tabela tfoot .trib-total .trib-carga { color: var(--texto); }
/* Campo numérico SEM as setinhas de incremento.
Num campo de dinheiro elas atrapalham mais do que ajudam: ninguém digita um
salário de centavo em centavo, e a roda do mouse sobre o campo trocava o
valor sem que a pessoa percebesse (o JS também neutraliza a roda). */
input.sem-setas { -moz-appearance: textfield; appearance: textfield; }
input.sem-setas::-webkit-outer-spin-button,
input.sem-setas::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Coluna de seleção do painel (espelho de ponto em lote) */
.pt-col-sel { width: 34px; text-align: center; padding-right: 0 !important; }
.pt-col-sel input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
/* ── A relação de cartões da competência ─────────────────
Treze colunas: nome, cargo, situação, seis contadores de hora, dois de dia e
os botões. Numa tela de 1366 isso passa da largura útil e o "Abrir" ficava
FORA — a rolagem horizontal existia, mas ninguém rola uma tabela para a
direita procurando o botão que era para estar ali. */
/* ⚠️ LARGURA FIXA POR COLUNA (`table-layout: fixed`).
Com o layout automático, a coluna do nome pedia a largura do nome inteiro e
empurrava o resto para fora; encurtar o texto não resolvia, porque `nowrap`
AUMENTA a largura mínima da célula. No layout fixo é a régua abaixo que
manda, o texto que não couber vira reticências e a tabela nunca passa da
área visível — só abaixo do `min-width`, e aí a coluna dos botões segura. */
/* Largura fixa só na relação de pontos — ver o aviso da régua abaixo. */
table.pt-relacao { table-layout: fixed; min-width: 1130px; }
table.pt-lista th, table.pt-lista td { padding: 7px 6px; }
/* Rótulo menor porque as colunas de hora são estreitas: em 11,5px o "EX. NOT."
não cabe em 64px e sairia cortado — e cabeçalho cortado não explica coluna
nenhuma. O dado continua em 13,5px, que é o que se lê. */
.pt-lista th { font-size: 10.5px; letter-spacing: .02em; }
.pt-lista td.num, .pt-lista th.num { white-space: nowrap; }
/* Guarda: rótulo que não couber corta em vez de invadir a coluna vizinha —
dois cabeçalhos colados viram uma palavra só e ninguém lê nenhuma das duas. */
.pt-lista th { overflow: hidden; text-overflow: ellipsis; }
/* ⚠️⚠️ A RÉGUA ABAIXO É POSICIONAL E SÓ VALE PARA A RELAÇÃO DE PONTOS.
Ela mora em `.pt-relacao`, e não em `.pt-lista`, porque `.pt-lista` é
compartilhada: a emissão de guias usa a mesma classe para uma tabela de SETE
colunas, e um `nth-child(12)` pensado para dezesseis colocaria a largura da
coluna de faltas na de valor.
Mexeu na ORDEM das colunas do `ponto.js`, refaça os números daqui. */
.pt-relacao th:nth-child(1) { width: 34px; } /* seleção */
.pt-relacao th:nth-child(3) { width: 124px; } /* cargo */
.pt-relacao th:nth-child(4) { width: 88px; } /* situação */
.pt-relacao th:nth-child(5) { width: 56px; } /* diária */
.pt-relacao th:nth-child(6), /* sábado */
.pt-relacao th:nth-child(7) { width: 48px; } /* domingo */
.pt-relacao th:nth-child(8) { width: 44px; } /* dias */
.pt-relacao th:nth-child(9), /* extra */
.pt-relacao th:nth-child(10), /* ex. not. */
.pt-relacao th:nth-child(11) { width: 62px; } /* ex. fer. */
.pt-relacao th:nth-child(12) { width: 50px; } /* not. */
.pt-relacao th:nth-child(13) { width: 62px; } /* faltas */
.pt-relacao th:nth-child(14) { width: 64px; } /* dias falta */
.pt-relacao th:nth-child(15) { width: 40px; } /* eventos */
.pt-relacao th:nth-child(16) { width: 92px; } /* botões */
/* A 2ª (funcionário) não leva medida: fica com tudo o que sobrar, que é o
certo — é a coluna que a pessoa lê para achar quem procura. As medidas acima
somam ~800px, e o `min-width` da tabela reserva ~180px para ela: abaixo
disso a tabela rola em vez de espremer o nome até sumir. */
/* UMA LINHA POR FUNCIONÁRIO.
Nome e CPF (e cargo e setor) dividem a mesma linha, e o que não couber vira
reticências com o texto inteiro no `title`. Antes cada um tinha a sua linha
e o nome comprido ainda quebrava em três — a linha da tabela chegava a cinco
e a lista virava um rolo para achar quem se procura. */
.pt-nome {
display: flex; align-items: baseline; gap: 6px;
min-width: 0; overflow: hidden; white-space: nowrap;
}
.pt-nome > b, .pt-nome > .sub { overflow: hidden; text-overflow: ellipsis; }
/* Quem encolhe é o NOME, não o CPF. O CPF tem tamanho fixo e conhecido; deixar
os dois cederem produzia um "987…" que não confirma pessoa nenhuma — pior
que não mostrar. O nome cortado ainda identifica, e o `title` tem o inteiro. */
.pt-nome > b { flex: 0 1 auto; }
.pt-nome > .sub { flex: none; }
/* A coluna dos botões fica GRUDADA na direita: quando a tabela não cabe, é ela
que continua visível, e a rolagem passa por baixo. */
.pt-lista .pt-col-acao {
position: sticky; right: 0; z-index: 2;
white-space: nowrap; width: 1%;
background: var(--superficie);
/* A borda diz que ali termina o conteúdo rolável — sem ela, a coluna
parece parte da última que passou por baixo. */
box-shadow: -1px 0 0 var(--borda), -8px 0 12px -8px rgba(0, 0, 0, .16);
}
.pt-lista thead .pt-col-acao { background: var(--superficie); z-index: 3; }
/* O `.painel` tem 18px de padding e é ELE quem rola: `right: 0` gruda a célula
na borda do padding, e naquela faixa de 18px apareciam os números das
colunas que passavam por baixo. O prolongamento tapa a faixa. */
.pt-lista .pt-col-acao::after {
content: ''; position: absolute; top: 0; bottom: 0; left: 100%;
width: 20px; background: inherit;
}
/* Sem isto a célula fixa fica com o fundo parado enquanto o resto da linha
acende no hover, e parece de outra tabela. */
.pt-lista tr:hover td.pt-col-acao { background: var(--superficie-2); }
input.pt-hora {
width: 66px; padding: 5px 6px; text-align: right; font-size: 13px;
font-variant-numeric: tabular-nums; border-radius: 6px; margin: 0;
}
input.pt-obs { width: 100%; min-width: 120px; padding: 5px 8px; font-size: 12.5px; margin: 0; }
/* Intervalos: cabem dois pares ("12:00-13:00, 22:53-23:08") sem quebrar; se o
dia tiver mais, o campo rola — alargar a coluna custaria as 31 linhas. */
input.pt-intervalos {
width: 100%; min-width: 130px; padding: 5px 6px; font-size: 12px;
font-variant-numeric: tabular-nums; border-radius: 6px; margin: 0;
}
input.pt-intervalos:disabled { background: transparent; border-color: transparent; color: var(--texto-2); }
select.pt-tipo { padding: 5px 6px; font-size: 12.5px; min-width: 110px; margin: 0; }
input.pt-hora:disabled, input.pt-obs:disabled, select.pt-tipo:disabled {
background: transparent; border-color: transparent; color: var(--texto-2);
}
/* Valor digitado por cima do cálculo — quem confere precisa ver quais são */
input.pt-hora.pt-manual {
border-color: var(--primaria); background: var(--primaria-suave); font-weight: 600;
}
.pt-dia { white-space: nowrap; }
.pt-dia .sub { margin-left: 5px; text-transform: uppercase; font-size: 10.5px; }
.pt-nome-feriado {
max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10.5px;
}
.pt-sabado > td { background: var(--superficie-2); }
.pt-domingo > td { background: var(--superficie-2); }
.pt-domingo .pt-dia b, .pt-sabado .pt-dia b { color: var(--texto-2); }
.pt-feriado > td { background: var(--primaria-suave); }
.pt-feriado .pt-dia b, .pt-feriado .pt-nome-feriado { color: var(--primaria); }
textarea.pt-comentario { width: 100%; resize: vertical; font-family: inherit; }
/* Alertas do mês: teto de 44h e domingo compensado */
#pt-alertas:empty { display: none; }
#pt-alertas { margin: 0 0 14px; }
.pt-alerta, .pt-nota {
padding: 9px 13px; border-radius: 10px; margin-top: 8px; font-size: 13px;
background: var(--superficie); border: 1px solid var(--borda);
}
.pt-alerta { border-left: 3px solid var(--alerta); }
.pt-nota { border-left: 3px solid var(--primaria); color: var(--texto-2); }
/* Rótulo em cima do campo mesmo dentro de uma linha flex — no modal, um
input de largura fixa fica ao lado do texto e a leitura se perde. */
label.pt-campo {
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px; margin: 0; font-size: 12px; color: var(--texto-2);
}
/* Fila de importação: cada arquivo é um cartão empilhado */
.pt-fila-item {
padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
margin-bottom: 8px; background: var(--superficie-2);
}
.pt-fila-item.ruim { border-left: 3px solid var(--perigo); }
.pt-fila-item:last-child { margin-bottom: 0; }
.pt-fila-topo {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.pt-fila-topo b { flex-shrink: 0; }
.pt-fila-topo button { margin-left: auto; }
.pt-fila-item .fa-barra-pct { margin: 6px 0 3px; }
.pt-fila-nomes {
display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0;
}
.pt-fila-nomes > * { margin: 0; flex: 1 1 220px; }
/* A leitura em andamento pulsa de leve — sem isso a tela parece parada */
.pt-fila-and .fa-barra-pct i { animation: pt-pulsa 1.6s ease-in-out infinite; }
@keyframes pt-pulsa { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
.pt-fila-and .fa-barra-pct i { animation: none; }
}
.pt-imp-ok, .pt-imp-erro {
padding: 7px 10px; border-radius: 8px; font-size: 13px; margin-bottom: 6px;
border-left: 3px solid var(--sucesso); background: var(--superficie-2);
}
.pt-imp-erro { border-left-color: var(--perigo); }
.pt-imp-ok a { margin-left: 6px; }
@media (max-width: 900px) {
.pt-barra-acoes { margin-left: 0; width: 100%; }
input.pt-hora { width: 58px; }
input.pt-intervalos { min-width: 112px; }
}
/* ── Menu lateral recolhido ──────────────────────────────────
Recolher esconde a barra INTEIRA e devolve a largura ao conteúdo — é o que
se espera de "recolher o menu". O mesmo botão da barra superior (☰) faz os
dois papéis: no desktop recolhe/expande; no celular, onde a barra já é
off-canvas, abre e fecha a gaveta. */
/* Só no desktop. No celular a barra é uma gaveta off-canvas — se a regra
valesse lá, recolher no desktop e diminuir a janela deixaria a gaveta
impossível de abrir. */
@media (min-width: 901px) {
.app.menu-recolhido .sidebar { display: none; }
}
/* ── A marca na barra superior ────────────────────────────────
Ela aparece quando a barra lateral NÃO está à vista — recolhida no desktop,
ou fora da tela no celular, onde a lateral é uma gaveta. Sem isto, recolher
o menu deixava a tela inteira sem marca nenhuma.
⚠️ São dois seletores porque são dois estados diferentes, não um só: no
desktop quem esconde a lateral é a classe `menu-recolhido`; no celular ela
já nasce fora da tela, sem classe nenhuma. Uma regra só deixaria o celular
sem marca (ou o desktop com marca dobrada). */
.topo .logotipo { display: none; flex: none; }
.app.menu-recolhido .topo .logotipo { display: block; }
@media (max-width: 900px) {
.topo .logotipo { display: block; }
}
.logotipo-barra { width: 150px; height: 41px; }
/* No celular estreito a busca precisa do espaço mais do que a marca. */
@media (max-width: 560px) {
.topo .logotipo { display: none; }
}
/* Rodapé do sino: "Ver todas" e "Marcar lidas" ficam grudados no fim da
lista, para não sumirem quando ela cresce. */
.notif-rodape {
display: flex; gap: 8px; justify-content: space-between;
position: sticky; bottom: 0;
background: var(--superficie); border-top: 1px solid var(--borda);
}
/* ── Seleção múltipla (folha analítica) ──────────────────── */
.multi { position: relative; }
.multi-botao {
width: 100%; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 6px;
background: var(--fundo-campo, var(--superficie)); color: var(--texto);
border: 1px solid var(--borda); border-radius: 8px;
padding: 9px 10px; font-family: inherit; font-size: 13.5px;
}
.multi-botao:hover { border-color: var(--primaria); }
.multi-botao .cnt {
margin-left: auto; font-size: 11px; font-weight: 700;
background: var(--primaria-suave); color: var(--primaria);
border-radius: 20px; padding: 1px 7px;
}
.multi-botao .seta { color: var(--texto-3); font-size: 10px; }
.multi-painel {
display: none; position: absolute; z-index: 40; top: calc(100% + 4px);
left: 0; min-width: 100%; width: max-content; max-width: 320px;
background: var(--superficie); border: 1px solid var(--borda);
border-radius: 10px; box-shadow: var(--sombra-alta); padding: 8px;
}
.multi.aberto .multi-painel { display: block; }
.multi-painel input[type="search"], .multi-painel input[type="text"] {
width: 100%; margin: 0 0 6px; font-size: 13px; padding: 7px 9px;
}
.multi-lista { max-height: 240px; overflow-y: auto; }
.multi-lista label {
display: flex; align-items: center; gap: 8px; margin: 0;
padding: 5px 6px; border-radius: 6px; font-size: 13px;
font-weight: 500; cursor: pointer; text-transform: none;
}
.multi-lista label:hover { background: var(--superficie-2); }
.multi-lista input { width: auto; margin: 0; flex-shrink: 0; }
.multi-lista .vazio { color: var(--texto-3); font-size: 12.5px; padding: 8px 6px; }
.multi-acoes {
display: flex; gap: 6px; padding-top: 7px; margin-top: 5px;
border-top: 1px solid var(--borda);
}
.multi-acoes button { flex: 1; }
/* ── Menu do usuário (avatar da barra superior) ──────────── */
.usuario-wrap { position: relative; }
button.avatar { border: none; cursor: pointer; font-family: inherit; font-size: 15px; }
button.avatar:hover { filter: brightness(1.1); }
.usuario-painel {
display: none; position: absolute; right: 0; top: 46px; min-width: 216px;
background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--raio); box-shadow: var(--sombra-alta);
overflow: hidden; z-index: 60; padding: 6px;
}
.usuario-painel.on { display: block; }
.usuario-cabeca {
padding: 8px 10px 10px; margin-bottom: 4px;
border-bottom: 1px solid var(--borda);
}
.usuario-cabeca strong { display: block; font-size: 13.5px; }
.usuario-cabeca small { color: var(--texto-3); font-size: 11.5px; word-break: break-all; }
.usuario-painel button, .usuario-painel a {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 8px 10px; border: none; background: none; border-radius: 8px;
font-family: inherit; font-size: 13.5px; color: var(--texto-2);
text-align: left; cursor: pointer;
transition: background .12s, color .12s;
}
.usuario-painel button:hover, .usuario-painel a:hover {
background: var(--superficie-2); color: var(--texto);
}
.usuario-painel .sair { color: var(--perigo); }
/* A barra superior é sticky: sem esta margem, rolar até as abas as deixaria
escondidas atrás dela (usado pelo atalho "Líquidos" do menu). */
.abas { scroll-margin-top: 78px; }
/* ── Editor de contrato ──────────────────────────────────── */
.ct-barra {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
padding: 7px; border: 1px solid var(--borda); border-bottom: 0;
border-radius: 9px 9px 0 0; background: var(--superficie-2);
}
.ct-barra button {
min-width: 30px; height: 28px; padding: 0 8px;
background: none; border: 1px solid transparent; border-radius: 6px;
color: var(--texto-2); font-family: inherit; font-size: 13px; line-height: 1;
}
.ct-barra button:hover { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.ct-barra .sep { width: 1px; height: 18px; background: var(--borda); margin: 0 3px; }
.ct-editor {
min-height: 420px; max-height: 62vh; overflow-y: auto;
padding: 22px 26px; border: 1px solid var(--borda); border-radius: 0 0 9px 9px;
background: var(--superficie); color: var(--texto);
font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.75;
outline: none;
}
.ct-editor:focus { border-color: var(--primaria); }
.ct-editor h1 { font-size: 19px; margin: 0 0 14px; }
.ct-editor h2 { font-size: 16px; margin: 16px 0 7px; }
.ct-editor p { margin: 0 0 10px; }
.ct-editor table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.ct-editor td, .ct-editor th { border: 1px solid var(--borda); padding: 5px 8px; }
/* Variável visível no editor, para não se perder no meio do texto */
.ct-editor .ct-var, .ct-var {
background: var(--primaria-suave); color: var(--primaria);
border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace;
font-size: .85em; white-space: nowrap;
}
.ct-vazio { border-bottom: 1px solid currentColor; padding: 0 22px; opacity: .55; }
.ct-vars {
max-height: 320px; overflow-y: auto; border: 1px solid var(--borda);
border-radius: 9px; padding: 8px;
}
.ct-vars h4 {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--texto-3); margin: 10px 0 5px;
}
.ct-vars h4:first-child { margin-top: 0; }
.ct-vars button {
display: block; width: 100%; text-align: left; margin-bottom: 2px;
padding: 5px 8px; border: none; border-radius: 6px; background: none;
font-family: inherit; font-size: 12.5px; color: var(--texto-2);
}
.ct-vars button:hover { background: var(--superficie-2); color: var(--texto); }
.ct-vars button code { color: var(--texto-3); font-size: 11px; }
.ct-grade { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
@media (max-width: 1000px) { .ct-grade { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════
MURAL DE TV (staff) — telas de parede do escritório
Fora do tema claro/escuro de propósito: a TV fica sempre escura,
que é o que se lê de longe e não ofusca a sala.
As medidas são em `em` sobre um font-size em vw — assim o mesmo
layout serve a um monitor de 24" e a uma TV de 65" em 1080p.
═══════════════════════════════════════════════════════════════════ */
.app.modo-tv .sidebar,
.app.modo-tv .sidebar-fundo,
.app.modo-tv .topo,
.app.modo-tv .faixa-demo { display: none; }
.app.modo-tv .principal { height: 100vh; }
.app.modo-tv .conteudo {
padding: 0; max-width: none; height: 100vh;
overflow: hidden; animation: none;
}
.tv {
--tv-fundo: #23262c;
--tv-super: #303239;
--tv-super2: #383e43;
--tv-borda: #454a52;
--tv-txt: #f7f7f9;
--tv-txt2: #9aa9bf;
--tv-txt3: #6a7789;
--tv-ok: #22c55e;
--tv-alerta: #f59e0b;
--tv-perigo: #f43f5e;
--tv-info: #38bdf8;
/* Na parede o acento é o coral da marca: a tela fica a metros de distância
e ele lê de longe sobre o grafite. */
--tv-primaria:#fa5f46;
position: relative;
height: 100vh;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
background:
radial-gradient(900px 500px at 12% -10%, #3d434b 0%, transparent 60%),
radial-gradient(900px 500px at 100% 110%, #383e43 0%, transparent 60%),
var(--tv-fundo);
color: var(--tv-txt);
font-size: clamp(12px, .95vw, 24px);
line-height: 1.35;
cursor: none;
overflow: hidden;
}
.tv.tv-mouse { cursor: default; }
/* ── Cabeçalho ── */
.tv-topo {
display: flex; align-items: center; gap: 1.4em;
padding: .9em 1.6em;
border-bottom: 1px solid var(--tv-borda);
background: rgba(10, 14, 24, .55);
}
.tv-marca { display: flex; align-items: center; gap: .7em; min-width: 0; }
/* Aqui o símbolo entra por ![]()
: o mural só tem tema escuro, então não há
tema para trocar e o arquivo solto evita duplicar a regra no tv.js. */
.tv-logo { width: 2.8em; height: 2.8em; flex-shrink: 0; object-fit: contain; }
.tv-marca strong { display: block; font-size: 1.35em; font-weight: 700; letter-spacing: -.01em; }
.tv-marca small { color: var(--tv-txt2); font-size: .95em; }
.tv-titulo {
flex: 1; text-align: center;
font-size: 1.5em; font-weight: 700; color: var(--tv-txt);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-relogio { text-align: right; flex-shrink: 0; }
.tv-relogio strong {
display: block; font-size: 2.4em; font-weight: 800;
line-height: 1; letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.tv-relogio small { color: var(--tv-txt2); font-size: .95em; text-transform: capitalize; }
/* ── Palco ── */
.tv-palco { padding: 1.3em 1.6em; min-height: 0; overflow: hidden; }
.tv-slide {
height: 100%; display: flex; flex-direction: column; gap: 1em;
animation: tv-entra .5s ease;
}
@keyframes tv-entra {
from { opacity: 0; transform: translateY(1.2em) scale(.995); }
to { opacity: 1; transform: none; }
}
.tv-cabeca { flex-shrink: 0; }
.tv-cabeca h2 { font-size: 2em; font-weight: 800; letter-spacing: -.02em; }
.tv-cabeca p { color: var(--tv-txt2); font-size: 1.05em; margin-top: .1em; }
.tv-carregando, .tv-erro {
height: 100%; display: flex; flex-direction: column; gap: .4em;
align-items: center; justify-content: center;
color: var(--tv-txt2); font-size: 1.6em;
}
.tv-erro span { font-size: 2.4em; }
.tv-erro h2 { color: var(--tv-txt); font-size: 1.2em; }
.tv-erro p { font-size: .85em; }
.tv-erro small{ font-size: .6em; color: var(--tv-txt3); }
/* ── Cartões de indicador ── */
.tv-kpis {
display: grid; gap: .9em; flex-shrink: 0;
grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
}
.tv-kpi {
background: linear-gradient(160deg, var(--tv-super), var(--tv-super2));
border: 1px solid var(--tv-borda); border-top: 3px solid var(--tv-primaria);
border-radius: .7em; padding: .9em 1em;
}
.tv-kpi.ok { border-top-color: var(--tv-ok); }
.tv-kpi.alerta { border-top-color: var(--tv-alerta); }
.tv-kpi.perigo { border-top-color: var(--tv-perigo); background: linear-gradient(160deg, #26141d, #1d1421); }
.tv-kpi-rotulo { font-size: 1em; color: var(--tv-txt2); font-weight: 600; }
.tv-kpi-valor {
font-size: 3.1em; font-weight: 800; line-height: 1.05; margin: .06em 0;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tv-kpi.ok .tv-kpi-valor { color: var(--tv-ok); }
.tv-kpi.alerta .tv-kpi-valor { color: var(--tv-alerta); }
.tv-kpi.perigo .tv-kpi-valor { color: var(--tv-perigo); }
.tv-kpi-sub { font-size: .9em; color: var(--tv-txt3); }
/* ── Barras de progresso ── */
.tv-progressao {
background: var(--tv-super); border: 1px solid var(--tv-borda);
border-radius: .7em; padding: 1em 1.2em; margin-top: auto;
}
.tv-prog-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5em; }
.tv-prog-topo strong { font-size: 1.2em; }
.tv-prog-topo span { color: var(--tv-txt2); font-size: 1em; }
.tv-prog-trilho {
display: flex; height: .9em; border-radius: 1em; overflow: hidden;
background: var(--tv-super2);
}
.tv-prog-trilho.fino { height: .5em; }
.tv-prog-parte { height: 100%; transition: width .6s ease; background: var(--tv-primaria); }
.tv-prog-parte.ok { background: var(--tv-ok); }
.tv-prog-parte.alerta { background: var(--tv-alerta); }
.tv-prog-parte.perigo { background: var(--tv-perigo); }
.tv-prog-parte.info { background: var(--tv-info); }
.tv-legenda { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: .6em; color: var(--tv-txt2); font-size: .95em; }
.tv-legenda i {
display: inline-block; width: .7em; height: .7em; border-radius: 50%;
margin-right: .4em; background: var(--tv-txt3);
}
.tv-legenda i.ok { background: var(--tv-ok); }
.tv-legenda i.alerta { background: var(--tv-alerta); }
.tv-legenda i.perigo { background: var(--tv-perigo); }
/* ── Grade de obrigações ── */
.tv-grade-cartoes {
flex: 1; min-height: 0;
display: grid; gap: .8em;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(0, 1fr);
}
.tv-cartao {
background: var(--tv-super); border: 1px solid var(--tv-borda);
border-left: .28em solid var(--tv-primaria);
border-radius: .6em; padding: .7em .85em;
display: flex; flex-direction: column; gap: .35em; overflow: hidden;
}
.tv-cartao.perigo { border-left-color: var(--tv-perigo); background: linear-gradient(120deg, #241420, var(--tv-super)); }
.tv-cartao.ok { border-left-color: var(--tv-ok); }
.tv-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .5em; }
.tv-cartao-topo strong { font-size: 1.15em; font-weight: 700; line-height: 1.2; }
.tv-cartao-topo small { display: block; color: var(--tv-txt3); font-size: .75em; font-weight: 500; }
.tv-cartao-sub { color: var(--tv-txt2); font-size: .88em; }
.tv-cartao-numeros { display: flex; gap: .9em; margin-top: auto; }
.tv-cartao-numeros div { text-align: center; }
.tv-cartao-numeros b {
display: block; font-size: 1.7em; font-weight: 800; line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.tv-cartao-numeros span { font-size: .75em; color: var(--tv-txt3); }
.tv-cartao-numeros .ok b { color: var(--tv-ok); }
.tv-cartao-numeros .alerta b { color: var(--tv-alerta); }
.tv-cartao-numeros .perigo b { color: var(--tv-perigo); }
.tv-tag {
flex-shrink: 0; padding: .18em .6em; border-radius: 1em;
font-size: .82em; font-weight: 700; white-space: nowrap;
background: var(--tv-super2); color: var(--tv-txt2);
}
.tv-tag.ok { background: rgba(34, 197, 94, .16); color: var(--tv-ok); }
.tv-tag.alerta { background: rgba(245, 158, 11, .16); color: var(--tv-alerta); }
.tv-tag.perigo { background: rgba(244, 63, 94, .18); color: var(--tv-perigo); }
/* Só o avulso dentro do mural — `.perigo` sem escopo repintaria os
cartões do portal inteiro, que já usam essa classe. */
.tv b.perigo { color: var(--tv-perigo); }
/* ── Duas colunas e listas ── */
.tv-duas {
flex: 1; min-height: 0;
display: grid; gap: 1em; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tv-bloco {
background: var(--tv-super); border: 1px solid var(--tv-borda);
border-radius: .7em; padding: .9em 1.1em;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.tv-bloco.cheio { flex: 1; }
.tv-bloco h3 {
font-size: 1.15em; font-weight: 700; color: var(--tv-txt2);
margin-bottom: .6em; flex-shrink: 0;
}
.tv-lista { display: flex; flex-direction: column; gap: .3em; min-height: 0; overflow: hidden; }
.tv-linha {
display: flex; align-items: center; gap: .7em;
padding: .42em .6em; border-radius: .5em; background: var(--tv-super2);
}
.tv-linha.coluna { flex-direction: column; align-items: stretch; gap: .3em; }
.tv-linha-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.tv-linha-cabeca strong, .tv-linha-info strong { font-size: 1.08em; font-weight: 700; }
.tv-linha-cabeca span { color: var(--tv-txt2); font-size: .92em; }
.tv-linha-info { flex: 1; min-width: 0; }
.tv-linha-info small {
display: block; color: var(--tv-txt3); font-size: .84em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-pos {
width: 1.8em; height: 1.8em; flex-shrink: 0; border-radius: .4em;
background: var(--tv-borda); color: var(--tv-txt2);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: .95em;
}
.tv-data-bloco {
flex-shrink: 0; width: 2.6em; text-align: center; border-radius: .4em;
background: var(--tv-borda); padding: .15em 0;
}
.tv-data-bloco b { display: block; font-size: 1.25em; font-weight: 800; line-height: 1.1; }
.tv-data-bloco small { font-size: .72em; color: var(--tv-txt2); }
.tv-vazio {
flex: 1; display: flex; flex-direction: column; gap: .3em;
align-items: center; justify-content: center;
color: var(--tv-txt3); font-size: 1.05em; padding: 1.2em 0;
}
.tv-vazio span { font-size: 2.2em; }
/* ── Calendário ── */
.tv-cal-area {
flex: 1; min-height: 0;
display: grid; gap: 1em; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
}
.tv-calendario {
background: var(--tv-super); border: 1px solid var(--tv-borda);
border-radius: .7em; padding: .8em; display: flex; flex-direction: column; min-height: 0;
}
.tv-cal-semana {
display: grid; grid-template-columns: repeat(7, 1fr); gap: .35em;
margin-bottom: .35em; color: var(--tv-txt3); font-size: .85em;
text-align: center; text-transform: uppercase; letter-spacing: .06em;
}
.tv-cal-grade {
flex: 1; min-height: 0;
display: grid; grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(0, 1fr); gap: .35em;
}
.tv-dia {
border: 1px solid var(--tv-borda); border-radius: .45em;
padding: .3em .4em; display: flex; flex-direction: column;
background: rgba(255, 255, 255, .015); overflow: hidden;
}
.tv-dia.fora { border: none; background: none; }
.tv-dia.tem { background: var(--tv-super2); }
.tv-dia.perigo { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .4); }
.tv-dia.hoje { border-color: var(--tv-primaria); box-shadow: 0 0 0 2px rgba(250, 95, 70, .35); }
.tv-dia-n { font-size: 1.1em; font-weight: 700; color: var(--tv-txt2); }
.tv-dia.tem .tv-dia-n { color: var(--tv-txt); }
.tv-dia-tags { display: flex; gap: .3em; margin-top: auto; }
.tv-dia-tags b {
font-size: .95em; font-weight: 800; padding: 0 .35em; border-radius: .3em;
background: var(--tv-borda);
}
.tv-dia-tags b.ok { color: var(--tv-ok); }
.tv-dia-tags b.alerta { color: var(--tv-alerta); }
.tv-dia-tags b.perigo { color: #fff; background: var(--tv-perigo); }
.tv-dia small { font-size: .72em; color: var(--tv-txt3); }
/* ── Carteira por regime ── */
.tv-carteira {
flex: 1; min-height: 0;
display: grid; gap: 1.4em; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
align-items: center;
}
.tv-rosca-area { display: flex; flex-direction: column; align-items: center; gap: 1em; min-height: 0; }
.tv-rosca {
width: min(24vh, 100%); aspect-ratio: 1; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative; box-shadow: 0 0 3em rgba(99, 102, 241, .25);
}
.tv-rosca::after {
content: ''; position: absolute; inset: 22%;
border-radius: 50%; background: var(--tv-fundo);
}
.tv-rosca-centro { position: relative; z-index: 1; text-align: center; }
.tv-rosca-centro b { display: block; font-size: 2.8em; font-weight: 800; line-height: 1; }
.tv-rosca-centro span { font-size: .9em; color: var(--tv-txt2); }
.tv-mini-kpis { display: flex; gap: 1.6em; }
.tv-mini-kpis div { text-align: center; }
.tv-mini-kpis b { display: block; font-size: 1.7em; font-weight: 800; }
.tv-mini-kpis span { font-size: .85em; color: var(--tv-txt3); }
.tv-barras { display: flex; flex-direction: column; gap: .75em; min-height: 0; overflow: hidden; }
.tv-barras.compacto { gap: .45em; }
.tv-barra-item { min-width: 0; }
.tv-barra-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .22em; }
.tv-barra-cabeca strong { font-size: 1.1em; font-weight: 600; }
.tv-barra-cabeca strong i {
display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .5em;
}
.tv-barra-cabeca span { color: var(--tv-txt2); font-size: .95em; }
.tv-barra-cabeca span b { font-size: 1.2em; color: var(--tv-txt); font-weight: 800; }
/* ── Colunas (movimentação de RH) ── */
.tv-colunas { flex: 1; min-height: 0; display: flex; gap: .8em; align-items: flex-end; }
.tv-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35em; height: 100%; }
.tv-coluna-barras {
flex: 1; width: 100%; min-height: 0;
display: flex; align-items: flex-end; justify-content: center; gap: .3em;
}
.tv-coluna-barras div {
width: 40%; min-height: .3em; border-radius: .3em .3em 0 0;
position: relative; transition: height .6s ease;
}
.tv-coluna-barras .ok { background: linear-gradient(180deg, var(--tv-ok), #15803d); }
.tv-coluna-barras .perigo { background: linear-gradient(180deg, var(--tv-perigo), #9f1239); }
.tv-coluna-barras b {
position: absolute; top: -1.4em; left: 0; right: 0; text-align: center;
font-size: .85em; font-weight: 800; color: var(--tv-txt2);
}
.tv-coluna small { color: var(--tv-txt3); font-size: .85em; text-transform: capitalize; }
/* ── Tabela ── */
.tv-tabela { display: flex; flex-direction: column; gap: .25em; min-height: 0; overflow: hidden; }
.tv-tr {
display: grid; grid-template-columns: 2fr 2fr 1.2fr .9fr;
gap: .8em; align-items: center;
padding: .4em .7em; border-radius: .45em; background: var(--tv-super2);
}
.tv-tr.cabeca {
background: none; color: var(--tv-txt3); font-size: .85em;
text-transform: uppercase; letter-spacing: .06em; padding-bottom: 0;
}
.tv-tr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02em; }
.tv-tr strong { font-weight: 700; }
.tv-tr small { display: block; color: var(--tv-txt3); font-size: .8em; }
.tv-tr .tv-tag { justify-self: start; }
/* ── Notícias ── */
.tv-noticias {
flex: 1; min-height: 0;
display: grid; gap: .9em;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
}
.tv-noticia {
background: var(--tv-super); border: 1px solid var(--tv-borda);
border-radius: .7em; overflow: hidden;
display: flex; flex-direction: column;
}
.tv-noticia-img {
height: 38%; flex-shrink: 0;
background-size: cover; background-position: center; background-color: var(--tv-super2);
}
.tv-noticia-txt {
padding: .8em 1em; display: flex; flex-direction: column; gap: .3em;
min-height: 0; overflow: hidden;
}
.tv-noticia-data {
align-self: flex-start; font-size: .85em; font-weight: 700;
color: var(--tv-info); background: rgba(56, 189, 248, .12);
padding: .1em .6em; border-radius: 1em;
}
.tv-noticia strong { font-size: 1.2em; font-weight: 700; line-height: 1.25; }
.tv-noticia p { color: var(--tv-txt2); font-size: .92em; overflow: hidden; }
/* ── Notícia aberta: a matéria em corpo grande, em colunas ── */
.tv-artigo {
flex: 1; min-height: 0; display: flex; gap: 1.2em;
}
.tv-artigo-img {
width: 26%; flex-shrink: 0; border-radius: .7em;
background-size: cover; background-position: center; background-color: var(--tv-super);
}
.tv-artigo-corpo {
flex: 1; min-width: 0; min-height: 0; position: relative;
columns: 2; column-gap: 2em; column-rule: 1px solid var(--tv-borda);
font-size: 1.25em; line-height: 1.5; color: #dbe3ef;
overflow: hidden;
}
.tv-artigo-corpo.cortado::after {
content: 'matéria completa no blog do escritório';
position: absolute; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent, var(--tv-fundo) 30%);
padding: .2em 0 .2em 3em; font-size: .7em; color: var(--tv-txt3);
}
.tv-artigo-corpo p, .tv-artigo-corpo ul, .tv-artigo-corpo ol,
.tv-artigo-corpo blockquote, .tv-artigo-corpo table { margin-bottom: .7em; }
.tv-artigo-corpo h1, .tv-artigo-corpo h2, .tv-artigo-corpo h3, .tv-artigo-corpo h4 {
font-size: 1.15em; font-weight: 700; color: var(--tv-txt);
margin: .3em 0 .35em; break-after: avoid;
}
.tv-artigo-corpo strong, .tv-artigo-corpo b { color: #fff; }
.tv-artigo-corpo a { color: var(--tv-info); text-decoration: none; }
.tv-artigo-corpo ul, .tv-artigo-corpo ol { padding-left: 1.2em; }
.tv-artigo-corpo li { margin-bottom: .2em; }
.tv-artigo-corpo img { max-width: 100%; height: auto; border-radius: .4em; }
.tv-artigo-corpo table { width: 100%; border-collapse: collapse; font-size: .9em; }
.tv-artigo-corpo td, .tv-artigo-corpo th {
border: 1px solid var(--tv-borda); padding: .25em .5em; text-align: left;
}
.tv-artigo-carregando { color: var(--tv-txt3); font-style: italic; }
/* ── Rodapé e controles ── */
.tv-rodape {
display: flex; align-items: center; gap: 1.2em;
padding: .5em 1.6em .7em;
border-top: 1px solid var(--tv-borda);
background: rgba(10, 14, 24, .55);
}
.tv-pontos { display: flex; gap: .45em; flex: 1; }
.tv-ponto {
width: 2.2em; height: .35em; border: none; border-radius: 1em; padding: 0;
background: var(--tv-borda); transition: background .3s, width .3s;
}
.tv-ponto.ativo { background: var(--tv-primaria); width: 3.4em; }
.tv-status { color: var(--tv-txt3); font-size: .9em; white-space: nowrap; }
.tv-controles { display: flex; align-items: center; gap: .35em; opacity: 0; transition: opacity .25s; }
.tv.tv-mouse .tv-controles { opacity: 1; }
.tv-btn {
width: 2.1em; height: 2.1em; border-radius: .45em;
border: 1px solid var(--tv-borda); background: var(--tv-super2);
color: var(--tv-txt2); font-size: 1em; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.tv-btn:hover { background: var(--tv-borda); color: var(--tv-txt); }
.tv-btn.sair:hover{ background: var(--tv-perigo); color: #fff; border-color: var(--tv-perigo); }
.tv-btn-tempo {
color: var(--tv-txt2); font-size: .9em; min-width: 2.6em; text-align: center;
font-variant-numeric: tabular-nums;
}
/* Barra de tempo do slide */
.tv-barra { position: absolute; left: 0; right: 0; bottom: 0; height: .28em; background: var(--tv-borda); }
.tv-barra > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--tv-primaria), #ff8874); }
.tv.pausado .tv-barra > div { background: var(--tv-txt3); }
/* Telas menores (prévia no computador): menos colunas, tudo continua legível */
@media (max-width: 1100px) {
.tv-grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-duas, .tv-cal-area, .tv-carteira { grid-template-columns: minmax(0, 1fr); }
.tv-titulo { display: none; }
}
/* ── Mídias no mural: imagem, vídeo ou player ocupando o palco ── */
.tv-midia {
flex: 1; min-height: 0; position: relative;
border-radius: .7em; overflow: hidden; background: #000;
}
.tv-midia img, .tv-midia video, .tv-midia iframe {
width: 100%; height: 100%; display: block; border: 0;
}
.tv-midia.cobrir img, .tv-midia.cobrir video { object-fit: cover; }
.tv-midia.conter img, .tv-midia.conter video { object-fit: contain; }
.tv-midia-legenda {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1.6em 1.2em .8em;
background: linear-gradient(transparent, rgba(0, 0, 0, .8));
display: flex; flex-direction: column; gap: .1em;
}
.tv-midia-legenda strong { font-size: 1.6em; font-weight: 700; }
.tv-midia-legenda span { font-size: 1.05em; color: #cbd5e1; }
.tv-ponto.midia { background: #4b5563; }
.tv-ponto.midia.ativo { background: var(--tv-info); }
/* ── Tela de gestão das mídias (staff) ── */
.form-grade .campo-largo { grid-column: 1 / -1; }
.md-escolhas {
display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0;
}
.md-escolhas label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; color: var(--texto-2); font-weight: 500; margin: 0;
}
.md-escolhas input { width: auto; margin: 0; }
.md-zona-icone { font-size: 26px; }
.md-zona strong { display: block; margin-top: 4px; }
.md-zona small { display: block; color: var(--texto-3); margin-top: 3px; }
.md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.md-card {
display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden;
}
.md-card.inativa { opacity: .6; }
.md-previa {
position: relative; aspect-ratio: 16 / 9; background: var(--superficie-2);
}
.md-previa img, .md-previa video { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-embed {
height: 100%; display: flex; align-items: center; justify-content: center;
font-size: 34px; color: var(--texto-3);
}
.md-tipo {
position: absolute; top: 8px; left: 8px;
background: rgba(0, 0, 0, .6); color: #fff;
font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
}
.md-info { padding: 0 14px; display: flex; flex-direction: column; gap: 3px; }
.md-info strong { font-size: 15px; }
.md-info small { color: var(--texto-3); font-size: 12.5px; }
.md-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.md-acoes {
display: flex; gap: 6px; padding: 0 14px 14px; margin-top: auto;
border-top: 1px solid var(--borda); padding-top: 12px;
}
.md-acoes .btn[disabled] { opacity: .4; cursor: default; }
.md-acoes [data-edita] { margin-left: auto; }
/* ═══ Módulo Financeiro ═════════════════════════════════════
O fluxo de caixa é uma tabela densa que se lê de cima para baixo, um dia de
cada vez. O que precisa ficar óbvio à distância: o que já foi pago (some
para o fundo), o que está vencido (grita) e onde o saldo fica negativo. */
/* ── Primeiro acesso e escolha de livro ── */
.fin-portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.fin-porta { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.fin-porta h2 { margin: 0; }
.fin-porta p { color: var(--texto-2); font-size: 13.5px; line-height: 1.6; flex: 1; }
.fin-porta .btn { margin-top: 6px; }
.fin-porta-icone { font-size: 38px; line-height: 1; }
.fin-portas-modal .fin-porta {
cursor: pointer; border: 1px solid var(--borda); align-items: center;
font: inherit; color: inherit; transition: border-color .15s, transform .15s;
}
.fin-portas-modal .fin-porta:hover:not([disabled]) { border-color: var(--primaria); transform: translateY(-2px); }
.fin-portas-modal .fin-porta[disabled] { opacity: .45; cursor: default; }
.fin-portas-modal .fin-porta small { color: var(--texto-3); }
.fin-topo-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fin-select { padding: 8px 10px; font-size: 13.5px; max-width: 260px; }
/* ── Barra de mês ── */
.fin-mes-barra {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.fin-mes-nav, .fin-mes-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fin-mes-nav input[type="month"] { padding: 6px 9px; font-size: 13px; }
.fin-mes-nome { font-size: 15px; text-transform: capitalize; color: var(--texto-2); }
/* ── Fluxo de caixa ── */
.fin-fluxo-cabeca {
display: flex; align-items: baseline;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
/* O título fica à esquerda; interruptor e abertura vão para a direita. */
.fin-fluxo-cabeca h2 { margin-right: auto; }
.fin-abertura { font-size: 13px; color: var(--texto-2); }
.fin-abertura strong { color: var(--texto); margin-left: 4px; }
.tabela.fin-fluxo td { padding: 9px 12px; }
.fin-c-check { width: 34px; text-align: center; }
.fin-c-acoes { width: 1%; white-space: nowrap; text-align: right; }
/* Abre o dia: é o que transforma a lista numa agenda. */
tr.fin-dia > td {
background: var(--superficie-2); font-size: 12.5px; color: var(--texto-2);
padding: 6px 12px; text-transform: capitalize;
}
tr.fin-dia.passado > td { color: var(--texto-3); }
tr.fin-dia.hoje > td { background: var(--primaria-suave); color: var(--primaria); }
.fin-dia-qtd { margin-left: 8px; color: var(--texto-3); font-size: 11.5px; text-transform: none; }
/* FECHA o dia, com os totais. Fundo transparente e um traço embaixo: é o
rodapé de um bloco, não outro cabeçalho — se as duas linhas tivessem o mesmo
peso, a lista viraria uma sanfona de faixas cinzas e nenhuma delas diria
onde um dia acaba e o outro começa. Distribui em flex porque o layout SEM
saldo põe até quatro números aqui. */
tr.fin-dia-fim > td {
background: transparent; font-size: 12px;
padding: 5px 12px 9px; border-bottom: 2px solid var(--borda);
}
tr.fin-dia-fim:last-child > td { border-bottom: none; }
.fin-dia-cab {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; flex-wrap: wrap;
}
.fin-dia-rot { color: var(--texto-3); font-size: 11.5px; }
.fin-dia-tot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.fin-dia-liq { font-variant-numeric: tabular-nums; }
.fin-dia-chip {
font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 20px;
white-space: nowrap; font-variant-numeric: tabular-nums;
background: var(--superficie); border: 1px solid var(--borda);
}
.fin-dia-chip.ok { color: var(--ok); }
.fin-dia-chip.aberto { color: var(--alerta); }
tr.fin-dia-fim.hoje .fin-dia-chip { border-color: var(--primaria-suave); }
.fin-ver-saldo { font-size: 12.5px; color: var(--texto-2); font-weight: 500; }
tr.fin-linha.paga > td { opacity: .58; }
tr.fin-linha.paga strong { text-decoration: line-through; text-decoration-thickness: 1px; }
tr.fin-linha.atrasada > td { background: var(--perigo-suave); }
tr.fin-linha.atrasada:hover > td { background: var(--perigo-suave); filter: brightness(.98); }
.fin-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--ok); padding: 0; }
.fin-check:disabled { cursor: default; }
.fin-v.entra { color: var(--ok); font-weight: 600; }
.fin-v.sai { color: var(--perigo); font-weight: 600; }
.fin-saldo { color: var(--texto-2); }
.fin-saldo.negativo { color: var(--perigo); font-weight: 700; }
.fin-parcela {
font-size: 11px; color: var(--texto-3); background: var(--superficie-2);
padding: 1px 6px; border-radius: 20px; margin-left: 6px;
}
.fin-obs { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
/* Etiqueta de categoria: a cor é da própria categoria, via --c */
.fin-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; padding: 2px 9px; border-radius: 20px;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
white-space: nowrap;
}
.fin-chip-vazio { --c: var(--texto-3); font-style: italic; }
/* Botõezinhos de ação da linha: ‹ › mover, editar, excluir */
.fin-ic {
background: transparent; border: 1px solid transparent; border-radius: 7px;
cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 7px;
color: var(--texto-2); transition: background .12s, color .12s, border-color .12s;
}
.fin-ic:hover { background: var(--superficie-2); border-color: var(--borda); color: var(--texto); }
.fin-ic.perigo:hover { background: var(--perigo-suave); color: var(--perigo); border-color: transparent; }
.fin-vazio { text-align: center; color: var(--texto-3); padding: 26px 14px; font-size: 13.5px; }
.fin-ajuda { color: var(--texto-2); font-size: 13px; line-height: 1.6; margin: 6px 0 12px; }
.fin-inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.fin-inline input[type="checkbox"] { width: auto; margin: 0; }
.fin-atalhos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.fin-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.fin-repetir { border-top: 1px solid var(--borda); margin-top: 12px; padding-top: 12px; }
.fin-repetir small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 6px; line-height: 1.55; }
.fin-contador { color: var(--texto-3); font-weight: 500; font-size: 13px; }
tr.fin-atual > td { background: var(--primaria-suave); font-weight: 600; }
tr.fin-info > td { color: var(--texto-3); }
/* ── Gráficos ── */
.fin-graf { position: relative; height: 260px; }
/* ── Orçamento ── */
.fin-orc-lista { display: flex; flex-direction: column; gap: 4px; }
.fin-orc-item {
display: grid; grid-template-columns: minmax(150px, 1.1fr) 150px 2fr;
gap: 14px; align-items: center; padding: 10px 0;
border-bottom: 1px solid var(--borda);
}
.fin-orc-item:last-child { border-bottom: none; }
.fin-orc-campo { position: relative; }
.fin-orc-campo input { width: 100%; padding-left: 34px; text-align: right; }
.fin-prefixo {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--texto-3); font-size: 12.5px; pointer-events: none;
}
.fin-orc-barra .progresso { margin: 0 0 4px; }
.fin-orc-barra small { color: var(--texto-3); font-size: 12px; }
.fin-estouro { color: var(--perigo); margin-left: 6px; }
/* ── Metas ── */
.fin-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.fin-meta { display: flex; flex-direction: column; gap: 8px; }
.fin-meta.concluida { opacity: .72; }
.fin-meta-cabeca { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fin-meta-cabeca h3 { font-size: 15px; font-weight: 700; margin: 0; }
.fin-meta-cabeca small { color: var(--texto-3); font-size: 12px; }
.fin-meta-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.fin-meta-valor { display: flex; align-items: baseline; gap: 7px; }
.fin-meta-valor strong { font-size: 22px; font-weight: 800; }
.fin-meta-valor span { color: var(--texto-3); font-size: 12.5px; }
.fin-meta-rodape { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-2); }
/* ── DRE ── */
.tabela.fin-dre td { padding: 8px 12px; }
.tabela.fin-dre tr.fin-dre-forte > td { font-size: 14px; }
.tabela.fin-dre tr.fin-dre-sub > td {
background: var(--superficie-2); border-top: 1px solid var(--borda); font-weight: 600;
}
.tabela.fin-dre tr.fin-dre-total > td {
background: var(--primaria-suave); font-size: 15px; font-weight: 800;
border-top: 2px solid var(--primaria);
}
.tabela.fin-dre tr.fin-dre-total.negativo > td { background: var(--perigo-suave); border-top-color: var(--perigo); }
.tabela.fin-dre tr.fin-dre-det > td { padding: 0 12px 8px 26px; background: transparent; }
.tabela.fin-dre tr.fin-dre-det summary {
cursor: pointer; font-size: 12px; color: var(--texto-3); padding: 3px 0;
}
.tabela.fin-dre tr.fin-dre-det .tabela td { font-size: 12.5px; padding: 4px 8px; border: none; }
.fin-pc { color: var(--texto-3); font-size: 12px; }
.fin-dre-margem { margin-top: 12px; font-size: 13.5px; color: var(--texto-2); }
.fin-dre-margem strong { font-size: 16px; margin-left: 6px; }
.fin-dre-margem .entra { color: var(--ok); }
.fin-dre-margem .sai { color: var(--perigo); }
/* ── Compartilhamento ── */
.fin-acessos { display: flex; flex-direction: column; gap: 2px; }
.fin-acesso {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--borda);
}
.fin-acesso:last-child { border-bottom: none; }
.fin-acesso small { display: block; color: var(--texto-3); font-size: 12px; }
.fin-acesso-cx { display: flex; gap: 6px; align-items: center; }
.fin-compartilhar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fin-compartilhar .fin-select:first-child { flex: 1; min-width: 200px; max-width: none; }
/* ── Telas estreitas ──
No celular a tabela do fluxo rola na horizontal (tabela-wrap já faz isso),
mas o orçamento vira uma coluna: três colunas de 150px não cabem. */
@media (max-width: 760px) {
.fin-orc-item { grid-template-columns: 1fr; gap: 8px; }
.fin-mes-barra { align-items: stretch; }
.fin-mes-acoes { justify-content: flex-end; }
.fin-select { max-width: 100%; }
}
/* ── Importar colando (fluxo de caixa) ── */
.fin-imp-layout {
display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px;
font-size: 12px; font-family: ui-monospace, monospace;
}
.fin-imp-layout span {
background: var(--superficie-2); color: var(--texto-2);
border: 1px solid var(--borda); border-radius: 6px; padding: 3px 10px;
}
.fin-imp-layout span.opc { border-style: dashed; color: var(--texto-3); }
.fin-imp-texto {
width: 100%; font-family: ui-monospace, monospace; font-size: 12.5px;
line-height: 1.65; white-space: pre; overflow-wrap: normal; overflow-x: auto;
resize: vertical;
}
.fin-imp-resumo {
display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
margin: 14px 0 8px; font-size: 13px; color: var(--texto-2);
}
.fin-imp-resumo .entra { color: var(--ok); font-weight: 600; }
.fin-imp-resumo .sai { color: var(--perigo); font-weight: 600; }
.fin-imp-resumo .alerta { color: var(--alerta); font-weight: 600; }
/* A prévia rola sozinha: uma colagem de 300 linhas não pode empurrar os
botões de confirmar para fora da tela. */
.fin-imp-tabela { max-height: 46vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; }
.fin-imp-tabela .tabela th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.fin-imp-tabela .tabela td { padding: 7px 10px; font-size: 12.5px; }
tr.fin-imp-erro > td { background: var(--perigo-suave); }
tr.fin-imp-dup > td { opacity: .55; }
.fin-ajuda .entra { color: var(--ok); }
.fin-ajuda .sai { color: var(--perigo); }
.fin-ajuda code {
background: var(--superficie-2); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, monospace; font-size: 12px;
}
/* ── Contas do DRE (plano de contas editável, migração 42) ── */
.tabela.fin-dre tr.fin-dre-secao > td { font-weight: 600; }
/* A conta recua sob a seção: o recuo é o que diz "isto compõe aquilo".
Sem ele, seção e conta viram duas linhas de mesmo peso e o subtotal
parece estar sendo somado duas vezes. */
.tabela.fin-dre tr.fin-dre-conta > td:first-child { padding-left: 30px; color: var(--texto-2); }
.tabela.fin-dre tr.fin-dre-conta > td { font-size: 13px; }
.fin-contas-secao { padding: 14px 16px; margin-bottom: 12px; }
.fin-contas-secao h3 {
font-size: 13px; font-weight: 700; margin: 0 0 8px;
display: flex; align-items: baseline; gap: 8px;
}
.fin-conta-linha {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px;
}
.fin-conta-linha:last-child { border-bottom: none; }
.fin-conta-linha.inativa { opacity: .55; }
.fin-conta-nome { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fin-conta-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.fin-conta-acoes .fin-ic[disabled] { opacity: .25; cursor: default; }
.fin-conta-acoes .fin-ic[disabled]:hover { background: transparent; border-color: transparent; }
/* ── Extrato bancário (migração 43) ── */
.tabela.fin-extrato td { padding: 8px 12px; }
/* Histórico do banco: monoespaçado porque é texto de máquina, cheio de
número e sigla — em fonte proporcional vira um borrão. */
.fin-ext-hist {
font-family: ui-monospace, monospace; font-size: 12px; color: var(--texto-2);
}
tr.fin-ext-aberto > td { background: var(--alerta-suave); }
tr.fin-ext-aberto:hover > td { background: var(--alerta-suave); filter: brightness(.98); }
select.fin-ext-cat { padding: 5px 8px; font-size: 12.5px; max-width: 210px; min-width: 150px; }
select.fin-ext-cat:disabled { opacity: .5; }
.fin-ext-arquivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fin-ext-arquivo .fin-ajuda { margin: 0; }
/* Variação no DRE: o número já vem com sinal, então a cor basta —
negativo é sempre a má notícia (recebeu menos ou gastou mais). */
.tabela.fin-dre .fin-v small { font-weight: 400; opacity: .75; margin-left: 3px; }
/* ═══ Meu espaço — o portal do funcionário (assets/eu.js) ══════════════════
Desenhado para o celular primeiro: uma coluna, botões que cabem no dedo. */
.eu-titulo { flex-wrap: wrap; gap: 10px; }
.eu-acoes { display: flex; gap: 8px; align-items: center; }
.eu-sel { min-width: 160px; }
.eu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.eu-card { padding: 18px; }
.eu-card h2 { font-size: 16px; margin: 0; }
.eu-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.eu-card-ponto { grid-column: 1 / -1; }
.eu-destaque { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 2px; }
.eu-h2 { font-size: 15px; padding: 10px 12px 4px; margin: 0; }
.eu-h4 { font-size: 13px; color: var(--texto-2); margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .4px; }
.eu-ano { font-size: 15px; color: var(--texto-2); margin: 18px 0 8px; }
.eu-lista { padding: 6px 12px; }
/* Os botões de bater ponto: grandes, um toque, sem mira fina. */
.eu-relogio { font-size: 40px; font-weight: 800; text-align: center; letter-spacing: -1px; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.eu-bater-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eu-bater {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
min-height: 84px; border-radius: 14px; border: 2px solid var(--borda);
background: var(--superficie-2); color: var(--texto); font-weight: 700; font-size: 15px;
transition: transform .08s, filter .12s;
}
.eu-bater:active:not([disabled]) { transform: scale(.97); }
.eu-bater[disabled] { opacity: .38; cursor: not-allowed; }
.eu-bater-proxima:not([disabled]) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 12%, var(--superficie)); }
.eu-bater-icone { font-size: 26px; line-height: 1; }
.eu-bater-rotulo { line-height: 1.15; text-align: center; }
.eu-digitar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); margin-top: 12px; }
.eu-digitar .pt-hora { width: 90px; font-size: 16px; }
.eu-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.eu-totais > div { display: flex; flex-direction: column; gap: 2px; }
.eu-totais span { font-size: 12px; color: var(--texto-2); }
.eu-totais b { font-size: 18px; }
/* A lista de dias do cartão */
.eu-dia { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
.eu-dia:last-child { border-bottom: none; }
.eu-dia.click { cursor: pointer; }
.eu-dia.click:hover { background: var(--superficie-2); }
.eu-dia-fds { background: color-mix(in srgb, var(--texto-2) 6%, transparent); }
.eu-dia-hoje { box-shadow: inset 3px 0 0 var(--primaria); }
.eu-dia-data { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.eu-dia-data b { font-size: 18px; line-height: 1; }
.eu-dia-data small { color: var(--texto-2); font-size: 11px; text-transform: uppercase; }
.eu-dia-corpo { flex: 1; min-width: 0; }
.eu-dia-marcas { font-variant-numeric: tabular-nums; font-size: 14.5px; }
.eu-dia-sub { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; }
.eu-dia-seta { color: var(--texto-2); font-size: 22px; }
.eu-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Holerites */
.eu-hol { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
.eu-hol:last-child { border-bottom: none; }
.eu-hol-mes, .eu-hol-valor { display: flex; flex-direction: column; }
.eu-hol-valor { text-align: right; }
.eu-hol small { color: var(--texto-2); font-size: 12px; }
.eu-hol-acoes { grid-column: 1 / -1; display: flex; gap: 8px; }
/* Mural */
.eu-midias, .eu-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.eu-midia { padding: 0; overflow: hidden; }
.eu-midia img, .eu-midia video, .eu-midia iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 0; }
.eu-midia-legenda { padding: 10px 12px; font-size: 13px; }
.eu-noticia { display: block; padding: 14px; text-decoration: none; color: inherit; }
.eu-noticia:hover { filter: brightness(1.03); }
.eu-noticia p { margin: 6px 0; }
@media (max-width: 560px) {
.eu-cards { grid-template-columns: 1fr; }
.eu-relogio { font-size: 34px; }
.eu-hol-acoes .btn { flex: 1; justify-content: center; }
}
/* ═══ Meu ponto — o modal de bater e a localização ═══════════════════════════ */
.eu-local { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--texto-2); }
.eu-local-modal { justify-content: center; text-align: center; margin: 14px 0 18px; }
.eu-modal-bater { text-align: center; padding: 6px 0 2px; }
.eu-modal-tipo { font-size: 20px; font-weight: 800; }
.eu-modal-data { color: var(--texto-2); font-size: 13px; text-transform: capitalize; margin-top: 2px; }
.eu-hora-ajuste { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.eu-hora-grande {
width: 190px !important; text-align: center; font-size: 52px; font-weight: 800; letter-spacing: -1px;
font-variant-numeric: tabular-nums; padding: 6px 0; border-radius: 14px;
animation: eu-pulsa-borda 2.4s ease-in-out infinite;
}
.eu-seta {
width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--borda);
background: var(--superficie-2); color: var(--texto); font-size: 18px; font-weight: 800;
transition: transform .08s, background .12s;
}
.eu-seta:hover { background: color-mix(in srgb, var(--primaria) 12%, var(--superficie)); }
.eu-seta:active { transform: scale(.92); }
.eu-bater-ok { min-height: 58px; font-size: 18px; margin-top: 8px; animation: eu-entra .25s ease both; }
.eu-modal-bater .btn-largo + .btn-largo { margin-top: 8px; }
/* O sucesso: o círculo se desenha, o check aparece, e o modal se fecha sozinho */
.eu-sucesso { padding: 26px 0 10px; animation: eu-entra .2s ease both; }
.eu-sucesso svg { width: 96px; height: 96px; display: block; margin: 0 auto 12px; }
.eu-sucesso circle {
fill: none; stroke: var(--ok, #2e9e5b); stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 151; stroke-dashoffset: 151; animation: eu-risco .6s ease-out forwards;
}
.eu-sucesso path {
fill: none; stroke: var(--ok, #2e9e5b); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 40; stroke-dashoffset: 40; animation: eu-risco .35s .45s ease-out forwards;
}
.eu-sucesso-txt { font-size: 20px; font-weight: 800; animation: eu-entra .3s .6s ease both; }
@keyframes eu-risco { to { stroke-dashoffset: 0; } }
@keyframes eu-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes eu-pulsa-borda { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) {
.eu-hora-grande, .eu-bater-ok, .eu-sucesso, .eu-sucesso circle, .eu-sucesso path, .eu-sucesso-txt { animation: none; }
.eu-sucesso circle, .eu-sucesso path { stroke-dashoffset: 0; }
}
/* Auditoria (tela da empresa) */
.pt-aud td { vertical-align: top; font-size: 13px; }
.pt-aud a { text-decoration: underline dotted; }
.nowrap { white-space: nowrap; }
/* Meus holerites: um bloco por competência, um recibo por processo */
.eu-comp { margin-bottom: 12px; }
.eu-comp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 4px 4px; border-bottom: 1px solid var(--borda); }
.eu-comp-topo b { font-size: 15px; text-transform: capitalize; }
/* ═══ Mural do RH (portal do funcionário) ════════════════════════════════════ */
.eu-card-mural { grid-column: 1 / -1; }
.eu-recado { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.eu-recado:last-of-type { border-bottom: none; }
.eu-recado p { margin: 4px 0; font-size: 14px; }
.eu-recado-fixo { background: color-mix(in srgb, var(--primaria) 6%, transparent); margin: 0 -8px; padding: 10px 8px; border-radius: 10px; border-bottom: none; }
.eu-aniv { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borda); }
.eu-aniv-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* ═══ Carteira digital — o espelho no formato da CTPS ════════════════════════ */
.ctps { background: #fff; color: #1f2937; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-alta); max-width: 720px; margin: 0 auto 18px; }
/* O brasão no avatar é o recorte da capa da CTPS Digital
(assets/carteira-brasao.jpg, 200×200, gerado de testes/carteira.jpg). */
.ctps-topo { display: flex; align-items: center; gap: 16px; background: #123c7a; color: #fff; padding: 18px 22px; }
.ctps-emblema { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: #0b2a5e; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.ctps-emblema img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctps-titulo { font-size: 22px; font-weight: 700; letter-spacing: .2px; }
.ctps-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.ctps-corpo { padding: 18px 22px 8px; }
.ctps-corpo h2 { color: #1e88e5; font-weight: 500; font-size: 20px; margin: 18px 0 8px; }
.ctps-secao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ctps-secao-topo h2 { margin-top: 0; }
.ctps-secao-topo span { font-size: 13px; color: #374151; }
.ctps-linha { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.ctps-linha span { color: #4b5563; }
.ctps-linha b { font-weight: 600; word-break: break-word; }
.ctps-contrato { border-left: 3px solid #123c7a; padding-left: 12px; margin: 6px 0 4px; }
.ctps-contrato-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.ctps-bolinha { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; display: inline-block; }
.ctps-bolinha.ctps-aberto { background: #16a34a; }
.ctps-rodape { font-size: 11.5px; color: #6b7280; padding: 12px 22px 16px; border-top: 1px solid #e5e7eb; }
@media print {
.sidebar, .topo, .titulo-secao .eu-acoes, .eu-ano, .eu-card, .toasts, .modal-fundo { display: none !important; }
.principal, .conteudo { margin: 0 !important; padding: 0 !important; }
.ctps { box-shadow: none; border: 1px solid #ccc; max-width: none; }
}
/* Atestado anexado ao dia */
.pt-tipo-cel { white-space: nowrap; }
.pt-clip { border: 1px solid var(--borda); background: var(--superficie-2); border-radius: 8px; padding: 2px 6px; margin-left: 4px; font-size: 12px; cursor: pointer; }
.pt-clip-tem { border-color: var(--primaria); color: var(--primaria); font-weight: 700; }
.eu-atestado { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; }
.eu-anexo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; }
.eu-anexar { display: block; margin-top: 8px; font-weight: 600; font-size: 13px; }
.eu-anexar input { margin-top: 4px; }
/* Férias: o × dentro da chip marcada */
.imp-chip .fe-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
background: color-mix(in srgb, currentColor 18%, transparent); font-size: 13px; line-height: 1; }
.imp-chip.ativo:hover .fe-x { background: color-mix(in srgb, currentColor 32%, transparent); }
/* Tags das empresas (Configurações → Empresas) */
.ce-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.ce-tags .tag { font-size: 11px; }
/* Lápis do WhatsApp na linha da empresa (emissão de guias). O `.pt-nome` é
flex com `overflow:hidden` e quem cede é o nome — o botão tem tamanho fixo. */
.pt-nome > .gd-cel { flex: none; padding: 0 5px; line-height: 1.4; opacity: .55; }
.pt-nome > .gd-cel:hover { opacity: 1; }
.pt-lista td > .sub { font-size: 11.5px; margin-top: 2px; }
/* ── Caixa Postal RFB ────────────────────────────────────── */
.cp-nao-lida td.cp-assunto { font-weight: 700; }
.tabela tr.cp-msg { cursor: pointer; }
.tabela tr.cp-msg td.cp-td-chk { cursor: default; }
.cp-so { display: inline-flex; gap: 6px; align-items: center; padding-left: 10px; border-left: 1px solid var(--borda); }
.cp-barra-so { align-items: center; margin-bottom: 8px; }
.tabela tr.cp-msg:hover td { background: var(--superficie-2); }
.cp-novo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primaria); margin-right: 6px; vertical-align: middle; }
.cp-erro { color: var(--perigo); font-size: 12px; margin-top: 3px; max-width: 360px; white-space: normal; }
.tabela-detalhe { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tabela-detalhe th { text-align: left; white-space: nowrap; padding-right: 14px; color: var(--texto-2); font-weight: 600; }
.tabela-detalhe th, .tabela-detalhe td { padding: 5px 0; border-bottom: 1px solid var(--borda); vertical-align: top; }
.cp-corpo { max-height: 50vh; overflow: auto; padding: 14px 16px; background: var(--superficie-2); border-radius: 8px; font-size: 13.5px; line-height: 1.55; white-space: normal; word-break: break-word; }
.cp-corpo p { margin: 0 0 8px; }
.cp-corpo table { border-collapse: collapse; margin: 8px 0; }
.cp-corpo td, .cp-corpo th { border: 1px solid var(--borda); padding: 4px 8px; }
.cp-corpo a { color: var(--primaria); text-decoration: underline; }
/* ── Simples — Opção ─────────────────────────────────────── */
.so-obs { max-width: 260px; white-space: normal; font-size: 12.5px; color: var(--texto-2); }
.so-obs a, .so-hist, .so-remover { text-decoration: none; margin-left: 4px; }
select.so-sit { font-size: 12px; padding: 3px 6px; }
/* ── e-CAC · SITFIS ──────────────────────────────────────── */
.sf-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; }
.sf-mini a { text-decoration: none; color: var(--texto-2); white-space: nowrap; }
.sf-mini a:hover { color: var(--primaria); }
.sf-cat { display: inline-block; font-size: 12px; white-space: nowrap; padding: 2px 8px; border-radius: 12px; background: var(--superficie-2); color: var(--texto-2); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.sf-chip { border: 1px solid var(--borda); background: transparent; color: var(--texto-2); border-radius: 16px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.sf-chip.on { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); font-weight: 700; }
.tabela tr.sf-item { cursor: pointer; }
.tabela tr.sf-item:hover td { background: var(--superficie-2); }
.tabela tr.sf-susp td { opacity: .78; }
.sf-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; font-size: 13px; margin: 6px 0; }
.sf-org { font-size: 14px; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--borda); }
.sf-sec { font-weight: 700; font-size: 13px; margin: 10px 0 4px; }
.sf-tab-det td { font-size: 12.5px; }
/* ── e-Processos ─────────────────────────────────────────── */
.tabela tr.ep-item { cursor: pointer; }
.tabela tr.ep-item:hover td { background: var(--superficie-2); }
.tabela tr.ep-novo td { font-weight: 600; }
.tabela tr.ep-sumiu td { opacity: .7; }
/* Emissão de guias · Débitos e-CAC: linha que não vai ao SICALC (Simples, MEI,
sem dados) fica visível — é informação — mas apagada, sem botão. */
.pt-lista tr.gd-ecac-fora td { opacity: .62; }
.pt-lista tr.gd-ecac-fora td .tag { opacity: 1; }