/* =========================================================
INTERBAN — Folha de estilos principal
Design: clean, moderno, tons neutros
Suporta tema claro (padrão) e escuro via [data-theme="dark"]
na tag , alternado pelo botão no cabeçalho (site.js).
========================================================= */
:root {
--ib-primary: #1a56db;
--ib-primary-dark: #1241a8;
--ib-primary-light:#e8f0fe;
--ib-success: #0d9488;
--ib-danger: #dc2626;
--ib-warning: #b45309;
--ib-text: #1e293b;
--ib-text-muted: #64748b;
--ib-border: #e2e8f0;
--ib-bg: #f8fafc;
/* Cor de "superfície" (cards, inputs, rodapé) — no tema escuro deixa de ser
branca de fato, mas o nome da variável foi mantido para não precisar trocar
todas as referências espalhadas pelas views. */
--ib-white: #ffffff;
--ib-header-h: 56px;
--ib-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
--ib-shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
--ib-radius: 6px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ib-header-bg: #93c5fd;
--ib-header-border: #60a5fa;
--ib-header-text: #1e3a5f;
--ib-header-text-muted: #3b5478;
--ib-header-hover-bg: #60a5fa;
--ib-alert-success-bg: #d1fae5;
--ib-alert-success-text: #065f46;
--ib-alert-success-border: #a7f3d0;
--ib-alert-error-bg: #fee2e2;
--ib-alert-error-text: #991b1b;
--ib-alert-error-border: #fecaca;
--ib-alert-warning-bg: #fef3c7;
--ib-alert-warning-text: #92400e;
--ib-alert-warning-border: #fde68a;
--ib-input-border: #a9b6c9;
--ib-input-readonly-bg: #eef1f5;
--ib-table-hover-bg: #f1f5f9;
/* Realce sutil e alternado das linhas de classificação por Centro/Conta (Contas a
Pagar/Receber e Controle Bancário), para não se misturarem visualmente com o
restante da tela quando houver mais de uma linha. */
--ib-classificacao-bg-1: #b9d2fb;
--ib-classificacao-bg-2: #b7ecc9;
}
/* Tema claro suave: mesmo tema claro, só com o fundo e os cartões num cinza
nitidamente mais escuro que branco estourado — pra quem acha o Claro padrão
muito brilhante, sem preferir ir direto para um tema escuro. Cores de marca
(primária, cabeçalho, alertas) idênticas ao Claro; a diferença é só nas
superfícies neutras, mas de propósito bem mais marcada que uma variação sutil. */
:root[data-theme="claroleve"] {
--ib-border: #b7c0cc;
--ib-bg: #ccd3db;
--ib-white: #dde2e8;
--ib-input-border: #7c8aa0;
--ib-input-readonly-bg: #c3cbd5;
--ib-table-hover-bg: #c6ced8;
--ib-shadow-sm: 0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.1);
--ib-shadow: 0 4px 6px rgba(0,0,0,.13), 0 2px 4px rgba(0,0,0,.1);
--ib-classificacao-bg-1: #b9d2fb;
--ib-classificacao-bg-2: #b7ecc9;
}
/* Tema escuro: aplicado explicitamente (botão do cabeçalho, escolha salva no
navegador) ou, na primeira visita sem escolha salva, quando o sistema
operacional já está em modo escuro (ver site.js). */
:root[data-theme="dark"] {
--ib-primary: #3b82f6;
--ib-primary-dark: #60a5fa;
--ib-primary-light:#1e3a8a;
--ib-success: #2dd4bf;
--ib-danger: #f87171;
--ib-warning: #fbbf24;
--ib-text: #e2e8f0;
--ib-text-muted: #94a3b8;
--ib-border: #334155;
--ib-bg: #0f172a;
--ib-white: #1e293b;
--ib-shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
--ib-shadow: 0 4px 6px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.3);
--ib-header-bg: #16243b;
--ib-header-border: #28405f;
--ib-header-text: #dbeafe;
--ib-header-text-muted: #90b0d6;
--ib-header-hover-bg: #28405f;
--ib-alert-success-bg: #06342a;
--ib-alert-success-text: #6ee7b7;
--ib-alert-success-border: #0d9488;
--ib-alert-error-bg: #3f1414;
--ib-alert-error-text: #fca5a5;
--ib-alert-error-border: #b91c1c;
--ib-alert-warning-bg: #422006;
--ib-alert-warning-text: #fbbf24;
--ib-alert-warning-border: #92400e;
--ib-input-border: #475569;
--ib-input-readonly-bg: #17212f;
--ib-table-hover-bg: #1b2739;
--ib-classificacao-bg-1: #1e2a47;
--ib-classificacao-bg-2: #16302a;
}
/* Tema suave: um meio-termo entre o Claro e o Escuro — cinza-azulado de tom
médio, para quem acha o Claro muito branco e o Escuro muito pesado. Mesmo
mecanismo de seleção do Escuro (botão do cabeçalho / escolha salva). */
:root[data-theme="suave"] {
--ib-primary: #5b93ee;
--ib-primary-dark: #3f74d1;
--ib-primary-light:#2c4470;
--ib-success: #3dbfa8;
--ib-danger: #ee8080;
--ib-warning: #f0b429;
--ib-text: #dde3ea;
--ib-text-muted: #93a3b8;
--ib-border: #475364;
--ib-bg: #2b3544;
--ib-white: #343f4e;
--ib-shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
--ib-shadow: 0 4px 6px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.18);
--ib-header-bg: #223047;
--ib-header-border: #34455c;
--ib-header-text: #dde6f2;
--ib-header-text-muted: #9fb0c7;
--ib-header-hover-bg: #34455c;
--ib-alert-success-bg: #1f4640;
--ib-alert-success-text: #7fd8bf;
--ib-alert-success-border: #2f6a5c;
--ib-alert-error-bg: #4a2a2a;
--ib-alert-error-text: #f2a8a8;
--ib-alert-error-border: #7a3d3d;
--ib-alert-warning-bg: #4a3a1f;
--ib-alert-warning-text: #f0b429;
--ib-alert-warning-border: #6b4f24;
--ib-input-border: #5a6779;
--ib-input-readonly-bg: #303a49;
--ib-table-hover-bg: #3a4657;
--ib-classificacao-bg-1: #2f3c56;
--ib-classificacao-bg-2: #2c3f3a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: var(--font-sans);
font-size: 15px;
color: var(--ib-text);
background: var(--ib-bg);
-webkit-font-smoothing: antialiased;
}
/* ---- CABEÇALHO / MENU ---- */
.ib-header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
height: var(--ib-header-h);
background: var(--ib-header-bg);
border-bottom: 1px solid var(--ib-header-border);
box-shadow: var(--ib-shadow-sm);
padding: 0 20px;
gap: 24px;
}
/* Marca */
.ib-brand-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--ib-header-text);
text-decoration: none;
white-space: nowrap;
letter-spacing: .4px;
padding-right: 16px;
border-right: 1px solid var(--ib-header-border);
}
.ib-brand-link:hover { color: var(--ib-primary); }
.ib-brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ib-brand-name { font-size: 15px; font-weight: 700; }
.ib-brand-desde {
font-size: 10px;
font-weight: 500;
color: var(--ib-header-text-muted);
letter-spacing: .2px;
}
.ib-brand-versao {
font-size: 10px;
font-weight: 500;
color: var(--ib-header-text-muted);
letter-spacing: .2px;
}
.ib-brand-usuario {
font-size: 10px;
font-weight: 700;
color: var(--ib-header-text-muted);
letter-spacing: .2px;
}
.ib-brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: var(--ib-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
border-radius: 5px;
}
/* Navbar */
.ib-nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
.ib-nav-link {
display: block;
padding: 6px 13px;
font-size: 14px;
font-weight: 700;
color: var(--ib-header-text);
text-decoration: none;
border-radius: var(--ib-radius);
transition: color .15s, background .15s;
white-space: nowrap;
}
.ib-nav-link:hover {
color: var(--ib-header-text);
background: var(--ib-header-hover-bg);
}
.ib-nav-link-desabilitado {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.ib-nav-link-desabilitado:hover {
background: none;
}
.ib-nav-link.active {
color: var(--ib-header-text);
background: var(--ib-header-hover-bg);
}
/* Botão de alternar tema claro/escuro */
.ib-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border: 1px solid var(--ib-header-border);
border-radius: var(--ib-radius);
background: transparent;
color: var(--ib-header-text);
cursor: pointer;
transition: background .15s;
}
.ib-theme-toggle:hover { background: var(--ib-header-hover-bg); }
.ib-theme-toggle svg { width: 17px; height: 17px; }
/* O ícone mostrado é o do tema ATUAL (não o próximo do ciclo): sol no Claro,
meia-lua "contraste" no Suave, lua cheia no Escuro. */
.ib-theme-toggle .ib-icon-lua,
.ib-theme-toggle .ib-icon-suave { display: none; }
:root[data-theme="suave"] .ib-theme-toggle .ib-icon-sol { display: none; }
:root[data-theme="suave"] .ib-theme-toggle .ib-icon-suave { display: block; }
:root[data-theme="dark"] .ib-theme-toggle .ib-icon-sol { display: none; }
:root[data-theme="dark"] .ib-theme-toggle .ib-icon-lua { display: block; }
/* ---- CONTEÚDO PRINCIPAL ---- */
.ib-main {
max-width: 1280px;
margin: 0;
padding: 32px 24px 48px;
min-height: calc(100vh - var(--ib-header-h) - 44px);
}
/* ---- ALERTAS ---- */
.ib-alert {
padding: 12px 16px;
border-radius: var(--ib-radius);
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}
.ib-alert-success {
background: var(--ib-alert-success-bg);
color: var(--ib-alert-success-text);
border: 1px solid var(--ib-alert-success-border);
}
.ib-alert-error {
background: var(--ib-alert-error-bg);
color: var(--ib-alert-error-text);
border: 1px solid var(--ib-alert-error-border);
}
.ib-alert-warning {
background: var(--ib-alert-warning-bg);
color: var(--ib-alert-warning-text);
border: 1px solid var(--ib-alert-warning-border);
}
/* ---- FAIXA DE VERSÃO DEMONSTRAÇÃO ---- */
.ib-banner-demo {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 16px;
padding: 16px 24px;
margin-bottom: 28px;
border-radius: var(--ib-radius);
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: var(--ib-shadow);
}
.ib-banner-demo strong {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ib-banner-demo span {
font-size: 14px;
opacity: 0.95;
}
.ib-banner-demo .ib-banner-demo-lancamento {
font-weight: 600;
}
.ib-banner-demo .ib-banner-demo-login {
flex-basis: 100%;
font-size: 15px;
font-weight: 700;
background: rgba(255, 255, 255, 0.22);
border-radius: var(--ib-radius);
padding: 6px 14px;
letter-spacing: 0.01em;
}
/* ---- RODAPÉ ---- */
.ib-footer {
text-align: center;
padding: 12px 24px;
font-size: 12px;
color: var(--ib-text-muted);
border-top: 1px solid var(--ib-border);
background: var(--ib-white);
}
/* Copyright e contato comercial na mesma linha do rodapé — evita que o rodapé fique
alto demais e "suma" atrás da rolagem da tela logo ao entrar no sistema. */
.ib-footer-linha {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 14px;
}
/* Contato comercial no rodapé — precisa se destacar do resto do rodapé (que é
propositalmente discreto), então usa a mesma cor/fundo de destaque das legendas de
demonstração no login, não o cinza apagado padrão do rodapé. */
.ib-footer-contato {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 10px;
padding: 8px 16px;
border-radius: var(--ib-radius);
background: var(--ib-primary-light);
color: var(--ib-primary);
font-size: 13px;
font-weight: 700;
}
.ib-footer-contato a {
color: inherit;
text-decoration: underline;
}
/* ---- CARDS ---- */
.ib-card {
background: var(--ib-white);
border: 1px solid var(--ib-border);
border-radius: var(--ib-radius);
box-shadow: var(--ib-shadow-sm);
padding: 28px;
}
.ib-card-tight {
padding: 10px 12px 12px 12px;
}
.ib-card-compact { padding: 16px 18px; }
.ib-submenu-wrapper {
/* inline-flex (não flex): precisa encolher até a largura da linha mais larga
para que ".ib-submenu-center" centralize as linhas seguintes de fato em
relação à primeira linha, e não em relação à largura cheia da página. */
width: auto;
max-width: 100%;
margin: 0 0 12px 0;
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.ib-submenu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 6px;
width: 100%;
margin: 0;
padding: 0;
}
/* Usada quando o submenu é dividido em mais de uma linha (ex.: Tabelas): a
primeira linha fica alinhada à esquerda como sempre, e a(s) linha(s)
seguinte(s), normalmente mais curtas, ficam centralizadas em relação a ela. */
.ib-submenu-center {
justify-content: center;
margin-top: 6px;
}
.ib-submenu .ib-btn {
white-space: nowrap;
padding: 5px 8px;
font-size: 12px;
line-height: 1.1;
}
.ib-page-title {
font-size: 22px;
font-weight: 700;
color: var(--ib-text);
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ib-border);
}
.ib-page-title-compact {
margin-bottom: 6px !important;
padding-bottom: 6px;
border-bottom: none;
margin-left: 0;
padding-left: 0;
}
.ib-page-subtitle {
font-size: 14px;
color: var(--ib-text-muted);
margin-top: -18px;
margin-bottom: 24px;
}
/* ---- BOTÕES ---- */
.ib-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
font-size: 14px;
font-weight: 500;
border-radius: var(--ib-radius);
border: none;
cursor: pointer;
text-decoration: none;
transition: background .15s, transform .1s;
}
.ib-btn:active { transform: scale(.98); }
.ib-btn-primary { background: var(--ib-primary); color: #fff; }
.ib-btn-primary:hover { background: var(--ib-primary-dark); color: #fff; }
.ib-btn-secondary {
background: var(--ib-bg);
color: var(--ib-text);
border: 1px solid var(--ib-border);
}
.ib-btn-secondary:hover { background: var(--ib-border); }
.ib-btn-danger { background: var(--ib-danger); color: #fff; }
.ib-btn-danger:hover { background: #b91c1c; color: #fff; }
/* ---- FORMULÁRIOS ---- */
.ib-form-group { margin-bottom: 4px; }
.ib-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ib-text);
margin-bottom: 3px;
}
/* Marca campos obrigatórios nas telas de cadastro (não usada nos filtros de relatório,
onde nenhum campo é obrigatório). */
.ib-required {
color: var(--ib-danger);
}
.ib-input,
.ib-select,
.ib-textarea {
width: 100%;
padding: 6px 10px;
font-size: 13px;
font-family: var(--font-sans);
color: var(--ib-text);
background: var(--ib-white);
border: 1px solid var(--ib-input-border);
border-radius: var(--ib-radius);
transition: border-color .15s, box-shadow .15s;
outline: none;
}
.ib-input:focus,
.ib-select:focus,
.ib-textarea:focus {
border-color: var(--ib-primary);
box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.ib-input.is-invalid,
.ib-select.is-invalid { border-color: var(--ib-danger); }
.ib-input[readonly] {
background: var(--ib-input-readonly-bg);
color: var(--ib-text-muted);
cursor: not-allowed;
}
/* O checkbox nativo do navegador fica com o contorno quase invisível no tema claro
(borda cinza claríssima do sistema operacional) — redesenhado com appearance: none
pra garantir uma borda sempre visível nos dois temas. */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--ib-input-border);
border-radius: 3px;
background: var(--ib-white);
cursor: pointer;
position: relative;
flex-shrink: 0;
vertical-align: middle;
}
input[type="checkbox"]:checked {
background: var(--ib-primary);
border-color: var(--ib-primary);
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(26,86,219,.25);
}
/* Campo de senha com o botão "olho" (mostrar/ocultar) sobreposto à direita. */
.ib-campo-senha {
position: relative;
}
.ib-campo-senha .ib-input {
padding-right: 38px;
}
.ib-botao-olho {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--ib-text-muted);
cursor: pointer;
}
.ib-botao-olho svg { width: 17px; height: 17px; }
/* Campos de valores numéricos: alinhados à direita, sem as setas de incremento
do type="number" (que atrapalham mais do que ajudam na digitação). */
.ib-input-numero,
.ib-input-moeda {
text-align: right;
}
.ib-validation-msg {
display: block;
font-size: 12px;
color: var(--ib-danger);
margin-top: 4px;
}
.ib-form-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.ib-form-header h2 { font-size: 14px; font-weight: 700; }
.ib-form-section-title {
font-size: 11px;
font-weight: 700;
color: var(--ib-text-muted);
text-transform: uppercase;
letter-spacing: .4px;
margin: 6px 0 4px;
padding-top: 6px;
border-top: 1px solid var(--ib-border);
}
/* Variante para destacar um título de seção numa tela muito cheia, com vários
blocos parecidos (ex.: composição de Movimento + Título + Classificação). */
.ib-form-section-title-destaque {
color: var(--ib-primary);
font-size: 13px;
border-top-color: var(--ib-primary);
}
.ib-form-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.ib-search-bar {
display: flex;
gap: 8px;
margin-bottom: 14px;
align-items: flex-end;
}
/* Mesmo layout do ib-search-bar, mas SEM o atalho de teclado de busca imediata (ver
site.js) — usada em barras com muitos campos digitáveis (ex.: painel de filtros de
Títulos), onde o Enter precisa pular pro próximo campo em vez de já submeter. */
.ib-filtro-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
align-items: flex-end;
}
.ib-btn-sm { padding: 5px 12px; font-size: 12px; }
/* ---- TABELAS ---- */
.ib-table-wrapper { overflow-x: auto; }
.ib-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ib-table th {
padding: 8px 12px;
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--ib-text-muted);
background: var(--ib-bg);
border-bottom: 1px solid var(--ib-border);
}
.ib-table td {
padding: 7px 12px;
border-bottom: 1px solid var(--ib-border);
color: var(--ib-text);
}
.ib-table tr:last-child td { border-bottom: none; }
.ib-table tbody tr:hover td { background: var(--ib-table-hover-bg); }
.ib-table-row-link { cursor: pointer; }
/* Linhas de classificação por Centro/Conta (Titulos, TitulosMovimento) — realce leve
e alternado entre duas cores, pra não se misturar com o restante da tela quando
houver mais de uma linha. Aplicado na (não no td) para que o estilo inline de
"linha selecionada" — que também é setado na
— continue prevalecendo. */
.ib-linha-classificacao-1 { background: var(--ib-classificacao-bg-1); }
.ib-linha-classificacao-2 { background: var(--ib-classificacao-bg-2); }
/* Linha recém gravada/alterada, ao voltar da tela de edição pra grade (ver site.js) —
um flash que esmaece sozinho, pra achar rápido o registro que acabou de ser salvo. */
@keyframes ib-flash-foco {
0% { background: var(--ib-primary-light); }
100% { background: transparent; }
}
.ib-row-foco td { animation: ib-flash-foco 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
.ib-row-foco td { animation: none; }
}
.ib-th-sort {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.ib-th-sort:hover { color: var(--ib-text); }
/* ---- RESPONSIVO ---- */
@media (max-width: 768px) {
.ib-header { overflow-x: auto; gap: 12px; }
.ib-nav-link { padding: 6px 10px; font-size: 13px; }
.ib-main { padding: 20px 16px 40px; }
}