/* ==========================================================================
   FACELIFT nstech — camada de override de cores e tipografia
   ==========================================================================

   Alinha o PEF eFRETE a identidade visual da nstech (empresa-mae, BU PSL).
   Carregada em TODOS os ambientes, sempre DEPOIS de bootstrap.cerulean.min.css.
   O sinal de ambiente e' a faixa dedicada (Views/Shared/_FaixaDeAmbiente.cshtml),
   nao mais a troca de tema.

   --------------------------------------------------------------------------
   PALETA
   --------------------------------------------------------------------------
   PRIMARY (era azul #2fa4e7 do Bootswatch Cerulean)
     #ff3d03  superficie preenchida (botao, label, badge, barra)   3,55:1 c/ #fff
     #cf3000  TEXTO sobre branco (link, .text-primary, .btn-link)  5,15:1 c/ #fff  [AA]
     #b62a00  texto hover / active profundo                        6,32:1 c/ #fff
     #ff5d2c  gradiente topo        #ee3700  gradiente base
     #c42d00  borda de hover/active #f93a00  borda do navbar-default

   INFO + NAVBAR (era navy #033c73)
     #2e333d  base charcoal nstech                                12,67:1 c/ #fff
     #23272e  borda + hover/active
     #404754 / #373d49 / #2a2e37   gradiente topo/meio/base
     #181b20  border-bottom
     #252931 / #1f2228 / #13151a   info hover / active / deep

   WARNING — ATENCAO, a familia esta PARTIDA EM DUAS desde 2026-08-27:

     BOTAO (era laranja #dd5600, depois ambar #ffc720) -> CINZA CLARO nstech
     #c5cad2  base, 4o degrau da rampa neutra, TEXTO ESCURO       9,37:1 c/ #212529
     #a9b0bc  hover bg              #a3abb8  hover borda
     #d7dae0 / #bdc3cc             gradiente topo/base
       excecao: o par CPF/CNPJ usa btn-warning como ESTADO, nao acao -> 13.7

     STATUS (label / progress-bar / panel) -> segue AMBAR
     #ffc720  ambar nstech, exige TEXTO ESCURO                     9,87:1 c/ #212529
     #ecb100  hover bg              #e2a900  hover borda
       e o bg-warning palido #fcf8e3 do Bootstrap segue intocado nos 12
       swatches de legenda e nas faixas tr.bg-warning

   Tons derivados obtidos aplicando ao matiz nstech os MESMOS deltas de
   luminosidade HSL que o Cerulean usa, para que cada estado (hover, active,
   disabled) preserve a relacao perceptual que ja tem hoje.

   ==========================================================================
   REGRA ESTRUTURAL — POR QUE ESTE ARQUIVO E' ORDENADO POR FAMILIA
   ==========================================================================

   O Bootstrap 3 declara cada familia contextual nesta ordem:

       default -> primary -> success -> info -> warning -> danger

   Todas com a MESMA especificidade (0,1,0). Quando um elemento recebe duas
   classes da mesma familia, quem ganha e' simplesmente a ULTIMA DECLARADA.
   O sistema depende disso: ha 6 telas onde o Knockout empilha uma classe de
   alerta sobre uma classe base, p.ex.

     Areas/TI/Views/Servicos/Index.cshtml:2493
       <span class="label label-primary"
             data-bind="css: { 'label-danger': ..., 'label-warning': ... }">

     Areas/Comercial/Views/Home/Index.cshtml:125,137,142,305,317,322
       <span class="label label-primary"
             data-bind="css: { 'label-danger': ... }">

   Sobrescrever SO .label-primary nesta folha faria o primary vencer o danger
   (por vir depois na cascata) e o alerta desapareceria. O mesmo vale para
   .btn-primary vs .btn-success (co-ocorrem em 1 tela), .btn-warning vs
   .btn-default (2 telas), .panel-default vs .panel-success (1 tela) e
   .progress-bar vs .progress-bar-*, que SEMPRE co-ocorrem.

   Por isso cada familia abaixo e' reescrita INTEIRA, na ordem canonica,
   inclusive os membros que nao mudam de cor (success e danger). Eles estao
   aqui apenas para restaurar a precedencia.

   >>> NAO REORDENAR NADA NESTE ARQUIVO. <<<

   O mesmo se aplica ao navbar: Views/Shared/Bootstrap/Menu.cshtml:68 aplica
   navbar-inverse E navbar-default na mesma tag. O Cerulean declara
   .navbar-default antes de .navbar-inverse, e' por isso que o menu e' escuro.
   Se .navbar-default for movido para depois, o menu principal fica LARANJA.

   Nenhum !important: a posicao na cascata ja garante precedencia.

   --------------------------------------------------------------------------
   NAO ALTERADO (deliberado)
   --------------------------------------------------------------------------
   danger #c71c22 · success #73a839 · text-info #3a87ad · text-warning #c09853
   alert-* · bg-success/info/warning/danger (state colors palidos)
   form-control:focus #66afe9
   Content/Styles/Constantes/LabelColors.css (familia roxa de status)
   ========================================================================== */


