/*
 * nexkb-theme.css - reveste o Bootstrap 2 com a identidade da NexKB.
 *
 * COMO ISTO FUNCIONA. Este arquivo entra por ULTIMO no <head> do _Layout. E so isso: a
 * especificidade nativa do Bootstrap 2 basta para ser sobrescrita na ordem, sem !important. Onde
 * houver !important aqui, e porque o vendor ou o kbmt-grid.css ja usava um - e nao ha como
 * ganhar de outro jeito. Cada caso desses esta comentado.
 *
 * O QUE ESTE ARQUIVO NAO FAZ. Nao muda markup, nao muda classe de nenhuma view, nao toca em
 * bootstrap.css, bootstrap-responsive.css, Gridmvc.css nem no CSS do DataTables. As 43 views de
 * dado ficam com o HTML que tinham - e por isso o confere-grids.py continua sendo criterio
 * valido depois desta mudanca.
 *
 * Nenhum hexadecimal de marca aqui. Cor vem de nexkb-tokens.css.
 *
 * Ver .specs/features/identidadeVisualNexKB/design.md.
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
    font-family: var(--nexkb-font-body);
    color: var(--nexkb-text);
    background-color: var(--nexkb-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar .brand,
legend {
    font-family: var(--nexkb-font-title);
    color: var(--nexkb-ink);
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

h4, h5, h6 {
    font-weight: 600;
}

a {
    color: var(--nexkb-primary);
}

a:hover,
a:focus {
    color: var(--nexkb-primary-dark);
}

.text-info {
    color: var(--nexkb-muted);
}

/* ==========================================================================
   2. O wordmark
   --------------------------------------------------------------------------
   Reproduz o componente NexKBLogo do portal oficial: "nex" em peso 300 na tinta escura, "KB" em
   peso 700 com o gradiente da marca recortado no texto. E texto, nao imagem - ver design.md.
   ========================================================================== */

.nexkb-logo {
    display: inline-block;
    font-family: var(--nexkb-font-title);
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.nexkb-logo:hover,
.nexkb-logo:focus {
    text-decoration: none;
}

.nexkb-logo__nex {
    font-weight: 300;
    color: var(--nexkb-ink-logo);
}

.nexkb-logo__kb {
    font-weight: 700;
    background-image: var(--nexkb-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* Sem background-clip:text o "KB" sumiria. Cai para azul chapado. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .nexkb-logo__kb {
        -webkit-text-fill-color: var(--nexkb-primary);
                color: var(--nexkb-primary);
        background-image: none;
    }
}

/* Sobre a navbar escura o "nex" inverte; o "KB" mantem o gradiente, que tem contraste de sobra. */
.nexkb-logo--on-dark .nexkb-logo__nex {
    color: var(--nexkb-on-dark);
}

/* ==========================================================================
   3. Navbar
   --------------------------------------------------------------------------
   O Bootstrap 2 pinta a .navbar-inverse com um gradiente #222 -> #111 e ainda emite um
   filter: progid DXImageTransform para o IE antigo. Os dois sao neutralizados: o gradiente por
   uma cor chapada, e o filter por none, senao o IE ignoraria a troca.
   ========================================================================== */

.navbar-inverse .navbar-inner {
    background-color: var(--nexkb-navbar);
    background-image: none;
    border-color: var(--nexkb-navbar);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    filter: none;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
    color: rgba(248, 250, 252, .78);
    text-shadow: none;
}

.navbar-inverse .brand:hover,
.navbar-inverse .brand:focus,
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
    color: var(--nexkb-on-dark);
    background-color: var(--nexkb-navbar-hover);
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
    color: var(--nexkb-on-dark);
    background-color: var(--nexkb-primary);
    box-shadow: none;
}

/* A .brand carregava uma imagem; agora carrega o wordmark. Sem text-shadow, sem cor de vendor.
   O font-size e 24px por MEDIDA, nao por gosto - ver a aritmetica dos 940px logo abaixo. */
.navbar-inverse .brand {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 24px;
    color: var(--nexkb-on-dark);
    text-shadow: none;
}

.navbar-inverse .brand:hover,
.navbar-inverse .brand:focus {
    background-color: transparent;
}

/* A ARITMETICA DOS 940px - leia antes de mexer em qualquer medida desta navbar.
 *
 * O container do Bootstrap 2 tem 940px fixos. Dentro dele, a .brand e a .nav sao os dois
 * float:left, entao SE A SOMA DAS DUAS PASSAR DE 940 o menu nao encolhe: ele DESCE uma linha
 * inteira, e a navbar salta de 71px para 113px. Como o Site.css da ao body so 100px de
 * padding-top, o conteudo da pagina some atras da barra. Foi exatamente isso que aconteceu, e so
 * apareceu na tela logada - o Dashboard ficou com o h2 escondido.
 *
 * Medido em 2026-10-06, no HLG, com os 8 itens de menu de hoje:
 *   sem tema          brand  91 + menu 811 = 902   folga 38
 *   tema inicial      brand 119 + menu 865 = 984   ESTOUROU em 44
 *   tema corrigido    brand 106 + menu 783 = 889   folga 51
 *
 * O que devolveu a folga: a .brand caiu de 26px para 24px, os links do menu voltaram ao peso 400
 * do Bootstrap (o 500 que eu tinha posto engordava o menu em 54px sozinho) e o padding lateral
 * foi de 15px para 10px.
 *
 * REGRA: ao acrescentar item de menu, mexer em fonte ou em padding daqui, meca a soma de novo.
 * A folga de hoje absorve mais ou menos um item curto. */
.navbar .nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: var(--nexkb-radius-sm);
}

