/* ============================================================================
   TEMA MATERIAL DASHBOARD - Sistema Caspaj
   ----------------------------------------------------------------------------
   Camada de tema carregada DEPOIS do AdminLTE, dos skins e do Bootstrap.
   Nenhum arquivo de biblioteca foi alterado: tudo aqui e sobrescrita, entao
   remover o <link> deste arquivo no _Layout devolve o visual anterior.

   O desenho segue o Material Dashboard: fundo cinza claro, cartoes brancos com
   elevacao, e o elemento caracteristico - o bloco colorido flutuando sobre a
   borda superior do cartao (header do box) ou sobre o canto esquerdo
   (icone do info-box), sempre com sombra na propria cor.

   A cor de destaque continua vindo do skin que o mainController aplica no body
   (skin-blue-light / skin-purple-light / skin-green-light), agora em tom
   Material com gradiente.

   IMPORTANTE - especificidade: os skins do AdminLTE usam seletores como
   ".skin-blue-light .main-header .navbar". Por isso as regras de cabecalho,
   menu e cores de identidade usam o prefixo body[class*="skin-"], que tem
   especificidade maior e vence sem precisar de !important.

   Sumario
     1.  Tokens (cores, gradientes, sombras)
     2.  Base e tipografia
     3.  Menu lateral
     4.  Cabecalho
     5.  Titulo de pagina e breadcrumb
     6.  Cartoes (box) e header colorido flutuante
     7.  Info-box (cartao de indicador)
     8.  Tabelas
     9.  Formularios (estilo underline)
     10. Botoes
     11. Labels, badges e cores auxiliares
     12. Modais
     13. Dropdowns, abas e paginacao
     14. Responsivo - tablet
     15. Responsivo - celular
     16. Tabela em formato de cartao (celular)
     17. Impressao
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
    /* neutros Material */
    --c-fundo: #eeeeee;
    --c-superficie: #ffffff;
    --c-borda: #e6e9ed;
    --c-borda-input: #d2d2d2;
    --c-texto: #3c4858;
    --c-texto-suave: #999999;
    --c-texto-fraco: #aaaaaa;

    /* paleta Material para status */
    --c-sucesso: #4caf50;
    --c-info: #00acc1;
    --c-alerta: #ff9800;
    --c-erro: #f44336;

    /* identidade - sobrescrita por skin logo abaixo */
    --c-primaria: #1565c0;
    --c-grad-1: #1e88e5;
    --c-grad-2: #1565c0;
    --c-primaria-fraca: rgba(21, 101, 192, .08);
    --c-sombra-primaria: rgba(21, 101, 192, .4);

    /* elevacao Material */
    --elev-card: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --elev-flutuante: 0 4px 20px 0 rgba(0, 0, 0, .14);
    --elev-hover: 0 16px 26px -10px rgba(0, 0, 0, .28), 0 4px 25px 0 rgba(0, 0, 0, .12);

    --raio-card: 6px;
    --raio-bloco: 3px;
}

body[class*="skin-blue"] {
    --c-primaria: #1565c0;
    --c-grad-1: #1e88e5;
    --c-grad-2: #1565c0;
    --c-primaria-fraca: rgba(21, 101, 192, .08);
    --c-sombra-primaria: rgba(21, 101, 192, .4);
}

body[class*="skin-purple"] {
    --c-primaria: #8e24aa;
    --c-grad-1: #ab47bc;
    --c-grad-2: #8e24aa;
    --c-primaria-fraca: rgba(142, 36, 170, .08);
    --c-sombra-primaria: rgba(156, 39, 176, .4);
}

body[class*="skin-green"] {
    --c-primaria: #2e7d32;
    --c-grad-1: #43a047;
    --c-grad-2: #2e7d32;
    --c-primaria-fraca: rgba(46, 125, 50, .08);
    --c-sombra-primaria: rgba(76, 175, 80, .4);
}


/* ---------------------------------------------------------------------------
   2. BASE E TIPOGRAFIA
   --------------------------------------------------------------------------- */
body,
body.hold-transition {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-texto);
    background-color: var(--c-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: inherit;
    font-weight: 300;
    color: var(--c-texto);
    line-height: 1.4;
}

a {
    color: var(--c-primaria);
}

a:hover,
a:focus {
    color: var(--c-primaria);
    text-decoration: none;
}

/* o min-height inline vem de $document.height() no mainController e no celular
   gera uma pagina absurdamente alta - a altura passa a ser a da viewport */
.content-wrapper {
    min-height: calc(100vh - 50px) !important;
    background-color: var(--c-fundo);
}

.content {
    padding: 0 15px 30px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c9ced6;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-texto-suave);
}


/* ---------------------------------------------------------------------------
   3. MENU LATERAL
   ----------------------------------------------------------------------------
   Fundo branco sobre uma foto esmaecida, como na referencia. Para trocar a
   foto basta apontar o background-image abaixo para outro arquivo de
   Content/img (a camada branca cobre 93%, entao quase qualquer imagem serve).
   --------------------------------------------------------------------------- */
/* A foto e a camada branca sao dois planos de background no proprio elemento.
   Foi assim de proposito: com pseudo-elementos (:before/:after) o fundo cobria
   apenas a caixa inicial da sidebar, e ao abrir um submenu os itens que
   passavam desse limite ficavam sem fundo, deixando o conteudo aparecer atras.
   background-attachment:fixed ainda faz a foto ficar parada durante a rolagem. */
body[class*="skin-"] .main-sidebar,
body[class*="skin-"] .left-side {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(255, 255, 255, .93), rgba(255, 255, 255, .93)), url('../img/boxed-bg.jpg');
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* sidebar fixa e com rolagem propria: menus longos rolam dentro dela
   em vez de transbordar por cima do conteudo da pagina */
.main-sidebar,
.left-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.main-sidebar > .sidebar {
    position: relative;
    padding-bottom: 24px;
}

body[class*="skin-"] .sidebar-menu > li.header {
    background-color: transparent;
    color: var(--c-texto-suave);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px 20px 8px;
}

body[class*="skin-"] .sidebar-menu > li > a {
    position: relative;
    margin: 4px 14px;
    padding: 11px 14px;
    border-radius: var(--raio-bloco);
    border-left: 0;
    color: var(--c-texto);
    font-size: 13px;
    font-weight: 400;
    transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

body[class*="skin-"] .sidebar-menu > li > a > i {
    width: 26px;
    font-size: 16px;
    color: var(--c-texto);
    opacity: .7;
}

body[class*="skin-"] .sidebar-menu > li:hover > a,
body[class*="skin-"] .sidebar-menu > li.menu-open > a {
    background-color: rgba(200, 200, 200, .2);
    color: var(--c-texto);
    border-left: 0;
}

/* item ativo: pilula com gradiente e sombra na propria cor */
body[class*="skin-"] .sidebar-menu > li.active > a,
body[class*="skin-"] .sidebar-menu > li.active:hover > a {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: transparent;
    color: #fff;
    border-left: 0;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px var(--c-sombra-primaria);
}

body[class*="skin-"] .sidebar-menu > li.active > a > i {
    color: #fff;
    opacity: 1;
}

body[class*="skin-"] .sidebar-menu .treeview-menu {
    background-color: transparent;
    padding-left: 0;
}

/* itens de submenu com texto longo ("Desempenho Assistidos/Oficina") quebram
   em duas linhas em vez de vazar para fora da largura da sidebar */
body[class*="skin-"] .sidebar-menu .treeview-menu > li > a {
    display: block;
    color: var(--c-texto);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    padding: 9px 12px 9px 42px;
    margin: 0 10px;
    border-radius: var(--raio-bloco);
    opacity: .8;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-wrap: break-word;
    position: relative;
}

body[class*="skin-"] .sidebar-menu .treeview-menu > li > a > i {
    position: absolute;
    left: 22px;
    top: 13px;
    font-size: 7px;
    margin-right: 0;
}

body[class*="skin-"] .sidebar-menu .treeview-menu > li > a:hover,
body[class*="skin-"] .sidebar-menu .treeview-menu > li.active > a {
    background-color: rgba(200, 200, 200, .2);
    color: var(--c-texto);
    opacity: 1;
}

.sidebar-menu > li > a > .pull-right-container > .label {
    font-weight: 400;
    padding: 4px 8px;
}

/* ---------------------------------------------------------------------------
   3.1 MENU RECOLHIDO (botao de sanduiche - body.sidebar-collapse)
   ----------------------------------------------------------------------------
   Com a barra recolhida o AdminLTE reduz a sidebar de 230px para 50px, mas o
   recuo lateral dos itens (margin 14px + padding 14px, pensados para a barra
   aberta) continuava valendo: a pilula do item ativo passava da borda e ficava
   cortada, e os icones ficavam deslocados para a direita em vez de centrados.

   O segundo problema era o balao com o nome do item, que o AdminLTE mostra ao
   lado do icone quando se passa o mouse: ele e' posicionado para fora da
   sidebar, e o overflow-x:hidden usado para a sidebar rolar por dentro cortava
   o balao inteiro - com o menu fechado nao dava para saber o que era cada
   icone.

   Vale so' a partir de 768px porque abaixo disso a sidebar nao encolhe, ela
   sai da tela (mesmo media query usado pelo AdminLTE).
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* deixa o balao do item escapar da sidebar */
    .sidebar-mini.sidebar-collapse .main-sidebar,
    .sidebar-mini.sidebar-collapse .left-side,
    .sidebar-mini.sidebar-collapse .main-sidebar > .sidebar {
        overflow: visible;
    }

    /* item centrado nos 50px, sem o recuo lateral que nao cabe */
    body[class*="skin-"].sidebar-collapse .sidebar-menu > li > a {
        margin: 4px 6px;
        padding: 11px 0;
        text-align: center;
    }

    body[class*="skin-"].sidebar-collapse .sidebar-menu > li > a > i {
        width: auto;
        margin: 0;
    }

    /* a setinha de "abre submenu" e' posicionada pelo AdminLTE para fora do
       item e, no menu fechado, aparecia como um retangulo branco solto ao lado
       do balao - o proprio submenu ja' aberto mostra que o item tem filhos */
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span.pull-right-container,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span.pull-right-container {
        display: none !important;
    }

    /* balao com o nome do item: encostado na borda da sidebar (os 6px de recuo
       do item sao descontados do left) e legivel sobre o conteudo da pagina.
       O :not(.pull-right-container) e' necessario porque a regra do AdminLTE que
       transforma o span em balao pega tambem o span da setinha */
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right):not(.pull-right-container) {
        left: 44px;
        margin-left: 0;
        padding: 12px 16px;
        text-align: left;
        background-color: #ffffff;
        color: var(--c-texto);
        border-radius: 0 var(--raio-bloco) var(--raio-bloco) 0;
        box-shadow: var(--elev-flutuante);
    }

    body[class*="skin-"].sidebar-collapse .sidebar-menu > li.active:hover > a > span:not(.pull-right):not(.pull-right-container) {
        background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
        color: #fff;
    }

    /* submenu aberto ao lado do icone: mesma moldura do balao, encostado nele
       (o top de 44px vem do AdminLTE e ja' deixa os dois continuos) */
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        left: 50px;
        padding: 6px 0;
        background-color: #ffffff;
        border-radius: 0 0 var(--raio-bloco) var(--raio-bloco);
        box-shadow: var(--elev-flutuante);
    }

    /* no submenu do balao o texto volta a ficar alinhado a esquerda e sem o
       recuo grande, que so' faz sentido com a sidebar aberta */
    body[class*="skin-"].sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a {
        text-align: left;
        padding: 9px 14px 9px 28px;
        margin: 0 6px;
    }

    body[class*="skin-"].sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a > i {
        left: 12px;
    }

    /* o cabecalho da marca tambem encolhe para 50px: o icone fica centrado */
    body[class*="skin-"].sidebar-collapse .main-header .logo {
        padding: 0;
        text-align: center;
    }
}


