/*
 * painel.css - painel do Início (estilo Power BI), Comparar, Configurações e identificação.
 * Usa as mesmas variáveis de cor de styles.css (tema claro/escuro).
 */

/* ===== Campos de formulário fora da barra de filtros da lista ===== */
.painel-filtros input,
.painel-filtros select,
.tela-config input,
.tela-config textarea,
.dialogo input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    width: 100%
}

.tela-config textarea {
    height: auto;
    padding: 8px 10px;
    resize: vertical
}

.painel-filtros input:focus,
.painel-filtros select:focus,
.tela-config input:focus,
.tela-config textarea:focus,
.dialogo input:focus {
    outline: none;
    border-color: var(--marca-texto);
    box-shadow: 0 0 0 3px var(--marca-suave);
    background: var(--superficie)
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ===== Início ===== */
.hero.hero-compacto {
    margin: 4px auto 18px
}

/* Recentes: as últimas OPs abertas e pesquisas, logo abaixo da pesquisa do início */
.recentes-inicio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px
}

.recentes-titulo {
    color: var(--texto-suave);
    font-weight: 600;
    margin-right: 2px
}

.chip-recente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 230px;
    color: var(--texto)
}

.chip-recente b {
    color: var(--marca-texto);
    font-variant-numeric: tabular-nums
}

.chip-recente span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texto-suave)
}

.chip-recente svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--texto-suave)
}

.painel {
    margin-bottom: 18px
}

/* Segmentadores: uma grade de colunas iguais (quebrar linha não estica ninguém); o filtro com valores
   escolhidos (chips) ocupa duas colunas. No celular vira linha + folha (fim do arquivo). */
.painel-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 12px;
    align-items: end;
    padding: 12px 16px;
    margin-bottom: 8px
}

.painel-filtros .campo {
    min-width: 0
}

/* Filtro de vários valores: chips + campo para adicionar, dentro de uma "caixa" só */
.multi-valores {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 36px;
    padding: 3px 4px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo)
}

.painel-filtros .campo-multi:has(.chip) {
    grid-column: span 2
}

.multi-valores:focus-within {
    border-color: var(--marca-texto);
    box-shadow: 0 0 0 3px var(--marca-suave);
    background: var(--superficie)
}

.multi-valores .chip {
    padding: 2px 8px;
    font-size: 12px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.painel-filtros .multi-valores input {
    flex: 1 1 80px;
    min-width: 80px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    box-shadow: none
}

.painel-filtros .multi-valores input:focus {
    box-shadow: none;
    background: transparent
}

/* No computador o "mais filtros" é só parte da linha (display: contents); a folha e o botão são do celular. */
.painel-filtros-mais {
    display: contents
}

.botao-filtros,
.folha-topo {
    display: none
}

/* Linha embaixo dos filtros: o período e os chips à esquerda; Limpar filtros e Exportar à direita. */
.painel-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    margin: 0 2px 12px
}

.painel-chips {
    flex: 1 1 320px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    min-height: 28px;
    font-size: 13px
}

.painel-acoes {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-left: auto
}

.painel-acoes .painel-exportar {
    height: 32px
}

.botao-mais-filtros {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.botao-mais-filtros svg {
    width: 15px;
    height: 15px
}

.botao-mais-filtros[hidden] {
    display: none
}

/* "Mais filtros" do Início: a segunda linha de filtros abre e fecha deslizando. A altura anima pelo grid
   (0fr -> 1fr); a margem negativa come o espaço entre as linhas enquanto ela está fechada. */
.painel-filtros-extras {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -10px;
    visibility: hidden;
    transition: grid-template-rows var(--tempo-medio) var(--mola), margin-top var(--tempo-medio) var(--mola),
        visibility 0s linear var(--tempo-medio)
}

.painel-filtros-extras.aberto {
    grid-template-rows: 1fr;
    margin-top: 0;
    visibility: visible;
    transition: grid-template-rows var(--tempo-medio) var(--mola), margin-top var(--tempo-medio) var(--mola)
}

.painel-filtros-extras-grade {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 12px;
    align-items: end;
    /* espaço para o anel de foco dos campos não ser cortado */
    margin: -3px;
    padding: 3px
}

.painel-periodo {
    color: var(--texto-suave);
    margin-right: 6px
}

.chip-filtro {
    background: var(--marca-suave);
    border-color: transparent;
    color: var(--marca-texto);
    font-weight: 600;
    cursor: pointer
}

.chip-filtro span {
    margin-left: 4px;
    opacity: .7
}

#painel-visuais {
    transition: opacity .15s
}

#painel-visuais.recarregando {
    opacity: .55;
    pointer-events: none
}

/* Moldura dos visuais */
.grade-visuais {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px
}

.visual {
    position: relative;
    padding: 12px 16px 14px;
    min-width: 0
}

.visual-largo {
    grid-column: 1 / -1
}

.visual-topo {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.visual-topo h3 {
    margin: 0;
    font-size: 15px
}

.visual-controles {
    display: flex;
    gap: 8px;
    align-items: center
}

.segmentos-pequenos {
    height: 30px
}

.segmentos-pequenos .segmento {
    padding: 0 10px;
    font-size: 12.5px;
    align-items: center
}

.menu-visual {
    position: relative
}

.menu-visual summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--texto-suave);
    font-weight: 700
}

