@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

/* ===== Tokens de tema =====
   O JS do modo escuro (custom_js_callbacks.js) coloca data-bs-theme="dark" e
   data-mantine-color-scheme="dark" no <html>; as cores abaixo seguem esses atributos. */
:root{
    --altura-header: 11vh;
    --sids-bg: #eef2f7;
    --sids-card: #ffffff;
    --sids-card-rgb: 255, 255, 255;
    --sids-card-2: #f4f7fb;
    --sids-input: #ffffff;
    --sids-borda: #e1e7ef;
    --sids-texto: #1b2b4b;
    --sids-texto-2: #5b6577;
    --sids-azul: #1d6fe0;
    --sids-adm: linear-gradient(135deg, #1f56c3 0%, #123f94 100%);
    --sids-moldura-mapa: #10264d;
    --sids-sombra: 0 2px 10px rgba(16, 38, 74, 0.08);
}

html[data-bs-theme="dark"]{
    --sids-bg: #081429;
    --sids-card: #0f2347;
    --sids-card-rgb: 15, 35, 71;
    --sids-card-2: #142d58;
    --sids-input: #0b1c3b;
    --sids-borda: #1e3a68;
    --sids-texto: #e6edf7;
    --sids-texto-2: #9fb0cc;
    --sids-azul: #3b8cff;
    --sids-adm: linear-gradient(135deg, #2a66d9 0%, #1a4aa8 100%);
    --sids-moldura-mapa: #061024;
    --sids-sombra: 0 2px 12px rgba(0, 0, 0, 0.35);

    /* Bootstrap (modais, tabelas, dropdowns) no mesmo azul escuro */
    --bs-body-bg: var(--sids-bg);
    --bs-body-color: var(--sids-texto);
    --bs-secondary-bg: var(--sids-card-2);
    --bs-tertiary-bg: var(--sids-card);
    --bs-border-color: var(--sids-borda);
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: var(--sids-texto);
}

/* Mantine: a paleta "dark" (fundo de inputs, menus, etc.) vira azul escuro */
html[data-mantine-color-scheme="dark"]{
    --mantine-color-body: var(--sids-bg);
    --mantine-color-dark-4: #2a4a7d;
    --mantine-color-dark-5: #1e3a68;
    --mantine-color-dark-6: #0b1c3b;
    --mantine-color-dark-7: #0f2347;
    --mantine-color-dark-8: #0a1a37;
    --mantine-color-dark-9: #081429;
}

/* react-select (dcc.Dropdown) no modo escuro */
html[data-bs-theme="dark"] .Select-control{
    background-color: var(--sids-input) !important;
    border-color: var(--sids-borda) !important;
}

html[data-bs-theme="dark"] .Select-value-label,
html[data-bs-theme="dark"] .Select-input > input{
    color: var(--sids-texto) !important;
}

html[data-bs-theme="dark"] .Select-menu-outer{
    background-color: var(--sids-card) !important;
    border-color: var(--sids-borda) !important;
    color: var(--sids-texto) !important;
}

html[data-bs-theme="dark"] .VirtualizedSelectOption{
    background-color: var(--sids-card) !important;
    color: var(--sids-texto) !important;
}

html[data-bs-theme="dark"] .VirtualizedSelectFocusedOption{
    background-color: var(--sids-card-2) !important;
}



.dash-spreadsheet tr:hover td.dash-cell, 
.dash-spreadsheet tr:hover th.dash-header {
    background-color: #fafafa !important;    
    font-weight: bolder;
 }


#switch-modo-escuro{
    width: 40px;
    height: 20px;
}


.pagina-toda{
    width: 100vw;
    height: 100vh;

}

.leaflet-marker-icon{
    color: black !important;
}

#loading-spinner{
    background: #41414134 !important;
    backdrop-filter: blur(10px) !important;
    position: absolute;
    inset: 0;
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgb(46, 46, 46);
    font-size: 1.3rem;
}


#loading-administrativo{
    background: #41414134 !important;
    backdrop-filter: blur(3px) !important;
    position: absolute;
    z-index: 10000;
    text-shadow: 1px 1px 3px rgb(46, 46, 46);
    font-size: 1.3rem;
}

/* .texto-login-sids{
    text-align: center;
    font-size: clamp(1em,1.9vw,2em)
} */

.texto-login-header{
  font-size: clamp(1.30em, calc(1.05vw + 0.80vh), 1.8rem);
  margin-top: 6px;
  /* color: white; */
  /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.253); */
  font-weight: 500;
  /* color: var(--texto-claro); */
}

/* 
@media (max-width: 768px) {
    .div-login {
        width: 80vw;
    }
} */

.div-login-escura{
    /* background: linear-gradient(0deg,#3a3a3a,#3b3b3b) !important; */
    background-color: #373737e0 !important;

    box-shadow: 1px 1px 3px #1414148a !important;
}



.drop-dark .Select-control{
    width: 100% !important;
    background: var(--sids-input) !important;
}


.drop-dark .Select-menu-outer{
    background: var(--sids-card) !important;
    color: var(--sids-texto) !important;
}

.drop-dark .Select-value-label{
    color: var(--sids-texto) !important;
}


.fundo-escuro-padrao{
    background-color: #0f2347;
}