/* ---------------------------------------------------------------------------
   4. CABECALHO
   ----------------------------------------------------------------------------
   No Material Dashboard a barra superior e transparente sobre o fundo cinza.
   A marca fica no topo do menu, entao o .logo do AdminLTE vira o bloco da
   marca: branco, texto escuro e um filete inferior.
   --------------------------------------------------------------------------- */
body[class*="skin-"] .main-header .navbar {
    background-color: transparent;
    box-shadow: none;
    border: 0;
    min-height: 50px;
}

.main-header {
    box-shadow: none;
    border: 0;
}

body[class*="skin-"] .main-header .logo {
    background-color: #ffffff;
    color: var(--c-texto);
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    border-right: 0;
}

body[class*="skin-"] .main-header .logo b {
    font-weight: 500;
}

body[class*="skin-"] .main-header .logo:hover {
    background-color: #ffffff;
    color: var(--c-primaria);
}

body[class*="skin-"] .main-header .navbar .sidebar-toggle,
body[class*="skin-"] .main-header .navbar .nav > li > a {
    color: var(--c-texto);
    font-weight: 400;
}

body[class*="skin-"] .main-header .navbar .sidebar-toggle:hover,
body[class*="skin-"] .main-header .navbar .nav > li > a:hover,
body[class*="skin-"] .main-header .navbar .nav > .open > a,
body[class*="skin-"] .main-header .navbar .nav > .open > a:hover,
body[class*="skin-"] .main-header .navbar .nav > .open > a:focus {
    background-color: rgba(0, 0, 0, .05);
    color: var(--c-texto);
}

.main-header .navbar .nav > li > a > i {
    margin-right: 6px;
    font-size: 17px;
}

/* menu do usuario */
.navbar-custom-menu .user-menu .dropdown-menu {
    border: 0;
    border-radius: var(--raio-card);
    box-shadow: var(--elev-flutuante), 0 4px 25px 0 rgba(0, 0, 0, .12);
    padding: 0;
    overflow: hidden;
}

.navbar-custom-menu .user-menu .dropdown-menu > .user-header {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: transparent;
    padding: 20px 16px;
    height: auto;
}

.navbar-custom-menu .user-menu .dropdown-menu > .user-header p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
}

.navbar-custom-menu .user-menu .dropdown-menu > .user-footer {
    background-color: #fafafa;
    border-top: 0;
}

.img-style {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    box-shadow: var(--elev-card);
}


/* ---------------------------------------------------------------------------
   5. TITULO DE PAGINA E BREADCRUMB
   --------------------------------------------------------------------------- */
.content-header {
    padding: 15px 15px 0;
    position: relative;
}

.content-header > h1 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    color: var(--c-texto);
}

.content-header > h1 > small {
    font-size: 14px;
    font-weight: 300;
    color: var(--c-texto-suave);
}

.content-header > .breadcrumb {
    background: transparent;
    padding: 0;
    margin-top: 4px;
    font-size: 12px;
    top: 20px;
    right: 15px;
}

.content-header > .breadcrumb > li > a {
    color: var(--c-texto-suave);
}

.content-header > .breadcrumb > .active {
    color: var(--c-texto-fraco);
}

/* botao de combo usado nos filtros do dashboard */
.combo-btn {
    background-color: #ffffff;
    border: 0;
    border-radius: var(--raio-bloco);
    color: var(--c-texto);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 14px;
    box-shadow: var(--elev-card);
}

.combo-btn:hover,
.combo-btn:focus {
    background-color: #ffffff;
    color: var(--c-primaria);
    box-shadow: var(--elev-hover);
}

.combo-btn i {
    margin-left: 5px;
    font-size: 11px;
    opacity: .6;
}

.margin-top--7 {
    margin-top: 0;
    margin-left: 10px;
    vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   6. CARTOES (BOX) E HEADER COLORIDO FLUTUANTE
   ----------------------------------------------------------------------------
   Este e o elemento assinatura do Material Dashboard: o cabecalho do cartao
   sai para fora da borda superior (margin negativa) com gradiente, cantos
   arredondados e sombra na propria cor.
   --------------------------------------------------------------------------- */
.box {
    background-color: var(--c-superficie);
    border: 0;
    border-top: 0;
    border-radius: var(--raio-card);
    box-shadow: var(--elev-card);
    margin: 30px 0;
    overflow: visible;
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
    border-top: 0;
}

.box > .box-header {
    position: relative;
    margin: -20px 15px 0;
    padding: 15px;
    border: 0;
    border-radius: var(--raio-bloco);
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    color: #ffffff;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px var(--c-sombra-primaria);
}

.box > .box-header.with-border {
    border-bottom: 0;
}

.box > .box-header .box-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.4;
}

.box > .box-header > .fa,
.box > .box-header > .glyphicon,
.box > .box-header > .ion {
    color: rgba(255, 255, 255, .85);
    margin-right: 8px;
    font-size: 15px;
}

.box-body {
    padding: 20px 15px 15px;
}

.box-footer {
    background-color: transparent;
    border-top: 1px solid var(--c-borda);
    padding: 12px 15px;
    font-size: 13px;
    color: var(--c-texto-suave);
    border-radius: 0 0 var(--raio-card) var(--raio-card);
}

.box-footer b {
    color: var(--c-texto);
    font-weight: 500;
}

/* ferramentas do cartao ficam sobre o bloco colorido */
.box-tools {
    top: 12px;
    right: 12px;
}

.box-tools .btn-box-tool {
    color: rgba(255, 255, 255, .85);
    background: transparent;
    box-shadow: none;
    padding: 5px 8px;
    font-size: 14px;
    border-radius: var(--raio-bloco);
    text-transform: none;
    letter-spacing: 0;
}

.box-tools .btn-box-tool:hover,
.box-tools .btn-box-tool:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .18);
    box-shadow: none;
}

/* o combo de filtro dentro do header colorido fica translucido */
.box-header .combo-btn {
    background-color: rgba(255, 255, 255, .18);
    color: #ffffff;
    box-shadow: none;
}

.box-header .combo-btn:hover,
.box-header .combo-btn:focus {
    background-color: rgba(255, 255, 255, .3);
    color: #ffffff;
    box-shadow: none;
}

/* botoes de acao dentro do header colorido (ex.: "Novo") */
.box-header .btn-primary,
.box-header .btn-novo {
    background-image: none;
    background-color: rgba(255, 255, 255, .2);
    color: #ffffff;
    box-shadow: none;
}