.menu-visual summary::-webkit-details-marker {
    display: none
}

.menu-visual summary:hover,
.menu-visual[open] summary {
    background: var(--destaque-hover);
    color: var(--texto)
}

.menu-visual-itens {
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 25;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
    box-shadow: var(--sombra)
}

.menu-visual-itens button {
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-size: 13px
}

.menu-visual-itens button:hover {
    background: var(--destaque-hover)
}

/* "Ver como tabela": troca o gráfico pela tabela com os mesmos números */
.visual-tabela {
    display: none
}

.visual.como-tabela .visual-tabela {
    display: block
}

.visual.como-tabela .visual-corpo {
    display: none
}

/* "Ampliar": o visual ocupa a tela */
.visual.ampliado {
    position: fixed;
    inset: 24px;
    z-index: 60;
    overflow: auto;
    box-shadow: var(--sombra)
}

body.visual-ampliado::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 20, 35, .45)
}

/* ===== KPIs com variação ===== */
/* Indicadores: os números são os cartões (sem um cartão em volta deles, que só somava borda). O título e o
   menu "⋯" ficam em cima; "Ver como tabela" e "Ampliar" devolvem o cartão. */
.visual-kpis {
    padding-bottom: 12px
}

.visual-kpis:not(.como-tabela):not(.ampliado) {
    padding: 0;
    border-color: transparent;
    background: none
}

.visual-kpis:not(.como-tabela):not(.ampliado) > .visual-topo {
    margin-bottom: 8px;
    padding: 0 2px
}

.visual-kpis:not(.como-tabela):not(.ampliado) .visual-topo h3 {
    font-size: 13px;
    color: var(--texto-suave)
}

.visual-kpis:not(.como-tabela):not(.ampliado) .kpi-painel {
    background: var(--superficie);
    border-color: var(--borda);
    box-shadow: var(--sombra-leve)
}

.kpis-painel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px
}

.kpi-painel {
    padding: 10px 12px;
    background: var(--superficie-2);
    border-color: transparent
}

.kpi-painel .valor {
    font-size: 24px
}

.kpi.principal .valor {
    color: var(--marca-texto)
}

.kpi.tem-perda .valor {
    color: var(--cor-perda)
}

.kpi-clicavel {
    cursor: pointer
}

.kpi-clicavel:hover,
.kpi-painel.ativo {
    border-color: var(--marca-texto)
}

.kpi-painel.ativo {
    box-shadow: inset 0 0 0 1px var(--marca-texto)
}

.kpi-variacao {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.kpi-variacao.boa {
    color: var(--cor-nao-excedida)
}

.kpi-variacao.ruim {
    color: var(--cor-excedida)
}

.kpi-variacao.neutra {
    color: var(--texto-suave);
    font-weight: 500
}

/* ===== Ranking e perguntas ===== */
.perguntas-rapidas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px
}

.perguntas-rapidas .chip {
    cursor: pointer
}

.perguntas-rapidas .chip:hover {
    border-color: var(--marca-texto);
    color: var(--marca-texto)
}

.frase-consulta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px
}

.frase-consulta select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--marca-suave);
    color: var(--marca-texto);
    font: inherit;
    font-weight: 600
}

.frase-consulta small {
    flex-basis: 100%
}

button.grafico-linha {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer
}

button.grafico-linha[data-sem-acao] {
    cursor: default
}

.grafico-linha.ativo {
    background: var(--marca-suave)
}

.grafico-rotulo small {
    display: block;
    color: var(--texto-suave);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis
}

.grafico-barra.producao {
    background: var(--marca)
}

/* ===== Legendas (resumo e tendência) ===== */
.legenda-item {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-size: 13px
}

.legenda-item b {
    margin-left: auto
}

.legenda-item small {
    min-width: 46px;
    text-align: right;
    color: var(--texto-suave)
}

.legenda-item:hover,
.legenda-item.ativo {
    background: var(--marca-suave)
}

/* ===== Dispersão ===== */
.grafico-dispersao .media {
    stroke: var(--texto-suave);
    stroke-dasharray: 4 4;
    stroke-width: 1
}

.grafico-dispersao .ponto {
    cursor: pointer
}

.grafico-dispersao {
    display: block;
    width: 100%;
    height: auto
}

.grafico-dispersao circle {
    fill: var(--cor-perda);
    fill-opacity: .55;
    stroke: var(--cor-perda);
    stroke-width: 1.5;
    transition: r .12s
}

.grafico-dispersao .ponto:hover circle,
.grafico-dispersao .ponto:focus circle {
    r: 9;
    fill-opacity: .85
}

.grafico-dispersao .ponto.ativo circle {
    fill: var(--marca);
    stroke: var(--marca);
    fill-opacity: .9
}

.grafico-dispersao .eixo {
    stroke: var(--borda)
}

.grafico-dispersao text {
    fill: var(--texto-suave);
    font-size: 11px
}

