/* ============================================================================= 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"] { /* Marca */ --gesti-primario: #0d6efd; --gesti-primario-hover: #0b5ed7; --gesti-secundario: #6c757d; /* Superfície */ --gesti-fundo: #f8f9fa; --gesti-fundo-card: #ffffff; --gesti-borda: #dee2e6; /* Texto */ --gesti-texto: #212529; --gesti-texto-suave: #6c757d; /* Sidebar — tema claro */ --gesti-sidebar-largura: 260px; --gesti-sidebar-largura-recolhida: 68px; --gesti-sidebar-fundo: #ffffff; --gesti-sidebar-borda-direita: 1px solid #dee2e6; --gesti-sidebar-texto: #64748b; --gesti-sidebar-texto-ativo: #0d6efd; --gesti-sidebar-item-ativo: rgba(13,110,253,.1); --gesti-sidebar-grupo-titulo: #94a3b8; --gesti-sidebar-scrollbar: rgba(0,0,0,.12); /* Tipografia */ --gesti-fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif; --gesti-fonte-titulo: 'Raleway', 'Inter', system-ui, sans-serif; /* 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 */ --gesti-raio: .5rem; --gesti-raio-lg: .75rem; --gesti-raio-sm: .25rem; } /* --------------------------------------------------------------------------- 2. Tokens — tema escuro --------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --gesti-fundo: #121416; --gesti-fundo-card: #1e2124; --gesti-borda: #373b3e; --gesti-texto: #dee2e6; --gesti-texto-suave: #9ca3af; /* Sidebar — tema escuro */ --gesti-sidebar-fundo: #1a1d20; --gesti-sidebar-borda-direita: none; --gesti-sidebar-texto: #adb5bd; --gesti-sidebar-texto-ativo: #ffffff; --gesti-sidebar-item-ativo: rgba(255,255,255,.1); --gesti-sidebar-grupo-titulo: rgba(255,255,255,.35); --gesti-sidebar-scrollbar: rgba(255,255,255,.15); --gesti-sombra-card: 0 1px 3px rgba(0,0,0,.4); } /* --------------------------------------------------------------------------- 3. Overrides Bootstrap --------------------------------------------------------------------------- */ :root { --bs-primary: var(--gesti-primario); --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); } body { font-family: var(--gesti-fonte-corpo); background-color: var(--gesti-fundo); color: var(--gesti-texto); } /* --------------------------------------------------------------------------- 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; } .gesti-auth-logo { display: block; max-height: 72px; max-width: 72px; 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: 1.375rem; 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; } /* --------------------------------------------------------------------------- 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: 32px; width: auto; } .gesti-cabecalho__nome { letter-spacing: -.01em; } .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; } /* Esconde seta do dropdown no avatar */ .gesti-avatar.dropdown-toggle::after { display: none; } /* --------------------------------------------------------------------------- 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; } .gesti-sidebar__lista { list-style: none; margin: 0; padding: .5rem 0 2rem; } .gesti-sidebar__grupo-titulo { padding: 1.25rem 1rem .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gesti-sidebar-grupo-titulo); transition: opacity var(--gesti-transicao); white-space: nowrap; overflow: hidden; } .gesti-sidebar__item { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; margin: .125rem .5rem; border-radius: var(--gesti-raio-sm); color: var(--gesti-sidebar-texto); text-decoration: none; font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background var(--gesti-transicao), color var(--gesti-transicao); } .gesti-sidebar__item:hover { background: rgba(255,255,255,.08); color: var(--gesti-sidebar-texto-ativo); } .gesti-sidebar__item--ativo { background: var(--gesti-sidebar-item-ativo); color: var(--gesti-sidebar-texto-ativo); } .gesti-sidebar__icone { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; } .gesti-sidebar__rotulo { transition: opacity var(--gesti-transicao); } /* Botão de recolher sidebar (desktop) */ /* --------------------------------------------------------------------------- 16. Scrim (overlay mobile) --------------------------------------------------------------------------- */ .gesti-scrim { display: none; position: fixed; inset: 0; z-index: 1010; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } .gesti-scrim.visivel { display: block; } /* --------------------------------------------------------------------------- 17. Área de conteúdo principal (.gesti-conteudo / .gesti-main) --------------------------------------------------------------------------- */ .gesti-conteudo { margin-left: var(--gesti-sidebar-largura); margin-top: var(--gesti-cabecalho-altura); min-height: calc(100vh - var(--gesti-cabecalho-altura)); display: flex; flex-direction: column; transition: margin-left var(--gesti-transicao); } .sidebar-recolhida .gesti-conteudo { margin-left: var(--gesti-sidebar-largura-recolhida); } .gesti-main { flex: 1; padding: 1.5rem; } /* --------------------------------------------------------------------------- 18. Responsividade (mobile/tablet) --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .gesti-sidebar { transform: translateX(-100%); width: var(--gesti-sidebar-largura) !important; z-index: 1040; } .gesti-sidebar.aberta { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.3); } .gesti-sidebar__rotulo, .gesti-sidebar__grupo-titulo { opacity: 1 !important; pointer-events: auto !important; } .gesti-conteudo { margin-left: 0 !important; } } /* --------------------------------------------------------------------------- 19. Tabela (.gesti-tabela) --------------------------------------------------------------------------- */ .gesti-tabela { margin-bottom: 0; font-size: .875rem; } .gesti-tabela thead th { background: var(--gesti-fundo); color: var(--gesti-texto-suave); font-weight: 600; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid var(--gesti-borda); padding: .625rem .75rem; white-space: nowrap; } .gesti-tabela tbody td { padding: .75rem; vertical-align: middle; border-color: var(--gesti-borda); } .gesti-tabela tbody tr:last-child td { border-bottom: 0; } .gesti-tabela code { background: var(--gesti-fundo); padding: .125rem .375rem; border-radius: var(--gesti-raio-sm); font-size: .8125rem; } /* ============================================================ STEPPER (Wizard de cadastro) ============================================================ */ .gesti-stepper { background: var(--gesti-cartao); border: 1px solid var(--gesti-borda); border-radius: var(--gesti-raio); padding: 1rem; } .gesti-stepper__lista { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; gap: .5rem; overflow-x: auto; } .gesti-stepper__item { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; position: relative; color: var(--gesti-texto-suave); font-size: .875rem; } .gesti-stepper__item:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--gesti-borda); margin-left: .5rem; } .gesti-stepper__numero { width: 2rem; height: 2rem; border-radius: 50%; background: var(--gesti-fundo); border: 2px solid var(--gesti-borda); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; flex-shrink: 0; } .gesti-stepper__rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gesti-stepper__item--atual .gesti-stepper__numero { background: var(--bs-primary, #0d6efd); color: #fff; border-color: var(--bs-primary, #0d6efd); } .gesti-stepper__item--atual { color: var(--bs-primary, #0d6efd); font-weight: 600; } .gesti-stepper__item--completo .gesti-stepper__numero { background: var(--bs-success, #198754); color: #fff; border-color: var(--bs-success, #198754); } .gesti-stepper__item--completo:not(:last-child)::after { background: var(--bs-success, #198754); } @media (max-width: 768px) { .gesti-stepper__rotulo { display: none; } }