/* ===== 1. VARIÁVEIS: cores e medidas em um lugar só =====
 * Identidade Ibratec (cores do logo): azul #014E96 (--marca) e verde #93D500 (--acento).
 * O azul é a cor do sistema (cabeçalho, botões, links, item ativo); o verde só aparece como acento
 * (faixa do cabeçalho, marcador do item ativo) e como "bom" nos números. Perda = laranja; erro = vermelho.
 */
:root {
    color-scheme: light;
    --fundo: #f3f6fa;
    --superficie: #fff;
    --superficie-2: #f7f9fc;
    --texto: #10243e;
    --texto-suave: #5a6b82;
    --borda: #dce3ec;
    --marca: #014e96;
    --marca-forte: #013a70;
    --marca-texto: #014e96;
    --marca-suave: #e6eef7;
    --acento: #93d500;
    --acento-texto: #4b7a00;
    --acento-suave: #eff8db;
    --cabecalho-fundo: #014e96;
    --cabecalho-texto: #fff;
    --cabecalho-suave: rgba(255, 255, 255, .14);
    --cor-perda: #c95a0c;
    --cor-nao-excedida: #3f7a00;
    --cor-nao-excedida-fundo: #edf7d9;
    --cor-excedida: #c62828;
    --cor-excedida-fundo: #fcebea;
    --cor-quebra: #b45309;
    --cor-quebra-fundo: #fdf0e1;
    --cor-aviso: #8f5a00;
    --cor-aviso-fundo: #fff4db;
    --cor-aviso-borda: #f0dba8;
    --cor-neutra-fundo: #ebf0f5;
    --destaque-hover: #f1f5fa;
    --marca-destaque: #e3f4b8;
    --sombra: 0 8px 24px rgba(1, 40, 80, .12);
    --sombra-leve: 0 1px 2px rgba(1, 40, 80, .04), 0 2px 6px rgba(1, 40, 80, .05);
    --sombra-elevada: 0 2px 6px rgba(1, 40, 80, .06), 0 14px 32px rgba(1, 40, 80, .12);
    --veu: rgba(8, 22, 40, .42);
    --cabecalho-vidro: rgba(1, 78, 150, .9);
    --cabecalho-pilula: rgba(255, 255, 255, .26);
    --vidro: rgba(255, 255, 255, .8);
    --folha-alca: rgba(16, 36, 62, .22);
    /* Movimento (inspirado no iOS; regras em css/movimento.css): curvas de "mola" e durações.
       --mola sai rápido e assenta devagar (telas, folhas, menus); --mola-viva passa um tiquinho do ponto e volta
       (pílulas dos seletores, avisos). Nada passa de ~0,5 s: animação boa não faz ninguém esperar. */
    --mola: cubic-bezier(.32, .72, 0, 1);
    --mola-viva: cubic-bezier(.34, 1.36, .64, 1);
    --suave: cubic-bezier(.25, .1, .25, 1);
    --tempo-toque: .12s;
    --tempo-curto: .2s;
    --tempo-medio: .36s;
    --tempo-longo: .5s;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

/* Tema escuro: ativado pelo botão do cabeçalho. */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #0b1626;
    --superficie: #12213a;
    --superficie-2: #172a46;
    --texto: #e6edf7;
    --texto-suave: #9aaac2;
    --borda: #24385a;
    --marca: #2f7fd6;
    --marca-forte: #4b93e2;
    --marca-texto: #7db3f5;
    --marca-suave: #17345c;
    --acento: #a4e21a;
    --acento-texto: #a9de4a;
    --acento-suave: #24361a;
    --cabecalho-fundo: #0a2e57;
    --cabecalho-texto: #fff;
    --cabecalho-suave: rgba(255, 255, 255, .12);
    --cor-perda: #f59a4e;
    --cor-nao-excedida: #9fd84e;
    --cor-nao-excedida-fundo: #213616;
    --cor-excedida: #ff7a72;
    --cor-excedida-fundo: #44201f;
    --cor-quebra: #f5a35b;
    --cor-quebra-fundo: #3d2915;
    --cor-aviso: #f0b95a;
    --cor-aviso-fundo: #3a2e14;
    --cor-aviso-borda: #5a4720;
    --cor-neutra-fundo: #1e2f4a;
    --destaque-hover: #1a2d4c;
    --marca-destaque: #3b5410;
    --sombra: 0 8px 24px rgba(0, 0, 0, .45);
    --sombra-leve: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-elevada: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .4);
    --veu: rgba(0, 4, 12, .6);
    --cabecalho-vidro: rgba(10, 46, 87, .88);
    --cabecalho-pilula: rgba(255, 255, 255, .2);
    --vidro: rgba(18, 33, 58, .82);
    --folha-alca: rgba(230, 237, 247, .28)
}

/* ===== 2. BASE: reset e estilos gerais ===== */
* {
    box-sizing: border-box
}

html {
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px)
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fundo);
    color: var(--texto);
    font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

a {
    color: var(--marca-texto);
    text-decoration: none
}

mark {
    background: var(--marca-destaque);
    color: var(--texto);   /* sempre o texto escuro sobre o verde-claro (herdar podia dar branco sobre verde) */
    border-radius: 3px;
    padding: 0 1px
}

kbd {
    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 3px 6px;
    border: 1px solid var(--borda);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--superficie-2);
    color: var(--texto-suave)
}

