/* ============================================================================ G10 NETWORK - Folha de estilo do tema "padrao" ---------------------------------------------------------------------------- Modo CLARO e ESCURO por variaveis CSS (atributo data-tema em ). Visual futurista: gradientes suaves, vidro (backdrop-filter), brilho neon, animacoes de entrada e pulsacao em alarmes. ============================================================================ */ /* ---------- Variaveis: tema ESCURO (padrao) ---------- */ :root, :root[data-tema="escuro"] { --fundo: #070b16; --fundo-gradiente: radial-gradient(1200px 600px at 10% -10%, rgba(0,212,255,.12), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.14), transparent 55%); --fundo-2: rgba(15, 22, 41, .78); --fundo-3: rgba(22, 31, 56, .9); --fundo-entrada: rgba(9, 14, 28, .9); --texto: #e6edf7; --texto-2: #9aa8c2; --texto-3: #6b7894; --borda: rgba(120, 150, 210, .18); --borda-forte: rgba(120, 150, 210, .35); --primaria: #00d4ff; --primaria-escura: #0099bb; --primaria-texto: #041018; --secundaria: #8b5cf6; --sucesso: #22c55e; --aviso: #f59e0b; --perigo: #ef4444; --info: #38bdf8; --sombra: 0 10px 30px rgba(0,0,0,.45); --brilho: 0 0 24px rgba(0,212,255,.25); --raio: 14px; --menu-largura: 264px; --topo-altura: 62px; --grafico-grade: rgba(150,170,210,.12); color-scheme: dark; } /* ---------- Variaveis: tema CLARO ---------- */ :root[data-tema="claro"] { --fundo: #eef2f9; --fundo-gradiente: radial-gradient(1200px 600px at 10% -10%, rgba(0,150,200,.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.10), transparent 55%); --fundo-2: rgba(255,255,255,.85); --fundo-3: rgba(245,248,253,.95); --fundo-entrada: #ffffff; --texto: #10192b; --texto-2: #4b5872; --texto-3: #7c879c; --borda: rgba(30, 60, 120, .14); --borda-forte: rgba(30, 60, 120, .3); --primaria: #0284c7; --primaria-escura: #075985; --primaria-texto: #ffffff; --secundaria: #7c3aed; --sucesso: #16a34a; --aviso: #d97706; --perigo: #dc2626; --info: #0ea5e9; --sombra: 0 10px 30px rgba(20,40,90,.10); --brilho: 0 0 20px rgba(2,132,199,.18); --grafico-grade: rgba(30,60,120,.10); color-scheme: light; } /* Tema automatico segue o sistema operacional */ @media (prefers-color-scheme: light) { :root[data-tema="automatico"] { --fundo: #eef2f9; --fundo-2: rgba(255,255,255,.85); --fundo-3: rgba(245,248,253,.95); --fundo-entrada: #ffffff; --texto: #10192b; --texto-2: #4b5872; --texto-3: #7c879c; --borda: rgba(30,60,120,.14); --borda-forte: rgba(30,60,120,.3); --primaria: #0284c7; --primaria-escura: #075985; --primaria-texto: #fff; --secundaria: #7c3aed; --sucesso: #16a34a; --aviso: #d97706; --perigo: #dc2626; --info: #0ea5e9; --sombra: 0 10px 30px rgba(20,40,90,.10); --brilho: 0 0 20px rgba(2,132,199,.18); --grafico-grade: rgba(30,60,120,.10); --fundo-gradiente: radial-gradient(1200px 600px at 10% -10%, rgba(0,150,200,.10), transparent 60%); color-scheme: light; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--texto); background: var(--fundo-gradiente), var(--fundo); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; transition: background .3s, color .3s; } a { color: var(--primaria); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 600; letter-spacing: .2px; } h1 { font-size: 1.45rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; } pre { background: var(--fundo-entrada); border: 1px solid var(--borda); border-radius: 10px; padding: .8rem; overflow: auto; max-height: 480px; } hr { border: 0; border-top: 1px solid var(--borda); margin: 1rem 0; } .oculto { display: none !important; } .texto-2 { color: var(--texto-2); } .texto-3 { color: var(--texto-3); } .texto-pequeno { font-size: .82rem; } .texto-mono { font-family: ui-monospace, Menlo, Consolas, monospace; } .texto-direita { text-align: right; } .texto-centro { text-align: center; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .flex-entre { justify-content: space-between; } .cresce { flex: 1; } /* ---------- Estrutura: menu lateral + topo + conteudo ---------- */ .aplicacao { display: grid; grid-template-columns: var(--menu-largura) 1fr; min-height: 100vh; transition: grid-template-columns .25s; } html[data-menu="recolhido"] .aplicacao { grid-template-columns: 0 1fr; } html[data-menu="recolhido"] .menu-lateral { transform: translateX(-100%); } .menu-lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; background: var(--fundo-2); backdrop-filter: blur(14px); border-right: 1px solid var(--borda); transition: transform .25s; display: flex; flex-direction: column; } .marca { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--borda); } .marca .logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--primaria), var(--secundaria)); box-shadow: var(--brilho); display: grid; place-items: center; color: #fff; font-weight: 800; } .marca .nome { font-weight: 700; letter-spacing: 1px; font-size: 1rem; } .marca .nome small { display: block; font-weight: 400; color: var(--texto-3); font-size: .7rem; letter-spacing: 2px; } .menu-lista { list-style: none; margin: 0; padding: .6rem; flex: 1; } .menu-lista li a, .menu-grupo-titulo { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 10px; color: var(--texto-2); transition: background .2s, color .2s, transform .2s; font-size: .93rem; } .menu-lista li a:hover { background: rgba(0,212,255,.08); color: var(--texto); text-decoration: none; transform: translateX(2px); } .menu-lista li a.ativo { background: linear-gradient(90deg, rgba(0,212,255,.18), rgba(139,92,246,.12)); color: var(--texto); border-left: 3px solid var(--primaria); } .menu-grupo-titulo { margin-top: .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-3); cursor: default; } .menu-lista .submenu { list-style: none; margin: 0; padding: 0 0 0 .4rem; } .icone { width: 20px; height: 20px; display: inline-block; flex: none; } .icone svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menu-rodape { padding: .8rem 1rem; border-top: 1px solid var(--borda); font-size: .75rem; color: var(--texto-3); } .principal { display: flex; flex-direction: column; min-width: 0; } .topo { position: sticky; top: 0; z-index: 20; height: var(--topo-altura); display: flex; align-items: center; gap: .8rem; padding: 0 1.2rem; background: var(--fundo-2); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); } .topo .titulo { font-weight: 600; font-size: 1.05rem; flex: 1; } .topo .relogio { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: .85rem; } .conteudo { padding: 1.3rem; animation: aparecer .35s ease-out; } @keyframes aparecer { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } } .rodape { padding: .8rem 1.3rem; color: var(--texto-3); font-size: .78rem; border-top: 1px solid var(--borda); } /* ---------- Botoes ---------- */ .botao { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--fundo-3); color: var(--texto); cursor: pointer; font: inherit; font-size: .9rem; transition: all .2s; white-space: nowrap; } .botao:hover { border-color: var(--primaria); box-shadow: var(--brilho); text-decoration: none; transform: translateY(-1px); } .botao:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .botao.primario { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); color: var(--primaria-texto); border-color: transparent; font-weight: 600; } .botao.secundario { background: linear-gradient(135deg, var(--secundaria), #5b21b6); color: #fff; border-color: transparent; } .botao.perigo { background: linear-gradient(135deg, var(--perigo), #991b1b); color: #fff; border-color: transparent; } .botao.sucesso { background: linear-gradient(135deg, var(--sucesso), #166534); color: #fff; border-color: transparent; } .botao.aviso { background: linear-gradient(135deg, var(--aviso), #b45309); color: #fff; border-color: transparent; } .botao.fantasma { background: transparent; } .botao.pequeno { padding: .28rem .6rem; font-size: .8rem; border-radius: 8px; } .botao.icone-so { padding: .4rem; } .botao .icone { width: 16px; height: 16px; } /* ---------- Cartoes ---------- */ .cartao { background: var(--fundo-2); backdrop-filter: blur(12px); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; position: relative; overflow: hidden; } .cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primaria), transparent); opacity: .6; } .cartao-titulo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; } .cartao-titulo h2 { margin: 0; } /* ---------- KPI (indicadores do painel) ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; } .kpi { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--brilho); } .kpi .rotulo { font-size: .78rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1.2px; } .kpi .numero { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .2rem; } .kpi .numero.primaria { color: var(--primaria); } .kpi .numero.sucesso { color: var(--sucesso); } .kpi .numero.perigo { color: var(--perigo); } .kpi .numero.aviso { color: var(--aviso); } .kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,.18), transparent 70%); } .kpi.alerta { border-color: var(--perigo); animation: pulsar-borda 1.4s infinite; } @keyframes pulsar-borda { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45);} 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0);} } /* ---------- Tabelas ---------- */ .tabela-envolve { overflow-x: auto; } .tabela { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabela th, .tabela td { padding: .55rem .7rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; } .tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-2); font-weight: 600; background: rgba(120,150,210,.06); } .tabela tbody tr { transition: background .15s; } .tabela tbody tr:hover { background: rgba(0,212,255,.05); } .tabela .acoes { white-space: nowrap; text-align: right; } .tabela .acoes form { display: inline; } .tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Formularios ---------- */ .formulario .grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: .8rem 1rem; } .campo { display: flex; flex-direction: column; gap: .3rem; grid-column: span 12; } .campo.c6 { grid-column: span 6; } .campo.c4 { grid-column: span 4; } .campo.c3 { grid-column: span 3; } .campo.c8 { grid-column: span 8; } .campo.c2 { grid-column: span 2; } .campo label { font-size: .82rem; color: var(--texto-2); font-weight: 500; } .campo label .obrigatorio { color: var(--perigo); } .campo input[type=text], .campo input[type=password], .campo input[type=email], .campo input[type=number], .campo input[type=search], .campo input[type=file], .campo select, .campo textarea, .entrada { width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--fundo-entrada); color: var(--texto); font: inherit; font-size: .92rem; transition: border-color .2s, box-shadow .2s; } .campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(0,212,255,.18); } .campo textarea { min-height: 110px; resize: vertical; } .campo .ajuda { font-size: .76rem; color: var(--texto-3); } .campo .erro-campo { font-size: .78rem; color: var(--perigo); } .campo.invalido input, .campo.invalido select { border-color: var(--perigo); } .campo-caixa { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; } .campo-caixa input { width: 18px; height: 18px; accent-color: var(--primaria); } .acoes-formulario { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--borda); } fieldset { border: 1px solid var(--borda); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; } legend { padding: 0 .5rem; color: var(--texto-2); font-size: .85rem; } /* Interruptor (toggle) */ .interruptor { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; } .interruptor input { position: absolute; opacity: 0; width: 0; height: 0; } .interruptor .trilho { width: 42px; height: 24px; border-radius: 12px; background: var(--borda-forte); position: relative; transition: background .2s; } .interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; } .interruptor input:checked + .trilho { background: var(--primaria); } .interruptor input:checked + .trilho::after { transform: translateX(18px); } /* ---------- Alertas / flash ---------- */ .alerta { padding: .7rem 1rem; border-radius: 10px; border: 1px solid; margin-bottom: .8rem; display: flex; gap: .6rem; align-items: center; animation: aparecer .3s; } .alerta.sucesso { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); color: var(--sucesso); } .alerta.erro { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: var(--perigo); } .alerta.aviso { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: var(--aviso); } .alerta.info { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.4); color: var(--info); } .alerta .fechar { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem; } /* ---------- Selos (badges) e indicadores ---------- */ .selo { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .3px; border: 1px solid transparent; } .selo.sucesso, .selo.ativo { background: rgba(34,197,94,.15); color: var(--sucesso); border-color: rgba(34,197,94,.35); } .selo.perigo, .selo.erro, .selo.critico { background: rgba(239,68,68,.15); color: var(--perigo); border-color: rgba(239,68,68,.35); } .selo.aviso { background: rgba(245,158,11,.15); color: var(--aviso); border-color: rgba(245,158,11,.35); } .selo.info, .selo.informacao { background: rgba(56,189,248,.15); color: var(--info); border-color: rgba(56,189,248,.35); } .selo.neutro, .selo.nao_checado { background: rgba(120,150,210,.12); color: var(--texto-2); border-color: var(--borda); } .selo.primaria { background: rgba(0,212,255,.15); color: var(--primaria); border-color: rgba(0,212,255,.35); } .indicador { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--texto-3); } .indicador.ativo { background: var(--sucesso); box-shadow: 0 0 8px var(--sucesso); } .indicador.erro { background: var(--perigo); box-shadow: 0 0 8px var(--perigo); animation: piscar 1s infinite; } .indicador.aviso { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); } @keyframes piscar { 50% { opacity: .35; } } /* ---------- Abas ---------- */ .abas { display: flex; gap: .3rem; border-bottom: 1px solid var(--borda); margin-bottom: 1rem; flex-wrap: wrap; } .abas a, .abas button { padding: .55rem .9rem; border: 0; background: none; color: var(--texto-2); cursor: pointer; font: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .2s; } .abas a:hover, .abas button:hover { color: var(--texto); text-decoration: none; } .abas a.ativa, .abas button.ativa { color: var(--primaria); border-bottom-color: var(--primaria); } .aba-conteudo { display: none; } .aba-conteudo.ativa { display: block; animation: aparecer .25s; } /* ---------- Paginacao ---------- */ .paginacao { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; margin-top: .9rem; flex-wrap: wrap; font-size: .85rem; } .paginacao a, .paginacao span { padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--borda); } .paginacao a:hover { border-color: var(--primaria); text-decoration: none; } .paginacao .atual { background: var(--primaria); color: var(--primaria-texto); border-color: transparent; } .paginacao .info { border: 0; color: var(--texto-3); } /* ---------- Barra de filtros ---------- */ .filtros { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; } .filtros .campo { min-width: 160px; } .filtros .campo.busca { min-width: 240px; } /* ---------- Modal ---------- */ .modal-fundo { position: fixed; inset: 0; background: rgba(2,6,18,.7); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; } .modal-fundo.aberto { display: flex; animation: aparecer .2s; } .modal { background: var(--fundo-3); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; padding: 1.2rem; } .modal.grande { max-width: 1000px; } .modal-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .modal-titulo h3 { margin: 0; } /* ---------- Sirene / alarme global ---------- */ .faixa-alarme { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 90; display: none; align-items: center; gap: .8rem; background: linear-gradient(135deg, #b91c1c, #ef4444); color: #fff; padding: .7rem 1.2rem; border-radius: 999px; box-shadow: 0 0 30px rgba(239,68,68,.6); font-weight: 700; letter-spacing: 1px; animation: pulsar-alarme 1s infinite; } .faixa-alarme.visivel { display: flex; } .faixa-alarme .botao { background: #fff; color: #991b1b; border: 0; } @keyframes pulsar-alarme { 0%,100% { box-shadow: 0 0 20px rgba(239,68,68,.5);} 50% { box-shadow: 0 0 45px rgba(239,68,68,.95);} } .topo .alarme-topo { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--borda); color: var(--texto-2); } .topo .alarme-topo.ativo { background: rgba(239,68,68,.15); border-color: var(--perigo); color: var(--perigo); animation: piscar 1.2s infinite; } /* ---------- Login ---------- */ .pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } .caixa-login { width: 100%; max-width: 400px; background: var(--fundo-2); backdrop-filter: blur(16px); border: 1px solid var(--borda-forte); border-radius: 18px; padding: 2rem; box-shadow: var(--sombra), var(--brilho); animation: aparecer .5s; } .caixa-login .marca { border: 0; padding: 0 0 1.2rem; justify-content: center; } .caixa-login .campo { margin-bottom: .9rem; } /* ---------- Painel de telas (dashboards) ---------- */ .grade-paineis { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; } .painel { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem .9rem; display: flex; flex-direction: column; min-height: 120px; position: relative; overflow: hidden; transition: box-shadow .2s, border-color .2s; } .painel.alarme { border-color: var(--perigo); animation: pulsar-borda 1.4s infinite; } .painel .painel-titulo { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .4rem; } .painel .painel-corpo { flex: 1; position: relative; min-height: 0; } .painel canvas { width: 100% !important; height: 100% !important; } .painel .estatistica { display: grid; place-items: center; height: 100%; font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primaria); } .painel .estatistica small { font-size: .9rem; color: var(--texto-2); font-weight: 400; margin-left: .3rem; } .painel .status-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; } .painel .status-item { border-radius: 10px; padding: .5rem .6rem; border: 1px solid var(--borda); font-size: .85rem; display: flex; align-items: center; gap: .5rem; } .painel .status-item.ativo { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.1); } .painel .status-item.erro { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.15); animation: piscar 1.2s infinite; } .painel .painel-acoes { position: absolute; top: .5rem; right: .6rem; display: none; gap: .3rem; } .painel:hover .painel-acoes { display: flex; } .painel.arrastando { opacity: .5; } .tela-cheia .menu-lateral, .tela-cheia .topo, .tela-cheia .rodape { display: none !important; } .tela-cheia .aplicacao { grid-template-columns: 1fr; } /* ---------- Mapa ---------- */ .mapa { width: 100%; height: 480px; border-radius: 12px; border: 1px solid var(--borda); overflow: hidden; background: var(--fundo-entrada); } .mapa.pequeno { height: 300px; } /* ---------- Matriz de permissoes ---------- */ .matriz-permissoes td, .matriz-permissoes th { text-align: center; } .matriz-permissoes td:first-child, .matriz-permissoes th:first-child { text-align: left; } .matriz-permissoes .grupo td { background: rgba(120,150,210,.08); font-weight: 600; } .matriz-permissoes input { width: 17px; height: 17px; accent-color: var(--primaria); } /* ---------- Carregando (shimmer) ---------- */ .carregando { position: relative; overflow: hidden; color: transparent !important; } .carregando::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(120,150,210,.18), transparent); animation: brilhar 1.2s infinite; } @keyframes brilhar { from { transform: translateX(-100%);} to { transform: translateX(100%);} } /* ---------- Diferenca de versoes ---------- */ .diferenca { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; white-space: pre-wrap; } .diferenca .add { background: rgba(34,197,94,.18); color: var(--sucesso); display: block; } .diferenca .rem { background: rgba(239,68,68,.18); color: var(--perigo); display: block; } /* ---------- Responsivo ---------- */ @media (max-width: 960px) { .aplicacao { grid-template-columns: 1fr; } .menu-lateral { position: fixed; left: 0; top: 0; width: var(--menu-largura); transform: translateX(-100%); } html[data-menu="aberto"] .menu-lateral { transform: none; box-shadow: var(--sombra); } html[data-menu="recolhido"] .aplicacao { grid-template-columns: 1fr; } .campo.c6, .campo.c4, .campo.c3, .campo.c8, .campo.c2 { grid-column: span 12; } .conteudo { padding: .9rem; } } @media print { .menu-lateral, .topo, .rodape, .faixa-alarme, .botao { display: none !important; } .aplicacao { grid-template-columns: 1fr; } } /* ---------- Gestor de IPs ---------- */ .barra-uso { height: 8px; border-radius: 4px; background: rgba(120,150,210,.18); overflow: hidden; min-width: 80px; } .barra-uso-preenchida { height: 100%; background: var(--sucesso); transition: width .4s; display: block; } .barra-uso-preenchida.aviso { background: var(--aviso); } .barra-uso-preenchida.perigo { background: var(--perigo); } .barra-uso-inline { display: inline-block; width: 90px; vertical-align: middle; margin: 0 .5rem; } .mapa-ip { position: relative; height: 34px; border-radius: 8px; background: var(--fundo-entrada); border: 1px solid var(--borda); overflow: hidden; } .segmento-ip { position: absolute; top: 0; bottom: 0; display: block; border-right: 1px solid var(--fundo); transition: filter .2s; } .segmento-ip:hover { filter: brightness(1.3); z-index: 2; } .grade-ip { display: grid; gap: 2px; margin-top: .5rem; } .celula-ip { aspect-ratio: 1; border-radius: 2px; min-width: 6px; transition: transform .1s; cursor: default; } .celula-ip:hover { transform: scale(1.4); z-index: 2; outline: 1px solid var(--texto); } .no-ip { margin: .2rem 0 .2rem 0; } .no-ip > summary { cursor: pointer; padding: .35rem .5rem; border-radius: 8px; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .no-ip > summary:hover { background: rgba(0,212,255,.06); } .no-ip-filhos { margin-left: 1.4rem; border-left: 1px dashed var(--borda-forte); padding-left: .6rem; } .linha-conflito td { background: rgba(239,68,68,.08); }