.bg-black{
    background: #252525 !important;
}

.bg-white{
    background: white;
}




.input_claro{
    background-color: #f1f1f1 !important;
    border: 1px solid rgba(63, 63, 63, 0.363) !important;
} 


.row-select-mun-img-itaipu{
    margin-top: 5px;
}

.img-itaipu-layout{
    border-radius: 2vw
}

.div-conteudo-principal-visao-municipio{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.conteudo-pagina-tabs{
    width: 100%;
}


#page-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: calc(100vh - var(--altura-header));
    /* padding-left: 1vw;
    padding-right: 1vw; */
}


.div-mapa-visao-municipio{
    width: 90vw;
}

.div-dados-visao-municipio{
    margin-left: 1vw;
    display: flex;
    flex-direction: column;
    row-gap: 1.5vh;
    width: 100%
}


#div-mun-drop-visao-municipio{
    margin-bottom: 5px;
}

#div-mun-drop-visao-consorcio{
    margin-bottom: 5px;
}

/* O JS do modo escuro troca entre essas duas classes; a cor vem dos tokens do tema */
.fundo-cinza,
.fundo-escuro{
    background-color: var(--sids-bg);
    height: 100vh;
}


.fundo-div-login{
    --login-card-largura: clamp(380px, 30vw, 530px);
    background-color: #0a2a5a;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    padding: 4vh 2vw;
    overflow-y: auto;
}

/* Imagem de fundo à direita do card, com transição azul saindo do card.
   --fundo-desloc-x: quanto a imagem entra por trás do card (move para a esquerda)
   --fundo-desloc-y: quanto a imagem desce a partir do topo (o espaço acima vira azul) */
.fundo-div-login::before{
    --fundo-desloc-x: 8vw;
    --fundo-desloc-y: 2vh;
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(2vw + var(--login-card-largura) - var(--fundo-desloc-x));
    background:
        linear-gradient(90deg,
            #0a2a5a var(--fundo-desloc-x),
            rgba(10, 42, 90, 0.7) calc(var(--fundo-desloc-x) + 6vw),
            rgba(10, 42, 90, 0.3) calc(var(--fundo-desloc-x) + 20vw),
            rgba(10, 42, 90, 0) calc(var(--fundo-desloc-x) + 36vw)),
        linear-gradient(180deg,
            #0a2a5a var(--fundo-desloc-y),
            rgba(10, 42, 90, 0.45) calc(var(--fundo-desloc-y) + 6vh),
            rgba(10, 42, 90, 0) calc(var(--fundo-desloc-y) + 30vh)),
        url("./novos_icones/fundo_nit_80perc.png") left top var(--fundo-desloc-y) / cover no-repeat;
    pointer-events: none;
}

.login-card{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: var(--login-card-largura);
    min-height: 100%;
    padding: clamp(28px, 4vh, 56px) clamp(28px, 2.6vw, 48px) clamp(20px, 3vh, 36px);
    border-radius: 14px;
    background-color: #f7f9fc;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    color: #1b2b4b;
}

.login-logos{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 32px);
    margin-bottom: 1vh;
}

.login-logo{
    height: clamp(40px, 5.5vh, 54px);
    width: auto;
    max-width: 42%;
    object-fit: contain;
}

/* O PNG da Itaipu tem bastante margem branca, então fica um pouco maior */
.login-logo-itaipu{
    height: clamp(52px, 7.5vh, 72px);
    mix-blend-mode: multiply;
}

.login-logos-divisor{
    width: 1px;
    align-self: stretch;
    background-color: #dbe1ea;
}

