html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    min-height: 100%;
}
:root {
    --bg: #8a779d87;
    --dre-border: #E2DDEE; /* cor padrão das linhas */
    --dre-border-strong: #4A3B6A; /* cabeçalho/linhas roxas */
}

body {
    margin-bottom: 60px;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'>\
  <path d='M8 27 H46 M27 8 V46' stroke='rgba(255,255,255,0.08)' stroke-width='1'/>\
  <circle cx='8' cy='27' r='1.6' fill='rgba(255,255,255,0.18)'/>\
  <circle cx='46' cy='27' r='1.6' fill='rgba(255,255,255,0.18)'/>\
  <circle cx='27' cy='8' r='1.2' fill='rgba(255,255,255,0.18)'/>\
  <circle cx='27' cy='46' r='1.2' fill='rgba(255,255,255,0.18)'/>\
</svg>");
    background-size: 54px 54px;
    
    background-repeat: repeat;
    overflow: auto;
    position: relative;
    padding-top: 120px; /* altura da navbar fixa */
    padding-bottom: 40px; /* altura do footer fixo */
}
.trail {
    border-radius: 50%;
    pointer-events: none;
    animation: trailFade 0.8s ease-out forwards;
    background: radial-gradient(circle, rgba(172,132,164,0.95) 0%, rgba(172,132,164,0.25) 40%, rgba(172,132,164,0) 70%);
    box-shadow: 0 0 12px rgba(172,132,164,0.7), 0 0 24px rgba(172,132,164,0.35);
}

@keyframes trailFade {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2);
    }
}

.img-frame {
    width: 128px; /* Largura fixa */
    height: 128px; /* Altura fixa */
    object-fit: cover; /* A imagem se ajusta ao frame */
    border-radius: 50%; /* Transformação em círculo */
    overflow: hidden; /* Esconde partes da imagem que excedem o frame */
    border: 4px solid #ddd; /* Borda suave ao redor da imagem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
    transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out; /* Efeitos de transição suave */
}

    .img-frame:hover {
        transform: scale(1.50); /* Leve ampliação ao passar o mouse */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
    }

.img-icon {
    height: 32px;
    width: 32px;
    margin: 0px;
    cursor: pointer;
}

.img-frame1 {
    max-width: 200px; /* Largura fixa */
    max-height: 200px; /* Altura fixa */
    object-fit: cover; /* A imagem se ajusta ao frame */
    border-radius: 200px; /* Cantos arredondados */
    overflow: hidden; /* Esconde partes da imagem que excedem o frame */
}

.img-frame1:hover {
    transform: scale(1.10); /* Leve ampliação ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
}

.center-content {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

footer {
    background-color: #491347; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 20px 0; /* Espaçamento interno superior e inferior */
    font-family: Arial, sans-serif; /* Fonte padrão */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Sombra para destacar o footer */
}

    footer spam {
        display: block; /* Garante que o texto ocupe toda a largura */
        font-size: 14px; /* Tamanho da fonte */
    }

    footer a {
        color: white; /* Cor dos links */
        text-decoration: none; /* Remove sublinhado */
    }

        footer a:hover {
            text-decoration: underline; /* Sublinha ao passar o mouse */
        }

.calendar {
    width: 100%;
    border-collapse: collapse;
    margin: 0px 0;
    table-layout: fixed;
   
   
}

    /* Estilo das células e do cabeçalho */
    .calendar th, .calendar td {
        width: 14.28%; /* Divide igualmente em 7 colunas */
        height: 100px; /* Altura fixa para cada célula */
        vertical-align: top;
        text-align: right;
        font-size: medium;
        position: relative;
       
    }

    .calendar th {
        background-color: #FFD700;
        color: #4A3B6A;
        font-weight: 300;
        text-transform: uppercase;
        font-size: small;
        height: 5px;
        padding: 15px;
       
    }

/* Contêiner interno com rolagem */
.cell-content {
    height: 90px;
    overflow-y: auto; /* Adiciona rolagem vertical */
    padding: 5px; /* Ajusta o padding interno */
    box-sizing: border-box;
    font-size: x-small;
    background-color: #fff;
    
}

/* Estilo para o número do dia */
.day-container {
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    font-size: medium;
    background-color: #9681AA;
}

    .day-container .day-number:hover {
        background-color: #491347;
        color: #007bff;
        border-radius: 50%;
        padding: 5px;
        font-size: medium;
        background-color: #9681AA;
    }

