/* ==========================================================================\n   ANÁLISE DE ESTOQUE — REVISÃO VISUAL 2026\n   Camada visual não destrutiva. Mantém IDs, estrutura, JS e integrações atuais.\n   Conceito: sistema operacional/terminal moderno — sóbrio, denso e legível.\n   ========================================================================== */

:root {
    --vr-bg: #05090b;
    --vr-bg-deep: #030607;
    --vr-surface-1: #0b1114;
    --vr-surface-2: #10191d;
    --vr-surface-3: #152126;
    --vr-surface-4: #1a292f;
    --vr-inset: #071014;
    --vr-line: #314349;
    --vr-line-soft: #223239;
    --vr-line-strong: #496169;
    --vr-text: #eef4f4;
    --vr-text-soft: #c4d0d2;
    --vr-muted: #8fa0a5;
    --vr-accent: #20d8d0;
    --vr-accent-soft: rgba(32, 216, 208, .12);
    --vr-accent-line: rgba(32, 216, 208, .46);
    --vr-warning: #d9ad50;
    --vr-danger: #d55b55;
    --vr-success: #68aa78;
    --vr-radius: 8px;
    --vr-radius-sm: 5px;
    --vr-shadow: 0 10px 30px rgba(0, 0, 0, .24);
    --vr-shadow-soft: 0 5px 14px rgba(0, 0, 0, .18);
    --vr-font-ui: Arial, Helvetica, sans-serif;
    --vr-font-system: Consolas, "Lucida Console", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   BASE — elimina o aspecto neon/cyber sem trocar a identidade escura atual
   -------------------------------------------------------------------------- */
html,
body {
    color-scheme: dark;
    background: var(--vr-bg-deep);
}

body {
    color: var(--vr-text-soft);
    background: var(--vr-bg-deep);
}

.container {
    background: var(--vr-bg);
}

.conteudo {
    background: var(--vr-bg);
    scrollbar-color: var(--vr-line-strong) var(--vr-bg-deep);
}

::selection {
    color: #fff;
    background: rgba(32, 216, 208, .34);
}

/* Barra de rolagem discreta, com aparência de sistema */
*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: var(--vr-bg-deep);
}

*::-webkit-scrollbar-thumb {
    border: 3px solid var(--vr-bg-deep);
    border-radius: 999px;
    background: #3b5057;
}

*::-webkit-scrollbar-thumb:hover {
    background: #536b73;
}

/* --------------------------------------------------------------------------
   CABEÇALHO — menos “painel gamer”, mais software corporativo/industrial
   -------------------------------------------------------------------------- */
.topo {
    height: 76px;
    padding: 0 24px;
    background: #080e11;
    border-bottom: 1px solid var(--vr-line);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

.marca-produto {
    gap: 13px;
}

.icone-marca {
    width: 36px;
    height: 36px;
    border: 1px solid var(--vr-accent-line);
    border-radius: 7px;
    color: var(--vr-accent);
    background: #0d171b;
    transform: none;
    box-shadow: none;
    font-family: var(--vr-font-system);
    letter-spacing: -.04em;
}

.topo h1 {
    color: var(--vr-text);
    font-size: 24px;
    font-family: var(--vr-font-system);
    font-weight: 700;
    letter-spacing: .035em;
}

.topo-acoes {
    gap: 8px;
}

.botao-barra {
    height: 40px;
    min-width: 132px;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--vr-line);
    border-radius: 6px;
    background: var(--vr-surface-2);
    color: var(--vr-text-soft);
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
}

.botao-barra:hover {
    border-color: var(--vr-line-strong);
    background: var(--vr-surface-3);
    color: var(--vr-text);
    box-shadow: none;
}

.botao-barra:focus-visible,
.item-lateral:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(32, 216, 208, .66);
    outline-offset: 2px;
}

.icone-botao {
    color: var(--vr-accent);
    font-size: 16px;
}