.grafico-dispersao .rotulo-ponto {
    fill: var(--texto);
    font-size: 10.5px;
    font-weight: 600
}

/* ===== Mapa de calor ===== */
.matriz-calor {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums
}

.matriz-calor th {
    padding: 4px 6px;
    color: var(--texto-suave);
    font-weight: 600;
    white-space: nowrap
}

.matriz-calor thead th {
    font-size: 11.5px
}

.matriz-calor tbody th {
    text-align: left
}

.matriz-calor td {
    min-width: 46px;
    padding: 6px 4px;
    border-radius: 6px;
    text-align: center;
    background: color-mix(in srgb, var(--cor-perda) calc(var(--intensidade, 0) * 80%), var(--superficie-2));
    cursor: pointer
}

.matriz-calor td:hover,
.matriz-calor td:focus {
    outline: 2px solid var(--marca-texto)
}

.matriz-calor td.vazia {
    background: none;
    color: var(--borda);
    cursor: default
}

/* ===== Lista: selecionar para comparar ===== */
.celula-selecao {
    width: 34px;
    text-align: center
}

.celula-selecao input {
    width: 16px;
    height: 16px;
    cursor: pointer
}

tr.selecionada td {
    background: var(--marca-suave)
}

.barra-comparar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 40;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    align-items: center;
    max-width: calc(100vw - 32px);
    padding: 10px 14px 10px 18px;
    border-radius: 12px;
    background: var(--texto);
    color: var(--superficie);
    box-shadow: var(--sombra)
}

.barra-comparar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.barra-comparar .botao-link {
    color: var(--superficie)
}

/* ===== Comparar ===== */
.form-comparar {
    position: static
}

.form-comparar input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    width: 100%
}

.tabela-comparar th[scope="col"] {
    min-width: 160px
}

.tabela-comparar th[scope="col"] .sub {
    display: block;
    font-weight: 400;
    color: var(--texto-suave)
}

.tabela-comparar tbody th {
    font-weight: 600;
    white-space: nowrap
}

.melhor-valor {
    background: var(--cor-nao-excedida-fundo);
    color: var(--cor-nao-excedida);
    font-weight: 700
}

.celula-comparada {
    display: grid;
    gap: 2px;
    justify-items: start
}

.celula-comparada small {
    color: var(--texto-suave)
}

.mini-barra {
    display: block;
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: var(--cor-neutra-fundo);
    overflow: hidden
}

.mini-barra span {
    display: block;
    height: 100%;
    background: var(--cor-perda)
}

/* ===== Configurações ===== */
.tela-config {
    max-width: 920px
}

.config-secao {
    padding: 14px 18px
}

.config-secao h2 {
    margin: 0 0 6px;
    font-size: 16px
}

.config-secao h3 {
    margin: 16px 0 8px;
    font-size: 14px
}

.config-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 10px
}

.campo-com-sufixo {
    display: flex;
    gap: 6px;
    align-items: center
}

.campo-com-sufixo span {
    color: var(--texto-suave);
    white-space: nowrap
}

.previa-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px
}

.previa-item {
    display: grid;
    gap: 4px;
    justify-items: start;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--superficie-2)
}

.previa-item b {
    font-size: 22px;
    font-variant-numeric: tabular-nums
}

.previa-item .sobe {
    color: var(--cor-excedida);
    font-weight: 600
}

.previa-item .desce {
    color: var(--cor-nao-excedida);
    font-weight: 600
}

.config-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0
}

/* ===== Perguntas frequentes (#/ajuda) ===== */
.tela-faq {
    max-width: 920px
}

.faq-busca {
    display: grid;
    gap: 10px;
    margin-bottom: 14px
}

.faq-busca input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 15px
}

.faq-busca input:focus {
    outline: none;
    border-color: var(--marca-texto);
    box-shadow: 0 0 0 3px var(--marca-suave)
}

.faq-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.faq-grupo {
    padding: 6px 18px 10px;
    margin-bottom: 12px
}

.faq-grupo h2 {
    margin: 10px 0 4px;
    font-size: 16px;
    color: var(--marca-texto)
}

.faq-item {
    border-bottom: 1px solid var(--borda)
}

.faq-item:last-child {
    border-bottom: 0
}

.faq-item summary {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 11px 2px;
    font-weight: 600;
    list-style: none;
    cursor: pointer
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary::before {
    content: "+";
    flex-shrink: 0;
    width: 14px;
    color: var(--acento-texto);
    font-weight: 700
}

.faq-item[open] summary::before {
    content: "−"
}

.faq-item summary:hover {
    color: var(--marca-texto)
}

.faq-resposta {
    padding: 0 2px 12px 24px;
    max-width: 72ch;
    color: var(--texto)
}

.faq-resposta p {
    margin: 0 0 8px
}

.faq-resposta ul {
    margin: 0 0 8px;
    padding-left: 18px
}

.faq-resposta li {
    margin: 3px 0
}

/* Linha "Banco · View / tabela · Colunas" de cada resposta: a origem exata do dado. */
.faq-origem {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--marca);
    border-radius: 4px;
    background: var(--superficie-2);
    font-size: 13px;
    line-height: 1.9
}