.box-header .btn-primary:hover,
.box-header .btn-novo:hover {
    background-image: none;
    background-color: rgba(255, 255, 255, .32);
    color: #ffffff;
    box-shadow: none;
}


/* ---------------------------------------------------------------------------
   7. INFO-BOX (CARTAO DE INDICADOR)
   ----------------------------------------------------------------------------
   Icone colorido flutuando sobre o canto superior esquerdo, rotulo e numeros
   alinhados a direita - o cartao de estatistica da referencia.
   --------------------------------------------------------------------------- */
.info-box {
    display: block;
    background-color: var(--c-superficie);
    border: 0;
    border-radius: var(--raio-card);
    box-shadow: var(--elev-card);
    margin: 30px 0;
    padding: 0 18px 6px;
    min-height: 0;
    overflow: visible;
}

.info-box-icon {
    float: left;
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: -20px 0 0;
    border-radius: var(--raio-bloco);
    font-size: 28px;
    text-align: center;
    color: #ffffff;
    background: #90a4ae;
}

.info-box-content {
    display: block;
    margin-left: 82px;
    padding: 12px 0 14px;
    text-align: right;
    min-height: 62px;
}

.info-box-text {
    display: block;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-texto-suave);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* numero principal do cartao */
.info-box-number {
    display: block;
    font-size: 26px;
    font-weight: 300;
    color: var(--c-texto);
    line-height: 1.25;
}

.info-box-number small,
.info-box-number .spanText {
    display: inline;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-texto-suave);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 5px;
}

/* indicadores secundarios: um por linha, rotulo a esquerda e valor a direita.
   Substitui o arranjo anterior em duas colunas flutuantes, onde quatro numeros
   disputavam a mesma faixa e os nomes de trabalho ficavam cortados. */
.info-box-lista {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 12px 0 6px;
    border-top: 1px solid var(--c-borda);
}

.info-box-lista > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.45;
}

.info-box-lista > li + li {
    border-top: 1px solid #f4f6f8;
}

.info-box-lista > li > span {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--c-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box-lista > li > b {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-texto);
}

.info-box-content .width-50p {
    width: 50%;
}

.ellipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* limpa o float dos numeros para o cartao nao colapsar */
.info-box:after,
.info-box-content:after {
    content: "";
    display: table;
    clear: both;
}