.navbar-inverse .dropdown-menu {
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius);
    box-shadow: var(--nexkb-shadow-card);
    padding: 6px;
}

.dropdown-menu > li > a {
    color: var(--nexkb-text);
    border-radius: var(--nexkb-radius-sm);
    padding: 6px 12px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
    color: var(--nexkb-on-dark);
    background-color: var(--nexkb-primary);
    background-image: none;
}

/* O botao sanduiche do responsivo. */
.navbar .btn-navbar {
    background-color: var(--nexkb-navbar-hover);
    background-image: none;
    border-color: transparent;
    box-shadow: none;
    filter: none;
}

/* ==========================================================================
   4. Botoes
   ========================================================================== */

.btn {
    font-family: var(--nexkb-font-body);
    font-weight: 600;
    border-radius: var(--nexkb-radius-lg);
    text-shadow: none;
    background-image: none;
    filter: none;
    transition: background-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    color: var(--nexkb-on-dark);
    background-color: var(--nexkb-primary);
    background-image: none;
    border-color: var(--nexkb-primary);
    box-shadow: var(--nexkb-shadow-btn);
    filter: none;
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--nexkb-on-dark);
    background-color: var(--nexkb-primary-hover);
    border-color: var(--nexkb-primary-hover);
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--nexkb-success);
    background-image: none;
    border-color: var(--nexkb-success);
    filter: none;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--nexkb-danger);
    background-image: none;
    border-color: var(--nexkb-danger);
    filter: none;
}

/* O botao neutro do Bootstrap 2 tambem vinha com gradiente e text-shadow. */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning) {
    color: var(--nexkb-text);
    background-color: var(--nexkb-surface);
    border-color: var(--nexkb-border);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):hover {
    background-color: var(--nexkb-surface-alt);
    border-color: var(--nexkb-border-strong);
}

