/* Estrutura de Layout Responsiva */ .app-container { display: flex; min-height: 100vh; width: 100%; } /* 1. BARRA LATERAL (SIDEBAR) Sempre escura (grafite) nos dois temas. Recolhível para só ícones: a classe "sidebar-recolhida" no troca --sidebar-largura, e a barra superior e o conteúdo acompanham sozinhos. */ html.sidebar-recolhida { --sidebar-largura: var(--sidebar-largura-colapsada); } .sidebar { width: var(--sidebar-largura); background-color: var(--sidebar-fundo); border-right: 1px solid var(--sidebar-borda); color: var(--sidebar-texto); position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease; display: flex; flex-direction: column; } .sidebar-logo { height: var(--header-altura); display: flex; align-items: center; padding: 0 1.25rem; gap: 0.75rem; flex-shrink: 0; } .sidebar-logo a { display: flex; align-items: center; min-width: 0; } .sidebar-logo .logo-completo { max-height: 32px; max-width: 100%; object-fit: contain; } .sidebar-logo .logo-icone { display: none; width: 30px; height: 30px; border-radius: 8px; } /* Gatilho da busca (Ctrl+K) no topo do menu */ .sidebar-busca { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0.85rem 0.5rem; height: 38px; padding: 0 0.6rem 0 0.75rem; border-radius: var(--borda-raio-sm); border: 1px solid var(--sidebar-borda); background-color: rgba(255, 255, 255, 0.04); color: var(--sidebar-texto); font-size: 0.85rem; cursor: pointer; transition: var(--transicao-rapida); flex-shrink: 0; } .sidebar-busca:hover { background-color: var(--sidebar-hover); color: var(--sidebar-texto-forte); } .sidebar-busca svg { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-busca > span:first-of-type { flex: 1; text-align: left; } .sidebar-busca .atalho-tecla { background-color: transparent; border-color: var(--sidebar-borda); color: var(--sidebar-texto); } .sidebar-menu { list-style: none; padding: 0.5rem 0.85rem 1rem; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--sidebar-borda) transparent; } .sidebar-menu li a { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; color: var(--sidebar-texto); border-radius: var(--borda-raio-sm); font-weight: 500; font-size: 0.875rem; white-space: nowrap; transition: var(--transicao-rapida); } .sidebar-menu li a:hover { background-color: var(--sidebar-hover); color: var(--sidebar-texto-forte); } .sidebar-menu li.ativo a { background-color: rgba(237, 73, 18, 0.14); color: #fff; } .sidebar-menu li.ativo a::before { content: ""; position: absolute; left: -0.85rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background-color: var(--cor-marca); } .sidebar-menu li.ativo a svg { color: #ff7a45; } .sidebar-menu li a svg { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-menu li a > span:first-of-type { overflow: hidden; text-overflow: ellipsis; } .sidebar-rodape { padding: 0.85rem; border-top: 1px solid var(--sidebar-borda); display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .sidebar-info-usuario { display: flex; flex-direction: column; overflow: hidden; min-width: 0; line-height: 1.3; } .sidebar-info-usuario span { font-weight: 600; font-size: 0.85rem; color: var(--sidebar-texto-forte); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .sidebar-info-usuario small { font-size: 0.72rem; color: var(--sidebar-texto); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Botão de recolher/expandir o menu (só desktop) */ .btn-recolher-menu { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--borda-raio-sm); border: 0; background: transparent; color: var(--sidebar-texto); cursor: pointer; flex-shrink: 0; } .btn-recolher-menu:hover { background-color: var(--sidebar-hover); color: var(--sidebar-texto-forte); } .btn-recolher-menu svg { width: 18px; height: 18px; transition: transform 0.2s ease; } /* --- Estado recolhido (só ícones) --- */ @media (min-width: 1025px) { html.sidebar-recolhida .sidebar-logo { justify-content: center; padding: 0; } html.sidebar-recolhida .sidebar-logo .logo-completo { display: none; } html.sidebar-recolhida .sidebar-logo .logo-icone { display: block; } html.sidebar-recolhida .sidebar-busca { justify-content: center; padding: 0; margin-left: 0.85rem; margin-right: 0.85rem; } html.sidebar-recolhida .sidebar-busca > span, html.sidebar-recolhida .sidebar-busca .atalho-tecla, html.sidebar-recolhida .sidebar-menu li a > span:first-of-type, html.sidebar-recolhida .sidebar-info-usuario, html.sidebar-recolhida .sidebar-rodape .avatar, html.sidebar-recolhida .sidebar-sair { display: none; } html.sidebar-recolhida .sidebar-menu li a { justify-content: center; padding: 0.6rem 0; } html.sidebar-recolhida .sidebar-secao { font-size: 0; margin: 0.75rem 0.5rem 0.35rem; padding: 0; border-top: 1px solid var(--sidebar-borda); } html.sidebar-recolhida .selo-novo { position: absolute; top: 4px; right: 8px; } html.sidebar-recolhida .selo-novo svg { width: 10px; height: 10px; fill: var(--cor-erro); } html.sidebar-recolhida .sidebar-rodape { justify-content: center; } html.sidebar-recolhida .btn-recolher-menu svg { transform: rotate(180deg); } } /* 2. BARRA SUPERIOR (TOPBAR) */ .topbar { height: var(--header-altura); background-color: var(--cor-painel-transparente); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--cor-borda); position: fixed; top: 0; right: 0; left: var(--sidebar-largura); z-index: 90; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; transition: background-color 0.3s ease, border-color 0.3s ease; } .topbar-esquerda { display: flex; align-items: center; gap: 1rem; } .btn-menu-toggle { background: none; border: none; cursor: pointer; display: none; /* Oculto em desktop */ color: var(--cor-texto); } .topbar-titulo { font-size: 1.1rem; font-weight: 600; color: var(--cor-texto); font-family: var(--fonte-titulo); } .topbar-direita { display: flex; align-items: center; gap: 0.5rem; } .topbar-direita .topbar-perfil { margin-left: 0.5rem; } .topbar-esquerda { min-width: 0; } .topbar-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .topbar { padding: 0 1rem; } .topbar-titulo { font-size: 1.05rem; } .conteudo-interno { padding: 1.25rem 1rem; } } /* Tema Toggle */ .btn-tema { background: none; border: none; cursor: pointer; color: var(--cor-texto-secundario); display: flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 50%; transition: var(--transicao-rapida); } .btn-tema:hover { background-color: var(--cor-fundo); color: var(--cor-texto); } .topbar-direita .btn-icone, .topbar-direita .btn-tema { color: var(--cor-texto-secundario); width: 38px; height: 38px; border-radius: var(--borda-raio-sm); } .topbar-direita .btn-icone:hover, .topbar-direita .btn-tema:hover { color: var(--cor-texto); background-color: var(--cor-fundo); } .topbar-direita .btn-icone svg, .topbar-direita .btn-tema svg { width: 19px; height: 19px; } .topbar-perfil { display: flex; align-items: center; gap: 0.75rem; } .topbar-perfil-nome { font-size: 0.9rem; font-weight: 600; color: var(--cor-texto); } @media (max-width: 768px) { .topbar-perfil-nome { display: none; } } /* Gatilho da busca global: parece um campo, abre a paleta (Ctrl+K) */ .gatilho-busca { display: flex; align-items: center; gap: 0.6rem; width: 300px; height: 40px; padding: 0 0.6rem 0 0.9rem; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--borda-raio-sm); color: var(--cor-texto-mutado); font-size: 0.875rem; cursor: pointer; transition: var(--transicao-rapida); } .gatilho-busca:hover { border-color: var(--cor-borda-foco); color: var(--cor-texto-secundario); } .gatilho-busca svg { width: 16px; height: 16px; flex-shrink: 0; } .gatilho-busca span:first-of-type { flex: 1; text-align: left; } .atalho-tecla { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.4rem; font-size: 0.7rem; font-weight: 600; font-family: var(--fonte-principal); color: var(--cor-texto-secundario); background-color: var(--cor-painel); border: 1px solid var(--cor-borda); border-radius: 5px; white-space: nowrap; } /* No desktop a busca fica no topo do menu lateral; com o menu escondido (tablet/celular) aparece a lupa na barra superior. */ .gatilho-busca-icone { display: none; } @media (max-width: 1024px) { .gatilho-busca-icone { display: flex; } } /* Notificações (sininho) */ .notificacao-container { position: relative; } .badge-notificacao { position: absolute; top: 2px; right: 2px; background-color: var(--cor-erro); color: white; font-size: 0.7rem; font-weight: bold; border-radius: 99px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } .notificacoes-dropdown { position: absolute; top: 48px; right: 0; width: 320px; max-width: calc(100vw - 32px); z-index: 1000; border-radius: var(--borda-raio-md); box-shadow: var(--sombra-forte); padding: 0.75rem 0; } .notificacoes-cabecalho { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--cor-borda); margin-bottom: 0.5rem; } .notificacoes-cabecalho span { font-weight: 600; font-size: 0.9rem; color: var(--cor-texto); } .btn-limpar-notificacoes { background: none; border: none; color: var(--cor-primaria); font-size: 0.75rem; cursor: pointer; font-weight: 500; padding: 0; } .notificacoes-lista { max-height: 250px; overflow-y: auto; } .notificacao-vazia { padding: 1.5rem; text-align: center; color: var(--cor-texto-secundario); font-size: 0.85rem; } .notificacao-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--cor-borda); cursor: pointer; transition: background 0.2s; font-size: 0.85rem; } .notificacao-item.nao-lida { background: rgba(var(--cor-primaria-rgb), 0.05); font-weight: 500; } .notificacao-item.lida { opacity: 0.7; } .notificacao-item:hover { background: var(--cor-borda); } .notificacao-mensagem { margin-bottom: 0.25rem; color: var(--cor-texto); } .notificacao-tempo { font-size: 0.75rem; color: var(--cor-texto-secundario); } /* Botão "Instalar app" (PWA) — só aparece quando o navegador oferece */ .btn-instalar-app { display: inline-flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 0.85rem; border-radius: 99px; border: 1px solid rgba(var(--cor-primaria-rgb), 0.35); background-color: rgba(var(--cor-primaria-rgb), 0.08); color: var(--cor-primaria); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transicao-rapida); } .btn-instalar-app:hover { background-color: rgba(var(--cor-primaria-rgb), 0.15); } .btn-instalar-app svg { width: 16px; height: 16px; } @media (max-width: 600px) { .btn-instalar-app span { display: none; } .btn-instalar-app { padding: 0 0.6rem; } } /* Título e rótulos do menu lateral */ .sidebar-logo img { max-height: 35px; max-width: 100%; object-fit: contain; } .sidebar-secao { margin: 1.1rem 0 0.3rem; padding-left: 0.75rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #78716c; font-weight: 700; } .sidebar-sair { margin-left: auto; color: var(--sidebar-texto); display: flex; align-items: center; padding: 0.35rem; border-radius: var(--borda-raio-sm); } .sidebar-sair:hover { color: #f87171; background-color: rgba(248, 113, 113, 0.12); } .sidebar-sair svg { width: 18px; height: 18px; } /* ========================================== BUSCA GLOBAL (paleta Ctrl+K) ========================================== */ .busca-paleta { align-items: flex-start; padding: 12vh 16px 16px; } .busca-caixa { width: 100%; max-width: 640px; background-color: var(--cor-painel); border: 1px solid var(--cor-borda); border-radius: var(--borda-raio-md); box-shadow: var(--sombra-forte); overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform 0.2s ease; } .busca-paleta.ativo .busca-caixa { transform: none; } .busca-campo-linha { display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; border-bottom: 1px solid var(--cor-borda); } .busca-campo-linha svg { width: 20px; height: 20px; color: var(--cor-texto-mutado); flex-shrink: 0; } .busca-campo { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: var(--cor-texto); font-size: 1.05rem; } .busca-campo::placeholder { color: var(--cor-texto-mutado); } .busca-resultados { max-height: min(60vh, 460px); overflow-y: auto; padding: 0.5rem; } .busca-grupo + .busca-grupo { margin-top: 0.35rem; } .busca-grupo-titulo { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-texto-mutado); } .busca-grupo-titulo svg { width: 13px; height: 13px; } .busca-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--borda-raio-sm); color: var(--cor-texto); } .busca-item > svg { width: 15px; height: 15px; color: var(--cor-texto-mutado); flex-shrink: 0; opacity: 0; } .busca-item.ativo { background-color: rgba(var(--cor-primaria-rgb), 0.08); color: var(--cor-texto); } .busca-item.ativo > svg { opacity: 1; } .busca-item-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; } .busca-item-textos strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca-item-textos small { font-size: 0.78rem; color: var(--cor-texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca-esqueleto { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem 0.75rem; } .busca-esqueleto .esqueleto:first-child { width: 45%; height: 12px; } .busca-esqueleto .esqueleto:last-child { width: 75%; height: 10px; } .busca-vazio { padding: 2.5rem 1rem; text-align: center; color: var(--cor-texto-secundario); font-size: 0.9rem; } .busca-vazio svg { width: 32px; height: 32px; margin: 0 auto 0.75rem; display: block; opacity: 0.5; } .busca-rodape { display: flex; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1rem; border-top: 1px solid var(--cor-borda); background-color: var(--cor-fundo); font-size: 0.75rem; color: var(--cor-texto-mutado); } .busca-rodape span { display: inline-flex; align-items: center; gap: 0.35rem; } @media (max-width: 600px) { .busca-paleta { padding-top: 16px; } .busca-rodape { display: none; } } /* 3. CONTEÚDO PRINCIPAL (MAIN CONTENT) */ .conteudo-principal { flex: 1; min-width: 0; margin-left: var(--sidebar-largura); padding-top: var(--header-altura); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.2s ease; } .topbar { transition: left 0.2s ease, background-color 0.3s ease; } .conteudo-interno { padding: 1.75rem 2rem 2.5rem; flex: 1; max-width: 1440px; width: 100%; margin: 0 auto; } /* RESPONSIVIDADE */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); } .sidebar.ativo { transform: translateX(0); } .topbar { left: 0; } .conteudo-principal { margin-left: 0; } .btn-menu-toggle { display: flex; align-items: center; } /* No tablet/celular o menu vira gaveta: sempre expandido, com sombra */ .sidebar { width: 272px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } .btn-recolher-menu { display: none; } } /* Fundo escurecido atrás do menu aberto no celular */ .sidebar-fundo { display: none; } @media (max-width: 1024px) { .sidebar.ativo + .sidebar-fundo { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(20, 17, 15, 0.45); } } /* 4. NAVEGAÇÃO INFERIOR (celular) — atalhos para quem está na obra */ .nav-inferior { display: none; } @media (max-width: 768px) { .nav-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background-color: var(--cor-painel); border-top: 1px solid var(--cor-borda); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05); } .nav-inferior a, .nav-inferior button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--cor-texto-mutado); font-size: 0.68rem; font-weight: 600; font-family: inherit; cursor: pointer; } .nav-inferior svg { width: 21px; height: 21px; } .nav-inferior .ativo { color: var(--cor-primaria); } .conteudo-interno { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* O que já está na barra inferior sai da superior */ .topbar-direita .gatilho-busca-icone, .topbar-direita .btn-ouvidoria { display: none; } .toasts { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); } } /* ========================================== 3. ESTILOS DO SUBMENU (SIDEBAR) ========================================== */ .sidebar-submenu { list-style: none; padding-left: 2.2rem; margin-top: 0.25rem; display: none; flex-direction: column; gap: 0.25rem; } .sidebar-submenu li a.sub-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem !important; color: var(--cor-texto-secundario) !important; font-size: 0.85rem !important; font-weight: 550 !important; border-radius: var(--borda-raio-sm) !important; background-color: transparent !important; transition: var(--transicao-rapida) !important; text-decoration: none; } .sidebar-submenu li a.sub-link:hover { background-color: var(--cor-fundo) !important; color: var(--cor-primaria) !important; } .sidebar-submenu li.sub-ativo a.sub-link { background-color: rgba(var(--cor-primaria-rgb), 0.08) !important; color: var(--cor-primaria) !important; font-weight: 600 !important; } /* ========================================== 4. ESTILOS DE IMPRESSÃO (PRINT MEDIA) ========================================== */ @media print { /* Ocultar elementos desnecessários na folha de impressão */ .sidebar, .topbar, .btn, .no-print, .alerta, #btn-tema, .notificacao-container, .topbar-direita { display: none !important; } /* Resetar layout para usar a página inteira */ .app-container { display: block !important; } .conteudo-principal { margin-left: 0 !important; padding-top: 0 !important; min-height: auto !important; background-color: #ffffff !important; } .conteudo-interno { padding: 0 !important; max-width: 100% !important; margin: 0 !important; background-color: #ffffff !important; } body { background-color: #ffffff !important; color: #000000 !important; font-family: "Inter", sans-serif !important; } /* Ajustes específicos do layout do documento de AP */ .ap-container-impressao { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } } /* Grupo recolhível do menu lateral (ex: "Aplicativos") */ .sidebar-menu .menu-grupo-gatilho { cursor: pointer; } .sidebar-menu .menu-grupo-seta { transition: transform 0.2s ease; } .sidebar-menu .menu-grupo.aberto .menu-grupo-seta { transform: rotate(180deg); } .sidebar-menu .submenu { list-style: none; margin: 0.15rem 0 0.35rem; padding: 0 0 0 1.1rem; border-left: 1px solid var(--cor-borda); margin-left: 1.35rem; } .sidebar-menu .submenu li a { padding: 0.55rem 0.75rem; font-size: 0.88rem; }