.faq-origem-rotulo {
    margin-right: 2px;
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em
}

.faq-origem-rotulo:not(:first-child) {
    margin-left: 10px
}

.faq-resposta code {
    font-size: 12px;
    overflow-wrap: anywhere
}

.faq-origens > summary {
    cursor: pointer;
    list-style: none
}

.faq-origens > summary h2 {
    display: inline;
    font-size: 17px
}

.faq-origens {
    margin-bottom: 16px;
    padding: 14px 18px
}

.faq-banco {
    font-weight: 600;
    color: var(--marca)
}

/* A tabela-mapa (dado → banco → view → colunas) usa a largura toda; no celular, rola de lado. */
.faq-resposta-larga {
    max-width: none
}

.faq-resposta .tabela-rolagem {
    max-width: 100%;
    margin: 0 0 8px
}

.faq-mapa td {
    vertical-align: top;
    font-size: 13px;
    white-space: normal
}

.faq-mapa code {
    white-space: nowrap
}

.faq-item[hidden],
.faq-grupo[hidden] {
    display: none
}

/* ===== Diálogos (instalar aplicativo, arte da OP) ===== */
.dialogo {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra)
}

.dialogo::backdrop {
    background: rgba(1, 25, 50, .5)
}

.dialogo-conteudo {
    display: grid;
    gap: 10px;
    padding: 20px 22px
}

.dialogo-conteudo h2 {
    margin: 0;
    font-size: 18px
}

.dialogo-conteudo p {
    margin: 0
}

/* ===== Indicadores: observação embaixo do número (ex.: perda % embaixo da quantidade perdida) ===== */
.kpi-observacao {
    margin-top: 2px;
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 600
}

/* ===== OPs do filtro (logo abaixo dos indicadores) ===== */
.visual-lista-ops {
    margin-top: 12px
}

.contagem-titulo {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 99px;
    background: var(--marca-suave);
    color: var(--marca-texto);
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

.visual-lista-ops .tabela-expansivel.expandida .tabela-rolagem {
    max-height: 480px;
    overflow: auto
}

/* ===== Perguntas e rankings: "Ver mais" aumenta o quadro ===== */
.ranking-barras.expandido {
    max-height: min(70vh, 720px);
    overflow: auto;
    padding-right: 4px
}

.ranking-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda);
    font-size: 12.5px
}

/* ===== Tabelas: ordenar e filtrar por coluna, como no Excel (tabelas.js) ===== */
th.th-interativo,
th.th-ordenavel {
    cursor: pointer;
    user-select: none;
    white-space: nowrap
}

th.th-interativo:hover,
th.th-ordenavel:hover {
    color: var(--texto)
}

.th-controles {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    vertical-align: middle
}

.th-seta {
    font-size: 9px;
    color: var(--marca-texto);
    margin-left: 3px
}

.th-funil {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--texto-suave);
    opacity: .45;
    cursor: pointer
}

.th-funil svg {
    width: 13px;
    height: 13px
}

/* Com mouse, o funil só aparece ao passar no título (ou se a coluna está filtrada): menos ruído na tabela.
   No toque não existe "passar o mouse", então ele fica sempre à vista. */
@media (hover: hover) {
    .th-funil {
        opacity: 0
    }

    th:focus-within .th-funil {
        opacity: 1
    }
}

th:hover .th-funil,
.th-funil:focus-visible {
    opacity: 1;
    border-color: var(--borda)
}

th.th-filtrada .th-funil {
    opacity: 1;
    color: #fff;
    background: var(--marca);
    border-color: var(--marca)
}

th.th-ordenavel.ativa,
th.th-interativo[aria-sort="ascending"],
th.th-interativo[aria-sort="descending"] {
    color: var(--marca-texto)
}

.tabela-resumo-filtro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--marca-suave);
    font-size: 12.5px
}

.tabela-resumo-filtro[hidden] {
    display: none
}

.menu-coluna {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra);
    font-size: 13px;
    /* Tela baixa (celular): o menu rola por dentro, para o "Aplicar" nunca ficar fora de alcance. */
    overflow-y: auto;
    overscroll-behavior: contain
}

.menu-coluna[hidden] {
    display: none
}

.menu-coluna-titulo {
    font-weight: 700;
    padding: 2px 4px 4px;
    border-bottom: 1px solid var(--borda)
}

.menu-coluna-ordem {
    border: 0;
    background: none;
    padding: 6px 8px;
    border-radius: 6px;
    text-align: left;
    font: inherit;
    color: var(--texto);
    cursor: pointer
}

.menu-coluna-ordem:hover,
.menu-coluna-ordem.ativo {
    background: var(--marca-suave);
    color: var(--marca-texto)
}

.menu-coluna-faixa {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--borda)
}

/* Datas: um campo por linha (dois lado a lado não cabem no menu). */
.menu-coluna-faixa.menu-coluna-datas {
    grid-template-columns: auto 1fr
}

.menu-coluna input[type="number"],
.menu-coluna input[type="date"],
.menu-coluna input[type="search"] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    width: 100%;
    min-width: 0
}