/* ==========================================================================
   5. Formularios
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
textarea,
select,
.uneditable-input {
    font-family: var(--nexkb-font-body);
    color: var(--nexkb-ink);
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius);
    box-shadow: none;
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--nexkb-primary);
    box-shadow: 0 0 0 3px rgba(29, 79, 215, .14);
    outline: none;
}

fieldset {
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius-xl);
    background-color: var(--nexkb-surface);
}

legend {
    font-size: 15px;
    font-weight: 600;
    color: var(--nexkb-ink);
    border-bottom: none;
}

label {
    color: var(--nexkb-text);
}

/* Estas tres vem do Site.css, que o tema carrega antes - aqui elas so recebem o token. */
.field-validation-error,
.validation-summary-errors {
    color: var(--nexkb-danger);
}

.input-validation-error {
    border-color: var(--nexkb-danger);
    background-color: var(--nexkb-danger-soft);
}

/* ==========================================================================
   6. Tabelas e grids
   --------------------------------------------------------------------------
   A cor do cabecalho vem do kbmt-grid.css, que passou a consumir o token (D27). Aqui ficam so o
   acabamento e a zebra.
   ========================================================================== */

.table {
    font-family: var(--nexkb-font-body);
    color: var(--nexkb-text);
}

.table-bordered {
    border-color: var(--nexkb-border);
    border-radius: var(--nexkb-radius);
}

.table th,
.table td {
    border-top-color: var(--nexkb-border);
}

.table-bordered th,
.table-bordered td {
    border-left-color: var(--nexkb-border);
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: var(--nexkb-surface-alt);
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
    background-color: rgba(29, 79, 215, .06);
}

/* O Site.css define .table-header com o azul antigo; aqui ele acompanha o grid. */
.table-header {
    background-color: var(--nexkb-primary);
    color: var(--nexkb-on-dark);
}

/* O pager do DataTables ja e escrito com !important no kbmt-grid.css; so se ganha dele com o
   mesmo peso. */
.grid-outer .dataTables_paginate .paginate_button {
    color: var(--nexkb-primary) !important;
    border-color: var(--nexkb-border);
    border-radius: 0;
}

.grid-outer .dataTables_paginate .paginate_button:first-child {
    border-radius: var(--nexkb-radius-sm) 0 0 var(--nexkb-radius-sm);
}

.grid-outer .dataTables_paginate .paginate_button:last-child {
    border-radius: 0 var(--nexkb-radius-sm) var(--nexkb-radius-sm) 0;
}

.grid-outer .dataTables_paginate .paginate_button:hover {
    background: var(--nexkb-surface-alt) !important;
    border-color: var(--nexkb-border-strong) !important;
}

.grid-outer .dataTables_paginate .paginate_button.current,
.grid-outer .dataTables_paginate .paginate_button.current:hover {
    background: var(--nexkb-primary) !important;
    border-color: var(--nexkb-primary) !important;
    color: var(--nexkb-on-dark) !important;
}

.grid-outer .dataTables_wrapper .dataTables_info {
    color: var(--nexkb-muted);
}

/* ==========================================================================
   7. Alertas, modal e rodape
   ========================================================================== */

.alert {
    border-radius: var(--nexkb-radius);
    text-shadow: none;
}

.alert-error {
    color: var(--nexkb-danger);
    background-color: var(--nexkb-danger-soft);
    border-color: rgba(182, 29, 29, .22);
}

.modal {
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius-xl);
    box-shadow: var(--nexkb-shadow-card);
}

.modal-header {
    border-bottom-color: var(--nexkb-border);
}

.modal-header h4,
.modal-header h3 {
    font-family: var(--nexkb-font-title);
    color: var(--nexkb-ink);
}

.modal-footer {
    background-color: var(--nexkb-surface-alt);
    border-top-color: var(--nexkb-border);
    border-radius: 0 0 var(--nexkb-radius-xl) var(--nexkb-radius-xl);
    box-shadow: none;
}

.well {
    background-color: var(--nexkb-surface-alt);
    border-color: var(--nexkb-border);
    border-radius: var(--nexkb-radius);
    box-shadow: none;
}

#footer .well {
    color: var(--nexkb-muted);
    font-size: 12px;
}