.login-titulo{
    font-size: clamp(1.4rem, 1.2vw + 0.8vh, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    color: #1b2b4b;
    margin: 0 0 8px 0;
}

/* Distribui o espaço livre do card entre o topo e o rodapé, como no layout de referência */
.login-textos{
    margin-top: auto;
}

.login-subtitulo{
    font-size: 1rem;
    color: #5b6577;
    margin: 0;
}

/* Cores fixas para o card continuar claro mesmo com o modo escuro do Mantine */
.login-input .mantine-InputWrapper-label,
.login-input label{
    font-weight: 600;
    color: #1b2b4b;
    margin-bottom: 6px;
}

.login-input input{
    height: 48px;
    background-color: #ffffff !important;
    color: #1b2b4b !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 6px;
}

.login-input .mantine-Input-section{
    color: #5b6577;
}

.login-botao{
    width: 100%;
    height: 56px;
    margin-top: 6px;
    font-size: 1.2rem;
    border-radius: 6px;
}

.login-botao-secundario{
    width: 100%;
    height: 48px;
    font-size: 1.05rem;
    border-radius: 6px;
    background-color: #ffffff;
}

.login-msg-erro:empty{
    display: none;
}

.login-links{
    display: flex;
    justify-content: center;
    gap: 24px;
}

.login-links a{
    color: #1f6fd1;
    text-decoration: underline;
}

.login-rodape{
    margin-top: auto;
    margin-bottom: 0;
    padding-top: clamp(16px, 3vh, 32px);
    border-top: 1px solid #dbe1ea;
}

/* Tela de solicitar acesso (reaproveita o card do login) */
.solicitar-campo label{
    font-weight: 600;
    color: #1b2b4b;
    margin-bottom: 6px;
}

.solicitar-campo .input-group-text{
    background-color: #ffffff !important;
    color: #5b6577 !important;
    border: 1px solid #d5dbe5 !important;
    border-right: none !important;
    padding-left: 14px;
}

.solicitar-campo .form-control{
    height: 48px;
    background-color: #ffffff !important;
    color: #1b2b4b !important;
    border: 1px solid #d5dbe5;
    border-left: none;
}

/* Mantém o feedback de validação do callback (valid/invalid) */
.solicitar-campo .form-control.is-invalid{
    border-color: #dc3545;
}

.solicitar-campo .form-control.is-valid{
    border-color: #198754;
}

.solicitar-campo .form-control::placeholder{
    color: #8a93a3;
}

.solicitar-campo .form-control:focus{
    box-shadow: none;
}

.solicitar-linha{
    display: flex;
    column-gap: 12px;
}

.solicitar-drop{
    position: relative;
}

.solicitar-drop-icone{
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    color: #5b6577;
    pointer-events: none;
}

/* !important para sobrepor o .drop-dark que o modo escuro aplica nesses dropdowns */
.solicitar-drop .Select-control{
    min-height: 48px;
    border: 1px solid #d5dbe5 !important;
    border-radius: 6px;
    background-color: #ffffff !important;
}

.solicitar-drop .Select-placeholder,
.solicitar-drop .Select--single > .Select-control .Select-value,
.solicitar-drop .Select-input{
    padding-left: 42px;
    line-height: 46px;
}

.solicitar-drop .Select-value-label{
    color: #1b2b4b !important;
}

.solicitar-drop .Select-multi-value-wrapper{
    padding-left: 38px;
}

.solicitar-drop .Select-menu-outer{
    background-color: #ffffff !important;
    color: #1b2b4b !important;
}

.solicitar-checkbox-todos{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    color: #1b2b4b;
}

.solicitar-botoes{
    margin-top: 6px;
}

.solicitar-botao-voltar,
.solicitar-botao-enviar{
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.solicitar-botao-voltar{
    width: 38%;
    background-color: #ffffff !important;
    color: #1b2b4b !important;
    border: 1px solid #1b3461 !important;
}

.solicitar-botao-enviar{
    width: 62%;
    background-color: #1b3461 !important;
    color: #ffffff !important;
    border: 1px solid #1b3461 !important;
}

.solicitar-botao-enviar:hover{
    background-color: #142849 !important;
}

@media (max-width: 900px) {
    .fundo-div-login{
        justify-content: center;
    }

    .fundo-div-login::before{
        left: 0;
        background-position: 0 0, 0 0, center;
    }

    .login-card{
        width: min(92vw, 480px);
    }
}




/* ===== Header ===== */
.header-sids{
    position: relative;
    z-index: 10;
    height: var(--altura-header);
    display: flex;
    align-items: center;
    gap: 3vw;
    padding: 0 1.6vw;
    background-color: var(--sids-card);
    box-shadow: var(--sids-sombra);
    overflow: hidden;
}

/* Foto à direita, com degradê saindo da cor do header */
.header-sids::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    background:
        linear-gradient(90deg,
            rgb(var(--sids-card-rgb)) 0%,
            rgba(var(--sids-card-rgb), 0.75) 22%,
            rgba(var(--sids-card-rgb), 0) 60%),
        url("./novos_icones/20151122AM9060.jpg") center 40% / cover no-repeat;
    pointer-events: none;
}

html[data-bs-theme="dark"] .header-sids::before{
    background:
        linear-gradient(90deg,
            rgb(var(--sids-card-rgb)) 0%,
            rgba(var(--sids-card-rgb), 0.75) 22%,
            rgba(var(--sids-card-rgb), 0.25) 60%),
        url("./novos_icones/20151122AM9060.jpg") center 40% / cover no-repeat;
}

.header-sids > *{
    position: relative;
}

.header-logos{
    display: flex;
    align-items: center;
    gap: 1.4vw;
    flex-shrink: 0;
}

.header-logo{
    height: clamp(34px, 5.6vh, 56px);
    width: auto;
}

.header-logo-itaipu{
    height: clamp(40px, 6.6vh, 66px);
}

.header-logos-divisor{
    width: 1px;
    height: 6vh;
    background-color: var(--sids-borda);
}

/* Logos brancas no modo escuro */
html[data-bs-theme="dark"] .header-logo{
    filter: brightness(0) invert(1);
}

.header-textos{
    flex: 1;
    min-width: 0;
}

.header-titulo{
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.75rem);
    font-weight: 700;
    color: var(--sids-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitulo{
    margin: 2px 0 0 0;
    font-size: clamp(0.78rem, 0.85vw, 1rem);
    color: var(--sids-texto-2);
}

.header-acoes{
    display: flex;
    align-items: center;
    gap: 1.2vw;
    flex-shrink: 0;
}

.header-avatar{
    box-shadow: var(--sids-sombra);
}

#logout-button{
    border-radius: 8px;
    height: 44px;
}


/* ===== Tela principal ===== */
.pagina-principal{
    display: flex;
    flex-direction: column;
    gap: 1.4vh;
    width: 100%;
    height: 100%;
    padding: 1.4vh 0.7vw;
}

.filtros-linha{
    display: flex;
    gap: 0.7vw;
    height: 11vh;
    flex-shrink: 0;
}

.filtro-card{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 1.2vh 0.9vw;
    background-color: var(--sids-card);
    border: 1px solid var(--sids-borda);
    border-radius: 10px;
    box-shadow: var(--sids-sombra);
}

.filtro-card-largo{
    flex-grow: 1.3;
}

.filtro-card-titulo{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: clamp(0.75rem, 0.78vw, 0.95rem);
    color: var(--sids-texto);
    white-space: nowrap;
    overflow: hidden;
}

.filtro-card-titulo span{
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtro-card-titulo svg{
    flex-shrink: 0;
    color: var(--sids-azul);
}

.filtro-card .Select-control,
.mapa-controles .Select-control{
    border-radius: 6px;
    border-color: var(--sids-borda);
    background-color: var(--sids-input);
}

.filtro-card .Select-value-label,
.mapa-controles .Select-value-label{
    color: var(--sids-texto) !important;
}

.filtro-card .Select,
.mapa-controles .Select{
    font-size: 0.9rem;
}

/* Espaço para o texto não encostar na seta */
.filtro-card .Select--single > .Select-control .Select-value{
    padding-right: 30px;
}

/* Área administrativa: card azul no fim da linha de filtros */
#div-btn-area-administrativa{
    display: flex;
    flex-shrink: 0;
}

#div-btn-area-administrativa:empty{
    display: none;
}