.menu-coluna-lista {
    flex: 1 1 auto;
    min-height: 60px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 4px
}

.menu-coluna-valor {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer
}

.menu-coluna-valor:hover {
    background: var(--destaque-hover)
}

.menu-coluna-valor span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.menu-coluna-valor small {
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums
}

.menu-coluna-todos {
    font-weight: 600
}

.menu-coluna-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid var(--borda)
}

/* ===== Tela Perdas ===== */
/* Uma cor por motivo, a mesma em todos os visuais (veredito, Pareto, tendência, lançamentos). */
:root {
    --motivo-1: #014e96;
    --motivo-2: #e8730c;
    --motivo-3: #6a9f00;
    --motivo-4: #3d9be0;
    --motivo-5: #8a5cb5;
    --motivo-outros: #a3b0c2;
    --motivo-sem: #cbd5e1;
}

:root[data-tema="escuro"] {
    --motivo-1: #5b9be6;
    --motivo-2: #f59e4b;
    --motivo-3: #a6d84a;
    --motivo-4: #8cc8f2;
    --motivo-5: #c39bdb;
    --motivo-outros: #6b7a92;
    --motivo-sem: #46546b;
}

.m-cor-1 { --cor-m: var(--motivo-1) }
.m-cor-2 { --cor-m: var(--motivo-2) }
.m-cor-3 { --cor-m: var(--motivo-3) }
.m-cor-4 { --cor-m: var(--motivo-4) }
.m-cor-5 { --cor-m: var(--motivo-5) }
.m-cor-outros { --cor-m: var(--motivo-outros) }
.m-cor-sem { --cor-m: var(--motivo-sem) }

[class*="m-cor-"] {
    fill: var(--cor-m);
    background-color: var(--cor-m)
}

/* "Sem motivo" é falta de informação: listrado, para não parecer mais um motivo. */
.faixa-parte.m-cor-sem,
.legenda-cor.m-cor-sem {
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 255, 255, .55) 3px 6px)
}

.perdas-topo {
    margin: 4px 0 14px
}

.perdas-topo h1 {
    margin: 0 0 4px;
    font-size: 24px;
    letter-spacing: -.01em
}

.perdas-topo p {
    margin: 0;
    max-width: 72ch
}

/* Abas da tela Perdas (Motivos | Etapas): os segmentos de sempre, como links. */
.abas-perdas {
    margin-top: 12px
}

/* Link não centraliza o texto na altura como o <button>: flex faz isso. */
.abas-perdas a.segmento {
    display: inline-flex;
    align-items: center;
    text-decoration: none
}

.abas-perdas a.segmento:not(.ativo) {
    color: inherit
}

/* Veredito: a resposta em uma frase e a perda inteira numa faixa só. */
.veredito {
    padding: 18px 20px 16px;
    margin-bottom: 12px
}

.veredito-frase {
    margin: 0;
    max-width: 62ch;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.005em
}

.veredito-apoio {
    margin: 6px 0 0;
    max-width: 80ch;
    color: var(--texto-suave);
    line-height: 1.5
}

.faixa-composicao {
    display: flex;
    gap: 2px;
    height: 30px;
    margin: 16px 0 10px;
    border-radius: 8px;
    overflow: hidden
}

.faixa-parte {
    flex-basis: 0;
    min-width: 3px;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: filter .12s, opacity .12s
}

.faixa-parte:hover,
.faixa-parte:focus-visible {
    filter: brightness(1.12);
    outline: 2px solid var(--texto);
    outline-offset: -2px
}

.faixa-composicao:has(.faixa-parte.ativo) .faixa-parte:not(.ativo) {
    opacity: .3
}

.veredito-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    align-items: center;
    font-size: 13px
}

.veredito-legenda .legenda-item b {
    margin-left: 4px;
    font-variant-numeric: tabular-nums
}

/* Rodapé do resumo: legenda curta à esquerda, seletor de motivos à direita */
.veredito-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between
}

.seletor-motivos {
    position: relative;
    font-size: 13px
}

.seletor-motivos summary {
    padding: 6px 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--superficie-2);
    cursor: pointer;
    list-style: none
}

.seletor-motivos summary::-webkit-details-marker {
    display: none
}

.seletor-motivos summary::after {
    content: " ▾";
    color: var(--texto-suave)
}

.seletor-motivos-painel {
    position: absolute;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 8px;
    width: min(320px, 90vw);
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
    box-shadow: var(--sombra)
}

.seletor-motivos-painel input[type="search"] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit
}

.seletor-motivos-atalhos {
    display: flex;
    gap: 12px
}

.seletor-motivos-lista {
    display: grid;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto
}

.seletor-motivos-lista label {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer
}

.seletor-motivos-lista label:hover {
    background: var(--destaque-hover)
}

.seletor-motivos-lista label[hidden] {
    display: none
}

.legenda-cor {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px
}

.legenda-linha {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--texto);
    margin-right: 6px
}

.legenda-tendencia {
    margin-top: 6px
}

.legenda-tendencia .legenda-item {
    cursor: default
}

/* Indicadores com texto (motivo e máquina) */
.kpis-perdas {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
}