/* Destaca o dia atual */
.calendar td.bg-primary .day-container .day-number {
    background-color: #FFD700;
    color: #FFD700;
    font-size: medium;
}

/* Estilo para os dias fora do mês atual */
.calendar td.text-muted .day-number {
    color: #ccc;
    background-color: #fff;
    font-size: medium;
}

.dropdown-sub-menu:hover .dropdown-menu {
    display: block;
    right: 100%;
    top: 5%;
}

.card-header {
    font-size: small;
    background-color: #9681AA;
    color:#491347;
    font-weight:600;
}
.card {
    background-color: #9681AA;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); /* Leve sombra para destacar no hover */
    transition: transform 0.3s ease;
    transform-origin: center center; /* garante que o scale parte do centro */
    cursor: pointer;
    font-size: medium;
    max-height:350px;
}
.card-body {
    font-size: large;
    color:#4A3B6A;
}
.card:hover {
    transform: scale(1.03);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /* Leve sombra para destacar no hover */
}
.card-config {
    position: relative; /* referência para o absolute */
    border-radius: 18px;
    background-color: rgba(0, 0, 0, 0.08);
    height: 250px;
    width: 100%;
    max-height: 340px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); /* Leve sombra para destacar no hover */
}
.card-config-header {
    font-size:x-small;
    padding:15px;
    color: #491347; 
}
.card-config-body {
    font-size: small;
    color: #4A3B6A;}

.navbar {
    background-color: #1E1E2F; /* Roxo HCXpert */
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.5);
    font-family: 'Segoe UI', sans-serif;
}

/* Links do menu */
.navbar-nav .nav-link {
    color: #FFFFFF !important;
    font-weight: 6;
    margin-right: 1rem;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #FFA500 !important; /* Laranja HCXpert */
}

/* Brand da empresa */
.navbar-brand {
    color: #FFFFFF !important;
    font-weight: normal;
    font-size: 1.5rem;
}

/* Botão de logout, se houver */
.navbar .btn-logout {
    background-color: #FFA500;
    color: #fff;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-weight: 6;
    transition: background-color 0.3s ease;
}

.navbar .btn-logout:hover {
    background-color: #e07c00;
}

/* Responsividade - colapsado */
@media (max-width: 768px) {
    .navbar {
        border-radius: 0;
        padding: 1rem;
    }

    .navbar-nav .nav-link {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

.logout-icon {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    max-height: 120px;
    margin:10px;
}

.logout-icon:hover {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Estilo do dropdown */
.dropdown-menu {
    background-color: #9681AA; /* Cor de fundo do dropdown */
    border-radius: 5px; /* Bordas arredondadas */
    padding: 0;
    border: none; /* Remove bordas padrão */
}

/* Estilo de hover no dropdown */
.dropdown-menu .dropdown-item {
    color: #fff; /* Cor padrão do texto nos itens do dropdown */
    padding: 10px 20px; /* Melhor espaçamento nos itens */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animação suave */
    background-color: #9681AA; /* Cor de fundo do dropdown */
}

 /* Efeito de hover no dropdown */
 .dropdown-menu .dropdown-item:hover {
    background-color: #6f5499; /* Cor de fundo mais escura no hover */
    color: #ffffff; /* Texto sempre branco no hover */
 }

/* Ajuste do link de configuração com ícone */
.nav-link img {
    transition: transform 0.9s ease; /* Animação ao passar o mouse no ícone */
}

.nav-link:hover img {
    transform: rotate(360deg); /* Gira o ícone no hover */
}

/* Estilo para as linhas da tabela */
.clickable-row {
    cursor: pointer; /* Mostra o ponteiro ao passar sobre a linha */
    transition: background-color 0.2s ease-in-out;
}

.clickable-row:hover {
    background-color: #e4d4e4; /* Cor de fundo ao passar o mouse */
}

/* Estilo para o link invisível */
.clickable-link {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none; /* Remove o sublinhado */
    color: inherit; /* Mantém a cor do texto da linha */
}

.clickable-link:hover, .clickable-link:focus, .clickable-link:active {
    text-decoration: none; /* Garante que o sublinhado não apareça */
    color: inherit; /* Evita mudança de cor */
}

#contasReceberChart {
    width: 100% !important;
    height: 300px !important;
}

.no-underline {
    text-decoration: none !important;
    color: inherit; /* Para manter a cor padrão do texto */
}

.floating-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2); /* Começa grande e centralizada */
    opacity: 0; /* começa invisível */
    z-index: 1000;
    transition: all 1s ease-in-out;
    pointer-events: auto;
   
}

    .floating-logo.ativo {
        top: -16px; /* posição final no topo */
        left: 50%;
        transform: translateX(-50%) scale(1); /* volta ao tamanho normal */
        opacity: 1; /* visível */
      
    }

.floating-logo img {

    height: 120px;   
    border-radius: 10px;
    box-shadow: 0 15px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
   
    
}

.floating-logo:hover {
    transform: translateX(-50%) scale(1.1); /* ❗ mantém o Y original */
    filter: brightness(1.2) saturate(1.4) drop-shadow(0 4px 10px rgba(255, 165, 0, 0.6));
}

.nav-tabs {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
    border: 0px solid #491347;
    background-color: #8a779d87;
}

.nav-tabs .nav-link {
    color: #FFD700;
    border: unset;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
   color: #491347;
   border:unset;

  
}

.nav-tabs .nav-link.active {
   color: #fff;
   background-color: rgba(0, 0, 0, 0.2);
   border-color: #8a779d87;
   box-shadow: #fff;
   opacity: 3;
}

.tab-content {
    background-color: #8a779d87;
    border: 0px solid #491347;
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
    margin-top: 22px;

    opacity: 1;
}

.dropdown-menu {
    top: 10px;
    top: 100%; /* abre à direita do menu pai */
    margin-left: .1rem;
    margin-right: .1rem;
    color: #fff;
    background-color: #491347;
}

#confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
    transition: opacity .6s ease;
}

#confetti-canvas.fade-out {
    opacity: 0;
}

#confetti-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4rem;
    font-weight: 800;
    z-index: 2001;
    opacity: 1;
    transition: opacity .6s ease;
    background: linear-gradient(90deg,#ff00ff,#00ffff,#ffff00,#ff00ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 20px rgba(255,0,255,.6), 0 0 40px rgba(0,255,255,.6);
    animation: gradientShift 3s ease infinite, neonPulse 1.5s ease-in-out infinite;
}

#confetti-message.fade-out {
     opacity: 0;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes neonPulse {
    0%,100% {
        text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 20px rgba(255,0,255,.6), 0 0 40px rgba(0,255,255,.6)
    }

    50% {
        text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px rgba(255,0,255,.8), 0 0 60px rgba(0,255,255,.8)
    }
}

@media (max-width: 576px) {
    #fx-ticker .badge {
        padding: .35rem .6rem;
    }

    #fx-ticker .container {
        gap: .5rem;
       
    }
}

.cotacoes {
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFD700;
    margin: 15px;
    border-radius: 10px; /* cantos arredondados */
    padding:20px;
}

.cot {
    color: white;
}
.doleta {
    color: #4A3B6A;
}

.chart-container {
    position: relative;
    height: 260px; /* altura fixa */
    width: 100%;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.08); /* fundo branco para contraste */
    border-radius: 12px; /* cantos arredondados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* sombra suave */
    padding: 16px;
    box-sizing: border-box;
}
    
.chart-container canvas {
    height: 100% !important;
    width: 100% !important;
}
.card-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
}
.card-image img {
    width: 100%;
    height: 100%; /* mantém proporção original */
    display: block;
}
.container1 {
    background-color: white;
    border-radius: 12px; /* cantos arredondados */
    padding: 30px;
    box-shadow: 10px 10px 22px rgba(0,0,0,0.3); /* sombra suave */
}

/* Estilo geral da tabela */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; /* Para arredondar bordas mesmo com tbody */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    margin-top: 10px
}

/* Cabeçalho */
thead {
    background-color: #9681AA;
    color: #FFD166;
    text-align: left;
   
}

    thead th {
        padding: 12px 15px;
        font-weight: bold;
        font-size: small;
    }

/* Linhas */
tbody tr {
    border-bottom: 1px solid #ddd;
}

    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tbody tr:hover {
        background-color: #f1f1f1;
    }

/* Células */
td {
    padding: 10px 15px;
    color: #333;
}

/* Responsividade */
@media (max-width: 768px) {
    table {
        border: 0;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
    }

    tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
    }

        tbody td:last-child {
            border-bottom: none;
        }

        tbody td::before {
            content: attr(data-label);
            font-weight: bold;
            color: #555;
        }
}

/*ACORDION===================================================================================================================================================*/
.accordion .accordion-button,
.accordion .accordion-header {
    background-color: #FFD700 !important;
    color: #000; /* opcional para contraste */
    box-shadow: none !important; /* remove sombra padrão do Bootstrap */
}

.accordion .accordion-button:not(.collapsed) {
    background-color: #FFD700 !important;
    color: #000 !important;
}
.accordion .accordion-header:hover {
    background-color: #FFD700 !important;
}

.accordion .accordion-body {
    background-color: #FFD700 !important;
}
.accordion-collapse {
    max-height: 0;
    overflow: hidden;
    background-color: #FFD700; /* aqui troca de cinza para amarelo */
    transition: max-height 0.4s ease;
}

    .accordion-collapse.show {
        max-height: 500px; /* altura suficiente para o conteúdo */
    }

.accordion-body {
    padding: 14px 18px;
    color: #333;
    background-color: transparent; /* transparente, usa a cor do collapse */
}


/* ============================================================================================================DRE
   DRE – estilos específicos (v2.2) — bordas padronizadas
   =============================== */


