/* * =============================================================== * Desenvolvido por id digital * id digital - autoria * Contacto: info@iddigital.pt - +351 936 138 867 * (c) 2026 id digital. Todos os direitos reservados. * Este ficheiro e o seu conteudo sao propriedade da id digital. * E proibida a alteracao, copia ou redistribuicao sem autorizacao. * =============================================================== */ /* ===================================================== Tema OSINT — variantes ESCURO e CLARO O tema é escolhido em Definições e aplicado via no header. A cor de acento (--primaria) continua a vir das definições da empresa; aqui ficam os defaults. ===================================================== */ /* ---------- ESCURO (default) ---------- */ :root, html[data-tema="escuro"]{ --primaria:#22d36f; --bg:#0a0e14; --bg-2:#0f141c; --bg-3:#141b26; --linha:#1e2836; --linha-forte:#2a3646; --txt:#c9d4e3; --txt-dim:#6b7c93; --txt-mute:#455468; --alerta:#ff4d5e; --aviso:#f5b942; --info:#3d9bff; --acento-txt:#04110a; /* texto sobre botão de acento */ --scanline:rgba(255,255,255,.015); --sombra:rgba(0,0,0,.5); --glow:rgba(34,211,111,.35); --acento-fraco:rgba(34,211,111,.12); } /* ---------- CLARO ---------- */ html[data-tema="claro"]{ --primaria:#0f9d58; /* verde mais escuro, legível sobre branco */ --bg:#f4f6f9; --bg-2:#ffffff; --bg-3:#eef1f5; --linha:#dde3ea; --linha-forte:#c6d0da; --txt:#1b2733; --txt-dim:#5a6b7b; --txt-mute:#8a99a8; --alerta:#d93544; --aviso:#b7791f; --info:#2563eb; --acento-txt:#ffffff; --scanline:rgba(0,0,0,.012); --sombra:rgba(31,45,61,.12); --glow:rgba(15,157,88,.28); --acento-fraco:rgba(15,157,88,.10); } *{box-sizing:border-box} body{ margin:0; font-family:var(--mono); background:var(--bg); color:var(--txt); font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased; } :root{--mono:'JetBrains Mono','SF Mono','Fira Code',ui-monospace,'Cascadia Code',Consolas,monospace} body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px); opacity:.5; } a{color:var(--primaria);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} ::selection{background:var(--primaria);color:var(--acento-txt)} /* Topbar */ .topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center; background:var(--bg-2);border-bottom:1px solid var(--linha);padding:0 22px;height:56px} /* Faixa do modo demonstracao */ .demo-banner{position:relative;z-index:2;background:var(--aviso);color:#1a1400;text-align:center; font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.03em;padding:7px 14px; border-bottom:1px solid rgba(0,0,0,.2)} /* Modo demo: esconder botoes de escrita (eliminar e submissoes de formularios POST). Os formularios de pesquisa usam method="get" e por isso nao sao afetados; botoes neutros (Cancelar/Fechar) usam .btn-sec e ficam visiveis; os links de "Ver" (leitura) mantem-se. */ body.demo-mode .btn-danger, body.demo-mode .btn-perigo, body.demo-mode form[method="post"] button[type="submit"], body.demo-mode form[method="POST"] button[type="submit"], body.demo-mode .toolbar .btn, body.demo-mode .tabela td.acoes a[href*="del="], body.demo-mode .tabela td.acoes a[href*="edit="]{display:none !important} /* Botao hamburguer (so aparece em mobile) */ .menu-toggle{display:none;background:transparent;border:0;color:var(--txt);padding:6px;margin-right:4px;cursor:pointer;align-items:center;justify-content:center} .menu-toggle:hover{color:var(--primaria)} /* Overlay escuro por tras do menu aberto (so mobile) */ .menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:39} .menu-overlay.aberto{display:block} .brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.02em;font-size:15px;color:var(--txt);text-decoration:none} .brand:hover{text-decoration:none;color:var(--txt)} .brand::before{content:"▚";color:var(--primaria);font-size:16px} .brand-logo{height:30px;width:auto;border-radius:4px} .topbar-right{display:flex;align-items:center;gap:14px} .user-name{color:var(--txt-dim);font-size:13px} .user-name::before{content:"@ ";color:var(--primaria)} .lang-select{background:var(--bg-3);border:1px solid var(--linha);color:var(--txt);border-radius:6px;padding:5px 8px;font-family:var(--mono);font-size:12px} .btn-logout{background:transparent;color:var(--txt-dim);border:1px solid var(--linha);padding:6px 12px;border-radius:6px;font-size:12px} .btn-logout:hover{color:var(--alerta);border-color:var(--alerta);text-decoration:none} /* Layout FULL-WIDTH */ .layout{position:relative;z-index:1;display:flex;min-height:calc(100vh - 56px - 38px)} .sidebar{width:220px;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--linha);padding:12px 0} .menu-item{display:flex;align-items:center;gap:11px;padding:10px 20px;color:var(--txt-dim);font-size:13px;border-left:2px solid transparent;transition:.12s} .menu-ico{flex-shrink:0;display:block} .menu-item:hover{background:var(--bg-3);color:var(--txt);text-decoration:none} .menu-item.ativo{border-left-color:var(--primaria);color:var(--primaria);background:linear-gradient(90deg,var(--acento-fraco),transparent)} .content{flex:1;min-width:0;padding:22px 28px;width:100%} /* o conteúdo ocupa toda a largura disponível */ .content > *{max-width:none} h1{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:.01em;color:var(--txt)} h1::before{content:"// ";color:var(--primaria);font-weight:400} h2{font-size:14px;color:var(--txt);margin:24px 0 12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600} h2::before{content:"# ";color:var(--txt-dim)} /* Cartões de estatística */ .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0 22px} .stat-card{background:var(--bg-2);border:1px solid var(--linha);border-radius:8px;padding:16px;position:relative;overflow:hidden} .stat-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--primaria),transparent)} .stat-card .num{font-size:27px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1} .stat-card .lbl{color:var(--txt-dim);font-size:11px;margin-top:6px;text-transform:uppercase;letter-spacing:.06em} /* ---------- TABS ---------- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin:18px 0 20px;flex-wrap:wrap} .tab{ padding:9px 18px;font-size:12px;font-family:var(--mono);font-weight:600; text-transform:uppercase;letter-spacing:.05em; color:var(--txt-dim);background:transparent;border:none;border-bottom:2px solid transparent; cursor:pointer;transition:.12s;margin-bottom:-1px; } .tab:hover{color:var(--txt)} .tab.ativo{color:var(--primaria);border-bottom-color:var(--primaria)} .tab-panel{display:none;animation:fade .2s ease} .tab-panel.ativo{display:block} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* Grelha de 2 colunas para formulários largos */ .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 26px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px} /* Tabelas — densas, full-width */ .tabela{width:100%;border-collapse:collapse;background:var(--bg-2);border:1px solid var(--linha);border-radius:8px;overflow:hidden;font-size:13px} .tabela th,.tabela td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--linha)} .tabela th{background:var(--bg-3);color:var(--txt-dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px} .tabela tbody tr:last-child td{border-bottom:none} .tabela tbody tr:hover td{background:var(--acento-fraco)} .tabela small{color:var(--txt-mute)} .tabela code{font-size:12px;color:var(--txt)} /* Badges */ .badge{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent} .badge.disponivel,.badge.livre,.badge.concluida{background:var(--acento-fraco);color:var(--primaria);border-color:var(--primaria)} .badge.atribuido{background:rgba(61,155,255,.12);color:var(--info);border-color:var(--info)} .badge.manutencao,.badge.em_curso,.badge.reservado{background:rgba(245,185,66,.14);color:var(--aviso);border-color:var(--aviso)} .badge.abatido{background:rgba(107,124,147,.14);color:var(--txt-dim);border-color:var(--linha-forte)} .badge.aberta{background:rgba(255,77,94,.12);color:var(--alerta);border-color:var(--alerta)} /* Botões */ .btn{display:inline-block;background:var(--primaria);color:var(--acento-txt);border:none;padding:8px 15px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--mono)} .btn:hover{filter:brightness(1.08);text-decoration:none;box-shadow:0 0 12px var(--glow)} .btn-sec{background:var(--bg-3);color:var(--txt);border:1px solid var(--linha-forte)} .btn-sec:hover{border-color:var(--primaria);box-shadow:none;color:var(--primaria)} .btn-danger{background:transparent;color:var(--alerta);border:1px solid var(--alerta)} .btn-danger:hover{background:rgba(217,53,68,.1);box-shadow:none} .btn-sm{padding:4px 9px;font-size:12px} .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap} /* Formulários */ form.card,.card{background:var(--bg-2);border:1px solid var(--linha);border-radius:8px;padding:20px} form.card{max-width:none} .form-row{margin-bottom:13px;display:flex;flex-direction:column;gap:5px} .form-row label{font-size:11px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .form-row input,.form-row select,.form-row textarea{padding:9px 11px;background:var(--bg);border:1px solid var(--linha-forte);border-radius:6px;font-size:13px;font-family:var(--mono);color:var(--txt)} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--primaria);box-shadow:0 0 0 3px var(--acento-fraco)} .form-row textarea{min-height:76px;resize:vertical} .form-row .hint{font-size:11px;color:var(--txt-mute);text-transform:none;letter-spacing:0} .form-actions{display:flex;gap:10px;margin-top:6px} .alert{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:13px;border:1px solid} .alert::before{font-weight:700;margin-right:8px} .alert.ok{background:var(--acento-fraco);color:var(--primaria);border-color:var(--primaria)} .alert.ok::before{content:"[OK]"} .alert.err{background:rgba(217,53,68,.1);color:var(--alerta);border-color:var(--alerta)} .alert.err::before{content:"[ERRO]"} .rodape{position:relative;z-index:2;height:38px;display:flex;align-items:center;justify-content:center;color:var(--txt-mute);font-size:11px;background:var(--bg-2);border-top:1px solid var(--linha);letter-spacing:.04em} /* Mapa de IPs (grelha) */ .ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:6px} .ip-cell{border:1px solid var(--linha);border-radius:5px;padding:7px 9px;font-size:12px;background:var(--bg-2);position:relative} .ip-cell .ip{font-weight:600} .ip-cell.livre{border-left:3px solid var(--primaria)} .ip-cell.atribuido{border-left:3px solid var(--info)} .ip-cell.reservado{border-left:3px solid var(--aviso)} .ip-cell small{display:block;color:var(--txt-mute);font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Login e instalador */ .centered-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden} .centered-page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px)} .centered-page::after{content:"";position:absolute;width:600px;height:600px;pointer-events:none;z-index:0;background:radial-gradient(circle,var(--acento-fraco),transparent 70%);top:-200px;right:-150px} .centered-box{position:relative;z-index:2;background:var(--bg-2);border:1px solid var(--linha);border-radius:10px;padding:32px;width:100%;max-width:400px;box-shadow:0 20px 60px var(--sombra)} .centered-box h2{margin:0 0 6px;text-align:center;color:var(--txt);font-size:18px} .centered-box h2::before{content:""} .centered-box p.sub{text-align:center;color:var(--txt-dim);margin:0 0 22px;font-size:12px;text-transform:uppercase;letter-spacing:.08em} .centered-box input,.centered-box select{width:100%;padding:11px;background:var(--bg);border:1px solid var(--linha-forte);border-radius:6px;margin-bottom:13px;font-size:14px;color:var(--txt);font-family:var(--mono)} .centered-box input:focus{outline:none;border-color:var(--primaria);box-shadow:0 0 0 3px var(--acento-fraco)} .centered-box .btn{width:100%;padding:12px} .centered-box h4{color:var(--txt-dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px} .color-inline{display:flex;gap:8px;align-items:center} .color-inline input[type=color]{width:52px;height:40px;padding:2px;background:var(--bg);border:1px solid var(--linha-forte)} @media(max-width:720px){ /* Rede de seguranca: nada deve provocar deslize horizontal em mobile */ html,body{max-width:100%;overflow-x:hidden} .content{padding:16px;overflow-x:hidden} .content > *{max-width:100%} /* CSS Grid: permitir que as colunas/filhos encolham (evita transbordo) */ .dash-grid{gap:12px} .dash-grid > *{min-width:0} .dash-lista,.dash-lista-titulo,.dash-lista .item{min-width:0;max-width:100%} /* barras do painel: a etiqueta encolhe e a barra pode diminuir */ .dash-bar-lbl{width:auto;min-width:84px;max-width:40%} .dash-bar-track{min-width:0} /* Mostrar o botao hamburguer */ .menu-toggle{display:inline-flex} .topbar{padding:0 12px;gap:8px} /* Evitar que o topo transborde com nomes/logos compridos */ .brand{min-width:0;font-size:14px;overflow:hidden} .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-right{gap:8px;min-width:0;flex-shrink:0} .user-name{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* A sidebar passa a painel deslizante (drawer), fora do ecra por defeito */ .sidebar{ position:fixed;top:0;left:0;bottom:0;width:230px;z-index:40; padding:12px 0;overflow-y:auto; transform:translateX(-100%);transition:transform .22s ease; box-shadow:2px 0 16px rgba(0,0,0,.4); } .sidebar.aberto{transform:translateX(0)} /* garantir que o texto do menu aparece no drawer */ .menu-item{padding:12px 20px;justify-content:flex-start;gap:11px} .menu-item .menu-txt{display:inline} .layout{display:block} /* Tabelas de listagem viram cartoes empilhados (so as que tem thead) */ .tabela{border:0;background:transparent;font-size:13px} .tabela thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .tabela tbody tr{ display:block;margin-bottom:12px;background:var(--bg-2); border:1px solid var(--linha);border-radius:10px;overflow:hidden; } .tabela tbody tr:hover td{background:transparent} .tabela tbody td{ display:flex;justify-content:space-between;align-items:flex-start;gap:12px; padding:9px 14px;border-bottom:1px solid var(--linha);text-align:right; } .tabela tbody tr td:last-child{border-bottom:0} .tabela tbody td::before{ content:attr(data-label); color:var(--txt-dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em; text-align:left;flex-shrink:0;font-weight:600; } /* celulas sem etiqueta (ex.: coluna de acoes) ocupam a linha toda */ .tabela tbody td[data-label=""]::before, .tabela tbody td:not([data-label])::before{content:none} /* coluna de acoes: botoes alinhados e com espaco tocavel */ .tabela td.acoes{justify-content:flex-end;flex-wrap:wrap;gap:8px;background:var(--bg-3)} .tabela td.acoes::before{content:none} .tabela td.acoes .btn-sm{padding:8px 12px} /* Cabecalho de listagem (toolbar): pesquisa e botao empilhados/legiveis */ .toolbar{flex-direction:column;align-items:stretch;gap:10px} .toolbar > h1{margin:0} /* a linha de controlos (pesquisa + adicionar) ocupa a largura toda */ .toolbar > div{display:flex;gap:8px;width:100%} .toolbar input[type="search"]{flex:1;min-width:0 !important;width:auto} /* o botao adicionar nao encolhe nem parte o texto */ .toolbar .btn{flex-shrink:0;white-space:nowrap} /* Resumo de inventario: cartoes em largura toda, estilo dos "alerta-card" */ .stats-resumo{grid-template-columns:1fr !important;gap:10px} .stats-resumo .stat-card{ padding:16px 18px;border:1px solid var(--linha-forte);border-radius:10px; } /* barra verde do topo passa a barra lateral esquerda (acento), como destaque */ .stats-resumo .stat-card::after{top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--primaria),transparent)} .stats-resumo .stat-card .num{font-size:26px} /* o cartao da licenca (brand) mantem o seu proprio empilhamento ja definido */ .stats-resumo .stat-card-brand::after{display:none} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* Coluna de acoes das tabelas de listagem: alinhada a direita */ .tabela th.acoes, .tabela td.acoes{ text-align:right; white-space:nowrap; } .tabela td.acoes .btn{ margin-left:4px; }