.kpi-texto .valor {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* Pareto e tendência (SVG feitos à mão) */
.grafico-pareto,
.grafico-tendencia {
    display: block;
    width: 100%;
    height: auto;
    max-height: 400px;
    overflow: visible
}

.grafico-pareto .grade,
.grafico-tendencia .grade {
    stroke: var(--borda);
    stroke-dasharray: 2 4
}

.grafico-pareto .eixo,
.grafico-tendencia .eixo {
    stroke: var(--borda)
}

.grafico-pareto text,
.grafico-tendencia text {
    fill: var(--texto-suave);
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.grafico-pareto .valor-barra {
    fill: var(--texto);
    font-size: 10.5px;
    font-weight: 600
}

.pareto-coluna,
.tendencia-coluna {
    cursor: pointer;
    outline: none
}

.pareto-coluna .alvo,
.tendencia-coluna .alvo {
    fill: transparent
}

.pareto-coluna:hover .alvo,
.pareto-coluna:focus-visible .alvo,
.tendencia-coluna:hover .alvo,
.tendencia-coluna:focus-visible .alvo {
    fill: var(--destaque-hover)
}

.pareto-coluna.ativo .alvo,
.tendencia-coluna.ativo .alvo {
    fill: var(--marca-suave)
}

.pareto-coluna:focus-visible .coluna-svg,
.tendencia-coluna:focus-visible .coluna-svg {
    stroke: var(--texto);
    stroke-width: 1.5
}

.grafico-pareto .linha-acumulado {
    fill: none;
    stroke: var(--texto);
    stroke-width: 2;
    stroke-linejoin: round
}

.grafico-pareto .ponto-acumulado {
    fill: var(--superficie);
    stroke: var(--texto);
    stroke-width: 1.5
}

.grafico-pareto .marca-80 {
    stroke: var(--texto-suave);
    stroke-dasharray: 5 4
}

.grafico-tendencia .linha-pct {
    fill: none;
    stroke: var(--texto);
    stroke-width: 2;
    stroke-linejoin: round;
    pointer-events: none
}

.grafico-tendencia .ponto-pct {
    fill: var(--texto)
}

/* Lançamentos: bolinha do motivo antes do nome */
.visual[data-visual-id="lancamentos"] .legenda-cor {
    width: 8px;
    height: 8px;
    border-radius: 50%
}

/* ===== Telas pequenas e impressão ===== */
@media (max-width: 900px) {
    .grade-visuais {
        grid-template-columns: minmax(0, 1fr)
    }

    .veredito-frase {
        font-size: 18px
    }
}

@media print {
    .menu-visual,
    .painel-filtros,
    .painel-acoes,
    .perguntas-rapidas,
    .barra-comparar,
    .dialogo {
        display: none !important
    }

    .grade-visuais {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Tela Setup: marcas pequenas nas listas (fora do turno, trecho longo demais) e aviso de indisponível. */
.chip-pequeno {
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: 1px
}

.setup-indisponivel h2 {
    margin: 0 0 6px;
    font-size: 18px
}

/* Raio-X do Bloco de Setup: o tempo entre um código e outro que não foi setup (não entra na conta). */
.faixa-parte.setup-intervalo {
    background: repeating-linear-gradient(135deg, var(--borda) 0 4px, transparent 4px 8px);
    cursor: default
}

.raio-x-sub {
    margin: 0 0 12px;
    color: var(--texto-suave)
}

.raio-x-titulo {
    margin: 16px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave)
}

.raio-x-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px
}

.raio-x-grade .grafico-barras {
    max-width: 760px
}

.visual-raio-x {
    border-color: var(--marca-texto)
}

tr.linha-ativa td {
    background: var(--marca-suave)
}

/* Configurações: Salvar/Restaurar ficam dentro do cartão que eles salvam */
.config-secao .config-acoes {
    margin-bottom: 0
}

/* ===== Planta (Araçariguama × Itapevi): seletor do cabeçalho, etiquetas e coluna das listas ===== */
.planta-cabecalho {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.planta-cabecalho-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8)
}

.cabecalho .segmentos {
    border-color: rgba(255, 255, 255, .3);
    background: var(--cabecalho-suave)
}

.cabecalho .segmento {
    color: var(--cabecalho-texto)
}

.cabecalho .segmento:hover:not(.ativo) {
    background: var(--cabecalho-suave);
    color: var(--cabecalho-texto)
}

.cabecalho .segmento.ativo {
    color: var(--cabecalho-texto)
}

/* Tela estreita: a lista ocupa menos que os três botões. */
.planta-cabecalho select {
    display: none;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    font-size: 13px
}

@media (max-width: 1100px) {
    .planta-cabecalho .planta-segmentos,
    .planta-cabecalho-rotulo {
        display: none
    }

    .planta-cabecalho select {
        display: block
    }
}

.etiqueta-planta {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--borda);
    border-radius: 99px;
    background: var(--fundo);
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap
}

/* Na OP, a planta é informação (não é link): sem o efeito de passar o mouse dos outros chips. */
.chip-planta,
.chip-planta:hover {
    background: var(--fundo);
    border-color: var(--borda);
    color: var(--texto-suave)
}