.card-area-adm{
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 1vw;
    border-radius: 10px;
    background: var(--sids-adm);
    color: #ffffff !important;
    font-weight: 600;
    font-size: clamp(0.8rem, 0.85vw, 1rem);
    line-height: 1.25;
    text-decoration: none;
    box-shadow: var(--sids-sombra);
}

.card-area-adm span{
    flex: 1;
}

.card-area-adm svg{
    flex-shrink: 0;
}

.card-area-adm:hover{
    filter: brightness(1.12);
}

.conteudo-linha{
    display: flex;
    gap: 0.7vw;
    flex: 1;
    min-height: 0;
}

.painel{
    display: flex;
    flex-direction: column;
    gap: 1.4vh;
    min-width: 0;
    min-height: 0;
    padding: 1.6vh 1vw;
    background-color: var(--sids-card);
    border: 1px solid var(--sids-borda);
    border-radius: 12px;
    box-shadow: var(--sids-sombra);
    color: var(--sids-texto);
}

.painel-mapa{
    flex: 1.08 1 0;
}

.painel-lista{
    flex: 1 1 0;
}

.painel-cabecalho{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
}

.painel-titulo{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.painel-titulo-icone{
    flex-shrink: 0;
    color: var(--sids-azul);
}

.painel-titulo h2{
    margin: 0;
    font-size: clamp(1rem, 1.05vw, 1.3rem);
    font-weight: 700;
    color: var(--sids-texto);
}

.painel-titulo p{
    margin: 2px 0 0 0;
    font-size: clamp(0.75rem, 0.75vw, 0.9rem);
    color: var(--sids-texto-2);
}

/* Mapa */
.mapa-controles{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.mapa-controles .dash-dropdown{
    width: 140px;
}

.mapa-container{
    position: relative;
    /* Cria um contexto de empilhamento próprio, para os panes do Leaflet (z-index 400+)
       não cobrirem os menus dos dropdowns da página */
    z-index: 0;
    isolation: isolate;
    flex: 1;
    min-height: 0;
    border: 4px solid var(--sids-moldura-mapa);
    border-radius: 10px;
    overflow: hidden;
}

#mapa-principal .leaflet-control-layers{
    display: none;
}

#mapa-principal .leaflet-bar{
    border: none;
    border-radius: 8px;
    box-shadow: var(--sids-sombra);
    overflow: hidden;
}

/* Fica branco também no modo escuro: os ícones da barra de desenho são sprites escuros */
#mapa-principal .leaflet-bar a{
    width: 36px;
    height: 36px;
    line-height: 36px;
    background-color: #ffffff;
    color: #1b2b4b;
    border-bottom-color: #e1e7ef;
}

#mapa-principal .leaflet-control-scale-line{
    background-color: rgba(255, 255, 255, 0.85);
    border-color: #4a5568;
    color: #1b2b4b;
}

/* Painel de camadas sobre o mapa */
.painel-camadas{
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
    width: clamp(240px, 32%, 300px);
    display: flex;
    flex-direction: column;
    background-color: var(--sids-card);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    color: var(--sids-texto);
    overflow: hidden;
}

.painel-camadas.oculto{
    display: none;
}

.painel-camadas-abas{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.painel-camadas-abas .mantine-Tabs-panel{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px;
}

.painel-camadas-abas .mantine-Tabs-tab{
    font-weight: 600;
    padding: 12px 8px;
}

.camada-linha{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.85rem;
}

.camada-linha span{
    flex: 1;
}

.painel-camadas-secao{
    margin: 12px 0 8px 0;
    padding-top: 12px;
    border-top: 1px solid var(--sids-borda);
    font-weight: 700;
    font-size: 0.9rem;
}

.simbologia-grupo summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--sids-borda);
    border-radius: 6px;
    background-color: var(--sids-card-2);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
}