code {
    font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--cor-neutra-fundo);
    padding: 1px 5px;
    border-radius: 4px
}

.texto-suave {
    color: var(--texto-suave)
}

.espaco {
    flex: 1
}

.vazio {
    padding: 18px 16px;
    margin: 0;
    color: var(--texto-suave)
}

.pular-conteudo {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 100;
    background: var(--marca);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px
}

.pular-conteudo:focus {
    left: 8px
}

:focus-visible {
    outline: 2px solid var(--marca-texto);
    outline-offset: 2px
}

/* ===== 3. CABEÇALHO: logo, navegação, pesquisa e tema ===== */
.cabecalho {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: var(--cabecalho-fundo);
    color: var(--cabecalho-texto);
    border-bottom: 3px solid var(--acento)
}

.cabecalho-conteudo {
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    background: none;
    padding: 0
}

.logo-imagem {
    height: 30px;
    width: auto;
    display: block
}

.nome-sistema {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    color: var(--cabecalho-texto);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em
}

.navegacao {
    display: flex;
    gap: 4px
}

.navegacao a {
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--texto-suave);
    font-weight: 600
}

.navegacao a:hover {
    background: var(--marca-suave);
    color: var(--marca-texto)
}

.busca-cabecalho {
    flex: 1;
    display: flex;
    justify-content: flex-end
}

.busca-cabecalho .busca {
    max-width: 520px
}

/* No início existe uma pesquisa grande no centro; a do cabeçalho some para não duplicar. */
body[data-tela="inicio"] .busca-cabecalho .busca {
    display: none
}

.botao-icone {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--texto-suave);
    padding: 0
}

.botao-icone svg {
    width: 18px;
    height: 18px
}

.botao-icone:hover {
    background: var(--marca-suave);
    color: var(--marca-texto)
}

.botao-estrela svg {
    fill: none
}

.botao-estrela.ativa {
    color: #e0a100
}

/* Cabeçalho azul: ícones, pesquisa e planta em branco sobre a marca */
.cabecalho .botao-icone {
    color: var(--cabecalho-texto)
}

.cabecalho .botao-icone:hover {
    background: var(--cabecalho-suave);
    color: var(--cabecalho-texto)
}

.cabecalho .busca-campo {
    border-color: transparent;
    background: var(--superficie)
}

.cabecalho .busca-campo:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(147, 213, 0, .35)
}

.botao-estrela.ativa svg {
    fill: currentColor
}

/* ===== 4. PESQUISA E SUGESTÕES ===== */
.busca {
    position: relative;
    width: 100%
}

.busca > svg {
    position: absolute;
    left: 12px;
    top: 11px;
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    pointer-events: none
}

.busca-campo {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 40px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s
}

.busca-campo::placeholder {
    color: var(--texto-suave)
}

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

.atalho-tecla {
    position: absolute;
    right: 10px;
    top: 9px;
    pointer-events: none
}

/* A dica do atalho "/" some ao digitar e em telas de toque (sem teclado). */
.busca-campo:focus ~ .atalho-tecla,
.busca-campo:not(:placeholder-shown) ~ .atalho-tecla {
    display: none
}

@media (hover: none) {
    .atalho-tecla {
        display: none
    }
}

.busca-grande .busca-campo {
    height: 54px;
    font-size: 17px;
    border-radius: 12px;
    padding-left: 50px;
    background: var(--superficie);
    border-color: var(--borda);
    box-shadow: 0 2px 10px rgba(1, 40, 80, .07)
}

.busca-grande > svg {
    left: 17px;
    top: 17px;
    width: 20px;
    height: 20px
}

.busca-grande .atalho-tecla {
    top: 17px;
    right: 16px
}

.busca-resultados {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--superficie);
    /* A caixa fica dentro do cabeçalho azul, que deixa o texto branco: aqui o fundo é claro, então o texto volta a
       ser o normal (sem isso, o título das sugestões sumia, branco sobre branco). */
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra);
    max-height: min(480px, 70vh);
    overflow: auto;
    padding: 6px;
    display: none
}

.busca-resultados.aberto {
    display: block
}

.busca-resultados h4 {
    margin: 8px 10px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-suave)
}

.busca-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: 8px
}

.busca-item.selecionado,
.busca-item:hover {
    background: var(--marca-suave)
}

.busca-item-texto {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.busca-item b {
    font-weight: 600
}

.busca-item-texto span,
.busca-item-lateral > span {
    color: var(--texto-suave);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.busca-item-lateral {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0
}

.tecla-enter {
    color: var(--texto-suave);
    font-weight: 700
}

.busca-vazia {
    padding: 20px 12px;
    color: var(--texto-suave);
    text-align: center
}

/* ===== 5. ÁREA PRINCIPAL E TÍTULOS ===== */
main {
    flex: 1;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    outline: none
}

main > .tela {
    animation: aparecer .18s ease-out
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

h1 {
    font-size: 26px;
    letter-spacing: -.02em;
    margin: 0
}

h2 {
    margin: 0;
    font-size: 17px
}

.subtitulo {
    color: var(--texto-suave);
    margin: 4px 0 18px
}

.titulo-pagina {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.resumo-resultados {
    color: var(--texto-suave);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.resumo-resultados b {
    color: var(--texto)
}

.ponto {
    opacity: .5
}

.titulo-secao {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 10px
}

/* ===== 6. INÍCIO ===== */
.hero {
    max-width: 780px;
    margin: 18px auto 26px;
    text-align: center
}

.hero h1 {
    font-size: 32px
}

.hero .busca {
    text-align: left
}

.atalhos-rapidos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 14px
}

.chip {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 99px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto);
    font-size: 12.5px;
    font-weight: 500;
    transition: background .12s, border-color .12s
}

.chip:hover {
    background: var(--marca-suave);
    border-color: var(--marca-texto)
}

.chip-alerta {
    color: var(--cor-excedida);
    background: var(--cor-excedida-fundo);
    border-color: transparent;
    font-weight: 600
}

.chip-aviso {
    color: var(--cor-aviso);
    background: var(--cor-aviso-fundo);
    border-color: var(--cor-aviso-borda);
    font-weight: 600
}

.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px
}

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px
}

.kpi {
    display: block;
    padding: 14px 16px;
    color: inherit;
    transition: border-color .12s, transform .12s, box-shadow .12s
}

a.kpi:hover {
    border-color: var(--marca-texto);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20, 28, 38, .08)
}

