/* Grafite neutro para a interface; as cores de dado (verde/vermelho/amarelo) são as mesmas do PDF (tracker_report/app/report/pdf.py), para o relatório na tela e o impresso serem lidos do mesmo jeito. O tema claro troca só as variáveis da INTERFACE (fundo, painel, texto). O relatório em si é sempre "papel branco com tinta escura" nos dois temas, como o PDF — por isso `--papel`, `--tinta`, `--bom`, `--ruim` e `--atencao` não mudam: são cor de dado, não de interface. */ :root { --fundo: #0b0c0e; --painel: #14161a; --painel-2: #191c21; --painel-3: #21252c; --campo: #0b0c0e; /* fundo de input, lista e log */ --borda: #282d35; --borda-clara: #343a44; --texto: #e7e9ee; --texto-forte: #ffffff; /* item ativo do menu, aba selecionada */ --fraco: #949cab; --apagado: #6b7280; --acento: #4c8dff; --acento-forte: #3b7cf0; --sucesso: #16884f; --sucesso-claro: #1aa161; --bom: #86efac; --ruim: #fca5a5; --atencao: #facc15; --critico: #dc2626; --medio: #7c3aed; /* roxo: o laranja ficava perto do vermelho e do amarelo */ --papel: #ffffff; --papel-2: #f7f8fa; --tinta: #16181d; --raio: 10px; /* texto sobre fundo translúcido (mensagens, badges, log) */ --log-texto: #b3bccb; --erro-texto: #ffb4b4; --info-texto: #cfe0ff; --aviso-texto: #f5dc8a; --exec-texto: #a9c8ff; --ok-texto: #97e7b6; --neutro-texto: #c3cad6; --inverter-icone: invert(.75); } /* Tema claro: só o que é interface. O `data-tema` é posto no por um script no (base.html) antes da primeira pintura, senão a tela pisca escura por um quadro antes de clarear. */ :root[data-tema="claro"] { --fundo: #eef1f6; --painel: #ffffff; --painel-2: #f6f8fb; --painel-3: #e6ebf3; --campo: #ffffff; --borda: #dde3ec; --borda-clara: #c9d1de; --texto: #1a1d23; --texto-forte: #0f172a; --fraco: #5b6472; --apagado: #838c9b; --log-texto: #334155; --erro-texto: #b91c1c; --info-texto: #1d4ed8; --aviso-texto: #8a6100; --exec-texto: #1d4ed8; --ok-texto: #047857; --neutro-texto: #475569; --inverter-icone: none; } * { box-sizing: border-box; } body { margin: 0; display: flex; min-height: 100vh; background: var(--fundo); color: var(--texto); font: 14.5px/1.55 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--painel-3); padding: 1px 5px; border-radius: 5px; font-size: .9em; } .oculto { display: none !important; } .barra-espaco { flex: 1; } /* ------------------------------------------------------------------ lateral */ .lateral { width: 210px; flex: 0 0 210px; background: var(--painel); border-right: 1px solid var(--borda); padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; } .marca { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; } .marca-sigla { font-weight: 800; letter-spacing: .16em; color: var(--acento); font-size: 12px; } .marca-nome { font-size: 17px; font-weight: 650; } .menu { display: flex; flex-direction: column; gap: 2px; } .menu a { padding: 9px 12px; border-radius: 8px; color: var(--fraco); text-decoration: none; font-weight: 600; font-size: 14px; } .menu a:hover { background: var(--painel-3); color: var(--texto); } .menu a.ativo { background: var(--painel-3); color: var(--texto-forte); box-shadow: inset 2px 0 0 var(--acento); } /* ------------------------------------------------------------------- layout */ .conteudo { flex: 1; min-width: 0; padding: 24px 28px 56px; } .topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .topo h1 { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -.01em; } .subtitulo { margin: 6px 0 0; color: var(--fraco); max-width: 78ch; } .topo-acoes { display: flex; gap: 8px; align-items: center; } .topo-acoes .btn-icone { display: inline-flex; align-items: center; } .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; } .cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px; } .cartao h2 { margin: 0 0 14px; font-size: 15px; font-weight: 650; } .cartao-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .cartao-head h2 { margin: 0; } /* -------------------------------------------------------- controles de forma */ .campo { display: block; margin-bottom: 12px; } .campo > span { display: block; font-size: 11.5px; color: var(--fraco); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .07em; } input[type="text"], input[type="number"], input[type="search"], input[type="datetime-local"], select { width: 100%; background: var(--campo); border: 1px solid var(--borda-clara); color: var(--texto); border-radius: 8px; padding: 8px 10px; font: inherit; } input:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(76,141,255,.16); } input:disabled { opacity: .45; } input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: var(--inverter-icone); cursor: pointer; } .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .linha-radio { display: flex; gap: 18px; margin-bottom: 14px; } .linha-radio label, .switch, .filtro-modo label { display: flex; align-items: center; gap: 7px; cursor: pointer; } input[type="radio"], input[type="checkbox"] { accent-color: var(--acento); } .opcoes { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .nota { font-size: 12.5px; color: var(--fraco); margin: 0; } .nota.alerta { color: var(--atencao); } .btn { border: 1px solid transparent; border-radius: 8px; padding: 9px 15px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; } .btn-primario { background: var(--acento-forte); color: #fff; } .btn-primario:hover { background: var(--acento); } .btn-sucesso { background: var(--sucesso); color: #fff; } .btn-sucesso:hover { background: var(--sucesso-claro); } .btn-secundario { background: var(--painel-3); color: var(--texto); border-color: var(--borda-clara); } .btn-secundario:hover { background: var(--borda); } .btn-mini { background: var(--painel-3); color: var(--fraco); border-color: var(--borda-clara); padding: 5px 10px; font-size: 12.5px; } .btn-mini:hover { background: var(--borda); color: var(--texto); } .btn:disabled { opacity: .45; cursor: default; } .barra-acoes { display: flex; align-items: center; gap: 8px; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; } /* mesma largura entre eles, sem esticar na barra inteira */ .barra-acoes .btn { flex: 0 0 auto; min-width: 150px; text-align: center; } .atalhos { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; } .chip { background: transparent; border: 1px solid var(--borda-clara); color: var(--fraco); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; } .chip:hover { color: var(--texto); border-color: var(--acento); } /* ------------------------------------------------------------------ filtros */ .filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; } .filtro { background: var(--painel-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 9px; } .filtro header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .filtro h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--fraco); font-weight: 700; } .contagem { font-size: 11.5px; color: var(--apagado); white-space: nowrap; } .filtro-modo { display: flex; gap: 14px; font-size: 13px; color: var(--fraco); } .lista { height: 180px; overflow-y: auto; background: var(--campo); border: 1px solid var(--borda); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 1px; } .lista label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 4px 5px; border-radius: 6px; cursor: pointer; } .lista label:hover { background: var(--painel-3); } .lista input { margin: 3px 0 0; flex: 0 0 auto; } .lista .vazio { padding: 6px; margin: 0; } .filtro-acoes { display: flex; gap: 6px; } .filtro-acoes .btn { flex: 1; } /* ---------------------------------------------------------------- mensagens */ .mensagem { border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; border: 1px solid; } .mensagem.erro { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.45); color: var(--erro-texto); } .mensagem.info { background: rgba(76,141,255,.1); border-color: rgba(76,141,255,.4); color: var(--info-texto); } .banner-aviso { background: rgba(250,204,21,.09); border: 1px solid rgba(250,204,21,.4); color: var(--aviso-texto); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; font-weight: 600; } .previa { display: flex; gap: 26px; flex-wrap: wrap; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 18px; margin-bottom: 14px; } .previa div { display: flex; flex-direction: column; } .previa span { font-size: 11.5px; color: var(--fraco); text-transform: uppercase; letter-spacing: .07em; } .previa strong { font-size: 19px; font-weight: 650; } .vazio { color: var(--fraco); font-size: 13.5px; } /* ---------------------------------------------------------------- histórico */ .historico { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 12px; } .analise-card { background: var(--painel-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 13px 14px; } .analise-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; } .analise-card h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; } .analise-card h3 a { color: var(--texto); } .analise-card h3 a:hover { color: var(--acento); text-decoration: none; } .analise-card time { font-size: 11.5px; color: var(--apagado); } .analise-meta { margin: 0; font-size: 12.5px; color: var(--fraco); } .analise-erro { margin: 4px 0 0; font-size: 12.5px; color: var(--erro-texto); } .badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; padding: 3px 8px; border-radius: 5px; } .badge-executando { background: rgba(76,141,255,.16); color: var(--exec-texto); } .badge-pronta { background: rgba(134,239,172,.14); color: var(--ok-texto); } .badge-erro { background: rgba(220,38,38,.16); color: var(--erro-texto); } .badge-cancelada { background: rgba(148,163,184,.16); color: var(--neutro-texto); } /* --------------------------------------------------------------------- abas */ .abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; } .aba { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--fraco); font: inherit; font-weight: 600; padding: 10px 15px; cursor: pointer; } .aba:hover { color: var(--texto); } .aba.ativa { color: var(--texto-forte); border-bottom-color: var(--acento); } /* --------------------------------------------------------------------- log */ .log { background: var(--campo); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; max-height: 62vh; overflow: auto; margin: 0; font: 12.5px/1.65 Consolas, "Cascadia Mono", monospace; color: var(--log-texto); white-space: pre-wrap; } .painel-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; } .ficha-barra { justify-content: flex-start; align-items: center; } .comparativo-barra { gap: 14px; } .comparativo-barra .ficha-escolha { flex: 1; } .comparativo-barra .ficha-escolha select { width: 100%; min-width: 0; } .comparativo-barra .btn { flex: 0 0 auto; min-width: 150px; } .ficha-escolha { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fraco); } .ficha-escolha select { min-width: 240px; } .ficha-filtros { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); margin-bottom: 12px; } .ficha-filtros .lista { height: 150px; } .ficha-acoes { display: flex; gap: 7px; } /* barra que aparece ao clicar numa linha do relatorio */ .barra-linha { position: fixed; z-index: 50; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 8px; background: var(--painel-2); border: 1px solid var(--borda-clara); border-radius: 10px; padding: 9px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); } .barra-linha-alvo { font-size: 12.5px; color: var(--fraco); } .barra-linha-alvo strong { color: var(--texto); } /* fonte "arquivo externo": upload, lista e relatorio da importacao */ .externo-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .externo-legenda { margin: 0 0 8px; } .externo-legenda code { font-size: 11px; } .externo-lista { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; } .externo-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; background: var(--painel-3); border: 1px solid transparent; font-size: 12.5px; } .externo-item:hover { border-color: var(--borda-clara); } .externo-item.ativo { border-color: var(--acento); background: var(--painel-2); } .externo-item .nome { flex: 1; color: var(--texto); } .externo-item .tam { color: var(--fraco); font-size: 11.5px; } .externo-item .apagar { color: var(--apagado); background: none; border: 0; cursor: pointer; } .externo-resumo { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--painel-3); border: 1px solid var(--borda-clara); font-size: 12px; } .externo-resumo b { color: var(--texto); } .externo-resumo .falta { color: var(--atencao); } /* barra da selecao de linhas do visualizador de CSV: leva a selecao ao mapa */ .csv-selecao { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 0 0 8px; background: var(--painel-2); border: 1px solid var(--borda-clara); border-radius: 10px; } .csv-selecao-alvo { font-size: 12.5px; color: var(--texto); font-weight: 600; } .csv-selecao-aviso { font-size: 12px; color: var(--fraco); } .painel-acoes .btn { display: inline-flex; align-items: center; gap: 7px; } /* só o ícone: o que ele baixa está no title */ .btn-icone { width: 34px; height: 34px; padding: 0; justify-content: center; background: var(--painel-3); color: var(--fraco); border-color: var(--borda-clara); } .btn-icone:hover { background: var(--borda); color: var(--acento); } .btn-icone .ico { width: 15px; height: 15px; } /* Traço do SVG segue a cor do texto, então o ícone funciona em qualquer botão. */ .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .icone-baixar { display: inline-flex; align-items: center; justify-content: center; width: 28px; flex: 0 0 28px; border-radius: 7px; color: var(--apagado); text-decoration: none; } .icone-baixar:hover { color: var(--acento); background: var(--painel-3); text-decoration: none; } /* ----------------------------------------------------------------- arquivos */ .arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; } .arquivo-card { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px 16px; display: flex; flex-direction: column; gap: 6px; } .arquivo-card h3 { margin: 0; font-size: 14.5px; font-weight: 650; } .arquivo-card p { margin: 0; font-size: 12.5px; color: var(--fraco); } .arquivo-acoes { display: flex; gap: 7px; margin-top: 6px; } /* os dois botoes ocupam a mesma largura, sem depender do tamanho do rotulo */ .arquivo-acoes .btn { flex: 1 1 0; text-align: center; } /* ------------------------------------------------------------------- mapas */ /* 320px: cabe o titulo com o periodo inteiro numa linha */ .mapa-layout { display: grid; grid-template-columns: 320px 1fr; gap: 12px; align-items: start; } .mapa-lista { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; max-height: 78vh; overflow: auto; } .mapa-quadro { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .mapa-quadro iframe { width: 100%; height: 78vh; border: 0; display: block; background: #fff; } .mapa-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--texto); font: inherit; padding: 8px 10px; cursor: pointer; } .mapa-item:hover { background: var(--painel-3); } .mapa-item.ativo { background: var(--painel-3); box-shadow: inset 2px 0 0 var(--acento); } .mapa-item span { font-size: 12px; color: var(--fraco); } .mapa-item-periodo { font-size: 11.5px !important; color: var(--apagado) !important; } .mapa-grupo { margin-bottom: 10px; } .mapa-grupo-head { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 3px; font-size: 12px; } .mapa-grupo-titulo { flex: 1; min-width: 0; /* o título e o período ficam na mesma linha; o que não cabe vira "..." */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mapa-linha { display: flex; align-items: stretch; gap: 2px; } .mapa-linha .mapa-item { flex: 1; min-width: 0; } .mapa-linha .mapa-item strong, .mapa-linha .mapa-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ====================================================== visualizador de csv */ .csv-layout { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; } .csv-fontes { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; max-height: 76vh; overflow: auto; } .csv-fonte { display: flex; align-items: stretch; gap: 4px; } .csv-fonte-abrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--texto); font: inherit; padding: 8px 10px; cursor: pointer; } .csv-fonte-abrir strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .csv-fonte-abrir span { font-size: 11.5px; color: var(--fraco); } .csv-fonte-tamanho { color: var(--apagado) !important; } .csv-fonte-abrir:hover { background: var(--painel-3); } .csv-fonte.ativo .csv-fonte-abrir { background: var(--painel-3); box-shadow: inset 2px 0 0 var(--acento); } .csv-fonte-apagar { background: transparent; border: none; color: var(--apagado); font-size: 17px; cursor: pointer; padding: 0 6px; border-radius: 6px; } .csv-fonte-apagar:hover { color: var(--erro-texto); background: var(--painel-3); } .csv-painel { min-width: 0; } .csv-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 10px; } .csv-barra input[type="search"] { width: 230px; } .csv-barra select { width: auto; } .csv-info { font-size: 12.5px; color: var(--fraco); } .csv-paginacao { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fraco); } .csv-colunas { position: relative; } .csv-colunas > summary { list-style: none; display: inline-block; } .csv-colunas > summary::-webkit-details-marker { display: none; } .csv-colunas-caixa { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 240px; background: var(--painel-2); border: 1px solid var(--borda-clara); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.5); } .csv-colunas-lista { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 1px; } /* deixa claro que há coluna fora da tabela, e como trazer de volta */ #csv-colunas-resumo.com-aviso { border-color: var(--acento); color: var(--acento); } .csv-colunas-lista label { display: flex; gap: 8px; font-size: 12.5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; } .csv-colunas-lista label:hover { background: var(--painel-3); } .csv-tabela-wrap { max-height: 68vh; background: var(--papel); } /* Cara de planilha: coluna de numeração, colunas separadas, linha inteira selecionável (clique, ctrl+clique soma, shift+clique pega o intervalo). */ #csv-tabela { font-size: 12px; } #csv-tabela td, #csv-tabela th { border-right: 1px solid #e3e7ee; } #csv-tabela tbody tr:nth-child(even) td { background: #eceef2; } #csv-tabela tbody tr:hover td { background: #e2eaf9; } #csv-tabela th.csv-canto { width: 58px; min-width: 58px; } #csv-tabela th.csv-linha-num { position: sticky; left: 0; z-index: 1; width: 58px; min-width: 58px; text-align: right; background: #eef1f6; color: #6b7280; font-weight: 600; font-size: 11px; border-right: 1px solid #d8dee8; cursor: default; } #csv-tabela th.csv-linha-num:hover { background: #e6eaf2; } #csv-tabela tbody tr { cursor: default; } #csv-tabela tbody tr.selecionada td { background: #d6e4ff !important; } #csv-tabela tbody tr.selecionada th.csv-linha-num { background: #b9cff8; color: #16181d; } #csv-tabela td.vazio { border-right: 0; } /* coluna encurtada: corta com "..." e mostra o valor inteiro no title */ #csv-tabela th.curta, #csv-tabela td.curta { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .menu-coluna-acoes { display: flex; gap: 6px; } .menu-coluna-acoes .btn { flex: 1; } /* Cabeçalho colado no topo do wrap. O `position: relative` que morava aqui (para ancorar a alça de largura) matava o sticky de `.tabela th`, porque seletor de id ganha — era por isso que o cabeçalho subia junto com as linhas. `sticky` também é referência para filho absoluto, então o puxador continua no lugar sem precisar de relative. */ #csv-tabela thead th { position: sticky; top: 0; z-index: 3; } #csv-tabela thead th.csv-canto { left: 0; z-index: 4; } #csv-tabela th .puxador { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; background: transparent; } #csv-tabela th:hover .puxador { background: var(--acento); opacity: .55; } body.arrastando-coluna { cursor: col-resize; user-select: none; } #csv-tabela th.filtrada { background: #2c3a55; } #csv-tabela th.filtrada::after { content: " \2691"; opacity: .9; } /* menu do botão direito no cabeçalho da coluna */ .menu-coluna { position: fixed; z-index: 60; width: 250px; background: var(--painel-2); border: 1px solid var(--borda-clara); border-radius: 9px; box-shadow: 0 18px 44px rgba(0,0,0,.55); padding: 8px; display: flex; flex-direction: column; gap: 7px; } .menu-ordem { display: flex; gap: 6px; } .menu-ordem .btn { flex: 1; } .menu-ops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .menu-op { background: var(--painel-3); border: 1px solid var(--borda-clara); color: var(--fraco); border-radius: 6px; padding: 5px 0; font: inherit; font-size: 13px; cursor: pointer; } .menu-op:hover { color: var(--texto); } .menu-op.ativo { background: var(--acento-forte); border-color: var(--acento); color: #fff; } .menu-total { font-size: 11.5px; color: var(--apagado); } .menu-valores { height: 190px; overflow-y: auto; background: var(--campo); border: 1px solid var(--borda); border-radius: 7px; padding: 5px; display: flex; flex-direction: column; gap: 1px; } .menu-valores label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 5px; border-radius: 5px; cursor: pointer; } .menu-valores label:hover { background: var(--painel-3); } .menu-valores label > input { flex: 0 0 auto; } .menu-vezes { margin-left: auto; font-size: 11px; color: var(--apagado); } .menu-pe { display: flex; gap: 6px; } .menu-pe .btn { flex: 1; } /* =================================================================== RELATÓRIO — o fragmento vindo de web/relatorio_html.py =================================================================== */ .relatorio { display: flex; flex-direction: column; gap: 14px; } /* Resumo do topo: uma linha de rótulo + valor. Usado pelo comparativo e pela tendência. */ .resumo-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: 13px; color: var(--texto); padding: 2px 0 4px; } .resumo-item { display: inline-flex; align-items: baseline; gap: 7px; } .resumo-item b { font-weight: 600; font-size: 11px; color: var(--fraco); text-transform: uppercase; letter-spacing: .07em; } /* A ficha por dispositivo se remonta a cada marcação: em vez de trocar o conteúdo por "carregando", a versão atual só desbota enquanto a nova vem — assim marcar dois aparelhos seguidos não pisca a tela. */ #alvo-ficha[aria-busy="true"] { opacity: .45; transition: opacity .15s ease; } .legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--fraco); } .legenda span { display: flex; align-items: center; gap: 7px; } .sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } .sw.c-bom { background: var(--bom); } .sw.c-ruim { background: var(--ruim); } .sw.c-alerta { background: transparent; box-shadow: inset 0 0 0 2.2px var(--atencao); } .relatorio-corpo { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; } /* Sem caixa: o sumário fica solto na coluna. A moldura desenhava um retângulo alto e quase vazio ao lado das seções, e o que separa a lista do conteúdo já é a distância entre as colunas. */ .sumario { position: sticky; top: 14px; padding: 4px 0; display: flex; flex-direction: column; gap: 1px; max-height: 82vh; overflow: auto; } /* o 8px acompanha o padding dos links, senão o título fica desalinhado deles */ .sumario h3 { margin: 0 0 7px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--fraco); } .sumario a { color: var(--fraco); font-size: 12.5px; padding: 5px 8px; border-radius: 6px; } .sumario a:hover { background: var(--painel-3); color: var(--texto-forte); text-decoration: none; } /* Respiro entre as seções: o dobro do que era (14px), para a leitura não virar um bloco só de tabelas coladas. */ .relatorio-secoes { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .secao { background: var(--papel); color: var(--tinta); border-radius: var(--raio); padding: 15px 17px; scroll-margin-top: 12px; } .secao-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #e6e9ef; padding-bottom: 10px; margin-bottom: 12px; } /* Barra azul à esquerda do título, como o _section_header do PDF. */ .secao-head h2 { margin: 0; font-size: 16px; font-weight: 650; color: var(--tinta); border-left: 3.5px solid #1d4ed8; padding-left: 9px; } .secao-ferramentas { display: flex; align-items: center; gap: 10px; } .secao-ferramentas input[type="search"] { width: 190px; background: var(--papel-2); border: 1px solid #dfe4ec; color: var(--tinta); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; } .secao-ferramentas input[type="search"]:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(76,141,255,.14); } .secao-contagem { font-size: 12px; color: #6b7280; white-space: nowrap; } .secao-corte { margin: 0 0 10px; font-size: 12.5px; color: #b45309; } .secao-dica { margin: 0 0 12px; font-size: 12.5px; color: #6b7280; } .secao .vazio { color: #6b7280; } .secao.destacada { box-shadow: 0 0 0 2px var(--acento); } .tabela-wrap { /* rola nos dois eixos aqui dentro: é o que faz o cabeçalho colar (sticky) em tabela longa, como a de reinícios ou de perdas de ponto. */ overflow: auto; max-height: 72vh; border: 1px solid #e6e9ef; border-radius: 8px; } .tabela { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; } /* Azul-escuro do PDF (BRAND_DARK, o mesmo da capa impressa) em vez do quase preto, e 18px de respiro no lugar dos 8px originais. */ .tabela th { position: sticky; top: 0; z-index: 2; background: #0f172a; color: #fff; font-size: 11.5px; font-weight: 650; text-align: center; padding: 18px 14px; white-space: nowrap; cursor: pointer; user-select: none; } .tabela th:hover { background: #1e293b; } .tabela th .seta { display: inline-block; width: 9px; margin-left: 5px; opacity: .35; font-style: normal; } .tabela th .seta::before { content: "\2195"; } .tabela th.asc .seta { opacity: 1; } .tabela th.asc .seta::before { content: "\2191"; } .tabela th.desc .seta { opacity: 1; } .tabela th.desc .seta::before { content: "\2193"; } .tabela td { padding: 5px 8px; border-bottom: 1px solid #eef1f5; white-space: nowrap; color: var(--tinta); } /* Muitas colunas (Eventos: uma por evento 111-137): célula estreita para caber na largura em vez de nascer com barra de rolagem. */ .tabela.tabela-densa th { padding: 10px 5px; font-size: 10.5px; } .tabela.tabela-densa td { padding: 4px 5px; font-size: 11.5px; } .tabela tbody tr:nth-child(even) td { background: var(--papel-2); } .tabela tbody tr:hover td { background: #eef4ff; } .tabela td.c-bom { background: var(--bom) !important; } .tabela td.c-ruim { background: var(--ruim) !important; } .tabela td.c-atencao { background: var(--atencao) !important; } .tabela td.c-alerta { box-shadow: inset 0 0 0 2.2px var(--atencao); } .tabela tbody tr.clicavel { cursor: pointer; } .tabela tbody tr.escolhida td { background: #dbeafe !important; } .tabela td.piscando { animation: piscar 1.4s ease-out 2; } @keyframes piscar { 0%, 100% { box-shadow: inset 0 0 0 2.2px var(--atencao); } 50% { box-shadow: inset 0 0 0 3px var(--acento); background: #dbeafe !important; } } /* Resumo de alertas: a mesma página do PDF (_build_alert_summary_page) — os cards agrupados por categoria numa grade, com a borda inteira do card na cor da severidade. As linhas de separação saem do border-right/bottom de cada categoria mais o border-top/left do container, sem depender de :last-child (o número de colunas muda com a largura da tela). */ .alerta-categorias { /* Duas colunas como o PDF quando há categoria que chegue; com uma só, ela não fica espremida em metade da página. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); border-top: 1px solid #e6e9ef; border-left: 1px solid #e6e9ef; border-radius: 8px; overflow: hidden; } .alerta-categoria { padding: 13px 16px 15px; min-width: 0; border-right: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef; } .alerta-categoria-titulo { margin: 0 0 10px; font-size: 11px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .09em; } /* Os cards têm largura própria e quebram linha sozinhos, em vez de dividir a categoria em colunas fixas: numa análise com 27 alertas a linha fecha certa, e numa com 2 eles ficam do mesmo tamanho em vez de esticar para preencher a metade da página. O rótulo em cima e a contagem colada na base (margin-top:auto) mantêm o alinhamento quando um rótulo ocupa duas linhas. */ .alerta-grid { display: flex; flex-wrap: wrap; gap: 10px; } .alerta-card { flex: 0 1 148px; border: 1.5px solid #e6e9ef; border-radius: 7px; padding: 10px 12px 11px; background: var(--papel); display: flex; flex-direction: column; min-height: 66px; color: var(--tinta); text-decoration: none; min-width: 0; transition: background .12s ease, box-shadow .12s ease; } .alerta-card:hover { text-decoration: none; background: #f5f8ff; box-shadow: 0 1px 5px rgba(15,23,42,.09); } .alerta-card.sev-critico { border-color: var(--critico); } .alerta-card.sev-medio { border-color: var(--medio); } .alerta-card.sev-atencao { border-color: var(--atencao); } .alerta-metrica { font-size: 10.5px; font-weight: 700; color: #64748b; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em; overflow-wrap: anywhere; } .alerta-qtd { margin-top: auto; padding-top: 7px; font-size: 22px; font-weight: 700; color: var(--tinta); line-height: 1; } /* Análises rodadas antes deste layout serviram um `relatorio.html` sem categorias e com a severidade escrita no card. Sem estas duas regras aquele arquivo sai com a fonte solta no meio do card. */ .alerta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .alerta-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; } /* Sem media query para os alertas: o `auto-fit` das categorias e o `flex-wrap` dos cards já se viram sozinhos em qualquer largura. */ @media (max-width: 1150px) { .relatorio-corpo, .mapa-layout, .csv-layout { grid-template-columns: 1fr; } .sumario { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; } } @media (max-width: 780px) { body { flex-direction: column; } .lateral { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; gap: 14px; } .menu { flex-direction: row; } } /* --------------------------------------------------------------------- tema */ /* `margin-top: auto` empurra para o rodapé da barra lateral, longe do menu. */ .tema-troca { margin-top: auto; display: flex; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--borda); border-radius: 8px; color: var(--fraco); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; } .tema-troca:hover { background: var(--painel-3); color: var(--texto); border-color: var(--borda-clara); } .tema-icone { font-size: 14px; line-height: 1; } /* O filtro de dispositivos da tendência já está dentro de um cartão: sem moldura própria, para não empilhar caixa dentro de caixa. */ .filtro-solto { background: transparent; border: 0; padding: 0; } .filtro-solto h3 { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; } /* × de apagar no card do histórico: discreto até o mouse chegar no card, e vermelho no hover porque a ação não tem volta. */ /* o × é um terceiro item no header: sem isto o space-between jogaria a data para o meio, entre o badge e o botão */ .analise-card header { justify-content: flex-start; gap: 8px; } .analise-card time { margin-left: auto; } .analise-apagar { background: transparent; border: 0; cursor: pointer; color: var(--apagado); font-size: 18px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s ease, color .12s ease; } .analise-card:hover .analise-apagar, .analise-apagar:focus-visible { opacity: 1; } .analise-apagar:hover { color: var(--critico); } .analise-apagar:disabled { cursor: default; opacity: .4; } /* ------------------------------------------------------------------ login */ /* A tela de login usa o mesmo layout das outras (barra lateral + conteudo), so que a lateral vem sem menu — ver base.html. */ .login-tela { display: flex; align-items: center; justify-content: center; min-height: 80vh; } .login-cartao { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; } .login-cartao h1 { margin: 0; font-size: 19px; font-weight: 650; } .login-cartao .subtitulo { margin: 0 0 4px; } .login-cartao label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--fraco); } .login-cartao .btn { margin-top: 6px; justify-content: center; } /* `margin-top: auto` empurra para o rodape da lateral, acima do botao de tema. */ .sessao { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; } .sessao-usuario { font-size: 12.5px; color: var(--fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }