/* Custom styles for the application */

/* Add your custom CSS here */
/* Titulo da tela: discreto, como nos consoles (Vision One, Azure). O caminho
   "Modulo > Secao" ja esta na barra do topo, entao o titulo so precisa dizer
   o nome -- nao anunciar a tela em letra de capa. */
.page-header {
    margin-bottom: 1.25rem !important;
}
.page-header h1 {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sidebar-bg, #10243e);
    margin-bottom: 0;
}
.page-header h1 > * > .fas,
.page-header h1 > .fas,
.page-header h1 > * > span > .fas {
    font-size: .9em;
    color: #5a6b7c;
}
.page-header hr {
    margin: .75rem 0 0;
    border-color: #cfd8e3;
    opacity: 1;
}
/* Botoes e selos do cabecalho no tamanho do titulo novo. */
.page-header h1 .btn:not(.btn-sm) {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: .875rem;
}
.page-header h1 .btn-sm { --bs-btn-font-size: .8rem; }
.page-header h1 .badge.fs-6 { font-size: .72rem !important; vertical-align: .2em !important; }

/* Caminho da tela na barra do topo. */
.topbar-trilha { font-size: .85rem; color: #6c757d; }
.topbar-trilha a { color: var(--sidebar-bg, #10243e); font-weight: 500; text-decoration: none; }
.topbar-trilha a:hover { text-decoration: underline; }
.topbar-trilha-sep { font-size: .6rem; margin: 0 .5rem; opacity: .6; }

.footer {
    margin-top: auto;
}

/* Estilos para o Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-container {
    text-align: center;
    max-width: 400px;
    padding: 20px;
}

.custom-loader {
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.loading-subtext {
    color: #666;
    font-size: 0.9rem;
}

/* Tag estilo NetBox (ex: atualizado:hoje) */
.nb-tag {
    display: inline-block;
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.25em 0.65em;
    border-radius: 50rem;
    line-height: 1.4;
    white-space: nowrap;
}

/* Gradiente verde -> vermelho conforme a distância no tempo.
   Fundo claro e texto no tom: numa lista em que tudo tem mais de um mes, a
   cor cheia pintava a coluna inteira de laranja e competia com o status. */
.nb-tag { border: 1px solid transparent; }
.nb-tag-0 { background-color: #e6f4ea; color: #1e6b30; border-color: #bfe3c9; } /* hoje */
.nb-tag-1 { background-color: #edf7ee; color: #2e7d32; border-color: #cbe8cd; } /* ontem */
.nb-tag-2 { background-color: #f2f8e8; color: #4d7a1f; border-color: #d8eac0; } /* poucos dias */
.nb-tag-3 { background-color: #f7f9e3; color: #6a7314; border-color: #e3e8b4; } /* 1 semana */
.nb-tag-4 { background-color: #fff8e1; color: #8a6100; border-color: #f3e2a6; } /* 2 semanas */
.nb-tag-5 { background-color: #fff1e0; color: #9a5200; border-color: #f5d6ad; } /* 3 semanas */
.nb-tag-6 { background-color: #fdece6; color: #a8401b; border-color: #f4cbbd; } /* 1 mês */
.nb-tag-7 { background-color: #fbe0de; color: #a52620; border-color: #f1c0bc; } /* mais de um mês */

/* ==========================================================================
   Tecnologias como tags
   Exibicao (.tag-tec) e o campo de digitacao (.tags-*) do formulario. Sao
   listas longas (uma aplicacao passa de 50 itens), entao a tag e discreta:
   quem le esta procurando um nome no meio, nao contando categorias.
   ========================================================================== */
.tag-tec {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
    background-color: #eef2f7;
    color: #33415c;
    border: 1px solid #d7dfea;
    white-space: nowrap;
}

/* A caixa recebe .form-control para herdar a borda e o foco do Bootstrap; o
   height fixo do form-control atrapalha quando as tags quebram linha. */
.tags-caixa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    cursor: text;
}

.tags-caixa .tag-tec {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.tags-remover {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    color: inherit;
    opacity: 0.55;
}

.tags-remover:hover,
.tags-remover:focus {
    opacity: 1;
}

/* Cresce com o que esta sendo digitado, sem empurrar as tags para outra linha
   quando esta vazio. */
.tags-entrada {
    flex: 1 1 8ch;
    min-width: 8ch;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
}

/* ==========================================================================
   Sidebar de navegacao
   Retratil em telas grandes (recolhe para so os icones) e off-canvas no mobile.
   O estado fica em localStorage, aplicado no <html> antes da pintura para nao
   piscar entre expandido e recolhido no carregamento.
   ========================================================================== */

:root {
    --sidebar-width: 256px;
    --sidebar-width-collapsed: 62px;
    --sidebar-bg: #10243e;
    --sidebar-bg-hover: #1b3557;
    --sidebar-bg-active: #0d6efd;
    --sidebar-fg: #c7d4e4;
    --sidebar-fg-muted: #7d90a8;
}

body {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .18s ease, transform .18s ease;
    overflow: hidden;
}

.app-main {
    margin-left: var(--sidebar-width);
    transition: margin-left .18s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -- Recolhido: so os icones ---------------------------------------------- */
html.sidebar-collapsed .app-sidebar { width: var(--sidebar-width-collapsed); }
html.sidebar-collapsed .app-main { margin-left: var(--sidebar-width-collapsed); }
html.sidebar-collapsed .sidebar-label,
html.sidebar-collapsed .sidebar-section-title,
html.sidebar-collapsed .sidebar-caret,
html.sidebar-collapsed .sidebar-brand-text { display: none; }
html.sidebar-collapsed .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }
html.sidebar-collapsed .sidebar-link i { margin-right: 0 !important; }
/* Submenus viram flyout ao passar o mouse. */
html.sidebar-collapsed .sidebar-group > .sidebar-submenu { display: none !important; }
html.sidebar-collapsed .sidebar-group:hover > .sidebar-submenu {
    display: block !important;
    position: absolute;
    left: var(--sidebar-width-collapsed);
    min-width: 232px;
    background-color: var(--sidebar-bg-hover);
    border-radius: 0 .375rem .375rem 0;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.35);
    padding: .25rem 0;
    z-index: 1050;
}
html.sidebar-collapsed .sidebar-group:hover > .sidebar-submenu .sidebar-label { display: inline; }
html.sidebar-collapsed .sidebar-group:hover > .sidebar-submenu .sidebar-link { justify-content: flex-start; padding-left: .9rem; }
html.sidebar-collapsed .sidebar-group:hover > .sidebar-submenu .sidebar-link i { margin-right: .6rem !important; }
html.sidebar-collapsed .app-sidebar { overflow: visible; }
html.sidebar-collapsed .sidebar-nav { overflow-y: auto; overflow-x: visible; }

/* -- Cabecalho ------------------------------------------------------------ */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem .9rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand:hover { color: #fff; }
html.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* -- Navegacao ------------------------------------------------------------ */
.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem 0 1rem;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

/* Cada modulo e um bloco fechado: um filete e um respiro o separam do
   seguinte. Sem isso a barra vira uma lista corrida de dezesseis itens, e nada
   diz onde o Inventario termina e a LGPD comeca -- que e justamente a pergunta
   de quem esta procurando uma tela.

   O filete mora no BLOCO, e nao no titulo: recolhida, a barra esconde os
   titulos, e e ali que a divisao mais falta -- so restariam icones enfileirados. */
.sidebar-section + .sidebar-section {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.13);
}

.sidebar-section-title {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #93a7c0;
    padding: .55rem .95rem .35rem;
    white-space: nowrap;
}

/* Um tracinho antes do nome: diz que aquilo e cabecalho de modulo, e nao mais
   um item da lista. Inline-block, e nao flex, porque no mobile o titulo volta
   a `display: revert` -- que e block, e jogaria o traco para a linha de cima. */
.sidebar-section-title::before {
    content: "";
    display: inline-block;
    width: .7rem;
    height: 2px;
    margin-right: .5rem;
    vertical-align: middle;
    background-color: currentColor;
    opacity: .5;
}

.sidebar-group { position: relative; }

.sidebar-link {
    display: flex;
    align-items: center;
    padding: .5rem .95rem;
    color: var(--sidebar-fg);
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
    font-size: .93rem;
}
.sidebar-link i { width: 1.15rem; text-align: center; flex: 0 0 auto; }
.sidebar-link:hover { background-color: var(--sidebar-bg-hover); color: #fff; }
.sidebar-link.active {
    background-color: rgba(13,110,253,.22);
    border-left-color: var(--sidebar-bg-active);
    color: #fff;
    font-weight: 500;
}

.sidebar-toggle-group {
    background: none;
    border: 0;
    width: 100%;
    cursor: pointer;
}
.sidebar-caret { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.sidebar-toggle-group[aria-expanded="true"] .sidebar-caret { transform: rotate(90deg); }

.sidebar-submenu { list-style: none; margin: 0; padding: 0; }
.sidebar-submenu .sidebar-link {
    padding-left: 2.4rem;
    font-size: .875rem;
    color: var(--sidebar-fg-muted);
}
.sidebar-submenu .sidebar-link:hover,
.sidebar-submenu .sidebar-link.active { color: #fff; }

.sidebar-divider { border-top: 1px solid rgba(255,255,255,.08); margin: .4rem .9rem; }

/* -- Rodape (usuario) ----------------------------------------------------- */
.sidebar-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .35rem 0;
}

/* -- Barra superior do conteudo ------------------------------------------- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.sidebar-toggle-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .3rem .6rem;
    color: #495057;
    line-height: 1;
}
.sidebar-toggle-btn:hover { background: #f1f3f5; }

/* -- Mobile: sidebar vira gaveta ------------------------------------------ */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1035;
    display: none;
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); width: var(--sidebar-width); }
    .app-main { margin-left: 0; }
    html.sidebar-open .app-sidebar { transform: translateX(0); }
    html.sidebar-open .sidebar-backdrop { display: block; }
    /* No mobile a gaveta abre sempre completa, nunca so com icones. */
    html.sidebar-collapsed .app-sidebar { width: var(--sidebar-width); }
    html.sidebar-collapsed .app-main { margin-left: 0; }
    html.sidebar-collapsed .sidebar-label,
    html.sidebar-collapsed .sidebar-section-title,
    html.sidebar-collapsed .sidebar-caret,
    html.sidebar-collapsed .sidebar-brand-text { display: revert; }
    html.sidebar-collapsed .sidebar-link { justify-content: flex-start; padding-left: .95rem; }
    html.sidebar-collapsed .sidebar-group:hover > .sidebar-submenu { position: static; box-shadow: none; min-width: 0; }
}

@media print {
    .app-sidebar, .app-topbar, .sidebar-backdrop { display: none !important; }
    .app-main { margin-left: 0 !important; }
}

/* ==========================================================================
   Cabecalho de card no tom da navegacao
   Uma cor so para todos os cards, em vez de um arco-iris de bg-info/success/
   warning que nao carregava significado. Herda o token da sidebar, entao mudar
   a identidade num lugar muda em todos.
   ========================================================================== */

/* O cabecalho e uma orelha de pasta: o titulo fica numa aba cinza que nasce de
   um filete da mesma cor, e o resto da faixa e o proprio card. A barra azul
   cheia pesava -- numa tela com seis cards eram seis faixas escuras
   disputando a atencao com o conteudo. */
.card-header-app {
    --orelha-bg: #e3e8ee;
    --orelha-texto: var(--sidebar-bg, #10243e);
    background: transparent;
    color: var(--orelha-texto);
    border-bottom: 3px solid var(--orelha-bg);
    padding: .6rem .85rem 0;
    align-items: flex-end !important;
    gap: .5rem;
}

/* A aba: o titulo do card. Canto esquerdo arredondado e o direito em rampa,
   como a orelha das pastas. */
.card-header-app > .card-title,
.card-header-app > .fw-semibold,
.card-header-app > div:first-child > .card-title,
.card-header-app > div:first-child > .fw-semibold:first-child {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: .42rem 1.6rem .38rem .95rem;
    background: var(--orelha-bg);
    color: var(--orelha-texto);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: .5rem 0 0 0;
    clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% 100%, 0 100%);
}
.card-header-app > .card-title i,
.card-header-app > div:first-child > .card-title i { color: #5a6b7c; }

/* O que acompanha a aba -- contagem, botao, subtitulo -- fica na faixa
   branca, alinhado pela base, sem encostar no filete. */
.card-header-app > :not(.card-title):not(.fw-semibold):not(:has(> .card-title, > .fw-semibold)) { margin-bottom: .3rem; }
/* Aba com subtitulo ao lado (interdependencias): os dois na mesma linha. */
.card-header-app:has(> .fw-semibold) {
    display: flex;
    flex-wrap: wrap;
}
.card-header-app > div:first-child:has(> .fw-semibold) {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}
.card-header-app > div:first-child:has(> .fw-semibold) > :not(.fw-semibold) { margin-bottom: .3rem; }
.card-header-app .text-muted { color: #6c757d !important; }
.card-header-app .badge.bg-light { border: 1px solid #d5dce4; }
.card-header-app .btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cfd8e3;
    --bs-btn-hover-bg: #f1f4f8;
    --bs-btn-hover-border-color: #b8c4d1;
    --bs-btn-color: var(--sidebar-bg, #10243e);
}

.card-header-app + .collapse > .card-body,
.card-header-app + .card-body { padding-top: 1rem; }

/* Faixa lateral para diferenciar sem colorir o cabecalho inteiro. */
.card-accent { border-left: 3px solid var(--sidebar-bg); }
.card-accent-danger { border-left-color: #dc3545; }

/* ==========================================================================
   Cartografia do risco (metodo PIA)
   Impactos, ameacas, fontes e medidas ligados aos eventos temidos.
   ========================================================================== */

.risk-cartography { position: relative; }

.cartography-column-title {
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: .35rem;
}

.cartography-node {
    background: #212529;
    color: #fff;
    font-size: .78rem;
    padding: .3rem .6rem;
    margin-bottom: .3rem;
    border-radius: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartography-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.cartography-links path { fill: none; stroke-width: 1.4; opacity: .75; }

.cartography-event-title { font-weight: 600; font-size: .95rem; }
/* Uma cor por evento temido, repetida nas ligacoes que chegam ate ele. */
.event-illegitimate_access   { color: #e8336d; }
.event-unwanted_modification { color: #1fbf9c; }
.event-data_disappearance    { color: #16357a; }

.cartography-gauge {
    background: #e9ecef;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: .15rem;
}
.cartography-gauge-fill { background: #8d7f60; height: 100%; }

@media (max-width: 991.98px) {
    .cartography-links { display: none; }
}

/* ==========================================================================
   Cards retrateis
   Mesmo comportamento da tela de aplicacao: o card recolhe deixando so o
   cabecalho, e a seta gira para indicar o estado.
   ========================================================================== */

.card-toggle-btn .fa-chevron-down { transition: transform .2s ease; }
.card-toggle-btn.collapsed .fa-chevron-down { transform: rotate(-90deg); }

/* Cabecalho de card recolhido perde o arredondamento de baixo. */
.card > .card-header:has(+ .collapse:not(.show)) { border-bottom: 0; }

/* ==========================================================================
   Tag picker
   Multi-selecao com busca, para campos que crescem com a base (ativos,
   ameacas, medidas). Substitui listas de checkbox que nao escalam.
   ========================================================================== */

.tag-picker { position: relative; }

.tag-picker-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .3rem .5rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
    cursor: text;
}
.tag-picker-control:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.tag-picker-chips { display: contents; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: .78rem;
    line-height: 1.4;
    padding: .15rem .3rem .15rem .5rem;
    border-radius: .25rem;
    max-width: 100%;
}
.tag-chip-remove {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
}
.tag-chip-remove:hover { color: #fff; }

.tag-picker-input {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    padding: .15rem 0;
    font-size: .9rem;
    background: transparent;
}

/* Escolha unica ja preenchida: o campo de digitar continua ali -- e escondendo-o
   a caixa deixava de abrir -- mas cede o espaco para a etiqueta, que e o que
   importa ler. Sem `min-width` grande ele nao empurra a etiqueta para a
   linha de baixo numa coluna estreita. */
.tag-picker-input-curto {
    flex: 0 1 6rem;
    min-width: 4rem;
}

/* Fixa, e nao absoluta: dentro de `.table-responsive` -- ou de qualquer
   ancestral com overflow -- uma lista absoluta e cortada, e o script e quem
   lhe da as coordenadas. */
.tag-picker-menu {
    position: fixed;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    margin-top: .15rem;
}

.tag-picker-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .4rem .6rem;
    font-size: .85rem;
    cursor: pointer;
}
.tag-picker-option:hover { background: #f1f3f5; }

/* Sugestao de catalogo: existe para ser escolhida, mas ainda nao esta na
   avaliacao. O "+" a distingue do que ja foi cadastrado, sem a separar numa
   lista propria -- quem procura um nome quer ver as duas coisas juntas. */
.tag-picker-sugestao { color: #6c757d; }
.tag-picker-sugestao::before {
    content: "+";
    margin-right: .4rem;
    color: #adb5bd;
}

.tag-picker-create { border-top: 1px solid #e9ecef; color: #0d6efd; }

.tag-picker-note {
    padding: .4rem .6rem;
    font-size: .8rem;
    color: #6c757d;
}

/* ------------------------------------------------------------------
   Linha de apoio do cabecalho.
   O page_title do base.html e renderizado dentro de um <h1>, entao
   classes relativas (.small, .badge) herdam o tamanho do titulo e a
   linha de apoio sai gigante. Aqui ela volta ao tamanho de texto.
   ------------------------------------------------------------------ */
.page-header h1 .page-subtitle {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.page-header h1 .page-subtitle .badge {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------
   Contexto de trabalho do modulo LGPD, na barra do topo: de quem e a
   conformidade e o que esta pendente nela. Fica sempre a vista e e
   trocavel de qualquer tela.
   ------------------------------------------------------------------ */
.topbar-lgpd .dropdown-menu {
    min-width: 18rem;
}

.topbar-alerts {
    max-width: 26rem;
}

.topbar-alerts .dropdown-item {
    white-space: normal;
}

/* O botao dentro do form de troca precisa parecer item de menu. */
.topbar-lgpd form .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    /* Nome de orgao e longo. Sem isto ele nao quebra: some na borda do menu. */
    white-space: normal;
}

/* O `background: none` acima apaga o azul que o Bootstrap poe no item ativo --
   mas nao o texto branco que vem junto. A organizacao em uso ficava branca no
   branco: some da lista e deixa um vao no lugar dela. Aqui ela reaparece,
   marcada por peso e fundo, e nao so por cor. */
.topbar-lgpd form .dropdown-item.active,
.topbar-lgpd form .dropdown-item.active:hover,
.topbar-lgpd form .dropdown-item:active {
    background-color: #eef1f5;
    color: inherit;
    font-weight: 600;
}



/* ------------------------------------------------------------------
   Tela do RIPD organizada por categoria.
   Eram 18 cartoes numa pilha, em duas colunas cujo criterio nao existia.
   Agora cada categoria e uma aba, e a aba usa a largura inteira -- o que
   importa para a analise de risco, onde o mapa 4x4 e a cartografia
   precisam de espaco.
   ------------------------------------------------------------------ */
/* Abas como as de um navegador: a aba escolhida e a pagina abaixo dela sao
   uma peca so -- mesma cor, mesma borda, sem filete entre as duas. Com o
   sublinhado de antes, numa tela cheia de cartoes nao ficava claro em que aba
   se estava. */
/* `.app-tabs` e o mesmo desenho, com nome de fora do RIPD, para os demais
   modulos (infraestrutura) usarem sem depender do nome de uma tela da LGPD. */
.ripd-tabs,
.app-tabs {
    border-bottom: 1px solid #cfd8e3;
    gap: .25rem;
    padding: 0 .5rem;
}

.app-tabs .nav-link,
.ripd-tabs .nav-link {
    color: #5a6b7c;
    background: #e6ebf1;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .55rem .55rem 0 0;
    padding: .6rem 1.15rem;
    font-weight: 500;
    margin-bottom: -1px;
}

.app-tabs .nav-link:hover,
.ripd-tabs .nav-link:hover {
    color: var(--sidebar-bg, #16324f);
    background: #dce3eb;
}

.app-tabs .nav-link.active,
.ripd-tabs .nav-link.active {
    color: var(--sidebar-bg, #16324f);
    background: #f3f6f9;
    border-color: #cfd8e3;
    /* O friso de cor no topo, como a aba ativa dos navegadores. */
    box-shadow: inset 0 3px 0 var(--sidebar-bg-active, #0d6efd);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* A pagina da aba: continua a aba ativa, com a mesma cor e a mesma borda. */
.ripd-tab-content,
.app-tab-content {
    background: #f3f6f9;
    border: 1px solid #cfd8e3;
    border-top: 0;
    border-radius: 0 0 .55rem .55rem;
    padding: 1.25rem;
}

/* Submenu das secoes: a aba escolhe o assunto, o submenu escolhe a secao.

   As regras so valem quando o script assumiu a tela (.ripd-com-submenu no
   <html>). Sem JavaScript nada disso se aplica e os cartoes ficam empilhados
   como antes -- a tela continua inteira, so nao fica em duas colunas. */
.ripd-com-submenu .ripd-tab-content {
    visibility: hidden;
}

.ripd-com-submenu .ripd-tab-content.ripd-pronto {
    visibility: visible;
}

/* Segundo nivel de abas, logo abaixo do primeiro: a aba de cima escolhe o
   assunto, esta escolhe a secao. Sao abas de verdade, nao um menu -- so que
   menores e mais leves, para a hierarquia entre os dois niveis ficar clara. */
.ripd-subabas {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin: 0;
    padding: 0 .35rem;
    border-bottom: 1px solid #cfd8e3;
}

/* O mesmo desenho de aba, um grau abaixo: menor, e a pagina dela e branca. */
.ripd-subaba {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .45rem .45rem 0 0;
    background: transparent;
    color: #5a6b7c;
    font-size: .875rem;
    line-height: 1.3;
    padding: .45rem .9rem;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .12s ease, background-color .12s ease;
}

.ripd-subaba:hover {
    color: var(--sidebar-bg, #16324f);
    background: #e6ebf1;
}

.ripd-subaba.active {
    color: var(--sidebar-bg, #16324f);
    font-weight: 600;
    background: #fff;
    border-color: #cfd8e3;
    box-shadow: inset 0 2px 0 var(--sidebar-bg, #16324f);
    position: relative;
    z-index: 1;
}

.ripd-subaba:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
}

/* Em tela estreita os nomes sao longos: deixa quebrar em vez de estourar. */
@media (max-width: 575.98px) {
    .ripd-subaba {
        white-space: normal;
        text-align: left;
    }
}

/* O miolo mostra uma secao por vez: e a pagina da subaba escolhida, branca e
   com a borda que continua a da aba. O cartao dentro dele perde a propria
   moldura -- seria uma caixa dentro da caixa. */
.ripd-miolo {
    background: #fff;
    border: 1px solid #cfd8e3;
    border-top: 0;
    border-radius: 0 0 .45rem .45rem;
    padding: 1rem;
}

.ripd-miolo > .card {
    display: none;
    border: 0;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.ripd-miolo > .card.ripd-ativo {
    display: block;
}

/* Na impressao, tudo aparece: o RIPD e um documento, nao uma navegacao.
   Vale para as abas e tambem para as secoes escondidas pelo submenu. */
@media print {
    .ripd-tabs,
    .ripd-subabas { display: none !important; }
    .ripd-tab-content .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }
    .ripd-com-submenu .ripd-tab-content { visibility: visible !important; }
    .ripd-miolo > .card { display: block !important; }
}

/* Lista marcavel dentro de um campo: sem limite, uma lista longa toma a coluna
   inteira e empurra o resto do formulario para fora da tela. */
.lgpd-lista-marcavel {
    max-height: 220px;
    overflow-y: auto;
}

.lgpd-lista-marcavel .form-check-label {
    line-height: 1.3;
}

/* Uma barra a esquerda em cada secao do inventario.

   Com tabelas dentro, a moldura fina do cartao nao dizia onde uma secao acaba
   e a outra comeca: as linhas da tabela tem o mesmo peso visual da borda. A
   barra da a cada secao um comeco, e a rolagem passa a ter ritmo.

   E um ::before, e nao border-left, porque os cartoes carregam .border-0 do
   Bootstrap -- que e `border: 0 !important` e apagaria qualquer borda. O
   pseudo-elemento passa ao largo disso.

   O z-index poe a barra acima do .card-header, que tem fundo proprio e a
   cobriria na altura do titulo. */
.idp-secao {
    position: relative;
    /* Garantia do respiro entre uma secao e a seguinte, mesmo que alguem
       esqueca o mb-4 no cartao: sem ele as secoes se encostam e a barra
       lateral vira uma linha continua, que nao separa nada. */
    margin-bottom: 1.5rem;
}

.idp-secao::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 4px;
    border-radius: .375rem 0 0 .375rem;
    background: #b9c6d3;
}

/* O escopo abre a tela -- onde os dados moram -- entao a barra dele e a cor
   do sistema. */
.idp-secao-escopo::before {
    background: var(--sidebar-bg, #16324f);
}

/* Rotulo de um valor que detalha o item logo acima. Cada lapis precisa de um
   nome -- sem ele nao da para saber o que se esta editando --, mas o detalhe
   nao pode competir com o item numerado a que pertence. */
.idp-subitem {
    font-weight: 400;
    color: #6c757d;
    padding-left: 1.25rem;
}

/* Edicao no proprio lugar em que o dado e lido.

   O lapis so aparece ao passar o mouse ou ao focar pelo teclado: a leitura nao
   pode virar um mostruario de botoes, mas quem procura corrigir tem de achar. */
.campo-editavel {
    position: relative;
}

/* O texto e que respeita as quebras que a pessoa digitou. No <dd> o pre-wrap
   apanhava tambem as quebras do HTML deste componente, e sobrava um buraco. */
.campo-valor-texto {
    white-space: pre-wrap;
}

/* Valor que e marcacao -- badge, icone, lista de nomes -- e nao texto digitado.
   Aqui nao ha quebra de linha para preservar, e preserva-las faria a indentacao
   do HTML do template virar espaco em branco na tela. */
.campo-editavel[data-marcacao="1"] .campo-valor-texto {
    white-space: normal;
}

.campo-lapis {
    border: 0;
    background: transparent;
    color: #8a99a8;
    padding: 0 .25rem;
    font-size: .75rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.campo-editavel:hover .campo-lapis,
.campo-lapis:focus-visible {
    opacity: 1;
}

.campo-lapis:hover {
    color: var(--sidebar-bg, #16324f);
}

/* Sem JavaScript o formulario fica visivel e funciona igual -- e um <form> de
   verdade, com POST proprio. A classe abaixo so e posta pelo script. */
.js-campo-inline .campo-form {
    display: none;
}

.js-campo-inline .campo-editavel.editando .campo-form {
    display: block;
}

.js-campo-inline .campo-editavel.editando .campo-valor {
    display: none;
}

.campo-form {
    margin-top: .25rem;
}

/* Grade de conformidade legal (principios do art. 6, direitos do art. 18).
   Mesma ideia do campo editavel, aplicada a uma linha inteira: le-se colorida,
   e clicar nela troca a leitura pelos campos. O rodape com Salvar so aparece
   quando ha alguma linha aberta -- botao para o que ninguem pediu e ruido.

   Sem JavaScript nada disso se aplica: os campos ficam a vista e o <form>
   continua sendo um POST comum. */
.js-campo-inline .analise-edicao,
.js-campo-inline .analise-grade .analise-rodape {
    display: none;
}

.js-campo-inline .analise-linha.editando .analise-edicao,
.js-campo-inline .analise-grade.editando .analise-rodape {
    display: block;
}

.js-campo-inline .analise-linha.editando .analise-leitura {
    display: none;
}

.js-campo-inline .analise-linha {
    cursor: pointer;
}

.js-campo-inline .analise-linha.editando {
    cursor: auto;
}

.analise-linha:hover .campo-lapis,
.analise-linha:focus-within .campo-lapis {
    opacity: 1;
}

/* Aberta, a linha nao precisa mais do lapis: ela ja esta em edicao. */
.analise-linha.editando .campo-lapis {
    display: none;
}

/* Grade de caixas -- operadores, fontes -- impressa de uma vez pelo widget.
   Cada opcao ja traz o proprio rotulo; aqui so se alinha caixa e texto. */
.lista-marcacoes label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .15rem;
}

.lista-marcacoes .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

/* ==========================================================================
   Padrao visual compartilhado (infraestrutura e demais modulos)
   O mesmo desenho do modulo LGPD, com nomes neutros: cinza, sombra leve,
   cabecalho no tom da navegacao e cor so onde ela carrega significado.
   ========================================================================== */

/* Ficha de detalhe: rotulo discreto a esquerda, valor a direita. Substitui o
   "<strong>Nome:</strong>" em negrito, que competia com o proprio valor. */
.table-ficha > :not(caption) > * > * {
    padding: .45rem .5rem;
    border-bottom-color: #eef1f5;
}
.table-ficha th {
    width: 34%;
    color: #6b7683;
    font-size: .85rem;
    font-weight: 500;
    background: transparent;
    white-space: nowrap;
}
.table-ficha tr:last-child > * { border-bottom: 0; }

/* Titulo de secao dentro de um card: o mesmo da secao do LGPD. */
.app-secao-titulo {
    color: var(--sidebar-bg, #10243e);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #cfd8e3;
}

/* Bloco de configuracao gerada: escuro, mas no tom da navegacao. */
.codigo-bloco {
    background: #14263d;
    color: #dbe5f0;
    border: 1px solid #0b1a2c;
    border-radius: .5rem;
    padding: .9rem 1rem;
    overflow-x: auto;
    font-size: .82rem;
}
.codigo-bloco pre { color: inherit; margin: 0; }

/* Indicador numerico no topo de uma tela (os cartoes de resumo do LGPD). */
.app-kpi .card-body { padding: .9rem 1rem; }
.app-kpi-rotulo { color: #6c757d; font-size: .85rem; }
.app-kpi-valor { font-size: 1.6rem; font-weight: 500; line-height: 1.2; }

/* Tabela encostada no card, sem o respiro do card-body em volta. */
.card > .table-responsive > .table,
.card > .card-body > .table-responsive:only-child > .table { margin-bottom: 0; }

/* Card de listagem: a tabela encosta nas bordas, como nas listas do LGPD. O
   que vier junto dela no mesmo corpo -- aviso de vazio, paginacao -- mantem o
   respiro. */
.card-header-app + .card-body:has(> .table-responsive) { padding: 0; }
.card-header-app + .card-body:has(> .table-responsive) > .table-responsive > .table { margin-bottom: 0; }
.card-header-app + .card-body:has(> .table-responsive) > :not(.table-responsive) { margin: .75rem 1rem; }

/* Filtros "Adicionar filtro" (includes/filtro_barra.html) */
.filtro-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.filtro-add { background: #fff; font-weight: 500; }
.filtro-painel { min-width: min(34rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #dde3ea; }
.filtro-painel-titulo { font-size: .85rem; font-weight: 600; color: #3d4b5c; margin-bottom: .6rem; }
.filtro-painel-campos { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-painel-campos > [data-role="campo"] { flex: 1 1 9rem; }
.filtro-painel-campos > .filtro-operador { flex: 0 1 8rem; }
.filtro-painel-campos > .filtro-valor { flex: 2 1 12rem; }
.filtro-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .25rem .2rem .6rem; font-size: .8rem; line-height: 1.4;
    background: #fff; border: 1px solid #cfd8e3; border-radius: .35rem; color: #10243e;
}
.filtro-chip-op { color: #6c7a89; }
.filtro-chip strong { font-weight: 600; }
.filtro-chip-negado { border-color: #f1c2c7; background: #fdf5f6; }
.filtro-chip-negado .filtro-chip-op { color: #b02a37; }
.filtro-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: .25rem; color: #6c7a89; text-decoration: none;
}
.filtro-chip-x:hover { background: #e9edf2; color: #10243e; }
.filtro-limpar { font-size: .8rem; color: #6c7a89; }

/* Valor de tabela que vira filtro ({% filtravel %}) */
.filtravel { border-radius: .25rem; cursor: default; }
.filtravel.filtravel-ativo { outline: 1px dashed #9fb3c8; outline-offset: 2px; }
.filtravel-acoes {
    position: absolute; z-index: 1080; display: none; gap: .3rem;
    padding: .35rem 0 0; /* folga para o mouse descer sem fechar */
}
.filtravel-acoes.show { display: flex; }
.filtravel-acoes a {
    padding: .1rem .45rem; font-size: .72rem; font-weight: 500; line-height: 1.5;
    background: #fff; color: #0d6efd; border: 1px solid #9ec5fe; border-radius: .25rem;
    text-decoration: none; box-shadow: 0 2px 6px rgba(16, 36, 62, .12); white-space: nowrap;
}
.filtravel-acoes a:hover { background: #0d6efd; color: #fff; }
.filtravel-acoes a[data-role="excluir"] { color: #b02a37; border-color: #f1aeb5; }
.filtravel-acoes a[data-role="excluir"]:hover { background: #b02a37; color: #fff; }