/* Refinamento visual compartilhado. Mantém as cores e os estados da marca. */
@media screen {
  :root {
    --fonte: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --raio: 16px;
    --raio-sm: 9px;
    --sombra: 0 3px 16px rgba(0, 56, 101, .045);
    --sombra-hover: 0 8px 24px rgba(0, 56, 101, .09);
  }
  body, button, input, select, textarea { font-family: var(--fonte) !important; }
  body { line-height: 1.55; }
  .app::before { display: none; }
  .conteudo { min-width: 0; }
  .pagina { width: 100%; max-width: 1600px; padding: 30px 32px 48px !important; }

  /* Faixa institucional e navegação com áreas de toque mais confortáveis. */
  body .app .topo {
    padding: 24px 32px 22px !important;
    background: var(--rumo-azul) !important;
    border-bottom: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 56, 101, .12) !important;
    gap: 20px;
  }
  .topo::after { width: 100%; height: 3px !important; }
  body .app .topo h1 { color: #fff !important; font-size: clamp(23px, 2vw, 30px) !important; letter-spacing: -.8px !important; line-height: 1.2; }
  body .app .topo .topo-kicker { color: var(--rumo-verde-claro) !important; font-size: 10px !important; letter-spacing: 1.5px !important; margin-bottom: 7px; }
  body .app .topo .subtitulo { color: #d7e0e5 !important; font-size: 13px !important; margin-top: 6px; max-width: 620px; }
  .topo > .flex { min-width: 0; }
  .topo-identidade { min-width: 0; }
  .topo-acoes { gap: 10px !important; }
  .menu-dropdowns { flex-wrap: wrap; gap: 6px; }
  .topo .btn { min-height: 38px; }
  body .app .topo .menu-dd-botao.ativo { background: #e3f4ef !important; border-color: var(--rumo-verde-claro) !important; color: #003865 !important; }
  .menu-dd-botao::before { display: none; }
  body .app .menu-dd-painel { border-radius: 12px !important; padding: 8px; box-shadow: 0 16px 48px rgba(0, 35, 65, .22) !important; }
  .menu-dd-link { border-radius: 7px !important; padding: 11px 12px !important; }

  /* Superfícies e hierarquia de leitura. */
  .card, .kpi, .modal, .serie-card, .tabela-wrap, .barra-filtros { border-radius: 14px !important; }
  .card { border-top-width: 1px !important; padding: 24px; }
  .card:hover, .kpi:hover { transform: none !important; }
  .card-titulo { padding-bottom: 16px; margin-bottom: 20px; font-size: 16px !important; letter-spacing: -.2px; gap: 8px; }
  .card-titulo .acento::before { width: 4px !important; height: 18px !important; border-radius: 3px !important; clip-path: none; background: var(--rumo-azul-claro) !important; }
  .card-sub { font-weight: 400; line-height: 1.6; font-size: 12px; }
  .grid-graficos { gap: 22px; }
  .grid-kpi { gap: 16px; margin-bottom: 28px; }
  .kpi { padding: 23px 22px 20px !important; border-top-width: 3px !important; }
  .kpi::after { display: none !important; }
  .kpi .rotulo { font-size: 11px !important; letter-spacing: .7px; line-height: 1.5; }
  .kpi .valor { font-size: clamp(28px, 2.6vw, 38px) !important; letter-spacing: -1.2px; line-height: 1.2; margin: 10px 0 7px; font-variant-numeric: tabular-nums; }
  .kpi .extra, .kpi .sub { font-size: 12px; line-height: 1.6; }

  .barra-filtros { padding: 24px 20px 20px !important; gap: 14px !important; margin-bottom: 24px; box-shadow: var(--sombra) !important; }
  .barra-filtros::before { border-radius: 5px !important; font-size: 10px; letter-spacing: 1px; padding: 3px 10px; }
  .campo { min-width: 0; }
  .campo label { font-size: 12px !important; margin-bottom: 7px; letter-spacing: .1px; }
  .campo input, .campo select, .campo textarea, .busca-rapida input { border-radius: 8px !important; min-height: 42px !important; padding: 10px 12px; font-size: 13px !important; transition: border-color .16s, box-shadow .16s; }
  .btn { border-radius: 8px !important; font-weight: 600; letter-spacing: 0 !important; min-height: 40px; padding: 10px 16px; transition: background-color .16s, box-shadow .16s; }
  .btn-sm { min-height: 34px; padding: 7px 12px; }
  .btn-primario { box-shadow: 0 3px 8px rgba(0, 56, 101, .14) !important; }
  .btn:hover { transform: none !important; }
  .btn:disabled { opacity: .55; cursor: not-allowed; }
  :focus-visible { outline: 3px solid var(--rumo-azul-claro); outline-offset: 3px; }
  .badge, .status-serie, .tag-termica, .usuario-pill { border-radius: 6px !important; padding: 4px 9px; font-weight: 600; }
  .tabela-wrap { border: 1px solid var(--cinza-borda); }
  table.tabela { font-size: 13px; }
  table.tabela thead th { padding: 14px 16px; font-size: 11px; letter-spacing: .35px; border-right: 0; }
  table.tabela tbody td { padding: 13px 16px; font-variant-numeric: tabular-nums; }
  .modal { box-shadow: 0 24px 80px rgba(0, 25, 48, .25) !important; }

  /* Neutraliza fundos claros de regras antigas com maior especificidade. */
  body[data-tema="escuro"] .app :is(.card, .kpi, .serie-card, .barra-filtros, .menu-dd-painel) {
    background: #003865 !important;
    color: #f7fbfd !important;
    border-color: #41627d !important;
  }
  body[data-tema="escuro"] .app .btn.btn-secundario,
  body[data-tema="escuro"] .app .btn.btn-perigo {
    background: #07446f !important;
    color: #f7fbfd !important;
    border-color: #41627d !important;
  }
  body[data-tema="escuro"] .app .btn.btn-secundario:hover { background: #0a4d7d !important; }
  body[data-tema="escuro"] .app .topo .btn.menu-dd-botao.ativo {
    background: #e3f4ef !important;
    color: #003865 !important;
    border-color: #7fe06c !important;
  }
  body[data-tema="escuro"] .app .kpi { border-top-color: #32a6e6 !important; }
  body[data-tema="escuro"] .app .kpi.verde { border-top-color: #7fe06c !important; }
  body[data-tema="escuro"] .app .kpi.amarelo { border-top-color: #fbd300 !important; }
  body[data-tema="escuro"] .app .kpi.vermelho { border-top-color: #ff8d8d !important; }

  /* Entrada com composição editorial e grafismo ferroviário existente. */
  .login-page { padding: 40px 24px !important; background: #edf2f5 !important; }
  .login-page::before { display: none !important; }
  .login-shell { width: min(1120px, 100%); min-height: 640px; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid #d7e0e5; box-shadow: 0 24px 80px rgba(0, 56, 101, .12); }
  .login-brand { padding: 52px; justify-content: center; background: linear-gradient(150deg, rgba(0,56,101,.88), #003865), url('../assets/rumo/grafismo-vagoes-azul.png') center / cover; }
  .login-brand::before { content: ''; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(50,166,230,.25); border-radius: 50%; top: -180px; right: -50px; box-shadow: 0 0 0 45px rgba(50,166,230,.06), 0 0 0 90px rgba(50,166,230,.04); }
  .login-brand::after { width: 180px; height: 8px; right: auto; left: 52px; bottom: 54px; transform: none; background: linear-gradient(90deg, #32a6e6 50%, #7fe06c 50%); }
  .login-brand-copy { margin: 0; }
  .login-brand-eyebrow { color: #7fe06c; font-size: 11px; letter-spacing: 2px; margin-bottom: 24px; }
  .login-brand h2 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -2px; max-width: 380px; }
  .login-brand p { color: #d7e0e5; font-size: 15px; line-height: 1.8; margin-top: 26px; }
  .login-card { padding: 56px !important; }
  .login-card h1 { font-size: 34px !important; letter-spacing: -1px !important; }
  .login-card > p { color: #58707f !important; font-size: 14px; line-height: 1.7; }
  .login-kicker { font-size: 11px !important; letter-spacing: 1px; }
  .login-kicker::before { display: none; }
  .login-form { margin-top: 30px; gap: 20px; }
  .login-form input { min-height: 48px; font-size: 15px; }
  .login-form .btn { min-height: 48px; font-size: 15px; margin-top: 8px; }

  @media (max-width: 1100px) {
    .pagina { padding: 24px 20px 40px !important; }
    body .app .topo { padding: 22px 20px !important; }
    .login-brand, .login-card { padding: 38px !important; }
  }
  @media (max-width: 820px) {
    .login-page { padding: 20px !important; }
    .login-shell { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; border: 1px solid #d7e0e5; border-radius: 18px; }
    .login-brand { min-height: 250px; padding: 32px !important; }
    .login-brand h2 { font-size: 38px; max-width: 400px; }
    .login-brand-eyebrow { display: block; margin-bottom: 14px; }
    .login-brand p { display: none; }
    .login-brand::after { left: auto; right: 0; bottom: 0; width: 120px; height: 5px; }
    .login-card { padding: 32px !important; }
    .topo .menu-dropdowns { flex-wrap: wrap !important; }
    .barra-filtros { gap: 12px !important; }
    .barra-filtros .campo { flex: 1 1 140px; }
    .grid-graficos { gap: 16px; }
    .card { padding: 18px; }
  }
  @media (max-width: 460px) {
    .pagina { padding: 22px 12px 32px !important; }
    body .app .topo { padding: 20px 14px !important; }
    body .app .topo h1 { font-size: 23px !important; }
    .topo .menu-dd-botao { padding: 8px !important; font-size: 12px !important; }
    .grid-kpi { gap: 10px; }
    .kpi { padding: 17px 14px; }
    .kpi .valor { font-size: 28px; }
    .login-page { padding: 12px !important; }
    .login-brand, .login-card { padding: 28px !important; }
    .login-card h1 { font-size: 29px !important; }
    .campo input, .campo select, .campo textarea { font-size: 16px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .campo input, .campo select, .campo textarea { transition: none; }
  }
}

/* Cabeçalho único: estas regras substituem as variações legadas por página. */
@media screen {
  body .app #conteudo .topo.topo-unificado {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: relative !important;
    top: auto !important;
    min-height: 220px;
    padding: 22px 32px 24px !important;
    gap: 24px !important;
    background: url('../assets/rumo/trilhos-header.svg') center / cover no-repeat, linear-gradient(115deg, #003865, #052b50) !important;
    overflow: visible !important;
    isolation: isolate;
  }
  #conteudo .topo-unificado::after { height: 1px !important; background: rgba(50,166,230,.3) !important; }
  #conteudo .topo-unificado .topo-navegacao { display: grid; grid-template-columns: minmax(135px, 1fr) auto auto; align-items: center; gap: 24px; width: 100%; }
  #conteudo .topo-unificado .topo-logo { display: inline-flex; width: fit-content; align-items: center; }
  #conteudo .topo-unificado .topo-logo img { display: block; width: 124px; height: auto; max-height: 52px; object-fit: contain; }
  #conteudo .topo-unificado .topo-modulos { min-width: 0; }
  #conteudo .topo-unificado .menu-dropdowns { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px !important; margin: 0 !important; width: auto !important; grid-template-columns: none !important; }
  #conteudo .topo-unificado .menu-dd { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; position: relative; }
  #conteudo .topo-unificado .btn { width: auto !important; min-height: 44px !important; font-size: 13px !important; padding: 10px 14px !important; gap: 8px !important; white-space: normal; line-height: 1.25; }
  #conteudo .topo-unificado .btn .ic { width: 18px !important; height: 18px !important; flex-shrink: 0; }
  #conteudo .topo-unificado .btn.btn-secundario,
  #conteudo .topo-unificado .usuario-pill {
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(189,204,212,.23) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    border-radius: 11px !important;
  }
  #conteudo .topo-unificado .btn.btn-secundario:hover { background: rgba(50,166,230,.24) !important; border-color: #32a6e6 !important; }
  #conteudo .topo-unificado .btn.menu-dd-botao.ativo { background: #d7f2ee !important; color: #003865 !important; border-color: #1e9f7f !important; box-shadow: 0 0 0 1px rgba(127,224,108,.35) !important; }
  #conteudo .topo-unificado .tema-toggle { display: inline-flex !important; align-items: center; justify-content: center; grid-area: auto; }
  #conteudo .topo-unificado .tema-toggle span { display: inline !important; }
  #conteudo .topo-unificado .tema-toggle::after { content: ''; display: block; flex: 0 0 30px; width: 30px; height: 18px; border-radius: 12px; background: radial-gradient(circle at 9px 9px, #fff 0 6px, transparent 7px), #7b919e; }
  #conteudo .topo-unificado .tema-toggle[aria-pressed="true"]::after { background: radial-gradient(circle at 21px 9px, #fff 0 6px, transparent 7px), #1e9f7f; }
  #conteudo .topo-unificado .topo-contexto { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr) auto; align-items: start; gap: 28px; }
  #conteudo .topo-unificado .topo-identidade { border-left: 3px solid #7fe06c; padding: 0 0 0 22px !important; margin: 0 !important; min-width: 0; max-width: none !important; }
  body .app #conteudo .topo-unificado h1 { font-size: clamp(28px, 2.6vw, 42px) !important; letter-spacing: -1px !important; line-height: 1.15; overflow-wrap: anywhere; }
  body .app #conteudo .topo-unificado .topo-kicker { color: #8edbc8 !important; font-size: 11px !important; letter-spacing: 1.8px !important; margin-bottom: 10px; }
  body .app #conteudo .topo-unificado .subtitulo { font-size: 15px !important; line-height: 1.5; max-width: 690px !important; }
  #conteudo .topo-unificado .topo-operacoes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 12px; min-width: 0; }
  #conteudo .topo-unificado #areaUsuario { max-width: none !important; flex-direction: row !important; border: 0 !important; padding: 0 !important; display: flex !important; flex: 0 1 auto; flex-wrap: wrap !important; align-items: center; justify-content: flex-end; gap: 8px; width: auto !important; margin: 0 !important; grid-area: auto; }
  #conteudo .topo-unificado .usuario-pill { display: inline-flex !important; min-height: 44px; padding: 8px 14px; max-width: 230px; }
  #conteudo .topo-unificado .usuario-nome { color: #fff !important; font-size: 12px !important; overflow-wrap: anywhere; }
  #conteudo .topo-unificado .usuario-perfil { color: #bdccd4 !important; font-size: 10px !important; }
  #conteudo .topo-unificado #topoAcoes { display: flex !important; flex: 1 1 220px; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center; gap: 8px !important; width: auto !important; max-width: 100% !important; margin: 0 !important; grid-area: auto; }
  #conteudo .topo-unificado #topoAcoes:empty, #conteudo .topo-unificado #areaUsuario:empty { display: none !important; }
  #conteudo .topo-unificado #topoAcoes > .btn { flex: 0 1 auto !important; }
  #conteudo .topo-unificado #topoAcoes > .btn:not(.btn-perigo) { background: #008bf5 !important; border-color: #32a6e6 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; }
  #conteudo .topo-unificado #topoAcoes > .btn:not(.btn-perigo):hover { background: #0077d4 !important; }
  #conteudo .topo-unificado .exportacoes-grupo { margin: 0 !important; padding: 0 !important; border: 0 !important; display: flex; flex: 0 0 100% !important; justify-content: flex-end; gap: 8px; }
  #conteudo .topo-unificado .exportacoes-grupo .btn { background: #fff !important; color: #003865 !important; min-height: 36px !important; padding: 8px 12px !important; }
  #conteudo .topo-unificado .exportacoes-grupo .btn:first-child { color: #08745b !important; }
  #conteudo .topo-unificado .topo-assinatura { border-left: 2px solid #1e9f7f; padding-left: 12px; color: #bdccd4; text-transform: uppercase; letter-spacing: 1.7px; font-size: 10px; line-height: 1.6; align-self: center; }
  #conteudo .topo-unificado .menu-dd-painel { top: calc(100% + 8px); text-align: left; }
  #conteudo .topo-unificado .menu-dd-link { font-size: 13px !important; }

  body:not([data-tema="escuro"]) { background: #f0f7fb; }
  .pagina { padding-top: 24px !important; }
  .app .barra-filtros { position: relative; padding: 68px 22px 22px !important; margin-bottom: 22px !important; border-color: #d6e6f2 !important; border-radius: 17px !important; }
  .app .barra-filtros::before { content: 'FILTROS'; position: absolute; top: 0 !important; left: 0 !important; right: 0; height: 48px; width: auto; display: flex; align-items: center; padding: 0 22px; border-radius: 17px 17px 0 0 !important; border-bottom: 1px solid #e5eef5; background: linear-gradient(90deg, #f2f9ff, #fff) !important; color: #003865 !important; font: 700 13px var(--fonte); letter-spacing: .4px; }
  .app .barra-filtros .campo label { font-size: 13px !important; }
  .app .barra-filtros .campo :is(input, select) { min-height: 46px !important; font-size: 14px !important; }
  .app .card { border-color: #d6e6f2 !important; border-radius: 17px !important; }
  .app .card-titulo { font-size: 18px !important; }
  .app .kpi { --kpi-acento: #0098ed; --kpi-suave: #eef8ff; position: relative; border-radius: 17px !important; border-top: 3px solid var(--kpi-acento) !important; padding: 20px !important; background: linear-gradient(135deg, #fff 55%, var(--kpi-suave)) !important; }
  .app .kpi.verde { --kpi-acento: #1e9f7f; --kpi-suave: #eaf8f3; }
  .app .kpi.vermelho { --kpi-acento: #e74052; --kpi-suave: #fff0f2; }
  .app .kpi.amarelo { --kpi-acento: #d99b00; --kpi-suave: #fff9e8; border-top-color: #fbd300 !important; }
  .app .kpi.escuro { --kpi-acento: #003865; }
  .app .kpi .rotulo { display: flex; align-items: center; gap: 12px; min-height: 38px; color: var(--kpi-acento) !important; font-size: 12px !important; letter-spacing: 0; }
  .app .kpi .rotulo::before { content: ''; flex: 0 0 36px; height: 36px; border-radius: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M11 25V17m7 8V10m7 15V14' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat, var(--kpi-acento); box-shadow: 0 3px 8px #00386518; }
  .app .kpi.verde .rotulo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='m10 18 5 5 11-12' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .app .kpi.vermelho .rotulo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='m12 12 12 12m0-12L12 24' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .app .kpi .valor { font-size: clamp(32px, 3vw, 48px) !important; margin: 10px 0 4px; font-weight: 700; }
  .app .kpi .extra { font-size: 13px !important; }
  body[data-tema="escuro"] .app .kpi { background: linear-gradient(135deg, #003865, #07446f) !important; }
  body[data-tema="escuro"] .app .kpi .rotulo { color: #bdccd4 !important; }
  body[data-tema="escuro"] .app .barra-filtros::before { background: #07446f !important; color: #fff !important; border-color: #41627d; }

  @media (max-width: 1200px) {
    #conteudo .topo-unificado .topo-navegacao { grid-template-columns: 1fr auto; gap: 18px; }
    #conteudo .topo-unificado .topo-modulos { grid-column: 1 / -1; grid-row: 2; }
    #conteudo .topo-unificado .menu-dropdowns { justify-content: flex-start !important; }
    #conteudo .topo-unificado .tema-toggle { grid-column: 2; grid-row: 1; }
    #conteudo .topo-unificado .menu-dd-painel { left: 0; right: auto; }
    #conteudo .topo-unificado .topo-contexto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #conteudo .topo-unificado .topo-assinatura { display: none; }
  }
  @media (max-width: 820px) {
    body .app #conteudo .topo.topo-unificado { padding: 20px !important; gap: 22px !important; }
    #conteudo .topo-unificado .topo-logo img { width: 100px; }
    #conteudo .topo-unificado .topo-contexto { grid-template-columns: 1fr; gap: 20px; }
    #conteudo .topo-unificado .topo-identidade { padding-left: 16px !important; }
    #conteudo .topo-unificado .topo-operacoes, #conteudo .topo-unificado #areaUsuario, #conteudo .topo-unificado #topoAcoes, #conteudo .topo-unificado .exportacoes-grupo { justify-content: flex-start !important; }
    #conteudo .topo-unificado #topoAcoes { flex-basis: 100%; }
    #conteudo .topo-unificado .menu-dd { position: static; }
    #conteudo .topo-unificado .menu-dd-painel { overscroll-behavior: contain; }
    #conteudo .topo-unificado .btn { min-height: 42px !important; font-size: 12px !important; padding: 9px 11px !important; }
    .app .barra-filtros { padding: 64px 16px 18px !important; }
    .app .barra-filtros .campo :is(input, select) { font-size: 16px !important; }
  }
  @media (prefers-reduced-motion: reduce) { .app .kpi { transition: none !important; } }
}
@media print {
  .topo-unificado .topo-navegacao, .topo-unificado .topo-operacoes, .topo-unificado .topo-assinatura { display: none !important; }
}
@media screen {
  .app .barra-filtros::before { padding-left: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8v8l-4-2v-6z' fill='none' stroke='%230098ed' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 22px center / 22px no-repeat, linear-gradient(90deg, #f2f9ff, #fff) !important; }
  .app .kpi.amarelo .rotulo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='m12 25 12-14' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='white' stroke-width='2' fill='none'/%3E%3Ccircle cx='24' cy='24' r='3' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
  .app .card:has(.chart-box) .card-titulo .acento::before { width: 24px !important; height: 24px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20V12m7 8V4m7 16V9' stroke='%230098ed' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important; }
  body[data-tema="escuro"] .app .barra-filtros::before { background-color: #07446f !important; background-image: none !important; padding-left: 22px; }
}

/* Densidade global: mais conteúdo visível, sem alterar o zoom do navegador.
   Apenas tela: impressão mantém as dimensões documentais originais. */
@media screen {
  .pagina { max-width: 1920px; padding: 14px 18px 26px !important; }
  body .app #conteudo .topo.topo-unificado { min-height: 0; padding: 12px 18px !important; gap: 12px !important; }
  #conteudo .topo-unificado .topo-navegacao { gap: 12px; }
  #conteudo .topo-unificado .topo-logo img { width: 90px; max-height: 36px; }
  #conteudo .topo-unificado .topo-contexto { gap: 14px; }
  #conteudo .topo-unificado .topo-identidade { padding-left: 13px !important; }
  body .app #conteudo .topo-unificado h1 { font-size: clamp(21px, 1.7vw, 27px) !important; }
  body .app #conteudo .topo-unificado .topo-kicker { font-size: 10px !important; margin-bottom: 5px; }
  body .app #conteudo .topo-unificado .subtitulo { font-size: 12px !important; margin-top: 2px; }
  .app .barra-filtros { padding: 41px 13px 11px !important; gap: 8px !important; margin-bottom: 12px !important; }
  .app .barra-filtros::before { height: 30px; font-size: 10px; }
  .app .barra-filtros .campo label { font-size: 12px !important; margin-bottom: 4px; }
  .grid-kpi { gap: 9px; margin-bottom: 13px; }
  .app .kpi { padding: 11px 13px !important; min-height: 0; }
  .app .kpi .rotulo { min-height: 24px; gap: 7px; font-size: 10px !important; }
  .app .kpi .rotulo::before { flex-basis: 24px; height: 24px; background-size: 22px; border-radius: 7px; }
  .app .kpi .valor { font-size: clamp(23px, 2vw, 30px) !important; margin: 4px 0 2px; }
  .app .kpi :is(.extra, .sub) { font-size: 11px !important; line-height: 1.35; }
  .app .card { padding: 13px; }
  .app .card-titulo { padding-bottom: 8px; margin-bottom: 9px; font-size: 14px !important; }
  .grid-graficos { gap: 12px; }
}

@media screen and (min-width: 821px) {
  body { font-size: 13px; }
  #conteudo .topo-unificado .btn { min-height: 30px !important; padding: 5px 8px !important; font-size: 11px !important; gap: 5px !important; }
  #conteudo .topo-unificado .usuario-pill { min-height: 30px; padding: 4px 8px; }
  #conteudo .topo-unificado .exportacoes-grupo { flex-basis: auto !important; }
  #conteudo .topo-unificado .exportacoes-grupo .btn { min-height: 28px !important; padding: 4px 8px !important; }
  #conteudo .topo-unificado #topoAcoes { flex-basis: auto; }
  .campo :is(input, select, textarea), .busca-rapida input,
  .app .barra-filtros .campo :is(input, select) { min-height: 32px !important; padding: 5px 8px; font-size: 12px !important; }
  .btn { min-height: 30px; padding: 5px 9px; }
  .btn-sm { min-height: 27px; padding: 4px 7px; }
  .menu-dd-link { padding: 6px 8px !important; }
  table.tabela { font-size: 12px; }
  table.tabela thead th { padding: 7px 9px; font-size: 10px; }
  table.tabela tbody td { padding: 6px 9px; }
  .chart-box { height: 215px !important; }
  .chart-box.alto { height: 260px !important; }
  .login-page { padding: 24px !important; }
  .login-shell { min-height: 540px; }
  .login-brand { padding: 36px; }
}

@media screen and (max-width: 820px) {
  .pagina { padding: 14px 12px 24px !important; }
  body .app #conteudo .topo.topo-unificado { padding: 16px !important; }
  .app .barra-filtros .campo :is(input, select) { min-height: 44px !important; font-size: 16px !important; }
}

/* Terceiro nível de densidade para telas de computador. */
@media screen and (min-width: 821px) {
  .pagina { max-width: 2048px; padding: 10px 14px 20px !important; }
  body .app #conteudo .topo.topo-unificado { padding: 9px 14px !important; gap: 9px !important; }
  #conteudo .topo-unificado :is(.topo-navegacao, .topo-contexto) { gap: 10px; }
  #conteudo .topo-unificado .topo-identidade { padding-left: 10px !important; }
  body .app #conteudo .topo-unificado h1 { font-size: clamp(19px, 1.5vw, 24px) !important; }
  body .app #conteudo .topo-unificado .topo-kicker { font-size: 9px !important; margin-bottom: 3px; }
  body .app #conteudo .topo-unificado .subtitulo { font-size: 11px !important; margin-top: 1px; }
  #conteudo .topo-unificado .btn { min-height: 27px !important; padding: 4px 7px !important; font-size: 10px !important; }
  #conteudo .topo-unificado .usuario-pill { min-height: 27px; padding: 3px 7px; }
  #conteudo .topo-unificado .exportacoes-grupo .btn { min-height: 26px !important; padding: 3px 7px !important; }
  .app .barra-filtros { padding: 36px 10px 9px !important; gap: 6px !important; margin-bottom: 9px !important; }
  .app .barra-filtros::before { height: 26px; font-size: 9px; }
  .app .barra-filtros .campo label { font-size: 11px !important; margin-bottom: 2px; }
  .campo :is(input, select, textarea), .busca-rapida input,
  .app .barra-filtros .campo :is(input, select) { min-height: 29px !important; padding: 4px 7px; font-size: 11px !important; }
  .btn { min-height: 27px; padding: 4px 8px; font-size: 11px; }
  .btn-sm { min-height: 25px; padding: 3px 6px; }
  .grid-kpi { gap: 7px; margin-bottom: 10px; }
  .app .kpi { padding: 9px 10px !important; }
  .app .kpi .rotulo { min-height: 21px; gap: 5px; font-size: 9px !important; }
  .app .kpi .rotulo::before { flex-basis: 21px; height: 21px; background-size: 19px; border-radius: 6px; }
  .app .kpi .valor { font-size: clamp(21px, 1.8vw, 27px) !important; margin: 3px 0 1px; }
  .app .kpi :is(.extra, .sub) { font-size: 10px !important; line-height: 1.3; }
  .app .card { padding: 10px; }
  .app .card-titulo { padding-bottom: 6px; margin-bottom: 7px; font-size: 13px !important; }
  .grid-graficos { gap: 9px; }
  table.tabela { font-size: 11px; }
  table.tabela thead th { padding: 6px 7px; font-size: 9px; }
  table.tabela tbody td { padding: 5px 7px; }
  .chart-box { height: 195px !important; }
  .chart-box.alto { height: 235px !important; }
  .login-page { padding: 18px !important; }
  .login-shell { min-height: 490px; }
  .login-brand { padding: 30px; }
}