/* PONTE do tema (Fase A do MIGRACAO-FRONT) — veste as classes que o sistema já usa com o
visual do Vue Black Dashboard repintado em verde Geocorr, SEM mudar nenhum template de
lógica. Carrega DEPOIS do tema.css. Os dois modos do tema são atendidos por variáveis:
o padrão é o ESCURO (o aprovado no piloto) e a classe white-content do body alterna
para o claro — as mesmas superfícies e textos que o próprio tema usa. */
body {
--p-card: #27293d; /* superfície de cartão do tema (escuro) */
--p-texto: hsla(0, 0%, 100%, .8);
--p-label: hsla(0, 0%, 100%, .6);
--p-suave: hsla(0, 0%, 100%, .45);
--p-borda: #2b3553;
--p-fundo-leve: rgba(255, 255, 255, .06);
--p-ok-fundo: rgba(0, 136, 0, .2);
--p-ok-texto: #7be27b; /* verde legível sobre cartão escuro */
--p-atencao-texto: #ffd36b;
--p-alerta-texto: #ff7d9c;
--verde: #008800; /* VERDE_HEX dos laudos */
--verde-escuro: #045f04; /* VERDE_ESCURO dos laudos */
--amarelo: #fff2cc; /* AMARELO_PENDENTE dos laudos */
--vermelho: #b01818;
}
body.white-content {
--p-card: #ffffff;
--p-texto: #1d253b;
--p-label: rgba(34, 42, 66, .7);
--p-suave: #9a9a9a;
--p-borda: rgba(29, 37, 59, .25);
--p-fundo-leve: #f5f6fa;
--p-ok-fundo: #e8f5e8; /* a zebra verde dos laudos */
--p-ok-texto: #045f04;
--p-atencao-texto: #7a5c00;
--p-alerta-texto: #b01818;
}
main { max-width: 1060px; margin: 0 auto; padding: 0 4px 60px; }
/* ------------------------------------------------------------------ cartões --------- */
.cartao { background: var(--p-card); border: 0; border-radius: .2857rem;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .1); padding: 16px 18px; margin: 0 0 22px; }
.cartao.estreito { max-width: 400px; margin: 11vh auto 40px; }
.marca-login { color: var(--verde); font-weight: 700; letter-spacing: 1px;
font-size: 1.1em; margin: 0 0 14px; }
.marca-login span { font-weight: 400; opacity: .75; font-size: .85em; margin-left: 6px; }
h1, h2, h4 { color: var(--p-texto); }
h1 { font-size: 1.3em; margin: 0 0 12px; font-weight: 600; }
h2 { font-size: 1.12em; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 1em; margin: 18px 0 8px; color: var(--p-ok-texto);
border-bottom: 1px solid var(--p-borda); padding-bottom: 4px; }
h4 { font-size: .92em; margin: 14px 0 4px; }
h4 small { font-weight: 400; color: var(--p-suave); }
p, li { color: var(--p-texto); }
.dica { color: var(--p-label); font-size: .86em; }
.vazio, .item-meta { color: var(--p-suave); }
.item-meta { font-size: .85em; margin-top: 4px; }
.oculto { display: none; }
/* ------------------------------------------------------------------ formulários ----- */
label { display: block; margin: 10px 0; font-size: .9em; color: var(--p-label); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font-size: 1rem;
font-family: inherit; color: var(--p-texto); background: transparent;
border: 1px solid var(--p-borda); border-radius: .4285rem; }
select option { background: var(--p-card); color: var(--p-texto); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde);
box-shadow: 0 0 0 1px var(--verde); }
input::placeholder, textarea::placeholder { color: var(--p-suave); }
input:disabled { background: var(--p-ok-fundo); color: var(--p-ok-texto);
font-weight: 700; border-color: transparent; }
input[type=file] { color: var(--p-label); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .grade2 { grid-template-columns: 1fr; } }
.campo-uf { text-transform: uppercase; max-width: 90px; }
label.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
/* atalho dentro do rótulo (ex.: "o mesmo" nos contatos da execução) */
.alinha-rotulo { float: right; font-weight: 400; }
label.inline input { width: auto; margin: 0; }
.obr { color: var(--p-alerta-texto); font-weight: 700; }
.campo-invalido { color: var(--p-alerta-texto); }
.campo-invalido input, .campo-invalido select { border-color: var(--vermelho);
box-shadow: 0 0 0 1px var(--vermelho); }
#bloqueio ul { margin: 6px 0 0; padding-left: 20px; }
.item-falta { color: var(--p-alerta-texto); font-size: .82em; margin-top: 4px; }
/* ------------------------------------------------------------------ botões ---------- */
.botao { display: inline-block; padding: 9px 16px; border-radius: .4285rem;
cursor: pointer; border: 1px solid var(--p-borda); background: transparent;
color: var(--p-texto); text-decoration: none; font-size: .875rem; font-weight: 600;
font-family: inherit; transition: filter .15s, box-shadow .15s; }
.botao:hover { box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .18); }
.botao.principal, .botao.gerar { color: #fff; border-color: var(--verde-escuro);
background-image: linear-gradient(to bottom left, var(--verde), var(--verde-escuro), var(--verde)); }
.botao.principal:hover, .botao.gerar:hover { filter: brightness(1.12); }
.botao.perigo { color: var(--p-alerta-texto); border-color: var(--vermelho); }
.botao.largo { width: 100%; margin-top: 8px; text-align: center; }
.botao.pequeno { padding: 5px 10px; font-size: .8em; }
.botao[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.titulo-link { text-decoration: none; color: var(--p-texto); }
.titulo-link:hover { color: var(--p-ok-texto); text-decoration: underline; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
/* Botões de linha (Salvar/Desativar na tela de serviços) saíam desalinhados: cada POST
precisa do seu formulário, e o form trazia margem e comportamento de bloco dentro do
flex. Zerar a margem e torná-lo flex põe os dois na mesma linha de base (item 9). */
.acoes > form { display: flex; align-items: center; margin: 0; }
td.acoes, th.acoes { margin: 0; }
td.acoes { padding-top: 10px; }
.acoes-linha { display: flex; gap: 6px; align-items: flex-start; }
.linha-novo { display: flex; gap: 8px; }
.linha-novo input { margin: 0; }
.linha-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.linha-status select { margin: 0; width: auto; min-width: 150px; }
/* formulário DENTRO de uma linha-status: o card da proposta põe status, Abrir e Excluir
lado a lado, e cada botão de POST precisa do seu próprio form (HTML não aninha form) */
.linha-status > form { display: flex; gap: 8px; align-items: center; margin: 0; }
.alinha-direita { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* ------------------------------------------------------------------ avisos e selos -- */
.alerta { background: #fdecec; border: none; border-left: 4px solid var(--vermelho);
color: var(--vermelho); padding: 10px 12px; border-radius: .4285rem; }
.aviso { background: var(--amarelo); border: none; border-left: 4px solid #d9a400;
color: #533d00; padding: 10px 12px; border-radius: .4285rem; }
.aviso a, .aviso strong { color: #533d00; }
.ok-box { background: var(--p-ok-fundo); border: none; border-left: 4px solid var(--verde);
color: var(--p-ok-texto); padding: 10px 12px; border-radius: .4285rem; }
/* ----------------------------------------------- painel comercial (06/11/2026) ------
Gráficos RENDERIZADOS NO SERVIDOR, sem biblioteca de JS: o tema não traz uma, e a
página inteira do sistema funciona sem JS (mesma escolha da grade do calendário).
Cada gráfico é de UMA série, então usa UM tom — o verde da marca. Cinco cores num
gráfico de uma série só seriam decoração, e decoração em número é ruído.
As medidas seguem a especificação de marcas: traço fino, ponta arredondada de 4px
ancorada na linha de base, 2px de respiro entre barras vizinhas. */
.tiles { display: flex; flex-wrap: wrap; gap: 14px; }
.tile { flex: 1 1 210px; border: 1px solid var(--p-borda); border-radius: .4285rem;
padding: 12px 14px; background: var(--p-ok-fundo); }
.tile .tile-num { font-size: 1.6em; font-weight: 700; color: var(--p-ok-texto);
line-height: 1.2; }
.tile .tile-rot { font-size: .8em; color: var(--p-label); text-transform: uppercase;
letter-spacing: .03em; }
.tile .tile-nota { font-size: .8em; color: var(--p-suave); margin-top: 4px; }
/* a fórmula de cada card, que o gestor pediu VISÍVEL: "para ninguém discutir número em
reunião de sócios". Recessiva, mas presente — não é nota de rodapé escondida. */
.formula { font-size: .8em; color: var(--p-label); background: var(--p-ok-fundo);
border-left: 3px solid var(--p-borda); padding: 6px 10px; margin: 8px 0 14px;
border-radius: 0 .2857rem .2857rem 0; }
.formula strong { color: var(--p-texto); }
/* barras horizontais: magnitude por categoria (funil, ranking) */
.barras { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.barras .linha-barra { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto;
gap: 10px; align-items: center; font-size: .88em; }
.barras .trilha { background: var(--p-ok-fundo); border-radius: .2857rem; height: 14px; }
.barras .trilha > span { display: block; height: 100%; background: var(--verde);
border-radius: 0 4px 4px 0; min-width: 2px; }
.barras .trilha > span.encerrada { background: var(--p-suave); }
.barras .valor-barra { font-variant-numeric: tabular-nums; color: var(--p-texto);
white-space: nowrap; }
/* colunas: a série de 12 meses. Só os meses COM valor recebem rótulo — número em todo
ponto é a poluição que faz ninguém ler nenhum. */
.colunas { display: flex; align-items: flex-end; gap: 2px; height: 150px;
border-bottom: 1px solid var(--p-borda); margin: 18px 0 0; padding: 0 2px; }
.colunas .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
align-items: center; height: 100%; }
.colunas .col > span.pilha { width: 100%; background: var(--verde);
border-radius: 4px 4px 0 0; min-height: 2px; }
.colunas .col > span.pilha.zero { background: var(--p-borda); }
.colunas .col > em { font-size: .68em; color: var(--p-texto); font-style: normal;
margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.eixo-meses { display: flex; gap: 2px; padding: 4px 2px 0; }
.eixo-meses > span { flex: 1; text-align: center; font-size: .7em; color: var(--p-suave); }
/* A LINHA QUE ESTÁ ABERTA PARA EDIÇÃO (RODADA4 item 2): o cartão de edição abre ABAIXO da
lista, e sem esta marca não haveria como saber de qual das 61 linhas ele é. */
.tabela tr.em-edicao > td { background: var(--p-ok-fundo); }
/* premissa de mercado com a revisao vencida (M1, 09/11/2026): o destaque e na
LINHA porque a pergunta e "qual parametro esta velho", nao "qual celula" */
.tabela tr.vencida > td { background: #fdecec; }
/* A PRÉVIA DO E-MAIL AO CRBIO (RODADA4 item 1b). O HTML de dentro é o do e-mail, não o
da tela: ele traz e
com estilo próprio (inline), e a moldura aqui existe
para quem lê saber onde a mensagem começa e termina. */
.previa-email { background: var(--p-ok-fundo); border: 1px solid var(--p-borda);
border-radius: .4285rem; padding: 4px 14px; margin: 0 0 14px; font-size: .9em; }
.previa-email p { color: var(--p-texto); }
.previa-email img { max-width: 170px; height: auto; }
.selo { font-size: .68em; padding: 3px 10px; border-radius: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; }
.selo.ok, .selo.status-aprovada { background: var(--p-ok-fundo); color: var(--p-ok-texto); }
.selo.rascunho, .selo.status-rascunho { background: var(--amarelo); color: #7a5c00; }
.selo.status-enviada { background: #e4f1fe; color: #0b5cab; }
.selo.status-recusada, .selo.status-perdida { background: #fdecec; color: var(--vermelho); }
.nivel-ok { color: var(--p-ok-texto); font-weight: 600; }
.nivel-atencao { color: var(--p-atencao-texto); font-weight: 600; }
.nivel-alerta { color: var(--p-alerta-texto); font-weight: 700; }
.sino { position: relative; text-decoration: none; }
.sino .contador { position: absolute; top: -8px; right: -10px; background: var(--vermelho);
color: #fff; border-radius: 10px; font-size: .68em; padding: 1px 5px; font-weight: 700; }
.nao-lido { border-left: 4px solid var(--verde); }
.salvo { font-size: .7em; color: var(--p-ok-texto); font-weight: 400; margin-left: 8px; }
.total-geral { color: var(--p-ok-texto); font-size: 1.05em; }
/* ------------------------------------------------------------------ tabelas --------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9em; color: var(--p-texto); }
.tabela th, .tabela td { border: none; border-bottom: 1px solid var(--p-borda);
padding: 8px 10px; text-align: left; }
.tabela td { color: var(--p-texto); }
.tabela th { text-transform: uppercase; font-size: .76em; letter-spacing: .04em;
color: var(--p-suave); font-weight: 600; }
.tabela tr:last-child td { border-bottom: none; }
.tabela.proposta-resumo .num { text-align: right; white-space: nowrap; }
.tabela.proposta-resumo th:first-child, .tabela.proposta-resumo td:first-child { width: 46%; }
.tabela.proposta-resumo th.num { width: 13.5%; }
.tabela.proposta-resumo .linha-total td { background: var(--p-ok-fundo);
font-weight: 700; color: var(--p-ok-texto); }
.tabela.proposta-resumo .item-meta { font-size: .82em; }
.tabela.memoria { margin-top: 12px; font-size: .85em; }
.tabela.acompanhamento { font-size: .86em; }
.tabela.acompanhamento td { vertical-align: top; }
.tabela.acompanhamento .item-meta { font-size: .88em; margin-top: 2px; }
@media (max-width: 620px) { .tabela.acompanhamento { display: block; overflow-x: auto; } }
/* ------------------------------------------------------------------ itens/painéis --- */
.item { display: block; text-decoration: none; color: inherit; }
a.item:hover { border-color: var(--verde); }
.item-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fonte-item { border: 1px solid var(--p-borda); border-radius: .4285rem;
padding: 10px; margin: 8px 0; }
.item-custo { border-left: 4px solid var(--p-ok-fundo); }
.item-custo.recolhido { border-left-color: var(--p-borda); }
.cabecalho-item { cursor: pointer; gap: 10px; align-items: flex-start; }
.cabecalho-item h3 { margin: 0; font-size: 1em; border: none; padding: 0; color: var(--p-texto); }
.cabecalho-item:hover { background: var(--p-fundo-leve); border-radius: .2857rem; }
.resumo-item { flex: 1; min-width: 0; }
.resumo-item .item-meta { margin-top: 2px; }
.cabecalho-item .seta { color: var(--p-suave); transition: transform .15s; font-size: .9em; }
.recolhido .corpo-item { display: none; }
.recolhido .seta { transform: rotate(-90deg); display: inline-block; }
.resumo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bloco-resumo { flex: 1; min-width: 92px; text-align: center; padding: 10px 6px;
border: 1px solid transparent; border-radius: .2857rem; background: var(--p-card);
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .1); text-decoration: none;
color: var(--p-label); display: block; }
.bloco-resumo strong { display: block; font-size: 1.3em; color: var(--p-ok-texto); }
.bloco-resumo span { font-size: .72em; }
a.bloco-resumo:hover { border-color: var(--verde); }
.bloco-resumo.ativo { border-color: var(--verde); }
.bloco-resumo.alerta-bloco strong { color: var(--p-alerta-texto); }
.titulo-secao { margin: 26px 0 6px; padding-bottom: 4px; color: var(--p-texto);
border-bottom: 2px solid var(--verde); font-size: 1.1em; }
.titulo-secao small { color: var(--p-suave); font-weight: 400; font-size: .8em; }
/* ------------------------------------------------------------------ wizard ---------- */
.progresso .prog-topo { display: flex; justify-content: space-between; margin-bottom: 6px; }
.pct { color: var(--p-ok-texto); font-weight: 700; }
.barra { background: var(--p-borda); border-radius: .2857rem; height: 8px; overflow: hidden; }
.barra > div { background: linear-gradient(90deg, var(--verde), var(--verde-escuro));
height: 100%; transition: width .3s; }
.barra.mini { height: 5px; margin: 8px 0 4px; }
.etapas { list-style: none; display: flex; padding: 0; margin: 12px 0 0; gap: 4px; }
.etapas li { flex: 1; text-align: center; }
.etapas .etapa-link { text-decoration: none; color: var(--p-label); font-size: .75em;
display: flex; flex-direction: column; align-items: center; gap: 4px; }
.etapas li.travada .etapa-link { opacity: .45; cursor: not-allowed; }
.bolinha { width: 26px; height: 26px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; border: 2px solid var(--p-borda);
background: var(--p-card); font-weight: 700; color: var(--p-texto); }
.etapas li.feita .bolinha { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas li.ativa .bolinha { border-color: var(--verde); color: var(--p-ok-texto); }
.etapas li.ativa.feita .bolinha { color: #fff; }
.etapas li.ativa .etapa-link { color: var(--p-texto); font-weight: 700; }
@media (max-width: 520px) { .etapa-nome { display: none; }
.etapas li.ativa .etapa-nome { display: block; } }
.nav-etapas { display: flex; justify-content: space-between; margin: 16px 0; }
.nav-frente { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* ------------------------------------------------------------------ anexos ---------- */
.anexo-bloco { border: 1px solid var(--p-borda); border-radius: .4285rem; padding: 12px;
margin: 12px 0; background: var(--p-fundo-leve); }
.anexo-bloco h4 { margin: 0; color: var(--p-ok-texto); font-size: .95em; }
.lista-anexos { list-style: none; padding: 0; margin: 8px 0; }
.lista-anexos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 0; border-bottom: 1px solid var(--p-borda); color: var(--p-texto); }
.lista-anexos li:last-child { border-bottom: none; }
.lista-anexos a { color: var(--p-ok-texto); }
.lista-anexos form { margin-left: auto; }
.anexo-bloco input[type=file] { border: none; padding: 6px 0; }
@media (max-width: 520px) { .anexo-bloco .linha-novo { flex-direction: column; align-items: stretch; } }
/* --------------------------------------------- sidebar: subitens (casca da main) ---- */
.sidebar .submenu { display: flex; flex-direction: column; margin: 0 14px 6px 28px;
padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .25); }
.sidebar .submenu a { color: rgba(255, 255, 255, .75); text-decoration: none;
font-size: .78rem; padding: 6px 8px; border-radius: .2857rem; }
.sidebar .submenu a:hover { color: #fff; }
.sidebar .submenu a.sub-ativo { color: #fff; font-weight: 700;
background: rgba(255, 255, 255, .12); }
/* ------------------------------------------- calendário das medições (19/10/2026) --- */
/* Grade renderizada NO SERVIDOR (decisão do gestor em 19/10): o tema traz a pele do
FullCalendar (.fc-*), mas não a biblioteca — e a grade precisa funcionar sem JS no
celular do técnico em campo. As cores vêm dos tokens, para as três camadas do plano
ficarem distinguíveis entre si: medição agendada (azul), realizada (verde-azulado) e
prazo de entrega (âmbar). Dia sem marca nenhuma é dia livre. */
.cab-agenda { display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px; }
.titulo-agenda { color: var(--texto-titulo); text-transform: capitalize; min-width: 11ch;
text-align: center; }
.filtros-agenda { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
margin: 0 0 12px; }
.filtros-agenda label { margin: 0; }
.legenda-agenda { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
margin: 0 0 10px; font-size: .78rem; }
.calendario { width: 100%; border-collapse: collapse; table-layout: fixed;
background: var(--superficie); box-shadow: var(--sombra-cartao);
border-radius: var(--raio-grande); overflow: hidden; }
.calendario th { background: var(--primaria-clara); color: var(--primaria-escura);
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
padding: 7px 4px; text-align: left; }
.calendario td { border: 1px solid var(--borda-suave); vertical-align: top;
padding: 4px; height: 92px; width: 14.28%; }
.calendario .numero-dia { display: block; font-size: .72rem; font-weight: 700;
color: var(--texto-suave); margin-bottom: 3px; }
.calendario td.fora-do-mes { background: var(--fundo-pagina); }
.calendario td.fora-do-mes .numero-dia { opacity: .45; }
.calendario td.fim-de-semana { background: #fafbfe; }
.calendario td.hoje { outline: 2px solid var(--primaria); outline-offset: -2px; }
.calendario td.hoje .numero-dia { color: var(--primaria-escura); }
/* as marcas: mesma forma, cores diferentes — a cor é o que separa as camadas */
.marca-ag { display: block; text-decoration: none; border-radius: var(--raio);
padding: 3px 6px; margin-bottom: 3px; font-size: .68rem; line-height: 1.25;
border-left: 3px solid transparent; }
.marca-ag strong { display: block; font-weight: 700; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.marca-ag span { opacity: .8; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; display: block; }
.marca-ag.medicao { background: #e4f1fe; color: #0b5cab; border-left-color: var(--info); }
/* tom próprio (não o verde da marca): assim "realizada" não se confunde com os
destaques verdes que o resto do site usa para outras coisas */
.marca-ag.feita { background: #e2f3f0; color: var(--sucesso);
border-left-color: var(--sucesso); }
.marca-ag.prazo { background: var(--amarelo); color: var(--ambar-texto);
border-left-color: var(--ambar); }
.marca-ag.prazo.nivel-alerta { border-left-color: var(--vermelho);
color: var(--vermelho); }
.legenda-agenda .marca-ag { display: inline-block; margin: 0; }
/* no celular a grade de 7 colunas não cabe: vira lista de dias, e o dia livre fica
invisível por não ter marca — então o rótulo do dia some junto, e só aparece dia com
alguma coisa marcada */
@media (max-width: 680px) {
.calendario, .calendario tr, .calendario td { display: block; width: auto; }
.calendario tr { border-bottom: none; }
.calendario th { display: none; }
.calendario td { height: auto; min-height: 0; border: none;
border-bottom: 1px solid var(--borda-suave); }
.calendario td.livre, .calendario td.fora-do-mes { display: none; }
.calendario .numero-dia { font-size: .8rem; color: var(--texto-titulo); }
}
/* faixa da próxima medição no serviço aceito (Fatia 3 da agenda): sem agendamento é
DESTAQUE, porque serviço aceito sem data marcada é o que atrasa a entrega */
.faixa-medicao { margin: 10px 0 6px; padding: 8px 12px; border-radius: var(--raio);
background: #e4f1fe; color: #0b5cab; font-size: .8rem;
border-left: 3px solid var(--info); }
.faixa-medicao.sem-medicao { background: var(--amarelo); color: var(--ambar-texto);
border-left-color: var(--ambar); }
.faixa-medicao a { color: inherit; text-decoration: underline; }
/* ------------------------------------- licenças: o farol do semáforo (20/10/2026) ---- */
/* As cores são as que o gestor definiu para as etapas (azul → vermelho conforme a data
aproxima); aqui elas viram os tons do design system, mantendo a semântica. */
.farol { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }
.farol-info { background: var(--info); }
.farol-ok { background: var(--sucesso); }
.farol-atencao { background: var(--ambar); }
.farol-alerta { background: var(--alerta-tema); }
.farol-perigo { background: var(--vermelho); }
/* o relatório da importação de licenças sai em texto monoespaçado: é uma saída de
conferência, e alinhamento em colunas é o que a torna legível */
pre.resumo { background: var(--fundo-pagina); border: 1px solid var(--borda-suave);
border-radius: var(--raio); padding: 12px; overflow-x: auto; font-size: .72rem;
line-height: 1.45; white-space: pre; color: var(--texto-corpo); }
/* camada das LICENÇAS no calendário da operação (20/10/2026): tom próprio, para não se
confundir com medição (azul) nem com prazo de laudo (âmbar), e a borda esquerda leva a
cor do semáforo da etapa — que é a cor que o gestor definiu. */
.marca-ag.licenca { background: #f3eefb; color: #5b3fa8; border-left-color: #8e6fd8; }
.marca-ag.farol-borda-info { border-left-color: var(--info); }
.marca-ag.farol-borda-ok { border-left-color: var(--sucesso); }
.marca-ag.farol-borda-atencao { border-left-color: var(--ambar); }
.marca-ag.farol-borda-alerta { border-left-color: var(--alerta-tema); }
.marca-ag.farol-borda-perigo { border-left-color: var(--vermelho); }
/* BUSCA EM LISTA GRANDE (03/11/2026, pedido do gestor; ver wizard.js). O campo nasce do
JavaScript e fica logo acima do