@media print {
    .planta-cabecalho {
        display: none
    }
}

/* Tela Performance: OP × máquina fora da conta (dado não confiável) aparece na lista, mas apagada. */
tr.linha-fora td {
    color: var(--texto-suave)
}

/* ===== Lista de OPs: filtros em grade e a barra da lista (status com contagem, ordem, ações) ===== */
/* Pesquisar largo e os outros quatro iguais, numa linha só; em tela menor, a grade de sempre. */
.filtros-ops .painel-filtros {
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(140px, 1fr))
}

@media (max-width: 1100px) {
    .filtros-ops .painel-filtros {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
    }

    .filtros-ops .campo-pesquisa {
        grid-column: span 2
    }
}

.barra-lista .segmentos {
    flex: none
}

.segmento-contagem {
    margin-left: 4px;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: .75
}

.segmento-contagem:empty {
    display: none
}

.barra-lista .ordenar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 600
}

.barra-lista .ordenar select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 13px;
    font-weight: 500
}

/* ===== Folha de filtros (celular) =====
 * Fica na tela só o período e o botão "Filtros · N"; o resto sobe numa folha de baixo, como no iOS
 * (app.js abrirFiltros/fecharFiltros; arrastar pela alça: js/movimento.js). */
@media (max-width: 760px) {
    .painel-filtros {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px
    }

    .painel-filtros > .campo {
        flex: 1 1 130px;
        min-width: 0
    }

    .botao-filtros {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid var(--borda);
        border-radius: 10px;
        background: var(--superficie);
        color: var(--texto);
        font-weight: 600
    }

    .botao-filtros svg {
        width: 17px;
        height: 17px
    }

    .botao-filtros.com-filtros {
        border-color: var(--marca-texto);
        color: var(--marca-texto);
        background: var(--marca-suave)
    }

    .botao-filtros-contagem {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 99px;
        background: var(--marca);
        color: #fff;
        font-size: 11.5px;
        font-variant-numeric: tabular-nums
    }

    .painel-filtros-mais {
        display: none
    }

    .painel-filtros.aberto .painel-filtros-mais {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-content: start;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        max-height: 86vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 18px 18px 0 0;
        background: var(--superficie);
        box-shadow: var(--sombra-elevada);
        outline: none
    }

    /* Fundo escurecido: tocar nele fecha (app.js). */
    .painel-filtros.aberto::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 69;
        background: var(--veu)
    }

    .folha-topo {
        grid-column: 1 / -1;
        position: sticky;
        top: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        margin: 0 -16px;
        padding: 18px 16px 10px;
        background: var(--superficie);
        touch-action: none;
        cursor: grab
    }

    .folha-topo .botao-link {
        justify-self: start;
        font-size: 15px
    }

    .folha-topo .folha-pronto {
        justify-self: end;
        font-weight: 700
    }

    .folha-titulo {
        font-size: 16px
    }

    .folha-alca {
        position: absolute;
        top: 7px;
        left: 50%;
        width: 38px;
        height: 5px;
        margin-left: -19px;
        border-radius: 99px;
        background: var(--folha-alca)
    }

    body.folha-aberta {
        overflow: hidden
    }

    /* A linha do período: a frase em cima, as ações embaixo, à direita. */
    .painel-acoes {
        width: 100%;
        justify-content: flex-end
    }

    /* Na folha a grade tem uma coluna só: o filtro com chips não ocupa "duas" (como no computador), senão a grade
       ganhava uma segunda coluna e o topo (Limpar · Filtros · Pronto) e os campos ficavam espremidos. */
    .painel-filtros .campo-multi:has(.chip) {
        grid-column: auto
    }

    /* Na folha, todos os filtros ficam à vista (o "Mais filtros" é do computador). */
    .painel-filtros-extras,
    .painel-filtros-extras-grade {
        display: contents;
        visibility: visible
    }

    .botao-mais-filtros {
        display: none
    }

    /* Lista de OPs: a pesquisa fica na tela; os status rolam de lado se não couberem. */
    .filtros-ops .campo-pesquisa {
        flex: 1 1 160px
    }

    .barra-lista .segmentos {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none
    }

    .barra-lista .segmentos::-webkit-scrollbar {
        display: none
    }

    .barra-lista .ordenar > span {
        display: none
    }

    .barra-lista .painel-acoes {
        flex-wrap: wrap;
        gap: 10px 14px
    }

    .barra-lista .ordenar {
        flex: 1 1 140px
    }

    .barra-lista .ordenar select {
        width: 100%
    }

    .painel-acoes .botao-link,
    .painel-acoes .painel-exportar {
        white-space: nowrap
    }
}

/* ===== Filtros fixos: a cápsula no canto de cima com os filtros que valem agora =====
 * Aparece quando a barra de filtros some por cima ao rolar (app.js vigiarFiltros) e sai quando ela volta. Vidro, como
 * o cabeçalho; chips iguais aos da barra (o × tira o filtro). O movimento fica em css/movimento.css. */