.kpi .rotulo {
    color: var(--texto-suave);
    font-size: 13px
}

.kpi .valor {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums
}

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

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

.detalhe-tecnico {
    margin: 18px auto 0;
    max-width: 560px;
    text-align: left;
    color: var(--texto-suave);
    font-size: 12.5px
}

.detalhe-tecnico summary {
    cursor: pointer
}

.detalhe-tecnico pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--cor-neutra-fundo);
    padding: 10px 12px;
    border-radius: 8px;
    margin: 8px 0 0
}

.cartao-titulo {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borda);
    font-weight: 600;
    font-size: 15px
}

.cartao-titulo small {
    font-weight: 500;
    margin-left: 6px;
    font-size: 12px
}

.cartao-titulo-abas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

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

.botao-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--marca-texto);
    font-weight: 600;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.botao-link svg {
    width: 14px;
    height: 14px
}

.botao-link:hover:not(:disabled) {
    text-decoration: underline
}

.botao-link:disabled {
    opacity: .55;
    cursor: default
}

.maquina-linha:hover {
    background: var(--destaque-hover)
}

.maquina-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--borda);
    color: var(--texto)
}

.maquina-linha:last-child {
    border: 0
}

.maquina-linha span {
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 8px;
    align-items: center
}

.maquina-linha b {
    font-weight: 600
}

em.chip-excedida,
.chip-excedida {
    font-style: normal;
    color: var(--cor-excedida);
    font-size: 12px;
    font-weight: 600
}

.chip-aviso-texto {
    color: var(--cor-aviso);
    font-weight: 600
}

/* ===== 7. TABELAS ===== */
.tabela-rolagem {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px
}

th {
    text-align: left;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--texto-suave);
    padding: 9px 16px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap
}

td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    vertical-align: middle
}

tr:last-child td {
    border-bottom: 0
}

.numero {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.linha-clicavel {
    cursor: pointer;
    transition: background .12s
}

.linha-clicavel:hover,
.linha-clicavel:focus-visible {
    background: var(--destaque-hover);
    outline: none
}

.linha-clicavel:focus-visible {
    box-shadow: inset 3px 0 0 var(--marca-texto)
}

.numero-op {
    font-weight: 700;
    color: var(--marca-texto)
}

.sub {
    display: block;
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 400
}

.tabela-compacta {
    min-width: 320px
}

.tabela-resultados td.celula-larga {
    white-space: normal;
    min-width: 170px;
    max-width: 240px
}

.tabela-resultados td.celula-larga .sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* ===== 8. SELOS DE SITUAÇÃO (verde = dentro da margem, vermelho = excedida, laranja = quebra, cinza = sem planejado) ===== */
.selo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap
}

.selo.nao-excedida {
    background: var(--cor-nao-excedida-fundo);
    color: var(--cor-nao-excedida)
}

.selo.excedida {
    background: var(--cor-excedida-fundo);
    color: var(--cor-excedida)
}

.selo.quebra {
    background: var(--cor-quebra-fundo);
    color: var(--cor-quebra)
}

.selo.sem-plano {
    background: var(--cor-neutra-fundo);
    color: var(--texto-suave)
}

/* Logo do sistema de onde vem o número (cartões principais da OP) */
.informacao {
    position: relative
}

.logo-origem {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)) drop-shadow(0 1px 1px rgba(0, 0, 0, .12))
}

/* Logo dentro do texto (títulos de coluna, abas, indicadores): bem pequeno, com sombra leve para não sumir no branco. */
.logo-origem-mini {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 2px;
    vertical-align: -1px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)) drop-shadow(0 1px 1px rgba(0, 0, 0, .12))
}

.maquina-topo .logo-origem-mini {
    width: 13px;
    height: 13px;
    margin-left: auto
}

.aviso-informacao {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--texto-suave);
    font-style: italic
}

/* Registros da OP: lista única por dia (grade de 5 colunas; no celular, cartão de 3 linhas).
   Classes próprias (chip-registro): o painel.css tem um .chip-filtro dele, carregado depois. */
.registros-corpo {
    padding: 14px 16px 16px
}

.registros-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px
}

.chips-registro {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.chip-registro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: 99px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s
}

.chip-registro small {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 99px;
    background: var(--cor-neutra-fundo);
    color: var(--texto-suave);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums
}

.chip-registro .logo-origem-mini {
    margin: 0;
    vertical-align: 0;
    flex: none
}