/* ==========================================================================
   0. TIPOGRAFIA — Barlow (fonte oficial da nstech)
   ==========================================================================

   Confirmada no CSS de nstech.com.br, que aplica em body, h1..h6, a, li, p,
   span e .btn-primary:
       a,body,h1,h2,h3,h4,h5,h6,li,p,span { font-family: Barlow, sans-serif }
       body { font-family: Barlow, sans-serif !important }
   O site usa os pesos 400, 500 e 700, carregados do Google Fonts.

   Aqui a fonte e' AUTO-HOSPEDADA em ~/fonts/, nao vem de CDN. Motivos:
     - nao depender de egress de internet em producao num sistema financeiro
     - nao vazar navegacao do usuario para o Google
     - a CSP do Web.config permitiria o CDN (font-src * / style-src *), entao a
       escolha e' deliberada, nao imposta

   Subsets baixados: latin e latin-ext em woff2 (portugues cabe em latin;
   latin-ext e' seguro para nomes proprios estrangeiros). Vietnamese descartado.

   Cada @font-face tem um SEGUNDO src em .woff (fonte completa, sem subset) por
   dois motivos:
     1) IE11 nao suporta woff2
     2) seguro contra IIS sem mimeMap de .woff2 -- o Web.config base nao
        registra .woff2 (so .yaml) e o Web.JenkinsProducao.config REMOVE a
        secao <staticContent> inteira, entao em producao isso depende do
        servidor, nao do repositorio.
        CONFERIDO EM PRODUCAO em 2026-09-02: o servidor JA serve .woff2
        (HTTP 200, application/font-woff2, que e' o mapeamento default do IIS).
        Nada a fazer. O src .woff continua ali pelo motivo 1 e como rede.

   O Cerulean fixa a stack "Helvetica Neue" em apenas DOIS seletores -- body e
   o grupo de headings. Form controls usam `font-family: inherit`, entao herdam
   de body automaticamente. Por isso bastam os dois overrides abaixo.

   Medicao de impacto de layout (canvas measureText, 14px): Barlow e' 2-8% mais
   ESTREITA que a stack atual no peso normal e 5-9% no bold. Texto mais estreito
   nao transborda container de largura fixa -- sobra espaco. Risco baixo.

   IE11 nao suporta woff2, mas recebe Barlow pelo src .woff. Se ambos falharem,
   vale o fallback Helvetica/Arial declarado na font-family -- sem quebra.

   NAO alcanca: o stack legado (_Layout.cshtml + Site.css, que declara Verdana
   e Arial proprios e nao carrega esta folha) nem os templates de impressao e
   e-mail, que tem layout proprio.
   ========================================================================== */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/barlow-400-latin-ext.woff2') format('woff2'),
       url('../../fonts/barlow-400.woff') format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/barlow-400-latin.woff2') format('woff2'),
       url('../../fonts/barlow-400.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/barlow-500-latin-ext.woff2') format('woff2'),
       url('../../fonts/barlow-500.woff') format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/barlow-500-latin.woff2') format('woff2'),
       url('../../fonts/barlow-500.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/barlow-700-latin-ext.woff2') format('woff2'),
       url('../../fonts/barlow-700.woff') format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/barlow-700-latin.woff2') format('woff2'),
       url('../../fonts/barlow-700.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Os dois unicos seletores do Cerulean que fixam a fonte. */
body {
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   1. LINKS
   ========================================================================== */

a {
  color: #cf3000;
}

a:hover,
a:focus {
  color: #b62a00;
}


/* ==========================================================================
   1b. TITULOS
   O Cerulean pinta h1..h6 com #317eac (token @headings-color, independente
   de @brand-primary — por isso nao aparece na varredura da familia primary).
   Sao o elemento de texto mais visivel de cada tela: deixados como estavam,
   todo titulo do sistema continuaria azul.

   Vao para o charcoal nstech, que e' o que a propria nstech usa para titulo
   (neutro, 12,67:1 sobre branco, sem competir com o laranja de acento).
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #2e333d;
}

/* GUARDA OBRIGATORIA — headings sobre fundo escuro.
   A Central de Avisos renderiza a mensagem como <h3> dentro do carrossel, e
   .avisos-item / .item-propaganda tem fundo #333 (Site-Bootstrap.css:114,120).
   Sem esta regra o aviso fica escuro-sobre-escuro: 1,00:1, invisivel.
   (O Bootstrap protege panel-title, alert h4 e jumbotron h1 com `inherit`,
   mas NAO protege .carousel-caption — ali a cor do h3 vence a heranca.)
   Verificado no app rodando em 2026-08-19. */
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3,
.carousel-caption h4, .carousel-caption h5, .carousel-caption h6,
.avisos-item h1, .avisos-item h2, .avisos-item h3,
.avisos-item h4, .avisos-item h5, .avisos-item h6,
.item-propaganda h1, .item-propaganda h2, .item-propaganda h3,
.item-propaganda h4, .item-propaganda h5, .item-propaganda h6 {
  color: #ffffff;
}

/* headings dentro de panel-heading colorido: o Bootstrap so protege via
   .panel-title. Se a view usar <h3> nu dentro do heading, a cor do heading
   tem de ganhar. */
.panel-primary > .panel-heading h1, .panel-primary > .panel-heading h2,
.panel-primary > .panel-heading h3, .panel-primary > .panel-heading h4,
.panel-info > .panel-heading h1, .panel-info > .panel-heading h2,
.panel-info > .panel-heading h3, .panel-info > .panel-heading h4,
.panel-danger > .panel-heading h1, .panel-danger > .panel-heading h2,
.panel-danger > .panel-heading h3, .panel-danger > .panel-heading h4 {
  color: #ffffff;
}

.panel-warning > .panel-heading h1, .panel-warning > .panel-heading h2,
.panel-warning > .panel-heading h3, .panel-warning > .panel-heading h4 {
  color: #212529;
}


/* ==========================================================================
   2. FAMILIA text-*        ordem: primary success info warning danger
   Texto sobre fundo branco -> tom escurecido para atender AA.
   ========================================================================== */

.text-primary {
  color: #cf3000;
}

a.text-primary:hover {
  color: #b62a00;
}

.text-success {
  color: #468847;
}

.text-info {
  color: #3a87ad;
}

.text-warning {
  color: #c09853;
}

.text-danger {
  color: #b94a48;
}


/* ==========================================================================
   3. FAMILIA bg-*          ordem: primary success info warning danger
   ========================================================================== */

.bg-primary {
  background-color: #ff3d03;
}

a.bg-primary:hover {
  background-color: #cf3000;
}

.bg-success {
  background-color: #dff0d8;
}

.bg-info {
  background-color: #d9edf7;
}

.bg-warning {
  background-color: #fcf8e3;
}

.bg-danger {
  background-color: #f2dede;
}


/* ==========================================================================
   4. FAMILIA btn-*         ordem: primary success info warning danger
   ========================================================================== */

/* --- btn-primary --- */
.btn-primary {
  color: #ffffff;
  background-color: #ff3d03;
  border-color: #ff3d03;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #cf3000;
  border-color: #c42d00;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #ff3d03;
  border-color: #ff3d03;
}

.btn-primary .badge {
  color: #cf3000;
  background-color: #ffffff;
}

/*  --- btn-success — VERDE -> SLATE nstech (2026-08-26) ---
    O verde vivo do Cerulean (#73a839) destoava da paleta nstech. Pedido do
    time: tirar o verde dos BOTOES.

    Nao virou laranja: btn-success tem 325 usos em 196 telas, e em 87 delas
    convive com btn-primary -- os dois em laranja apagaria a hierarquia entre
    acao principal ("Salvar") e secundaria ("Adicionar", "Avancar").
    Nao virou o charcoal #2e333d tampouco: .btn-info ja e' charcoal e os dois
    co-ocorrem em 49 telas, o que so mudaria a colisao de lugar.

    E' hsl(220, 14%, 46%) -- mesmo matiz e saturacao do charcoal nstech
    (hsl 220,14%,21%) e do cinza claro de referencia #c5cad2 (hsl 217,13%,80%),
    que sao a mesma rampa neutra da marca. Fica no meio dela.
    Contraste 4,98:1 com texto branco (AA) e 2,54:1 contra o charcoal do info.

    STATUS em verde nao muda: bg-success (70 usos), label-success (37),
    text-success (154) e panel-success (32) seguem #73a839.  */
.btn-success {
  color: #ffffff;
  background-color: #657086;
  border-color: #657086;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #ffffff;
  background-color: #4f5869;
  border-color: #4a5262;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #657086;
  border-color: #657086;
}

.btn-success .badge {
  color: #657086;
  background-color: #ffffff;
}

/* --- btn-info --- */
.btn-info {
  color: #ffffff;
  background-color: #2e333d;
  border-color: #2e333d;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #ffffff;
  background-color: #181b20;
  border-color: #13151a;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #2e333d;
  border-color: #2e333d;
}

.btn-info .badge {
  color: #2e333d;
  background-color: #ffffff;
}

/*  --- btn-warning — AMBAR -> CINZA CLARO nstech (2026-08-27) ---
    Pedido do time: "nao quero mais esses botoes em amarelo, troque pelo mesmo
    cinza dos outros amarelos". O cinza em questao e' o #c5cad2 do 13.2/13.4.

    Continuidade da decisao do btn-success: o time esta tirando cor vibrante
    dos BOTOES e deixando o laranja como a unica cor de acao. Sobra o 4o degrau
    da rampa neutra nstech -- #c5cad2 e' hsl(217,13%,80%), mesma rampa do
    charcoal (21%) e do slate do btn-success (46%).

    Texto escuro #212529: 9,37:1. Continua distinguivel do btn-default do
    Cerulean (branco/#eee) por luminosidade, mas de perto os dois sao neutros
    claros -- por isso o par CPF/CNPJ, onde btn-warning marca ESTADO e nao acao,
    tem pin proprio no bloco 13.7. Ler aquele bloco antes de mexer aqui.

    STATUS em amarelo NAO muda: bg-warning palido (#fcf8e3) segue nos 12
    swatches de legenda e nas faixas tr.bg-warning; label-warning e
    panel-warning seguem ambar. So a familia de BOTAO mudou.

    Tons derivados com os mesmos deltas de luminosidade que o Cerulean usa:
    hover 70%, borda 68%, gradiente 86% -> 80% -> 77%.  */
.btn-warning {
  color: #212529;
  background-color: #c5cad2;
  border-color: #c5cad2;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #212529;
  background-color: #a9b0bc;
  border-color: #a3abb8;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  color: #212529;
  background-color: #c5cad2;
  border-color: #c5cad2;
}

/*  O Cerulean inverte badge e botao (`color: <fundo do botao>;
    background-color: <cor do texto>`). Com o ambar isso dava branco sobre
    branco -- badge sem contorno. Com o cinza a inversao volta a fazer sentido:
    #c5cad2 sobre #212529, 9,37:1.  */
.btn-warning .badge {
  color: #c5cad2;
  background-color: #212529;
}

/* --- btn-danger — INALTERADO, presente apenas para restaurar a ordem --- */
.btn-danger {
  color: #ffffff;
  background-color: #c71c22;
  border-color: #c71c22;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #ffffff;
  background-color: #9a161a;
  border-color: #911419;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #c71c22;
  border-color: #c71c22;
}

.btn-danger .badge {
  color: #c71c22;
  background-color: #ffffff;
}

.btn-link {
  color: #cf3000;
}

.btn-link:hover,
.btn-link:focus {
  color: #b62a00;
}


/* ==========================================================================
   5. GRADIENTES dos botoes (bloco de tema do Cerulean, ~linha 6216+)
   Mesma ordem canonica. O Cerulean anula o filtro IE com `filter: none`
   logo apos o progid, por isso aqui basta repetir `filter: none`.
   ========================================================================== */

.btn-primary {
  background-image: -webkit-linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-image: -o-linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-image: linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #cf3000;
}

.btn-success {
  background-image: -webkit-linear-gradient(#79849a, #657086 60%, #5c667a);
  background-image: -o-linear-gradient(#79849a, #657086 60%, #5c667a);
  background-image: linear-gradient(#79849a, #657086 60%, #5c667a);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #4f5869;
}

.btn-info {
  background-image: -webkit-linear-gradient(#404754, #2e333d 60%, #252931);
  background-image: -o-linear-gradient(#404754, #2e333d 60%, #252931);
  background-image: linear-gradient(#404754, #2e333d 60%, #252931);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #181b20;
}

.btn-warning {
  background-image: -webkit-linear-gradient(#d7dae0, #c5cad2 60%, #bdc3cc);
  background-image: -o-linear-gradient(#d7dae0, #c5cad2 60%, #bdc3cc);
  background-image: linear-gradient(#d7dae0, #c5cad2 60%, #bdc3cc);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #a9b0bc;
}

.btn-danger {
  background-image: -webkit-linear-gradient(#e12b31, #c71c22 60%, #b5191f);
  background-image: -o-linear-gradient(#e12b31, #c71c22 60%, #b5191f);
  background-image: linear-gradient(#e12b31, #c71c22 60%, #b5191f);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #9a161a;
}

/* o :active anula o gradiente — repetido para vir depois dos blocos acima */
.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.btn-info:active,
.btn-info.active,
.btn-warning:active,
.btn-warning.active,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-warning,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}


/* ==========================================================================
   6. FAMILIA label-*       ordem: primary success info warning danger
   E' AQUI que a escalada do Knockout acontece (TI/Servicos, Comercial/Home).
   ========================================================================== */

.label-primary {
  background-color: #ff3d03;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #cf3000;
}

.label-success {
  background-color: #73a839;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #59822c;
}

.label-info {
  background-color: #2e333d;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #181b20;
}

.label-warning {
  color: #212529;
  background-color: #ffc720;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  color: #212529;
  background-color: #ecb100;
}

.label-danger {
  color: #ffffff;
  background-color: #c71c22;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  color: #ffffff;
  background-color: #9a161a;
}


/* ==========================================================================
   7. BARRAS DE PROGRESSO
   .progress-bar e .progress-bar-* SEMPRE co-ocorrem na mesma tag, entao a
   base tem que vir primeiro e todos os modificadores depois.
   ========================================================================== */

.progress-bar {
  background-color: #ff3d03;
}

.progress-bar-success {
  background-color: #73a839;
}

.progress-bar-info {
  background-color: #2e333d;
}

.progress-bar-warning {
  color: #212529;
  background-color: #ffc720;
}

.progress-bar-danger {
  background-color: #c71c22;
}


/* ==========================================================================
   8. FAMILIA panel-*       ordem: primary success info warning danger
   O Cerulean usa cores de texto ilegiveis sobre estes fundos ja hoje
   (#3a87ad sobre navy, #c09853 sobre laranja). Corrigido junto do fundo.
   ========================================================================== */

.panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #ff3d03;
}

.panel-primary > .panel-heading .badge {
  color: #cf3000;
  background-color: #ffffff;
}

.panel-success > .panel-heading {
  color: #468847;
  background-color: #dff0d8;
}

.panel-info > .panel-heading {
  color: #ffffff;
  background-color: #2e333d;
}

.panel-info > .panel-heading .badge {
  color: #2e333d;
  background-color: #ffffff;
}

.panel-warning > .panel-heading {
  color: #212529;
  background-color: #ffc720;
}

.panel-warning > .panel-heading .badge {
  color: #212529;
  background-color: #ffffff;
}

.panel-danger > .panel-heading {
  color: #ffffff;
  background-color: #c71c22;
}

.panel-danger > .panel-heading .badge {
  color: #c71c22;
  background-color: #ffffff;
}


/* ==========================================================================
   9. BADGES, DROPDOWNS, NAV, PAGINACAO, LIST-GROUP, THUMBNAIL
   ========================================================================== */

.badge {
  background-color: #ff3d03;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #cf3000;
  background-color: #ffffff;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #ff3d03;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #ff3d03;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  border-color: #ff3d03;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #ff3d03;
}

.pagination > li > a,
.pagination > li > span {
  color: #cf3000;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #b62a00;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #ff3d03;
  border-color: #ff3d03;
}

/* texto secundario dentro do item ativo: era #e6f4fc (branco azulado), que
   ficaria com tom frio sobre o laranja. Passa para branco morno. */
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #ffe8e0;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #ff3d03;
}


/* ==========================================================================
   10. NAVBAR
   Ordem obrigatoria: .navbar (generico) -> .navbar-default -> .navbar-inverse
   Menu.cshtml:68 usa navbar-inverse E navbar-default na mesma tag; o inverse
   so vence porque vem depois. Ver REGRA ESTRUTURAL no cabecalho.
   ========================================================================== */

/* --- .navbar generico: o Cerulean pinta todo navbar com o gradiente primario --- */
.navbar {
  background-image: -webkit-linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-image: -o-linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-image: linear-gradient(#ff5d2c, #ff3d03 60%, #ee3700);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #cf3000;
}

/* --- .navbar-default (variante primaria) --- */
.navbar-default {
  background-color: #ff3d03;
  border-color: #f93a00;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #cf3000;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #cf3000;
}

.navbar-default .navbar-toggle {
  border-color: #cf3000;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #cf3000;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #f93a00;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #cf3000;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  background-color: #cf3000;
}

.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  background-color: #cf3000;
}

.navbar-default .badge {
  color: #cf3000;
  background-color: #ffffff;
}

/* --- .navbar-inverse: E' ESTE que pinta o menu principal do sistema --- */
.navbar-inverse {
  background-color: #2e333d;
  border-color: #23272e;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  background-color: #23272e;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #23272e;
}

.navbar-inverse .navbar-toggle {
  border-color: #23272e;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #23272e;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #1f2228;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #23272e;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
  border-color: #23272e;
}

/*  Divisoria dos submenus: era #23272e, escuro sobre o charcoal do dropdown, o
    que dava um corte "afundado". Pedido do time: cinza claro, para a separacao
    parecer flutuante. #c5cad2 e' o cinza claro de referencia da nstech.  */
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  background-color: #c5cad2;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  background-color: #23272e;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
  background-color: #23272e;
}

.navbar-inverse {
  background-image: -webkit-linear-gradient(#404754, #373d49 60%, #2a2e37);
  background-image: -o-linear-gradient(#404754, #373d49 60%, #2a2e37);
  background-image: linear-gradient(#404754, #373d49 60%, #2a2e37);
  background-repeat: no-repeat;
  filter: none;
  border-bottom: 1px solid #181b20;
}

.navbar-inverse .badge {
  color: #2e333d;
  background-color: #ffffff;
}


/* ==========================================================================
   11. AZUL ORFAO fora de qualquer familia do tema
   .badge-primary em Content/Site-Bootstrap.css:164 usa #007bff, o azul do
   Bootstrap 4 — nunca combinou nem com o Cerulean. Sobrescrito aqui em vez
   de editado no lugar, para manter o diff aditivo e o efeito so em producao.
   ========================================================================== */

.badge-primary {
  color: #fff;
  background-color: #ff3d03;
}


/* ==========================================================================
   12. PINS — cores de STATUS preservadas no azul atual
   ==========================================================================

   Em legendas de grid, bg-primary e label-primary nao sao "cor de acao" —
   sao CODIGO DE STATUS que o operador ja reconhece. Manter o azul evita
   reaprendizado e evita reaproximar do warning.

   Todos os seletores sao compostos e ancorados em classes/ids que ja existem
   no markup. Nenhum .cshtml foi alterado para viabiliza-los.

   NAO GENERALIZAR. Um pin cru em .label-primary venceria .label-warning e
   .label-danger e quebraria as escalas de alerta descritas na REGRA
   ESTRUTURAL do cabecalho.
   -------------------------------------------------------------------------- */

/* swatch quadrado de legenda — Areas/Admin/Views/Fretes/Index.cshtml:912
   ("Agregado com saldo"). .legend e' irma na mesma tag. */
.legend.bg-primary,
#LegendaListaDialog .bg-primary {
  background-color: #2fa4e7;
}

/* legendas de fatura — label dentro de <ul class="legenda"> / <li ...>:
     Areas/Admin/Views/FaturaTransportadora/Bootstrap/Index.cshtml:792
     Areas/Credenciados/Views/RelatorioFatura/Index.cshtml:1095
     Areas/Credenciados/Views/RelatorioFatura/Antigo/IndexOld.cshtml:678 */
ul.legenda .label-primary,
li.legendaFaturas .label-primary,
li.paddingLegenda .label-primary,
li.margemLegenda .label-primary {
  background-color: #2fa4e7;
}

/* celulas do grid de fatura, montadas por Knockout:
     .../FaturaTransportadora/Bootstrap/Index.cshtml:767  (Tipo == 'Adiantamentos')
     .../Credenciados/RelatorioFatura/Index.cshtml:1051   (Tipo == 'Frota')
     .../RelatorioFatura/Antigo/IndexOld.cshtml:652       (Tipo == 'Frota')
     Views/Shared/Template_Grid.cshtml:182                (template compartilhado)

   O filtro [data-bind*="Tipo"] e' o que separa estes labels das escalas de
   alerta do dashboard de TI, cujo data-bind fala de TotalFreeSpace / Usage
   (verificado: nenhuma das duas linhas contem a palavra "Tipo"). Sem esse
   filtro, warning e danger seriam atropelados por especificidade. */
span.label[data-bind*="Tipo"].label-primary {
  background-color: #2fa4e7;
}

/* par de status binario — Areas/Admin/Views/ConsultaDeDocumentos/Bootstrap/Index.cshtml:710
   ("Gerado pela IPC" vs "Envio direto para Transportadora") */
#id_tabela_lotes .label-primary {
  background-color: #2fa4e7;
}


/* ==========================================================================
   13. AJUSTES PONTUAIS PEDIDOS PELO TIME — 2026-08-26
   ==========================================================================

   Cores de referencia recebidas do time:
     AZUL ESCURO  #000032   (recebida, mas nenhum ajuste desta rodada usa)
     CINZA ESCURO #2e333d   (= o charcoal nstech que ja usamos)
     CINZA CLARO  #c5cad2

   Nota: os tres cinzas da nstech sao a MESMA rampa neutra --
   #2e333d = hsl(220,14%,21%) e #c5cad2 = hsl(217,13%,80%). Tons intermediarios
   devem ser derivados desse matiz, nao inventados.

   Todas as regras abaixo sao ESCOPADAS de proposito. Uma troca global de
   .bg-info ou .bg-warning destruiria significado de status: 4 legendas usam
   bg-info e 12 usam bg-warning como swatch. Ver cada bloco.
   ========================================================================== */

/*  13.1 Icones "nus" dentro de link -> cinza escuro  (ampliado em 2026-08-26)
    ------------------------------------------------------------------
    Sintoma relatado: os icones depois da coluna Telefones, na tabela
    "Envolvidos" do detalhe do CIOT, apareciam num tom vermelho/laranja escuro.

    Causa: esses icones NAO tem classe de cor propria -- herdam a cor do link.
    O facelift mudou `a { color }` de #2fa4e7 (azul) para #cf3000, e todo icone
    dentro de link virou laranja escuro. E' consequencia direta daquela mudanca.

    A primeira versao escopava em `td` para nao apagar os icones do navbar.
    O time pediu a troca em TODAS as telas, entao o `td` saiu e a protecao do
    navbar passou a ser explicita (bloco 13.1b abaixo).

    Duas mudancas de forma em relacao a versao anterior:
      - descendente em vez de filho direto (`a i` e nao `a > i`): ha icones
        aninhados em <span>, como as abas de Admin/Fretes
        (<a role="tab"><span><i class="fa fa-phone">), que o `>` nao alcancava.
      - inclui span.glyphicon, nao so i.glyphicon.

    Guardas que permanecem:
      :not(.btn)             -> 182 icones vivem dentro de <a class="btn ...">,
                                sobre botao colorido com texto branco.
      :not([class*="text-"]) -> preserva icone com cor semantica propria
                                (text-success, text-danger...). Como o seletor
                                nao casa esses elementos, nao ha disputa de
                                especificidade com as classes .text-*.  */
a:not(.btn) i.fa:not([class*="text-"]),
a:not(.btn) i.glyphicon:not([class*="text-"]),
a:not(.btn) span.glyphicon:not([class*="text-"]) {
  color: #2e333d;
}

/*  13.1b Contextos de fundo ESCURO/COLORIDO -> icone volta a herdar
    ------------------------------------------------------------------
    Sem isto, a regra acima apagaria icone claro sobre fundo escuro -- o mesmo
    erro que ja aconteceu duas vezes neste facelift (texto da Central de Avisos
    invisivel, e a faixa de ambiente se fundindo ao menu).

    Especificidade: a regra 13.1 e' (0,3,2). Cada seletor abaixo repete a forma
    `a:not(.btn) i.fa` para chegar a (0,3,2) ou mais e vencer por ORDEM DE
    FONTE, ja que vem depois. Nao reordenar.

    .carousel-control entra porque as setas do carrossel sao
    <a class="carousel-control"><span class="glyphicon ...">, claras sobre o
    fundo #333 de .avisos-item.  */
.navbar a:not(.btn) i.fa,
.navbar a:not(.btn) i.glyphicon,
.navbar a:not(.btn) span.glyphicon,
.carousel-control i.fa,
.carousel-control span.glyphicon,
.avisos-item a:not(.btn) i.fa,
.avisos-item a:not(.btn) span.glyphicon,
.item-propaganda a:not(.btn) i.fa,
.carousel-caption a:not(.btn) i.fa,
.list-group-item.active a:not(.btn) i.fa,
.panel-primary > .panel-heading a:not(.btn) i.fa,
.panel-info > .panel-heading a:not(.btn) i.fa,
.panel-danger > .panel-heading a:not(.btn) i.fa {
  color: inherit;
}

/* panel-warning tem fundo ambar e texto escuro */
.panel-warning > .panel-heading a:not(.btn) i.fa {
  color: #212529;
}

/*  13.1c Botao dentro de titulo de painel: reafirmar a cor do proprio botao
    ------------------------------------------------------------------
    REGRESSAO QUE O FACELIFT INTRODUZIU, achada medindo contraste no app real
    em 2026-08-26.

    O Bootstrap tem `.panel-title > a { color: inherit }`
    (bootstrap.cerulean.css:4997), especificidade (0,1,1), que VENCE
    `.btn-warning` (0,1,0). Ou seja: botao dentro de titulo de painel herda a
    cor do CABECALHO em vez de usar a sua propria.

    Antes isso passava: o cabecalho do panel-info era navy com texto #3a87ad, e
    o btn-warning era laranja escuro com texto branco -- feio, mas legivel.
    Depois do facelift o cabecalho ficou charcoal com texto BRANCO e o
    btn-warning ficou ambar claro, entao o botao virou branco sobre #ffc720:
    contraste 1,56:1. Caso real em Admin/Suporte -- o botao "FAQ" dentro de um
    panel-info.

    Ordem canonica mantida (default -> primary -> success -> info -> warning ->
    danger), pelo mesmo motivo do resto do arquivo: sao todas (0,2,2).  */
.panel-title > a.btn-default {
  color: #333333;
}

.panel-title > a.btn-primary {
  color: #ffffff;
}

.panel-title > a.btn-success {
  color: #ffffff;
}

.panel-title > a.btn-info {
  color: #ffffff;
}

.panel-title > a.btn-warning {
  color: #212529;
}

.panel-title > a.btn-danger {
  color: #ffffff;
}

/*  13.1d Spinner de submit dentro de botao -> herda a cor do botao
    ------------------------------------------------------------------
    `<i class="fa fa-spinner fa-spin text-info hidden" id="__submitStatus">`
    aparece dentro de botoes de submit (Base.cshtml e varias telas) e fica
    visivel so durante o envio. Sendo text-info (#3a87ad), ficava azul sobre o
    laranja do btn-primary: 1,13:1, praticamente invisivel justo quando precisa
    ser visto.

    Nao e' regressao do facelift -- antes era #3a87ad sobre o azul #2fa4e7, dois
    azuis, tambem ilegivel. Mas ficou pior e a correcao e' trivial.

    Escopado ao spinner de proposito: e' indicador de carregamento, a cor nao
    carrega significado. Icone com cor semantica dentro de botao segue intacto.  */
.btn i.fa-spinner {
  color: inherit;
}

/*  13.2 Faixa de agrupamento em tabela -> cinza claro
    ------------------------------------------------------------------
    Sintoma: na lista de CIOTs emitidos (tela inicial), a linha superior da
    tabela -- a que traz a data -- tinha fundo azul claro (#d9edf7, o bg-info
    do Bootstrap).

    Escopado em `tr` de proposito: as 19 faixas de agrupamento do sistema sao
    todas <tr class="bg-info">, enquanto as 4 legendas que usam bg-info como
    STATUS sao <span class="legend bg-info"> ou <div class="legend bg-info">.
    Trocar `.bg-info` global apagaria o status "Produto ativo" de
    ProdutoStatus.cshtml, ContaUnicaMensalidade e PlanoEmissaoCIOT.  */
tr.bg-info {
  background-color: #c5cad2;
}

/*  A listra do Bootstrap e' `.table-striped > tbody > tr:nth-child(odd) > td`
    (bootstrap.cerulean.css:2114), especificidade 0,2,3 -- e ela pinta o TD, que
    fica visualmente por cima do TR. Uma regra so em `tr.bg-info` (0,1,2) perde
    a faixa em tabela listrada. Espelhar o padrao do proprio Bootstrap empata em
    0,2,3 e vence por ordem de fonte, ja que esta folha carrega depois.
    Hoje so 1 das 16 telas com faixa e' listrada (Transportadoras/Fretes/
    IndexAntigo.cshtml), mas a regra evita a inconsistencia se outra virar.  */
.table > thead > tr.bg-info > td,
.table > tbody > tr.bg-info > td,
.table > tfoot > tr.bg-info > td,
.table > thead > tr.bg-info > th,
.table > tbody > tr.bg-info > th,
.table > tfoot > tr.bg-info > th {
  background-color: #c5cad2;
}

/*  13.3 Icone do titulo de pagina -> laranja
    ------------------------------------------------------------------
    Sintoma: no detalhe do CIOT, o icone ao lado do numero (fa-bank, que parece
    uma casinha) estava azul. Era text-info (#3a87ad), que o facelift deixou
    azul de proposito por ser state color do Bootstrap -- mas em titulo ele
    lia como sobra do tema antigo.

    O numero do CIOT ao lado JA e' cinza escuro: e' texto nu dentro do <h1>, e
    o facelift ja pinta h1..h6 com #2e333d. So parecia preto.

    Vale para os 10 headings do sistema que trazem icone text-info.
    #ff3d03 (nao #cf3000) porque em tamanho de heading o icone e' grafico
    grande -- 3,55:1 atende AA para large text/UI.  */
h1 > i.text-info,
h2 > i.text-info,
h3 > i.text-info,
h4 > i.text-info {
  color: #ff3d03;
}

/*  13.4 Campo de formulario destacado -> cinza claro
    ------------------------------------------------------------------
    Sintoma: em Credenciados -> Nova Transacao (TransacaoDeFrete/Index.cshtml:575),
    o campo "Codigo de Barras" tinha fundo amarelo claro (#fcf8e3, bg-warning).

    Escopado em .form-group de proposito: e' destaque de CAMPO. As outras 63
    ocorrencias de bg-warning incluem 12 legendas de status ("Agregado nao
    encerrado", "TAC nao encerrado", "Cancelado", "Aberto sem Executor"...) e
    faixas tr.bg-warning, que continuam amarelas.  */
.form-group.bg-warning {
  background-color: #c5cad2;
}

/*  13.5 Texto de ajuda dentro do campo destacado -> cinza mais escuro
    ------------------------------------------------------------------
    Sintoma: em Credenciados -> Nova Transacao, a descricao abaixo do campo
    "Codigo de Barras" ("Se nao possuir leitor de codigo de barras...") ficou
    apagada depois do 13.4.

    Causa direta do 13.4: `.help-block` do Bootstrap e' #737373, escolhido para
    ler sobre BRANCO (4,54:1). Sobre o #c5cad2 que o 13.4 introduziu cai para
    2,66:1.

    Escopado ao mesmo seletor do 13.4 de proposito -- o problema so existe onde
    o fundo cinza entrou. `.help-block` sobre branco segue como estava, e nao
    ha razao para escurecer texto auxiliar em 200+ formularios.

    #4a5262 e' o mesmo tom que o facelift ja usa no btn-success:active (rampa
    neutra nstech, hsl(220,14%,34%)). Sobre #c5cad2 da' 5,00:1.  */
.form-group.bg-warning .help-block {
  color: #4a5262;
}

/*  13.6 Icones text-info -> acompanham o cinza escuro
    ------------------------------------------------------------------
    Sintoma relatado: no detalhe do CIOT, os icones da tabela "Envolvidos"
    ficaram com cor diferente dos das tabelas mais abaixo na MESMA tela.

    Diagnostico (medido no app rodando, 2026-08-27): os icones nao estao com
    cores diferentes por acidente de contexto -- e' a classe.
      Envolvidos:  <i class="fa fa-fw fa-info-circle">          -> 13.1 -> #2e333d
      Pagamentos:  <i class="fa fa-fw fa-mobile text-info">     -> intacto -> #3a87ad
      Informacoes: <i class="fa fa-info-circle text-info">      -> intacto -> #3a87ad
    O 13.1 traz `:not([class*="text-"])` para nao atropelar cor semantica, e
    text-info e' state color do Bootstrap, nao marca -- por isso ficou de fora.
    Resultado: o MESMO icone (fa-info-circle) em duas cores na mesma tela.

    O time pediu todos iguais. Levantamento antes de generalizar: 239 icones
    com text-info em 99 views. Verificado que NAO formam escala em nenhum caso,
    exceto um:
      fa-mobile          23 ocorrencias, sempre text-info      -> decorativo
      fa-bank/key/user/clock-o  20, sempre text-info           -> decorativo
      fa-spinner/fa-spin 24, sempre text-info                  -> carregamento
      fa-info-circle     148 text-info x 6 text-warning        -> telas distintas
      fa-android/fa-apple  -> UNICA escala real (ver 13.6c)

    Escopado ao <i>/<span class="glyphicon"> de proposito: `text-info` tambem
    veste PARAGRAFO e HEADING (<p class="text-info">, <h4 class="text-info">),
    onde o azul e' enfase de texto e continua valendo.  */
i.fa.text-info,
i.glyphicon.text-info,
span.glyphicon.text-info {
  color: #2e333d;
}

/*  13.6b Contextos de fundo ESCURO/COLORIDO e botao -> volta a herdar
    ------------------------------------------------------------------
    Mesmo cuidado do 13.1b, e obrigatorio repetir: a regra 13.6 e' (0,2,1) e
    VENCE varias guardas do 13.1b que sao (0,2,1) tambem -- inclusive
    `.carousel-control i.fa` -- por vir depois. Cada guarda abaixo repete a
    forma `i.fa.text-info` para chegar a (0,3,1) e ganhar por especificidade.

    `.btn` entra porque 19 icones text-info vivem dentro de botao colorido com
    texto branco.  */
.navbar i.fa.text-info,
.navbar i.glyphicon.text-info,
.navbar span.glyphicon.text-info,
.btn i.fa.text-info,
.btn i.glyphicon.text-info,
.btn span.glyphicon.text-info,
.carousel-control i.fa.text-info,
.carousel-control span.glyphicon.text-info,
.avisos-item i.fa.text-info,
.avisos-item span.glyphicon.text-info,
.item-propaganda i.fa.text-info,
.carousel-caption i.fa.text-info,
.list-group-item.active i.fa.text-info,
.panel-primary > .panel-heading i.fa.text-info,
.panel-info > .panel-heading i.fa.text-info,
.panel-danger > .panel-heading i.fa.text-info {
  color: inherit;
}

/* panel-warning tem fundo ambar e texto escuro */
.panel-warning > .panel-heading i.fa.text-info {
  color: #212529;
}

/*  O icone com fundo primary proprio (DetalheHelp.cshtml, dentro do texto do
    tour) precisa de texto branco -- charcoal sobre #ff3d03 daria 3,4:1.  */
i.fa.text-info.bg-primary {
  color: #ffffff;
}

/*  13.6c Escala de status do aplicativo -> PRESERVADA
    ------------------------------------------------------------------
    `statusIconeAndroid` (Admin/Fretes/Detalhe.cshtml:730, Admin/Fretes/
    ValeFrete.cshtml:26, Admin/Cadastros/Index.cshtml:200) escolhe entre
    text-success / text-info / text-warning para dizer se o motorista tem o
    aplicativo instalado e em que estado. Ali text-info NAO e' decoracao: e'
    um dos tres degraus da escala. Se virasse cinza junto com o resto, o
    degrau do meio perderia o significado.

    Vem DEPOIS das guardas de proposito: empata em (0,3,1) com
    `.btn i.fa.text-info` e vence por ordem de fonte, porque esses icones
    ficam justamente dentro do botao de telefone da tabela Envolvidos.

    ATENCAO, divida tecnica conhecida: essa escala tem contraste ruim sobre o
    botao de telefone (text-warning da' 1,86:1 ali). E'
    PRE-EXISTENTE e nao piorou com o facelift -- sobre o verde antigo #73a839
    dava ~1,2:1. Nao mexido aqui porque exige decisao sobre a escala inteira.  */
i.fa.fa-android.text-info,
i.fa.fa-apple.text-info {
  color: #3a87ad;
}

/*  13.6d O 13.3 continua valendo: icone de titulo de pagina segue laranja
    ------------------------------------------------------------------
    O 13.3 e' `h1 > i.text-info` = (0,1,2), e perde para o 13.6 que e' (0,2,1)
    -- classe pesa mais que elemento. Sem esta reafirmacao a "casinha" ao lado
    do numero do CIOT voltaria a ficar cinza.  */
h1 > i.fa.text-info,
h2 > i.fa.text-info,
h3 > i.fa.text-info,
h4 > i.fa.text-info {
  color: #ff3d03;
}

/*  13.7 Seletor CPF/CNPJ: btn-warning ali e' ESTADO, nao acao
    ------------------------------------------------------------------
    Unico ponto do sistema em que `btn-warning` marca selecao em vez de
    intencao. `HtmlHelper.CpfOuCnpjBootstrap` (Helpers/HtmlHelper.cs:1142 e
    :1042) monta um input-group com dois botoes `btn btn-default` e poe
    `btn-warning` no que corresponde ao tipo do documento; `Scripts/LS.js:53-65`
    move a classe de um para o outro quando o usuario troca. Conferido: e' a
    UNICA manipulacao de btn-warning por JS ou por data-bind em todo o repo --
    as outras 154 ocorrencias sao markup estatico.

    Por isso o cinza claro nao serve aqui. Com #c5cad2 o botao selecionado fica
    a 1,3:1 do btn-default do Cerulean (branco/#eee) ao lado: passaria a
    "mesmo material", e o usuario perderia a referencia de em que modo o campo
    esta -- exatamente a armadilha dos dois neutros dessaturados que ja apareceu
    duas vezes neste facelift (faixa de ambiente x menu, btn-success x btn-info).

    O pin usa #657086, o degrau do meio da rampa (o mesmo do btn-success):
    4,98:1 com texto branco, e 4,1:1 contra o btn-default vizinho -- da' para
    ver de longe qual esta selecionado. Nao ha btn-success dentro de um
    input-group de documento, entao nao cria colisao.

    Seletor por atributo de proposito: os ids saem do helper como
    `<nome>_Seletor_CPF` / `_Seletor_CNPJ`, entao isto alcanca as 14+ telas que
    usam o helper SEM tocar em markup, no helper ou no LS.js.

    Especificidade (0,2,1) -- atributo + classe + elemento -- vence tanto
    `.btn-warning` (0,1,0) quanto o bloco de gradiente e `.btn-warning:hover`
    (0,2,0). O `background-image: none` e' obrigatorio: sem ele o gradiente
    cinza do bloco 5 continuaria pintado por cima do #657086.  */
button[id$="_Seletor_CPF"].btn-warning,
button[id$="_Seletor_CNPJ"].btn-warning {
  color: #ffffff;
  background-color: #657086;
  background-image: none;
  border-color: #5c667a;
  border-bottom-color: #4f5869;
}

button[id$="_Seletor_CPF"].btn-warning:hover,
button[id$="_Seletor_CPF"].btn-warning:focus,
button[id$="_Seletor_CPF"].btn-warning:active,
button[id$="_Seletor_CNPJ"].btn-warning:hover,
button[id$="_Seletor_CNPJ"].btn-warning:focus,
button[id$="_Seletor_CNPJ"].btn-warning:active {
  color: #ffffff;
  background-color: #4f5869;
  background-image: none;
  border-color: #4a5262;
}

/* ==========================================================================
   14. FAIXA DE REBRANDING -- "eFrete agora e TNS Pay"
   ==========================================================================

   Comunicado de marca renderizado por Views/Shared/_FaixaRebranding.cshtml,
   logo abaixo do navbar e ACIMA da faixa de ambiente. Hoje so a tela de login
   pede a faixa (ViewBag.ExibirFaixaRebranding).

   Este bloco e' seguro do ponto de vista de ordem: e' o unico do arquivo que
   nao reescreve familia contextual do Bootstrap -- todo seletor aqui e'
   ancorado em #faixa-rebranding, que nao existe em nenhum outro lugar. Nao
   colide com nada, nao depende de vir depois de nada. Ainda assim, mantenha-o
   no FIM do arquivo: os blocos 1 a 13 dependem de ordem entre si.

   COR -- #ffe8e0. E' o laranja da marca em tom-sobre-tom: exatamente
   `rgba(255,61,0,.12)` sobre branco, um dos valores declarados no site
   tnspay.com.br/tns-pay-frete. Chapado em hex, e nao em rgba, porque a faixa
   nem sempre estara sobre branco (uma tela com fundo proprio mudaria o
   resultado do alpha).

   ATENCAO ANTES DE TROCAR ESTA COR -- o laranja #ff3d03 tem luminancia 0,246.
   Para ele destacar num logo (3:1), o fundo precisa ficar ABAIXO de 0,049 ou
   ACIMA de 0,838 de luminancia. Tudo entre esses dois valores deixa o logo
   apagado, seja qual for o matiz. Nao existe meio-termo: ou bem escuro, ou
   bem claro. Medido, com a faixa montada na tela:

       #ffe8e0  tom-sobre-tom 12%   3,02:1   <- o atual
       #fff0eb  tom-sobre-tom  8%   3,22:1   pale demais, le como off-white
       #ffdcd1  tom-sobre-tom 18%   2,77:1   o logo comeca a dissolver
       #ffd0c2  tom-sobre-tom 24%   2,50:1   apagado
       #111827  o escuro do site    4,97:1   exige as variantes NEGATIVAS
       #000032  navy nstech         5,66:1   idem
       #0b2942  petrol              4,19:1   idem
       #657086  slate               1,40:1   testado e reprovado: o laranja
                                             fica marrom, some
       #2e333d  charcoal            3,57:1   e' a cor do navbar, as duas
                                             barras se fundem numa so

   Trocar para um fundo ESCURO nao e' so mudar o hex: exige tambem trocar os
   dois logos pelas variantes negativas e reverter as cores de texto abaixo.

   Fonte: Barlow ja vem do bloco 3 via `body`; nao redeclarada aqui.  */

#faixa-rebranding {
  background-color: #ffe8e0;
  color: #2e333d;   /* 10,78:1 */
}

#faixa-rebranding .fr-interna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px;
  /*  15px alinha com o padding do .container-fluid do navbar logo acima,
      entao os dois logos ficam na mesma vertical.  */
}

#faixa-rebranding .fr-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

/*  Os dois logos sao as variantes oficiais para FUNDO ESCURO. Alturas
    diferentes de proposito: o efrete-negativa.svg inclui o endosso
    "by nstech" embaixo do wordmark, entao precisa de mais altura para o
    wordmark ficar do mesmo tamanho optico do "tns pay".  */
#faixa-rebranding .fr-logo-efrete {
  display: block;
  height: 26px;
  width: auto;
  margin-right: 14px;
}

#faixa-rebranding .fr-logo-tnspay {
  display: block;
  height: 20px;
  width: auto;
  margin: 0 14px;
}

#faixa-rebranding .fr-transicao,
#faixa-rebranding .fr-chamada {
  font-size: 15px;
  line-height: 1.3;
}

#faixa-rebranding .fr-separador {
  display: inline-block;
  width: 1px;
  height: 24px;
  margin-right: 14px;
  background-color: #2e333d;
  opacity: .28;
  flex: 0 0 1px;
}

#faixa-rebranding .fr-saiba-mais,
#faixa-rebranding .fr-saiba-mais:link,
#faixa-rebranding .fr-saiba-mais:visited {
  color: #b62a00;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  white-space: nowrap;
  flex: 0 0 auto;
  /*  #b62a00 e' o tom "active" da rampa primary do facelift (bloco 4), nao uma
      cor nova. Da' 5,42:1 sobre o #ffe8e0 -- passa AA para texto normal, o que
      o #ff3d03 chapado nao faria (2,66:1). O sublinhado fica de qualquer forma:
      carrega a affordance de link sem depender de cor.  */
}

#faixa-rebranding .fr-saiba-mais:hover,
#faixa-rebranding .fr-saiba-mais:focus {
  color: #b62a00;
  text-decoration: none;
  /*  Mesma cor, so cai o sublinhado. Escurecer no hover exigiria um tom fora
      da rampa primary do facelift, e o proximo tom acima (#cf3000) da' 4,39:1
      aqui -- perde o AA por pouco. Nao vale inventar cor por um hover.  */
}

/*  A seta nao existe na Barlow com desenho decente em todos os pesos; herdar
    a stack de sistema evita o fallback feio.  */
#faixa-rebranding .fr-seta {
  font-family: Arial, Helvetica, sans-serif;
}

/*  MOBILE -- abaixo do breakpoint sm do Bootstrap 3 o conteudo empilha em vez
    de espremer. A chamada some no xs: e' a parte prescindivel, e sem ela o
    "agora e' TNS Pay" + o link continuam legiveis em 320px.  */
@media (max-width: 767px) {
  #faixa-rebranding .fr-interna {
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
  }

  #faixa-rebranding .fr-marcas {
    justify-content: center;
  }

  #faixa-rebranding .fr-separador,
  #faixa-rebranding .fr-chamada {
    display: none;
  }

  #faixa-rebranding .fr-saiba-mais {
    width: 100%;
    margin-top: 6px;
  }
}