#patenteUsuarioLogado {
    color: #d6b768;
}

.opcoes-usuario {
    top: 46px;
    border: 1px solid var(--vr-line);
    border-radius: var(--vr-radius);
    background: var(--vr-surface-2);
    box-shadow: var(--vr-shadow);
}

.opcoes-usuario button {
    color: var(--vr-text-soft);
    border-bottom: 1px solid var(--vr-line-soft);
}

.opcoes-usuario button:last-child {
    border-bottom: 0;
}

.opcoes-usuario button:hover {
    background: var(--vr-surface-3);
    color: var(--vr-text);
}

/* --------------------------------------------------------------------------
   MENU LATERAL — navegação mais compacta, separação clara entre itens
   -------------------------------------------------------------------------- */
.lateral {
    width: 242px;
    padding: 16px 10px;
    background: #070c0f;
    border-right: 1px solid var(--vr-line);
}

.menu-lateral {
    gap: 5px;
}

.item-lateral {
    height: 46px;
    gap: 11px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #acb9bc;
    font-size: 14px;
    font-weight: 600;
}

.item-lateral:hover {
    border-color: var(--vr-line-soft);
    background: var(--vr-surface-1);
    color: var(--vr-text);
}

.item-lateral.ativo {
    border: 1px solid var(--vr-line);
    border-left: 3px solid var(--vr-accent);
    background: var(--vr-surface-2);
    color: var(--vr-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .012);
}

.icone-lateral {
    width: 22px;
    color: #7db7b4;
    font-size: 18px;
    text-align: center;
}

.item-lateral.ativo .icone-lateral {
    color: var(--vr-accent);
}

/* --------------------------------------------------------------------------
   HIERARQUIA VISUAL GERAL — páginas, painéis, cards e subblocos
   -------------------------------------------------------------------------- */
.tela {
    color: var(--vr-text-soft);
}

/* Superfícies principais já existentes no projeto */
.painel-parametros,
.bloco-dashboard-principal,
.card-filial-dashboard,
.bloco-insight-dashboard,
.painel-subaba-estatisticas,
.bloco-filial-acoes,
.painel-resumo-acoes,
.formulario-solicitacao-acao,
.entrada-solicitacao-acao,
.card-solicitacao-acao,
.bloco-configuracao-lubrificantes,
.painel-upload-lubrificantes,
.relatorio-transferencias,
.historico-lub,
.etq-preparar,
.etq-ativos,
.etq-resumo,
.etq-topo {
    border-color: var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
    box-shadow: var(--vr-shadow-soft);
}