.chip-registro:hover {
    border-color: var(--texto-suave);
    background: var(--destaque-hover)
}

.chip-registro:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px
}

.chip-registro.ativo {
    border-color: var(--marca);
    background: var(--marca-suave);
    color: var(--marca-texto);
    font-weight: 600
}

.chip-registro.ativo small {
    background: var(--superficie);
    color: var(--marca-texto)
}

.filtro-maquina-registros select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 13px
}

.registros-aviso {
    margin: -4px 0 12px;
    font-size: 13px
}

.registros-vazio {
    margin: 0;
    padding: 18px 12px;
    border-radius: 8px;
    background: var(--cor-neutra-fundo);
    color: var(--texto-suave);
    text-align: center
}

.registros-mais {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
    font-size: 13px
}

.registros-cabecalho,
.registro {
    display: grid;
    grid-template-columns: 52px minmax(150px, 1fr) minmax(130px, 1.1fr) minmax(150px, 1.3fr) 110px;
    gap: 4px 14px;
    align-items: center;
    padding: 9px 12px
}

.registros-cabecalho {
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borda)
}

.registros-cabecalho span:last-child,
.registro-qtd {
    text-align: right
}

.registro-dia-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cor-neutra-fundo);
    font-size: 13px
}

.registro-dia-topo > b {
    text-transform: capitalize
}

.registro-dia-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    color: var(--texto-suave)
}

.registro-dia-totais b {
    color: var(--texto);
    font-variant-numeric: tabular-nums
}

.registro-dia-totais .total-perda b {
    color: var(--cor-quebra)
}

.registro {
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
    line-height: 1.35
}

.registro-dia-topo + .registro {
    margin-top: 2px
}

.registro:last-child {
    border-bottom: 0
}

.registro:hover {
    background: var(--destaque-hover)
}

.registro-hora {
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums
}

.registro-hora:empty::before {
    content: "—";
    opacity: .5
}

.registro-tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0
}

.registro-tipo .logo-origem-mini {
    margin: 0;
    flex: none
}

.registro-tipo small {
    color: var(--texto-suave);
    font-size: 12px
}

.registro-onde,
.registro-quem {
    min-width: 0;
    overflow-wrap: anywhere
}

.registro-onde small {
    color: var(--texto-suave);
    font-size: 12px;
    margin-left: 6px;
    white-space: nowrap
}

.registro-quem {
    color: var(--texto-suave);
    font-size: 13px
}

.registro-qtd {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.registro-perda .registro-qtd {
    color: var(--cor-quebra)
}

.registro-entrega .registro-qtd {
    color: var(--cor-nao-excedida)
}

.registro-cancelado {
    opacity: .6
}

.registro-cancelado .registro-qtd {
    text-decoration: line-through
}

@media (max-width: 760px) {
    .registros-cabecalho {
        display: none
    }

    .registros-corpo {
        padding: 12px 12px 14px
    }

    .registro {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "tipo tipo qtd" "onde onde onde" "hora quem quem";
        gap: 3px 10px;
        padding: 10px 12px
    }

    .registro-tipo { grid-area: tipo }
    .registro-qtd { grid-area: qtd }
    .registro-onde { grid-area: onde }
    .registro-hora { grid-area: hora; font-size: 12.5px }
    .registro-quem { grid-area: quem; font-size: 12.5px }

    .registro-dia-topo {
        flex-direction: column;
        align-items: flex-start
    }

    .filtro-maquina-registros,
    .filtro-maquina-registros select {
        width: 100%
    }
}

.cliente-grupo {
    margin-top: 2px;
    font-size: 13px;
    color: var(--texto-suave)
}

.cliente-grupo a {
    color: inherit;
    text-decoration: underline dotted
}

.data-sob-op {
    display: block;
    font-size: 11.5px;
    color: var(--texto-suave)
}

.status-op {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--cor-neutra-fundo);
    color: var(--texto-suave)
}

.status-op-aberta {
    background: var(--marca-suave);
    color: var(--marca-texto)
}

.status-op-cancelada {
    background: var(--cor-excedida-fundo);
    color: var(--cor-excedida)
}

/* Status nas listas (OPs, início, painel, sugestões): menor que o chip do cabeçalho da OP */
.status-op-mini {
    padding: 2px 9px;
    font-size: 12px;
    white-space: nowrap
}

/* Cor de cada status em pontos e barras: aberta = marca, encerrada = cinza, cancelada = vermelho */
.lateral-ponto.status-aberta,
.barra-preenchimento.status-aberta {
    background: var(--marca)
}

.lateral-ponto.status-encerrada {
    background: var(--texto-suave)
}

.lateral-ponto.status-cancelada {
    background: var(--cor-excedida)
}

.lateral-ponto.status-sem {
    background: var(--texto-suave);
    opacity: .35
}

.selo-nota {
    display: block;
    color: var(--texto-suave);
    font-size: 11px;
    margin-top: 2px
}

.marca-aviso {
    display: inline-grid;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--cor-aviso)
}

.marca-aviso svg {
    width: 14px;
    height: 14px
}

/* ===== 9. FILTROS E LISTA DE RESULTADOS ===== */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: flex-end;
    padding: 14px 16px;
    margin-bottom: 14px;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    z-index: 10
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px
}

.campo-largo {
    flex: 2 1 260px
}

.campo-curto {
    min-width: 130px;
    flex: 0 1 150px
}

.campo > span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--texto-suave)
}

