/*========================================================== 1. VARIÁVEIS ==========================================================*/ :root{ /*------------------------------------------------------ CORES PRINCIPAIS ------------------------------------------------------*/ --azul:#2563eb; --azul-hover:#1d4ed8; --verde:#16a34a; --laranja:#f59e0b; --vermelho:#dc2626; /*------------------------------------------------------ FUNDOS ------------------------------------------------------*/ --fundo:#f8fafc; --fundo-card:#ffffff; --fundo-hover:#eef4ff; /*------------------------------------------------------ TEXTO ------------------------------------------------------*/ --texto:#334155; --texto-secundario:#64748b; --texto-claro:#ffffff; /*------------------------------------------------------ BORDAS ------------------------------------------------------*/ --borda:#e5e7eb; /*------------------------------------------------------ SOMBRAS ------------------------------------------------------*/ --sombra:0 10px 25px rgba(0,0,0,.08); /*------------------------------------------------------ CANTOS ARREDONDADOS ------------------------------------------------------*/ --raio:16px; /*------------------------------------------------------ TRANSIÇÕES ------------------------------------------------------*/ --transicao:.30s; } /*========================================================== MODO ESCURO ==========================================================*/ body.dark { --fundo:#0f172a; --fundo-card:#1e293b; --fundo-hover:#334155; --texto:#e2e8f0; --texto-secundario:#94a3b8; --borda:#334155; --sombra:0 12px 30px rgba(0,0,0,.40); } /*========================================================== 2. RESET ==========================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ min-height:100vh; background-color:var(--fundo); color:var(--texto); transition: background-color .35s ease, color .35s ease; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size:16px; line-height:1.6; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{ display:block; max-width:100%; height:auto; border:0; } a{ color:inherit; text-decoration:none; transition:color var(--transicao), background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } ul, ol{ list-style:none; } button, input, select, textarea{ font:inherit; } button{ border:none; background:none; cursor:pointer; } input, textarea, select{ outline:none; } table{ width:100%; border-collapse:collapse; border-spacing:0; } /*========================================================== 3. ELEMENTOS GERAIS ==========================================================*/ /*---------------------------------------------------------- CONTAINER ----------------------------------------------------------*/ .container{ width:min(1150px,90%); margin:0 auto; } /*---------------------------------------------------------- SECÇÕES ----------------------------------------------------------*/ section{ margin:40px 0; } /*---------------------------------------------------------- TÍTULOS ----------------------------------------------------------*/ h1, h2, h3, h4, h5, h6{ color:var(--texto); font-weight:700; line-height:1.3; margin-bottom:16px; } h1{ font-size:2.4rem; } h2{ font-size:2rem; } h3{ font-size:1.5rem; } h4{ font-size:1.2rem; } /*---------------------------------------------------------- PARÁGRAFOS ----------------------------------------------------------*/ p{ margin-bottom:16px; color:var(--texto-secundario); } /*---------------------------------------------------------- LINKS ----------------------------------------------------------*/ a:hover{ color:var(--azul); } /*---------------------------------------------------------- IMAGENS ----------------------------------------------------------*/ img{ display:block; max-width:100%; height:auto; } /*---------------------------------------------------------- SEPARADORES ----------------------------------------------------------*/ hr{ border:0; border-top:1px solid var(--borda); margin:30px 0; } /*---------------------------------------------------------- CITAÇÕES ----------------------------------------------------------*/ blockquote{ margin:25px 0; padding:20px 25px; border-left:5px solid var(--azul); background:var(--fundo-card); color:var(--texto-secundario); border-radius:0 var(--raio) var(--raio) 0; } /*---------------------------------------------------------- CÓDIGO ----------------------------------------------------------*/ code{ padding:2px 6px; background:var(--fundo-hover); border-radius:6px; font-family: Consolas, "Courier New", monospace; font-size:.92rem; } pre{ overflow:auto; padding:20px; margin:20px 0; background:#1e293b; color:#f8fafc; border-radius:var(--raio); } pre code{ padding:0; background:none; color:inherit; } /*---------------------------------------------------------- SELEÇÃO DE TEXTO ----------------------------------------------------------*/ ::selection{ background:var(--azul); color:#ffffff; } /*---------------------------------------------------------- SCROLLBAR ----------------------------------------------------------*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--fundo); } ::-webkit-scrollbar-thumb{ background:var(--azul); border-radius:20px; } ::-webkit-scrollbar-thumb:hover{ background:var(--azul-hover); } /*==========================================================* *4. CABEÇALHO* *==========================================================*/ /*----------------------------------------------------------* *TOPO* *----------------------------------------------------------*/ .topo{ display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding:10px 2.5%; background:var(--fundo-card); border-bottom:1px solid var(--borda); box-shadow:var(--sombra); position:sticky; top:0; z-index:1000; } /*----------------------------------------------------------* *LOGÓTIPO* *----------------------------------------------------------*/ .logo{ display:flex; align-items:center; flex:1; } .logo a{ display:flex; align-items:center; gap:12px; } .logo img{ width:auto; max-height:48px; } .logo h1{ margin:0; color:var(--azul); font-size:1.65rem; line-height:1.15; } .logo p{ margin:2px 0 0; color:var(--texto-secundario); font-size:.82rem; } /*----------------------------------------------------------* *ÁREA DIREITA* *----------------------------------------------------------*/ .topo-direita{ display:flex; align-items:center; gap:8px; } /*----------------------------------------------------------* *BOTÕES* *----------------------------------------------------------*/ .topo-direita a, .topo-direita button{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:40px; padding:0 12px; background:var(--fundo); border:1px solid var(--borda); border-radius:10px; color:var(--texto); transition:var(--transicao); } .topo-direita a:hover, .topo-direita button:hover{ background:var(--azul); color:#ffffff; border-color:var(--azul); } /*========================================================== BOTÃO DO MODO CLARO / ESCURO ==========================================================*/ #btnTema { width:40px; min-width:40px; height:40px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--fundo); color:var(--texto); border:1px solid var(--borda); border-radius:10px; cursor:pointer; } body.dark #btnTema { background:#334155; color:#f8fafc; border-color:#475569; } #btnTema:hover { background:var(--azul); color:#ffffff; border-color:var(--azul); } /*----------------------------------------------------------* *ÍCONES* *----------------------------------------------------------*/ .topo-direita i{ font-size:.9rem; } /*========================================================== 5. MENU PRINCIPAL ==========================================================*/ /*---------------------------------------------------------- MENU ----------------------------------------------------------*/ .menu-principal{ background:var(--fundo-card); border-bottom:1px solid var(--borda); box-shadow:0 3px 10px rgba(0,0,0,.04); position:relative; z-index:900; } /*---------------------------------------------------------- LISTA PRINCIPAL ----------------------------------------------------------*/ .menu-principal > ul{ display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; width:min(1150px,96%); margin:0 auto; gap:2px; } /*---------------------------------------------------------- ITENS ----------------------------------------------------------*/ .menu-principal > ul > li{ position:relative; } /*---------------------------------------------------------- LINKS ----------------------------------------------------------*/ .menu-principal > ul > li > a{ display:flex; align-items:center; gap:6px; padding:9px 13px; color:var(--texto); font-weight:600; font-size:0.82rem; white-space:nowrap; transition:var(--transicao); } /*---------------------------------------------------------- HOVER ----------------------------------------------------------*/ .menu-principal > ul > li > a:hover{ background:var(--fundo-hover); color:var(--azul); } /*---------------------------------------------------------- ITEM ATIVO ----------------------------------------------------------*/ .menu-principal .ativo > a{ background:var(--fundo-hover); color:var(--azul); } /*---------------------------------------------------------- ÍCONES ----------------------------------------------------------*/ .menu-principal i{ font-size:.95rem; } /*---------------------------------------------------------- SETA ----------------------------------------------------------*/ .menu-principal .fa-chevron-down{ font-size:.70rem; transition:transform var(--transicao); } .menu-principal .dropdown:hover > a .fa-chevron-down{ transform:rotate(180deg); } /*========================================================== 6. SUBMENU ==========================================================*/ /*---------------------------------------------------------- ITEM COM SUBMENU ----------------------------------------------------------*/ .menu-principal .dropdown{ position:relative; } /*---------------------------------------------------------- SUBMENU ----------------------------------------------------------*/ .submenu{ display:none; position:absolute; top:100%; left:0; min-width:650px; padding:25px; background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); z-index:1000; } /*---------------------------------------------------------- MOSTRAR SUBMENU ----------------------------------------------------------*/ .menu-principal .dropdown:hover > .submenu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; } /*---------------------------------------------------------- COLUNAS ----------------------------------------------------------*/ .submenu-coluna{ display:flex; flex-direction:column; gap:4px; } /*---------------------------------------------------------- TÍTULOS ----------------------------------------------------------*/ .submenu-coluna h4{ margin-bottom:12px; padding-bottom:8px; font-size:0.88rem; font-weight:700; color:var(--azul); border-bottom:2px solid var(--azul); } /*---------------------------------------------------------- LINKS ----------------------------------------------------------*/ .submenu-coluna a{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; color:var(--texto); font-size:0.82rem; transition:var(--transicao); } /*---------------------------------------------------------- HOVER ----------------------------------------------------------*/ .submenu-coluna a:hover{ background:var(--fundo-hover); color:var(--azul); transform:translateX(4px); } /*---------------------------------------------------------- ÍCONES ----------------------------------------------------------*/ .submenu-coluna i{ width:20px; text-align:center; color:var(--azul); } /*---------------------------------------------------------- SEPARADORES ----------------------------------------------------------*/ .submenu hr{ border:0; border-top:1px solid var(--borda); margin:12px 0; } /*========================================================== LAYOUT PRINCIPAL ==========================================================*/ .conteudo{ display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; width:min(1150px,90%); margin:25px auto; } .principal{ min-width:0; } /*========================================================== 7. HERO ==========================================================*/ /*---------------------------------------------------------- HERO ----------------------------------------------------------*/ .hero { position: relative; width: 100%; height: 300px; min-height: 300px; display: flex; align-items: center; margin: 0 0 25px 0; overflow: visible; border-radius: var(--raio); border: 1px solid rgba(37,99,235,.35); box-shadow: var(--sombra); background: var(--fundo-card); } /*---------------------------------------------------------- IMAGEM DE FUNDO ----------------------------------------------------------*/ .hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position:28% center; border-radius: var(--raio); } /*---------------------------------------------------------- SOBREPOSIÇÃO ----------------------------------------------------------*/ .hero-overlay{ position:absolute; inset:0; background:linear-gradient( 90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.55) 45%, rgba(15,23,42,.20) 100% ); } /*---------------------------------------------------------- CAIXA DE TEXTO ----------------------------------------------------------*/ .hero-caixa { position: relative; z-index: 2; width: 300px; max-width:calc(100% - 35px); margin-left:30px; padding: 20px; transform: translateY(90px); background: rgba(239,246,255,.94); backdrop-filter: blur(10px); border: 1px solid rgba(37,99,235,.15); border-radius: 16px; box-shadow: 0 14px 35px rgba(0,0,0,.16); } /*---------------------------------------------------------- BADGE ----------------------------------------------------------*/ .hero-badge{ display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:6px 12px; border-radius:30px; background:var(--azul); color:#fff; font-size:.80rem; font-weight:700; } /*---------------------------------------------------------- TÍTULO ----------------------------------------------------------*/ .hero-caixa h2{ margin-bottom:8px; color:var(--texto); font-size:clamp(1.2rem,2.1vw,2rem); line-height:1.15; } /*---------------------------------------------------------- TEXTO ----------------------------------------------------------*/ .hero-caixa p{ margin-bottom:8px; color:var(--texto-secundario); font-size:0.75rem; line-height:1.2; } /*---------------------------------------------------------- BOTÕES ----------------------------------------------------------*/ .hero-botoes{ display:flex; flex-wrap:wrap; gap:2px; } /*---------------------------------------------------------- PESQUISA HERO ----------------------------------------------------------*/ .hero-pesquisa{ position:relative; margin:14px 0 16px; z-index:1000; } .hero-pesquisa i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--azul); font-size:1.1rem; } .hero-pesquisa input{ width:100%; height:48px; padding:0 18px 0 48px; border:none; border-radius:14px; background:#fff; color:#222; font-size:.90rem; box-shadow:0 8px 22px rgba(0,0,0,.10); transition:.3s; } .hero-pesquisa input:focus{ outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.15); } /*---------------------------------------------------------- SUGESTÕES DA PESQUISA ----------------------------------------------------------*/ .pesquisa-sugestoes{ position:absolute; top:calc(100% + 8px); left:0; width:100%; max-height:360px; overflow-y:auto; background:#fff; border:1px solid #dbeafe; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.18); display:none; z-index:9999; } /*---------------------------------------------------------- CARTÃO DA SUGESTÃO ----------------------------------------------------------*/ .pesquisa-item{ display:flex; align-items:flex-start; gap:16px; padding:16px 18px; cursor:pointer; transition:all .30s ease; border-bottom:1px solid #edf2f7; } .pesquisa-item:last-child{ border-bottom:none; } /*---------------------------------------------------------- ANIMAÇÃO DAS SUGESTÕES ----------------------------------------------------------*/ .pesquisa-item{ opacity:0; animation:entradaSugestao .25s ease forwards; } @keyframes entradaSugestao{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } } /*---------------------------------------------------------- SCROLL DAS SUGESTÕES ----------------------------------------------------------*/ .pesquisa-sugestoes::-webkit-scrollbar{ width:8px; } .pesquisa-sugestoes::-webkit-scrollbar-track{ background:transparent; } .pesquisa-sugestoes::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:20px; } .pesquisa-sugestoes::-webkit-scrollbar-thumb:hover{ background:#94a3b8; } .pesquisa-item:hover{ background:#eff6ff; transform:translateX(4px); } /*---------------------------------------------------------- SUGESTÃO SELECIONADA ----------------------------------------------------------*/ .pesquisa-item.ativo{ background:#dbeafe; border-left:4px solid var(--azul); transform:translateX(4px); } body.dark .pesquisa-item.ativo{ background:#1e3a5f; border-left-color:#60a5fa; } /*---------------------------------------------------------- CURSOR ----------------------------------------------------------*/ .pesquisa-item{ user-select:none; } .pesquisa-item *{ pointer-events:none; } /*---------------------------------------------------------- SUGESTÃO ATIVA ----------------------------------------------------------*/ .pesquisa-item:hover{ background:#eff6ff; transform:translateX(4px); border-left:4px solid var(--azul); } .pesquisa-item:active{ background:#dbeafe; } /*---------------------------------------------------------- MODO ESCURO ----------------------------------------------------------*/ body.dark .pesquisa-sugestoes{ background:#1e293b; border-color:#334155; } body.dark .pesquisa-item{ border-bottom:1px solid #334155; } body.dark .pesquisa-item:hover{ background:#334155; } body.dark .pesquisa-texto strong{ color:#ffffff; } body.dark .pesquisa-texto p{ color:#cbd5e1; } body.dark .pesquisa-item i{ background:#334155; color:#60a5fa; } /*---------------------------------------------------------- ÍCONE DA SUGESTÃO ----------------------------------------------------------*/ .pesquisa-item i{ width:52px; height:52px; display:flex; justify-content:center; align-items:center; flex-shrink:0; border-radius:14px; background:linear-gradient( 135deg, #eff6ff, #dbeafe ); color:var(--azul); font-size:1.45rem; box-shadow:0 6px 18px rgba(37,99,235,.15); transition:.30s; } .pesquisa-item:hover i{ transform:scale(1.08); box-shadow:0 10px 22px rgba(37,99,235,.22); } /*---------------------------------------------------------- TEXTO ----------------------------------------------------------*/ /*---------------------------------------------------------- TEXTO DA SUGESTÃO ----------------------------------------------------------*/ .pesquisa-texto{ flex:1; display:flex; flex-direction:column; } /*---------------------------------------------------------- TÍTULO DA FERRAMENTA ----------------------------------------------------------*/ .pesquisa-texto strong{ display:block; margin-bottom:5px; font-size:1rem; font-weight:700; color:var(--texto); line-height:1.3; } .pesquisa-texto p{ margin:0; color:var(--texto-secundario); font-size:.86rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /*---------------------------------------------------------- RODAPÉ DAS SUGESTÕES ----------------------------------------------------------*/ .pesquisa-rodape{ display:flex; justify-content:flex-end; align-items:center; margin-top:10px; } //*---------------------------------------------------------- BADGES DA PESQUISA ----------------------------------------------------------*/ .pesquisa-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; } .pesquisa-badges .badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:.68rem; font-weight:700; color:#fff; white-space:nowrap; } .pesquisa-badges .badge-novo{ background:linear-gradient(180deg,#22c55e,#16a34a); } .pesquisa-badges .badge-destaque{ background:linear-gradient(180deg,#fb923c,#ea580c); } /*---------------------------------------------------------- ESTATÍSTICAS ----------------------------------------------------------*/ .hero-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:35px; } .info-card{ padding:24px; text-align:center; background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); transition:var(--transicao); } .info-card:hover{ transform:translateY(-4px); } .info-card i{ margin-bottom:12px; font-size:2rem; color:var(--azul); } .info-card strong{ display:block; margin-bottom:8px; color:var(--azul); font-size:1.7rem; } .info-card span{ color:var(--texto-secundario); font-size:.95rem; } /*---------------------------------------------------------- MODO ESCURO ----------------------------------------------------------*/ body.dark .hero-caixa{ background:rgba(15,23,42,.88); } body.dark .hero-caixa h2{ color:#ffffff; } body.dark .hero-caixa p{ color:#cbd5e1; } body.dark .hero-pesquisa input{ background:#25324a; color:#fff; } /*----------------------------------------------------------* *MODO ESCURO - GERAL* *----------------------------------------------------------*/ body.dark { background:#0f172a; color:#f1f5f9; } body.dark .topo { background:#1e293b; border-color:#334155; } body.dark .menu-principal { background:#1e293b; border-color:#334155; } body.dark .menu-principal > ul > li > a { color:#f1f5f9; } body.dark .menu-principal > ul > li > a:hover, body.dark .menu-principal .ativo > a { background:#334155; color:#60a5fa; } body.dark .sidebar-bloco { background:#1e293b; border-color:#334155; color:#f1f5f9; } body.dark .card, body.dark .info-card { background:#1e293b; border-color:#334155; color:#f1f5f9; } body.dark .card-titulo h3 { color:#60a5fa; } body.dark .card-titulo small, body.dark .card-titulo p, body.dark .card-body p, body.dark .info-card span { color:#cbd5e1; } body.dark .topo-direita a, body.dark .topo-direita button { background:#334155; border-color:#475569; color:#f1f5f9; } body.dark .submenu { background:#1e293b; border-color:#475569; } body.dark .submenu-coluna a { color:#f1f5f9; } /*---------------------------------------------------------- TABLET ----------------------------------------------------------*/ @media (max-width:900px){ .hero{ min-height:420px; } .hero-caixa{ margin:35px; max-width:85%; } .hero-info{ grid-template-columns:1fr; } } /*---------------------------------------------------------- TELEMÓVEL ----------------------------------------------------------*/ @media (max-width:700px){ .hero{ min-height:auto; } .hero-banner{ position:relative; height:240px; } .hero-overlay{ display:none; } .hero-caixa{ margin:0; max-width:100%; border-radius:0 0 var(--raio) var(--raio); box-shadow:none; } .hero-caixa h2{ font-size:2rem; } .hero-botoes{ flex-direction:column; } .hero-botoes .btn{ width:100%; justify-content:center; } } /*========================================================== 8. SIDEBAR ==========================================================*/ .sidebar{ display:flex; flex-direction:column; gap:25px; } /*---------------------------------------------------------- BLOCOS ----------------------------------------------------------*/ .sidebar-bloco{ padding:16px; background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); } /*---------------------------------------------------------- TÍTULOS ----------------------------------------------------------*/ .sidebar-bloco h3{ display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--azul); font-size:1.15rem; } .sidebar-bloco h3 i{ color:var(--azul); } /*---------------------------------------------------------- LISTAS ----------------------------------------------------------*/ .lista-categorias, .lista-info{ display:flex; flex-direction:column; gap:3px; } /*---------------------------------------------------------- CATEGORIAS ----------------------------------------------------------*/ .lista-categorias a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; transition:var(--transicao); } .lista-categorias a:hover{ background:var(--fundo-hover); color:var(--azul); } /*---------------------------------------------------------- CONTADOR ----------------------------------------------------------*/ .contador{ margin-left:auto; min-width:26px; padding:2px 6px; text-align:center; border-radius:16px; background:var(--fundo-hover); color:var(--azul); font-size:.75rem; font-weight:700; } /*---------------------------------------------------------- LISTA DE INFORMAÇÕES ----------------------------------------------------------*/ .lista-info li{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; color:var(--texto-secundario); } .lista-info i{ width:18px; margin-top:3px; color:var(--azul); text-align:center; } /*---------------------------------------------------------- BOTÃO ----------------------------------------------------------*/ .btn-sidebar{ display:flex; justify-content:center; align-items:center; width:100%; margin-top:18px; padding:12px 18px; background:var(--azul); color:#ffffff; border-radius:12px; font-weight:600; transition:var(--transicao); } .btn-sidebar:hover{ background:var(--azul-hover); color:#ffffff; } /*========================================================== 9. CARDS DAS FERRAMENTAS ==========================================================*/ /*---------------------------------------------------------- GRELHA ----------------------------------------------------------*/ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:40px 0; } /*---------------------------------------------------------- CARD ----------------------------------------------------------*/ .card-ferramenta{ display:flex; flex-direction:column; /* todas iguais */ background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden; } .card-ferramenta:hover{ transform:translateY(-6px); box-shadow:0 16px 35px rgba(0,0,0,.12); } /*---------------------------------------------------------- CABEÇALHO ----------------------------------------------------------*/ .card-header{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-bottom:1px solid var(--borda); } /*---------------------------------------------------------- ÍCONE ----------------------------------------------------------*/ .card-icone{ display:flex; justify-content:center; align-items:center; width:36px; height:36px; border-radius:10px; background:var(--fundo-hover); color:var(--azul); font-size:1.2rem; flex-shrink:0; } /*---------------------------------------------------------- LOGÓTIPOS SVG ----------------------------------------------------------*/ .logo-ferramenta{ width:34px; height:34px; object-fit:contain; display:block; } /*---------------------------------------------------------- TÍTULO ----------------------------------------------------------*/ .card-titulo{ flex:1; } .card-titulo h3{ margin-bottom:2px; color:var(--azul); font-size:1.05rem; } .card-titulo small{ display:block; color:var(--texto-secundario); font-size:.80rem; } .card-titulo p{ margin:0; font-size:.90rem; color:var(--texto-secundario); } /*---------------------------------------------------------- CORPO ----------------------------------------------------------*/ .card-body{ flex:1; padding:10px 14px; } .card-body p{ margin:0; font-size:.90rem; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } /*---------------------------------------------------------- BADGES ----------------------------------------------------------*/ .card-badges{ display:flex; flex-wrap:wrap; gap:5px; min-height:26px; padding:4px 8px; } .card-badges span{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; font-size:.72rem; font-weight:700; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); } /*---------------------------------------------------------- CORES DOS BADGES ----------------------------------------------------------*/ .badge-novo{ background:linear-gradient(180deg,#22c55e,#16a34a); } .badge-destaque{ background:linear-gradient(180deg,#fb923c,#ea580c); } .badge-favorito{ background:linear-gradient(180deg,#f43f5e,#e11d48); } /*---------------------------------------------------------- RODAPÉ ----------------------------------------------------------*/ .card-footer{ display:flex; justify-content:space-between; align-items:center; gap:15px; padding:8px 12px; margin-top:auto; border-top:1px solid var(--borda); } /*---------------------------------------------------------- BOTÃO ----------------------------------------------------------*/ .btn-abrir{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:linear-gradient( 180deg, #3b82f6, #2563eb ); color:#fff; border-radius:12px; font-size:.88rem; font-weight:700; box-shadow:0 8px 18px rgba(37,99,235,.25); transition:.30s; } .btn-abrir:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.35); } /*---------------------------------------------------------- FAVORITO ----------------------------------------------------------*/ .btn-favorito{ width:42px; height:42px; display:flex; justify-content:center; align-items:center; border:none; border-radius:50%; background:#eef4ff; color:#94a3b8; cursor:pointer; transition:all .30s ease; } .btn-favorito:hover{ transform:scale(1.15) rotate(-8deg); background:#fff7d6; color:#f59e0b; box-shadow:0 8px 18px rgba(245,158,11,.35); } .btn-favorito.ativo{ background:#fff7d6; color:#f59e0b; box-shadow:0 8px 20px rgba(245,158,11,.40); } .btn-favorito.ativo i{ font-weight:900; } /*========================================================== 10. ESTATÍSTICAS ==========================================================*/ /*---------------------------------------------------------- GRELHA ----------------------------------------------------------*/ .estatisticas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:25px; margin:45px 0; } /*---------------------------------------------------------- CARTÃO ----------------------------------------------------------*/ .estatistica{ display:flex; align-items:center; gap:18px; padding:24px; background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao); } .estatistica:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,.10); } /*---------------------------------------------------------- ÍCONE ----------------------------------------------------------*/ .estatistica .icone{ display:flex; justify-content:center; align-items:center; width:64px; height:64px; flex-shrink:0; border-radius:16px; background:var(--fundo-hover); color:var(--azul); font-size:1.9rem; } /*---------------------------------------------------------- DADOS ----------------------------------------------------------*/ .estatistica .dados{ display:flex; flex-direction:column; gap:4px; } .estatistica .dados strong{ font-size:2rem; font-weight:700; color:var(--azul); line-height:1; } .estatistica .dados span{ color:var(--texto-secundario); font-size:.95rem; } /*---------------------------------------------------------- ANIMAÇÃO ----------------------------------------------------------*/ .estatistica:hover .icone{ transform:scale(1.08); transition:transform var(--transicao); } /*========================================================== 11. FORMULÁRIOS ==========================================================*/ /*---------------------------------------------------------- ÁREA DOS FORMULÁRIOS ----------------------------------------------------------*/ .formularios{ display:grid; gap:30px; margin:40px 0; } /*---------------------------------------------------------- BLOCO ----------------------------------------------------------*/ .bloco-formulario{ padding:30px; background:var(--fundo-card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); } /*---------------------------------------------------------- TABS ----------------------------------------------------------*/ .tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:25px; border-bottom:1px solid var(--borda); padding-bottom:15px; } .tab{ padding:10px 18px; background:var(--fundo); border:1px solid var(--borda); border-radius:10px; color:var(--texto); font-weight:600; cursor:pointer; transition:var(--transicao); } .tab:hover, .tab.ativo{ background:var(--azul); color:#ffffff; border-color:var(--azul); } /*---------------------------------------------------------- CONTEÚDO ----------------------------------------------------------*/ .tab-conteudo{ margin-top:25px; } /*---------------------------------------------------------- FORMULÁRIO ----------------------------------------------------------*/ .formulario{ display:grid; gap:20px; } /*---------------------------------------------------------- CAMPOS ----------------------------------------------------------*/ .formulario label{ display:block; margin-bottom:8px; font-weight:600; color:var(--texto); } .formulario input, .formulario select, .formulario textarea{ width:100%; padding:12px 14px; background:var(--fundo); border:1px solid var(--borda); border-radius:12px; color:var(--texto); transition:var(--transicao); } .formulario textarea{ min-height:140px; resize:vertical; } /*---------------------------------------------------------- FOCO ----------------------------------------------------------*/ .formulario input:focus, .formulario select:focus, .formulario textarea:focus{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,235,.15); } /*---------------------------------------------------------- BOTÕES ----------------------------------------------------------*/ .formulario button{ display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:12px 22px; background:var(--azul); color:#ffffff; border-radius:12px; font-weight:600; transition:var(--transicao); } .formulario button:hover{ background:var(--azul-hover); } /*========================================================== 12. FOOTER ==========================================================*/ /*---------------------------------------------------------- RODAPÉ ----------------------------------------------------------*/ .footer{ margin-top:60px; background:var(--fundo-card); border-top:1px solid var(--borda); } /*---------------------------------------------------------- CONTEÚDO ----------------------------------------------------------*/ .footer-conteudo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; padding:50px 0; } /*---------------------------------------------------------- COLUNAS ----------------------------------------------------------*/ .footer-coluna{ display:flex; flex-direction:column; gap:15px; } .footer-coluna h3{ margin:0; color:var(--azul); font-size:1.2rem; } .footer-coluna p{ margin:0; color:var(--texto-secundario); line-height:1.7; } /*---------------------------------------------------------- LISTAS ----------------------------------------------------------*/ .footer-coluna ul{ display:flex; flex-direction:column; gap:10px; } .footer-coluna li{ display:flex; align-items:center; gap:10px; } .footer-coluna a{ color:var(--texto-secundario); transition:var(--transicao); } .footer-coluna a:hover{ color:var(--azul); } /*---------------------------------------------------------- ÍCONES ----------------------------------------------------------*/ .footer-coluna i{ width:20px; text-align:center; color:var(--azul); } /*---------------------------------------------------------- REDES SOCIAIS ----------------------------------------------------------*/ .footer-social{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; } .footer-social a{ display:flex; justify-content:center; align-items:center; width:42px; height:42px; border-radius:50%; background:var(--fundo-hover); color:var(--azul); transition:var(--transicao); } .footer-social a:hover{ background:var(--azul); color:#ffffff; transform:translateY(-2px); } /*---------------------------------------------------------- COPYRIGHT ----------------------------------------------------------*/ .footer-copy{ margin-top:20px; padding:20px 0; text-align:center; color:var(--texto-secundario); font-size:.9rem; border-top:1px solid var(--borda); } .footer-copy a{ color:var(--azul); font-weight:600; } .footer-copy a:hover{ text-decoration:underline; } /*========================================================== 13. RESPONSIVIDADE ==========================================================*/ /*---------------------------------------------------------- TABLETS ----------------------------------------------------------*/ @media (max-width:992px){ .topo{ flex-direction:column; align-items:flex-start; gap:20px; } .topo-direita{ width:100%; justify-content:flex-start; flex-wrap:wrap; } .hero{ min-height:420px; } .hero-caixa{ margin:35px; max-width:85%; } .hero-botoes{ justify-content:center; } .hero-info{ grid-template-columns:1fr; } .cards{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .estatisticas{ grid-template-columns:repeat(2,1fr); } .footer-conteudo{ grid-template-columns:repeat(2,1fr); } } /*---------------------------------------------------------- TELEMÓVEIS ----------------------------------------------------------*/ @media (max-width:768px){ .container{ width:95%; } .conteudo{ grid-template-columns:1fr; } .menu-principal>ul{ flex-direction:column; align-items:stretch; } .menu-principal>ul>li{ width:100%; } .submenu{ position:static; opacity:1; visibility:visible; transform:none; display:none; width:100%; margin-top:10px; } .dropdown:hover .submenu{ display:block; } .hero-botoes{ flex-direction:column; } .hero-botoes a{ width:100%; justify-content:center; } .cards{ grid-template-columns:1fr; } .estatisticas{ grid-template-columns:1fr; } .estatistica{ flex-direction:column; text-align:center; } .sidebar{ margin-top:40px; } .footer-conteudo{ grid-template-columns:1fr; } .footer-social{ justify-content:center; } .formularios{ gap:20px; } .bloco-formulario{ padding:20px; } .tabs{ flex-direction:column; } .tab{ width:100%; text-align:center; } } /*---------------------------------------------------------- ECRÃS PEQUENOS ----------------------------------------------------------*/ @media (max-width:480px){ .logo img{ width:60px; } .card-header{ flex-direction:column; text-align:center; } .card-footer{ flex-direction:column; align-items:stretch; } .btn-abrir{ justify-content:center; width:100%; } .estatistica{ padding:20px; } .estatistica .dados strong{ font-size:1.6rem; } .footer-copy{ font-size:.85rem; } } /*========================================================== MENSAGEM DE SUCESSO ==========================================================*/ .mensagem-sucesso{ width:min(900px,90%); margin:20px auto; padding:15px 20px; background:#dcfce7; border:1px solid #86efac; border-radius:12px; color:#166534; font-weight:600; display:flex; align-items:center; gap:10px; } .mensagem-sucesso i{ font-size:1.2rem; } /* ========================================================== PÁGINA DE SUGESTÕES Correção do layout dos formulários ========================================================== */ .hero-conteudo { width: min(1150px, 90%); margin: 0 auto; } /* Área onde estão os formulários */ .hero-conteudo + .cards, section.cards { width: min(1150px, 90%); margin: 40px auto; } /* Evita que os formulários sejam tratados como cartões estreitos em colunas */ section.cards { display: block; } /* Cada formulário */ section.cards form { width: 100%; max-width: 850px; margin: 0 auto 40px; padding: 30px; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } /* Títulos das áreas */ section.cards h2, section.cards h3 { color: var(--texto); } /* Área dos campos */ section.cards form label { display: block; margin-bottom: 6px; color: var(--texto); font-weight: 600; } /* Campos */ section.cards form input, section.cards form select, section.cards form textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; background: var(--fundo-card); color: var(--texto); border: 1px solid var(--borda); border-radius: 9px; font-family: inherit; font-size: .95rem; margin-bottom: 16px; } /* Textareas */ section.cards form textarea { min-height: 120px; resize: vertical; } /* Campo quando selecionado */ section.cards form input:focus, section.cards form select:focus, section.cards form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } /* Botões */ section.cards form button, section.cards form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: var(--azul); color: #fff; border: 0; border-radius: 9px; font-weight: 700; cursor: pointer; } /* Mensagem de sucesso */ .mensagem-sucesso { width: min(850px, 90%); margin: 25px auto; padding: 18px 22px; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 12px; box-sizing: border-box; font-weight: 600; } /* ========================================================== MODO ESCURO ========================================================== */ body.dark section.cards form { background: var(--fundo-card); border-color: var(--borda); } body.dark section.cards form input, body.dark section.cards form select, body.dark section.cards form textarea { background: #25324a; color: #fff; border-color: #475569; } body.dark .mensagem-sucesso { background: #14532d; color: #dcfce7; border-color: #166534; } /* ========================================================== TELEMÓVEL ========================================================== */ @media (max-width: 700px) { section.cards, .hero-conteudo { width: 94%; } section.cards form { padding: 20px; } } /* ========================================================== PÁGINA DE PARTICIPAÇÃO ========================================================== */ .participacao-opcoes { width: min(1150px, 90%); margin: 30px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .participacao-card { padding: 24px; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); text-align: center; } .participacao-card .icone { font-size: 2rem; margin-bottom: 10px; } .participacao-card h3 { margin-bottom: 8px; color: var(--azul); } .participacao-card p { margin: 0; color: var(--texto-secundario); line-height: 1.5; } /* ========================================================== ÁREA DOS FORMULÁRIOS ========================================================== */ .participacao { width: min(1150px, 90%); margin: 40px auto; } .participacao-conteudo { width: 100%; } .participacao-conteudo > h2 { margin-top: 30px; margin-bottom: 10px; color: var(--texto); } /* CARTÃO DO FORMULÁRIO */ .formulario-card { width: 100%; max-width: 900px; margin: 20px auto 40px; padding: 30px; box-sizing: border-box; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } /* FORMULÁRIO */ .formulario { width: 100%; } /* LINHAS */

💬 Comentários Aprovados pelo Administrador

Aqui são apresentados os comentários que foram analisados e aprovados pela administração.

💬 Ainda não existem comentários aprovados.

O seu comentário poderá aparecer aqui depois de ser analisado e aprovado pelo administrador.

💬
.formulario .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* CAMPOS */ .formulario .campo { margin-bottom: 18px; } /* ETIQUETAS */ .formulario label { display: block; margin-bottom: 7px; color: var(--texto); font-weight: 600; } /* INPUTS */ .formulario input, .formulario select, .formulario textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; font-family: inherit; font-size: .95rem; } /* TEXTAREA */ .formulario textarea { min-height: 130px; resize: vertical; } /* FOCO */ .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } /* BOTÃO */ .formulario .botao-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; background: var(--azul); color: #fff; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; } /* MODO ESCURO */ body.dark .formulario input, body.dark .formulario select, body.dark .formulario textarea { background: #25324a; color: #fff; border-color: #475569; } /* MENSAGEM */ .mensagem-sucesso { width: min(900px, 90%); margin: 25px auto; padding: 18px 22px; box-sizing: border-box; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 12px; text-align: center; font-weight: 600; } /* MOBILE */ @media (max-width: 800px) { .participacao-opcoes { grid-template-columns: 1fr; } .formulario .linha { grid-template-columns: 1fr; gap: 0; } .formulario-card { padding: 20px; } } /* ========================================================== AVISOS DA PÁGINA DE PARTICIPAÇÃO ========================================================== */ .aviso-participacao, .instrucao-formularios { width: min(1150px, 90%); margin: 25px auto; padding: 22px 26px; background: var(--fundo-card); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); box-sizing: border-box; } .aviso-icone { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--fundo-hover); color: var(--azul); border-radius: 50%; font-size: 1.3rem; } .aviso-participacao h3, .instrucao-formularios h2 { margin: 0 0 8px; color: var(--azul); font-size: 1.25rem; } .aviso-participacao p, .instrucao-formularios p { margin: 0 0 8px; color: var(--texto-secundario); font-size: 0.92rem; line-height: 1.6; } .aviso-participacao p:last-child, .instrucao-formularios p:last-child { margin-bottom: 0; } .aviso-tema { margin-top: 12px !important; padding: 10px 14px; background: var(--fundo-hover); border-radius: 10px; color: var(--texto) !important; } /* ========================================================== MODO ESCURO ========================================================== */ body.dark .aviso-participacao, body.dark .instrucao-formularios { background: var(--fundo-card); color: var(--texto); } /* ========================================================== TELEMÓVEL ========================================================== */ @media (max-width: 700px) { .aviso-participacao, .instrucao-formularios { width: 94%; padding: 18px; flex-direction: column; } } /* ========================================================== FORMULÁRIO DE COMENTÁRIOS — MELHOR CONTRASTE NO MODO CLARO ========================================================== */ .comentario-formulario .formulario-card { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); } .comentario-formulario .formulario input, .comentario-formulario .formulario select, .comentario-formulario .formulario textarea { background: #f8fafc; color: #1e293b; border: 1px solid #94a3b8; } .comentario-formulario .formulario input::placeholder, .comentario-formulario .formulario textarea::placeholder { color: #64748b; } .comentario-formulario .formulario input:focus, .comentario-formulario .formulario select:focus, .comentario-formulario .formulario textarea:focus { background: #ffffff; border-color: var(--azul); } /* No modo escuro mantém o aspeto atual */ body.dark .comentario-formulario .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-formulario .formulario input, body.dark .comentario-formulario .formulario select, body.dark .comentario-formulario .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } body.dark .comentario-formulario .formulario input::placeholder, body.dark .comentario-formulario .formulario textarea::placeholder { color: #94a3b8; } /* ========================================================== COMENTÁRIOS — ORGANIZAÇÃO DA PÁGINA ========================================================== */ .comentarios-participacao { width: min(1150px, 90%); margin: 30px auto 45px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px; align-items: start; } /* INFORMAÇÃO */ .comentarios-info { width: 100%; } .comentarios-intro { padding: 28px; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .comentarios-icone { font-size: 2.5rem; margin-bottom: 10px; } .comentarios-intro h2 { margin: 0 0 12px; color: var(--azul); font-size: 1.7rem; } .comentarios-intro p { color: var(--texto-secundario); line-height: 1.7; } .comentarios-nota { margin-top: 20px; padding: 14px 16px; background: var(--fundo-hover); border-left: 4px solid var(--azul); border-radius: 8px; font-size: .92rem; } /* FORMULÁRIO */ .comentario-formulario { width: 100%; } .comentario-formulario .formulario-card { background: #eef5ff; border: 1px solid #b8c9df; box-shadow: 0 8px 24px rgba(15, 23, 42, .10); } /* CAMPOS DO FORMULÁRIO */ .comentario-formulario .formulario input, .comentario-formulario .formulario select, .comentario-formulario .formulario textarea { background: #f5f9ff; border: 1px solid #9fb2c9; color: #334155; } .comentario-formulario .formulario input:hover, .comentario-formulario .formulario select:hover, .comentario-formulario .formulario textarea:hover { border-color: #7f96b2; } .comentario-formulario .formulario input:focus, .comentario-formulario .formulario select:focus, .comentario-formulario .formulario textarea:focus { background: #ffffff; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); } /* ========================================================== COMENTÁRIOS APROVADOS ========================================================== */ .comentarios-aprovados { width: min(1150px, 90%); margin: 0 auto 45px; padding: 30px; box-sizing: border-box; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .comentarios-aprovados-cabecalho { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; } .comentarios-aprovados-icone { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--fundo-hover); border-radius: 50%; font-size: 1.6rem; } .comentarios-aprovados h2 { margin: 0 0 6px; color: var(--azul); } .comentarios-aprovados-cabecalho p { margin: 0; color: var(--texto-secundario); } /* LISTA */ .lista-comentarios-aprovados { display: grid; gap: 16px; } .comentario-publicado { padding: 20px; background: #f3f7fc; border: 1px solid #b8c9df; border-left: 5px solid var(--azul); border-radius: 10px; } .comentario-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; } .comentario-nome { color: var(--texto); font-weight: 700; } .comentario-data { color: var(--texto-secundario); font-size: .85rem; } .comentario-texto { color: var(--texto); line-height: 1.7; } /* SEM COMENTÁRIOS */ .sem-comentarios { padding: 28px; text-align: center; background: var(--fundo-hover); border: 1px dashed var(--borda); border-radius: 10px; } .sem-comentarios h3 { margin-top: 0; color: var(--texto); } .sem-comentarios p { color: var(--texto-secundario); } /* ========================================================== MODO ESCURO ========================================================== */ body.dark .comentario-formulario .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-formulario .formulario input, body.dark .comentario-formulario .formulario select, body.dark .comentario-formulario .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } body.dark .comentario-publicado { background: #25324a; border-color: #475569; } body.dark .comentarios-aprovados { background: var(--fundo-card); } /* ========================================================== TELEMÓVEL ========================================================== */ @media (max-width: 800px) { .comentarios-participacao { grid-template-columns: 1fr; } .comentarios-aprovados { padding: 20px; } .comentarios-aprovados-cabecalho { align-items: flex-start; } .comentario-cabecalho { flex-direction: column; align-items: flex-start; } } /* ========================================================== FORMULÁRIOS IA2 — MODO CLARO ========================================================== */ .formulario-card { background: #eef5ff; border: 1px solid #b8c9df; } .formulario input, .formulario select, .formulario textarea { background: #f5f9ff; color: #334155; border: 1px solid #94a3b8; } .formulario input:hover, .formulario select:hover, .formulario textarea:hover { border-color: #7f96b2; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { background: #ffffff; border-color: var(--azul); } /* ========================================================== MODO ESCURO — MANTER O ASPETO ATUAL ========================================================== */ body.dark .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .formulario input, body.dark .formulario select, body.dark .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } /* ========================================================== COMENTÁRIOS — LAYOUT FINAL ========================================================== */ .comentarios-publicados, .comentario-formulario { width: min(1150px, 90%); margin: 30px auto; box-sizing: border-box; } /* Título da secção de comentários aprovados */ .comentarios-publicados { background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 30px; box-shadow: var(--sombra); } .comentarios-publicados h2 { margin: 0 0 10px; color: var(--azul); font-size: 1.8rem; } .comentarios-introducao { color: var(--texto-secundario); margin-bottom: 25px; } /* Mensagem quando ainda não existem comentários */ .sem-comentarios { margin-top: 25px; padding: 25px; text-align: center; background: var(--fundo-hover); border: 1px dashed var(--borda); border-radius: 12px; } .sem-comentarios h3 { color: var(--texto); margin-bottom: 10px; } .sem-comentarios p { color: var(--texto-secundario); } /* Comentários individuais aprovados */ .comentario-publicado { margin-top: 18px; padding: 20px; background: var(--fundo-hover); border: 1px solid var(--borda); border-radius: 12px; } .comentario-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; } .comentario-nome { color: var(--azul); font-weight: 700; } .comentario-data { color: var(--texto-secundario); font-size: .85rem; } .comentario-texto { color: var(--texto); line-height: 1.7; white-space: pre-wrap; } /* ========================================================== FORMULÁRIO DE ENVIO — LARGO E CENTRADO ========================================================== */ .comentario-formulario { display: block; } .comentario-formulario .formulario-card { width: 100%; max-width: 100%; margin: 0 auto; padding: 35px; box-sizing: border-box; background: #eef5ff; border: 1px solid #b8cbe5; border-radius: var(--raio); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); } .comentario-formulario .formulario-card h2 { margin-top: 0; color: var(--azul); } .comentario-formulario .formulario { width: 100%; } .comentario-formulario .formulario .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .comentario-formulario .formulario .campo { width: 100%; margin-bottom: 20px; } .comentario-formulario .formulario label { display: block; margin-bottom: 8px; color: var(--texto); font-weight: 700; } .comentario-formulario .formulario input, .comentario-formulario .formulario select, .comentario-formulario .formulario textarea { width: 100%; box-sizing: border-box; padding: 13px 15px; background: #f8fbff; color: var(--texto); border: 1px solid #9db4d1; border-radius: 10px; font-family: inherit; font-size: .96rem; } .comentario-formulario .formulario textarea { min-height: 180px; resize: vertical; } .comentario-formulario .formulario input:focus, .comentario-formulario .formulario select:focus, .comentario-formulario .formulario textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } /* Botão */ .comentario-formulario .botao-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: var(--azul); color: #fff; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; } /* ========================================================== MODO ESCURO ========================================================== */ body.dark .comentarios-publicados { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-publicado { background: #25324a; border-color: #475569; } body.dark .comentario-formulario .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-formulario .formulario input, body.dark .comentario-formulario .formulario select, body.dark .comentario-formulario .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } body.dark .comentario-formulario .formulario input::placeholder, body.dark .comentario-formulario .formulario textarea::placeholder { color: #94a3b8; } /* ========================================================== TELEMÓVEL ========================================================== */ @media (max-width: 700px) { .comentarios-publicados, .comentario-formulario { width: 94%; } .comentario-formulario .formulario-card { padding: 22px; } .comentario-formulario .formulario .linha { grid-template-columns: 1fr; gap: 0; } .comentario-cabecalho { flex-direction: column; align-items: flex-start; } } /* ========================================================== COMENTÁRIOS — FORMULÁRIO CENTRADO E LARGO ========================================================== */ .comentario-formulario { width: 100%; max-width: 1100px; margin: 30px auto 40px; box-sizing: border-box; } .comentario-formulario .formulario-card { width: 100%; max-width: 100%; margin: 0 auto; padding: 32px; box-sizing: border-box; background: #eef6ff; border: 1px solid #9db4d1; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); } .comentario-formulario .formulario { width: 100%; } .comentario-formulario .formulario .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .comentario-formulario .formulario .campo { width: 100%; margin-bottom: 20px; } .comentario-formulario .formulario label { display: block; margin-bottom: 8px; color: var(--texto); font-weight: 700; } .comentario-formulario .formulario input, .comentario-formulario .formulario select, .comentario-formulario .formulario textarea { width: 100%; box-sizing: border-box; padding: 13px 15px; background: #f8fbff; color: var(--texto); border: 1px solid #8fa8c5; border-radius: 10px; font-family: inherit; font-size: .96rem; } .comentario-formulario .formulario textarea { min-height: 180px; resize: vertical; } .comentario-formulario .formulario input:focus, .comentario-formulario .formulario select:focus, .comentario-formulario .formulario textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } /* BOTÃO */ .comentario-formulario .botao-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: var(--azul); color: #fff; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; } /* ========================================================== COMENTÁRIOS APROVADOS ========================================================== */ .comentarios-publicados { width: 100%; max-width: 1100px; margin: 30px auto; padding: 30px; box-sizing: border-box; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); } .comentarios-publicados h2 { margin-top: 0; color: var(--azul); text-align: center; } .comentarios-introducao { text-align: center; color: var(--texto-secundario); margin-bottom: 25px; } .comentario-publicado { width: 100%; margin-bottom: 18px; padding: 20px; box-sizing: border-box; background: #f1f7ff; border: 1px solid #a8bdd5; border-left: 5px solid var(--azul); border-radius: 10px; } .comentario-publicado:last-child { margin-bottom: 0; } .comentario-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; } .comentario-nome { font-weight: 700; color: var(--texto); } .comentario-data { color: var(--texto-secundario); font-size: .88rem; } .comentario-texto { color: var(--texto); line-height: 1.7; white-space: pre-wrap; } .sem-comentarios { padding: 25px; text-align: center; background: #f1f7ff; border: 1px dashed #9db4d1; border-radius: 10px; } /* ========================================================== MODO ESCURO ========================================================== */ body.dark .comentario-formulario .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-formulario .formulario input, body.dark .comentario-formulario .formulario select, body.dark .comentario-formulario .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } body.dark .comentarios-publicados { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-publicado { background: #25324a; border-color: #475569; border-left-color: var(--azul); } body.dark .sem-comentarios { background: #25324a; border-color: #475569; } /* ========================================================== TELEMÓVEL ========================================================== */ @media (max-width: 700px) { .comentario-formulario, .comentarios-publicados { width: 94%; } .comentario-formulario .formulario-card, .comentarios-publicados { padding: 22px; } .comentario-formulario .formulario .linha { grid-template-columns: 1fr; gap: 0; } .comentario-cabecalho { flex-direction: column; align-items: flex-start; } } /* ========================================================== IA2 — PÁGINA DE COMENTÁRIOS LAYOUT FINAL ========================================================== */ /* ---------------------------------------------------------- AVISO — ANTES DE PUBLICAR ---------------------------------------------------------- */ .comentario-aviso { width: min(1100px, 94%); margin: 30px auto; padding: 24px 28px; background: var(--fundo-card); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); box-sizing: border-box; } .comentario-aviso h2 { margin: 0 0 10px; color: var(--azul); } .comentario-aviso hr { border: 0; border-top: 1px solid var(--borda); margin: 15px 0; } .comentario-aviso ul { margin: 0; padding-left: 20px; list-style: disc; } .comentario-aviso li { margin: 7px 0; color: var(--texto); } /* ---------------------------------------------------------- FORMULÁRIO — CENTRADO E LARGO ---------------------------------------------------------- */ .comentario-formulario { width: min(1100px, 94%); margin: 30px auto 40px; box-sizing: border-box; } .comentario-formulario .formulario-card { width: 100%; max-width: none; margin: 0 auto; padding: 32px; box-sizing: border-box; background: #eef6ff; border: 1px solid #9db4d1; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .10); } .comentario-formulario .formulario-card h2 { color: var(--azul); margin-bottom: 12px; } .comentario-formulario .formulario-card hr { border: 0; border-top: 1px solid #b5c8dd; margin: 15px 0 25px; } /* ---------------------------------------------------------- CAMPOS ---------------------------------------------------------- */ .comentario-formulario .formulario { width: 100%; } .comentario-formulario .formulario .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .comentario-formulario .formulario .campo { width: 100%; margin-bottom: 20px; } .comentario-formulario .formulario label { display: block; margin-bottom: 8px; color: var(--texto); font-weight: 700; } .comentario-formulario .formulario input, .comentario-formulario .formulario select, .comentario-formulario .formulario textarea { display: block; width: 100%; box-sizing: border-box; padding: 13px 15px; background: #f8fbff; color: var(--texto); border: 1px solid #8fa8c5; border-radius: 10px; font-family: inherit; font-size: .96rem; } .comentario-formulario .formulario textarea { min-height: 180px; resize: vertical; } .comentario-formulario .formulario input:focus, .comentario-formulario .formulario select:focus, .comentario-formulario .formulario textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } /* ---------------------------------------------------------- BOTÃO ---------------------------------------------------------- */ .comentario-formulario .botao-principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: var(--azul); color: #ffffff; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; } .comentario-formulario .botao-principal:hover { background: var(--azul-hover); } /* ---------------------------------------------------------- COMENTÁRIOS APROVADOS ---------------------------------------------------------- */ .comentarios-publicados { width: min(1100px, 94%); margin: 30px auto 45px; padding: 30px; box-sizing: border-box; background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .comentarios-publicados h2 { margin: 0 0 10px; text-align: center; color: var(--azul); } .comentarios-introducao { margin: 0 0 25px; text-align: center; color: var(--texto-secundario); } .comentario-publicado { width: 100%; margin-bottom: 18px; padding: 20px; box-sizing: border-box; background: #f1f7ff; border: 1px solid #a8bdd5; border-left: 5px solid var(--azul); border-radius: 10px; } .comentario-publicado:last-child { margin-bottom: 0; } .comentario-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; } .comentario-nome { color: var(--texto); font-weight: 700; } .comentario-data { color: var(--texto-secundario); font-size: .88rem; } .comentario-texto { color: var(--texto); line-height: 1.7; white-space: normal; } .sem-comentarios { padding: 25px; text-align: center; background: #f1f7ff; border: 1px dashed #9db4d1; border-radius: 10px; color: var(--texto); } /* ---------------------------------------------------------- MODO ESCURO ---------------------------------------------------------- */ body.dark .comentario-aviso { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-aviso hr { border-top-color: var(--borda); } body.dark .comentario-formulario .formulario-card { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-formulario .formulario-card hr { border-top-color: var(--borda); } body.dark .comentario-formulario .formulario input, body.dark .comentario-formulario .formulario select, body.dark .comentario-formulario .formulario textarea { background: #25324a; color: #ffffff; border-color: #475569; } body.dark .comentario-formulario .formulario input::placeholder, body.dark .comentario-formulario .formulario textarea::placeholder { color: #94a3b8; } body.dark .comentarios-publicados { background: var(--fundo-card); border-color: var(--borda); } body.dark .comentario-publicado { background: #25324a; border-color: #475569; border-left-color: var(--azul); } body.dark .sem-comentarios { background: #25324a; border-color: #475569; } /* ---------------------------------------------------------- TELEMÓVEL ---------------------------------------------------------- */ @media (max-width: 700px) { .comentario-aviso, .comentario-formulario, .comentarios-publicados { width: 94%; } .comentario-formulario .formulario-card, .comentarios-publicados, .comentario-aviso { padding: 22px; } .comentario-formulario .formulario .linha { grid-template-columns: 1fr; gap: 0; } .comentario-cabecalho { flex-direction: column; align-items: flex-start; } } /* ========================================================== BOTÃO VOLTAR AO TOPO ========================================================== */ .btn-topo { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; background: var(--azul); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; box-shadow: 0 8px 20px rgba(15,23,42,.25); font-size: 1.1rem; cursor: pointer; z-index: 9999; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .btn-topo:hover { background: var(--azul-hover); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(15,23,42,.30); } .btn-topo:focus-visible { outline: 3px solid rgba(37,99,235,.30); outline-offset: 3px; } /* MODO ESCURO */ body.dark .btn-topo { background: var(--azul); color: #fff; } /* TELEMÓVEL */ @media (max-width: 700px) { .btn-topo { right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 10px; } } /* ========================================================== RODAPÉ — MARGENS LATERAIS ========================================================== */ .footer-conteudo { width: min(1200px, 90%); margin-left: auto; margin-right: auto; } footer > p { width: min(1200px, 90%); margin-left: auto; margin-right: auto; } /* ========================================================== PAINEL ADMINISTRAÇÃO — MAIS COMPACTO ========================================================== */ .submenu-admin { width: 245px; min-width: 245px; padding: 10px; } .submenu-admin .submenu-coluna { width: 100%; } .submenu-admin .submenu-coluna a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 0.88rem; line-height: 1.2; white-space: nowrap; } .submenu-admin .submenu-coluna a i { width: 18px; min-width: 18px; font-size: 0.9rem; text-align: center; } .submenu-admin .submenu-coluna hr { margin: 7px 0; } /* Modo escuro */ body.dark .submenu-admin { background: var(--fundo-card); } /* Telemóvel */ @media (max-width: 700px) { .submenu-admin { width: 220px; min-width: 220px; padding: 8px; } .submenu-admin .submenu-coluna a { padding: 7px 8px; font-size: 0.84rem; } } /* ========================================================== PAINEL ADMINISTRAÇÃO — COMPACTO ========================================================== */ .submenu-admin { width: 235px; min-width: 235px; padding: 8px; } .submenu-admin .submenu-coluna { width: 100%; } .submenu-admin .submenu-coluna a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-size: 0.86rem; line-height: 1.25; white-space: nowrap; } .submenu-admin .submenu-coluna a i { width: 17px; min-width: 17px; font-size: 0.85rem; text-align: center; } .submenu-admin .submenu-coluna hr { margin: 6px 0; } body.dark .submenu-admin { background: var(--fundo-card); } @media (max-width: 700px) { .submenu-admin { width: 215px; min-width: 215px; padding: 7px; } .submenu-admin .submenu-coluna a { padding: 6px 8px; font-size: 0.82rem; } } /* ========================================================== SUBMENUS FERRAMENTAS IA / DESTAQUES PAINEL NAVEGÁVEL PARA PORTÁTIL E DESKTOP ========================================================== */ @media (min-width: 901px) { .menu-principal .dropdown > .submenu { width: min(900px, calc(100vw - 40px)); min-width: 0; max-width: 900px; max-height: 70vh; padding: 18px; overflow-y: auto; overflow-x: hidden; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; box-sizing: border-box; } .menu-principal .dropdown:hover > .submenu { display: grid; } .menu-principal .submenu-coluna { min-width: 0; padding: 4px; } .menu-principal .submenu-coluna h4 { font-size: .88rem; margin-bottom: 8px; padding-bottom: 6px; } .menu-principal .submenu-coluna a { padding: 7px 9px; font-size: .82rem; min-height: 34px; } /* Barra de deslocamento do painel */ .menu-principal .dropdown > .submenu::-webkit-scrollbar { width: 8px; } .menu-principal .dropdown > .submenu::-webkit-scrollbar-track { background: var(--fundo-hover); border-radius: 10px; } .menu-principal .dropdown > .submenu::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 10px; } /* Evita que o painel saia do lado direito */ .menu-principal .dropdown:last-child > .submenu { right: 0; left: auto; } } /* ========================================================== MODO ESCURO ========================================================== */ body.dark .menu-principal .dropdown > .submenu { background: var(--fundo-card); border-color: var(--borda); } /* ========================================================== TABLET ========================================================== */ @media (min-width: 701px) and (max-width: 900px) { .menu-principal .dropdown > .submenu { width: min(760px, calc(100vw - 30px)); min-width: 0; max-height: 70vh; overflow-y: auto; overflow-x: hidden; } } /* ========================================================== MENU NAVEGÁVEL — FERRAMENTAS IA / DESTAQUES ========================================================== */ /* ========================================================== CORREÇÃO FINAL — NAVEGAÇÃO DO PAINEL Ferramentas IA / Destaques ========================================================== */ @media (min-width: 901px) { /* Painel principal */ .menu-principal .menu-navegavel-painel { width: 370px !important; min-width: 370px !important; max-width: 370px !important; height: auto; max-height: 70vh; overflow: hidden !important; padding: 16px !important; display: block !important; box-sizing: border-box; } /* ------------------------------------------------------ VISTA 1 — CATEGORIAS ------------------------------------------------------ */ .menu-principal .menu-navegavel-painel .submenu-categorias { display: block; width: 100%; max-height: calc(70vh - 32px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } /* ------------------------------------------------------ VISTA 2 — LISTA DE UMA CATEGORIA Escondida por defeito ------------------------------------------------------ */ .menu-principal .menu-navegavel-painel .submenu-lista-categoria { display: none !important; width: 100%; max-height: calc(70vh - 32px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } /* ------------------------------------------------------ QUANDO ESCOLHE UMA CATEGORIA ------------------------------------------------------ */ .menu-principal .menu-navegavel-painel.mostrar-categoria .submenu-categorias { display: none !important; } .menu-principal .menu-navegavel-painel.mostrar-categoria .submenu-lista-categoria.ativa { display: block !important; } /* ------------------------------------------------------ CABEÇALHO DA CATEGORIA ------------------------------------------------------ */ .menu-principal .submenu-lista-cabecalho { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); box-sizing: border-box; } .menu-principal .submenu-lista-cabecalho h4 { flex: 1; margin: 0; padding: 0; border: 0; font-size: .88rem; line-height: 1.25; color: var(--azul); } /* ------------------------------------------------------ BOTÃO ← CATEGORIAS ------------------------------------------------------ */ .menu-principal .submenu-voltar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-hover); color: var(--azul); font-size: .75rem; cursor: pointer; transition: background .2s ease, transform .2s ease; } .menu-principal .submenu-voltar:hover { background: var(--fundo-card); transform: translateX(-2px); } /* ------------------------------------------------------ LISTA DE FERRAMENTAS ------------------------------------------------------ */ .menu-principal .submenu-ferramentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; box-sizing: border-box; } .menu-principal .submenu-ferramentas a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-card); color: var(--texto); font-size: .78rem; line-height: 1.2; box-sizing: border-box; } .menu-principal .submenu-ferramentas a:hover { background: var(--fundo-hover); color: var(--azul); transform: none; } .menu-principal .submenu-ferramentas a i { width: 18px; flex-shrink: 0; text-align: center; color: var(--azul); } .menu-principal .submenu-ferramentas a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------ CATEGORIAS ------------------------------------------------------ */ .menu-principal .submenu-categoria { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--texto); text-align: left; font-size: .80rem; cursor: pointer; box-sizing: border-box; } .menu-principal .submenu-categoria:hover { background: var(--fundo-hover); color: var(--azul); } .menu-principal .submenu-categoria span { flex: 1; min-width: 0; } .menu-principal .submenu-categoria i:first-child { width: 18px; color: var(--azul); text-align: center; } .menu-principal .submenu-categoria i:last-child { color: var(--texto-secundario); font-size: .7rem; } /* Título das categorias */ .menu-principal .submenu-titulo { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--azul); color: var(--azul); font-size: .85rem; font-weight: 700; } } /* ========================================================== TABLET / TELEMÓVEL Mantém o comportamento já existente ========================================================== */ @media (max-width: 900px) { .menu-principal .menu-navegavel-painel { max-width: calc(100vw - 30px); box-sizing: border-box; overflow: hidden; } .menu-principal .submenu-lista-categoria { width: 100%; box-sizing: border-box; } .menu-principal .submenu-ferramentas { grid-template-columns: 1fr 1fr; width: 100%; } } /* ========================================================== PAINEL NAVEGÁVEL — CONTROLO FINAL ========================================================== */ @media (min-width: 901px) { /* O painel navegável só abre com .menu-aberto */ .menu-principal .menu-navegavel > .submenu-navegavel-painel { display: none !important; } .menu-principal .menu-navegavel.menu-aberto > .submenu-navegavel-painel { display: block !important; } /* Impede o sistema antigo .dropdown:hover de abrir o painel */ .menu-principal .menu-navegavel:hover > .submenu-navegavel-painel { display: none !important; } .menu-principal .menu-navegavel.menu-aberto:hover > .submenu-navegavel-painel { display: block !important; } /* Painel único */ .menu-principal .menu-navegavel-painel { width: 460px !important; min-width: 460px !important; max-width: 460px !important; max-height: 70vh; overflow: hidden !important; padding: 16px !important; box-sizing: border-box; } /* Categorias */ .menu-principal .menu-navegavel-painel .submenu-categorias { display: block; width: 100%; max-height: calc(70vh - 32px); overflow-y: auto; overflow-x: hidden; } /* Listas escondidas */ .menu-principal .menu-navegavel-painel .submenu-lista-categoria { display: none !important; width: 100%; } /* Categoria escolhida */ .menu-principal .menu-navegavel-painel.mostrar-categoria .submenu-categorias { display: none !important; } .menu-principal .menu-navegavel-painel.mostrar-categoria .submenu-lista-categoria.ativa { display: block !important; } } /* ========================================================== AJUSTE FINAL — PAINEL COMPACTO DESKTOP ========================================================== */ @media (min-width: 901px) { .menu-principal .menu-navegavel-painel { width: 370px !important; min-width: 370px !important; max-width: 370px !important; max-height: 65vh; padding: 12px !important; border-radius: 12px; box-sizing: border-box; } .menu-principal .submenu-categorias, .menu-principal .submenu-lista-categoria { max-height: calc(65vh - 24px); } .menu-principal .submenu-titulo { font-size: .80rem; margin-bottom: 7px; padding-bottom: 6px; } .menu-principal .submenu-categoria { padding: 7px 8px; margin-bottom: 3px; font-size: .76rem; } .menu-principal .submenu-lista-cabecalho { gap: 7px; margin-bottom: 9px; padding-bottom: 7px; } .menu-principal .submenu-lista-cabecalho h4 { font-size: .80rem; } .menu-principal .submenu-voltar { padding: 6px 8px; font-size: .70rem; } .menu-principal .submenu-ferramentas { gap: 5px; } .menu-principal .submenu-ferramentas a { padding: 6px 7px; gap: 6px; min-height: 30px; font-size: .72rem; border-radius: 8px; } .menu-principal .submenu-ferramentas a i { width: 16px; } } /* ========================================================== PAINEL NAVEGÁVEL — GRELHA COMPACTA E ADAPTÁVEL ========================================================== */ @media (min-width: 901px) { /* Painel pequeno e sem deslocamento horizontal */ .menu-principal .menu-navegavel-painel { width: 360px !important; min-width: 360px !important; max-width: 360px !important; max-height: 65vh; padding: 10px !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box; } /* ------------------------------------------------------ CATEGORIAS ------------------------------------------------------ */ .menu-principal .submenu-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; width: 100%; box-sizing: border-box; } .menu-principal .submenu-titulo { grid-column: 1 / -1; margin-bottom: 4px; padding-bottom: 5px; font-size: .76rem; } .menu-principal .submenu-categoria { width: 100%; margin: 0; padding: 6px 7px; gap: 6px; font-size: .70rem; min-width: 0; border-radius: 7px; box-sizing: border-box; } .menu-principal .submenu-categoria span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-principal .submenu-categoria i:first-child { width: 15px; flex-shrink: 0; } .menu-principal .submenu-categoria i:last-child { font-size: .58rem; flex-shrink: 0; } /* ------------------------------------------------------ CABEÇALHO DA CATEGORIA ------------------------------------------------------ */ .menu-principal .submenu-lista-cabecalho { gap: 6px; margin-bottom: 6px; padding-bottom: 6px; } .menu-principal .submenu-lista-cabecalho h4 { font-size: .76rem; line-height: 1.15; } .menu-principal .submenu-voltar { padding: 5px 7px; font-size: .65rem; gap: 4px; border-radius: 7px; } /* ------------------------------------------------------ FERRAMENTAS — 2 COLUNAS ------------------------------------------------------ */ .menu-principal .submenu-ferramentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; box-sizing: border-box; } .menu-principal .submenu-ferramentas a { width: 100%; min-width: 0; min-height: 27px; padding: 5px 6px; gap: 5px; font-size: .67rem; line-height: 1.1; border-radius: 7px; box-sizing: border-box; } .menu-principal .submenu-ferramentas a i { width: 14px; flex-shrink: 0; } .menu-principal .submenu-ferramentas a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ========================================================== ECRÃS GRANDES — APROVEITAR 3 COLUNAS ========================================================== */ @media (min-width: 1250px) { .menu-principal .menu-navegavel-painel { width: 400px !important; min-width: 400px !important; max-width: 400px !important; } .menu-principal .submenu-ferramentas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menu-principal .submenu-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menu-principal .submenu-titulo { grid-column: 1 / -1; } } /* ========================================================== AJUSTE FINAL — PAINEL COMPACTO Ferramentas IA / Destaques ========================================================== */ @media (min-width: 901px) { /* ------------------------------------------------------ PAINEL PRINCIPAL ------------------------------------------------------ */ .menu-principal .menu-navegavel-painel { width: 330px !important; min-width: 330px !important; max-width: 330px !important; padding: 9px !important; max-height: 65vh; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; } /* ------------------------------------------------------ CATEGORIAS ------------------------------------------------------ */ .menu-principal .submenu-categorias { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 3px !important; width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .menu-principal .submenu-titulo { grid-column: 1 / -1; margin: 0 0 5px 0; padding: 0 0 5px 0; font-size: .74rem; } .menu-principal .submenu-categoria { width: 100%; min-width: 0; margin: 0 !important; padding: 5px 6px !important; gap: 5px; font-size: .68rem; line-height: 1.1; border-radius: 6px; box-sizing: border-box; } .menu-principal .submenu-categoria span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------ LISTA DA CATEGORIA ------------------------------------------------------ */ .menu-principal .submenu-lista-categoria { width: 100%; min-width: 0; box-sizing: border-box; } /* ------------------------------------------------------ CABEÇALHO ------------------------------------------------------ */ .menu-principal .submenu-lista-cabecalho { gap: 5px; margin: 0 0 5px 0; padding: 0 0 5px 0; } .menu-principal .submenu-lista-cabecalho h4 { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-principal .submenu-voltar { padding: 5px 6px; font-size: .63rem; gap: 3px; border-radius: 6px; flex-shrink: 0; } /* ------------------------------------------------------ FERRAMENTAS — DUAS COLUNAS MUITO JUNTAS ------------------------------------------------------ */ .menu-principal .submenu-ferramentas { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px !important; width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .menu-principal .submenu-ferramentas a { width: 100%; min-width: 0; min-height: 26px; padding: 4px 5px !important; margin: 0 !important; gap: 4px; font-size: .66rem; line-height: 1.1; border-radius: 6px; box-sizing: border-box; } .menu-principal .submenu-ferramentas a i { width: 14px; min-width: 14px; flex-shrink: 0; } .menu-principal .submenu-ferramentas a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ========================================================== DESKTOP GRANDE — TRÊS COLUNAS ========================================================== */ @media (min-width: 1200px) { .menu-principal .menu-navegavel-painel { width: 360px !important; min-width: 360px !important; max-width: 360px !important; } .menu-principal .submenu-ferramentas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .menu-principal .submenu-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== NUNCA PERMITIR DESLOCAMENTO HORIZONTAL ========================================================== */ .menu-principal .menu-navegavel-painel, .menu-principal .submenu-categorias, .menu-principal .submenu-lista-categoria, .menu-principal .submenu-ferramentas { overflow-x: hidden !important; max-width: 100%; box-sizing: border-box; } /* ========================================================== PAINEL NAVEGÁVEL — TAMANHO COMPACTO FINAL ========================================================== */ @media (min-width: 901px) { .menu-principal .dropdown.menu-navegavel > .submenu-navegavel-painel { width: 360px !important; min-width: 360px !important; max-width: 360px !important; padding: 10px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Ferramentas em duas colunas */ .menu-principal .dropdown.menu-navegavel > .submenu-navegavel-painel .submenu-ferramentas { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px !important; width: 100% !important; box-sizing: border-box !important; } /* Cada ferramenta */ .menu-principal .dropdown.menu-navegavel > .submenu-navegavel-painel .submenu-ferramentas a { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 5px 6px !important; box-sizing: border-box !important; font-size: .70rem !important; } /* Categorias em duas colunas */ .menu-principal .dropdown.menu-navegavel > .submenu-navegavel-painel .submenu-categorias { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px !important; width: 100% !important; box-sizing: border-box !important; } .menu-principal .dropdown.menu-navegavel > .submenu-navegavel-painel .submenu-categoria { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box !important; } } /* ========================================================== ADMINISTRAÇÃO — PAINEL COMPACTO Não interfere com Ferramentas IA / Destaques ========================================================== */ @media (min-width: 901px) { .menu-principal .dropdown:last-child > .submenu { width: 220px !important; min-width: 220px !important; max-width: 220px !important; padding: 12px !important; box-sizing: border-box !important; display: block !important; overflow-x: hidden !important; overflow-y: auto !important; } .menu-principal .dropdown:last-child > .submenu .submenu-coluna { width: 100% !important; min-width: 0 !important; gap: 2px !important; } .menu-principal .dropdown:last-child > .submenu .submenu-coluna a { width: 100% !important; box-sizing: border-box !important; padding: 7px 8px !important; font-size: .78rem !important; white-space: nowrap; } .menu-principal .dropdown:last-child > .submenu .submenu-coluna a i { width: 18px; flex-shrink: 0; } } /* ========================================================== ADMINISTRAÇÃO — ABRIR APENAS POR CLIQUE ========================================================== */ .menu-principal .dropdown:has(> a .fa-user-shield) > .submenu-admin { display: none !important; } .menu-principal .dropdown:has(> a .fa-user-shield).menu-aberto > .submenu-admin { display: grid !important; } /* ========================================================== ADMINISTRAÇÃO — FECHADO POR DEFEITO ABRE APENAS QUANDO O BOTÃO ESTÁ FOCADO ========================================================== */ .menu-principal .dropdown:has(> a .fa-user-shield) > .submenu-admin { display: none !important; } .menu-principal .dropdown:has(> a .fa-user-shield):focus-within > .submenu-admin { display: grid !important; } /* ========================================================== REDES SOCIAIS — BOTÕES SUPERIORES ========================================================== */ .redes-sociais-topo { display: flex; align-items: center; gap: 7px; margin-left: 6px; } .redes-sociais-topo a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; text-decoration: none; font-size: 17px; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .redes-sociais-topo a:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.25); opacity: 0.92; } /* Facebook */ .rede-facebook { background: #1877F2; } /* X / Twitter */ .rede-twitter { background: #000000; } /* Instagram */ .rede-instagram { background: linear-gradient( 135deg, #833AB4, #E1306C, #FD1D1D, #FCAF45 ); } /* WhatsApp */ .rede-whatsapp { background: #25D366; } /* ========================================================== REDES SOCIAIS — COR FIXA NOS MODOS CLARO E ESCURO ========================================================== */ .topo-direita .redes-sociais-topo a.rede-facebook { background: #1877F2; color: #ffffff; } .topo-direita .redes-sociais-topo a.rede-twitter { background: #000000; color: #ffffff; } .topo-direita .redes-sociais-topo a.rede-instagram { background: linear-gradient( 135deg, #833AB4, #E1306C, #FD1D1D, #FCAF45 ); color: #ffffff; } .topo-direita .redes-sociais-topo a.rede-whatsapp { background: #25D366; color: #ffffff; } .topo-direita .redes-sociais-topo a:hover { color: #ffffff; opacity: 0.9; }