/* gradientes e sombras coloridas dos icones */
.info-box-icon.bg-red {
    background-image: linear-gradient(60deg, #ef5350, #e53935) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(244, 67, 54, .4);
}

.info-box-icon.bg-green {
    background-image: linear-gradient(60deg, #66bb6a, #43a047) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(76, 175, 80, .4);
}

.info-box-icon.bg-yellow {
    background-image: linear-gradient(60deg, #ffa726, #fb8c00) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(255, 152, 0, .4);
}

.info-box-icon.bg-azul,
.info-box-icon.bg-aqua,
.info-box-icon.bg-light-blue,
.info-box-icon.bg-blue {
    background-image: linear-gradient(60deg, #26c6da, #00acc1) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(0, 172, 193, .4);
}

.info-box-icon.bg-purple {
    background-image: linear-gradient(60deg, #ab47bc, #8e24aa) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(156, 39, 176, .4);
}

.info-box-icon.bg-gray {
    background-image: linear-gradient(60deg, #bdbdbd, #9e9e9e) !important;
    box-shadow: var(--elev-flutuante), 0 7px 10px -5px rgba(158, 158, 158, .4);
}

.small-box {
    border-radius: var(--raio-card);
    box-shadow: var(--elev-card);
}


/* ---------------------------------------------------------------------------
   8. TABELAS
   --------------------------------------------------------------------------- */
.table {
    margin-bottom: 0;
    color: var(--c-texto);
}

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: transparent;
    border-bottom: 1px solid var(--c-borda);
    border-top: 0;
    color: var(--c-primaria);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-top: 1px solid #f2f4f6;
    padding: 12px 8px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
}

.table > tbody > tr:first-child > td {
    border-top: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
    background-color: #fafbfc;
}

.table-condensed > tbody > tr > td,
.table-condensed > thead > tr > th {
    padding: 9px 8px;
}

.table-responsive {
    border: 0;
    -webkit-overflow-scrolling: touch;
}

/* cabecalho fixo quando a tabela rola dentro de um cartao */
.table-responsive[style*="max-height"] > .table > thead > tr > th,
.table-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #ffffff;
}

/* cabecalhos ordenaveis */
.table th[ng-click] {
    cursor: pointer;
    user-select: none;
}

.table th[ng-click]:hover {
    opacity: .75;
}

.table th[ng-click] .fa-sort {
    opacity: .4;
    margin-left: 4px;
    font-size: 10px;
}

/* paginacao e contador das telas de pesquisa */
.dataTables_info {
    font-size: 13px;
    color: var(--c-texto-suave);
    padding-top: 22px;
}


/* ---------------------------------------------------------------------------
   9. FORMULARIOS (ESTILO UNDERLINE)
   --------------------------------------------------------------------------- */
.form-control {
    height: 36px;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--c-borda-input);
    border-radius: 0;
    box-shadow: none;
    color: var(--c-texto);
    font-size: 14px;
    font-weight: 400;
    padding: 7px 0;
    transition: border-color .25s ease;
}

.form-control:focus {
    border-bottom: 2px solid var(--c-primaria);
    box-shadow: none;
    outline: 0;
    background-color: transparent;
    padding-bottom: 6px;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: transparent;
    border-bottom-style: dashed;
    color: var(--c-texto-suave);
}

.form-control::-webkit-input-placeholder { color: #bbb; font-weight: 300; }
.form-control::-moz-placeholder { color: #bbb; font-weight: 300; }
.form-control:-ms-input-placeholder { color: #bbb; font-weight: 300; }

.input-sm,
.form-control.input-sm {
    height: 32px;
    font-size: 13px;
    padding: 5px 0;
}

textarea.form-control {
    height: auto;
    min-height: 80px;
    padding: 7px 0;
}

label,
.control-label,
.lbl-input,
#lbl-input {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-texto-suave);
    margin-bottom: 2px;
}

.form-group {
    margin-bottom: 16px;
}

/* grupos com addon voltam a ter caixa, senao o addon fica solto */
.input-group .form-control {
    border: 1px solid var(--c-borda-input);
    border-radius: var(--raio-bloco);
    padding: 6px 12px;
}

.input-group-addon {
    background-color: #fafafa;
    border: 1px solid var(--c-borda-input);
    color: var(--c-texto-suave);
    border-radius: var(--raio-bloco);
}

.has-error .form-control {
    border-bottom-color: var(--c-erro);
}

.help-block {
    font-size: 12px;
    color: var(--c-texto-suave);
}

/* checkbox e radio */
.checkbox label,
.radio label {
    font-size: 14px;
    color: var(--c-texto);
}


/* ---------------------------------------------------------------------------
   10. BOTOES
   --------------------------------------------------------------------------- */
.btn {
    border: 0;
    border-radius: var(--raio-bloco);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 11px 24px;
    box-shadow: var(--elev-card);
    transition: box-shadow .25s ease, background-color .25s ease;
    will-change: box-shadow;
}

.btn:hover,
.btn:focus {
    outline: 0;
    box-shadow: var(--elev-hover);
}

.btn:active,
.btn.active {
    box-shadow: var(--elev-card);
}

.btn-sm,
.btn-xs {
    padding: 8px 16px;
    font-size: 11px;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 14px;
}

.btn-default {
    background-color: #9e9e9e;
    color: #ffffff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: #8c8c8c;
    color: #ffffff;
}

.btn-primary {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: var(--c-primaria);
    color: #ffffff;
    box-shadow: var(--elev-card), 0 4px 8px -4px var(--c-sombra-primaria);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: var(--c-primaria);
    color: #ffffff;
    box-shadow: var(--elev-hover);
}

.btn-success {
    background-image: linear-gradient(60deg, #66bb6a, #43a047);
    background-color: var(--c-sucesso);
    color: #fff;
}

.btn-info {
    background-image: linear-gradient(60deg, #26c6da, #00acc1);
    background-color: var(--c-info);
    color: #fff;
}

.btn-warning {
    background-image: linear-gradient(60deg, #ffa726, #fb8c00);
    background-color: var(--c-alerta);
    color: #fff;
}

.btn-danger {
    background-image: linear-gradient(60deg, #ef5350, #e53935);
    background-color: var(--c-erro);
    color: #fff;
}

/* botoes planos nao ganham elevacao */
.btn-flat,
.btn-link,
.btn-box-tool {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.btn-flat:hover,
.btn-link:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: none;
}

.btn-link {
    color: var(--c-primaria);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}

.user-footer .btn-default {
    background-color: transparent;
    color: var(--c-texto);
    box-shadow: none;
}

.user-footer .btn-default:hover {
    background-color: rgba(0, 0, 0, .05);
    color: var(--c-primaria);
    box-shadow: none;
}

/* icones de acao dentro das tabelas ficam discretos */
.table a > .fa,
.table a > .glyphicon {
    color: var(--c-texto-suave);
    font-size: 15px;
    transition: color .2s ease;
}

.table a:hover > .fa,
.table a:hover > .glyphicon {
    color: var(--c-primaria);
}


/* ---------------------------------------------------------------------------
   11. LABELS, BADGES E CORES AUXILIARES
   --------------------------------------------------------------------------- */
.label {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 5px 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

.badge {
    border-radius: 10px;
    font-weight: 500;
    font-size: 11px;
    padding: 4px 9px;
}

.label-success, .bg-green, .label.bg-green { background-color: var(--c-sucesso) !important; color: #fff !important; }
.label-danger, .bg-red, .label.bg-red { background-color: var(--c-erro) !important; color: #fff !important; }
.label-warning, .bg-yellow, .label.bg-yellow { background-color: var(--c-alerta) !important; color: #fff !important; }
.label-info, .bg-azul, .label.bg-azul { background-color: var(--c-info) !important; color: #fff !important; }
.bg-aqua, .label.bg-aqua { background-color: #26c6da !important; color: #fff !important; }
.label-primary, .bg-gray, .label.bg-gray { background-color: #9e9e9e !important; color: #fff !important; }

.text-green { color: var(--c-sucesso) !important; }
.text-red { color: var(--c-erro) !important; }
.text-yellow { color: var(--c-alerta) !important; }
.text-muted { color: var(--c-texto-suave) !important; }


/* ---------------------------------------------------------------------------
   12. MODAIS
   --------------------------------------------------------------------------- */
/* --- largura dos modais ------------------------------------------------------
   Os modais de cadastro sao abertos pelo $modal com size 'sm', 'lg' ou sem
   size, o que no Bootstrap 3 resulta em 300px, 900px e 600px. Formularios
   longos (usuario, assistido, crianca) ficavam espremidos, entao cada faixa
   foi ampliada aqui - assim vale para todos os modais de uma vez, sem depender
   do size passado em cada controller.
   ---------------------------------------------------------------------------*/
@media (min-width: 768px) {
    .modal-dialog {
        width: 760px;
        margin: 24px auto;
    }

    .modal-dialog.modal-sm {
        width: 560px;
    }

    .modal-dialog.modal-lg {
        width: 92%;
        max-width: 1140px;
    }
}

@media (min-width: 1600px) {
    .modal-dialog.modal-lg {
        max-width: 1360px;
    }
}

/* o conteudo rola dentro do modal, mantendo titulo e botoes sempre visiveis.
   styles.css define overflow:hidden no .modal-body - aqui so o eixo Y muda */
@media (min-height: 500px) {
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.modal-content {
    border: 0;
    border-radius: var(--raio-card);
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, .2), 0 40px 77px 0 rgba(0, 0, 0, .22);
}

.modal-header {
    position: relative;
    background-color: transparent;
    border-bottom: 1px solid var(--c-borda);
    padding: 20px 64px 16px 24px;
}

.modal-header .modal-title,
.modal-header h4 {
    font-size: 19px;
    font-weight: 400;
    color: var(--c-texto);
    margin: 0;
}

/* fechar: botao circular de verdade, nao um "x" apagado no canto */
.modal-header .close,
.modal-content > .close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: #eef0f3;
    color: var(--c-texto);
    opacity: 1;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;
    text-shadow: none;
    box-shadow: none;
    z-index: 5;
    transition: background-color .2s ease, color .2s ease;
}

.modal-header .close:hover,
.modal-header .close:focus,
.modal-content > .close:hover {
    background-color: var(--c-erro);
    color: #ffffff;
    opacity: 1;
    outline: 0;
}

.modal-body {
    padding: 20px 24px;
    font-size: 14px;
    color: var(--c-texto);
}

.modal-footer {
    background-color: transparent;
    border-top: 1px solid var(--c-borda);
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* o que estiver marcado como lado esquerdo (ex.: "continuar cadastrando")
   fica colado na esquerda e os botoes de acao na direita */
.modal-footer > .criar-outro,
.modal-footer > .rodape-esquerda {
    float: none !important;
    width: auto;
    margin: 0 auto 0 0;
    padding: 0;
}

.modal-footer .btn {
    margin: 0;
}

/* --- estrutura padrao dos modais de cadastro --------------------------------
   Secao = titulo discreto + linha divisoria, no lugar dos cartoes aninhados.
   Cartao dentro de modal fica pesado: vira caixa dentro de caixa e o header
   colorido do tema compete com o titulo do proprio modal.
   ---------------------------------------------------------------------------*/
.form-secao {
    margin-bottom: 26px;
}

.form-secao:last-child {
    margin-bottom: 0;
}

.form-secao-titulo {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-primaria);
}

.form-secao-titulo > span {
    flex: 0 0 auto;
    padding-right: 12px;
}

.form-secao-titulo:after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--c-borda);
}

/* grupos "Com cesta" / "Sem cesta" da tela de avaliacao de frequencia do
   assistido */
.grupo-frequencia + .grupo-frequencia {
    margin-top: 28px;
}

.form-secao-titulo small {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-texto-suave);
}

.modal-body .item-form {
    margin-bottom: 18px;
}

.modal-body .item-form .help-block {
    margin: 4px 0 0;
    color: var(--c-erro);
}

/* foto do cadastro: redonda e compacta, ao lado dos campos de identificacao */
.form-foto {
    text-align: center;
    padding-top: 4px;
}

.form-foto img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eef0f3;
    box-shadow: var(--elev-card);
}

.form-foto .btn {
    margin-top: 12px;
}

/* usado quando o cadastro nao tem foto: um circulo com icone, em vez de pedir
   uma imagem que nao existe e acabar com o icone de imagem quebrada */
.foto-vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #eef0f3;
    color: #b6bdc6;
    font-size: 46px;
    box-shadow: var(--elev-card);
}

.card-pessoa-foto.foto-vazia {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    font-size: 24px;
    box-shadow: none;
}

.foto-miniatura-vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eef0f3;
    color: #b6bdc6;
    font-size: 20px;
}

/* cartoes aninhados dentro de modais (nas telas ainda nao reestruturadas)
   perdem a moldura e o header colorido, virando apenas uma secao */
.modal-body .box {
    background-color: transparent;
    box-shadow: none;
    border: 0;
    margin: 0 0 24px;
    overflow: visible;
}

.modal-body .box > .box-header {
    margin: 0 0 14px;
    padding: 0 0 8px;
    background-image: none;
    background-color: transparent;
    border-bottom: 1px solid var(--c-borda);
    box-shadow: none;
    color: var(--c-primaria);
}

.modal-body .box > .box-header .box-title {
    color: var(--c-primaria);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.modal-body .box > .box-header .box-title i {
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-texto-suave);
    font-weight: 400;
}

.modal-body .box > .box-body {
    padding: 0;
}

/* subtitulo dentro de uma secao (ex.: Titular / Conjuge / Filho adulto) */
.form-subsecao {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-texto);
}

/* linha de auditoria no topo do modal */
.modal-auditoria {
    margin: -4px 0 20px;
    padding: 10px 14px;
    background-color: #f7f9fb;
    border-radius: var(--raio-bloco);
    font-size: 12px;
    color: var(--c-texto-suave);
}

.modal-auditoria span {
    display: inline-block;
    margin-right: 20px;
}

.modal-auditoria b {
    color: var(--c-texto);
    font-weight: 500;
}

/* asterisco de campo obrigatorio */
.ico-obrigatorio {
    position: static;
    color: var(--c-erro);
    font-size: 13px;
    margin-left: 2px;
}

/* total destacado no fim de uma secao (renda familiar) */
.form-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
    padding: 12px 16px;
    background-color: var(--c-primaria-fraca);
    border-radius: var(--raio-bloco);
}

.form-total-rotulo {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-texto-suave);
}

.form-total-valor {
    font-size: 20px;
    font-weight: 500;
    color: var(--c-primaria);
}

/* bloco de inclusao de item em lista (ex.: adicionar crianca) */
.bloco-inclusao {
    padding: 16px;
    background-color: #f9fafb;
    border: 1px dashed var(--c-borda-input);
    border-radius: var(--raio-bloco);
}

.bloco-inclusao-acao {
    text-align: right;
    padding-top: 4px;
}

/* texto do termo com rolagem propria */
.caixa-termo {
    max-height: 420px;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--c-borda);
    border-radius: var(--raio-bloco);
    background-color: #fcfcfd;
    font-size: 13px;
    line-height: 1.6;
}

/* arvore de permissoes de menu (cadastro de perfil) */
.lista-permissao,
.lista-permissao ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-permissao > li {
    padding: 8px 0;
    border-bottom: 1px solid var(--c-borda);
}

.lista-permissao > li:last-child {
    border-bottom: 0;
}

.lista-permissao label {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-texto);
    cursor: pointer;
}

.lista-permissao > li > label {
    font-weight: 500;
}

.lista-permissao label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

.lista-permissao label i {
    width: 20px;
    color: var(--c-texto-suave);
}

.lista-permissao ul {
    margin: 6px 0 0 30px;
}

.lista-permissao ul > li {
    padding: 4px 0;
}

.lista-permissao ul label {
    font-size: 13px;
    color: var(--c-texto-suave);
}

/* aviso de lista vazia */
.sem-registro {
    margin: 16px 0;
    padding: 20px;
    text-align: center;
    color: var(--c-texto-suave);
    background-color: #f9fafb;
    border-radius: var(--raio-bloco);
}

/* --- resumo em destaque no topo de um modal operacional ---------------------*/
.modal-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.modal-resumo .resumo-item {
    flex: 1 1 140px;
    padding: 12px 14px;
    background-color: #f7f9fb;
    border-radius: var(--raio-bloco);
    text-align: center;
}

.resumo-rotulo {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-texto-suave);
    margin-bottom: 6px;
}

.resumo-valor {
    display: block;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--c-texto);
}

.resumo-valor-texto {
    font-size: 17px;
    font-weight: 400;
    padding-top: 5px;
}

.texto-sucesso { color: var(--c-sucesso); }
.texto-erro { color: var(--c-erro); }
.texto-alerta { color: var(--c-alerta); }
.texto-info { color: var(--c-info); }

/* --- cartao de pessoa (presenca e entrega de cesta) -------------------------*/
.card-pessoa {
    background-color: var(--c-superficie);
    border: 1px solid var(--c-borda);
    border-radius: var(--raio-card);
    margin-bottom: 16px;
    overflow: hidden;
}

.card-pessoa-topo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid var(--c-borda);
}

.card-pessoa-foto {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eef0f3;
}

.card-pessoa-info {
    flex: 1 1 auto;
    min-width: 0;
}

.card-pessoa-nome {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-texto);
    line-height: 1.3;
}