.filtros input[type="search"],
.filtros select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    width: 100%
}

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

/* Seletor segmentado (como o do iOS): um trilho com a pílula do item escolhido. A pílula é o ::before do
   botão ativo (css/movimento.css), para poder deslizar de um botão ao outro (js/movimento.js). */
.segmentos {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo);
    height: 36px
}

.segmento {
    border: 0;
    border-radius: 7px;
    background: none;
    padding: 0 12px;
    font-weight: 600;
    font-size: 13px;
    color: var(--texto-suave);
    white-space: nowrap
}

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

.segmento.ativo {
    color: #fff
}

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

.tabela-resultados th,
.tabela-resultados td {
    padding: 10px
}

.filtros-rodape {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.marcar {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--texto-suave);
    font-size: 13px;
    cursor: pointer
}

#lista-resultados {
    transition: opacity .12s
}

#lista-resultados.recarregando {
    opacity: .55
}

/* Máquinas da OP: quebram em linhas dentro da coluna (sem empurrar a tabela para fora da tela). */
.chips-maquinas {
    display: flex;
    gap: 4px 5px;
    flex-wrap: wrap;
    max-width: 230px
}

.tabela-resultados td.celula-maquinas {
    min-width: 200px
}

.chip-maquina {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--cor-neutra-fundo);
    font-size: 12px;
    font-weight: 500
}

.chip-mais {
    color: var(--texto-suave)
}

.paginacao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--borda);
    flex-wrap: wrap
}

/* ===== 10. PÁGINA DA OP ===== */
.botao-voltar {
    border: 0;
    background: none;
    color: var(--marca-texto);
    font-weight: 600;
    padding: 4px 0;
    margin-bottom: 10px
}

.botao-voltar:hover {
    text-decoration: underline
}

.cabecalho-op {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.linha-titulo {
    display: flex;
    align-items: center;
    gap: 6px
}

.cabecalho-op .cliente {
    font-size: 17px;
    margin-top: 2px;
    font-weight: 600
}

.cabecalho-op .cliente a {
    color: var(--texto)
}

.cabecalho-op .cliente a:hover {
    color: var(--marca-texto);
    text-decoration: underline
}

.produto-op {
    color: var(--texto-suave);
    margin-top: 1px
}

.chips-relacionadas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px
}

.cabecalho-op-lateral {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px
}

.acoes-op {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.acoes-separador {
    width: 1px;
    align-self: stretch;
    margin: 2px 2px;
    background: var(--borda)
}

@media (max-width: 760px) {
    .acoes-separador {
        display: none
    }
}

.aviso-faixa,
.maquina-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--cor-aviso-fundo);
    border: 1px solid var(--cor-aviso-borda);
    color: var(--cor-aviso);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4
}

.aviso-faixa svg,
.maquina-alerta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px
}

.grade-pedido {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px
}

.informacao.pedido {
    border-left: 4px solid var(--marca)
}

.informacao.pedido .valor {
    font-size: 30px
}

.informacao.em-breve {
    border-left-color: var(--borda);
    background: var(--superficie-2)
}

.informacao.em-breve .valor,
.informacao.em-breve .origem {
    color: var(--texto-suave)
}

.grade-informacoes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px
}

.informacao {
    padding: 14px 16px
}

.informacao .rotulo {
    color: var(--texto-suave);
    font-size: 13px
}

.informacao .valor {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums
}

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

.subtitulo-diagnostico {
    font-size: 15px;
    margin: 6px 0 0
}

.informacao .origem {
    font-size: 11.5px;
    color: var(--texto-suave);
    margin-top: 4px;
    opacity: .85
}

/* ===== 11. CARTÕES DE MÁQUINA E BARRAS ===== */
.grade-maquinas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 12px;
    margin-bottom: 12px
}

.grade-maquinas-larga {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))
}

.cartao-maquina {
    padding: 14px 16px;
    border-left: 4px solid var(--borda)
}

.cartao-maquina.excedida {
    border-left-color: var(--cor-excedida)
}

.cartao-maquina.nao-excedida {
    border-left-color: var(--cor-nao-excedida)
}

.maquina-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px
}

.maquina-nome {
    font-size: 16px;
    font-weight: 700
}

.maquina-sub {
    color: var(--texto-suave);
    font-size: 12px
}

.maquina-operacao {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.maquina-numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0 10px
}

.maquina-numeros-2 {
    grid-template-columns: repeat(2, 1fr)
}

.maquina-numeros small {
    display: block;
    color: var(--texto-suave);
    font-size: 11px
}

.maquina-numeros b {
    font-size: 15px;
    font-variant-numeric: tabular-nums
}

.maquina-numeros b.excedida,
.maquina-numeros b.dif.excedida {
    color: var(--cor-excedida)
}

.maquina-numeros b.nao-excedida {
    color: var(--cor-nao-excedida)
}

.maquina-rodape {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    color: var(--texto-suave);
    font-size: 12.5px
}

.maquina-rodape b {
    color: var(--texto);
    font-variant-numeric: tabular-nums
}

.maquina-equipe {
    margin-top: 8px;
    font-size: 12px;
    color: var(--texto-suave)
}

.maquina-alerta {
    margin: 10px 0 0;
    font-size: 12px
}

.cartao-lista-maquina {
    display: block;
    padding: 14px 16px;
    color: var(--texto);
    transition: border-color .12s, transform .12s
}

