/* ============================================================
SistemaRH - Brand: Dark Navy + Turquoise + Silver Metallic
============================================================ */
/* FONTES - rede de seguranca para as paginas que NAO estendem
`base.html` (login, cadastro, landing, termos, privacidade,
contacto, redefinir/esqueci senha, MFA): essas nao tem o ``
do Google Fonts e so' recebem esta folha.
O `base.html` pede as duas fontes num unico ``, mais rapido
(o `@import` bloqueia a descoberta da folha ate Google responder) -
aqui ficam para que nenhuma pagina fique sem a fonte. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root {
--navy: #0A1F3F; --navy-light: #132E5B; --navy-dark: #06122B;
--turquoise: #00B4D8; --turquoise-light: #48CAE4; --turquoise-dark: #0096B0;
--silver: #C0C8D0; --silver-light: #E0E4E8; --silver-dark: #8A94A0; --white: #FFFFFF;
--bg-body: #F8FAFC; --bg-sidebar: linear-gradient(180deg, #0A1F3F 0%, #06122B 100%);
--bg-topbar: #FFFFFF; --bg-card: #FFFFFF; --bg-hover: #F0F4FF; --bg-active: #00B4D8;
--text-primary: #1A2332; --text-secondary: #5A6878; --text-muted: #64707D; --text-light: #FFFFFF;
/* Escala Slate: a superficie neutra da aplicacao e os tres tons de
tinta que as tabelas usam - cabecalho (500), celula (700) e
fundo (50). Sao as tres cores que fazem o visual premium. */
--slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
--text-thead: #475569; --text-cell: #334155; --text-muted-slate: #64748B;
--border-color: #E2E8F0; --border-radius: 12px; --sidebar-width: 260px; --topbar-height: 64px;
--accent-blue: #00B4D8; --accent-blue-hover: #0096B0;
--accent-success: #10B981; --accent-warning: #F59E0B; --accent-danger: #EF4444; --accent-info: #00B4D8;
--shadow-sm: 0 1px 3px rgba(10,31,63,0.08);
--shadow-md: 0 4px 16px rgba(10,31,63,0.12);
--shadow-lg: 0 8px 32px rgba(10,31,63,0.16);
--transition-speed: 0.25s;
--bs-table-hover-bg: #F8FAFC;
--bs-table-hover-color: #334155;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh;font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background-color:var(--bg-body);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* TITULOS: Plus Jakarta Sans.
A interface fica em Inter (numeros alinhados em tabelas e KPI) e
so' a hierarquia - titulos de pagina, de cartao e de bloco - passa
para a Plus Jakarta Sans. A forma mais aberta dela da a sensacao de
produto SaaS sem trocar a fonte de todo o texto corrido. */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title,.modal-title,.topbar-title,.page-title,.lp-hero h1,.rh-auth__headline{font-family:'Plus Jakarta Sans','Inter',-apple-system,'Segoe UI',system-ui,sans-serif;letter-spacing:-0.015em}
.app-wrapper{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--bg-sidebar);display:flex;flex-direction:column;z-index:1040;transition:transform var(--transition-speed) ease;overflow-y:auto;overflow-x:hidden;border-right:none;box-shadow:4px 0 24px rgba(10,31,63,0.15)}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.sidebar-logo{display:flex;align-items:center;gap:12px;padding:24px 20px 16px;font-size:1.2rem;font-weight:800;color:var(--white)}
.sidebar-logo .logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--turquoise)0%,var(--navy-light)100%);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--white);flex-shrink:0;box-shadow:0 2px 8px rgba(0,180,216,0.3)}
.sidebar-brand{background:linear-gradient(135deg,var(--white)0%,var(--turquoise-light)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
.sidebar-brand-sub{font-size:0.65rem;font-weight:400;color:rgba(255,255,255,0.5);display:block;-webkit-text-fill-color:rgba(255,255,255,0.5)}
.sidebar-divider{margin:4px 16px;border-color:rgba(255,255,255,0.08);opacity:1}
.sidebar-nav{flex:1;padding:8px 12px}
.sidebar-nav .nav{gap:2px}
.sidebar-link{display:flex!important;align-items:center;gap:12px;padding:9px 14px!important;border-radius:8px;color:rgba(255,255,255,0.7)!important;font-size:13px;font-weight:500;transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease;text-decoration:none;outline:none}
.sidebar-link:focus-visible{box-shadow:inset 0 0 0 2px var(--turquoise-light)}
.sidebar-link i{width:20px;text-align:center;font-size:1rem;flex-shrink:0;color:rgba(255,255,255,0.55)}
.sidebar-link:hover{background:rgba(255,255,255,0.12);color:#FFFFFF!important}
.sidebar-link:hover i{color:var(--turquoise-light)}
/* ACTIVE: fundo quase transparente, texto branco e filete de 3px. A pilula
turquesa gritava por atencao numa lista de 29 itens; aqui o unico sinal
de que estamos na pagina certa e' o filete a esquerda. */
.sidebar-link.active{background:rgba(255,255,255,.06)!important;color:#FFFFFF!important;box-shadow:none;font-weight:500;border-left:3px solid var(--turquoise);padding-left:11px!important}
.sidebar-link.active i{color:var(--turquoise-light)}
.sidebar-link.active span{font-weight:600}
.sidebar-footer{padding:16px 20px;text-align:center}
.main-area{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100vh;width:calc(100% - var(--sidebar-width))}
.topbar{position:sticky;top:0;z-index:1030;display:flex;align-items:center;justify-content:space-between;height:var(--topbar-height);padding:0 28px;background:var(--bg-topbar);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm)}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-size:1.1rem;font-weight:600;color:var(--text-primary)}
.topbar-title i{color:var(--turquoise)}
.topbar-right{display:flex;align-items:center;gap:8px}
.connection-status{display:flex;align-items:center;gap:6px;cursor:default}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;transition:all 0.3s}
.status-online{background-color:var(--accent-success);box-shadow:0 0 8px rgba(16,185,129,0.5)}
.status-offline{background-color:var(--accent-danger);box-shadow:0 0 8px rgba(239,68,68,0.5)}
.flash-container{padding:16px 28px 0}
.flash-container .alert{margin-bottom:8px;border:none;border-radius:var(--border-radius);font-size:0.88rem;box-shadow:var(--shadow-sm)}
.content{flex:1;padding:28px;background:var(--slate-50)}
.card{border:1px solid var(--slate-200);border-radius:12px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.05),0 1px 2px -1px rgba(0,0,0,0.05);background:var(--bg-card);transition:transform 0.2s ease,box-shadow 0.2s ease}
.card-header{background:transparent;border-bottom:1px solid var(--border-color);padding:16px 24px;font-weight:600}
.card-body{padding:24px}
/* Elevacao nos cartoes que SAO um alvo (KPI com link esticado, checklist,
atalhos). O repouso e' plano; o hover levanta 2 px e abre a sombra.
Quem nao e' clicavel nao ganha este efeito. */
.dashboard-card{overflow:hidden}
.card-kpi{cursor:pointer}
.card-kpi:hover,.dashboard-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.card-value{font-size:2rem;font-weight:700}
.card-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px}
/* O icone do KPI: um disco pastel quadrado, do mesmo tamanho em todos
os cartoes para a linha de valores ficar alinhada. */
.card-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;flex-shrink:0}
.text-accent-blue{color:#0284C7}
/* CABECALHO DE BOAS-VINDAS (dashboard) -----------------------------------
A primeira coisa que o utilizador ve ao abrir a aplicacao. Sem ele,
a pagina comeca logo numa lista de indicadores e nao ha nenhum
ponto de partida nem saudacao.
O titulo usa a Plus Jakarta Sans herdada dos titulos e o emoji e'
isolado num ``: o leitor de ecra' le "Ola, Ana" e
nao "Ola, Ana, sinal de mao" - a imagem ja diz o resto.
Em ecra estreito os dois blocos empilham: o nome da empresa passa
para baixo da saudacao em vez de ser espremido ao lado dela. */
.dashboard-welcome{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.dashboard-welcome__titulo{font-size:1.25rem;font-weight:700;color:#1E293B;line-height:1.3;margin:0}
.dashboard-welcome__subtitulo{font-size:0.875rem;color:#64748B;line-height:1.5;margin:0}
.dashboard-welcome__empresa{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:#64748B;background:var(--slate-100);border:1px solid var(--slate-200);border-radius:9999px;padding:.35rem .85rem;white-space:nowrap}
.dashboard-welcome__empresa strong{color:#1E293B;font-weight:600}
.dashboard-welcome__empresa i{color:#0284C7}
@media(max-width:575.98px){.dashboard-welcome{align-items:flex-start}.dashboard-welcome__empresa{width:100%;justify-content:center;white-space:normal}}
/* BOTOES DA BARRA SUPERIOR ----------------------------------------------
Os botoes da barra (Selecionar empresa, Ajuda, Pesquisa, sino) usavam
as variantes do Bootstrap, cada uma com a sua cor: o de empresa era
turquesa, o de ajuda tambem, os restantes cinzentos. Lados a lado,
tres cores diferentes na mesma fila.
Aqui passam todos ao mesmo tom Slate-100. Nao se mexe nas classes
`btn-outline-*` do Bootstrap - sao partilhadas com os botoes de
ACCAO dentro das paginas (Guardar, Exportar), onde o ciano e' a cor
de marca e tem de continuar a ser forte. O alcance e' `.topbar`, e
ainda assim so' o directo-filho, para nao apanhar os itens dos
menus que caem para fora da barra. */
.topbar > .topbar-right > .dropdown > .btn,
.topbar .topbar-right > .btn,
.topbar .connection-status{
border:1px solid var(--slate-200);
border-radius:8px;
background-color:var(--slate-100);
color:#334155;
box-shadow:none;
transition:background-color 0.15s ease,border-color 0.15s ease,color 0.15s ease
}
/* O hover so' muda o tom: o ciano saturado num botao de 32 px de altura
obrigava a apontar o rato com cuidado. */
.topbar > .topbar-right > .dropdown > .btn:hover,
.topbar .topbar-right > .btn:hover,
.topbar .connection-status:hover{
background-color:var(--slate-200);
border-color:#CBD5E1;
color:#1E293B
}
.topbar > .topbar-right > .dropdown > .btn:active{background-color:#CBD5E1;color:#1E293B}
/* Foco visivel: e' o que permite navegar a barra toda pelo teclado. A
regra global de foco mantem-se, esta e' so' uma correccao de cor. */
.topbar > .topbar-right > .dropdown > .btn:focus-visible,
.topbar .topbar-right > .btn:focus-visible{
border-color:var(--turquoise);
box-shadow:0 0 0 3px rgba(0,180,216,0.15)
}
/* O ponto de estado mantem a cor - e' a unica coisa que diz se o
servidor esta vivo. */
.topbar .connection-status{background-color:transparent;border-color:transparent;padding-left:0;padding-right:0}
.topbar .connection-status:hover{background-color:transparent;border-color:transparent}
/* SCROLLBAR --------------------------------------------------------------
Slate, fina e sem caixilho: a barra do sistema e' larga e cinzenta e
destoa do resto numa aplicacao que passou a usar Slate.
O `scrollbar-width`/`scrollbar-color` vem primeiro por ser a forma
PADRAO (Firefox). O `::-webkit-scrollbar` (Chrome, Edge, Safari) e'
so' o equivalente - e so' o que permite a barra ser tao fina.
A barra da sidebar mantem a sua regra propria (L45): ali o fundo e'
escuro e um tom Slate seria invisivel. */
*{scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}
/* A barra da sidebar e' sobre fundo escuro: precisa de contraste
proprio, senao desaparece. Declara-se DEPOIS da global para ganhar. */
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.sidebar{scrollbar-color:rgba(255,255,255,0.15) transparent}
/* MODAIS -----------------------------------------------------------------
Cantos de 16 px e uma sombra que se le como sombra projectada - e
nao como um brilho - para levantar a janela do fundo.
O `border` de 1 px e' quase invisivel a olho nu: existe para o
contorno do modal CLARO sobre um fundo CLARO, onde a sombra sozinha
nao desenha nenhuma separacao. */
.modal-content{
border:1px solid var(--slate-200);
border-radius:16px;
box-shadow:0 20px 25px -5px rgba(0,0,0,0.1)
}
/* O fundo desfocado separa o modal do conteudo sem escurecer o ecra
inteiro. O `opacity` do Bootstrap (0.5) e' substituido por 0.4: com
o `blur` ja a separar, escurecer mais so' tornava o texto de baixo
ilegivel. O `!important` e' necessario porque o Bootstrap escreve a
opacidade em `.modal-backdrop.show`, que ja tem especificidade. */
.modal-backdrop{
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
opacity:0.4 !important
}
/* O Bootstrap da uma transicao de `opacity` a propria classe; a nossa
aceita o mesmo tempo para que o desfoque acompanhe o aparecimento em
vez de ficar repentinamente aplicado. */
.modal-backdrop{transition:opacity 0.2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* A entrada do conteudo: 4 px de subida e um fade curto. Nao e' mais do
que isso - a animacao serve para a pagina nao aparecer "a trancos",
nao para chamar a atencao. 0.25 s e' o limite: acima disso a
navegacao entre paginas comeca a parecer lenta. */
.content{animation:fadeIn 0.25s ease-out}
.content, .card{backface-visibility:hidden}
/* Quem pede menos movimento nao o recebe. A regra global de
`prefers-reduced-motion` acima JA reduz as animacoes a ~0, mas
declara-se aqui para ficar legivel ao lado do que anula. */
@media (prefers-reduced-motion:reduce){.content{animation:none}}
/* EMPTY STATE -------------------------------------------------------------
Substitui o "aviso cru" (icone solto + texto cinzenta) que aparecia
dentro dos cartoes quando nao havia nada a mostrar. Antes era um
`` grande e uma frase solta, sem hierarquia: o utilizador nao
sabia se era um aviso ou um estado normal.
A estrutura e' tres elementos nomeados - `.empty-state-card__icone`,
`__titulo` e `__descricao` - para que o bloco seja reutilizavel em
qualquer modulo sem repetir CSS. */
.empty-state-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.5rem;color:var(--text-muted-slate)}
.empty-state-card__icone{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--slate-100);color:var(--text-muted-slate);font-size:1.25rem;margin-bottom:1rem}
.empty-state-card__titulo{color:#1E293B;font-weight:600;font-size:1rem;margin:0 0 .35rem}
.empty-state-card__descricao{color:#64748B;font-size:.875rem;max-width:46ch;margin:0}
/* Variante de tom: quando o vazio e' uma BOA noticia (nada a vencer),
o disco e o titulo verdes em vez de neutros. */
.empty-state-card--sucesso .empty-state-card__icone{background:#DCFCE7;color:#15803D}
.empty-state-card--sucesso .empty-state-card__titulo{color:#14532D}
/* `.table-dark` nao e' "tabela escura" nesta aplicacao: e' o nome que
ficou herdado de quando o tema era escuro. Mantem-se a regra para nao
partir os 24 templates que a usam, mas passa a descrever uma tabela
CLARA - por isso o fundo transparente e a tinta do tema, nao branco. */
.table-dark{--bs-table-bg:transparent;--bs-table-color:var(--text-primary);--bs-table-hover-bg:var(--slate-50);
--bs-table-hover-color:var(--text-cell);color:var(--text-primary)}
/* TABELAS - o mesmo desenho em todas as paginas ----------------------
O cabecalho deixou de ser uma faixa azul-marinho: passou a ser uma
faixa Slate-100 com rotulos pequenos em Slate-500. Le-se como um
cabecalho e nao como um bloco de cor que briga com as badges.
A tinta do cabecalho e' `var(--text-thead)` (#475569) e NAO branco:
sobre `#f2f2f2` (o `` do Bootstrap) da
6.8:1, muito acima dos 4.5:1 que o WCAG AA exige. O branco fixo
dava 1.12:1 - praticamente invisivel. Tabelas sobre superficie
realmente escura mantem o branco em `.superficie-escura` (abaixo). */
.table>thead th{color:var(--text-thead);background-color:var(--slate-100);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;padding:0.75rem 1rem;border-bottom:1px solid var(--slate-200);white-space:nowrap}
.table>tbody td{padding:0.875rem 1rem;border-color:var(--slate-100);color:var(--text-cell);vertical-align:middle}
.table>tbody>tr{transition:background-color 0.15s ease}
.table>tbody>tr:hover{background-color:var(--slate-50)}
.table-dark.table-hover>tbody>tr:hover{background-color:var(--slate-50)}
.btn-primary{background:linear-gradient(135deg,var(--turquoise)0%,var(--turquoise-dark)100%);border:none;box-shadow:0 2px 8px rgba(0,180,216,0.3);font-weight:600;padding:10px 20px;border-radius:8px;transition:all 0.2s}
.btn-primary:hover{background:linear-gradient(135deg,var(--turquoise-dark)0%,var(--navy-light)100%);box-shadow:0 4px 16px rgba(0,180,216,0.4);transform:translateY(-1px)}
.btn-outline-primary{color:var(--turquoise);border-color:var(--turquoise);font-weight:600;border-radius:8px}
.btn-outline-primary:hover{background:var(--turquoise);border-color:var(--turquoise);color:var(--white)}
.form-control,.form-select{border-radius:8px;border:1.5px solid var(--border-color);padding:10px 14px;font-size:0.9rem;transition:all 0.2s}
.form-control:focus,.form-select:focus{border-color:var(--turquoise);box-shadow:0 0 0 3px rgba(0,180,216,0.12)}
/* BADGES / PILLS DE ESTADO ----------------------------------------------
Forma de pilula (9999px) e peso 600: o status tem de se ler de relance
numa tabela, e um canto vivo rouba a atencao ao texto da linha.
As cores sao PASTEL com tinta escura, nao cor saturada com branco.
Branco sobre verde saturado e' 2.5:1 - reprova o WCAG AA. Pastel com
tinta escura da 5:1 ou mais e le-se melhor numa linha de tabela.
Os seletores sao `.badge.bg-*` e nao `bg-*` de proposito: o mesmo
`bg-danger` desenha a barra de forca da senha em `cadastro.html` e
ali a cor saturada e' a que comunica. */
.badge{border-radius:9999px;font-weight:600;font-size:12px;padding:0.35em 0.8em;line-height:1.4;letter-spacing:0.01em;display:inline-flex;align-items:center;gap:0.35em}
.badge.bg-success{background:#DCFCE7!important;color:#14532D!important}
.badge.bg-warning{background:#FEF3C7!important;color:#78350F!important}
.badge.bg-danger{background:#FEE2E2!important;color:#7F1D1D!important}
.badge.bg-info{background:#CFFAFE!important;color:#0E4A5E!important}
.badge.bg-primary{background:#DBEAFE!important;color:#1E3A8A!important}
.badge.bg-secondary{background:#F1F5F9!important;color:#475569!important}
.badge.bg-light{background:#F1F5F9!important;color:#475569!important}
.badge.bg-dark{background:#E2E8F0!important;color:#1E293B!important}
/* Variante `text-bg-*` (usada no suporte): mesmo tom pastel. */
.badge.text-bg-success{background:#DCFCE7!important;color:#14532D!important}
.badge.text-bg-warning{background:#FEF3C7!important;color:#78350F!important}
.badge.text-bg-danger{background:#FEE2E2!important;color:#7F1D1D!important}
.badge.text-bg-info{background:#CFFAFE!important;color:#0E4A5E!important}
.badge.text-bg-primary{background:#DBEAFE!important;color:#1E3A8A!important}
.badge.text-bg-secondary{background:#F1F5F9!important;color:#475569!important}
.badge.text-bg-light{background:#F1F5F9!important;color:#475569!important}
/* Os badges `-subtle` do Bootstrap ja vem em tom pastel com a tinta
`*-emphasis` que os acompanha; so falta dar-lhes a forma de pilula,
que o Bootstrap deixa a 0.25rem. */
.badge.bg-primary-subtle,.badge.bg-success-subtle,.badge.bg-danger-subtle,.badge.bg-warning-subtle,.badge.bg-info-subtle{border-radius:9999px;font-weight:600;font-size:12px;padding:0.35em 0.8em}
/* Badge que e' SO um icone (urgencia de uma tarefa): precisa de uma
caixa quadrada para o glifo ficar centrado e de uma largura/altura
iguais - o `padding:0.35em 0.8em` da pill daria uma elipse. */
.badge-icone{width:32px;height:32px;padding:0;justify-content:center;flex-shrink:0}
/* O `text-dark` dos badges (usado em varios templates) mantem-se: sobre
pastel o texto escuro e' o que se quer. */
.badge.text-dark{color:#1E293B!important}
.bg-success{background-color:var(--accent-success)!important}
.bg-warning{background-color:var(--accent-warning)!important}
.bg-danger{background-color:var(--accent-danger)!important}
.modal-content{border:none;border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--border-color);padding:20px 24px}
.modal-body{padding:24px}
.modal-footer{border-top:1px solid var(--border-color);padding:16px 24px}
.table-danger{background-color:rgba(239,68,68,0.06)!important}
.table-warning{background-color:rgba(245,158,11,0.06)!important}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.sidebar-open{transform:translateX(0);box-shadow:var(--shadow-lg)}.main-area{margin-left:0;width:100%}}
@media(max-width:575.98px){.topbar{padding:0 16px}.topbar-title{font-size:0.95rem}.content{padding:16px}.flash-container{padding:12px 16px 0}}
@media print {
/* Ocultar banners, avisos de trial, botoes e widgets na impressao */
.banner-demo,
.demo-banner,
.trial-banner,
div[class*="demo"],
div[class*="trial"],
.alert,
#copilot-btn,
#copilot-window,
.topbar,
.sidebar,
.sidebar-overlay,
.flash-container,
.btn,
button,
header,
nav,
footer,
.no-print {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body { background: #fff !important; color: #000 !important; visibility: visible !important; margin: 0 !important; padding: 0 !important; }
body * { visibility: visible !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
a[href]::after { content: "" !important; }
}
/* `.table-dark` e' um nome herdado: nas 24 paginas que o usam, a tabela
ja e' CLARA (fundo branco). O que nao e' herdado e' a cabeca azul-
marinho pintada a mao - e' ela que tirava a limpeza e a legibilidade
do cabecalho. O cabecalho premium passa a vir de `.table > thead th`. */
.table-dark {
--bs-table-bg: #FFFFFF;
--bs-table-color: #1A2332;
--bs-table-hover-bg: #F8FAFC;
--bs-table-striped-bg: #F8FAFC;
background-color: #FFFFFF;
color: #1A2332;
}
.table-dark td, .table-dark th {
border-color: var(--slate-100);
}
/* Tabela sobre superficie ESCURA de verdade (por exemplo um relatorio
impresso com fundo escuro): ai sim o branco e' a unica tinta legivel
sobre o azul-marinho. Fora desse contexto a regra acima da a
cabeca clara. */
.superficie-escura .table-dark thead th {
background: #0A1F3F;
color: #FFFFFF;
}
/* Login page */
.login-box .card {
border: 1px solid var(--border-color);
box-shadow: var(--shadow-lg);
}
/* Input groups fix */
.input-group-text {
background: var(--bg-hover);
border: 1.5px solid var(--border-color);
color: var(--text-secondary);
border-radius: 8px 0 0 8px;
}
/* A antiga regra `color:#FFFFFF` vivia aqui para tornar o texto visivel
sobre as cores saturadas. Com as badges em pastel, o branco deixaria
de se ler - quem decide a tinta agora e' a variante (`.badge.bg-*`).
A unica excepcao e' a superficie escura, onde o branco sobrevive. */
.superficie-escura .badge{color:#FFFFFF}
/* Card hover in dashboard */
.dashboard-card {
border: 1px solid var(--border-color) !important;
}
/* Alerts in light theme */
.alert-info {
background-color: #E0F7FA;
border-color: #B2EBF2;
color: #006064;
}
.alert-success {
background-color: #E8F5E9;
border-color: #C8E6C9;
color: #1B5E20;
}
.alert-danger {
background-color: #FFEBEE;
border-color: #FFCDD2;
color: #B71C1C;
}
.alert-warning {
background-color: #FFF8E1;
border-color: #FFE082;
color: #E65100;
}
/* Dropdown menus light */
.dropdown-menu {
border: 1px solid var(--border-color);
}
.dropdown-item {
color: var(--text-secondary);
}
/* Modal form text */
.modal-content {
color: var(--text-primary);
}
.modal-content .form-label {
color: var(--text-primary);
}
/* Card body default text */
.card-body {
color: var(--text-primary);
}
/* Topbar company name visibility */
.topbar-title {
color: var(--text-primary);
}
/* Table row active state (empresa ativa) */
.table-active {
--bs-table-accent-bg: rgba(0, 180, 216, 0.08) !important;
}
/* Fix bg-dark in light theme */
.bg-dark {
background-color: #F0F4FF !important;
color: #1A2332 !important;
}
code.bg-dark, .bg-dark code {
background-color: #1A2332 !important;
color: #E0E4E8 !important;
padding: 8px 12px;
border-radius: 6px;
display: block;
}
.bg-dark small, .bg-dark .small {
color: #5A6878 !important;
}
.bg-dark.text-light, .bg-dark .text-light {
color: #FFFFFF !important;
}
/* Table dark compatibility */
.table-dark code {
background-color: rgba(255,255,255,0.1);
color: #E0E4E8;
}
/* Fix for folha.html holerite boxes */
.p-2.rounded.bg-dark {
background-color: #F0F4FF !important;
border: 1px solid #E0E4E8;
}
.p-2.rounded.bg-dark small {
color: #5A6878 !important;
}
.p-2.rounded.bg-dark .fw-bold {
color: #1A2332 !important;
}
.p-2.rounded.bg-dark .text-success {
color: #10B981 !important;
}
.p-2.rounded.bg-dark .text-danger {
color: #EF4444 !important;
}
/* =====================================================================
NAVEGACAO AJAX: barra de progresso do topo
===================================================================== */
#ajaxProgressBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 2000;
background: transparent;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
#ajaxProgressBar.ativo {
opacity: 1;
}
#ajaxProgressBar > span {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, #00B4D8, #0A1F3F);
box-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
}
#ajaxProgressBar.ativo > span {
animation: ajaxProgresso 1.4s ease-out forwards;
}
#ajaxProgressBar.concluido > span {
width: 100%;
animation: none;
transition: width 0.2s ease-out;
}
@keyframes ajaxProgresso {
0% { width: 0; }
35% { width: 55%; }
70% { width: 78%; }
100% { width: 92%; }
}
/* Estado de carregamento suave do conteudo principal */
#conteudoPrincipal.ajax-carregando {
opacity: 0.55;
transition: opacity 0.15s ease-in;
}
/* HOVER DAS LINHAS - alto contraste ------------------------------------
O `!important` e' preciso para vencer o `.table-hover` do Bootstrap.
Mas so as CELULAS sao repintadas: a versao anterior alcanzava tambem
`span` e `div` dentro da linha e, com as badges em pastel, passava o
rato e apagava a cor do status - a pílula ficava cinzenta no hover.
A celula muda de tom; o que esta dentro dela mantem a sua cor. */
.table-hover>tbody>tr:hover>*,
table tbody tr:hover>td,
table tbody tr:hover>th {
background-color: var(--slate-50) !important;
color: var(--text-cell) !important;
}
/* PADRAO DAVIL Auto System - botoes primaria/exportacao */
/* 1) BOTOES PRINCIPAIS (azul preenchido, alto contraste) */
.btn-primary,
.btn-submit,
button[type="submit"].btn-primary,
a.btn-primary {
background-color: #00b4d8 !important;
border-color: #00b4d8 !important;
border-width: 1px;
border-style: solid;
color: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
margin-left: 10px;
}
.btn-primary:hover,
.btn-submit:hover,
button[type="submit"].btn-primary:hover,
a.btn-primary:hover {
background-color: #0096c7 !important;
border-color: #0096c7 !important;
color: #ffffff !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}
.btn-primary:focus-visible,
.btn-submit:focus-visible {
outline: 2px solid #0096c7;
outline-offset: 2px;
}
/* 2) BOTOES EXPORTACAO / SECUNDARIOS (branco + outline ciano, sem sombra) */
.btn-outline-primary,
.btn-exportar,
.btn-export,
a.btn-outline-primary {
background-color: #ffffff !important;
color: #00b4d8 !important;
border: 1px solid #00b4d8 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.btn-outline-primary:hover,
.btn-exportar:hover,
.btn-export:hover,
a.btn-outline-primary:hover {
background-color: #e6f9fd !important;
color: #0096c7 !important;
border-color: #0096c7 !important;
box-shadow: none !important;
}
.btn-outline-primary i, .btn-exportar i, .btn-export i,
.btn-primary i, .btn-submit i {
color: inherit !important;
vertical-align: middle;
line-height: 1;
}
/* 3) ALINHAMENTO: contentores de botoes na mesma linha com espacamento consistente */
.btn-toolbar, .page-actions, .table-actions, .actions-bar,
.d-flex.align-items-center.gap-2 {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: wrap;
}
.btn, .btn-primary, .btn-outline-primary, .btn-exportar, .btn-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
gap: 0.4rem;
white-space: nowrap;
}
.btn i[class*="fa-"], .btn svg {
vertical-align: middle;
align-self: center;
margin: 0;
}
/* FIX dropdown select - seta sem sobrepor texto */
select.form-select,
.form-control select,
select {
padding-right: 2.25rem !important;
padding-left: 0.75rem !important;
min-width: 130px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 0.75rem center !important;
}
/* ===== MODAIS E TEXTAREA: SCROLL RESPONSIVO ===== */
/* O conteúdo é a única área rolável; header/footer permanecem no limite do modal. */
.modal-dialog,
.modal-dialog-centered,
.modal-dialog-scrollable {
min-height: 0 !important;
height: auto !important;
}
.modal-dialog {
width: calc(100% - 2rem);
max-width: 800px;
max-height: 85vh !important;
margin-top: 2rem !important;
margin-bottom: 2rem !important;
display: flex;
flex-direction: column;
}
.modal-dialog-scrollable {
height: auto !important;
max-height: 85vh !important;
}
.modal-content,
.modal-dialog-scrollable .modal-content {
width: 100%;
max-height: 85vh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.modal-header,
.modal-footer {
flex: 0 0 auto !important;
flex-shrink: 0 !important;
}
.modal-body {
min-height: 0;
flex: 1 1 auto !important;
overflow-y: auto !important;
padding: 1.25rem !important;
scrollbar-gutter: stable;
}
.modal-dialog-scrollable .modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
}
/* Nos formulários atuais, o