.simbologia-grupo summary::-webkit-details-marker{
    display: none;
}

.simbologia-grupo summary::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}

.simbologia-grupo[open] summary::after{
    transform: rotate(225deg);
    margin-top: 4px;
}

.legenda-subtitulo{
    margin: 10px 0 2px 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sids-texto-2);
}

.legenda-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 2px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.legenda-simbolo{
    width: 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.legenda-simbolo img{
    max-width: 24px;
    max-height: 24px;
}

.legenda-linha{
    display: block;
    width: 24px;
    border-top: 4px solid;
    border-radius: 2px;
}

.legenda-poligono{
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.legenda-vazia{
    padding: 10px 2px;
    font-size: 0.82rem;
    color: var(--sids-texto-2);
}

.info-camadas-linha{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sids-borda);
    font-size: 0.85rem;
    word-break: break-word;
}

.info-camadas-rotulo{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sids-texto-2);
}

/* Lista de atividades */
.total-registros{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    background-color: var(--sids-card-2);
    color: var(--sids-azul);
}

.total-registros span{
    display: block;
    font-size: 0.72rem;
    color: var(--sids-texto-2);
}

.total-registros strong{
    display: block;
    font-size: 1.15rem;
    color: var(--sids-texto);
}

.lista-controles{
    display: flex;
    align-items: center;
    gap: 10px;
}

.lista-pesquisa{
    flex: 1;
    min-width: 0;
}

.lista-caixa-dropdown:empty{
    display: none;
}

.lista-caixa-dropdown{
    width: 30%;
}

.lista-caixa-dropdown h6{
    margin: 0 0 2px 0;
    font-size: 0.75rem;
}

.lista-exportar > .btn{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    background-color: var(--sids-card);
    color: var(--sids-texto);
    border: 1px solid var(--sids-borda);
    font-weight: 600;
}

.lista-exportar > .btn:hover,
.lista-exportar > .btn.show{
    background-color: var(--sids-card-2);
    color: var(--sids-texto);
    border-color: var(--sids-borda);
}

/* Abas Pontos / Linhas / Polígonos */
.segmentado{
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background-color: var(--sids-card-2);
}

.segmentado .form-check{
    margin: 0;
    padding: 0;
}

.segmentado-opcao{
    display: block;
    padding: 6px 18px;
    border-radius: 6px;
    color: var(--sids-texto);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.segmentado-opcao.ativo{
    background-color: var(--sids-azul);
    color: #ffffff;
    text-decoration: none;
}

.tabela-wrapper{
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
}

/* Enquanto carrega, o callback coloca um spinner no lugar da tabela */
.tabela-wrapper > .spinner-border{
    margin: 4vh auto 1vh auto;
    display: block;
}

.tabela-wrapper > h5{
    text-align: center;
}

.tabela-sids{
    --bs-table-bg: var(--sids-card);
    --bs-table-color: var(--sids-texto);
    --bs-table-hover-bg: var(--sids-card-2);
    --bs-table-hover-color: var(--sids-texto);
    --bs-table-border-color: var(--sids-borda);
    width: 100%;
    margin: 0;
    font-size: 0.84rem;
}

.tabela-sids thead th{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--sids-card-2);
    color: var(--sids-texto);
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.tabela-sids td{
    vertical-align: middle;
    padding: 9px 10px;
}

.th-ordenar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.th-ordenar svg{
    flex-shrink: 0;
    opacity: 0.45;
}

.th-ordenar.ativo svg{
    opacity: 1;
    color: var(--sids-azul);
}

.badge-situacao{
    display: inline-block;
    min-width: 96px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.badge-verde{ background-color: #d8f3de; color: #1e7a35; }
.badge-azul{ background-color: #d4e7ff; color: #1559b8; }
.badge-marinho{ background-color: #dbe3f4; color: #1b3461; }
.badge-amarelo{ background-color: #fff0c7; color: #8a5a00; }
.badge-vermelho{ background-color: #fde0e0; color: #b42318; }
.badge-cinza{ background-color: #e8edf3; color: #4a5568; }

html[data-bs-theme="dark"] .badge-verde{ background-color: rgba(52, 199, 89, 0.18); color: #7ee29b; }
html[data-bs-theme="dark"] .badge-azul{ background-color: rgba(59, 140, 255, 0.2); color: #8fbcff; }
html[data-bs-theme="dark"] .badge-marinho{ background-color: rgba(143, 168, 214, 0.18); color: #c3d2ee; }
html[data-bs-theme="dark"] .badge-amarelo{ background-color: rgba(255, 196, 0, 0.18); color: #ffd666; }
html[data-bs-theme="dark"] .badge-vermelho{ background-color: rgba(255, 82, 82, 0.18); color: #ff9b9b; }
html[data-bs-theme="dark"] .badge-cinza{ background-color: rgba(160, 174, 192, 0.16); color: #c5cfdc; }

.btn-acao-tabela{
    display: inline-flex;
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sids-texto);
}

.btn-acao-tabela:hover{
    background-color: var(--sids-borda);
}

.paginacao-linha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.paginacao-texto{
    font-size: 0.85rem;
    color: var(--sids-texto-2);
}

/* O Mantine define tamanho e quebra de linha por estilo inline, por isso o !important */
.paginacao-linha .mantine-Pagination-root{
    --pagination-control-size: 32px !important;
}

.paginacao-linha .mantine-Pagination-root > .mantine-Group-root{
    --group-gap: 6px !important;
    --group-wrap: nowrap !important;
}

#drop-por-pagina{
    font-size: 0.85rem;
}

/* Telas menores (ex.: 1366px): paginação compacta para caber em uma linha */
@media (max-width: 1500px){
    .paginacao-linha .mantine-Pagination-root{
        --pagination-control-size: 26px !important;
    }

    .paginacao-linha .mantine-Pagination-root > .mantine-Group-root{
        --group-gap: 3px !important;
    }

    .paginacao-linha .mantine-Pagination-control{
        font-size: 0.8rem;
    }

    .paginacao-texto{
        font-size: 0.78rem;
    }
}



.div-flex-row{
    display: flex;
    flex-direction: row;


}

.div-flex-col{
    display: flex;
    flex-direction: column;
}

.texto-branco{
    color: white;
    text-shadow: 1px 1px 3px #00000080;
    
}

.texto-escuro{
    color: var(--bs-heading-color)
}


.body-escuro{
    color: white !important;
    background-color: #0f2347 !important;
}


.body-escuro-header{
    color: #000000 !important;
    background-color: #0f2347 !important;
    border: none;
}


/* 
#div-legenda ::-webkit-scrollbar,
#div-tabela ::-webkit-scrollbar{
    width: 10px;    
} */

/* Track */
/* #div-legenda ::-webkit-scrollbar-track,
#div-tabela ::-webkit-scrollbar{
    background: #cacaca; 
} */

/* Handle */
/* #div-legenda ::-webkit-scrollbar-thumb,
#div-tabela ::-webkit-scrollbar{
    background: #8d8d8d; 
    border: 1px solid rgba(56, 56, 56, 0.719);
} */

/* Handle on hover */
/* #div-legenda ::-webkit-scrollbar-thumb:hover,
#div-tabela ::-webkit-scrollbar {
    background: #505050; 
    border: 1px solid black;
} */

/* 

::-webkit-scrollbar{
    width: 10px;    
}

::-webkit-scrollbar-track{
    background: #cacaca; 
}

::-webkit-scrollbar-thumb{
    background: #8d8d8d; 
    border: 1px solid rgba(56, 56, 56, 0.719);
}

::-webkit-scrollbar-thumb:hover {
    background: #505050; 
    border: 1px solid black;
} */

.tb-col{
    text-align: "left";
}

.tb-row:hover{
    font-weight: 800;
    cursor: pointer;
}

.card-top-adm{
    /* border: 1px solid rgba(71, 71, 71, 0.822); */
    width: 22vw;
    max-height: 7vh;
    min-height: 6vh;
    background-color:#008cff;
    border-radius:2px;
    display: flex;
    flex-direction: row;
    color: rgb(255, 255, 255);
    padding: 10px;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.411);
    column-gap: 10px;
}

.card-top-adm:hover{
    background-color:#3ecbf7;
    cursor: pointer;
    color: rgb(0, 0, 0);
    /* box-shadow: 0 0 5px 2px rgba(53, 53, 53, 0.267); */
}



#input-nome-solicitar input:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    outline: none;
  }


#checklist-instrumentos .form-check{
    width: auto;
}

#data-validade-acesso .SingleDatePicker_picker {
    bottom: auto !important;
    top: -34vh !important;
    left: 0 !important;
    box-shadow: 0 0 22px #49494980 !important;
}











#page-content > div{
    padding-top: 10px;
}


/* Style para overflow caso selecione todos os municipios da pagina de solicitar */
/* .Select.has-value.is-searchable.Select--multi {
    max-height: 40vh;
    overflow-y: auto;
    z-index: 999999999999;
} */

#drop-municipio-solicitar .Select-multi-value-wrapper,
#drop-cidade-gerenciamento-usuario .Select-multi-value-wrapper {
    overflow-y: auto;
    max-height: 15vh;
    width: 100%;
    padding-right: 10px;
    padding-top: 10px;
    min-height: 5vh;
}

html, body, #fundo-pagina {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita barras de rolagem desnecessárias */
    margin: 0;
    padding: 0;
}

.modal {
    --bs-modal-zindex: 10055
}

.modal-backdrop {
    --bs-backdrop-zindex: 10050
}



.m0{
    margin-bottom: 0 !important;
}


/* ===== Área administrativa ===== */
:root{
    --largura-sidebar-adm: clamp(150px, 9.5vw, 190px);
    --sids-sidebar: #0b1f3f;
    --sids-sidebar-ativo: #1d6fe0;
}

html[data-bs-theme="dark"]{
    --sids-sidebar: #061024;
    --sids-sidebar-ativo: #2a66d9;
}

/* O header fica à direita da sidebar, que ocupa a altura toda da tela */
#fundo-pagina:has(.adm-pagina) .header-sids{
    margin-left: var(--largura-sidebar-adm);
}

#page-content > .adm-pagina{
    padding-top: 0;
}

.adm-pagina{
    display: flex;
    width: 100%;
    height: 100%;
}

.adm-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: var(--largura-sidebar-adm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px;
    background-color: var(--sids-sidebar);
    overflow-y: auto;
}

.adm-sidebar-topo{
    height: var(--altura-header);
    flex-shrink: 0;
    margin: 0 -6px 14px -6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adm-sidebar-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}

.adm-sidebar-item svg{
    flex-shrink: 0;
    opacity: 0.9;
}

.adm-sidebar-item:hover{
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.adm-sidebar-item.ativo{
    background-color: var(--sids-sidebar-ativo);
}

.adm-sidebar-aviso{
    position: absolute;
    top: 12px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #9cc8ff;
    box-shadow: 0 0 0 2px var(--sids-sidebar-ativo);
}

.adm-main{
    flex: 1;
    min-width: 0;
    height: 100%;
    margin-left: var(--largura-sidebar-adm);
    padding: 1.6vh 1.2vw 2vh 1.2vw;
    overflow-y: auto;
}

.adm-conteudo{
    display: flex;
    flex-direction: column;
    gap: 1.6vh;
    color: var(--sids-texto);
}

.adm-card{
    padding: 18px 20px;
    background-color: var(--sids-card);
    border: 1px solid var(--sids-borda);
    border-radius: 12px;
    box-shadow: var(--sids-sombra);
}

.adm-sem-acesso{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 20vh;
    color: var(--sids-texto);
}

/* Cabeçalho da página com as estatísticas */
.adm-cabecalho{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    flex-wrap: wrap;
}

.adm-cabecalho-titulo{
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.adm-cabecalho-icone{
    flex-shrink: 0;
    color: var(--sids-azul);
}

.adm-cabecalho-titulo h2{
    margin: 0;
    font-size: clamp(1.25rem, 1.5vw, 1.7rem);
    font-weight: 700;
    color: var(--sids-texto);
}

.adm-cabecalho-titulo p{
    margin: 4px 0 0 0;
    font-size: clamp(0.82rem, 0.85vw, 1rem);
    color: var(--sids-texto-2);
}

.adm-estatisticas{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.adm-estatisticas:empty{
    display: none;
}

.adm-estatistica{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 170px;
    padding: 10px 16px;
    border: 1px solid var(--sids-borda);
    border-radius: 10px;
    background-color: var(--sids-card);
}

.adm-estatistica-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
}

.adm-estatistica-valor{
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sids-texto);
}

.adm-estatistica span{
    font-size: 0.8rem;
    color: var(--sids-texto-2);
}

.adm-cor-azul{ background-color: #e3eeff; color: #1d6fe0; }
.adm-cor-amarelo{ background-color: #fff3d6; color: #e0a100; }
.adm-cor-verde{ background-color: #dcf5e3; color: #22a447; }
.adm-cor-vermelho{ background-color: #fde4e4; color: #e5383b; }
.adm-valor-vermelho{ color: #d92d20; }

html[data-bs-theme="dark"] .adm-cor-azul{ background-color: rgba(59, 140, 255, 0.18); }
html[data-bs-theme="dark"] .adm-cor-amarelo{ background-color: rgba(255, 196, 0, 0.16); }
html[data-bs-theme="dark"] .adm-cor-verde{ background-color: rgba(52, 199, 89, 0.16); }
html[data-bs-theme="dark"] .adm-cor-vermelho{ background-color: rgba(255, 82, 82, 0.16); }
html[data-bs-theme="dark"] .adm-valor-vermelho{ color: #ff8a8a; }

/* Linha de filtros */
.adm-filtros{
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.adm-pesquisa{
    flex: 1 1 280px;
    min-width: 220px;
}

.adm-filtro{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adm-filtro label{
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sids-texto);
}

.adm-filtros .mantine-Input-input{
    min-height: 40px;
}

.adm-btn-limpar,
.adm-btn-principal{
    height: 42px;
    margin-left: auto;
}

.adm-btn-limpar{
    color: var(--sids-texto);
}

.adm-btn-principal{
    padding: 0 22px;
    font-size: 0.95rem;
}

/* Tabela */
.adm-card-tabela{
    padding: 0;
    overflow: hidden;
}

.adm-tabela-wrapper{
    overflow-x: auto;
}

.tabela-adm{
    font-size: 0.9rem;
}

.tabela-adm thead th{
    padding: 14px 16px;
}

.tabela-adm td{
    padding: 10px 16px;
}

.tabela-adm thead th,
.tabela-adm td{
    border-right: 1px solid var(--sids-borda);
}

.tabela-adm thead th:last-child,
.tabela-adm td:last-child{
    border-right: none;
}

.tabela-adm .th-ordenar{
    justify-content: flex-start;
}

.adm-tabela-vazia{
    padding: 4vh 0 !important;
    text-align: center;
    color: var(--sids-texto-2);
}

.adm-texto-2-linhas{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 320px;
}

.adm-pill{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background-color: var(--sids-card-2);
    border: 1px solid var(--sids-borda);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sids-texto-2);
}

.adm-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.adm-badge-ponto{
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: currentColor;
}

.badge-amarelo .adm-badge-ponto{ background-color: #f0a500; }
.badge-verde .adm-badge-ponto{ background-color: #22a447; }
.badge-vermelho .adm-badge-ponto{ background-color: #e5383b; }

.badge-roxo{ background-color: #efe5fd; color: #6b3fbf; }
html[data-bs-theme="dark"] .badge-roxo{ background-color: rgba(167, 120, 255, 0.18); color: #c9aaff; }

.adm-acoes{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.adm-paginacao{
    padding: 14px 18px;
    border-top: 1px solid var(--sids-borda);
}

.adm-paginacao-controles{
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Abas Medições / Contratos */
.adm-abas .mantine-Tabs-list{
    margin-bottom: 1.6vh;
}

.adm-abas .mantine-Tabs-tab{
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sids-texto);
}

.adm-abas .mantine-Tabs-tab[data-active]{
    color: var(--sids-azul);
    font-weight: 600;
}

.adm-aba-conteudo{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.adm-aba-conteudo .adm-tabela-wrapper{
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
}

.adm-aba-conteudo .adm-paginacao{
    padding: 0;
    border-top: none;
}

/* ===== Índices de Riscos (página pública /riscos) ===== */
.riscos-pagina{
    width: 100%;
    height: calc(100vh - var(--altura-header));
    overflow-y: auto;
    padding: 1.6vh 1.2vw 2vh 1.2vw;
}

/* Ícone e texto da aba juntos, centralizados no espaço da aba */
.riscos-abas .mantine-Tabs-tab{
    justify-content: center;
}

.riscos-abas .mantine-Tabs-tabLabel{
    flex: none;
}

.riscos-abas .mantine-Tabs-tab[data-active]{
    color: var(--riscos-cor);
}

.riscos-drop{
    width: clamp(220px, 17vw, 330px);
}

/* --riscos-cor: cor do setor selecionado, definida pelo callback */
.riscos-painel{
    --riscos-cor: var(--sids-azul);
    padding: 20px 24px;
    border: 1px solid var(--sids-borda);
    border-radius: 12px;
    color: var(--sids-texto);
}

.riscos-setor-cabecalho{
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sids-borda);
}

.riscos-setor-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--riscos-cor);
    color: #ffffff;
}

.riscos-titulo-linha{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.riscos-info{
    display: inline-flex;
    flex-shrink: 0;
    color: var(--riscos-cor);
    cursor: pointer;
}

.riscos-info:hover{
    opacity: 0.75;
}

/* Janela com o texto do ícone de informação */
.riscos-modal-titulo{
    font-size: 1.3rem;
    font-weight: 600;
}

.riscos-modal-texto{
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 8px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.riscos-modal-texto p{
    margin-bottom: 1em;
}

.riscos-modal-texto p:last-child{
    margin-bottom: 0;
}

.riscos-setor-titulo{
    font-size: 1.35rem;
}

.riscos-risco-titulo{
    font-size: 1.2rem;
}

.riscos-descricao{
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: var(--sids-texto-2);
}

.riscos-sub-abas{
    margin-bottom: 20px;
}

.riscos-sub-abas .segmentado-opcao.ativo{
    background-color: var(--riscos-cor);
}

.riscos-risco-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2vw;
    flex-wrap: wrap;
}

.riscos-pontuacao{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--sids-texto-2);
}

.riscos-pontuacao strong{
    font-size: 1.5rem;
    color: var(--sids-texto);
}

.riscos-subtitulo{
    margin: 24px 0 16px 0;
    font-weight: 600;
    color: var(--sids-texto);
}

.riscos-composicao{
    display: flex;
    align-items: flex-start;
    gap: 1.6vw;
    flex-wrap: wrap;
}

.riscos-indicadores{
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6vw;
    min-width: 0;
}

.riscos-bloco-indicador{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.riscos-anel-label{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: var(--sids-texto);
}

.riscos-anel-label strong{
    font-size: 1.4rem;
    font-weight: 800;
}

.riscos-anel-label span{
    max-width: 160px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sids-texto-2);
}

.riscos-card-indicador{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
    background-color: var(--sids-card);
}

.riscos-card-rotulo{
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--sids-texto-2);
}

.riscos-card-titulo{
    font-size: 1rem;
}

.riscos-card-valor{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
}

.riscos-badge{
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #ffffff;
}

.riscos-classe-texto{
    display: block;
    margin-top: 10px;
    font-weight: 500;
}

.riscos-detalhamento{
    flex: 0 0 clamp(300px, 24vw, 460px);
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
    background-color: var(--sids-card-2);
}

.riscos-detalhamento summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
}

.riscos-detalhamento summary::-webkit-details-marker{
    display: none;
}

.riscos-chevron{
    color: var(--riscos-cor);
    transition: transform 0.2s;
}

.riscos-detalhamento:not([open]) .riscos-chevron{
    transform: rotate(180deg);
}

.riscos-detalhamento > div{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px 16px;
}

.riscos-detalhe-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sids-borda);
    border-radius: 8px;
    background-color: var(--sids-card);
}

.riscos-detalhe-item .riscos-anel-label strong{
    font-size: 1rem;
}

.riscos-vazio{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6vh 0;
    color: var(--sids-texto-2);
}