.cartao-lista-maquina:hover {
    border-color: var(--marca-texto);
    transform: translateY(-1px)
}

.barra {
    position: relative;
    height: 10px;
    background: var(--cor-neutra-fundo);
    border-radius: 6px
}

.barra-fina {
    height: 6px;
    margin-top: 4px
}

.barra-preenchimento {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: var(--cor-nao-excedida);
    transition: width .7s cubic-bezier(.2, .7, .2, 1)
}

/* Máquina: peças boas × planejado é só informação (o alerta vem do CPA), então a cor é neutra. */
.barra-preenchimento.informativa {
    background: var(--marca)
}

.barra-margem {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border-left: 1px dashed var(--texto-suave);
    border-right: 1px dashed var(--texto-suave);
    background: color-mix(in srgb, var(--texto) 10%, transparent);
    pointer-events: none
}

.barra-preenchimento.excedida {
    background: var(--cor-excedida)
}

.barra-marcador {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--texto);
    opacity: .7
}

/* ===== 12. DETALHES E TABELAS DA OP ===== */
.duas-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.copiavel {
    cursor: copy;
    border-radius: 4px;
    transition: background .12s
}

.copiavel:hover {
    background: var(--marca-suave)
}

.secao {
    margin-top: 12px;
    overflow: hidden
}

.duas-colunas .secao {
    margin-top: 0
}

.tela-op .duas-colunas {
    margin-top: 12px
}

.tabela-expansivel .linha-extra {
    display: none
}

.tabela-expansivel.expandida .linha-extra {
    display: table-row
}

/* O funil (tabelas.js) esconde com o atributo hidden: sem isto, o display acima (linhas além das primeiras)
   e o flex dos valores do menu venciam o hidden, e a tabela/busca do funil não filtravam. */
table[data-tabela] tbody tr[hidden],
.menu-coluna-lista label[hidden] {
    display: none !important
}

/* ===== 13. CARREGAMENTO (esqueletos e roda) ===== */
.esqueleto {
    background: linear-gradient(90deg, var(--borda), var(--destaque-hover), var(--borda));
    background-size: 200% 100%;
    animation: brilho 1.2s infinite;
    border-radius: 6px
}

@keyframes brilho {
    to {
        background-position: -200% 0
    }
}

.esqueleto-titulo { height: 32px; width: 220px; margin-bottom: 22px; }
.esqueleto-hero { height: 96px; max-width: 780px; margin: 0 auto 26px; }
.esqueleto-kpi { height: 76px; }
.esqueleto-tabela { height: 300px; }
.esqueleto-filtros { height: 118px; margin-bottom: 14px; }
.esqueleto-voltar { height: 18px; width: 70px; margin-bottom: 14px; }
.esqueleto-cabecalho { height: 110px; margin-bottom: 12px; }
.esqueleto-informacao { height: 120px; }
.esqueleto-progresso { height: 96px; }

.roda {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 4px solid var(--borda);
    border-top-color: var(--marca-texto);
    border-radius: 50%;
    animation: girar .8s linear infinite
}

.roda-pequena {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-width: 2px;
    margin: 0 4px 0 0;
    vertical-align: -1px
}

@keyframes girar {
    to {
        transform: rotate(360deg)
    }
}

/* ===== 14. MENSAGENS, BOTÕES, RODAPÉ E AVISOS ===== */
.mensagem-estado {
    padding: 52px 24px;
    text-align: center
}

.mensagem-estado h2 {
    margin: 0 0 6px;
    font-size: 20px
}

.mensagem-estado p {
    margin: 0 auto 14px;
    max-width: 520px;
    color: var(--texto-suave)
}

.botao {
    border: 1px solid var(--marca);
    background: var(--marca);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s
}

.botao svg {
    width: 15px;
    height: 15px
}

.botao.botao-contorno {
    background: none;
    color: var(--marca-texto);
    border-color: var(--borda)
}

.botao.botao-contorno:hover:not(:disabled) {
    background: var(--marca-suave);
    border-color: var(--marca-texto)
}

.botao.botao-pequeno {
    padding: 5px 11px;
    font-size: 13px
}

.botao:disabled {
    opacity: .45;
    cursor: default
}

.rodape {
    border-top: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: 12.5px
}

.rodape-conteudo {
    max-width: 1360px;
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    min-height: 38px
}

.pilula {
    padding: 1px 9px;
    border-radius: 99px;
    background: var(--cor-neutra-fundo);
    font-weight: 600;
    font-size: 12px
}

.pilula-aviso {
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso)
}

.pilula-erro {
    background: var(--cor-excedida-fundo);
    color: var(--cor-excedida)
}

.aviso-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 20px);
    background: var(--texto);
    color: var(--superficie);
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: var(--sombra);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: 50;
    max-width: 90vw
}

.aviso-toast.visivel {
    opacity: 1;
    transform: translate(-50%, 0)
}

details.diagnostico summary {
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 600
}

.diagnostico-corpo {
    padding: 0 16px 16px
}

.diagnostico-corpo h3 {
    font-size: 14px;
    margin: 18px 0 6px
}

/* ===== 15. RESPONSIVIDADE, ACESSIBILIDADE E IMPRESSÃO ===== */
@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

@media (max-width:1100px) {
    .grade-informacoes {
        grid-template-columns: repeat(2, 1fr)
    }

    .duas-colunas {
        grid-template-columns: 1fr
    }

    .filtros {
        position: static
    }
}