.card-pessoa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-pessoa-tags .label {
    font-size: 10px;
    padding: 4px 8px;
}

.card-pessoa-media {
    flex: 0 0 auto;
    text-align: right;
    font-size: 20px;
    font-weight: 500;
}

.card-pessoa-media a {
    display: inline-block;
    margin-left: 4px;
    color: var(--c-texto-suave);
    font-size: 16px;
}

.card-pessoa-detalhe {
    padding: 0 14px;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--c-borda);
}

.card-pessoa-detalhe .table > tbody > tr > td,
.card-pessoa-detalhe .table > tbody > tr > th {
    font-size: 12px;
    padding: 6px 8px;
}

.card-pessoa-corpo {
    padding: 14px;
}

.card-pessoa-corpo textarea {
    margin-bottom: 12px;
}

.card-pessoa-justificar {
    margin-bottom: 12px;
    font-size: 13px;
}

.card-pessoa-acao,
.card-pessoa-cesta {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.card-pessoa-cesta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-borda);
}

.card-pessoa-acao .acao-campo,
.card-pessoa-cesta .acao-campo {
    flex: 1 1 140px;
}

.acao-entrada {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acao-entrada i {
    color: var(--c-texto-suave);
}

.card-pessoa-rodape {
    padding: 8px 14px;
    background-color: #fafbfc;
    border-top: 1px solid var(--c-borda);
    font-size: 11px;
    color: var(--c-texto-suave);
}

/* textarea continua sendo uma caixa: o estilo underline nao funciona bem
   em varias linhas */
textarea.form-control,
textarea.solicitacoes-especiais {
    border: 1px solid var(--c-borda-input);
    border-radius: var(--raio-bloco);
    padding: 10px 12px;
    background-color: transparent;
}

textarea.form-control:focus,
textarea.solicitacoes-especiais:focus {
    border: 2px solid var(--c-primaria);
    padding: 9px 11px;
    box-shadow: none;
}

.modal-backdrop.in {
    opacity: .5;
}

.dialog-header-confirm {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    border: none;
    margin-top: 0;
    color: #fff;
}

/* abas dentro dos modais (styles.css) */
.modal-body .div-nav-menu-justified .nav-justified li a:hover,
.modal-body .div-nav-menu-justified .nav-justified li a.active {
    border-bottom: 3px solid var(--c-primaria);
    color: var(--c-primaria);
    font-weight: 500;
}


/* ---------------------------------------------------------------------------
   13. DROPDOWNS, ABAS E PAGINACAO
   --------------------------------------------------------------------------- */
.dropdown-menu {
    border: 0;
    border-radius: var(--raio-card);
    box-shadow: var(--elev-flutuante), 0 4px 25px 0 rgba(0, 0, 0, .12);
    padding: 6px 0;
    font-size: 14px;
}

.dropdown-menu > li > a {
    padding: 10px 20px;
    color: var(--c-texto);
    font-weight: 400;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 10px -4px var(--c-sombra-primaria);
}

.nav-tabs {
    border-bottom: 1px solid var(--c-borda);
}

.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--c-texto-suave);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-right: 6px;
}

.nav-tabs > li > a:hover {
    background-color: transparent;
    border-bottom-color: var(--c-borda);
    color: var(--c-texto);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 2px solid var(--c-primaria);
    color: var(--c-primaria);
    background-color: transparent;
}

.pagination > li > a,
.pagination > li > span {
    border: 0;
    border-radius: 50% !important;
    color: var(--c-texto-suave);
    padding: 0;
    margin: 0 3px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-weight: 400;
}

.pagination > li > a:hover {
    background-color: rgba(0, 0, 0, .06);
    color: var(--c-texto);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
    background-color: var(--c-primaria);
    border: 0;
    color: #ffffff;
    box-shadow: 0 4px 10px -4px var(--c-sombra-primaria);
}

.alert {
    border: 0;
    border-radius: var(--raio-bloco);
    font-size: 14px;
    box-shadow: var(--elev-card);
    color: #fff;
}

.alert-success { background-color: var(--c-sucesso); }
.alert-danger { background-color: var(--c-erro); }
.alert-warning { background-color: var(--c-alerta); }
.alert-info { background-color: var(--c-info); }

.progress {
    border-radius: 10px;
    box-shadow: none;
    background-color: #e8eaed;
}


/* ---------------------------------------------------------------------------
   14. RESPONSIVO - TABLET (ate 991px)
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .content {
        padding: 0 10px 24px;
    }

    .content-header {
        padding: 14px 10px 0;
    }

    .content-header > h1 {
        font-size: 19px;
    }

    /* o breadcrumb absoluto atrapalha em tela media */
    .content-header > .breadcrumb {
        position: static;
        margin-top: 8px;
        padding: 0;
    }

    .box-body {
        padding: 18px 12px 12px;
    }
}


