/* ============================================================================= GESTI+ Design System — gesti.css Bootstrap 5.3 como base; tokens e componentes proprietários abaixo. Tema claro/escuro via [data-bs-theme="light|dark"] no . ============================================================================= */ /* --------------------------------------------------------------------------- 1. Tokens globais (tema claro — padrão) --------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { /* Paleta oficial — Manual de Identidade Visual v2.0/2026, pág. 4. Estes cinco hex são a marca: não alterar sem revisão do manual. */ --gesti-azul: #071C4B; /* institucional — base da marca e dos textos */ --gesti-profundo: #040F2E; /* azul profundo (pág. 7) */ --gesti-verde: #0AB7A5; /* tecnologia — ações e confirmações */ --gesti-aqua: #45D4C5; /* apoio — realces e gráficos */ --gesti-laranja: #FF8200; /* destaque — UM único ponto por tela (pág. 9) */ --gesti-neutro: #F5F7FA; /* fundos de interface e cartões */ /* Marca */ --gesti-primario: var(--gesti-azul); --gesti-primario-hover: #2A3C64; /* navy clareia no hover: escurecer não se vê */ --gesti-secundario: #5A6A8A; --gesti-destaque: var(--gesti-laranja); /* Superfície */ --gesti-fundo: var(--gesti-neutro); --gesti-fundo-card: #ffffff; --gesti-borda: #DCE1EA; /* Texto */ --gesti-texto: var(--gesti-azul); /* 16,45:1 sobre branco */ --gesti-texto-suave: #5A6A8A; /* 5,44:1 sobre branco */ /* Sidebar — tema claro */ --gesti-sidebar-largura: 260px; --gesti-sidebar-largura-recolhida: 68px; --gesti-sidebar-fundo: #ffffff; --gesti-sidebar-borda-direita: 1px solid #DCE1EA; --gesti-sidebar-texto: #5A6A8A; --gesti-sidebar-texto-ativo: var(--gesti-azul); --gesti-sidebar-item-ativo: rgba(10,183,165,.14); --gesti-sidebar-grupo-titulo: #8B97AF; --gesti-sidebar-scrollbar: rgba(7,28,75,.16); /* Tipografia — pág. 5. As duas famílias são servidas localmente por fontes.css; a cadeia de fallback é a "substituição segura" do manual. */ --gesti-fonte-corpo: 'Inter', system-ui, -apple-system, Arial, sans-serif; --gesti-fonte-titulo: 'Poppins', 'Inter', system-ui, Arial, sans-serif; /* Escala tipográfica (pág. 5) */ --gesti-t-display: 2rem; /* 32px · Poppins SemiBold — números de painel */ --gesti-t-h1: 1.5rem; /* 24px · Poppins SemiBold */ --gesti-t-h2: 1.125rem; /* 18px · Poppins SemiBold */ --gesti-t-corpo: .9375rem; /* 15px · Inter Regular */ --gesti-t-apoio: .8125rem; /* 13px · Inter Regular */ --gesti-t-rotulo: .75rem; /* 12px · Inter SemiBold caixa alta */ /* Transição padrão */ --gesti-transicao: .2s ease; /* Sombras */ --gesti-sombra-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --gesti-sombra-dropdown: 0 4px 12px rgba(0,0,0,.12); /* Raios — o manual pede cantos de 8 a 12 px (pág. 9) */ --gesti-raio: .625rem; /* 10px */ --gesti-raio-lg: .75rem; /* 12px */ --gesti-raio-sm: .5rem; /* 8px */ } /* --------------------------------------------------------------------------- 2. Tokens — tema escuro --------------------------------------------------------------------------- */ /* O manual não especifica tema escuro de interface — a pág. 7 trata de qual LOGO usar sobre fundo escuro. A rampa abaixo é derivada dos três azuis que a própria pág. 7 usa (#040F2E fundo, #071C4B cartão, #122B63 borda), então o tema escuro fica ancorado no manual em vez de inventado. */ [data-bs-theme="dark"] { --gesti-fundo: var(--gesti-profundo); --gesti-fundo-card: var(--gesti-azul); --gesti-borda: #122B63; --gesti-texto: #E8ECF4; /* 13,89:1 sobre o cartão */ --gesti-texto-suave: #9AA8C7; /* 6,89:1 sobre o cartão */ --gesti-primario-hover: var(--gesti-aqua); /* Sidebar — tema escuro */ --gesti-sidebar-fundo: var(--gesti-azul); --gesti-sidebar-borda-direita: none; --gesti-sidebar-texto: #9AA8C7; --gesti-sidebar-texto-ativo: var(--gesti-aqua); --gesti-sidebar-item-ativo: rgba(69,212,197,.14); --gesti-sidebar-grupo-titulo: rgba(232,236,244,.38); --gesti-sidebar-scrollbar: rgba(255,255,255,.15); --gesti-sombra-card: 0 1px 3px rgba(0,0,0,.5); } /* --------------------------------------------------------------------------- 3. Overrides Bootstrap O Bootstrap 5.3 é meio var-based e meio compilado, e isso decide o trabalho: · herdam sozinhos de --bs-*: .text-*, .bg-*, .bg-*-subtle, .text-*-emphasis, .border-*-subtle e o FUNDO de .text-bg-* · têm hex cravado no CSS compilado: .btn-*, .btn-outline-* e a COR DO TEXTO de .text-bg-* — por isso o bloco de compatibilidade mais abaixo. Sem esse bloco, remapear --bs-primary não mudaria nenhum dos 160 .btn-primary. Contraste: as cores cruas do manual reprovam como TEXTO sobre fundo claro (verde 2,52:1 · aqua 1,83:1 · laranja 2,49:1 · alerta 1,83:1). Por isso cada semântica tem duas formas — a sólida do manual para FUNDO e uma variante escurecida para TEXTO, calculada até 4,5:1. Ver infra/marca/derivar_paleta.py. --------------------------------------------------------------------------- */ :root { --bs-font-sans-serif: var(--gesti-fonte-corpo); --bs-border-radius: var(--gesti-raio); --bs-border-radius-lg: var(--gesti-raio-lg); --bs-border-radius-sm: var(--gesti-raio-sm); /* Corpo, bordas e links seguem a marca */ --bs-body-color: var(--gesti-texto); --bs-body-color-rgb: 7, 28, 75; --bs-emphasis-color: var(--gesti-azul); --bs-secondary-color: var(--gesti-texto-suave); --bs-border-color: var(--gesti-borda); --bs-link-color: #078477; /* verde tecnologia escurecido — 4,59:1 */ --bs-link-hover-color: #056054; --bs-link-color-rgb: 7, 132, 119; --bs-primary: #071C4B; --bs-primary-rgb: 7, 28, 75; --bs-primary-text-emphasis: #071C4B; --bs-primary-bg-subtle: #E1E4E9; --bs-primary-border-subtle: #BABFCD; --bs-secondary: #5A6A8A; --bs-secondary-rgb: 90, 106, 138; --bs-secondary-text-emphasis: #5A6A8A; --bs-secondary-bg-subtle: #EBEDF1; --bs-secondary-border-subtle: #D1D5DE; --bs-success: #12A150; --bs-success-rgb: 18, 161, 80; --bs-success-text-emphasis: #0F8743; --bs-success-bg-subtle: #E3F4EA; --bs-success-border-subtle: #BDE5CE; --bs-danger: #E5484D; --bs-danger-rgb: 229, 72, 77; --bs-danger-text-emphasis: #D34247; --bs-danger-bg-subtle: #FCE9EA; --bs-danger-border-subtle: #F8CCCD; --bs-warning: #FFB020; --bs-warning-rgb: 255, 176, 32; --bs-warning-text-emphasis: #9E6D14; --bs-warning-bg-subtle: #FFF6E4; --bs-warning-border-subtle: #FFE9C1; --bs-info: #0AB7A5; --bs-info-rgb: 10, 183, 165; --bs-info-text-emphasis: #078477; --bs-info-bg-subtle: #E2F6F4; --bs-info-border-subtle: #BAEBE6; --bs-dark: #040F2E; --bs-dark-rgb: 4, 15, 46; --bs-dark-text-emphasis: #040F2E; --bs-dark-bg-subtle: #E1E2E6; --bs-dark-border-subtle: #B9BCC4; } /* Tema escuro: as sólidas continuam valendo; muda o que é texto/realce. */ [data-bs-theme="dark"] { --bs-body-bg: var(--gesti-profundo); --bs-body-bg-rgb: 4, 15, 46; --bs-body-color: var(--gesti-texto); --bs-body-color-rgb: 232, 236, 244; --bs-emphasis-color: #FFFFFF; --bs-secondary-bg: var(--gesti-azul); --bs-secondary-bg-rgb: 7, 28, 75; --bs-tertiary-bg: #0A2359; --bs-secondary-color: rgba(232, 236, 244, .75); --bs-tertiary-color: rgba(232, 236, 244, .5); --bs-border-color: var(--gesti-borda); --bs-link-color: var(--gesti-aqua); --bs-link-hover-color: #7FE3D8; --bs-link-color-rgb: 69, 212, 197; --bs-primary-text-emphasis: #7C87A0; --bs-primary-bg-subtle: #051234; --bs-primary-border-subtle: #05153B; --bs-secondary-text-emphasis: #7B88A1; --bs-secondary-bg-subtle: #172342; --bs-secondary-border-subtle: #2B3857; --bs-success-text-emphasis: #12A150; --bs-success-bg-subtle: #072F35; --bs-success-border-subtle: #0A513D; --bs-danger-text-emphasis: #E75358; --bs-danger-bg-subtle: #361C35; --bs-danger-border-subtle: #69293C; --bs-warning-text-emphasis: #FFB020; --bs-warning-bg-subtle: #3B322B; --bs-warning-border-subtle: #755728; --bs-info-text-emphasis: #0AB7A5; --bs-info-bg-subtle: #053448; --bs-info-border-subtle: #075B64; --bs-dark-text-emphasis: #828797; --bs-dark-bg-subtle: #040F2E; --bs-dark-border-subtle: #040F2E; } /* --- Compatibilidade: o que o Bootstrap compilou com hex ------------------ */ .btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: #071C4B; --bs-btn-border-color: #071C4B; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #2A3C64; --bs-btn-hover-border-color: #2A3C64; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #435276; --bs-btn-active-border-color: #435276; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #071C4B; --bs-btn-disabled-border-color: #071C4B; --bs-btn-focus-shadow-rgb: 7, 28, 75; } .btn-outline-primary { --bs-btn-color: #071C4B; --bs-btn-border-color: #071C4B; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #071C4B; --bs-btn-hover-border-color: #071C4B; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #071C4B; --bs-btn-active-border-color: #071C4B; --bs-btn-disabled-color: #071C4B; --bs-btn-focus-shadow-rgb: 7, 28, 75; } .btn-secondary { --bs-btn-color: #FFFFFF; --bs-btn-bg: #5A6A8A; --bs-btn-border-color: #5A6A8A; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #717F9A; --bs-btn-hover-border-color: #717F9A; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #828EA6; --bs-btn-active-border-color: #828EA6; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #5A6A8A; --bs-btn-disabled-border-color: #5A6A8A; --bs-btn-focus-shadow-rgb: 90, 106, 138; } .btn-outline-secondary { --bs-btn-color: #5A6A8A; --bs-btn-border-color: #5A6A8A; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #5A6A8A; --bs-btn-hover-border-color: #5A6A8A; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #5A6A8A; --bs-btn-active-border-color: #5A6A8A; --bs-btn-disabled-color: #5A6A8A; --bs-btn-focus-shadow-rgb: 90, 106, 138; } .btn-success { --bs-btn-color: #071C4B; --bs-btn-bg: #12A150; --bs-btn-border-color: #12A150; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #0F8A45; --bs-btn-hover-border-color: #0F8A45; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #0E7A3D; --bs-btn-active-border-color: #0E7A3D; --bs-btn-disabled-color: #071C4B; --bs-btn-disabled-bg: #12A150; --bs-btn-disabled-border-color: #12A150; --bs-btn-focus-shadow-rgb: 18, 161, 80; } .btn-outline-success { --bs-btn-color: #0F8743; --bs-btn-border-color: #12A150; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #12A150; --bs-btn-hover-border-color: #12A150; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #12A150; --bs-btn-active-border-color: #12A150; --bs-btn-disabled-color: #0F8743; --bs-btn-focus-shadow-rgb: 18, 161, 80; } .btn-danger { --bs-btn-color: #FFFFFF; --bs-btn-bg: #D34247; --bs-btn-border-color: #D34247; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #B5393D; --bs-btn-hover-border-color: #B5393D; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #A03236; --bs-btn-active-border-color: #A03236; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #D34247; --bs-btn-disabled-border-color: #D34247; --bs-btn-focus-shadow-rgb: 229, 72, 77; } .btn-outline-danger { --bs-btn-color: #D34247; --bs-btn-border-color: #D34247; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #D34247; --bs-btn-hover-border-color: #D34247; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #D34247; --bs-btn-active-border-color: #D34247; --bs-btn-disabled-color: #D34247; --bs-btn-focus-shadow-rgb: 229, 72, 77; } .btn-warning { --bs-btn-color: #071C4B; --bs-btn-bg: #FFB020; --bs-btn-border-color: #FFB020; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #DB971C; --bs-btn-hover-border-color: #DB971C; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #C28618; --bs-btn-active-border-color: #C28618; --bs-btn-disabled-color: #071C4B; --bs-btn-disabled-bg: #FFB020; --bs-btn-disabled-border-color: #FFB020; --bs-btn-focus-shadow-rgb: 255, 176, 32; } .btn-outline-warning { --bs-btn-color: #9E6D14; --bs-btn-border-color: #FFB020; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #FFB020; --bs-btn-hover-border-color: #FFB020; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #FFB020; --bs-btn-active-border-color: #FFB020; --bs-btn-disabled-color: #9E6D14; --bs-btn-focus-shadow-rgb: 255, 176, 32; } .btn-info { --bs-btn-color: #071C4B; --bs-btn-bg: #0AB7A5; --bs-btn-border-color: #0AB7A5; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #099D8E; --bs-btn-hover-border-color: #099D8E; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #088B7D; --bs-btn-active-border-color: #088B7D; --bs-btn-disabled-color: #071C4B; --bs-btn-disabled-bg: #0AB7A5; --bs-btn-disabled-border-color: #0AB7A5; --bs-btn-focus-shadow-rgb: 10, 183, 165; } .btn-outline-info { --bs-btn-color: #078477; --bs-btn-border-color: #0AB7A5; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #0AB7A5; --bs-btn-hover-border-color: #0AB7A5; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #0AB7A5; --bs-btn-active-border-color: #0AB7A5; --bs-btn-disabled-color: #078477; --bs-btn-focus-shadow-rgb: 10, 183, 165; } .btn-dark { --bs-btn-color: #FFFFFF; --bs-btn-bg: #040F2E; --bs-btn-border-color: #040F2E; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #27314B; --bs-btn-hover-border-color: #27314B; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #404960; --bs-btn-active-border-color: #404960; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #040F2E; --bs-btn-disabled-border-color: #040F2E; --bs-btn-focus-shadow-rgb: 4, 15, 46; } .btn-outline-dark { --bs-btn-color: #040F2E; --bs-btn-border-color: #040F2E; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #040F2E; --bs-btn-hover-border-color: #040F2E; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #040F2E; --bs-btn-active-border-color: #040F2E; --bs-btn-disabled-color: #040F2E; --bs-btn-focus-shadow-rgb: 4, 15, 46; } /* .text-* usa a variante escurecida; a sólida reprovaria como texto. */ .text-primary { color: var(--bs-primary-text-emphasis) !important; } .text-secondary { color: var(--bs-secondary-text-emphasis) !important; } .text-success { color: var(--bs-success-text-emphasis) !important; } .text-danger { color: var(--bs-danger-text-emphasis) !important; } .text-warning { color: var(--bs-warning-text-emphasis) !important; } .text-info { color: var(--bs-info-text-emphasis) !important; } .text-dark { color: var(--bs-dark-text-emphasis) !important; } /* Em .text-bg-* a cor do texto vem cravada (#fff/#000) e ignora os tokens. */ .text-bg-primary { color: #FFFFFF !important; background-color: #071C4B !important; } .text-bg-secondary { color: #FFFFFF !important; background-color: #5A6A8A !important; } .text-bg-success { color: #071C4B !important; background-color: #12A150 !important; } .text-bg-danger { color: #FFFFFF !important; background-color: #D34247 !important; } .text-bg-warning { color: #071C4B !important; background-color: #FFB020 !important; } .text-bg-info { color: #071C4B !important; background-color: #0AB7A5 !important; } .text-bg-dark { color: #FFFFFF !important; background-color: #040F2E !important; } /* --- Correções do tema escuro -------------------------------------------- Duas coisas quebram quando a superfície é o próprio azul da marca: 1. `primary` é #071C4B, que no escuro É o fundo do cartão — um btn-primary ficaria invisível. No escuro o papel de "ação principal" passa para o aqua, que é como o manual expressa a marca sobre fundo escuro (pág. 7). 2. Os .btn-outline-* carregam a variante ESCURECIDA do texto, calculada para fundo claro; sobre o navy elas somem. Aqui usam a variante clareada, a mesma que alimenta --bs-*-text-emphasis no escuro. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --bs-primary: #45D4C5; --bs-primary-rgb: 69, 212, 197; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #071C4B; --bs-btn-bg: #45D4C5; --bs-btn-border-color: #45D4C5; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #3BB6A9; --bs-btn-hover-border-color: #3BB6A9; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #34A196; --bs-btn-active-border-color: #34A196; --bs-btn-disabled-color: #071C4B; --bs-btn-disabled-bg: #45D4C5; --bs-btn-disabled-border-color: #45D4C5; } [data-bs-theme="dark"] .text-bg-primary { color: #071C4B !important; background-color: #45D4C5 !important; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #45D4C5; --bs-btn-border-color: #45D4C5; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #45D4C5; --bs-btn-hover-border-color: #45D4C5; --bs-btn-active-color: #071C4B; --bs-btn-active-bg: #45D4C5; --bs-btn-disabled-color: #45D4C5; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #7B88A1; --bs-btn-border-color: #7B88A1; --bs-btn-disabled-color: #7B88A1; } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #12A150; --bs-btn-border-color: #12A150; --bs-btn-disabled-color: #12A150; } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #E75358; --bs-btn-border-color: #E75358; --bs-btn-disabled-color: #E75358; } [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #FFB020; --bs-btn-border-color: #FFB020; --bs-btn-disabled-color: #FFB020; } [data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #0AB7A5; --bs-btn-border-color: #0AB7A5; --bs-btn-disabled-color: #0AB7A5; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #828797; --bs-btn-border-color: #828797; --bs-btn-hover-color: #071C4B; --bs-btn-hover-bg: #828797; --bs-btn-hover-border-color: #828797; --bs-btn-disabled-color: #828797; } body { font-family: var(--gesti-fonte-corpo); font-size: var(--gesti-t-corpo); background-color: var(--gesti-fundo); color: var(--gesti-texto); } /* Títulos em Poppins SemiBold, nos tamanhos da pág. 5. O manual mede o título de seção da aplicação, não o de uma página de marketing — por isso a escala é bem mais contida que a padrão do Bootstrap (h1 40px, h2 32px). */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--gesti-fonte-titulo); font-weight: 600; line-height: 1.25; } h1, .h1 { font-size: var(--gesti-t-h1); } h2, .h2 { font-size: var(--gesti-t-h2); } h3, .h3 { font-size: 1rem; } h4, .h4, h5, .h5, h6, .h6 { font-size: var(--gesti-t-corpo); } /* Botões e rótulos de painel também são Poppins ("títulos, números de painéis, botões e destaques" — pág. 5). */ .btn { font-family: var(--gesti-fonte-titulo); font-weight: 500; } .gesti-cartao__cabecalho { font-family: var(--gesti-fonte-titulo); } /* --------------------------------------------------------------------------- 4. Skip link (acessibilidade) --------------------------------------------------------------------------- */ .gesti-pular { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: .5rem 1rem; background: var(--gesti-primario); color: #fff; border-radius: 0 0 var(--gesti-raio) var(--gesti-raio); text-decoration: none; font-weight: 600; transition: top var(--gesti-transicao); } .gesti-pular:focus { top: 0; } /* --------------------------------------------------------------------------- 5. Layout público (login, recuperação, MFA) --------------------------------------------------------------------------- */ .gesti-publico { min-height: 100vh; display: flex; flex-direction: column; background: var(--gesti-fundo); } /*
ocupa o espaço restante e centraliza o card */ .gesti-publico > main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .gesti-auth-card { width: 100%; max-width: 420px; background: var(--gesti-fundo-card); border: 1px solid var(--gesti-borda); border-radius: var(--gesti-raio-lg); box-shadow: var(--gesti-sombra-card); padding: 2rem 2rem 1.75rem; } .gesti-auth-card__logo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.75rem; } /* A marca do cartão de login é clicável (volta à página inicial). Precisa de uma pista visual, senão ninguém descobre — mas discreta, porque a ação principal da tela é entrar, não sair. */ .gesti-auth-card__marca { display: inline-block; border-radius: var(--gesti-raio-sm); transition: opacity var(--gesti-transicao); } .gesti-auth-card__marca:hover, .gesti-auth-card__marca:focus-visible { opacity: .78; } .gesti-auth-logo { display: block; max-height: 58px; max-width: 190px; width: auto; height: auto; } .gesti-auth-card__titulo { font-family: var(--gesti-fonte-titulo); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 .125rem; color: var(--gesti-texto); } .gesti-auth-card__subtitulo { font-size: .8125rem; color: var(--gesti-texto-suave); margin: 0; } /* --------------------------------------------------------------------------- 6. Grupo de input com ícone --------------------------------------------------------------------------- */ .gesti-grupo-input { position: relative; } .gesti-grupo-input .form-control { padding-right: 2.75rem; } .gesti-grupo-input__toggle { position: absolute; top: 50%; right: .625rem; transform: translateY(-50%); background: none; border: none; padding: .25rem; color: var(--gesti-texto-suave); cursor: pointer; line-height: 1; transition: color var(--gesti-transicao); } .gesti-grupo-input__toggle:hover { color: var(--gesti-texto); } /* --------------------------------------------------------------------------- 7. Campo obrigatório --------------------------------------------------------------------------- */ .gesti-obrigatorio::after { content: ' *'; color: var(--bs-danger, #dc3545); font-weight: 700; } /* --------------------------------------------------------------------------- 8. Alertas proprietários --------------------------------------------------------------------------- */ .gesti-alerta { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem 1rem; border-radius: var(--gesti-raio); font-size: .875rem; line-height: 1.4; } .gesti-alerta--perigo { background: #fff3f3; border: 1px solid #f5c6cb; color: #842029; } [data-bs-theme="dark"] .gesti-alerta--perigo { background: rgba(220,53,69,.15); border-color: rgba(220,53,69,.3); color: #f8d7da; } /* --------------------------------------------------------------------------- 9. Cabeçalho de página (.gesti-pagina-cabecalho) --------------------------------------------------------------------------- */ .gesti-pagina-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; } .gesti-pagina-cabecalho__titulo { font-family: var(--gesti-fonte-titulo); font-size: var(--gesti-t-h1); font-weight: 700; margin: 0 0 .125rem; color: var(--gesti-texto); } .gesti-pagina-cabecalho__subtitulo { font-size: .8125rem; color: var(--gesti-texto-suave); margin: 0; } .gesti-pagina-cabecalho__acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } /* --------------------------------------------------------------------------- 10. Grade de campos de formulário --------------------------------------------------------------------------- */ .gesti-grade-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gesti-campo--curto { grid-column: span 1; } .gesti-campo--medio { grid-column: span 2; } .gesti-campo--largo { grid-column: span 3; } .gesti-campo--total { grid-column: span 4; } .gesti-rbac-opcao { align-items: center; display: flex; gap: .375rem; margin-bottom: 0; min-width: 0; overflow: hidden; padding: .25rem .125rem; width: 100%; } .gesti-rbac-opcao__check { flex: 0 0 auto; float: none; margin-left: 0; margin-top: 0; } .gesti-rbac-opcao__rotulo { flex: 0 1 auto; font-size: .875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gesti-rbac-opcao__ajuda { align-items: center; border: 1px solid var(--gesti-borda); border-radius: 999px; color: var(--gesti-texto-suave); cursor: help; display: inline-flex; flex: 0 0 auto; font-size: .6875rem; font-weight: 700; height: 1rem; justify-content: center; line-height: 1; width: 1rem; } @media (max-width: 991.98px) { .gesti-grade-campos { grid-template-columns: repeat(2, 1fr); } .gesti-campo--largo { grid-column: span 2; } .gesti-campo--total { grid-column: span 2; } } @media (max-width: 575.98px) { .gesti-grade-campos { grid-template-columns: 1fr; } .gesti-campo--curto, .gesti-campo--medio, .gesti-campo--largo, .gesti-campo--total { grid-column: span 1; } } /* --------------------------------------------------------------------------- 11. Cartão (.gesti-cartao) --------------------------------------------------------------------------- */ .gesti-cartao { background: var(--gesti-fundo-card); border: 1px solid var(--gesti-borda); border-radius: var(--gesti-raio); box-shadow: var(--gesti-sombra-card); } .gesti-cartao__cabecalho { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gesti-borda); font-weight: 600; } .gesti-cartao__corpo { padding: 1.25rem; } /* --------------------------------------------------------------------------- 11.1 Lista de dados (.gesti-dados) — rótulo à esquerda, valor ao lado --------------------------------------------------------------------------- POR QUE NÃO USAR `
` COM `col-sm-*` As colunas do Bootstrap são PERCENTUAIS. Num monitor de 1920px, um `col-sm-5` dá quase 800px de faixa ao rótulo, e o valor aparece no meio da tela — o olho perde a linha entre "Nome completo" e o nome. Quanto maior o monitor, pior fica, que é o contrário do esperado. Aqui a coluna do rótulo é medida em `rem` e a lista inteira tem teto de largura: rótulo e valor ficam juntos, e sobra branco à direita em vez de vão no meio. Também acaba com o `col-sm-3/4/5` escolhido a olho em cada bloco — o alinhamento passa a ser o mesmo em toda a ficha. --------------------------------------------------------------------------- */ .gesti-dados { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .625rem 1.5rem; max-width: 52rem; margin-bottom: 0; } .gesti-dados > dt { font-size: .875rem; font-weight: 500; color: var(--gesti-texto-suave); } .gesti-dados > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; /* matrícula de certidão não estoura o cartão */ } /* No celular o par vira empilhado: rótulo em cima, valor embaixo. */ @media (max-width: 575.98px) { .gesti-dados { grid-template-columns: 1fr; gap: 0; } .gesti-dados > dt { margin-top: .75rem; } .gesti-dados > dt:first-child { margin-top: 0; } } /* --------------------------------------------------------------------------- 12. Layout da área logada (.gesti-app) --------------------------------------------------------------------------- */ /* Variáveis da altura do cabeçalho */ :root { --gesti-cabecalho-altura: 60px; } .gesti-app { display: block; min-height: 100vh; background: var(--gesti-fundo); } /* --------------------------------------------------------------------------- 13. Cabeçalho fixo (.gesti-cabecalho) --------------------------------------------------------------------------- */ .gesti-cabecalho { position: fixed; top: 0; left: 0; right: 0; height: var(--gesti-cabecalho-altura); z-index: 1030; display: flex; align-items: center; gap: .5rem; padding: 0 1rem; background: var(--gesti-fundo-card); border-bottom: 1px solid var(--gesti-borda); box-shadow: var(--gesti-sombra-card); } .gesti-cabecalho__hamburguer { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: .375rem .5rem; color: var(--gesti-texto); font-size: 1.25rem; cursor: pointer; border-radius: var(--gesti-raio-sm); line-height: 1; transition: background var(--gesti-transicao); } .gesti-cabecalho__hamburguer:hover { background: var(--gesti-fundo); } .gesti-cabecalho__marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--gesti-texto); font-family: var(--gesti-fonte-titulo); font-weight: 700; font-size: 1.125rem; flex-shrink: 0; } .gesti-cabecalho__logo { height: 30px; width: auto; } /* Marca — o lockup horizontal JÁ traz a palavra "Gest+", então o cabeçalho não repete o nome em texto. Em fundo escuro o manual (pág. 7) manda usar a versão branca monocromática: as duas imagens ficam no HTML e o tema escolhe. */ .gesti-marca-escura { display: none; } [data-bs-theme="dark"] .gesti-marca-clara { display: none; } [data-bs-theme="dark"] .gesti-marca-escura { display: block; } .gesti-cabecalho__acoes { margin-left: auto; display: flex; align-items: center; gap: .375rem; } .gesti-cabecalho__btn-icon { background: none; border: none; padding: .375rem .5rem; color: var(--gesti-texto-suave); font-size: 1rem; cursor: pointer; border-radius: var(--gesti-raio-sm); line-height: 1; transition: color var(--gesti-transicao), background var(--gesti-transicao); } .gesti-cabecalho__btn-icon:hover { color: var(--gesti-texto); background: var(--gesti-fundo); } /* --------------------------------------------------------------------------- 14. Avatar (.gesti-avatar) --------------------------------------------------------------------------- */ .gesti-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: .75rem; font-weight: 700; letter-spacing: .02em; border: none; cursor: pointer; flex-shrink: 0; transition: opacity var(--gesti-transicao); } .gesti-avatar:hover { opacity: .85; } .gesti-avatar--primario { background: var(--gesti-primario); color: #fff; } .gesti-avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; } .gesti-avatar--md { width: 48px; height: 48px; font-size: 1rem; } .gesti-avatar--sm { width: 28px; height: 28px; font-size: .6875rem; } /* Esconde seta do dropdown no avatar */ .gesti-avatar.dropdown-toggle::after { display: none; } /* Bloco de identificação ao lado do avatar (nome + papel/município) */ .gesti-cabecalho__usuario-botao { background: none; border: none; padding: .25rem .375rem; border-radius: var(--gesti-raio-sm); display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; color: inherit; max-width: 320px; transition: background var(--gesti-transicao); } .gesti-cabecalho__usuario-botao:hover, .gesti-cabecalho__usuario-botao[aria-expanded="true"] { background: var(--gesti-fundo); } .gesti-cabecalho__usuario-botao.dropdown-toggle::after { display: none; } .gesti-cabecalho__usuario-texto { flex-direction: column; align-items: flex-end; line-height: 1.15; min-width: 0; } .gesti-cabecalho__usuario-nome { font-size: .8125rem; font-weight: 600; color: var(--gesti-texto); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gesti-cabecalho__usuario-meta { font-size: .6875rem; color: var(--gesti-texto-suave); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; } .gesti-cabecalho__badge-tenant { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* --------------------------------------------------------------------------- 15. Sidebar (.gesti-sidebar) --------------------------------------------------------------------------- */ .gesti-sidebar { position: fixed; top: var(--gesti-cabecalho-altura); left: 0; bottom: 0; width: var(--gesti-sidebar-largura); z-index: 1020; background: var(--gesti-sidebar-fundo); border-right: var(--gesti-sidebar-borda-direita); overflow-y: auto; overflow-x: hidden; transition: width var(--gesti-transicao), transform var(--gesti-transicao); scrollbar-width: thin; scrollbar-color: var(--gesti-sidebar-scrollbar) transparent; } /* Estado recolhido (via classe no ) */ .sidebar-recolhida .gesti-sidebar { width: var(--gesti-sidebar-largura-recolhida); } .sidebar-recolhida .gesti-sidebar__rotulo, .sidebar-recolhida .gesti-sidebar__grupo-titulo { opacity: 0; pointer-events: none; white-space: nowrap; } /* No modo só-ícones o título do grupo some, e com ele o único jeito de reabrir. Um grupo recolhido deixaria seus itens INALCANÇÁVEIS. Por isso, aqui, todo grupo mostra os itens — a preferência continua gravada e volta a valer assim que a sidebar for expandida. `visibility` (e não só `opacity`) tira o botão da árvore de acessibilidade, para o leitor de tela não anunciar um controle que não faz nada neste modo. */ .sidebar-recolhida .gesti-sidebar__grupo-titulo { visibility: hidden; } .sidebar-recolhida .gesti-sidebar__grupo-itens[hidden] { display: block; } .gesti-sidebar__lista { list-style: none; margin: 0; padding: .5rem 0 2rem; } /* Grupos colapsáveis — o menu do super admin tem 6 grupos e 52 itens, e recolher o que não se usa no dia é a diferença entre varrer e achar. */ .gesti-sidebar__grupo { list-style: none; } .gesti-sidebar__grupo-itens { list-style: none; margin: 0; padding: 0; } /* O título virou