@media (max-width:760px) {
    .grade-pedido {
        grid-template-columns: 1fr
    }

    .cabecalho-conteudo {
        padding: 10px 16px;
        gap: 10px
    }

    .nome-sistema {
        display: none
    }

    .busca-cabecalho {
        order: 5;
        flex-basis: 100%
    }

    .busca-cabecalho .busca {
        max-width: none
    }

    .navegacao {
        margin-left: auto
    }

    main {
        padding: 18px 16px 32px
    }

    .kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    h1 {
        font-size: 22px
    }

    .hero h1 {
        font-size: 26px
    }

    .grade-maquinas {
        grid-template-columns: 1fr
    }

    .maquina-numeros {
        grid-template-columns: repeat(2, 1fr)
    }

    .cabecalho-op {
        padding: 16px
    }

    .cabecalho-op-lateral {
        align-items: flex-start
    }

    .campo,
    .campo-curto {
        flex: 1 1 140px
    }

    .rodape-conteudo {
        padding: 9px 16px
    }
}

/* ===== QUEBRA (laranja) e explicações "?" ===== */
.chip-quebra {
    font-style: normal;
    color: var(--cor-quebra);
    font-size: 12px;
    font-weight: 600
}

.kpi.quebra .valor,
.maquina-numeros b.quebra,
.maquina-rodape .dif.quebra {
    color: var(--cor-quebra)
}

.maquina-rodape .dif.excedida {
    color: var(--cor-excedida)
}

.cartao-maquina.quebra {
    border-left-color: var(--cor-quebra)
}

.barra-preenchimento.quebra {
    background: var(--cor-quebra)
}

.maquina-numeros-3 {
    grid-template-columns: repeat(3, 1fr)
}

.barra-dupla {
    display: flex;
    overflow: hidden
}

.barra-dupla .barra-preenchimento {
    border-radius: 0
}

/* "?" das explicações: um contorno discreto que só ganha cor ao passar o mouse (eles aparecem em quase todo
   título; cheios, viravam ruído). */
.ajuda {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: none;
    color: var(--texto-suave);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    transition: background-color var(--tempo-curto) var(--suave), color var(--tempo-curto) var(--suave),
        border-color var(--tempo-curto) var(--suave)
}

.ajuda:hover,
.ajuda:focus {
    border-color: var(--marca-texto);
    background: var(--marca-suave);
    color: var(--marca-texto)
}

/* Balão único das explicações (posicionado pelo app.js; fica acima de tudo e nunca é cortado). */
.balao-ajuda {
    position: fixed;
    z-index: 100;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--texto);
    color: var(--superficie);
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow: var(--sombra);
    pointer-events: none
}

.balao-ajuda[hidden] {
    display: none
}

/* ===== PÁGINA DA OP: faixa de situação, conferência, avisos e guia ===== */
.faixa-situacao {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 12px 0;
    padding: 14px 18px;
    border: 1px solid var(--borda);
    border-left-width: 6px;
    border-radius: 10px;
    background: var(--superficie)
}

.faixa-situacao p {
    margin: 0;
    font-size: 15px
}

.faixa-rotulo {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap
}

.faixa-situacao.excedida {
    border-left-color: var(--cor-excedida);
    background: var(--cor-excedida-fundo)
}

.faixa-situacao.excedida .faixa-rotulo {
    color: var(--cor-excedida)
}

.faixa-situacao.quebra {
    border-left-color: var(--cor-quebra);
    background: var(--cor-quebra-fundo)
}

.faixa-situacao.quebra .faixa-rotulo {
    color: var(--cor-quebra)
}

.faixa-situacao.nao-excedida {
    border-left-color: var(--cor-nao-excedida);
    background: var(--cor-nao-excedida-fundo)
}

.faixa-situacao.nao-excedida .faixa-rotulo {
    color: var(--cor-nao-excedida)
}

.faixa-situacao.sem-plano {
    border-left-color: var(--texto-suave)
}

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

.maquina-conferencia {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso);
    font-size: 12.5px
}

.maquina-conferencia svg,
.avisos-dados summary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.maquina-metrics {
    margin-top: 8px;
    font-size: 12px
}

.avisos-dados {
    padding: 12px 16px
}

.avisos-dados summary {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--cor-aviso)
}

.avisos-dados ul {
    margin: 10px 0 0;
    padding-left: 20px
}

@media (max-width: 640px) {
    .faixa-situacao {
        flex-direction: column;
        align-items: flex-start
    }
}

/* ===== INÍCIO: KPIs e gráficos ===== */
.kpis-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grafico-barras {
    display: grid;
    gap: 4px
}

.grafico-linha {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr 56px;
    gap: 10px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    color: inherit
}

.grafico-linha:hover {
    background: var(--destaque-hover)
}

.grafico-rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px
}

.grafico-trilho {
    height: 10px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--cor-neutra-fundo)
}

.grafico-barra {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: var(--cor-quebra);
    transition: width .7s cubic-bezier(.2, .7, .2, 1)
}

.grafico-barra.perda {
    background: var(--cor-perda)
}

.grafico-barra.excedida {
    background: var(--cor-excedida)
}

.grafico-dica {
    margin: 8px 16px 0;
    font-size: 12px
}

.ranking {
    padding: 0 0 12px
}

.ranking .grafico-barras {
    padding: 0 10px
}

.ranking-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    padding: 0 16px 12px
}