/* ---------------------------------------------------------------------------
   15. RESPONSIVO - CELULAR (ate 767px)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* no celular o AdminLTE empurra a pagina inteira ao abrir o menu;
       o fundo branco do menu precisa cobrir a foto do mesmo jeito */
    .main-sidebar:before,
    .main-sidebar:after {
        z-index: 1;
    }

    body[class*="skin-"] .main-header .navbar {
        background-color: #ffffff;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    }

    body[class*="skin-"] .main-header .logo {
        background-color: #ffffff;
        border-bottom: 0;
    }

    .content {
        padding: 0 8px 24px;
    }

    .content-header {
        padding: 12px 10px 0;
    }

    .content-header > h1 {
        font-size: 18px;
        line-height: 1.3;
    }

    /* o filtro de ano/trabalho quebra para a linha de baixo em vez de espremer */
    .content-header > h1 > div,
    .content-header > h1 > div > div {
        display: block;
    }

    .content-header > h1 .btn-group {
        display: inline-block;
        margin: 10px 8px 0 0;
    }

    .margin-top--7 {
        margin-left: 0;
    }

    .navbar-custom-menu .user-menu .dropdown-menu {
        width: 100%;
        max-width: 280px;
    }

    /* cartoes */
    .box {
        margin: 26px 0 20px;
    }

    .box > .box-header {
        margin: -18px 12px 0;
        padding: 14px;
    }

    .box > .box-header .box-title {
        font-size: 16px;
        display: block;
        max-width: 100%;
        white-space: normal;
    }

    /* ferramentas passam para baixo do titulo, sem sobrepor */
    .box > .box-header > .box-tools {
        position: static;
        display: block;
        margin-top: 10px;
        text-align: right;
    }

    .box-body {
        padding: 16px 12px 12px;
    }

    .box-footer {
        padding: 12px;
        font-size: 12px;
    }

    /* info-box */
    .info-box {
        margin: 26px 0 16px;
        padding: 0 14px 6px;
    }

    .info-box-icon {
        width: 56px;
        height: 56px;
        line-height: 56px;
        font-size: 23px;
    }

    .info-box-content {
        margin-left: 70px;
        min-height: 54px;
        padding: 10px 0 12px;
    }

    .info-box-number {
        font-size: 22px;
    }

    .info-box-lista > li {
        font-size: 12px;
        padding: 7px 0;
    }

    .info-box-content .width-50p {
        width: 100%;
        float: none !important;
        text-align: right;
    }

    /* formularios: 16px evita o zoom automatico do iOS ao focar o campo */
    .form-control,
    .form-control.input-sm,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
        height: 42px;
    }

    textarea.form-control {
        height: auto;
    }

    /* alvos de toque confortaveis */
    .btn {
        min-height: 42px;
        padding: 12px 20px;
    }

    .btn-sm,
    .btn-xs {
        min-height: 38px;
        padding: 10px 14px;
    }

    .btn-box-tool {
        min-height: 36px;
        min-width: 36px;
    }

    /* botoes de acao empilhados ocupam a largura */
    .box-botoes-adicionar,
    .box-botoes-adicionar .btn,
    .box-header .btn-novo {
        float: none !important;
        width: 100%;
        margin: 8px 0 0 0;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 0 8px 0;
    }

    .modal-footer .btn:last-child {
        margin-bottom: 0;
    }

    /* modal em tela cheia */
    .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .modal-header {
        padding: 18px 16px 0;
    }

    /* em tela cheia sobra menos moldura, entao o corpo pode rolar mais */
    .modal-body {
        padding: 16px;
        max-height: calc(100vh - 160px);
    }

    .modal-footer {
        padding: 8px 16px 16px;
    }

    /* graficos nunca estouram a largura da tela */
    .box-body > div[id$="Container"],
    .box-body .chart,
    .box-body .nvd3,
    .box-body svg {
        max-width: 100%;
    }

    .box-body > div[id$="Container"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* larguras fixas herdadas do layout antigo nao servem no celular */
    .width-230, .width-200, .width-190,
    .width-140, .width-120, .width-100 {
        width: 100% !important;
    }

    .float-left,
    .pull-left,
    .pull-right,
    .flr {
        float: none !important;
    }

    .text-align-right {
        text-align: left !important;
    }

    .box-footer .text-align-right,
    .info-box-content .text-align-right {
        text-align: right !important;
    }

    /* paginacao centralizada */
    .dataTables_paginate {
        float: none !important;
        margin: 10px 0 0 !important;
        text-align: center;
    }

    .dataTables_info {
        padding-top: 8px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .content-header > h1 {
        font-size: 17px;
    }

    body[class*="skin-"] .main-header .logo {
        font-size: 15px;
    }

    .info-box-icon {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }

    .info-box-content {
        margin-left: 62px;
    }
}


/* ---------------------------------------------------------------------------
   16. TABELA EM FORMATO DE CARTAO (CELULAR)
   ----------------------------------------------------------------------------
   No celular cada linha da tabela vira um cartao empilhado. O rotulo de cada
   campo vem do atributo data-label, preenchido automaticamente pela diretiva
   tableCards (app/directives/table-cards.js) a partir do cabecalho da tabela.

   Tabelas sem data-label continuam com rolagem lateral, sem quebrar.
   Para excluir uma tabela desse comportamento, basta a classe .no-cards.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .table-responsive,
    .table-view {
        overflow-x: auto;
        width: 100%;
        margin-bottom: 0;
        border: 0;
        -webkit-overflow-scrolling: touch;
    }

    table.table-cards {
        display: block;
        width: 100%;
    }

    table.table-cards > thead {
        display: none;
    }

    table.table-cards > tbody,
    table.table-cards > tbody > tr,
    table.table-cards > tbody > tr > td {
        display: block;
        width: 100%;
    }

    table.table-cards > tbody > tr {
        background-color: #ffffff !important;
        border: 0;
        border-radius: var(--raio-card);
        box-shadow: var(--elev-card);
        margin-bottom: 14px;
        padding: 0;
        overflow: hidden;
    }

    table.table-cards > tbody > tr > td {
        border: 0;
        border-bottom: 1px solid #f2f4f6;
        padding: 10px 14px;
        text-align: right !important;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 40px;
    }

    table.table-cards > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    table.table-cards > tbody > tr > td[data-label]:before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 400;
        color: var(--c-texto-suave);
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
        white-space: normal;
    }

    /* a primeira coluna com conteudo vira o titulo do cartao */
    table.table-cards > tbody > tr > td.titulo-cartao {
        background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
        color: #ffffff;
        font-weight: 400;
        font-size: 15px;
        border-bottom: 0;
        justify-content: flex-start;
    }

    table.table-cards > tbody > tr > td.titulo-cartao:before {
        display: none;
    }

    table.table-cards > tbody > tr > td.titulo-cartao a > .fa,
    table.table-cards > tbody > tr > td.titulo-cartao a > .glyphicon {
        color: #ffffff;
    }

    /* celulas so com icone de acao nao precisam de rotulo */
    table.table-cards > tbody > tr > td.celula-acao {
        justify-content: flex-end;
    }

    table.table-cards > tbody > tr > td .btn {
        min-height: 34px;
        padding: 8px 14px;
    }

    table.table-cards > tbody > tr > td .label {
        font-size: 10px;
    }
}


/* ---------------------------------------------------------------------------
   16b. TELAS DE LISTAGEM
   ----------------------------------------------------------------------------
   Estrutura padrao: barra de filtros no topo (campos a esquerda, buscar e novo
   a direita), tabela numerada com cabecalho ordenavel, e barra de rodape com
   acoes em lote a esquerda e paginacao mais total a direita.
   --------------------------------------------------------------------------- */
.barra-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c-borda);
}

.barra-filtro .filtro-campo {
    flex: 1 1 180px;
    min-width: 150px;
}

.barra-filtro .filtro-campo label {
    display: block;
}

.barra-filtro .filtro-acoes {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.barra-filtro .filtro-acoes .btn {
    white-space: nowrap;
}

/* --- tabela ---------------------------------------------------------------*/

/* A lista ocupa toda a largura do cartao. O cabecalho colorido e a barra de
   filtro iam ate o fim da tela enquanto a tabela parava onde o conteudo das
   colunas terminava, deixando uma faixa vazia a direita. */
.table-responsive {
    width: 100%;
}

.table-lista {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

/* AdminLTE.css (linha 6886) traz "#table-desktop { display: block }", resto da
   troca antiga entre a tabela de desktop e a tabela "#table-mobile". Com
   display:block a <table> vira uma caixa de bloco: as linhas passam a ter a
   largura do conteudo e a lista fica estreita, mesmo com width:100% na tabela.
   Dentro do @media (max-width: 767px) a mesma regra esconde a tabela.
   O id saiu das telas de listagem; a regra abaixo protege telas que ainda o
   usem. */
#table-desktop {
    display: table;
}

@media (max-width: 767px) {
    table#table-desktop {
        display: block;
    }
}

/* colunas de texto: ficam com a sobra de largura da tabela, em vez de a
   sobra virar espaco vazio no fim da linha */
.table-lista .col-flex {
    width: 25%;
    min-width: 150px;
    white-space: normal;
}

/* as colunas de largura fixa (numero, selecao, acoes) nao crescem; a sobra
   fica com as colunas de texto, que podem quebrar em duas linhas */
.table-lista > tbody > tr > td {
    white-space: normal;
    word-break: break-word;
}

.table-lista > thead > tr > th {
    white-space: nowrap;
}

.table-lista > tbody > tr:nth-of-type(even) {
    background-color: #f7f8fb;
}

.table-lista > tbody > tr:hover {
    background-color: var(--c-primaria-fraca);
}

.table-lista .col-num {
    width: 58px;
    text-align: center;
    color: var(--c-texto-suave);
    font-variant-numeric: tabular-nums;
}

.table-lista .col-check {
    width: 42px;
    text-align: center;
}

.table-lista .col-acoes {
    width: 104px;
    text-align: right;
    white-space: nowrap;
}

.table-lista .col-acoes a {
    display: inline-block;
    padding: 4px 6px;
}

/* linha de registro bloqueado: so existia a classe no HTML, sem estilo */
.table-lista > tbody > tr.bloqueado > td {
    opacity: .6;
}

/* caixa de selecao propria (container2/checkmark). As duas classes eram usadas
   nas listagens e nos modais mas nao tinham estilo em nenhum CSS: apareciam
   como um checkbox solto seguido de um quadrado vazio com um "check" dentro. */
.container2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding-left: 26px;
    min-height: 20px;
    cursor: pointer;
    font-weight: 400;
    color: var(--c-texto);
    user-select: none;
}

.container2 > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.container2 .checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-borda-input);
    border-radius: 2px;
    background-color: #ffffff;
    transition: background-color .15s ease, border-color .15s ease;
}

.container2 .checkmark > i {
    display: none;
    position: absolute;
    left: 2px;
    top: 1px;
    font-size: 10px;
    color: #ffffff;
}

.container2 > input[type="checkbox"]:checked ~ .checkmark {
    background-color: var(--c-primaria);
    border-color: var(--c-primaria);
}

.container2 > input[type="checkbox"]:checked ~ .checkmark > i {
    display: block;
}

.container2 > input[type="checkbox"]:focus ~ .checkmark {
    box-shadow: 0 0 0 3px var(--c-primaria-fraca);
}

.container2 .termo {
    padding-left: 4px;
}

/* contador ao lado do icone de trabalhos/oficinas */
.iconNumber {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin-right: 4px;
    border-radius: 9px;
    background-color: var(--c-primaria);
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 16px;
}

/* as quatro assinaturas do termo numa coluna so - largura travada para nao
   esticar a tabela (rotulo + status linha a linha, sem sobra de espaco) */
.lista-assinatura {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 158px;
    max-width: 158px;
}

