:root {
  --navy: #0f2a47;
  --navy-2: #163a63;
  --blue: #1f5fa8;
  --green: #1e8a5a;
  --bg: #f2f5f9;
  --surface: #fff;
  --border: #d9e0ea;
  --text: #1b2733;
  --muted: #64748b;
  --warn: #b7791f;
  --danger: #b42318;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }

.topbar { background: linear-gradient(90deg, var(--navy), var(--navy-2)); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 60px; border-bottom: 3px solid var(--green); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--green); display: grid; place-items: center; font-weight: 700; }
.topnav { display: flex; gap: 6px; }
.topnav a { padding: 8px 14px; border-radius: 6px; font-size: 14px; color: #cfe0f3; }
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }

.container { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; border-top: 1px solid var(--border); background: var(--surface); }

.hero { text-align: center; padding: 28px 0 36px; }
.hero h1 { margin: 0 0 8px; font-size: 38px; color: var(--navy); letter-spacing: .3px; }
.hero p { margin: 0; color: var(--muted); font-size: 16px; }
/* Tela principal: o título sobe para a linha do botão Novidades, para os cartões ficarem à vista */
.tela-acoes { position: relative; z-index: 2; }
.hero-home { padding: 0 0 14px; margin-top: -40px; }
.hero-home h1 { margin-bottom: 4px; line-height: 40px; }
@media (max-width: 700px) { .hero-home { margin-top: 0; padding-top: 8px; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 9px; padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 3px rgba(15,42,71,.06); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,42,71,.14); }
.card-icon { width: 30px; height: 30px; border-radius: 8px; background: #e8f0fa; color: var(--blue); display: grid; place-items: center; }
.card-icon svg { width: 17px; height: 17px; }
.card-title { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.card-codigo { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.card-desc { color: var(--muted); font-size: 12px; line-height: 1.35; flex: 1; }
.card-go { color: var(--blue); font-weight: 600; font-size: 12px; }

.page-head h1 { margin: 0 0 4px; color: var(--navy); font-size: 26px; }
.page-head p { margin: 0 0 22px; color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 22px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(15,42,71,.05); }
.panel h2 { margin: 0; font-size: 17px; color: var(--navy); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.span-2 { grid-column: span 2; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #3b4a5c; }
select, input:not([type=checkbox]) { padding: 9px 11px; background: #fff; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
select:focus, input:focus { outline: 2px solid rgba(31,95,168,.35); border-color: var(--blue); }
.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 16px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.btn { border: 0; border-radius: 6px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-block; font-family: inherit; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #184d88; }
.btn-secondary { background: #e6ebf2; color: var(--navy); }
.btn-secondary:hover { background: #d9e0ea; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #e6ebf2; color: var(--navy); }
.badge-ok { background: #dcf3e8; color: var(--green); }
.badge-off { background: #eef0f3; color: var(--muted); }
.badge-warn { background: #fdf0d5; color: var(--warn); }
.badge-info { background: #e8f0fa; color: var(--navy); }

.alert { padding: 11px 14px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; border-left: 4px solid; }
.alert-success { background: #e7f6ee; border-color: var(--green); color: #14613f; }
.alert-error { background: #fdeceb; border-color: var(--danger); color: var(--danger); }
.alert-warning { background: #fdf5e3; border-color: #e0a526; color: #7a5510; }
.alert-info { background: #e8f0fa; border-color: var(--blue); color: var(--navy); }
/* Mensagem que o script posicao_mensagens.js leva para logo abaixo do botão apertado */
.msg-no-botao { margin: 8px 0 0; text-align: left; }
.msg-no-botao .alert { margin-bottom: 6px; }
td .msg-no-botao { white-space: normal; max-width: 380px; font-weight: 400; }

.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.filters .span-2 { grid-column: span 2; }
/* 2ª linha dos filtros do DDA: as duas datas lado a lado e os botões na mesma linha */
.filters .filtros-linha { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.filters .filtros-linha > label { width: 200px; }
.filters .filtros-linha .actions { margin-left: auto; }
/* linhas de campos (FIN-004/005): cada linha dentro da margem, campos sem estourar a largura */
.filters .filtros-linha.campos > label { flex: 1 1 0; min-width: 0; max-width: 340px; width: auto; }
.filters .filtros-linha.campos.empresa-linha > label:first-child { flex: 2 1 0; max-width: 440px; }
.filters .filtros-linha.campos select, .filters .filtros-linha.campos input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 700px) { .filters .filtros-linha.campos > label { flex: 1 1 100%; max-width: none; } }
.ac { position: relative; }
.ac-box { position: relative; }
.check-raiz { margin: 8px 0 0; font-size: 13px; }
.raiz-msg { display: block; margin-top: 4px; color: var(--warn); font-size: 12px; }
.aviso { padding: 7px 12px; margin-bottom: 8px; font-size: 13px; }
.flag-na { color: var(--muted); }
code { background: #eef2f7; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ac-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 20px rgba(15,42,71,.16); max-height: 300px; overflow-y: auto; }
.ac-list li { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ac-list li:hover { background: #eef4fb; }
.ac-list small { color: var(--muted); font-size: 12px; }
.ac-list .ac-msg { color: var(--muted); cursor: default; }
.ac-list .ac-msg:hover { background: transparent; }
.muted { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }

.header-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0 0 18px; padding: 14px 16px; background: #f7f9fc; border: 1px solid var(--border); border-radius: 8px; }
.header-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.header-info dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--navy); word-break: break-all; }

/* Legenda recolhida por padrão; abre deslizando para baixo. */
.legend { padding: 0; overflow: hidden; }
.legend-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; color: var(--navy); }
.legend-toggle:hover { background: #f7f9fc; }
.legend-toggle:focus-visible { outline: 2px solid rgba(31,95,168,.45); outline-offset: -2px; }
.legend-title { font-size: 17px; font-weight: 600; }
.legend-hint { margin-left: auto; font-size: 13px; color: var(--muted); }
.legend-chevron { color: var(--muted); transition: transform .3s ease; }
.legend-toggle[aria-expanded="true"] .legend-chevron { transform: rotate(180deg); }
.legend-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s linear .3s; }
.legend-body.open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease, visibility 0s; }
.legend-inner { min-height: 0; overflow: hidden; padding: 0 22px; border-top: 1px solid transparent; }
.legend-body.open .legend-inner { padding-bottom: 18px; border-top-color: var(--border); }
.legend-inner > :first-child { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .legend-body, .legend-chevron { transition: none; } }
.legend-inner h3 { margin: 18px 0 6px; font-size: 14px; color: var(--navy); }
.legend-inner h3:first-child { margin-top: 14px; }
.legend-inner p { font-size: 13px; color: #3b4a5c; line-height: 1.6; margin: 0 0 8px; }

/* Histórico de alterações */
.hist-filters { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.hist-filters .span-2 { grid-column: span 2; }
.hist-count { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.hist-item { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 10px; padding: 16px 20px; margin-bottom: 14px; }
.hist-item.t-nova { border-left-color: var(--green); }
.hist-item.t-correcao { border-left-color: var(--danger); }
.hist-item.t-remocao { border-left-color: var(--muted); }
.hist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.hist-item h2 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }
.hist-item p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.hist-req { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; font-size: 14px; }
@media (max-width: 720px) { .hist-filters { grid-template-columns: 1fr; } .hist-filters .span-2 { grid-column: auto; } }
.legend-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.legend-table th, .legend-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.legend-table thead th { background: #f0f4f9; color: var(--navy); }
.legend-list { margin: 0; padding-left: 18px; font-size: 13px; color: #3b4a5c; line-height: 1.7; }

.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.compare thead th { background: var(--navy); color: #fff; font-size: 13px; letter-spacing: 1px; text-align: center; }
.compare thead th:first-child { background: transparent; }
.compare tbody th { font-weight: 600; color: #3b4a5c; background: #f7f9fc; width: 26%; }
.compare td { text-align: center; width: 18.5%; font-variant-numeric: tabular-nums; }
.compare tr:hover td, .compare tr:hover th { background: #eef4fb; }
.row-diff td, .row-diff th { background: #fff4e0 !important; }
.flag { font-size: 11px; font-weight: 700; color: var(--danger); margin-left: 6px; text-transform: uppercase; }
.flag-ok { color: var(--green); }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .topnav { display: none; }
  .filters { grid-template-columns: 1fr; }
  .filters .span-2 { grid-column: auto; }
}
.footer-dev { display: block; margin-top: 6px; }
.footer-dev a { color: inherit; text-decoration: none; }
.footer-dev a:hover { text-decoration: underline; }
.footer-logo { vertical-align: middle; border-radius: 4px; margin-right: 4px; }

/* Versão do sistema, código da tela e novidades */
.versao-sistema { font-size: 12px; color: rgba(255,255,255,.75); margin-left: -4px; white-space: nowrap; }
.legend-id { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }
.tela-acoes { display: flex; justify-content: flex-end; margin: -12px 0 12px; }
.badge-novo { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.nov-dialog { border: 0; border-radius: 12px; padding: 24px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(15,42,71,.35); }
.nov-dialog::backdrop { background: rgba(15,42,71,.55); }
.nov-dialog h2 { margin: 0 0 10px; color: var(--navy); font-size: 18px; }
.nov-dialog-lista { max-width: 680px; max-height: 80vh; overflow: auto; }
.nov-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.nov-versao { margin-bottom: 22px; }
.nov-versao > h2 { font-size: 17px; color: var(--navy); margin: 0 0 10px; }
.nov-data { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.nov-item { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.nov-item.t-nova { border-left-color: var(--green); }
.nov-item.t-correcao { border-left-color: var(--danger); }
.nov-item.t-remocao { border-left-color: var(--muted); }
.nov-item h3 { margin: 6px 0 4px; font-size: 15px; color: var(--navy); }
.nov-item p { margin: 0; font-size: 14px; line-height: 1.55; }
.nov-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.info-tabela { width: 100%; border-collapse: collapse; }
.info-tabela th, .info-tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.info-tabela th { width: 280px; color: var(--navy); font-weight: 600; }
.login-versao { margin-top: 4px; font-size: 12px; opacity: .8; }
@media (max-width: 720px) { .versao-sistema { display: none; } .info-tabela th { width: auto; display: block; border-bottom: 0; } .info-tabela td { display: block; } }

/* Bloqueio de acesso e alertas */
.bloqueio-faixa { position: sticky; top: 0; z-index: 1000; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 18px; background: #b45f06; color: #fff; font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.bloqueio-faixa[hidden] { display: none; }
.bloqueio-faixa.contagem { background: #c77700; }
.bloqueio-faixa.vigor { background: #a12a2a; }
.bloqueio-faixa.liberado { background: #1f6f4a; }
.bloqueio-btn { background: #fff; color: #1b2733; border: 0; border-radius: 6px; padding: 5px 14px; font-weight: 700; cursor: pointer; }
.alerta-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 34px; margin: 0 6px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); cursor: pointer; }
.alerta-btn:hover { background: rgba(255,255,255,.22); }
.alerta-btn .tri { fill: rgba(255,255,255,.35); stroke: rgba(255,255,255,.7); stroke-width: 1.5; }
.alerta-btn.nivel-amarelo .tri { fill: #f5c518; stroke: #b88a00; }
.alerta-btn.nivel-info .tri { fill: #9ec5fe; stroke: #4a7fc4; }
.alerta-btn.nivel-vermelho .tri { fill: #e03131; stroke: #8f1d1d; }
.alerta-selo { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.alerta-selo[hidden] { display: none; }
.alerta-item.nivel-vermelho { border-left-color: var(--danger); }
.alerta-item.nivel-amarelo { border-left-color: #f5c518; }
.bloq-modo { border: 0; padding: 0; margin: 0 0 8px; }
.bloq-modo legend { font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.bloq-telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 18px; margin: 0 0 16px; padding: 12px; background: var(--bg); border-radius: 8px; max-height: 260px; overflow: auto; }
.bloq-telas[hidden] { display: none; }
.bloq-tabela { width: 100%; border-collapse: collapse; }
.bloq-tabela th, .bloq-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.bloq-acoes form { display: inline; }
.bloq-bloqueado { background: #fbe3e3; color: #a12a2a; }
.bloq-liberado { background: #dcf3e8; color: var(--green); }
.bloq-contagem { background: #fdf0d5; color: var(--warn); }
.bloq-concluiu { background: #e6ebf2; color: var(--navy); }

/* Faixas fixas no topo, mensagens do ADMIN e telas de conectados/mensagens */
.faixas { position: sticky; top: 0; z-index: 1000; }
.faixas .bloqueio-faixa { position: static; }
.msg-admin { max-width: 560px; }
.msg-texto { white-space: pre-wrap; font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.conec-abas { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.conec-aba { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; }
.conec-aba[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--blue); }
.conec-aba .badge { margin-left: 6px; }
.conec-tabela { width: 100%; border-collapse: collapse; }
.conec-tabela th, .conec-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.conec-acoes { white-space: nowrap; }
.conec-acoes form { display: inline; }
.conec-dialog form .fields { margin-top: 10px; }
.msg-destino[hidden] { display: none; }
.msg-contador { font-size: 12px; color: var(--muted); text-align: right; }
.msg-hist { border-left: 4px solid var(--blue); }
.msg-hist.expirada { opacity: .6; }

/* Estatísticas e dicionário de dados */
.sql-pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 12px; max-height: 260px; overflow: auto; }
.dic-progresso { margin: 12px 0 4px; }
.dic-etapa { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.dic-barra { height: 14px; background: #e6ebf2; border-radius: 999px; overflow: hidden; }
.dic-barra-cheia { height: 100%; width: 0; background: var(--blue); transition: width .4s ease; }
.dic-pct { font-size: 12px; color: var(--muted); text-align: right; margin-top: 2px; }
.dic-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
.dic-lista { max-height: 75vh; overflow: auto; }
.dic-itens { list-style: none; margin: 0; padding: 0; }
.dic-tab { display: grid; width: 100%; text-align: left; gap: 2px; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.dic-tab:hover { background: var(--bg); }
.dic-desc { font-size: 12px; color: var(--muted); }
.dic-obs { width: 100%; min-height: 32px; resize: vertical; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.dic-obs.salvo { border-color: var(--green); box-shadow: 0 0 0 2px #dcf3e8; }
.dic-detalhe { overflow: auto; }
@media (max-width: 900px) { .dic-layout { grid-template-columns: 1fr; } }

/* Código da tela logo abaixo do título */
.tela-codigo { margin: 2px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.hero .tela-codigo { margin: 4px 0 0; }
.login-brand .tela-codigo { color: rgba(255,255,255,.7); margin: 2px 0 4px; }

/* Logo do WorkSpace (cabeçalho e telas de entrada) */
.brand-logo { width: 36px; height: 36px; display: block; flex: none; }
.login-brand .brand-logo { width: 76px; height: 76px; }

/* Tributos › Conferência de Notas Fiscais de Saída */
.stat-bar { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin-bottom: 14px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; font-size: 13px; color: var(--navy); }
.stat-bar .stat-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--blue); border-radius: 9px; box-shadow: 0 1px 3px rgba(15,42,71,.06); transition: transform .15s, box-shadow .15s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,42,71,.14); }
.kpi.ativo { outline: 2px solid var(--navy); outline-offset: 1px; }
.kpi-num { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi-nome { font-size: 14px; font-weight: 600; color: var(--navy); }
.kpi-desc { font-size: 12px; color: var(--muted); line-height: 1.35; }
.kpi-1 { border-top-color: #c0392b; }
.kpi-2 { border-top-color: #d68910; }
.kpi-3 { border-top-color: #7d3c98; }
.tp { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; text-align: center; color: #fff; }
.tp-1 { background: #c0392b; }
.tp-2 { background: #d68910; }
.tp-3 { background: #7d3c98; }
.filtro-grid { width: 280px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.grid-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 8px; }
.grid-nf thead th { position: sticky; top: 0; z-index: 1; background: #eef2f7; }
.grid-nf th.num, .grid-nf td.num { text-align: right; }
.grid-nf td.destaque { background: #fdeceb; color: var(--danger); font-weight: 600; }
.grid-nf .nowrap { white-space: nowrap; }
.grid-nf tr[hidden] { display: none; }
.filters textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; resize: vertical; }

/* Janela flutuante com uma consulta (títulos, movimentos, rateios...) aberta por cima da tela atual. */
.ws-janela { width: min(1280px, 96vw); height: min(86vh, 880px); max-width: none; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 50px rgba(15, 25, 40, .45); }
.ws-janela::backdrop { background: rgba(15, 25, 40, .55); }
.ws-janela[open] { display: flex; flex-direction: column; }
.ws-janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: #f4f7fb; }
.ws-janela-quadro { flex: 1; width: 100%; border: 0; background: var(--surface); }
.link-titulo { color: var(--blue); text-decoration: underline; cursor: pointer; font-weight: 600; }

/* Rodapé das telas com grade: quantidades, tempo da consulta e totais, sempre à vista no pé da janela. */
.grade-rodape { position: sticky; bottom: 0; z-index: 5; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: #f1f5fa; box-shadow: 0 -4px 10px rgba(15, 42, 71, .08); display: flex; flex-direction: column; gap: 4px; }
.grade-resumo { font-size: 13px; color: var(--text); }
/* Mensagem informativa que chama a atenção do usuário: vermelha, numa linha abaixo dos botões e antes da grade. */
.grade-aviso { margin: 4px 0 8px; color: var(--danger); font-weight: 600; font-size: 14px; }
.grade-aviso:empty { display: none; }
.grade-aviso.ok { color: #1a7f37; }

/* Cabeçalho do título em linhas fixas de 6 colunas (a 1ª linha tem 5 campos): a posição dos campos não muda com o conteúdo. */
.header-info.header-linhas, .header-info:has(.header-linha) { display: block; }
.header-info .header-linha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; }
.header-info .header-linha + .header-linha { margin-top: 12px; }
@media (max-width: 900px) { .header-info .header-linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
fieldset.motivos { border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
fieldset.motivos legend { font-size: 13px; padding: 0 4px; color: var(--muted); }

/* Título que já teve o vencimento do DDA assumido: fica esmaecido (a mensagem de sucesso continua legível). */
.panel.bloco-assumido { background: #f1f4f8; border-color: #d5dce6; }
.panel.bloco-assumido > :not(.assumir-aviso) { opacity: .5; transition: opacity .4s; }
.panel.bloco-assumido:hover > :not(.assumir-aviso) { opacity: .8; }

/* Título cujo vencimento o Senior não deixa alterar (código de barras ou situação PE): aviso no lugar do botão. */
.assumir-bloqueio { margin-left: auto; font-size: 13px; font-weight: 600; color: #8a5a00; background: #fff6e0; border: 1px solid #f0d9a0; border-radius: 6px; padding: 5px 10px; }

/* Caixa de marcação com o texto ao lado (a regra geral de label empilha o campo acima do texto). */
.caixa-linha { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 500; line-height: 1.4; }
.caixa-linha input[type=checkbox] { margin-top: 3px; flex: none; }

/* Cabeçalho do título dividido em seções (Boleto e Senior / Superus), cada uma com título e uma linha separando da anterior. */
.header-secao + .header-secao { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--border); }
.header-secao-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--blue); }
.alerta-documento { margin-top: 10px; padding: 8px 12px; border: 1px solid #f1b4ae; border-radius: 6px; background: #fdeceb; color: #b42318; font-size: 13px; font-weight: 600; }

/* Padrão do cabeçalho das grades (o mesmo da Consulta NF Entrada, SPR-001): fundo mais escuro que os registros, texto em destaque e
   linhas finas separando as colunas. As linhas são sombras internas (e não bordas) para continuarem visíveis quando o cabeçalho fica
   fixo no topo durante a rolagem. Vale para toda tabela com <thead>; tabelas de "rótulo: valor" (sem thead) não mudam. */
table.tabela thead th, table.tbl thead th, table.conec-tabela thead th, table.bloq-tabela thead th, table.mr-tabela thead th,
table.fila-tabela thead th, table.grade thead th, .rec-tabela table thead th {
  background: #e9eff7; color: #24364d; font-weight: 600;
  border-bottom: 0; box-shadow: inset -1px 0 0 #c3cfde, inset 0 -1px 0 #c3cfde;
}
table.tabela thead th:last-child, table.tbl thead th:last-child, table.conec-tabela thead th:last-child, table.bloq-tabela thead th:last-child,
table.mr-tabela thead th:last-child, table.fila-tabela thead th:last-child, table.grade thead th:last-child, .rec-tabela table thead th:last-child {
  box-shadow: inset 0 -1px 0 #c3cfde;
}

/* Grade que ocupa toda a largura do painel, com mais espaço entre as colunas (grids com poucas colunas, como a lista de XMLs da Baixa Manual): class="tabela tabela-ampla" */
table.tabela.tabela-ampla { width: 100%; }
table.tabela.tabela-ampla th, table.tabela.tabela-ampla td { padding: 12px 26px; text-align: left; vertical-align: middle; }
table.tabela.tabela-ampla tbody td { border-bottom: 1px solid var(--border); }

/* Grid de uma linha por registro (Central de Integrações): nenhuma célula quebra linha; o que não cabe rola na horizontal. Se o usuário redimensionar uma
   coluna (grade-fixa), o texto que não cabe é cortado com reticências em vez de quebrar. class="tabela tabela-linha" */
table.tabela.tabela-linha th, table.tabela.tabela-linha td { white-space: nowrap; padding: 10px 14px; vertical-align: middle; }
table.tabela.tabela-linha.grade-fixa th, table.tabela.tabela-linha.grade-fixa td { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }

/* Grade com rolagem vertical: mostra 10 registros e o resto aparece ao descer a barra; o cabeçalho fica fixo no topo. */
.grade-rolagem { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.grade-rolagem table { margin: 0; }
.grade-rolagem thead th { position: sticky; top: 0; z-index: 2; }
.grade-rolagem th, .grade-rolagem td { height: 38px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.grade-rolagem .btn { padding: 4px 12px; font-size: 13px; line-height: 1.3; }  /* botão menor que a linha: a altura das linhas fica fixa */
.grade-rolagem-10 { max-height: calc(var(--grade-linhas, 10) * 38px + 42px); }  /* cabeçalho + N linhas de 38 px (N = registros por página do usuário, padrão 10) */
.grade-rolagem tbody tr:nth-child(even) { background: #fafcfe; }
.grade-rolagem tbody tr:hover { background: #eef4fb; }

/* Seletor "Registros por página" ao lado da paginação das grades */
.por-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-left: 12px; }
.por-pagina select { width: auto; padding: 2px 6px; }
.por-pagina-linha { display: flex; justify-content: flex-end; margin: 4px 0; }
.por-pagina-linha .por-pagina { margin-left: 0; }

/* Linha Total da grade de análise (valor - desconto - abatimento) em cinza claro, e a coluna DIF (Total DDA - Total Senior). */
.compare tr.row-total td, .compare tr.row-total th { background: #e6e9ee !important; font-weight: 700; color: #1f2d3d; border-top: 2px solid #c5ccd6; }
.compare .total-formula { display: block; font-size: 11px; font-weight: 500; color: #64748b; }
.compare .dif-vermelha { color: #b42318 !important; font-weight: 700; }
.compare .dif-verde { color: #1e8a5a !important; font-weight: 700; }
.compare thead th:nth-child(4) { background: #3b4a5c; }

/* Erro de formulário: aparece no rodapé da seção onde a pessoa estava e o campo a corrigir fica destacado (ver rede.js). */
.erro-secao { margin: 12px 0 0; padding: 9px 14px; border: 1px solid #f1b4ae; border-left: 4px solid var(--danger); border-radius: 6px; background: #fdeceb; color: var(--danger); font-size: 14px; font-weight: 600; }
.campo-erro { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(180, 35, 24, .18); }
.por-pagina-linha { display: flex; justify-content: flex-end; margin: 4px 0; }
.por-pagina-linha .por-pagina { margin-left: 0; }

/* Padrão único das grids (static/js/grade_padrao.js): seta da coluna ordenada, alça para redimensionar e botões de paginação. */
:where(table.grade-ativa) thead th { position: relative; }
table.grade-ativa thead th[data-ordenavel] { cursor: pointer; user-select: none; padding-right: 22px; }
table.grade-ativa thead th[data-ordenavel]:hover { filter: brightness(.94); }
html[data-theme="dark"] table.grade-ativa thead th[data-ordenavel]:hover { filter: brightness(1.25); }
table.grade-ativa thead th[aria-sort="ascending"]::after, table.grade-ativa thead th[aria-sort="descending"]::after {
  content: "\25B2"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #2b6cb0;
}
table.grade-ativa thead th[aria-sort="descending"]::after { content: "\25BC"; }
.grade-alca { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.grade-alca:hover { background: rgba(43, 108, 176, .35); }
body.grade-redimensionando { cursor: col-resize; user-select: none; }
.paginacao-botoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 12px 0; font-size: 13px; color: var(--muted); }
.btn.disabled { opacity: .45; pointer-events: none; cursor: default; }

/* Grid mais larga que o painel: rola na horizontal dentro do painel (a caixa é criada por grade_padrao.js quando a tela não tem a sua). */
.grade-x { overflow-x: auto; max-width: 100%; }

/* Depois que o usuário redimensiona uma coluna (grade_padrao.js põe .grade-fixa), cada coluna tem largura fixa e o texto da célula quebra
   linha DENTRO dela (inclusive nomes longos sem espaço), em vez de passar por cima da coluna ao lado. Vale para toda grid do padrão;
   telas novas não precisam fazer nada. O título (th) não corta, para a alça de redimensionar continuar visível. */
table.grade-fixa th, table.grade-fixa td { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
table.grade-fixa td { overflow: hidden; }

/* Formulário de layout bancário (TI-026): grid e botões ocupam a linha inteira, checkbox alinhado ao rótulo */
.filters .linha-inteira { grid-column: 1 / -1; }
.filters .actions.linha-inteira { display: flex; gap: 8px; justify-content: flex-start; }
.filters label.chk-rotulo { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px; }

/* Pendências de Extrato: cada arquivo é um bloco que abre e fecha pelo cabeçalho */
details.pend-card > summary.pend-resumo { list-style: none; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 12px; cursor: default; }
details.pend-card > summary.pend-resumo::-webkit-details-marker { display: none; }
details.pend-card > summary.pend-resumo p { margin: 0; flex: 1; }
.pend-setas { display: inline-flex; gap: 4px; flex: none; }
.pend-texto { flex: 1; min-width: 0; }
.pend-direita { display: inline-flex; align-items: flex-start; gap: 8px; flex: none; }
.pend-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pend-seta { border: 1px solid var(--border); background: #f2f5f9; color: var(--navy); border-radius: 6px; width: 30px; height: 28px; font-size: 12px; line-height: 1; cursor: pointer; }
.pend-seta:hover { background: #e3eaf3; }
.pend-datas { color: var(--navy); font-size: 13px; }
.pend-todas { margin-right: auto; display: inline-flex; gap: 6px; }
.por-pagina-linha:has(.pend-todas) { justify-content: space-between; align-items: center; }
.nov-versao-cab { font-size: 15px; color: var(--navy); margin: 14px 0 8px; cursor: help; }