/* Tabela base (mantida) */
table.dre {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto !important;
    white-space: nowrap;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 12px;
    color: #2b2b2b;
    min-width: calc(var(--w-desc) + 12*var(--w-month) + var(--w-total) + var(--w-perc));
    box-sizing: border-box;
}

    /* Células — borda única e consistente */
    table.dre th,
    table.dre td {
        padding: 10px 12px;
        border: 1px solid var(--dre-border);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
     
        background-clip: padding-box; /* evita “vazar” cor ao encostar */
    }

    /* Cabeçalho */
    table.dre thead th {
        position: static;
        top: 0;
        z-index: 4;
        background: linear-gradient(180deg,#5a477f 0%, #4A3B6A 100%);
        color: #fff;
        font-weight: 700;
        text-align: center;
        letter-spacing: .2px;
        border-color: var(--dre-border-strong) !important; /* borda condizente */
        border-bottom-color: var(--dre-border-strong) !important;

    }



    /* Linhas roxas de seção — mantém borda (sem “unset”) */
    table.dre tbody tr.secao,
    table.dre tbody tr[class*="text-warning"] {
        background: linear-gradient(180deg,#7257a3 0%, #6B4F82 100%) !important;
        color: #FFD700 !important;
        font-weight: 700;
       
    }

        table.dre tbody tr.secao th,
        table.dre tbody tr.secao td,
        table.dre tbody tr[class*="text-warning"] th,
        table.dre tbody tr[class*="text-warning"] td {
            border-color: #5f458f !important; /* borda coerente com a faixa roxa */
            color: #FFD700;
        }

    /* Subcategorias */
    table.dre tbody tr.subcat {
        background: #F7F2FF;
        color: #3b2f4f;
    }

        table.dre tbody tr.subcat th {
            font-weight: 600;
        }

    /* Totais (últimas 2 colunas) continuam com leve destaque */
    table.dre tbody td:nth-last-child(2),
    table.dre tbody td:last-child {
        font-weight: 700;
        background: #F0E9FF;
        color: #3b2f4f;
    }

    /* Lucro final */
    table.dre tr.lucro-final th,
    table.dre tr.lucro-final td {
        background: #FFF3B0 !important;
        color: #3b2f4f;
        font-weight: 800;
        border-color: #E8DA93; /* borda amarela suave para integrar */
    }

    /* Cores de valores */
    table.dre .neg, table.dre td[data-neg="true"] {
        color: #B00020 !important;
    }

    table.dre .pos, table.dre td[data-pos="true"] {
        color: #1B8A3A !important;
    }

    /* Zebra + hover (mantidos) */
    table.dre tbody tr:nth-child(odd) {
        background: #FBFAFD;
    }

    table.dre tbody tr:nth-child(even) {
        background: #F6F3FB;
    }

    table.dre tbody tr:hover {
        background: #EFE9FA;
    }

    /* ===== Cabeçalho clicável (seta) ===== */
    table.dre .categoria-header {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 26px;
        background: #6B4F82;
        color: #FFD166;
        font-weight: 700;
        border-color: #5f458f !important; /* borda consistente na célula-título */
    }

        table.dre .categoria-header::after {
            content: "▸";
            position: absolute;
            right: 10px;
            transition: transform .2s ease;
        }

        table.dre .categoria-header.is-open::after {
            transform: rotate(90deg);
        }

    /* === PATCH: alinhar números e restaurar destaque de Total/% === */

    /* 1) Alinhamento: números à direita, descrição à esquerda */
    table.dre tbody td {
        text-align: right;
    }

    table.dre tbody th:first-child {
        text-align: left;
    }

    /* 2) Destaque consistente p/ Total e % em linhas comuns
      (não sobrepõe linhas roxas de seção) */
table.dre tbody tr:not(.secao):not([class*="text-warning"]) td:nth-last-child(2),
table.dre tbody tr:not(.secao):not([class*="text-warning"]) td:last-child {
    font-weight: 700;
    background: #F0E9FF;
    color: #3b2f4f;
}

    /* 3) Se quiser que o destaque apareça TAMBÉM nas subcategorias (garantia) */
    /* Alternativa: herdar a cor da linha em Total e % (sem fundo lilás) */
table.dre tbody td:nth-last-child(2),
table.dre tbody td:last-child {
    font-weight: 700;
    background: inherit !important;
    color: inherit !important;
    text-align: right;
}

.titulo{
    padding:20px;        
  }

.controles {
    display: flex;
    gap: 15px; 
    align-items: center;
   padding: 12px;
}

.card-rel-header {
    font-size: small;
    background-color: #491347;
    color: #491347;
    font-weight: 600;
}

.card-rel {
    background-color: #9681AA;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); /* Leve sombra para destacar no hover */
    transition: transform 0.3s ease;
    transform-origin: center center; /* garante que o scale parte do centro */
    cursor: pointer;
    font-size: medium;
    max-height: 200px;
    height: 200px;
    min-height: 200px;
}

.card-rel-body {
    font-size: large;
    color: #4A3B6A;
}


.card-rel:hover {
    transform: scale(1.03);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /* Leve sombra para destacar no hover */
}

.ribbon {
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-align: center;
    transform: rotate(-45deg);
    position: relative;
    padding: 1px 0;
    width: 110px;
    box-shadow: 0 3px 10px -5px rgba(0,0,0,0.3);
    top: 1px;
    left: -32px;
    clip-path: polygon(0 0,100% 0,calc(100% - .5rem) 100%,0 100%);
}
    .ribbon.fin {
        background-color: #FFD700;
        color: #fff;
        padding: 6px 14px;
        font-weight: bold;
        font-size: 13px;
        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    }

    .ribbon.rh {
        background-color: #00B894;
        color: white;
        padding: 6px 14px;
        font-weight: bold;
        font-size: 13px;
        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    }

    .ribbon.geral {
        background-color: #d63031;
        color: white;
        padding: 6px 14px;
        font-weight: bold;
        font-size: 13px;
        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    }

.ribbon-painel {
    position: absolute;
    top: 10px; /* distância do topo */
    left: -10px; /* pode ser negativo pra “sair” um pouco */
    background: crimson;
    color: white;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: bold;
    transform: rotate(-10deg); /* opcional, dá efeito inclinado */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.link-bonito {
    color: #491347; /* cor do texto */
    text-decoration: none; /* remove sublinhado */
}

.link-bonito:hover {
    color: #FFD700; /* cor no hover */
    text-decoration: none; /* garante que não volte o sublinhado */
}

/* ====== estilos da página de atalhos ====== */
.hero-shortcuts {
    background: radial-gradient(1200px 600px at 10% 0%, #9681AA 0%, #9681AA 50%, #9681AA 100%);
    color: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.shortcuts-grid .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.shortcuts-grid .shortcut-card {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
    background: #9681aa6e;
    max-height:200px;
}
.shortcuts-grid .shortcut-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,.14);
}
.shortcuts-grid .shortcut-media {
    position: relative;
    aspect-ratio: 16/9; /* mantém proporção */
    background: #f3f0fa;
}
.shortcuts-grid .shortcut-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* corta sem distorcer */
    display: block;
}
.shortcuts-grid .ribbon {
    position: absolute;
    top: 12px;
    left: -10px;
    background: #ff4757;
    color: #fff;
    padding: 6px 14px;
    font-weight: 700;
    font-size: .8rem;
    border-radius: 8px;
    transform: rotate(-6deg);
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.shortcuts-grid .card-body {
    padding: 14px 16px 16px 16px;
}
.shortcuts-grid .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #2c2540;
}
.shortcuts-grid .card-text {
    color: #6b6680;
    font-size: x-small;
    text-align:start;
}
.shortcuts-grid .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1eef9;
    color: #5a2a87;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .78rem;
    font-weight: 600;
}
.search-in-hero .form-control {
    border: 0;
    box-shadow: none;
}
.search-in-hero .input-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    width:50%;
    font-size:xx-small;
}
.cardRE {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); /* Leve sombra para destacar no hover */
    transition: transform 0.3s ease;
    transform-origin: center center; /* garante que o scale parte do centro */
    cursor: pointer;
    font-size: medium;
    height: 550px;
    padding:25px;
    margin:25px;
}
.cardRE-header {
    font-size: small;
    background-color: #9681AA;
    color: #491347;
    font-weight: 600;
}
.cardRE-body {
    font-size: large;
    color: #4A3B6A; 
}
.cardRE-footer {
    font-size: small;
    background-color: #9681AA;
    color: #491347;
    font-weight: 600;
}
.cardRE:hover {
    transform: scale(1.03);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /* Leve sombra para destacar no hover */
}
.textoexecutivo{
    text-align:center !important;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:rgba(0, 0, 0, 0.5);
    font-size:xx-large;
}
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.35);
    display: grid;
    place-items: center;
    z-index: 2000;
}
.spinner-card {
    background: rgba(255, 255, 255, 0.92);
    padding: 22px 26px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: 12px;
}
.spinner-gif {
    width: 48px; /* ajuste conforme tamanho do seu GIF */
    height: 48px;
}
.spinner-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}
.d-none {
    display: none !important;
}
/* Cartão do trimestre (fundo roxo claro) */
.tri-card {
    background: #f3e6ff; /* roxo claro */
    border: 1px solid #ead6ff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
}
/* Garantir que a tabela não “pinte” o fundo por cima do cartão */
.tri-card .table,
.tri-card .table > :not(caption) > * {
    background-color: white;
}
/* Cabeçalho com leve contraste dentro do roxo claro */
.tri-card .table thead.table-light th {
    background-color: #9681AA; /* tom próximo ao roxo claro */
}
/* Rodapé igual ao cabeçalho para coerência visual */
.tri-card .table tfoot.table-light th,
.tri-card .table tfoot.table-light td {
    background-color: #;
}
.card_colab {
    background-color: #9681AA;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); /* Leve sombra para destacar no hover */
    transition: transform 0.3s ease;
    transform-origin: center center; /* garante que o scale parte do centro */
    cursor: pointer;
    font-size: small;
    height: 100%;
    width:100%;
    padding:5px;  
}
.card_colab-body {
    font-size: small;
    color: rgba(0, 0, 0, 0.5);
}
.card_colab-footer {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}
.card_colab:hover {
    transform: scale(1.05);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /* Leve sombra para destacar no hover */
}
.btn-kpi{
    background-color:#3b2f4f;
    color:white;
    width:100px;
}
.btn-zip {
    background-color: #5f458f;
    color: white;
    width: 100px;
}
.btn-excell {
    background-color: #1B8A3A;
    color: white;
    width: 100px;
}
.cu {
    width: 100%;
    min-width: 1200px; /* garante espaço mínimo */
    border-collapse: collapse;
}

/* Fundo transparente no select2 */
.select2-container--bootstrap4 .select2-selection {
    background-color: transparent !important;
    border: none !important; /* se quiser sem borda */
    box-shadow: none !important;
    
}

/* Ajusta o texto */
.select2-container--bootstrap4 .select2-selection__rendered {
    background-color: transparent !important;
    color: #000 !important; /* cor do texto, pode mudar */
}

/* Remove a setinha do dropdown (opcional) */
.select2-container--bootstrap4 .select2-selection__arrow {
    background: transparent !important;
    border: none !important;
   
}