/* Subblocos internos precisam parecer realmente um segundo nível */
.conteudo-solicitacao-form,
.descricao-execucao-solicitacao,
.comentario-revisao-solicitacao,
.bloco-leitura-inicial-lubrificantes,
.historico-lub-dados,
.historico-lub-lancamento,
.etq-promocao,
.etq-exposta,
.relatorio-transferencias .grupo-relatorio-transferencias,
.mes-frequencia-fabrica,
.inventario-produto-info,
.inventario-detalhe-item,
.inventario-acao-funcionario {
    border-color: var(--vr-line-soft) !important;
    border-radius: var(--vr-radius-sm) !important;
    background: var(--vr-inset) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

/* Faixas de título: linguagem inspirada em sistemas antigos, sem perder o moderno */
.cabecalho-bloco-dashboard,
.cabecalho-solicitacao-form,
.titulo-grupo-parametros,
.titulo-bloco-configuracao-lubrificantes,
.titulo-bloco-parametros-equipamentos,
.subtitulo-acoes-pendentes,
.titulo-tabela-estatisticas,
.titulo-tabela-lubrificantes,
.titulo-grupo-medias-logistica,
.titulo-area-card-dashboard {
    min-height: 38px;
    border-bottom: 1px solid var(--vr-line) !important;
    background: var(--vr-surface-2) !important;
    color: var(--vr-text) !important;
    box-shadow: inset 3px 0 0 rgba(32, 216, 208, .72);
    font-family: var(--vr-font-system);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

/* O card reserva espaço para a faixa de título de 38px, sem sobrepor os dados. */
.card-filial-dashboard > .medidores-dashboard,
.card-filial-dashboard > .obsolescencia-card-dashboard {
    min-width: 0;
    padding-top: 64px;
}

.card-filial-dashboard .titulo-area-card-dashboard {
    padding: 8px 12px;
}

.card-filial-dashboard .linha-alerta-obsolescencia {
    min-width: 0;
    height: auto;
    min-height: 36px;
    padding: 6px 0;
    gap: 8px 12px;
    flex-wrap: wrap;
}

.card-filial-dashboard .linha-alerta-obsolescencia strong {
    margin-left: auto;
    white-space: nowrap;
}

/* Labels pequenos como “rótulos de terminal” */
.topo-card-solicitacao span,
.cabecalho-solicitacao-form span,
.bloco-topo-lubrificantes span,
.bloco-topo-recebimento span,
.bloco-topo-requisicoes span,
.bloco-topo-equipamentos span,
.inventario-topo span,
.inventario-gestor-topo span,
.inventario-card span,
.inventario-produto-info span,
.etq-topo span,
.etq-resumo span,
.card-metrica-dashboard span,
.card-saude-filial-dashboard span {
    color: var(--vr-muted) !important;
    font-family: var(--vr-font-system);
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Títulos relevantes ganham massa tipográfica */
.topo-card-solicitacao h3,
.cabecalho-solicitacao-form strong,
.bloco-topo-lubrificantes h2,
.bloco-topo-recebimento h2,
.bloco-topo-requisicoes h2,
.bloco-topo-equipamentos h2,
.inventario-topo h2,
.inventario-gestor-topo h3,
.etq-topo h2 {
    color: var(--vr-text) !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* --------------------------------------------------------------------------
   INPUTS / SELECTS / TEXTAREAS — controles separam-se do fundo
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    border-color: #3a4d54 !important;
    border-radius: 5px !important;
    background: #071014 !important;
    color: var(--vr-text) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover {
    border-color: #50656d !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: var(--vr-accent-line) !important;
    box-shadow: 0 0 0 2px rgba(32, 216, 208, .08), inset 0 1px 3px rgba(0, 0, 0, .2) !important;
}

input::placeholder,
textarea::placeholder {
    color: #687a7f !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #1fb4ae;
}

/* --------------------------------------------------------------------------
   BOTÕES — contraste por função, não por excesso de cor
   -------------------------------------------------------------------------- */
.botao-editor-historico,
.botao-aceitar-acao,
.inventario-voltar,
.inventario-trilha button,
.inventario-filtros button,
.inventario-filiais button,
.inventario-atribuicao button,
.inventario-recontagem button,
.inventario-acao-funcionario button,
.etq-popup button,
.historico-lub button,
.acoes-acompanhamento button {
    border-color: var(--vr-line-strong) !important;
    border-radius: 5px !important;
    background: var(--vr-surface-2) !important;
    color: var(--vr-text-soft) !important;
    box-shadow: none !important;
    font-weight: 700;
}

.botao-editor-historico:hover,
.botao-aceitar-acao:hover,
.inventario-voltar:hover,
.inventario-trilha button:hover,
.inventario-filtros button:hover,
.inventario-filiais button:hover,
.inventario-atribuicao button:hover,
.inventario-recontagem button:hover,
.inventario-acao-funcionario button:hover,
.etq-popup button:hover,
.historico-lub button:hover,
.acoes-acompanhamento button:hover {
    border-color: #668089 !important;
    background: var(--vr-surface-3) !important;
    color: var(--vr-text) !important;
}

.botao-editor-historico.ativa,
.inventario-filtros button.ativo,
.inventario-filiais button.ativo,
.etq-abas button[aria-pressed="true"],
.abas-filiais-acoes button.ativa,
.modo-lubrificantes.ativo {
    border-color: var(--vr-accent-line) !important;
    background: var(--vr-accent-soft) !important;
    color: #bdf4f1 !important;
    box-shadow: inset 0 -2px 0 rgba(32, 216, 208, .68) !important;
}

.botao-acao-destaque,
.inventario-confirmar,
.botao-auth,
.botao-salvar-parametros {
    border: 1px solid rgba(32, 216, 208, .48) !important;
    border-radius: 5px !important;
    background: #153236 !important;
    color: #dffbfa !important;
    box-shadow: none !important;
}

.botao-acao-destaque:hover,
.inventario-confirmar:hover,
.botao-auth:hover,
.botao-salvar-parametros:hover {
    border-color: rgba(32, 216, 208, .78) !important;
    background: #1b4146 !important;
}

/* --------------------------------------------------------------------------
   TABELAS E LISTAS — cada linha precisa começar e terminar visualmente
   -------------------------------------------------------------------------- */
.cabecalho-estatisticas div,
.cabecalho-lubrificantes div,
.cabecalho-detalhe-dashboard div,
.linha-relatorio-recebimento.cabecalho > div,
.linha-peca-pedido.cabecalho div,
.linha-saida-requisicao.cabecalho > div,
.linha-item-requisicao.cabecalho > div,
.tabela-relatorio-transferencias th,
.historico-lub thead th,
.etq-tabela th,
.linha-tabela-usuarios-empresa.cabecalho span {
    background: #121d21 !important;
    color: #aababc !important;
    border-color: var(--vr-line) !important;
    font-family: var(--vr-font-system);
    font-size: 10px !important;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.linha-acoes-pendentes div,
.tabela-relatorio-transferencias td,
.historico-lub tbody th,
.historico-lub tbody td,
.etq-tabela td,
.linha-tabela-usuarios-empresa span {
    border-color: var(--vr-line-soft) !important;
}

.linha-acoes-pendentes:not(.cabecalho-detalhe-dashboard):hover div,
.tabela-relatorio-transferencias tbody tr:hover td,
.historico-lub tbody tr:hover > *,
.etq-tabela tbody tr:hover td {
    background: #101b1f !important;
}

/* --------------------------------------------------------------------------
   DASHBOARD — cards limpos e com leitura rápida
   -------------------------------------------------------------------------- */
.dashboard-novo,
.dashboard-principal,
.estatisticas-conteudo,
.acoes-pendentes-conteudo,
.lubrificantes,
.recebimento,
.requisicoes,
.equipamentos {
    background: transparent !important;
}

.card-metrica-dashboard,
.card-saude-filial-dashboard {
    border-color: var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
    box-shadow: var(--vr-shadow-soft);
}

.card-metrica-dashboard:hover,
.card-saude-filial-dashboard:hover,
.card-filial-dashboard:hover {
    border-color: var(--vr-line-strong) !important;
    transform: none !important;
    box-shadow: var(--vr-shadow-soft) !important;
}

.card-metrica-dashboard strong,
.card-saude-filial-dashboard strong,
.resumo-filial-dashboard h2 {
    color: var(--vr-text) !important;
}

/* Estados ainda têm cor, mas apenas como sinal operacional */
.card-metrica-dashboard.metrica-risco,
.inventario-codigo-falta {
    border-left: 4px solid #b65350 !important;
}

.card-metrica-dashboard.metrica-alerta,
.inventario-codigo-sobra {
    border-left: 4px solid #b98b3e !important;
}

.card-metrica-dashboard.metrica-ok,
.inventario-codigo-correto,
.inventario-completo {
    border-left: 4px solid #5b9569 !important;
}

/* --------------------------------------------------------------------------
   AÇÕES PENDENTES / SOLICITAÇÕES — contraste forte entre níveis
   -------------------------------------------------------------------------- */
.acoes-pendentes-conteudo {
    padding: 20px !important;
}

.abas-filiais-acoes {
    min-height: 42px;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: #080f12 !important;
    overflow-x: auto;
}

.abas-filiais-acoes button {
    min-width: 86px;
    border: 1px solid transparent !important;
    border-radius: 5px;
    color: var(--vr-muted);
    font-family: var(--vr-font-system);
    font-size: 11px;
}

.abas-filiais-acoes button:hover {
    color: var(--vr-text);
    background: var(--vr-surface-2) !important;
    box-shadow: none;
}

.painel-acoes-pecas,
.painel-acoes-lubrificantes {
    border: 1px solid var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: #080f12 !important;
}

.subtitulo-acoes-pendentes {
    color: #cfe5e4 !important;
}

.card-solicitacao-acao {
    border-left: 4px solid #4b7778 !important;
    overflow: hidden;
}

.card-solicitacao-acao.atrasada {
    border-color: #8f4a46 !important;
    border-left-color: #c35c55 !important;
}

.card-solicitacao-acao.status-solicitacao-aguardando-aprovacao {
    border-left-color: #c59d4c !important;
}

.card-solicitacao-acao.status-solicitacao-reaberta {
    border-left-color: #bd554f !important;
}

.topo-card-solicitacao {
    min-height: 60px;
    align-items: center;
    padding: 12px 15px;
    background: var(--vr-surface-2) !important;
    border-bottom: 1px solid var(--vr-line) !important;
}

.topo-card-solicitacao h3 {
    margin-top: 5px;
    font-size: 17px;
}

.meta-solicitacao {
    gap: 0;
    margin: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--vr-line-soft);
    background: #0c1519;
}

.meta-solicitacao > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 35px;
    padding: 0 13px 0 0;
    margin-right: 13px;
    color: #98a9ad !important;
    font-family: var(--vr-font-system);
    font-size: 10px !important;
}

.meta-solicitacao > span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    width: 1px;
    height: 17px;
    background: var(--vr-line-soft);
}

.resumo-solicitacao-concluida {
    display: block;
    list-style: none;
    cursor: pointer;
}
.resumo-solicitacao-concluida::-webkit-details-marker { display: none; }
.resumo-solicitacao-concluida:focus-visible { outline: 2px solid var(--vr-accent); outline-offset: -2px; }
.seta-solicitacao-concluida {
    display: block;
    padding: 3px 15px;
    text-align: right;
    color: var(--vr-muted);
}
.seta-solicitacao-concluida::after { content: '⌄'; font-size: 20px; }
.solicitacao-concluida[open] > summary .seta-solicitacao-concluida::after { content: '⌃'; }
.detalhes-solicitacao-concluida > .card-solicitacao-acao {
    margin: 0;
    border: 0 !important;
    border-radius: 0;
}
.detalhes-solicitacao-concluida > .card-solicitacao-acao > .topo-card-solicitacao,
.detalhes-solicitacao-concluida > .card-solicitacao-acao > .meta-solicitacao { display: none; }
.detalhes-solicitacao-concluida > .acoes-aprovada-solicitacao { padding: 12px 14px; }

.descricao-execucao-solicitacao {
    position: relative;
    margin: 14px;
    padding: 13px 14px 14px;
    border-left: 3px solid #446169 !important;
}

.descricao-execucao-solicitacao span,
.titulo-resposta-solicitacao {
    margin-bottom: 8px;
    color: #9fbcbd !important;
    font-family: var(--vr-font-system);
    font-size: 10px !important;
    letter-spacing: .07em;
}

.descricao-execucao-solicitacao p {
    color: #e4ebec !important;
    font-size: 14px;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   POP-UP DE ACOMPANHAMENTO — foco especial solicitado pelo usuário
   -------------------------------------------------------------------------- */
.dialogo-acompanhamento {
    width: min(820px, calc(100vw - 32px));
    max-height: 88dvh;
    padding: 0;
    border: 1px solid #51656b;
    border-radius: 10px;
    background: #090f12;
    color: var(--vr-text-soft);
    box-shadow: 0 26px 75px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255,255,255,.02);
    overflow: auto;
}

.dialogo-acompanhamento::backdrop {
    background: rgba(0, 5, 7, .78);
    backdrop-filter: blur(2px);
}

.dialogo-acompanhamento > h2,
.dialogo-acompanhamento > form > h2 {
    margin: 0;
    padding: 17px 20px 14px;
    border-bottom: 1px solid var(--vr-line);
    background: #111a1e;
    color: var(--vr-text);
    font-family: var(--vr-font-system);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    box-shadow: inset 4px 0 0 var(--vr-accent);
}

.dialogo-acompanhamento > p {
    margin: 0;
    padding: 8px 20px;
    border-bottom: 1px solid var(--vr-line-soft);
    background: #0b1417;
    color: var(--vr-muted);
    font-family: var(--vr-font-system);
    font-size: 10px;
    letter-spacing: .035em;
}

.dialogo-acompanhamento > .card-solicitacao-acao {
    margin: 16px;
    border: 1px solid var(--vr-line-strong) !important;
    border-left: 4px solid var(--vr-accent) !important;
    box-shadow: var(--vr-shadow-soft);
}

.dialogo-acompanhamento .topo-card-solicitacao {
    padding: 14px 16px;
    background: #162227 !important;
}

.dialogo-acompanhamento .topo-card-solicitacao span {
    color: #8faaa9 !important;
}

.dialogo-acompanhamento .topo-card-solicitacao h3 {
    font-size: 18px;
    line-height: 1.3;
}

.dialogo-acompanhamento .meta-solicitacao {
    padding: 5px 15px;
    background: #0d171a;
}

.dialogo-acompanhamento .descricao-execucao-solicitacao {
    margin: 15px;
    min-height: 92px;
    padding: 14px 15px;
    background: #071014 !important;
    border: 1px solid #2c4047 !important;
    border-left: 4px solid #506b72 !important;
}

.dialogo-acompanhamento .descricao-execucao-solicitacao span {
    display: inline-block;
    margin: -14px 0 11px -15px;
    padding: 7px 10px 6px 11px;
    border-right: 1px solid #2c4047;
    border-bottom: 1px solid #2c4047;
    background: #111c20;
    color: #a9babb !important;
}

.dialogo-acompanhamento .descricao-execucao-solicitacao p {
    font-size: 14px;
    line-height: 1.65;
}

.dialogo-acompanhamento .acoes-acompanhamento {
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 12px 15px 14px;
    border-top: 1px solid var(--vr-line-soft);
    background: #0b1417;
}

.dialogo-acompanhamento .acoes-acompanhamento button {
    min-height: 36px;
    padding: 0 15px;
    font-family: var(--vr-font-system);
    font-size: 11px;
    letter-spacing: .025em;
}

.dialogo-acompanhamento .acoes-acompanhamento .botao-acao-destaque {
    border-color: rgba(32, 216, 208, .55) !important;
    background: #153337 !important;
    color: #ddfbf9 !important;
}

.dialogo-acompanhamento form {
    padding-bottom: 0;
}

.dialogo-acompanhamento form > label,
.dialogo-acompanhamento form > textarea,
.dialogo-acompanhamento form > [role="alert"] {
    margin-left: 20px;
    margin-right: 20px;
}

.dialogo-acompanhamento form > label {
    display: block;
    margin-top: 18px;
    color: var(--vr-text-soft);
    font-size: 13px;
    line-height: 1.5;
}

.dialogo-acompanhamento textarea {
    width: calc(100% - 40px);
    margin-top: 10px;
    padding: 12px 13px;
    border: 1px solid #40565e !important;
    border-radius: 6px !important;
    background: #061014 !important;
}

.dialogo-acompanhamento [role="alert"] {
    min-height: 20px;
    padding-top: 7px;
    color: #e18781;
    font-size: 12px;
}

.evento-acompanhamento {
    margin: 0 14px;
    padding: 11px 12px;
    border: 0;
    border-top: 1px solid var(--vr-line-soft);
    background: transparent;
}

.evento-acompanhamento strong {
    color: var(--vr-text-soft);
    font-family: var(--vr-font-system);
    font-size: 11px;
}

.evento-acompanhamento div,
.evento-acompanhamento p {
    color: var(--vr-muted);
    font-size: 12px;
    line-height: 1.5;
}

.card-solicitacao-acao details {
    margin: 0 14px 12px;
    border: 1px solid var(--vr-line-soft);
    border-radius: 5px;
    overflow: hidden;
    background: #081114;
}

.card-solicitacao-acao details > summary {
    padding: 9px 11px;
    cursor: pointer;
    color: #a8b9bb;
    background: #10191d;
    font-family: var(--vr-font-system);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   RECEBIMENTO / REQUISIÇÕES / LUBRIFICANTES — cabeçalhos em camadas
   -------------------------------------------------------------------------- */
.topo-recebimento,
.topo-requisicoes,
.topo-lubrificantes,
.topo-equipamentos {
    gap: 10px !important;
    padding: 12px !important;
    background: #080e11 !important;
    border-bottom-color: var(--vr-line) !important;
}

.bloco-topo-recebimento,
.bloco-topo-requisicoes,
.bloco-topo-lubrificantes,
.bloco-topo-equipamentos {
    border: 1px solid var(--vr-line-soft) !important;
    border-radius: var(--vr-radius-sm) !important;
    background: var(--vr-surface-1) !important;
}

.painel-upload-recebimento,
.painel-consulta-requisicoes,
.painel-saida-requisicoes {
    border-color: var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
}

/* --------------------------------------------------------------------------
   INVENTÁRIO — mantém semântica operacional, melhora profundidade
   -------------------------------------------------------------------------- */
.inventario-conteudo,
.inventario-gestor-area {
    background: var(--vr-bg) !important;
    color: var(--vr-text-soft) !important;
}

.inventario-topo,
.inventario-gestor-topo {
    border: 1px solid var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
    box-shadow: var(--vr-shadow-soft);
}

.inventario-card,
.inventario-resumo-card,
.inventario-produto {
    border-color: var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
    box-shadow: var(--vr-shadow-soft);
}

.inventario-card:hover,
.inventario-resumo-card:hover {
    border-color: var(--vr-line-strong) !important;
    background: var(--vr-surface-2) !important;
}

.inventario-card strong,
.inventario-produto-info strong,
.inventario-resumo-card strong {
    color: var(--vr-text) !important;
}

.inventario-tags b,
.inventario-acao-status {
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   PARÂMETROS / ADMIN — blocos dentro de blocos ganham separação
   -------------------------------------------------------------------------- */
.menu-parametros {
    border-left-color: var(--vr-line) !important;
    background: #080e11 !important;
}

.titulo-menu-parametros {
    color: var(--vr-muted) !important;
    font-family: var(--vr-font-system);
    letter-spacing: .055em;
}

.item-menu-parametros {
    border-color: transparent !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #a6b4b7 !important;
}

.item-menu-parametros:hover {
    border-color: var(--vr-line-soft) !important;
    background: var(--vr-surface-1) !important;
}

.item-menu-parametros.ativo {
    border-color: var(--vr-line) !important;
    border-left: 3px solid var(--vr-accent) !important;
    background: var(--vr-surface-2) !important;
    color: var(--vr-text) !important;
}

.bloco-parametros-equipamentos,
.card-empresa-admin,
.grade-cadastro-empresa,
.grade-edicao-empresa,
.grade-cadastro-usuario {
    border-color: var(--vr-line) !important;
    border-radius: var(--vr-radius) !important;
    background: var(--vr-surface-1) !important;
}

.card-empresa-admin:hover,
.card-empresa-admin.selecionada {
    border-color: var(--vr-line-strong) !important;
    box-shadow: var(--vr-shadow-soft) !important;
}

/* --------------------------------------------------------------------------
   LOGIN — mesma identidade visual, menos decoração
   -------------------------------------------------------------------------- */
.tela-autenticacao {
    background: #05090b;
}

.painel-auth {
    border-color: var(--vr-line);
    border-radius: 10px;
    background: var(--vr-surface-1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

.marca-auth {
    background: var(--vr-surface-2);
    border-bottom-color: var(--vr-line);
}

.marca-auth span {
    color: #91aaa9;
    font-family: var(--vr-font-system);
    letter-spacing: .055em;
}

.marca-auth h1 {
    color: var(--vr-text);
}

.abas-auth {
    border-bottom-color: var(--vr-line);
}

.aba-auth {
    color: var(--vr-muted);
    background: #0b1316;
    border-right-color: var(--vr-line-soft);
}

.aba-auth.ativa,
.aba-auth:hover {
    color: var(--vr-text);
    background: var(--vr-surface-2);
    box-shadow: inset 0 -2px 0 var(--vr-accent);
}

/* --------------------------------------------------------------------------
   ALERTAS / BADGES — cor apenas onde a informação realmente precisa sinalizar
   -------------------------------------------------------------------------- */
.indicador-acoes-pendentes {
    background: #b84b46;
    border-color: #c56a65;
    box-shadow: none;
}

.aviso-bloqueio-acompanhamento {
    border-color: #8f713a !important;
    border-left-color: #d0a34c !important;
    border-radius: 6px !important;
    background: #211b10 !important;
    color: #e2c483 !important;
}

.badge-alerta-estoque,
.inventario-badge-recontar,
.inventario-badge-ausente {
    border-radius: 4px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVO — conserva a arquitetura atual e só ajusta densidade
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .topo {
        padding: 0 16px;
    }

    .topo-acoes {
        gap: 5px;
    }

    .botao-barra {
        min-width: 0;
        padding: 0 10px;
    }

    .lateral {
        width: 226px;
    }
}

@media (max-width: 860px) {
    .topo {
        height: 64px;
    }

    .topo h1 {
        font-size: 18px;
    }

    .icone-marca {
        width: 32px;
        height: 32px;
    }

    .lateral {
        box-shadow: 16px 0 40px rgba(0, 0, 0, .48);
    }

    .acoes-pendentes-conteudo {
        padding: 12px !important;
    }
}

@media (max-width: 600px) {
    .dialogo-acompanhamento {
        width: calc(100vw - 16px);
        max-height: 92dvh;
        border-radius: 8px;
    }

    .dialogo-acompanhamento > h2,
    .dialogo-acompanhamento > form > h2 {
        padding: 14px 15px 12px;
        font-size: 13px;
    }

    .dialogo-acompanhamento > p {
        padding: 7px 15px;
    }

    .dialogo-acompanhamento > .card-solicitacao-acao {
        margin: 10px;
    }

    .dialogo-acompanhamento .meta-solicitacao > span {
        width: 100%;
        min-height: 28px;
        margin: 0;
        padding: 0;
    }

    .dialogo-acompanhamento .meta-solicitacao > span::after {
        display: none;
    }

    .dialogo-acompanhamento .descricao-execucao-solicitacao {
        margin: 10px;
    }

    .dialogo-acompanhamento .acoes-acompanhamento {
        padding: 10px;
    }

    .dialogo-acompanhamento .acoes-acompanhamento button {
        flex: 1 1 120px;
    }

    .topo-card-solicitacao h3 {
        font-size: 15px;
    }
}

/* Fim da camada visual. */