.filtros-fixos {
    position: fixed;
    top: calc(var(--fim-do-cabecalho, 60px) + 10px);   /* onde o cabeçalho termina (app.js vigiarFiltros) */
    right: max(18px, env(safe-area-inset-right, 0px));
    z-index: 19;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    max-width: min(680px, calc(100vw - 36px));
    padding: 4px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--vidro);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--sombra-elevada);
    font-size: 12.5px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.filtros-fixos.visivel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

/* Fechada, a cápsula é sempre uma linha (os chips encolhem com "…"); aberta ("+N"), mostra todos e quebra linha. */
.filtros-fixos.aberta {
    flex-wrap: wrap
}

/* Folha de filtros, menu do celular, visual ampliado e Modo TV cobrem a tela: a cápsula sai da frente. */
body:is(.folha-aberta, .menu-aberto, .visual-ampliado, .modo-tv) .filtros-fixos {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

/* O título (período, ou "Filtros" na lista de OPs): leva de volta à barra de filtros. */
.filtros-fixos-ir {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px 0 3px;
    border: 0;
    border-radius: 99px;
    background: none;
    color: var(--texto);
    font-weight: 600;
    white-space: nowrap
}

.filtros-fixos-ir:hover {
    background: var(--marca-suave);
    color: var(--marca-texto)
}

.filtros-fixos-icone {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--marca);
    color: #fff
}

.filtros-fixos-icone svg {
    width: 13px;
    height: 13px
}

.filtros-fixos-divisor {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--borda)
}

.filtros-fixos .chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 260px;
    padding: 3px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.45
}

.filtros-fixos-chip small {
    font-size: inherit;
    font-weight: 500;
    opacity: .72
}

.filtros-fixos .chip.filtros-fixos-mais {
    flex: none;
    background: var(--superficie);
    color: var(--marca-texto);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.filtros-fixos .botao-link.filtros-fixos-mais {
    padding: 0 8px;
    font-size: 12px
}

@media (max-width: 760px) {
    .filtros-fixos {
        top: calc(var(--fim-do-cabecalho, 56px) + 8px);
        right: max(12px, env(safe-area-inset-right, 0px));
        max-width: calc(100vw - 24px)
    }
}

@media print {
    .filtros-fixos {
        display: none !important
    }
}

/* Tela Performance: planejado × real por máquina (um bloco por setor) e a página "Como é feita a conta". */
:root {
    --serie-planejada: var(--motivo-1);
    --serie-real: var(--motivo-4);
}

/* Setores lado a lado quando cabem (um setor de 1 ou 2 máquinas não ocupa uma faixa inteira). */
.pareadas-setores {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin-top: 6px
}

.pareadas-setor {
    min-width: 0;
    max-width: 100%
}

.pareadas-setor h4 {
    margin: 0 0 4px;
    font-size: 13px
}

.grafico-rolagem {
    overflow-x: auto
}

.grafico-pareadas {
    display: block;
    max-width: none
}

.grafico-pareadas .pareada-a {
    fill: var(--serie-planejada)
}

.grafico-pareadas .pareada-b {
    fill: var(--serie-real)
}

.legenda-cor.pareada-a {
    background: var(--serie-planejada)
}

.legenda-cor.pareada-b {
    background: var(--serie-real)
}

.grafico-pareadas .pareadas-valor {
    font-size: 11px;
    fill: var(--texto)
}

.grafico-pareadas .pareadas-linha2 {
    font-size: 12px;
    font-weight: 600;
    fill: var(--texto)
}

.grafico-pareadas .pareadas-linha2.boa {
    fill: var(--cor-nao-excedida)
}

.grafico-pareadas .pareadas-linha2.ruim {
    fill: var(--cor-excedida)
}

.grafico-pareadas .pareadas-vazio {
    font-size: 11px;
    fill: var(--texto-suave)
}

.grafico-pareadas .alvo {
    fill: transparent;
    cursor: pointer
}

.grafico-pareadas .pareadas-grupo:hover .alvo,
.grafico-pareadas .pareadas-grupo:focus .alvo {
    fill: var(--destaque-hover)
}

.grafico-pareadas .pareadas-grupo.ativo .pareadas-nome {
    fill: var(--marca-texto);
    font-weight: 700
}

.performance-como {
    margin-top: 8px
}

.conta-secao {
    max-width: 980px;
    margin-bottom: 14px
}

.conta-secao h2 {
    margin-top: 0
}

.conta-passos {
    padding-left: 22px
}

.conta-passos > li {
    margin-bottom: 18px
}

.conta-passos h3 {
    margin: 0 0 4px;
    font-size: 15px
}

.conta-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--marca-suave)
}

.conta-formula-rotulo {
    min-width: 150px;
    color: var(--texto-suave)
}

.conta-formula-conta {
    font-variant-numeric: tabular-nums
}

.conta-formula-resultado {
    font-size: 17px;
    font-variant-numeric: tabular-nums
}

.conta-outra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px
}

.conta-outra input {
    width: 130px
}

.conta-fora {
    margin: 8px 0 12px
}

tr.conta-total td {
    border-top: 2px solid var(--borda)
}

.conta-secao .tabela-compacta th,
.conta-secao .tabela-compacta td {
    white-space: normal;
    vertical-align: top
}