.lista-assinatura > span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lista-assinatura em {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
    font-size: 10px;
    color: var(--c-texto-suave);
}

.lista-assinatura .label {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 500;
}

.linha-termo + .linha-termo {
    margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   12b. DETALHE EM MODAL (trabalhos, oficinas, frequencia)
   ----------------------------------------------------------------------------
   O que antes era um balao flutuando ao lado do icone (cortado pela rolagem
   horizontal da tabela quando abria perto da borda direita) agora abre num
   modal de verdade - app/directives/balao.js troca o "ng-show" por
   "$modal.open" sem alterar nenhum controller. Aqui fica so a "estrutura
   legal" do conteudo de cada modal: a lista de frequencia por trabalho vira
   cartoes com estatisticas, no lugar da tabelinha de duas colunas.
   --------------------------------------------------------------------------- */

/* cada trabalho/turma na frequencia detalhada */
.frequencia-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.frequencia-item {
    padding: 14px 16px;
    background-color: var(--c-fundo);
    border-radius: var(--raio-bloco);
}

.frequencia-item-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.frequencia-item-nome {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-texto);
}

/* os quatro numeros (atividades / presencas / justificadas / ausencias) */
.frequencia-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.frequencia-stat {
    flex: 1 1 90px;
    min-width: 80px;
    padding: 10px 8px;
    text-align: center;
    background-color: #ffffff;
    border-radius: var(--raio-bloco);
    border: 1px solid var(--c-borda);
}

.frequencia-stat-valor {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: var(--c-texto);
    line-height: 1.2;
}

.frequencia-stat-rotulo {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--c-texto-suave);
}

/* frequencia sem trabalho para agrupar (tela de evangelizacao/crianca) usa os
   mesmos cartoes de estatistica soltos, sem o envelope ".frequencia-item" */
.frequencia-ativacao {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--c-texto-suave);
}

/* lista de trabalhos somente leitura (tela de termos) - chips no lugar de um
   combo desabilitado, que parecia um campo travado por engano */
.lista-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-chips .chip {
    padding: 6px 14px;
    background-color: var(--c-primaria-fraca);
    color: var(--c-primaria);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

/* variante com icone + link + data + remover, usada nos termos anexados
   do assistido (cadastro) */
.lista-chips .chip-termo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 1px solid var(--c-borda);
    color: var(--c-texto);
}

.lista-chips .chip-termo a {
    color: var(--c-primaria);
    font-weight: 500;
}

.lista-chips .chip-termo small {
    color: var(--c-texto-suave);
    font-weight: 400;
}

.lista-chips .chip-termo .fa-times {
    color: var(--c-texto-suave);
    cursor: pointer;
}

.lista-chips .chip-termo .fa-times:hover {
    color: var(--c-erro);
}

/* termo escolhido num cadastro novo: ainda nao foi enviado, so' sobe quando o
   cadastro for salvo (por isso o visual tracejado, de rascunho) */
