/* TsQualy V1761.51 — padrão visual único em todo o sistema.
   1. Cabeçalhos: mesma barra de destaque laranja, identificação (MÓDULO · GRUPO), ícone e título.
   2. Abas internas: texto azul e aba ativa sublinhada em laranja (padrão das abas do sistema).
   3. Botões: secundários brancos com borda e texto azul; ação principal sempre laranja.
   4. Faixa de abas do topo cabe numa linha em mais telas.
   Para deixar um bloco fora do padrão, use a classe "mpc-livre". */

:root{ --tq-head-accent:#ef7d1a; }

/* ---------- 1. Cabeçalhos ---------- */
#main .topbar:not(.mpc-livre){ border-left-color:#ef7d1a!important; }

#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy{
  display:grid!important; justify-items:start!important; justify-content:start!important; text-align:left!important; flex-direction:initial!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  column-gap:12px!important; row-gap:2px!important;
  align-items:center!important; align-content:center!important;
}
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy > *{ grid-column:2!important; min-width:0; }
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy > .tq-head-kicker{ grid-column:1 / -1!important; }
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy > .tq-head-icon{ grid-column:1!important; grid-row:2 / span 3!important; align-self:center!important; }
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy:not(:has(> .tq-head-kicker)) > .tq-head-icon{ grid-row:1 / span 3!important; }
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy:not(:has(> .tq-head-icon)){ grid-template-columns:minmax(0,1fr)!important; }
#app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy:not(:has(> .tq-head-icon)) > *{ grid-column:1!important; }

#main .tq-head-icon,
#main .tq-head-icon-svg{
  display:inline-grid!important; place-items:center!important;
  width:38px!important; height:38px!important; min-width:38px; box-sizing:border-box!important;
  border:1px solid #cfe1f5!important; border-radius:10px!important;
  background:#e7f1fd!important; color:#1766b3!important;
  font-size:0!important; line-height:0!important; padding:0!important;
}
#main .tq-head-icon svg,
#main .tq-head-icon-svg svg{ width:20px!important; height:20px!important; stroke:currentColor; fill:none; }

#main .tq-head-kicker{
  display:block!important; margin:0 0 3px!important;
  color:#2c659d!important; font:800 9.5px/1.25 Inter,Arial,Helvetica,sans-serif!important;
  letter-spacing:.55px!important; text-transform:uppercase!important;
}

@media (max-width:760px){
  #app-shell #main .tq-head-copy.tq-head-copy.tq-head-copy{ grid-template-columns:32px minmax(0,1fr)!important; column-gap:10px!important; }
  #main .tq-head-icon, #main .tq-head-icon-svg{ width:32px!important; height:32px!important; min-width:32px; }
  #main .tq-head-icon svg, #main .tq-head-icon-svg svg{ width:17px!important; height:17px!important; }
}

/* ---------- 2. Abas internas ---------- */
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas){
  display:flex!important; flex-wrap:wrap!important; gap:2px 4px!important; align-items:flex-end!important;
  margin:4px 0 14px!important; padding:0!important;
  border:0!important; border-bottom:1px solid #d9e2ec!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
}
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a){
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  min-height:40px!important; height:40px!important; padding:0 14px!important; margin:0 0 -1px!important;
  border:0!important; border-bottom:3px solid transparent!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important; transform:none!important;
  color:#4f5f75!important; font-size:13.5px!important; font-weight:600!important; white-space:nowrap; text-decoration:none!important;
}
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a):hover{ color:#12345f!important; background:transparent!important; }
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a):is(.active,.ativo,.ativa,.is-on,[aria-selected="true"],[aria-current="page"]){
  color:#12345f!important; border-bottom-color:#f47b16!important; background:transparent!important;
}
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a) svg{ width:16px!important; height:16px!important; }
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a) :is(.fcad-qtd,.nps-tab-n){
  background:#eef3f9!important; color:#4f5f75!important; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:700;
}
#app-shell #main :is(.fin-subabas-conteudo,.nps-tabs,.rgo-tabs,.mp-tabs,.lax-abas) > :is(button,a):is(.active,.ativo,.is-on,[aria-selected="true"]) :is(.fcad-qtd,.nps-tab-n){
  background:#fff1e3!important; color:#9f4f0c!important;
}

/* ---------- 3. Botões ---------- */
/* Secundários genéricos (branco, borda e texto azul) */
#app-shell #main :is(
  button.btn:not(.primary):not(.btn-primary):not(.danger):not([class*="danger"]):not([class*="role-primary"]):not([class*="role-neutral"]):not([class*="role-danger"]):not([class*="chip"]):not([class*="tab"]):not([class*="aba"]):not(.is-on):not(.active),
  button.small:not(.primary):not(.danger):not([class*="danger"]):not([class*="ghost"]):not([class*="role-primary"]):not([class*="role-neutral"]):not([class*="role-danger"]):not([class*="chip"]):not([class*="tab"]):not([class*="aba"]):not([class*="icon"]):not(.is-on):not(.active),
  button.fin-bx-btn, button.rgo-btn-green, button.success-ghost
){
  background:#fff!important; border:1px solid #8db8f6!important; color:#1766b3!important; box-shadow:none!important;
}
#app-shell #main :is(button.btn,button.small,button.fin-bx-btn,button.rgo-btn-green,button.success-ghost):not(.primary):not([class*="role-primary"]):not([class*="danger"]):hover{
  background:#f3f8ff!important; border-color:#5f9be8!important;
}
#app-shell #main button.rgo-btn-green svg{ stroke:currentColor!important; }

/* Ação principal de tela marcada como "sucesso" volta ao laranja do sistema */
#app-shell #main button.mp-nfe-btn-primary{
  background:#f07f1a!important; border-color:#f07f1a!important; color:#fff!important;
}
#app-shell #main button.mp-nfe-btn-primary:hover{ background:#dc6e0f!important; border-color:#dc6e0f!important; }

/* ---------- 4. Faixa de abas do topo ---------- */
@media (max-width:1500px) and (min-width:861px){
  #top-tabs .top-tab{ padding-left:10px!important; padding-right:10px!important; }
  #top-tabs .top-tabs-row{ column-gap:2px!important; }
}
