/* Maquete — menu lateral · Design System Fibrasa (usa tokens.css) */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--texto); background: var(--superficie); }
a { color: inherit; }
.app { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; }

/* menu lateral */
.lateral { background: var(--verde-lettering); color: #fff; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow: hidden; }
.lateral .usuario { margin-top: auto; }
.lateral .logo { padding: 0 25px; }
.lateral .logo img { width: 250px; height: auto; display: block; }
.grafismo { position: absolute; left: -60px; bottom: 150px; width: 420px; height: 220px; pointer-events: none; }
.menu { padding: 8px 16px; flex: 1; position: relative; }
.grupo { font: var(--text-sobretitulo); letter-spacing: 2px; text-transform: uppercase; color: #ededed; margin: 22px 12px 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--raio-md); font: var(--text-botao); color: #fff; margin-bottom: 4px; text-decoration: none; }
.item:hover { background: var(--verde-c); }
.item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.item svg { width: 23px; height: 23px; flex: 0 0 23px; }
.item.ativo { background: #fff; color: var(--verde-lettering); font-weight: 700; }
.item .qtd { margin-left: auto; font: var(--text-rotulo); background: var(--status-erro); color: #fff; border-radius: var(--raio-pill); padding: 2px 9px; }
.usuario { margin: 16px; padding: 14px; border-radius: var(--raio-lg); background: var(--verde-c); display: flex; gap: 12px; align-items: center; position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--verde-lettering); font-weight: 800; display: grid; place-items: center; }
.usuario b { display: block; font-size: 13px; font-weight: 500; }
.usuario span { font-size: 12px; color: #ededed; }
.assinatura { font-size: 12px; color: #ededed; padding: 0 28px 22px; position: relative; }

/* conteúdo */
.conteudo { padding: 32px 40px; min-width: 0; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sobre { font: var(--text-sobretitulo); letter-spacing: 2px; text-transform: uppercase; color: var(--texto-suave); }
h1 { font: var(--text-h1); color: var(--titulo); margin: 4px 0 0; }
h3 { font: var(--text-h3); color: var(--titulo); margin: 0 0 4px; }
h3.sec { margin: 8px 0 12px; }
.atualiz { font: var(--text-corpo-pequeno); color: var(--texto-suave); text-align: right; }
.filtros { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; align-items: center; }
.campo { border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 8px 14px; font: var(--text-corpo-pequeno); min-width: 120px; background: #fff; }
.campo small { display: block; font: var(--text-rotulo); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.campo.busca { min-width: 280px; color: var(--texto-suave); }
.btn { display: inline-block; border-radius: var(--raio-pill); padding: 10px 20px; font: var(--text-botao); border: 1px solid var(--borda); background: #fff; color: var(--verde-lettering); white-space: nowrap; }
.btn.primario { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.btn.mini { padding: 5px 12px; font-size: 12px; }
.btn.perigo { color: var(--status-erro); border-color: var(--status-erro); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.kpis.cinco { grid-template-columns: repeat(5, 1fr); margin-top: 24px; }
.card { background: var(--superficie-alt); border-radius: var(--raio-lg); padding: 24px; min-width: 0; }
.kpi small { font: var(--text-rotulo); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.kpi .v { font: var(--text-valor-kpi); color: var(--titulo); margin: 6px 0 4px; }
.kpi .apoio { font: var(--text-corpo-pequeno); color: var(--texto-suave); }
.linha2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.linha2.inv { grid-template-columns: 1fr 1fr; }
.linha2.etl { grid-template-columns: 2fr 1fr; }
.legenda { font: var(--text-legenda); color: var(--texto-suave); }
.cab-card { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.acoes, .acoes-esq { display: flex; gap: 10px; align-items: center; }
.acoes-esq { margin: 14px 0 8px; }
.nota-maquete { font: var(--text-legenda); color: var(--texto-suave); margin-top: 32px; }

/* badges de status: palavra + ícone */
.badge { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: var(--raio-pill); padding: 3px 10px; font: var(--text-rotulo); white-space: nowrap; }
.ok { color: var(--status-sucesso); } .info { color: var(--status-info); } .alerta { color: var(--status-alerta); } .erro { color: var(--status-erro); } .neutro { color: var(--texto-suave); }
.erro-txt { color: var(--status-erro); }

/* tabelas */
.tab-wrap { background: #fff; border-radius: var(--raio-md); overflow: auto; }
.tab-wrap.rolagem { max-height: 560px; }
table { width: 100%; border-collapse: collapse; font: var(--text-corpo-pequeno); }
th { font: var(--text-rotulo); text-align: center; color: #fff; background: var(--verde-lettering); padding: 10px 10px; white-space: nowrap; position: sticky; top: 0; }
td { padding: 9px 10px; border-bottom: 1px solid var(--divisor); text-align: center; white-space: nowrap; }
.maiusc td { text-transform: uppercase; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.picto { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; }
.picto svg { flex: 0 0 auto; }
.picto b { font: var(--text-rotulo); color: var(--texto); }
.doc { display: inline-block; border-radius: var(--raio-pill); padding: 4px 11px; font: var(--text-rotulo); }
.doc.emitido { background: var(--verde-c); color: #fff; }
.doc.nao { background: var(--cinza-claro); color: var(--texto-suave); border: 1px solid var(--borda); }
.doc.cancelado { background: var(--status-erro); color: #fff; }

/* gráficos */
.barra { height: 10px; border-radius: 5px; background: #fff; overflow: hidden; }
.barra.larga { height: 14px; flex: 1; }
.barra i { display: block; height: 100%; border-radius: 5px; }
.hbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0; font: var(--text-corpo-pequeno); }
.hbar > span { width: 44px; font-weight: 700; color: var(--titulo); }
.rosca { display: flex; gap: 20px; align-items: center; margin-top: 12px; }
.rosca ul { list-style: none; padding: 0; margin: 0; font: var(--text-corpo-pequeno); flex: 1; }
.rosca li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #fff; }
.rosca li i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.rosca li b { margin-left: auto; font-weight: 500; color: var(--texto-suave); }

/* perigo e fichas */
.grade-perigo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.legenda-perigo { display: flex; gap: 14px; align-items: center; padding: 16px; }
.legenda-perigo b { display: block; font-weight: 700; color: var(--titulo); }
.legenda-perigo span, .legenda-perigo small { display: block; font: var(--text-legenda); color: var(--texto-suave); }
.alerta-card { margin-top: 12px; font: var(--text-corpo-pequeno); }
.ficha { border-radius: var(--raio-lg); overflow: hidden; background: var(--superficie-alt); }
.ficha-topo { background: var(--status-erro); color: #fff; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.ficha-topo .picto { background: #fff; border-radius: 10px; padding: 4px; min-width: 0; }
.ficha-topo small { font: var(--text-sobretitulo); letter-spacing: 1px; color: #ededed; display: block; }
.ficha-topo b { font-size: 18px; font-weight: 700; }
.ficha-corpo { padding: 20px; display: grid; gap: 12px; }
.caixa { background: #fff; border-radius: var(--raio-md); padding: 12px 14px; }
.caixa small { display: block; font: var(--text-rotulo); color: var(--texto-suave); letter-spacing: .5px; }
.caixa b { display: block; margin-top: 4px; font-weight: 700; }
.caixa span { font: var(--text-corpo-pequeno); color: var(--texto-suave); }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grade3 small { display: block; font: var(--text-rotulo); color: var(--texto-suave); }

/* ETL e atualização */
.abas { display: flex; gap: 8px; margin: 24px 0 0; }
.aba { padding: 9px 16px; border-radius: var(--raio-pill); border: 1px solid var(--borda); font: var(--text-botao); color: var(--verde-lettering); }
.aba.ativa { background: var(--acao); color: #fff; border-color: var(--acao); }
pre.sql { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 16px; font: 12px/1.55 Consolas, monospace; max-height: 420px; overflow: auto; white-space: pre-wrap; margin: 12px 0 0; }
.cfg { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #fff; font: var(--text-corpo-pequeno); }
.cfg > span:first-child { width: 170px; }
.chip { display: inline-block; background: #fff; border-radius: var(--raio-pill); padding: 5px 12px; margin: 0 6px 6px 0; font: var(--text-rotulo); color: var(--verde-lettering); }
.toggle { width: 44px; height: 24px; border-radius: 12px; background: var(--verde-c); position: relative; }
.toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.progresso { margin-top: 18px; }
.progresso .barra.larga { background: #fff; height: 14px; }
.prog-txt { display: flex; justify-content: space-between; font: var(--text-corpo-pequeno); margin-top: 6px; color: var(--texto-suave); }
.progresso ul { font: var(--text-corpo-pequeno); padding-left: 18px; }
.progresso li { margin: 6px 0; }
.job-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.job b { font-weight: 700; color: var(--titulo); }
.acoes-tab { display: flex; gap: 6px; justify-content: center; }

.legenda-perigo .picto, .ficha-topo .picto { min-width: 0; }
.caixa span b { display: inline; margin: 0; }
.hbar .badge { margin-left: 56px; }

/* ================= capa com o degradê oficial (verde-c -> verde-b, só fundo de capa) ================= */
.topo.capa { position: relative; overflow: hidden; border-radius: var(--raio-lg); padding: 28px 32px; align-items: center;
  background: linear-gradient(110deg, var(--verde-c) 0%, var(--verde-c) 38%, var(--verde-b) 100%); }
.topo.capa .sobre { color: #fff; }
.topo.capa h1 { color: #fff; }
.topo.capa .atualiz { background: var(--verde-lettering); color: #fff; border-radius: var(--raio-pill); padding: 8px 18px; text-align: left; position: relative; z-index: 1; }
.capa-grafismo { position: absolute; right: -40px; top: -30px; width: 520px; height: 200px; pointer-events: none; }
.capa-grafismo path { stroke: #fff; stroke-opacity: .55; }

/* ================= animações ================= */
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes traca { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes estica { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes andamento { from { width: 0; } }
.anima .topo, .anima .filtros, .anima .card, .anima .abas, .anima h3.sec, .anima .ficha { animation: sobe .6s cubic-bezier(.2, .8, .2, 1) both; }
.anima .filtros { animation-delay: .08s; }
.anima .kpis .card:nth-child(1) { animation-delay: .14s; } .anima .kpis .card:nth-child(2) { animation-delay: .2s; }
.anima .kpis .card:nth-child(3) { animation-delay: .26s; } .anima .kpis .card:nth-child(4) { animation-delay: .32s; }
.anima .kpis .card:nth-child(5) { animation-delay: .38s; }
.anima .linha2 > *:nth-child(1) { animation-delay: .4s; } .anima .linha2 > *:nth-child(2) { animation-delay: .48s; }
.anima .grafismo path, .anima .capa-grafismo path { stroke-dasharray: 900; animation: traca 2.2s ease-out both; }
.anima .grafismo path:nth-child(2), .anima .capa-grafismo path:nth-child(2) { animation-delay: .25s; }
.anima .grafismo path:nth-child(3), .anima .capa-grafismo path:nth-child(3) { animation-delay: .5s; }
.anima svg rect[rx="3"] { transform-box: fill-box; transform-origin: bottom; animation: cresce .9s cubic-bezier(.2, .8, .2, 1) both; }
.anima svg polyline { stroke-dasharray: 1600; animation: traca 1.8s .5s ease-out both; }
.anima .rosca path { stroke-dasharray: 600; animation: traca 1.4s .4s ease-out both; }
.anima .barra i { transform-origin: left; animation: estica 1.1s .5s cubic-bezier(.2, .8, .2, 1) both; }
.anima .progresso .barra i { animation: andamento 2.4s .4s ease-out both; }
.anima tbody tr { animation: sobe .45s ease-out both; }
.anima tbody tr:nth-child(2) { animation-delay: .05s; } .anima tbody tr:nth-child(3) { animation-delay: .1s; }
.anima tbody tr:nth-child(4) { animation-delay: .15s; } .anima tbody tr:nth-child(5) { animation-delay: .2s; }
.anima tbody tr:nth-child(n+6) { animation-delay: .25s; }
.anima .item .qtd { animation: pulsa 1.6s ease-in-out 1s 3; }
.item { transition: background .2s, transform .2s; }
.item:not(.ativo):hover { transform: translateX(4px); }
.card { transition: transform .2s; }
.kpis .card:hover, .legenda-perigo:hover { transform: translateY(-3px); }
.doc, .btn { transition: filter .15s, transform .15s; }
.doc:hover, .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--cinza-claro); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= menu lateral retrátil ================= */
.app { grid-template-columns: var(--larg-menu, 300px) minmax(0, 1fr); transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1); }
.menu-recolhido .app { --larg-menu: 88px; }
.lateral .logo { position: relative; height: 182px; }
.logo-simbolo { position: absolute; left: 22px; top: 28px; width: 44px !important; opacity: 0; transition: opacity .2s; }
.logo-cheio { transition: opacity .2s; }
.recolher { position: absolute; top: 150px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #fff;
  background: var(--verde-lettering); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .35s, right .35s; }
.recolher svg { width: 18px; height: 18px; }
.recolher:hover { background: var(--verde-c); }
.recolher:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.item .rot, .grupo, .usu-txt, .assinatura { transition: opacity .2s; white-space: nowrap; }
.item { position: relative; }
/* estado recolhido */
.menu-recolhido .logo-cheio { opacity: 0; }
.menu-recolhido .logo-simbolo { opacity: 1; }
.menu-recolhido .recolher { right: 27px; top: 96px; transform: rotate(180deg); }
.menu-recolhido .lateral .logo { height: 150px; }
.menu-recolhido .menu { padding: 8px 14px; }
.menu-recolhido .grupo { opacity: 0; height: 1px; margin: 14px 8px; background: var(--verde-c); overflow: hidden; }
.menu-recolhido .item { justify-content: center; padding: 11px 0; }
.menu-recolhido .item .rot { opacity: 0; position: absolute; pointer-events: none; }
.menu-recolhido .item .qtd { position: absolute; top: 2px; right: 6px; padding: 0 6px; font-size: 10px; }
.menu-recolhido .usuario { margin: 16px 14px; padding: 10px 0; justify-content: center; }
.menu-recolhido .usu-txt, .menu-recolhido .assinatura, .menu-recolhido .grafismo { opacity: 0; display: none; }
/* dica com o nome do item (só recolhido) */
.menu-recolhido .lateral { overflow: visible; z-index: 5; }
.menu-recolhido .item:not(.ativo):hover { transform: none; }
.menu-recolhido .item:hover::after, .menu-recolhido .item:focus-visible::after {
  content: attr(data-dica); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  background: var(--preto-marca); color: #fff; font: var(--text-botao); padding: 6px 12px; border-radius: var(--raio-md); white-space: nowrap; z-index: 20; }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

/* ================= v3: menu em degradê oficial + marca compacta ================= */
/* degradê oficial verde-c -> verde-b; textos ficam na faixa escura (verde-c, 5,5:1 com branco) */
.lateral { background: linear-gradient(180deg, var(--verde-c) 0%, var(--verde-c) 58%, var(--verde-b) 100%); }
.lateral .logo, .logo-cheio, .logo-simbolo { display: none; }
.marca { display: flex; align-items: center; gap: 12px; padding: 24px 20px 18px; position: relative; }
.marca-tile { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--raio-lg); background: #fff; display: grid; place-items: center; }
.marca-tile img { width: 42px; height: auto; }   /* símbolo: mínimo 40 px */
.marca-txt { display: flex; flex-direction: column; white-space: nowrap; transition: opacity .2s; }
.marca-txt b { font: var(--text-botao); font-weight: 700; color: #fff; }
.marca-txt small { font: var(--text-legenda); color: #fff; }
.recolher { top: 34px; right: 14px; border-color: #fff; background: var(--verde-lettering); }
.item:hover { background: var(--verde-lettering); }
.grupo { color: #fff; }
.usuario { background: var(--verde-lettering); }
.assinatura span { display: inline-block; background: var(--verde-lettering); border-radius: var(--raio-pill); padding: 4px 12px; }
/* recolhido: mesmo degradê, só o símbolo */
.menu-recolhido .marca { padding: 24px 16px 70px; justify-content: center; }
.menu-recolhido .marca-txt { opacity: 0; position: absolute; pointer-events: none; }
.menu-recolhido .recolher { top: 92px; right: 27px; }
.menu-recolhido .grupo { background: var(--verde-lettering); }

/* ================= v4: símbolo sem fundo branco, com sombra e animação contínua (a pedido; fora do manual) ================= */
.marca-tile { background: transparent; }
.marca-tile img { width: 48px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) drop-shadow(0 0 2px rgba(0, 0, 0, .35));
  animation: flutua 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes flutua { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.06); } }

/* ================= v4: painel de perigo (hover) e ficha (clique) no relatório MTR ================= */
.picto-ativo { cursor: pointer; border-radius: var(--raio-md); padding: 2px 6px; }
.picto-ativo:hover { background: var(--cinza-claro); }
.picto-ativo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tip-perigo { position: fixed; z-index: 50; width: 380px; background: var(--preto-marca); color: #fff; border-radius: var(--raio-lg); padding: 16px;
  font: var(--text-corpo-pequeno); pointer-events: none; opacity: 0; transition: opacity .15s; text-transform: none; text-align: left; }
.tip-perigo.on { opacity: 1; }
.tp-cab { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #5c5c5c; }
.tp-ic { background: #fff; border-radius: 10px; padding: 4px; display: grid; place-items: center; }
.tp-ic svg { width: 40px; height: 40px; }
.tp-ic.grande svg { width: 44px; height: 44px; }
.tp-classe { display: inline-block; border-radius: var(--raio-md); padding: 2px 9px; font: var(--text-rotulo); color: #fff; }
.tp-classe.per { background: var(--status-erro); } .tp-classe.np { background: var(--verde-c); }
.tp-cab b { display: block; font-weight: 700; font-size: 14px; margin-top: 4px; }
.tp-cab small { color: #ededed; font: var(--text-legenda); }
.tip-perigo dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 12px 0; }
.tip-perigo dt { color: #ededed; } .tip-perigo dd { margin: 0; font-weight: 700; }
.tip-perigo dd.onu { color: var(--azul-b); }
.tp-rot { font: var(--text-rotulo); color: #ededed; letter-spacing: .5px; }
.tip-perigo p { font-style: italic; margin: 4px 0 10px; }
.tp-rod { display: flex; justify-content: space-between; border-top: 1px solid #5c5c5c; padding-top: 8px; color: #ededed; }
.tp-rod b { color: #fff; } .epi { color: #fff; background: var(--verde-c); border-radius: var(--raio-pill); padding: 0 10px; font-weight: 700; }
.modal-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(29, 29, 27, .6); display: grid; place-items: center; padding: 16px; animation: sobe .25s ease-out both; }
.ficha.modal { width: min(660px, 100%); max-height: 92vh; overflow: auto; }
.ficha-topo.np { background: var(--verde-c); }
.ficha-topo .tp-ic { flex: 0 0 auto; }
.fechar { cursor: pointer; }
.ficha-topo .fechar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; background: transparent; color: #fff; font-size: 20px; }
.ficha-topo .fechar:focus-visible, .btn.fechar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.caixa.larga i { display: block; margin-top: 4px; }
.acoes-dir { display: flex; justify-content: flex-end; }
button.btn { font: var(--text-botao); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .marca-tile img { animation: none; } }

/* cabeçalho da tabela sempre acima das linhas animadas */
th { z-index: 3; }

/* filtro com valor escolhido */
.campo.marcado { border-color: var(--verde-lettering); border-width: 2px; padding: 7px 13px; }
.campo.marcado small { color: var(--verde-lettering); }

/* botão Sair (cartão do usuário) */
.sair { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #fff; border-radius: var(--raio-pill); padding: 6px 12px;
  color: #fff; text-decoration: none; font: var(--text-botao); transition: background .15s; }
.sair svg { width: 16px; height: 16px; }
.sair:hover { background: var(--verde-c); }
.sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menu-recolhido .usuario { flex-direction: column; gap: 8px; }
.menu-recolhido .sair { margin: 0; padding: 7px; }
.menu-recolhido .rot-sair { display: none; }

/* CDF */
.kpis.seis { grid-template-columns: repeat(3, 1fr); }
h3.sec .legenda { display: block; margin-top: 2px; font-weight: 400; }
.alerta-cdf { border-left: 6px solid var(--status-erro); }

/* abas dentro do painel */
.abas-painel { display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 2px solid var(--cinza-claro); }
.aba-p { position: relative; border: 0; background: none; cursor: pointer; padding: 12px 18px; font: var(--text-botao); font-size: 15px; color: var(--texto-suave);
  border-radius: var(--raio-md) var(--raio-md) 0 0; display: inline-flex; align-items: center; gap: 8px; }
.aba-p:hover { background: var(--cinza-claro); color: var(--verde-lettering); }
.aba-p.ativa { color: var(--verde-lettering); font-weight: 700; }
.aba-p.ativa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--verde-lettering); }
.aba-p:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.qtd-aba { background: var(--status-erro); color: #fff; border-radius: var(--raio-pill); padding: 1px 8px; font: var(--text-rotulo); }
.aba-conteudo.entra { animation: sobe .4s ease-out both; }

.mini-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.cab-card a.btn { text-decoration: none; }

.kpis.cinco .kpi .v { font-size: 34px; line-height: 40px; white-space: nowrap; }

/* ================= favo de mel (Perigo e fichas) ================= */
.favo-area { grid-template-columns: 1.45fr 1fr; align-items: start; }
.favos { display: flex; flex-direction: column; align-items: center; padding: 8px 0 4px; }
.favo-linha { display: flex; gap: 10px; }
.favo-linha + .favo-linha { margin-top: -38px; }          /* encaixe do favo */
.favo { --l: 196px; position: relative; width: var(--l); height: calc(var(--l) * 1.1547); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cor); padding: 4px; transition: transform .2s; animation: favo-entra .6s var(--atraso) cubic-bezier(.2, .8, .2, 1) both; outline: none; }
.favo::before { content: ""; position: absolute; inset: 4px; clip-path: inherit; background: #fff; }
.favo-fill { position: absolute; left: 4px; right: 4px; bottom: 4px; height: calc(var(--enche) - 8px); background: var(--cor); opacity: .16;
  clip-path: inherit; animation: favo-enche 1.6s calc(var(--atraso) + .3s) ease-out both; }
.favo-conteudo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 0 18px; }
.favo-conteudo .picto { min-width: 0; margin-bottom: 4px; }
.favo-rot { font: var(--text-rotulo); color: var(--texto); letter-spacing: .5px; }
.favo-ton { font: var(--text-h3); font-weight: 800; color: var(--cor); }
.favo-info { font: var(--text-legenda); color: var(--texto-suave); }
.favo-pct { font: var(--text-rotulo); background: var(--cor); color: #fff; border-radius: var(--raio-pill); padding: 2px 10px; margin-top: 2px; }
.favo-uf { font: var(--text-legenda); color: var(--texto-suave); }
.favo:hover, .favo:focus-visible { transform: scale(1.05); z-index: 2; }
.favo:focus-visible::after { content: ""; position: absolute; inset: 10px; clip-path: inherit; border: 2px solid var(--foco); }
@keyframes favo-entra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes favo-enche { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .favo, .favo-fill { animation: none; } }

/* favo de mel compacto (Visão geral) */
.favos.mini { padding: 4px 0 0; }
.favos.mini .favo-linha { gap: 6px; }
.favos.mini .favo-linha + .favo-linha { margin-top: -25px; }
.favos.mini .favo { --l: 128px; text-decoration: none; }
.favos.mini .favo-conteudo { padding: 0 10px; gap: 0; }
.favos.mini .favo-conteudo .picto { margin-bottom: 2px; }
.favos.mini .favo-rot { font-size: 10px; }
.favos.mini .favo-ton { font-size: 16px; line-height: 1.3; }
.favos.mini .favo-pct { font-size: 10px; padding: 0 8px; }

/* usuários: níveis */
.sel-nivel { font: inherit; font-size: 12px; color: var(--titulo); border: 1px solid var(--titulo); border-radius: var(--raio-pill); padding: 4px 10px; background: #fff; }
.sel-nivel:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ok-txt { color: var(--status-sucesso, #137845); font-weight: 500; }
.lista-prot { margin: 8px 0 0; padding-left: 18px; line-height: 1.9; }

/* ================= v4: linhas verde e azul do menu em movimento contínuo (cor do menu = degradê oficial da v3) ================= */
/* linhas: fluxo contínuo ao longo do traço + leve ondulação */
.grafismo { overflow: visible; animation: onda 9s ease-in-out infinite; }
.grafismo path { stroke-width: 2; stroke-linecap: round; }
.grafismo path, .anima .grafismo path { stroke-dasharray: 180 70; animation: flui 6s linear infinite; }
.grafismo path:nth-child(2), .anima .grafismo path:nth-child(2) { animation-duration: 8s; animation-direction: reverse; animation-delay: 0s; }
.grafismo path:nth-child(3), .anima .grafismo path:nth-child(3) { animation-duration: 10s; animation-delay: 0s; }
@keyframes flui { to { stroke-dashoffset: -500; } }
@keyframes onda { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-14px) scaleY(1.08); } }
@media (prefers-reduced-motion: reduce) { .lateral::before, .grafismo, .grafismo path { animation: none; } }

/* ================= gráficos interativos: rótulos, sombra no hover, dica, maximizar, drill ================= */
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .barra-g { transition: filter .15s, opacity .15s; cursor: pointer; }
.grafico .barra-g:hover, .grafico .par.foco .barra-g, .grafico .barra-g:focus-visible { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); outline: none; }
.grafico .par:hover .barra-g { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.grafico .rot { font: 500 10px var(--font-sans); fill: var(--texto); pointer-events: none; }
.grafico .rot-linha { font: 700 10px var(--font-sans); fill: var(--azul-escuro, #0d6eb5); pointer-events: none; }
.grafico .rot-dif { font: 700 10px var(--font-sans); pointer-events: none; }
.grafico .seg { transition: stroke-width .15s, filter .15s; cursor: pointer; }
.grafico .seg:hover { stroke-width: 38; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.dica-g { position: fixed; z-index: 60; pointer-events: none; background: var(--preto-marca, #1d1d1b); color: #fff; font: 400 12px/1.5 var(--font-sans);
  border-radius: var(--raio-md); padding: 10px 12px; min-width: 180px; max-width: 300px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.dica-g.on { opacity: 1; transform: none; }
.dica-g b { font-weight: 700; } .dica-g .t { font-weight: 700; font-size: 13px; display: block; margin-bottom: 4px; }
.dica-g table { border-collapse: collapse; width: 100%; margin-top: 6px; } .dica-g td { padding: 1px 0; border: 0; text-align: left; color: #fff; background: none; font-size: 11px; }
.dica-g td + td { text-align: right; padding-left: 10px; white-space: nowrap; }
.dica-g .sobe { color: #8fd18a; } .dica-g .desce { color: #ff9b94; }
.dica-g i.q { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
/* maximizar */
.card.tem-max { position: relative; }
.btn-max { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--titulo); background: #fff; color: var(--titulo);
  display: grid; place-items: center; cursor: pointer; z-index: 2; }
.btn-max svg { width: 16px; height: 16px; }
.btn-max:hover { background: var(--titulo); color: #fff; } .btn-max:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.card.max { position: fixed; inset: 24px; z-index: 50; overflow: auto; background: #fff; border: 1px solid #d6d6d6; animation: sobe .25s ease-out; }
.card.max .grafico { max-height: calc(100vh - 230px); }
.card.max .rosca svg { width: 340px; }
body.tem-max::before { content: ""; position: fixed; inset: 0; background: rgba(29, 29, 27, .55); z-index: 40; }
/* drill */
.drill-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 46px 6px 0; }
.drill-barra .btn { padding: 5px 12px; font-size: 12px; }
.drill-barra .btn[disabled] { opacity: .45; cursor: not-allowed; }
.trilha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font: var(--text-legenda); color: var(--texto-suave); }
.trilha button { font: inherit; color: var(--titulo); background: none; border: 0; padding: 2px 4px; text-decoration: underline; cursor: pointer; }
.trilha b { color: var(--titulo); }
.niveis { display: flex; gap: 2px; margin-left: auto; }
.niveis span { font: 500 11px var(--font-sans); padding: 3px 9px; border-radius: var(--raio-pill); color: var(--texto-suave); background: #fff; }
.niveis span.on { background: var(--titulo); color: #fff; }
.metrica { display: inline-flex; border: 1px solid var(--titulo); border-radius: var(--raio-pill); overflow: hidden; }
.metrica button { font: 500 12px var(--font-sans); border: 0; background: #fff; color: var(--titulo); padding: 5px 12px; cursor: pointer; }
.metrica button.on { background: var(--titulo); color: #fff; }
.leg-g { display: flex; gap: 16px; flex-wrap: wrap; font: var(--text-legenda); color: var(--texto-suave); margin-top: 4px; }
.leg-g i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafico .par { cursor: pointer; }
.drill-aviso { font: var(--text-legenda); color: var(--texto-suave); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .card.max { animation: none; } }
.comp .hbar { cursor: default; border-radius: var(--raio-md); transition: background .15s; }
.comp .hbar:hover i, .comp .hbar:focus-visible i { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .35)); }
.comp .hbar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.grafico g[data-tip]:focus-visible { outline: none; }
.grafico g[data-tip]:focus-visible .barra-g { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.rosca svg.grafico { width: 190px; flex: 0 0 190px; }
.card.max .rosca svg.grafico { width: 380px; flex-basis: 380px; }
.rosca li b { white-space: nowrap; }
.comp .hbar .barra { flex: 1 1 160px; width: auto; }
.comp .hbar .badge { margin-left: 56px; }
.comp .hbar { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px 12px; }
.comp .hbar .badge { grid-column: 2 / 4; justify-self: start; margin-left: 0; }
.grafico .par:focus { outline: none; }
.grafico .par:focus-visible > rect:first-child { stroke: var(--foco); stroke-width: 2; }

/* ================= Visão geral: gráfico com rótulo no hover e filtro por mês ================= */
.vg .rot, .vg .rot-linha { opacity: 0; transition: opacity .15s, transform .15s; transform: translateY(4px); }
.vg .mes:hover .rot, .vg .mes:hover .rot-linha, .vg .mes:focus-visible .rot, .vg .mes:focus-visible .rot-linha,
.vg .mes.sel .rot, .vg .mes.sel .rot-linha { opacity: 1; transform: none; }
.vg .rot { font-size: 11px; font-weight: 700; } .vg .rot-linha { font-size: 11px; }
.vg .mes { cursor: pointer; outline: none; }
.vg .mes:hover .barra-g, .vg .mes:focus-visible .barra-g, .vg .mes.sel .barra-g { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.vg .mes:focus-visible .alvo { stroke: var(--foco); stroke-width: 2; }
.vg .ponto { transition: r .15s; transform-box: fill-box; transform-origin: center; }
.vg .mes:hover .ponto, .vg .mes.sel .ponto { r: 6; }
.vg .eixo-mes { font: 500 12px var(--font-sans); fill: var(--texto); }
.vg .eixo-ano { font: 400 10px var(--font-sans); fill: var(--texto-suave); }
.vg .mes.sel .eixo-mes { fill: var(--titulo); font-weight: 700; }
.vg.filtrado .mes:not(.sel) .barra-g { opacity: .3; }
.vg.filtrado .mes:not(.sel) .ponto { opacity: .4; }
.vg .mes.sel .alvo { fill: rgba(24, 82, 38, .06); }
.anima .vg .ponto { animation: pop .4s cubic-bezier(.2, .8, .2, 1.4) both; animation-delay: calc(1s + var(--i) * .06s); }
.anima .vg .linha-t { stroke-dasharray: 1200; animation: traca 1.8s .4s ease-out both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.chip-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 12px; font: var(--text-corpo-pequeno); color: var(--texto); }
.chip-filtro b { color: var(--titulo); }
.chip-filtro .btn { cursor: pointer; }
.filtros .campo.ativo { border-color: var(--titulo); box-shadow: inset 0 0 0 1px var(--titulo); }
.kpi.filtrado .v { animation: sobe .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .anima .vg .ponto, .anima .vg .linha-t, .kpi.filtrado .v { animation: none; } }

/* ================= análise automática no rodapé dos cards (retrátil: abre no hover, por cima do card) ================= */
.card.tem-analise { display: flex; flex-direction: column; position: relative; }
.card.tem-analise:hover, .card.tem-analise:focus-within { z-index: 6; }
.analise { margin-top: auto; padding-top: 14px; position: relative; }
.analise-barra { width: 100%; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d6d6d6; border-radius: var(--raio-md);
  padding: 7px 12px; font: 700 12px var(--font-sans); color: var(--titulo); cursor: pointer; text-align: left; min-height: 38px; }
.analise-barra svg, .analise-cab svg { width: 16px; height: 16px; flex: 0 0 16px; }
.analise-barra:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.analise-resumo { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-left: 4px; }
.analise-resumo .badge { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.analise-seta { margin-left: auto; color: var(--texto-suave); transition: transform .2s; }
.analise-pop { position: absolute; left: 0; right: 0; bottom: 37px; z-index: 7; background: #fff; border: 1px solid var(--titulo); border-radius: var(--raio-md);
  box-shadow: 0 -8px 24px rgba(29, 29, 27, .18); max-height: 70vh; overflow: auto;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.analise:hover .analise-pop, .analise.aberto .analise-pop, .analise:focus-within .analise-pop {
  opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s, visibility 0s; }
.analise:hover .analise-seta, .analise.aberto .analise-seta { transform: rotate(180deg); }
.analise-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; color: var(--titulo); font: 700 13px var(--font-sans); }
.analise-cab span { font: 400 11px var(--font-sans); color: var(--texto-suave); }
.analise-lista { list-style: none; margin: 0; padding: 4px 14px; }
.analise-lista li { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid #ededed;
  font: var(--text-corpo-pequeno); color: var(--texto); text-align: left; }
.analise-lista li:last-child { border-bottom: 0; }
.analise-lista .badge { justify-self: start; white-space: nowrap; }
.badge.proj { color: var(--titulo); background: #e8f1ea; }
.analise-meta { margin: 0; padding: 6px 14px 10px; border-top: 1px dashed #d6d6d6; font: 400 10.5px/1.5 var(--font-sans); color: var(--texto-suave); text-align: left; }
.analise-lista li.mes-sel { background: #f3f8f4; margin: 0 -14px; padding: 7px 14px; }
@media (prefers-reduced-motion: reduce) { .analise-pop, .analise-seta { transition: none; } }
.analise:hover .analise-barra, .analise.aberto .analise-barra { border-color: var(--titulo); border-top-left-radius: 0; border-top-right-radius: 0; }
.analise-pop { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* maximizar: tem prioridade sobre o position:relative dos cards com análise/maximizar */
.card.max, .card.tem-max.max, .card.tem-analise.max { position: fixed; inset: 24px; z-index: 50; display: flex; flex-direction: column; }
.card.max .analise { position: sticky; bottom: 0; }
.card.max .grafico.vg, .card.max svg.grafico { max-height: calc(100vh - 260px); }
.card.max #drill .grafico { max-height: calc(100vh - 300px); }
.card.max .comp { font-size: 16px; } .card.max .comp .barra.larga { height: 22px; }
.card.max .vg { max-width: 1200px; margin: 0 auto; }
.card.max .comp .hbar { margin: 36px 0; font-size: 18px; } .card.max .comp .barra.larga { height: 40px; border-radius: 10px; } .card.max .comp .barra i { border-radius: 10px; }

/* linhas animadas do menu: só no espaço livre entre o menu e o cartão do usuário (nunca sobre os botões) */
.lateral .menu { flex: 0 0 auto; }
.espaco-grafismo { flex: 1 1 auto; position: relative; overflow: hidden; min-height: 0; pointer-events: none; }
.espaco-grafismo .grafismo { left: -60px; bottom: -20px; }
.menu-recolhido .espaco-grafismo .grafismo { display: none; }

/* ================= Visão geral: infográfico de perigo (semicírculo + rótulos com pictograma) ================= */
.ig .ig-trilha { fill: none; stroke: #e3e3e3; }
.ig .ig-arco { fill: none; transition: stroke-width .15s, filter .15s; }
.ig .ig-linha { fill: none; stroke-width: 1.6; }
.ig .ig-cartao { fill: #fff; stroke: #e3e3e3; transition: stroke .15s; }
.ig .ig-nome { font: 700 11.5px var(--font-sans); fill: var(--titulo); letter-spacing: .3px; }
.ig .ig-info { font: 400 10.5px var(--font-sans); fill: var(--texto-suave); }
.ig .ig-ton { font: 800 15px var(--font-sans); }
.ig .ig-pct { font: 700 11px var(--font-sans); fill: #fff; }
.ig .ig-total { font: 800 20px var(--font-sans); fill: var(--titulo); }
.ig .ig-total-rot { font: 400 10px var(--font-sans); fill: var(--texto-suave); }
.ig .ig-item { cursor: pointer; outline: none; }
.ig:hover .ig-item:not(:hover) { opacity: .45; }
.ig .ig-item { transition: opacity .15s; }
.ig .ig-item:hover .ig-arco, .ig .ig-item:focus-visible .ig-arco { stroke-width: 18; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.ig .ig-item:hover .ig-cartao, .ig .ig-item:focus-visible .ig-cartao { stroke: var(--titulo); stroke-width: 1.5; }
.ig .ig-item:focus-visible .ig-cartao { stroke: var(--foco); stroke-width: 2; }
.anima .ig .ig-arco { stroke-dasharray: var(--comp) 2000; animation: ig-traca 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i) * .1s); }
.anima .ig .ig-linha, .anima .ig .ig-cartao, .anima .ig text, .anima .ig .ig-item > svg, .anima .ig .ig-item > rect, .anima .ig .ig-item > circle {
  animation: sobe .5s ease-out both; animation-delay: calc(1s + var(--i) * .08s); }
.ig .ig-item > .ig-arco { animation-name: ig-traca; }
@keyframes ig-traca { from { stroke-dasharray: 0 2000; } }
.card.tem-max .cab-card { padding-right: 46px; }
@media (prefers-reduced-motion: reduce) { .anima .ig * { animation: none !important; } }
.ig .ig-ton { fill: var(--titulo); }
.ig .ig-pct { fill: var(--titulo); }
.ig .ig-total { font-size: 17px; }

/* ================= Perigo e fichas: cartões agrupados (substitui o favo de mel) ================= */
.sr-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cards-perigo { margin-top: 16px; }
.grupos-perigo { display: grid; grid-template-columns: 5fr 3fr; gap: 16px; }
.grupo-perigo { background: #fff; border-radius: var(--raio-lg); padding: 14px; border-top: 4px solid var(--cor-g); }
.grupo-perigo.per { --cor-g: #b3261e; } .grupo-perigo.nper { --cor-g: #137845; }
.grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.grupo-cab b { font: 700 14px var(--font-sans); color: var(--titulo); }
.grupo-cab span { font: var(--text-legenda); color: var(--texto-suave); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 10px 18px;
  border: 1.5px solid #e3e3e3; border-radius: var(--raio-lg); background: #fff; text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s; animation: sobe .5s ease-out both; animation-delay: calc(.1s + var(--i) * .06s); }
.pcard:hover, .pcard:focus-visible { transform: translateY(-3px); border-color: var(--cor); box-shadow: 0 8px 16px rgba(29, 29, 27, .12); outline: none; }
.pcard:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pcard .picto { margin-bottom: 6px; }
.pcard-rot { font: 700 12px var(--font-sans); letter-spacing: .5px; color: var(--texto); }
.pcard-tit { font: 400 10.5px/1.3 var(--font-sans); color: var(--texto-suave); min-height: 27px; }
.pcard-ton { font: 800 22px var(--font-sans); color: var(--cor); margin-top: 4px; }
.pcard-info { font: var(--text-legenda); color: var(--texto-suave); }
.pcard-pct { font: 700 11px var(--font-sans); background: var(--cor); color: #fff; border-radius: var(--raio-pill); padding: 2px 10px; margin-top: 4px; }
.pcard-uf { font: var(--text-legenda); color: var(--texto-suave); }
.pcard-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #ededed; }
.pcard-barra i { display: block; height: 100%; width: var(--pct); background: var(--cor); transform-origin: left; animation: estica 1.1s .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 1100px) { .grupos-perigo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard-barra i { animation: none; } }
.cards-perigo { padding-top: 62px; }
.grupos-perigo { grid-template-columns: 5fr 3fr; }
.grupo-perigo.per .pcards { grid-template-columns: repeat(5, 1fr); } .grupo-perigo.nper .pcards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1300px) { .grupo-perigo.per .pcards, .grupo-perigo.nper .pcards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.pcard .picto { min-width: 0; width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; margin: 0 auto 6px; padding: 0; }
.pcard .picto svg { flex: 0 0 64px; }

/* Detalhe por perigo: coluna Grupo de produto */
td.col-grupos { text-align: left; max-width: 560px; }
.chips-grupo { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.chip-grupo { font: 400 11px var(--font-sans); color: var(--texto); background: #f1f5f2; border: 1px solid #dbe7de; border-radius: var(--raio-pill); padding: 2px 9px; white-space: nowrap; cursor: default; }
.chip-grupo b { font-weight: 700; color: var(--titulo); }
.chip-grupo:hover { border-color: var(--titulo); }

/* ================= filtros ativos (bi.js) ================= */
.campo.campo-sel { display: flex; flex-direction: column; cursor: pointer; position: relative; }
.campo-sel select { font: 400 14px var(--font-sans); color: var(--texto); border: 0; background: transparent; padding: 0 18px 0 0; margin: 0; appearance: none; -webkit-appearance: none;
  cursor: pointer; max-width: 190px; text-overflow: ellipsis; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--titulo) 50%), linear-gradient(135deg, var(--titulo) 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 2px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo-sel:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.campo-sel.ativo { border-color: var(--titulo); box-shadow: inset 0 0 0 1px var(--titulo); background: #f3f8f4; }
.campo-sel.ativo select { color: var(--titulo); font-weight: 700; }
.filtros .limpar { cursor: pointer; }
.chips-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; font: var(--text-corpo-pequeno); color: var(--texto-suave); }
.chips-filtro[hidden] { display: none; }
.chip-ativo { font: 500 12px var(--font-sans); color: var(--titulo); background: #fff; border: 1px solid var(--titulo); border-radius: var(--raio-pill); padding: 3px 10px; cursor: pointer; }
.chip-ativo:hover { background: var(--titulo); color: #fff; } .chip-ativo:hover b { color: #fff; }
.chip-ativo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.vazio-filtro { color: var(--texto-suave); font: var(--text-corpo-pequeno); padding: 18px; text-align: center; }
tr.linha-sel td { background: #f3f8f4; }
.pcard.sel { border-color: var(--cor); box-shadow: inset 0 0 0 2px var(--cor); }
.pcard.apagado { opacity: .45; }
.pcard.apagado:hover { opacity: 1; }
.pcard-sel { position: absolute; top: 8px; right: 8px; font: 700 10px var(--font-sans); color: #fff; background: var(--cor); border-radius: var(--raio-pill); padding: 2px 8px; }
.legenda-perigo.apagado { opacity: .4; }
.aviso-sel { margin: 8px 0 10px; }
.an-filtro { font: 400 10.5px var(--font-sans); color: var(--texto-suave); margin-left: 6px; white-space: nowrap; }

/* maximizar dentro de abas: a animação de entrada da aba deixa um transform, que prenderia o card "fixed" dentro da aba */
body.tem-max .aba-conteudo, body.tem-max .aba-conteudo * { animation: none !important; }
body.tem-max .aba-conteudo, body.tem-max main section:has(.card.max) { transform: none !important; }
.card.max.cards-perigo { padding-top: 70px; }
.card.max .grupos-perigo { grid-template-columns: 5fr 3fr; }
.card.max .pcard .picto, .card.max .pcard .picto svg { width: 84px; height: 84px; flex-basis: 84px; }
.card.max .pcard-ton { font-size: 28px; }
.card.max.cards-perigo { padding-top: 24px; }
.card.max .sr-titulo { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 18px; }

/* ================= Ficha de controle com dados reais + pictogramas clicáveis ================= */
.legenda-perigo[data-p] { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; border: 1.5px solid transparent; }
.legenda-perigo[data-p]:hover { transform: translateY(-2px); border-color: #c9d6cc; }
.legenda-perigo[data-p]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.legenda-perigo.sel { border-color: var(--titulo); box-shadow: inset 0 0 0 1px var(--titulo); background: #f3f8f4; }
.ficha-resumo { display: block; font: var(--text-legenda); color: var(--texto-suave); margin-top: 2px; }
.ficha-residuos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 196px; overflow: auto; }
.res-btn { text-align: left; font: 400 12px var(--font-sans); color: var(--texto); background: #fff; border: 1px solid #dbe2dc; border-radius: var(--raio-md); padding: 6px 10px; cursor: pointer; }
.res-btn span { color: var(--texto-suave); font-size: 11px; white-space: nowrap; }
.res-btn:hover { border-color: var(--titulo); }
.res-btn.sel { border-color: var(--titulo); box-shadow: inset 0 0 0 1px var(--titulo); background: #f3f8f4; }
.res-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ficha .caixa span { display: block; font: var(--text-legenda); color: var(--texto-suave); margin-top: 3px; }
.ficha .caixa b small { font-weight: 400; color: var(--texto-suave); }
#ficha-real { animation: sobe .3s ease-out; }
/* Detalhe por perigo: pictograma maior */
td.col-picto .picto { gap: 12px; } td.col-picto .picto svg { width: 44px; height: 44px; } td.col-picto .picto b { font-size: 13px; }

/* ================= menu: Painéis / Administração em degradê azul-turquesa ================= */
.lateral .grupo { background: linear-gradient(90deg, #e3f9fe 0%, #a6e9f9 45%, #6fd6f2 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; display: inline-block; }
.menu-recolhido .lateral .grupo { -webkit-text-fill-color: initial; background: var(--verde-lettering); display: block; }
.ficha.nper .ficha-topo { background: #137845; } .ficha.p-inerte .ficha-topo { background: #0d6eb5; } .ficha.p-rcc .ficha-topo { background: #5c5c5c; }
.ficha-topo .ficha-resumo { color: #fff; opacity: .92; }
/* Evolução da venda (Visão geral): degradê igual ao infográfico de perigo */
.card:has(.vg) .leg-g span:nth-child(1) i { background: linear-gradient(0deg, #137845, #6eb869) !important; }
.card:has(.vg) .leg-g span:nth-child(2) i { background: linear-gradient(90deg, #0d6eb5, #3bbeee) !important; }
.vg .rot-linha { fill: #0d6eb5; }

/* Venda de resíduos: aviso de consolidação e Pareto (nível Resíduo) */
.aviso-consolida { background: #eef6fb; border: 1px solid #b9dcef; color: var(--texto); border-radius: var(--raio-md); padding: 8px 12px; margin: 8px 0 4px; font: var(--text-corpo-pequeno); }
.aviso-consolida b { color: #0d6eb5; }
.grafico .par-tit { font: 700 11px var(--font-sans); fill: var(--titulo); }
.grafico .par-rot { font: 700 10px var(--font-sans); paint-order: stroke; stroke: #ededed; stroke-width: 3px; }
.card.max .grafico .par-rot { stroke: #fff; }
.leg-g i.leg-linha { width: 18px; height: 3px; border-radius: 2px; vertical-align: 3px; }
.leg-g i.leg-linha.tracejada { background: repeating-linear-gradient(90deg, #a14d00 0 5px, transparent 5px 9px); }

/* maximizar: limitar a altura só do desenho (svg), nunca da caixa — senão legenda/textos transbordam por cima do que vem depois */
.card.max div.grafico { max-height: none !important; overflow: visible; }
.card.max #drill svg.grafico { max-height: calc(100vh - 340px); width: 100%; }
.card.max .analise { position: static; }

/* ================= filtros de múltipla escolha ================= */
.campo-multi { position: relative; }
.multi-btn { font: 400 14px var(--font-sans); color: var(--texto); background: transparent; border: 0; padding: 0 20px 0 0; margin: 0; cursor: pointer; text-align: left;
  max-width: 190px; min-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--titulo) 50%), linear-gradient(135deg, var(--titulo) 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 2px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.multi-btn:focus-visible { outline: none; }
.campo-multi:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.campo-multi.ativo .multi-btn { color: var(--titulo); font-weight: 700; }
.multi-pop { position: absolute; top: calc(100% + 6px); left: -1px; z-index: 30; width: 300px; max-width: 86vw; background: #fff; border: 1px solid var(--titulo);
  border-radius: var(--raio-md); box-shadow: 0 10px 24px rgba(29, 29, 27, .18); padding: 8px; text-transform: none; letter-spacing: normal; }
.multi-busca input { width: 100%; box-sizing: border-box; font: 400 13px var(--font-sans); border: 1px solid #b5b5b5; border-radius: var(--raio-md); padding: 6px 9px; }
.multi-busca input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.multi-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 2px; }
.multi-conta { font: var(--text-legenda); color: var(--texto-suave); }
.multi-limpar { font: 500 12px var(--font-sans); color: var(--titulo); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.multi-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.multi-lista label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font: 400 13px/1.35 var(--font-sans); color: var(--texto); }
.multi-lista label:hover { background: #f1f5f2; }
.multi-lista label.on { background: #e8f1ea; color: var(--titulo); font-weight: 500; }
.multi-lista input { accent-color: var(--titulo); width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 16px; }
.multi-lista input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.multi-vazio { font: var(--text-legenda); color: var(--texto-suave); padding: 8px; }
/* a lista de filtros abre por cima dos cards (os cards animados criam camadas próprias) */
.filtros { position: relative; z-index: 25; }

/* infográfico de perigo sem link: o item só mostra a dica */
.ig .ig-item { cursor: default; }
/* Status de recebimento dos MTRs / emissão dos CDF: degradê + animação igual ao infográfico */
.barra.ig-barra { height: 12px; border-radius: 6px; background: #e3e3e3; overflow: visible; }
.barra.ig-barra i { border-radius: 6px; transform-origin: left; transition: filter .15s, height .15s;
  animation: ig-cresce 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i) * .1s); }
tr.st-linha td { transition: background .15s; }
tr.st-linha:hover td { background: #f3f8f4; }
tr.st-linha:hover .barra.ig-barra i { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
tr.st-linha td:first-child .badge { animation: sobe .5s ease-out both; animation-delay: calc(.1s + var(--i) * .08s); }
@keyframes ig-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .barra.ig-barra i, tr.st-linha td:first-child .badge { animation: none; } }

/* aba CDF: os seis indicadores em uma única linha (cards mais estreitos) */
.kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpis.seis .kpi { padding: 16px 14px; display: flex; flex-direction: column; }
.kpis.seis .kpi small { font-size: 10.5px; letter-spacing: .3px; line-height: 1.3; min-height: 2.6em; }
.kpis.seis .kpi .v { font-size: 34px; line-height: 40px; margin: 2px 0 6px; }
.kpis.seis .kpi .apoio { margin-top: auto; }
.kpis.seis .kpi .badge { font-size: 10.5px; padding: 2px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
@media (max-width: 1250px) { .kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpis.seis .kpi .badge { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; text-align: left; }

/* ================= Venda de resíduos: cores e animação do infográfico de perigo ================= */
/* barras do drill crescendo em sequência */
.anima #drill rect.barra-g { animation: cresce .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i, 0) * .07s); }
/* Pareto se desenhando e pontos surgindo */
.anima #drill .par-linha { stroke-dasharray: 100; animation: pv-traca 1.2s .5s ease-out both; }
.anima #drill .pareto circle { transform-box: fill-box; transform-origin: center; animation: pop .35s 1.4s both; }
.anima #drill .pareto text { animation: sobe .4s 1.5s ease-out both; }
@keyframes pv-traca { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* rosca: cada fatia se desenha em sequência, como os arcos do infográfico */
.anima .rosca path.seg { stroke-dasharray: 100; animation: pv-traca .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i) * .15s); }
.rosca .seg:hover { stroke-width: 38; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.anima .rosca li { animation: sobe .45s ease-out both; animation-delay: calc(.3s + var(--i) * .1s); }
.rosca li:hover { background: #f3f8f4; }
/* comparativo anual: barras em degradê crescendo uma a uma */
.comp .barra.ig-barra { height: 14px; }
.comp .barra.ig-barra i { animation: ig-cresce 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i) * .15s); }
.comp .hbar:hover .barra.ig-barra i { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.card.max .comp .barra.ig-barra { height: 40px; }
@media (prefers-reduced-motion: reduce) { .anima #drill rect.barra-g, .anima #drill .par-linha, .anima #drill .pareto *, .anima .rosca path.seg, .anima .rosca li, .comp .barra.ig-barra i { animation: none !important; } }
/* rótulos do Pareto só aparecem (sem deslizar), para não cruzar pontos e valores durante a animação */
.anima #drill .pareto text { animation: pv-aparece .4s 1.5s ease-out both; }
@keyframes pv-aparece { from { opacity: 0; } to { opacity: 1; } }
/* rosca com todos os grupos: legenda mais compacta */
.rosca ul li { padding: 4px 0; }

/* relatórios: busca de verdade, botões de documento que baixam o PDF, aviso de erro de carga, tela carregando */
input.campo.busca { font: 400 13px var(--font-sans); color: var(--texto); min-width: 260px; }
input.campo.busca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
button.doc { font: inherit; cursor: pointer; border: 0; }
button.doc:hover { filter: brightness(.92); } button.doc:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
button.doc[disabled] { opacity: .6; cursor: wait; }
.erro-carga { background: #fdecea; border: 1px solid #f1b8b3; color: var(--texto); border-radius: var(--raio-md); padding: 10px 14px; margin: 12px 0; }
.erro-carga b { color: var(--status-erro); }
body.carregando main > :not(.topo):not(.filtros):not(.erro-carga) { visibility: hidden; }
body.carregando main::after { content: "Carregando dados…"; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 500 15px var(--font-sans); color: var(--titulo);
  background: #fff; border: 1px solid #d6d6d6; border-radius: var(--raio-md); padding: 14px 22px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
body.carregando .filtros { visibility: hidden; }

/* ================= interface oficial: administração ================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sql-ed { display: block; width: 100%; box-sizing: border-box; min-height: 440px; margin: 10px 0 14px; resize: vertical; tab-size: 4;
  font: 400 12px/1.55 Consolas, "Cascadia Mono", "Courier New", monospace; color: #1d1d1b; background: #fff; border: 1px solid #b5b5b5; border-radius: var(--raio-md); padding: 12px; }
.sql-ed:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
#adm-etl .abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#adm-etl .abas .aba { font: 500 13px var(--font-sans); background: #fff; color: var(--titulo); border: 1px solid var(--titulo); border-radius: var(--raio-pill); padding: 7px 14px; cursor: pointer; }
#adm-etl .abas .aba.ativa { background: var(--titulo); color: #fff; }
#adm-etl .abas .aba:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
#adm-etl button.btn, #adm-atualizacao button.btn, #adm-usuarios button.btn { font: inherit; cursor: pointer; }
#adm-etl button[disabled], #adm-atualizacao button[disabled] { opacity: .6; cursor: wait; }
.chips-hora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips-hora input[type=time] { font: 400 13px var(--font-sans); border: 1px solid #b5b5b5; border-radius: var(--raio-md); padding: 4px 6px; }
.chip-x { border: 0; background: none; color: var(--status-erro); font: 700 14px var(--font-sans); cursor: pointer; padding: 0 2px; }
#cfg-ativo { width: 18px; height: 18px; accent-color: var(--titulo); }
#cfg-int { width: 90px; font: 400 14px var(--font-sans); }
.job .grade3 b { word-break: break-word; }

button.doc { font: var(--text-rotulo); line-height: inherit; }

/* relatório maximizado: a tabela ocupa a altura da tela, com cabeçalho fixo e rolagem própria */
.card.max .tab-wrap.rolagem { max-height: none; flex: 1 1 auto; min-height: 0; }
.card.max[data-max] { display: flex; flex-direction: column; }
.card.max[data-max] > .tab-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.card.max[data-max] .cab-card .acoes { margin-right: 8px; }

/* Venda de resíduos: rótulos das barras no formato do infográfico de perigo (pílula com contorno em degradê) */
.grafico .rot-pill rect { fill: #fff; stroke-width: 2; }
.grafico .rot-pill text { font: 700 10.5px var(--font-sans); fill: var(--titulo); }
.anima #drill .rot-pill { animation: pv-aparece .4s ease-out both; animation-delay: calc(.6s + var(--i, 0) * .07s); }

/* Atualização imediata: barra de progresso (degradê do infográfico) */
.progresso { margin-top: 14px; }
.progresso .prog-barra { height: 16px; border-radius: 8px; background: #e3e3e3; overflow: hidden; }
.progresso .prog-barra i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #137845, #6eb869);
  transition: width .6s ease; animation: none !important; transform: none !important; position: relative; overflow: hidden; }
.progresso:not(.ok):not(.erro) .prog-barra i::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: prog-brilho 1.4s linear infinite; }
.progresso.ok .prog-barra i { background: linear-gradient(90deg, #137845, #56ae31); }
.progresso.erro .prog-barra i { background: linear-gradient(90deg, #b3261e, #e06a62); }
.progresso .prog-txt { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font: var(--text-corpo-pequeno); color: var(--texto); }
.progresso .prog-txt b { font: 800 20px var(--font-sans); color: var(--titulo); }
.progresso.erro .prog-txt b { color: var(--status-erro); }
.prog-lin { list-style: none; padding: 0; margin: 10px 0 0; font: var(--text-corpo-pequeno); }
.prog-lin li { padding: 4px 0; }
@keyframes prog-brilho { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .progresso .prog-barra i::after { animation: none; } .progresso .prog-barra i { transition: none; } }
.progresso .prog-txt { justify-content: flex-start; }

/* Visão geral: Status de recebimento dos MTRs / emissão dos CDF — tabela ocupa a altura do card + coluna % com mini rosca */
.card.st-card > .tab-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.card.st-card > .tab-wrap > table { flex: 1 1 auto; height: 100%; }
.card.st-card tbody td { padding-top: 6px; padding-bottom: 6px; }
.card.st-card th.th-pct, .card.st-card td.col-rosca { width: 64px; text-align: center; }
.mini-rosca { display: block; margin: 0 auto; overflow: visible; }
.mini-rosca .mr-trilha { fill: none; stroke: #e3e3e3; stroke-width: 5; }
.mini-rosca .mr-arco { fill: none; stroke-width: 5; stroke-linecap: round; transition: filter .15s; }
.mini-rosca text { font: 700 10px var(--font-sans); fill: var(--titulo); }
tr.st-linha:hover .mini-rosca .mr-arco { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.anima .mini-rosca .mr-arco { animation: mr-gira 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i) * .1s); }
.anima .mini-rosca text { animation: pv-aparece .4s ease-out both; animation-delay: calc(.6s + var(--i) * .1s); }
@keyframes mr-gira { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--v); } }
@media (prefers-reduced-motion: reduce) { .anima .mini-rosca .mr-arco, .anima .mini-rosca text { animation: none; } }
.card.st-card > table { flex: 1 1 auto; height: 100%; margin-bottom: 4px; }
/* tela estreita: a coluna % (mini rosca) já mostra a participação — esconde as barras para a tabela caber no card */
@media (max-width: 1480px) { .card.st-card th:nth-child(3), .card.st-card td:nth-child(3) { display: none; } }
@media (max-width: 1320px) { .card.st-card td:first-child .badge { white-space: normal; text-align: center; line-height: 1.3; } }

/* status: figura por status + mini rosca maior (56 px) */
.card.st-card th.th-pct, .card.st-card td.col-rosca { width: 72px; }
.mini-rosca .mr-trilha, .mini-rosca .mr-arco { stroke-width: 6; }
.mini-rosca text { font: 800 12px var(--font-sans); }
.st-cel { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.st-fig { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1.5px solid currentColor; }
.st-fig svg { width: 20px; height: 20px; }
.st-fig.st-ok { color: var(--status-sucesso); } .st-fig.st-alerta { color: var(--status-alerta); } .st-fig.st-info { color: var(--status-info); }
.st-fig.st-erro { color: var(--status-erro); } .st-fig.st-neutro { color: #5c5c5c; }
tr.st-linha:hover .st-fig { box-shadow: 0 3px 6px rgba(0, 0, 0, .18); }
.anima .st-fig { animation: pop .4s cubic-bezier(.2, .8, .2, 1.4) both; animation-delay: calc(.15s + var(--i) * .08s); }
@media (max-width: 1320px) { .st-fig { flex-basis: 28px; width: 28px; height: 28px; } .st-fig svg { width: 17px; height: 17px; } .st-cel { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .anima .st-fig { animation: none; } }
/* participação: coluna flexível (sem os 40% fixos), barra encolhe até 44 px para a tabela caber com as figuras */
.card.st-card th:nth-child(3) { width: auto !important; }
.card.st-card td:nth-child(3) { min-width: 44px; padding-left: 6px; padding-right: 6px; }
.card.st-card td:nth-child(3) .barra { min-width: 44px; }
.card.st-card td:nth-child(2), .card.st-card th:nth-child(2) { padding-left: 4px; padding-right: 4px; }
/* barras dos status: cresce pela largura (a animação por transform falhava na pintura dentro da tabela) */
.card.st-card .barra.ig-barra i { transform: none !important; animation-name: ig-largura !important; }
@keyframes ig-largura { from { width: 0; } }
.card.st-card .barra.ig-barra i { animation: none !important; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .card.st-card .barra.ig-barra i { transition: none; } }
.card.st-card .barra.ig-barra i { animation: none !important; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .card.st-card .barra.ig-barra i { transition: none; } }
.card.st-card td:first-child .badge { white-space: normal; max-width: 150px; line-height: 1.3; text-align: left; }
.card.st-card td:first-child .badge { max-width: none; }
/* status (Visão geral): selo do status com fonte maior */
.card.st-card td:first-child .badge { font-size: 14px; padding: 5px 12px; line-height: 1.3; }
.card.st-card td:nth-child(2) { font-size: 15px; }
@media (max-width: 1320px) { .card.st-card td:first-child .badge { font-size: 13px; padding: 4px 10px; } }
/* Venda de resíduos: rótulo das barras só em negrito (sem pílula) */
.grafico .rot-pill rect { display: none; }
.grafico .rot-pill text { font: 800 11.5px var(--font-sans); fill: var(--titulo); }
/* rótulos: período atual em verde-escuro, ano anterior em azul */
.grafico .rot-pill.rot-ant text { fill: var(--azul-escuro, #0d6eb5); }

/* Fonte de dados: campo "Ano inicial" acima do editor SQL */
.etl-ano { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 14px; }
.etl-ano .campo { flex: 0 0 auto; min-width: 140px; }
.etl-ano .legenda, .etl-ano p { margin: 0; flex: 1 1 260px; }

/* =========================================================================== Responsivo por tipo de aparelho
   até 1366 px  notebook pequeno e tablet deitado: indicadores ajustam a fonte à largura do card
   até 1024 px  tablet em pé e celular: menu vira gaveta (barra do topo com ☰), quadros em uma coluna,
                tabelas rolam dentro do card, abas rolam para o lado
   até 600 px   celular: 2 indicadores por linha, espaçamentos menores
   toque        alvos maiores, campos com 16 px (o iPhone não dá zoom), sem efeitos de passar o mouse */
.barra-movel, .fundo-menu { display: none; }

@media (max-width: 1366px) {
  .kpis, .kpis.cinco, .kpis.seis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kpi { container-type: inline-size; }
  .kpis .kpi .v, .kpis.cinco .kpi .v, .kpis.seis .kpi .v { font-size: clamp(20px, 15cqi, 34px); line-height: 1.2; }
  .favo-area { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .app, .menu-recolhido .app { grid-template-columns: minmax(0, 1fr); }
  .barra-movel { display: flex; position: sticky; top: 0; z-index: 40; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px;
    background: var(--verde-lettering); color: #fff; }
  .barra-movel img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
  .bm-txt { display: flex; flex-direction: column; min-width: 0; }
  .bm-txt b { font: var(--text-botao); font-weight: 700; color: #fff; }
  .bm-txt small { font: var(--text-legenda); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .abre-menu { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #fff; background: transparent; color: #fff;
    display: grid; place-items: center; cursor: pointer; padding: 0; }
  .abre-menu svg { width: 22px; height: 22px; }
  .abre-menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(300px, 86vw); min-height: 0; overflow-y: auto;
    transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .menu-aberto .lateral { transform: none; visibility: visible; transition: transform .25s ease; }
  .lateral .recolher { display: none; }
  .fundo-menu { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(29, 29, 27, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .menu-aberto .fundo-menu { opacity: 1; pointer-events: auto; }
  .menu-aberto body { overflow: hidden; }

  .conteudo { padding: 20px 24px 32px; }
  .topo { flex-wrap: wrap; align-items: flex-start; }
  .topo.capa { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .topo.capa .atualiz { border-radius: var(--raio-md); }
  .linha2, .linha2.inv, .linha2.etl, .grade-perigo, .grupos-perigo, .card.max .grupos-perigo { grid-template-columns: minmax(0, 1fr); }
  .grupo-perigo.per .pcards, .grupo-perigo.nper .pcards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .cab-card { flex-wrap: wrap; align-items: flex-start; }
  .acoes, .acoes-esq { flex-wrap: wrap; }
  .card:not(.kpi) { overflow-x: auto; }
  .card.st-card { overflow-x: auto; }
  .abas, .abas-painel { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: 4px; }
  .aba, .abas-painel > * { flex: 0 0 auto; white-space: nowrap; }
  .card.max, .card.tem-max.max, .card.tem-analise.max { inset: 8px; }
  .card.max .rosca svg, .card.max .rosca svg.grafico { width: min(340px, 80vw); flex-basis: auto; }
}

@media (max-width: 600px) {
  .conteudo { padding: 16px 16px 28px; }
  .card { padding: 16px; }
  .kpis, .kpis.cinco, .kpis.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .topo.capa { padding: 20px; }
  .topo.capa h1, h1 { font-size: 28px; line-height: 34px; }
  .filtros { gap: 8px; margin: 16px 0; }
  .filtros .campo { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filtros .btn { flex: 1 1 100%; text-align: center; }
  .filtros .campo:nth-child(even) .multi-pop { left: auto; right: -1px; }
  .multi-pop { width: min(300px, calc(100vw - 32px)); }
  .rosca { flex-direction: column; align-items: stretch; }
  .rosca svg.grafico { width: min(220px, 70vw); flex: 0 0 auto; align-self: center; }
  .rosca ul { width: 100%; }
  .grade3 { grid-template-columns: minmax(0, 1fr); }
  .analise-lista li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tip-perigo dl { grid-template-columns: minmax(0, 1fr); }
  .btn-max { top: 12px; right: 12px; }
  .card.max, .card.tem-max.max, .card.tem-analise.max { inset: 0; border-radius: 0; }
}

@media (pointer: coarse) {
  .btn, .aba, .item, .sair { min-height: 44px; }
  .btn, .aba { display: inline-flex; align-items: center; justify-content: center; }
  button.doc { min-height: 34px; padding: 6px 12px; }
  .btn-max { width: 40px; height: 40px; }
  select, input, textarea, .multi-btn, .campo-sel select { font-size: 16px; }
  .multi-lista label { min-height: 40px; display: flex; align-items: center; }
  .kpis .card:hover, .legenda-perigo:hover, .item:not(.ativo):hover { transform: none; }
}

/* Usuários: convite, nome editável e link do convite */
.conv-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 14px 0 10px; }
.conv-form .campo { flex: 1 1 200px; display: flex; flex-direction: column; }
.campo-txt input { font: 400 14px var(--font-sans); color: var(--texto); border: 0; background: transparent; padding: 2px 0 0; outline: none; min-width: 0; }
.campo-txt:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.conv-link { display: flex; gap: 8px; margin-top: 10px; }
.conv-link input { flex: 1 1 auto; min-width: 0; font: 400 13px var(--font-sans); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 8px 10px; background: #fff; color: var(--texto); }
.link-nome { font: inherit; color: var(--titulo); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.link-nome:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
#adm-acessos .cab-card .acoes { align-items: flex-end; }
@media (pointer: coarse) { .campo-txt input, .conv-link input { font-size: 16px; } }
#adm-acessos { margin-top: 16px; }
#adm-convites td { white-space: normal; word-break: break-word; }
#adm-convites td:first-child { text-align: left; }