.lista-chips .chip-termo.chip-pendente {
    border-style: dashed;
    background-color: var(--c-fundo-suave, #f7f8fa);
    color: var(--c-texto-suave);
}

/* termos na listagem de assistidos: so' o link para abrir o arquivo */
.link-termo {
    display: inline-block;
    margin-right: 6px;
    color: var(--c-primaria);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   16.1 TERMOS DO ASSISTIDO
   ----------------------------------------------------------------------------
   Um termo (Termo 1, Termo 2...) e' um bloco com os arquivos daquele termo e a
   data de vencimento dele. A tag de situacao e' usada tanto no cadastro quanto
   na tela Assistido/Termo e nos avisos do topo.
   --------------------------------------------------------------------------- */
.bloco-termo {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--c-borda);
    border-radius: var(--raio-bloco);
    background-color: #ffffff;
}

.bloco-termo-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bloco-termo-cabecalho > strong {
    color: var(--c-texto);
    font-size: 13px;
}

.bloco-termo-acoes {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.bloco-termo-acoes a {
    color: var(--c-texto-suave);
}

.bloco-termo-acoes a:hover {
    color: var(--c-erro);
}

.bloco-termo-corpo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.bloco-termo-vencimento {
    flex: 0 0 150px;
    margin: 0;
}

.bloco-termo-arquivos {
    flex: 1 1 260px;
    margin: 0;
}

.bloco-termo-reavaliacao {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--c-borda);
}

/* situacao do termo: vencido, a vencer, vigente */
.tag-situacao {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    background-color: #eceef2;
    color: var(--c-texto-suave);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.tag-situacao.tag-vencido {
    background-color: rgba(244, 67, 54, .12);
    color: var(--c-erro);
}

.tag-situacao.tag-avencer {
    background-color: rgba(255, 152, 0, .16);
    color: #b26a00;
}

.tag-situacao.tag-vigente {
    background-color: rgba(76, 175, 80, .14);
    color: #2e7d32;
}

/* linha do termo novo: a data vem antes de escolher os arquivos, porque termo
   sem vencimento nao pode ser criado */
.novo-termo {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.novo-termo-vencimento {
    flex: 0 0 180px;
    margin: 0;
}

.novo-termo-botao {
    margin: 0 0 4px;
}

/* campo obrigatorio ainda em branco e botao que depende dele */
.campo-pendente {
    border-bottom-color: var(--c-erro) !important;
}

.btn-desabilitado {
    opacity: .55;
    cursor: not-allowed;
}

/* resumo no topo da tela de termos */
.resumo-termo {
    margin-bottom: 12px;
    color: var(--c-texto-suave);
    font-size: 12px;
}

.resumo-termo .tag-situacao {
    margin: 0 2px 0 10px;
}

/* ---------------------------------------------------------------------------
   16.2 AVISOS NO CABECALHO
   --------------------------------------------------------------------------- */
.avisos-menu > a {
    position: relative;
}

.avisos-menu > a > .label {
    position: absolute;
    top: 8px;
    right: 2px;
    padding: 2px 5px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1;
}

.menu-avisos {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.menu-avisos .avisos-cabecalho {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-borda);
    color: var(--c-texto-suave);
    font-size: 12px;
    font-weight: 500;
}

.menu-avisos .avisos-item > a {
    display: block;
    padding: 10px 16px;
    white-space: normal;
    line-height: 1.35;
}

.menu-avisos .avisos-item > a:hover {
    background-color: var(--c-primaria-fraca);
}

.menu-avisos .avisos-nome {
    display: inline-block;
    margin-left: 6px;
    color: var(--c-texto);
    font-size: 13px;
}

.menu-avisos .avisos-item small {
    display: block;
    margin-left: 22px;
    color: var(--c-texto-suave);
}

.menu-avisos .avisos-rodape {
    border-top: 1px solid var(--c-borda);
    text-align: center;
}

.menu-avisos .avisos-rodape > a {
    display: block;
    padding: 10px;
    color: var(--c-primaria);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .menu-avisos {
        width: 280px;
    }

    .bloco-termo-vencimento {
        flex: 1 1 100%;
    }
}

/* cabecalho ordenavel (diretiva ordenavel) */
.col-ordenavel {
    cursor: pointer;
    user-select: none;
}

.col-ordenavel:hover {
    opacity: .75;
}

.col-ordem-icone {
    margin-left: 5px;
    font-size: 11px;
    opacity: .35;
}

.col-ordem-ativa .col-ordem-icone {
    opacity: 1;
}

/* --- rodape ---------------------------------------------------------------*/
.barra-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--c-borda);
}

.barra-rodape .rodape-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.barra-rodape .rodape-info {
    font-size: 13px;
    color: var(--c-texto-suave);
}

.barra-rodape .rodape-info b {
    color: var(--c-texto);
    font-weight: 500;
}

.barra-rodape .pagination {
    margin: 0;
}

.barra-rodape .dataTables_paginate,
.barra-rodape .dataTables_info {
    float: none !important;
    margin: 0 !important;
    padding: 0;
}

@media (max-width: 767px) {
    .barra-filtro {
        gap: 10px;
    }

    .barra-filtro .filtro-campo {
        flex: 1 1 100%;
    }

    .barra-filtro .filtro-acoes {
        margin-left: 0;
        width: 100%;
    }

    .barra-filtro .filtro-acoes .btn {
        flex: 1 1 auto;
    }

    .barra-rodape {
        justify-content: center;
        text-align: center;
    }

    .barra-rodape .rodape-acoes,
    .barra-rodape .rodape-info,
    .barra-rodape .rodape-paginacao {
        width: 100%;
        justify-content: center;
    }

    /* no formato de cartao a numeracao da linha nao acrescenta nada */
    table.table-cards > tbody > tr > td.col-num {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
   17. TELA DE LOGIN
   ----------------------------------------------------------------------------
   Cartao unico dividido em dois: painel colorido com a identidade do sistema
   e painel branco com o formulario. A cor vem do skin aplicado no body pelo
   loginController assim que um sistema e escolhido.
   --------------------------------------------------------------------------- */
.tela-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    background-color: var(--c-fundo);
}

.cartao-login {
    display: flex;
    width: 100%;
    max-width: 920px;
    min-height: 520px;
    background-color: var(--c-superficie);
    border-radius: var(--raio-card);
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .36), 0 4px 25px 0 rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* --- painel colorido ------------------------------------------------------ */
.login-lado {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 34px;
    text-align: center;
    color: #ffffff;
    background-image: linear-gradient(60deg, var(--c-grad-1), var(--c-grad-2));
}

.login-lado .login-marca {
    font-size: 42px;
    opacity: .9;
    margin-bottom: 22px;
}

.login-lado h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
}

.login-lado .login-sistema {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

.login-lado p {
    max-width: 280px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

/* botao vazado sobre o painel colorido */
.btn-contorno {
    margin-top: 26px;
    padding: 11px 32px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: background-color .2s ease, border-color .2s ease;
}

.btn-contorno:hover,
.btn-contorno:focus {
    background-color: rgba(255, 255, 255, .16);
    border-color: #ffffff;
    color: #ffffff;
    outline: 0;
}

/* --- painel do formulario ------------------------------------------------- */
.login-form {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 38px;
}

.login-form form {
    width: 100%;
    max-width: 340px;
}

.login-form h2 {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: var(--c-primaria);
}

.login-form .login-sub {
    margin: 0 0 26px;
    font-size: 13px;
    text-align: center;
    color: var(--c-texto-suave);
}

/* campo com icone sobre fundo cinza, no lugar do input-group-addon */
.campo-login {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 14px;
    margin-bottom: 14px;
    background-color: #eef0f3;
    border-radius: var(--raio-bloco);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.campo-login:focus-within {
    background-color: #e7eaee;
    box-shadow: inset 0 -2px 0 0 var(--c-primaria);
}

.campo-login > i {
    flex: 0 0 18px;
    font-size: 15px;
    text-align: center;
    color: var(--c-texto-fraco);
}

.campo-login .form-control {
    flex: 1 1 auto;
    width: 100%;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 14px;
    color: var(--c-texto);
}

.campo-login .form-control:focus {
    border: 0;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
}

.campo-login select.form-control {
    height: 44px;
}

.campo-erro {
    margin: -8px 0 12px;
    padding-left: 4px;
    font-size: 12px;
    color: var(--c-erro);
}

.login-form .btn-primary {
    width: 100%;
    margin-top: 10px;
    padding: 13px 24px;
}

.login-mensagem {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: var(--raio-bloco);
    font-size: 13px;
    text-align: center;
}

.login-erro {
    background-color: rgba(244, 67, 54, .1);
    color: var(--c-erro);
}

.login-sucesso {
    background-color: rgba(76, 175, 80, .12);
    color: var(--c-sucesso);
}

/* no celular os dois paineis viram um so, empilhados */
@media (max-width: 767px) {
    .tela-login {
        padding: 0;
        align-items: stretch;
    }

    .cartao-login {
        flex-direction: column;
        min-height: 100vh;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .login-lado {
        flex: 0 0 auto;
        padding: 32px 24px 28px;
    }

    .login-lado .login-marca {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .login-lado h1 {
        font-size: 23px;
    }

    .login-lado p {
        font-size: 13px;
    }

    .btn-contorno {
        margin-top: 18px;
        min-height: 42px;
    }

    .login-form {
        padding: 30px 22px 40px;
    }

    .campo-login {
        height: 52px;
    }

    .campo-login .form-control {
        height: 50px;
        font-size: 16px;
    }
}


/* ---------------------------------------------------------------------------
   18. IMPRESSAO
   --------------------------------------------------------------------------- */
@media print {
    .main-header,
    .main-sidebar,
    .box-tools,
    .box-footer {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        background: #fff !important;
    }

    .box {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-top: 0;
    }

    .box > .box-header {
        margin: 0;
        background: #eee !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    .box > .box-header .box-title {
        color: #000 !important;
    }
}


/* ---------------------------------------------------------------------------
   19. ICONES
   ----------------------------------------------------------------------------
   O sistema usa Font Awesome 6 (o _Layout carrega o v4-shims, entao os nomes
   antigos do HTML continuam valendo). Aqui fica so o acabamento: tamanho e
   alinhamento iguais em todo lugar, traco mais leve e area de clique maior
   nos icones de acao das listas.
   --------------------------------------------------------------------------- */
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.glyphicon,
.ion {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    line-height: 1;
}

/* --- menu lateral ---------------------------------------------------------*/
body[class*="skin-"] .sidebar-menu > li > a > i {
    display: inline-block;
    width: 26px;
    text-align: center;
    font-size: 17px;
    color: var(--c-texto-suave);
    opacity: 1;
    transition: color .2s ease;
}

body[class*="skin-"] .sidebar-menu > li:hover > a > i,
body[class*="skin-"] .sidebar-menu > li.menu-open > a > i {
    color: var(--c-primaria);
}

body[class*="skin-"] .sidebar-menu > li.active > a > i,
body[class*="skin-"] .sidebar-menu > li.active:hover > a > i {
    color: #fff;
}

/* seta do submenu: menor e mais discreta, e gira quando o item abre */
body[class*="skin-"] .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
    font-size: 13px;
    opacity: .5;
    transition: transform .2s ease, opacity .2s ease;
}

body[class*="skin-"] .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left,
body[class*="skin-"] .sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left {
    transform: rotate(-90deg);
    opacity: .9;
}

/* --- cabecalho da pagina e trilha -----------------------------------------*/
.content-header > .breadcrumb > li > a > .fa,
.content-header > .breadcrumb > li > .fa {
    font-size: 13px;
    margin-right: 5px;
    opacity: .75;
}

/* --- acoes das listas: o icone ganha uma area redonda de clique ------------*/
.table-lista .col-acoes a,
.table-lista .celula-acao a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: 2px;
    border-radius: 50%;
    color: var(--c-texto-suave);
    transition: background-color .2s ease, color .2s ease;
}

.table-lista .col-acoes a:hover,
.table-lista .celula-acao a:hover {
    background-color: var(--c-primaria-fraca);
    color: var(--c-primaria);
    text-decoration: none;
}

.table-lista .col-acoes a > .fa,
.table-lista .celula-acao a > .fa {
    font-size: 15px;
    color: inherit;
}

/* --- botoes ---------------------------------------------------------------*/
.btn > .fa,
.btn > .glyphicon,
.btn > .ion {
    font-size: 13px;
    margin-right: 6px;
}

.btn > .fa:only-child,
.btn > .glyphicon:only-child,
.btn > .ion:only-child {
    margin-right: 0;
}

/* --- cabecalho colorido do cartao -----------------------------------------*/
.box > .box-header > .fa,
.box > .box-header > .glyphicon,
.box > .box-header > .ion {
    font-size: 16px;
    opacity: .9;
}

/* --- setas de ordenacao das colunas ---------------------------------------*/
.col-ordem-icone {
    font-size: 10px;
    opacity: .35;
    margin-left: 5px;
    transition: opacity .2s ease;
}

.col-ordenavel:hover .col-ordem-icone {
    opacity: .7;
}

.col-ordem-ativa .col-ordem-icone {
    opacity: 1;
}


/* ---------------------------------------------------------------------------
   20. GRAFICOS
   ----------------------------------------------------------------------------
   Cor, fonte e legenda dos graficos Highcharts sao definidas em
   app/directives/grafico-tema.js. Aqui fica o que so o CSS resolve: a
   tipografia do nvd3 (que desenha texto em SVG e nao herda a fonte da pagina),
   o balao de tooltip do nvd3 e o espacamento do grafico dentro do cartao.
   --------------------------------------------------------------------------- */
.box-body > div[id$="Container"],
.box-body .chart {
    margin-top: 4px;
}

/* --- nvd3 (graficos de rosca) ---------------------------------------------*/
.nvd3 text,
.nvd3 .nv-legend text {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    fill: var(--c-texto);
}

.nvd3 .nv-legend text {
    font-size: 12px;
}

.nvd3 .nv-pie .nv-label text {
    font-size: 11px;
    fill: var(--c-texto-suave);
}

/* linhas de eixo do nvd3 na mesma cor de grade do resto do tema */
.nvd3 .nv-axis line,
.nvd3 .nv-axis path,
.nvd3 .nv-axis .domain {
    stroke: #eceff1;
}

.nvd3 .nv-axis text {
    fill: var(--c-texto-suave);
    font-size: 11px;
}

/* fatia sem contorno branco grosso: o anel fica continuo */
.nvd3 .nv-pie path {
    stroke: #ffffff;
    stroke-width: 2px;
}

/* --- tooltip do nvd3: mesmo balao escuro do Highcharts --------------------*/
.nvtooltip {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    background: rgba(60, 72, 88, .96);
    border: 0;
    border-radius: 6px;
    box-shadow: var(--elev-flutuante);
    color: #ffffff;
    padding: 8px 10px;
}

.nvtooltip table td,
.nvtooltip table th,
.nvtooltip .key,
.nvtooltip .value,
.nvtooltip h3 {
    color: #ffffff;
    background: transparent;
    border: 0;
}

.nvtooltip h3 {
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 4px;
    padding: 0;
}

/* --- rodape de totais abaixo do grafico -----------------------------------*/
.grafico-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    color: var(--c-texto-suave);
}

.grafico-resumo b {
    color: var(--c-texto);
    font-weight: 500;
}