/* Barra 100% com a situação de todas as OPs */
.distribuicao {
    padding-bottom: 14px
}

.distribuicao-barra {
    display: flex;
    height: 18px;
    margin: 0 16px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--cor-neutra-fundo)
}

.distribuicao-parte {
    display: block;
    height: 100%;
    background: var(--cor-nao-excedida);
    transition: filter .12s
}

.distribuicao-parte:hover {
    filter: brightness(1.15)
}

.distribuicao-parte.excedida {
    background: var(--cor-excedida)
}

.distribuicao-parte.quebra {
    background: var(--cor-quebra)
}

.distribuicao-parte.sem-plano {
    background: var(--texto-suave);
    opacity: .45
}

.distribuicao-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 12px 16px 0;
    font-size: 13px
}

.distribuicao-legenda a {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: inherit;
    padding: 2px 6px;
    border-radius: 6px
}

.distribuicao-legenda a:hover {
    background: var(--destaque-hover)
}

.distribuicao-legenda small {
    color: var(--texto-suave)
}

.grafico-valor {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

@media (max-width: 900px) {
    .kpis-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* ===== BARRA LATERAL (navegação) ===== */
.estrutura {
    flex: 1;
    display: flex;
    width: 100%
}

.estrutura > main {
    min-width: 0
}

.lateral {
    flex-shrink: 0;
    width: 236px;
    position: sticky;
    top: var(--altura-cabecalho, 60px);
    align-self: flex-start;
    height: calc(100vh - var(--altura-cabecalho, 60px));
    overflow-y: auto;
    padding: 16px 12px;
    border-right: 1px solid var(--borda);
    background: var(--superficie)
}

.lateral-grupo {
    display: grid;
    gap: 2px;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--borda)
}

.lateral-grupo:last-child {
    border-bottom: 0
}

.lateral-titulo {
    padding: 0 10px 6px;
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 600
}

.lateral-item {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--texto);
    font-weight: 500
}

/* "Instalar aplicativo" é botão, mas tem a cara dos outros itens do menu */
button.lateral-item {
    width: 100%;
    border: 0;
    background: none;
    text-align: left
}

.lateral-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--texto-suave)
}

.lateral-item:hover {
    background: var(--destaque-hover)
}

.lateral-item.ativo {
    background: var(--marca-suave);
    color: var(--marca-texto);
    font-weight: 600
}

.lateral-item.ativo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--acento)
}

.lateral-item.ativo svg {
    color: var(--marca-texto)
}

.lateral-rotulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lateral-contagem {
    color: var(--texto-suave);
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

.lateral-ponto {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cor-nao-excedida)
}

.lateral-ponto.excedida {
    background: var(--cor-excedida)
}

.lateral-ponto.quebra {
    background: var(--cor-quebra)
}

.lateral-ponto.sem-plano {
    background: var(--texto-suave);
    opacity: .5
}

.lateral-op {
    gap: 8px
}

.lateral-op-numero {
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.lateral-op-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texto-suave);
    font-size: 12.5px
}

.lateral-vazio {
    margin: 0;
    padding: 0 10px;
    color: var(--texto-suave);
    font-size: 12.5px
}

.botao-menu,
.fundo-menu {
    display: none
}

.cabecalho-conteudo,
.rodape-conteudo {
    max-width: none
}

@media (max-width: 1000px) {
    .botao-menu {
        display: inline-grid
    }

    .lateral {
        position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: min(280px, 85vw);
        box-shadow: var(--sombra);
        transform: translateX(-105%);
        transition: transform .2s ease;
        visibility: hidden
    }

    body.menu-aberto .lateral {
        transform: none;
        visibility: visible
    }

    body.menu-aberto .fundo-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(10, 20, 35, .4)
    }
}

@media print {
    .cabecalho,
    .rodape,
    .aviso-toast,
    .acoes-op,
    .botao-voltar,
    .botao-icone,
    .filtros,
    .paginacao,
    .cartao-rodape,
    .registros-filtros,
    .registros-mais,
    .lateral,
    .balao-ajuda,
    .ajuda {
        display: none !important
    }

    body {
        background: #fff;
        color: #000
    }

    :root {
        --fundo: #fff;
        --superficie: #fff;
        --texto: #000;
        --texto-suave: #444;
        --borda: #bbb
    }

    main {
        padding: 0;
        max-width: none
    }

    .tabela-expansivel .linha-extra {
        display: table-row
    }

    .cartao {
        break-inside: avoid
    }
}

/* Atalhos Hoje/Ontem/Anteontem no filtro de data das tabelas (tabelas.js). */
.menu-coluna-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 2px 4px 6px;
    font-size: 0.85em;
}

/* "Exportar para Excel" na barra de filtros das telas de análise (app.js: exportarTelaExcel). */
.painel-exportar {
    height: 36px;
    white-space: nowrap;
}

/* Cartão atendido na página da OP (views_atendimento.js). */
.secao-atendimento {
    margin-top: 18px;
    overflow: hidden
}

.secao-atendimento .cartao-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.secao-atendimento table {
    min-width: 0
}

.secao-atendimento .vazio {
    padding: 4px 16px 14px;
    margin: 0
}

.atendimento-resumo {
    margin: 0;
    padding: 4px 16px 12px;
}

/* Filtro de data da lista de OPs: Dia, De/Até e "Data de" só aparecem com o período que pede cada um. */
.filtros-ops .campo[hidden] {
    display: none;
}