html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align: baseline;
    font-weight: inherit;font-style: inherit;font-size: 100%;outline: 0;padding: 0;margin: 0;border: 0;scroll-behavior: smooth;}
    :focus {outline: 0;}
    body {line-height: 1;color: black;overflow-x: hidden;}
    ol, ul {list-style: none;}
    table {border-collapse: separate;border-spacing: 0;}
    caption, th, td {font-weight: normal;text-align: left;}
    blockquote:before, blockquote:after, q:before, q:after {content: "";}
    blockquote, q {quotes: "" "";}
    a {outline:none;cursor: pointer;}

    a.bt-flutuante{left:0px !important;right:inherit !important;}

    * {margin:0;padding:0;list-style:none;border:none;text-decoration:none;}
    hr {display:none;}
    .hidden {display:none}
    
    body {font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;background:#232323; display: flex; flex-direction: column; min-height: 100vh;}
    /*a.bt-fixo-zap{position: fixed;bottom: 20px;right: 20px;z-index: 100;}*/
    .container{}
    a:hover, .bt:hover{transition: 0.3s;}
    .container{width: 90% !important;}
    
    /******* ➡️ Títulos *******/
    
    h1, h2, h3, h4, h5, h6, h7{color: #ffffff;margin-bottom: 10px;}
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7a{color: #ffffff;}
    a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6, a:hover h7{color: #ffffff;text-decoration: none;}
    h1 a:hover , h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h7 a:hover{color: #ffffff;text-decoration: none;}
    
    h1{font-size:28px;line-height:130%;}
    h2{font-size:25px;line-height:130%;}
    h3{font-size:22px;line-height:120%;}
    h4{font-size:20px;line-height:150%;}
    h5{font-size:18px;line-height:150%;}
    h6{font-size:16px;line-height:150%;}
    h7{font-size:16px;line-height:150%;}
    
    
    /******* ⛔ Fim Títulos *******/
    
    
    
    
    /******* ➡️ Parágrafo *******/
    
    p{font-size: 16px;color: #ffffff;line-height:160%;}
    p strong{font-weight:600;}
    p a{text-decoration: underline;color: #01CBFF;}
    p a:hover{text-decoration: none;}
    a:hover p{color:#ffffff;}
    
    /******* ⛔ Fim Parágrafo *******/
    
    
    
    
    /******* ➡️ BGs *******/
    
    .bg-azul{background:#444444;border-radius: 8px;padding: 20px;}
    .bg-azulescuro{background:#1C1C1C;border-radius: 8px;padding: 20px;}
    .bg-branco{background:#ffffff;border-radius: 8px;padding: 20px;}
    .bg-azul-claro{background: #444444;border-radius: 8px;padding: 20px;}
    
    .bg-branco, .bg-branco h1, .bg-branco h2, .bg-branco h3, .bg-branco h4, .bg-branco h5, .bg-branco h6, .bg-branco p, .bg-branco p a{color: #232323;}
    
    .box-azul{padding: 30px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
    
    /******* ⛔ Fim BGs *******/
    
    
    
    
    /******* ➡️ Alinhamento e Padding *******/
    
    .tac, .center{text-align: center;}
    .mauto{margin: 0 auto;}
    .ptzero{padding-top: 0;}
    .pbzero{padding-bottom: 0;}
    .mbottomdez{margin-bottom: 10px;}
    .mtopdez{margin-top: 10px;}
    .mbottomtrinta{margin-bottom: 30px;}
    .mtoptrinta{margin-top: 30px;}
    
    /******* ⛔ Fim Alinhamento e Padding *******/
    
    
    
    
    /******* ➡️ Botões *******/
    
    .bt{border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;text-decoration: none;display: table;font-weight:400;transition: 0.3s;display: inline-block;}
    
    .bt-grande{font-size: 18px;padding:18px 40px;}
    .bt-grande:active{padding:19px 40px 17px 40px;}
    .bt-pequeno{font-size: 14px;padding:6px 16px;}
    .bt-pequeno:active{padding:7px 16px 5px 16px;}
    
    .bt-azul{background: #01CBFF;color: #232323;}
    .bt-azul:hover{background: #0099CC;}
    
    .bt-vermelho{background: #FF8486;color: #232323 !important;}
    .bt-vermelho:hover{background: #EA7173;}

    .bt-cinza{background: #E0E0E0;color: #232323;}
    .bt-cinza:hover{background: #CCCCCC;}

    .bt-azul-vazado{background:none;color: #01CBFF;border:1px solid #01CBFF;}
    .bt-azul-vazado:hover{background:#01CBFF;color: #232323;border:1px solid #01CBFF;}
    
    .bt-vermelho-vazado{background:none;color: #FF8486;border:1px solid #FF8486;}
    .bt-vermelho-vazado:hover{background:#FF8486;color: #232323;border:1px solid #FF8486;}
    
    .bt-desabilitado{opacity: 25%;}

.bt-inline-azul{color: #01CBFF;text-decoration: underline;}
    .bt-inline-azul:hover{color: #0099CC;}

    .bt-inline-vermelho{color: #FF8486;text-decoration: underline;}
    .bt-inline-vermelho:hover{color: #EA7173;}

    /******* ⛔ Fim Botões *******/
    
    
    
    
    
    /******* ➡️ Formulário *******/
    
    label{color:#999999;font-size: 14px;display: block;}
    
    input, select, textarea{font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}
    
    input.txt, select.padrao, textarea.padrao{background: #333333;font-size: 16px;color: #ffffff;line-height: 25px;padding: 8px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;width: auto;width: 100%;margin-bottom: 8px;}
    
    input.input-horario {
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right 12px center;
         padding-right: 35px !important;
     }
    
    select.padrao{cursor: pointer;}
    
    textarea.padrao{height: 140px;line-height:25px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
    
    input.txt:focus, select.padrao:focus, textarea.padrao:focus {background: #1C1C1C;}
    
    input.bt{cursor: pointer;display: inline-block !important;}
    
.feedback{font-size: 16px;font-weight: 600;color: #000;line-height: 25px;padding: 18px;display: block;border-radius: 8px;margin-top: 20px; transition: opacity 0.3s ease;}
    .erro{background: #FFF5F5;border:1px solid #FFD8D8;}
    .sucesso{background: #F1FFF4;border:1px solid #C0ECD4;}
    .alerta{background: #F3D6C7;border:1px solid #C2947A;}

    /* Animação de Shake para erros repetidos */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-10px); }
        40%, 80% { transform: translateX(10px); }
    }
    .shake {
        animation: shake 0.4s ease-in-out;
    }
    .feedback .bt-inline-azul{float: right;}
    .feedback-inline{margin-top:8px;padding:0 12px;max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);transition:max-height 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out, padding 0.25s ease-in-out;}
    .feedback-inline.ativo{padding:10px 12px;max-height:120px;opacity:1;transform:translateY(0);}

    input.fixo{ }
    input.ramal{}

    /******* ⛔ Fim Formulário *******/
    
    
    /* Estilização Global de Scrollbars */
    ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    ::-webkit-scrollbar-track {
        background-color: #1C1C1C;
        border-radius: 100px;
        border: 4px solid transparent;
        background-clip: content-box;
    }
    
    ::-webkit-scrollbar-track-piece {
        background-color: #1C1C1C;
        border-radius: 100px;
        border: 4px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #33D6FF;
        border-radius: 100px;
        border: 4px solid #1C1C1C;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #0099CC;
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #33D6FF #1C1C1C;
    }
    
    ::-webkit-scrollbar-corner {
        background: transparent;
    }
    
    ::-webkit-scrollbar-button {
        width: 0;
        height: 0;
    }
    
    
    /******* ➡️ Paginação *******/
    
    
    /******* ✅ Paginação Flex *******/

.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* ou nowrap se quiser forçar tudo em uma linha */
  gap: 6px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.paginacao a {
  display: inline-block;
  text-align: center;
  padding: 8px 14px;
  border: 1px solid #01CBFF;
  color: #01CBFF;
  border-radius: 15px;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

.paginacao a.ativo {
  background-color: #333333;
  color: white;
}

.paginacao a:hover {
  background-color: rgba(1, 203, 255, 0.2);
}

.paginacao a:active {
  transform: scale(0.95);
}

.paginacao a.desabilitado {
  opacity: 0.4;
  pointer-events: none;
}

    .paginacao a:hover, .paginacao .desabilitado{opacity: 40%;}
    .paginacao a.prev, .paginacao a.next {}
    .paginacao a.ativo {opacity: 20%;}
    .paginacao a.desabilitado {}
    
    /******* ⛔ Fim Paginação *******/
    
    
    
    
    
    /******* ➡️ Rodapé *******/
    
    .rodape {background: #1C1C1C;margin-top: auto}
    .rodape .container {padding-top: 30px;padding-bottom: 30px;}
    .rodape .col-md-3 {}
    .rodape .col-md-3 img {width: 55px;}
    .rodape .col-md-9 {}
    .rodape .col-md-9 address {color: #fff;font-size: 14px;float: right;}
    
    /******* ⛔ Fim Rodapé *******/
    
    
    
    /******* ➡️ Modal *******/
    
    .black_overlay{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;
    -moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
    
    .white_content {display: none;position: fixed;top: 10%;left: 10%;width:80%;height:80%;z-index:1002;overflow: auto;-moz-box-shadow:1px 1px 1px 1px #1a1a1a;-webkit-box-shadow:1px 1px 1px 1px #1a1a1a;box-shadow:1px 1px 1px 1px #1a1a1a;background:#232323;border-radius: 8px;padding: 20px;}
    
    .modal-padrao .white_content {}
    .modal-padrao a.close-modal{position: absolute;right: 20px;top:20px;color: #fff;z-index: 100; text-decoration: none;}
    .modal-padrao a.close-modal:hover{opacity: 100%}
    .modal-padrao a.close-modal button:hover{transform: scale(1.1); transition: 0.2s ease-in-out;}
    .modal-padrao a.close-modal button:active{transform: scale(0.9); transition: 0.1s ease-in-out;}
    .modal-padrao{}
    .modal-padrao .white_content{}
    .modal-padrao .white_content .row{}
    .modal-padrao .white_content .row .container .col-md-12{}
    
    /******* ⛔ Fim Modal *******/

    .dev-status-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1080;opacity:0;display:none;transition:opacity 0.3s ease-in-out;}
    .dev-status-modal{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%) scale(0.96);opacity:0;display:none;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;z-index:1090;background:#333333;color:#fff;width:min(520px, 92vw);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
    .dev-status-modal.ativo{opacity:1;display:block;transform:translate(-50%, -50%) scale(1);}
    .dev-status-overlay.ativo{opacity:1;display:block;}
    .dev-status-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,0.12);}
    .dev-status-modal-header h4{margin:0;font-weight:500;}
    .dev-modal-fechar{position:absolute;right:-12px;top:-12px;width:28px;height:28px;border-radius:50%;border:none;background:#E74C3C;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(231,76,60,0.4);transition:transform 0.2s ease-in-out, opacity 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;}
    .dev-modal-fechar:hover{transform:scale(1.06);opacity:0.95;}
    .dev-modal-fechar:active{transform:scale(0.98);opacity:0.9;}
    .dev-status-modal-body{padding:18px;}
    .dev-status-modal-actions{display:flex;gap:10px;margin-top:14px;justify-content:flex-end;}
    .dev-status-modal input.txt, .dev-status-modal select.padrao, .dev-status-modal textarea.padrao{background:#1C1C1C;}
    .status-modal-feedback{margin-top:8px;font-size:13px;color:#ffb3b3;opacity:0;transform:translateY(-4px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;min-height:16px;}
    .status-modal-feedback.ativo{opacity:1;transform:translateY(0);}

    .parametro-toast{position:fixed;left:50%;top:20px;transform:translateX(-50%) translateY(-8px);opacity:0;background:#333333;color:#fff;padding:10px 14px;border-radius:8px;border:1px solid #2b435b;z-index:1100;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;font-size:14px;pointer-events:none;}
    .parametro-toast.mostrar{opacity:1;transform:translateX(-50%) translateY(0);}
    .parametro-toast.erro{border-color:#E74C3C;color:#ffd6d6;}
    .parametro-toast.sucesso{border-color:#7ECF88;color:#dff7e3;}

    .parametro-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1085;opacity:0;display:none;transition:opacity 0.3s ease-in-out;}
    .parametro-confirm-modal{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%) scale(0.96);opacity:0;display:none;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;z-index:1095;background:#333333;color:#fff;width:min(520px, 92vw);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
    .parametro-confirm-modal.ativo{opacity:1;display:block;transform:translate(-50%, -50%) scale(1);}
    .parametro-confirm-overlay.ativo{opacity:1;display:block;}
    .parametro-confirm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,0.12);}
    .parametro-confirm-body{padding:18px;}
    .parametro-confirm-actions{display:flex;gap:10px;margin-top:14px;justify-content:flex-end;}
    
    
    
    /******* ➡️ Custom Time Picker *******/

    .time-picker-container {
        position: absolute;
        background: #333333;
        border: 1px solid #01CBFF;
        border-radius: 8px;
        display: none;
        flex-direction: row;
        z-index: 1003;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .time-picker-container.ativo {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .time-picker-column {
        height: 200px;
        overflow-y: auto;
        width: 60px;
        border-right: 1px solid #444444;
        scrollbar-width: thin;
        scrollbar-color: #01CBFF #333333;
    }

    .time-picker-column:last-child {
        border-right: none;
    }

    .time-picker-column::-webkit-scrollbar {
        width: 10px;
    }

    .time-picker-column::-webkit-scrollbar-track {
        background-color: #1C1C1C;
        border-radius: 100px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    
    .time-picker-column::-webkit-scrollbar-track-piece {
        background-color: #1C1C1C;
        border-radius: 100px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .time-picker-column::-webkit-scrollbar-thumb {
        background-color: #33D6FF;
        border-radius: 100px;
        border: 2px solid #1C1C1C;
        background-clip: padding-box;
    }

    .time-picker-option {
        padding: 10px;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
        font-size: 14px;
    }

    .time-picker-option:hover {
        background: #01CBFF;
        color: #232323;
    }

    .time-picker-option.selecionado {
        background: #01CBFF;
        color: #232323;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .time-picker-container {
            position: fixed;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) scale(0.9);
            width: 150px;
            height: 250px;
        }
        .time-picker-container.ativo {
            transform: translate(-50%, -50%) scale(1);
        }
        .time-picker-column {
            height: 100%;
            width: 50%;
        }
    }

    /******* ⛔ Fim Custom Time Picker *******/
    
    
    
    
    
    
    /******** ➡️ Tag de Resolução de Tela ********/
    
    span.a1200{}span.a1199{display: none;}span.a930{display: none;}span.a768{display: none;}span.a600{display: none;}span.a400{display: none;}
    
    /******** ⛔ Fim Tag de Resolução de Tela ********/
    
    
    
    
    
    /******** ➡️ Topo ********/
    
    .row.topo {background: #333333;padding-top: 15px;padding-bottom: 15px;}
    .row.topo .container {width: 90%;}
    
    .topo-admin {background: rgb(35, 35, 35);background: linear-gradient(90deg, rgba(35, 35, 35,1) 0%, rgba(193,234,116,1) 50%, rgba(35, 35, 35,1) 100%);padding-bottom: 1px;}
    img.logo-radar{width:130px;}

    .topo .col-md-3 img{height:25px;opacity:70%;}
    .topo .col-md-3 img:hover{opacity:100%;}

    .row.topo .col-md-6:first-child {}
    .row.topo .col-md-6:first-child img {}
    
    .row.topo .col-md-6:last-child {}
    
    .row.topo .menus {display: table;float: right;}
    
    .row.topo .menus .perfil {display: table;float: left;}
    .row.topo .menus .perfil .foto img {border-radius: 100px;}
    .row.topo .menus .perfil .nome { color: #fff;margin-left: 3px;}
    .row.topo .menus .perfil .tipo-perfil { color:#626D31;text-transform: uppercase;font-size: 12px;background: #000;padding: 3px 5px;border-radius: 3px;background: rgb(229,255,115);background: linear-gradient(180deg, rgba(229,255,115,1) 0%, rgba(138,153,69,1) 100%);margin-left: 5px;}
    
    .row.topo .menus .menu-topo {display: table;float: left;/**margin-top: 8px;**/}
    .row.topo .menus .menu-topo li {float: left;font-size: 16px;}
    .row.topo .menus .menu-topo li a {color: #999999;border-left:1px solid #999999;padding-left: 10px;margin-left: 10px;}
    .row.topo .menus .menu-topo li a:hover{color: #fff;}
    .row.topo .menus .menu-topo li a.active{color: #fff;}
    
    .row.topo .menus .menu-topo li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;padding-bottom: 10px;}
    .row.topo .menus .menu-topo li.ativo a{color: #01CBFF;}
    
    /******** ⛔ Fim Topo ********/
    
    
    
    
    
    /******** ➡️ Menu Principal ********/
    
    .row.nav { /* estilos */ }
    .row.nav .container {border-bottom: 1px solid #444444;padding-top: 20px;padding-bottom: 20px;}
    
    .row.nav .col-md-2 { /* estilos */ }
    .row.nav .col-md-2 img { /* estilos */ }
    
    .row.nav .col-md-10 { /* estilos */ }
    
    .row.nav .menu {display: table;float: right;margin-top: 20px;}
    .row.nav .menu li {float: left;font-size: 19px;margin-left: 30px;}
    .row.nav .menu li:first-child{margin-left: 0px;}
    .row.nav .menu li a {color: #fff;}
    .row.nav .menu li a:hover {color: #01CBFF;}
    .row.nav .menu li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;padding-bottom: 10px;}
    .row.nav .menu li.ativo a {color: #01CBFF;}
    
    .row.nav .menu li.embreve {color: #444444;background: url(../img/em-breve.svg) top right no-repeat;}
    .row.nav .menu li.embreve a { /* estilos */ }
    
    /******** ⛔ Fim Menu Principal ********/
    
    
    
    
    
    
    /******** ➡️ Menu Título ********/
    
    .row.titulo { /* estilos */ }
    .row.titulo .container {border-bottom: 1px solid #444444;padding-top: 40px;padding-bottom: 20px;}
    .row.titulo .col-md-12 { /* estilos */ }
    .row.titulo .col-md-12 h2 {float: left;}
    .row.titulo .col-md-12 h2 a {color: #fff;}
    .row.titulo .col-md-12 h2 a:hover{color: #01CBFF;}
    .row.titulo .col-md-12 h2.active {color: #01CBFF;background: url(../img/seta-active.svg) no-repeat center left;padding-left: 35px;margin-left: 7px;}
.row.titulo .col-md-12 h2.breadcrumb-link {color: #fff;background: url(../img/seta-active.svg) no-repeat center left;padding-left: 35px;margin-left: 7px;cursor: pointer;}
.row.titulo .col-md-12 h2.breadcrumb-link a {color: #fff; text-decoration: none;}
.row.titulo .col-md-12 h2.breadcrumb-link:hover a {color: #01CBFF;}

.row.titulo .col-md-12 h2.breadcrumb {
    float: left;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.row.titulo .col-md-12 h2.breadcrumb a {
    color: #fff;
    transition: color 0.25s ease-in-out;
}

.row.titulo .col-md-12 h2.breadcrumb a:hover {
    color: #01CBFF;
}

.row.titulo .col-md-12 h2.breadcrumb .breadcrumb-sep {
    color: #999999;
    font-weight: 400;
}

.row.titulo .col-md-12 h2.breadcrumb .breadcrumb-current {
    color: #01CBFF;
}
    
    /******** ⛔ Fim Título ********/
    
    
    
    
    
    /******** ➡️ Menu Abas ********/
    
    .row.abas-nav { /* estilos */ }
    .row.abas-nav .container {border-bottom: 1px solid #444444;padding-top: 20px; display: table;}
    .row.abas-nav .col-md-12 {}
    .upload-container:hover {
    border-color: #fff !important;
    background: rgba(255,255,255,0.1);
}

.upload-container:hover i {
    opacity: 1 !important;
    transform: scale(1.1);
}

.bt-azul {
    transition: all 0.3s ease-in-out;
}

.bt-azul:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.row.abas-nav .col-md-12 .tab {color: #fff;font-size: 16px;border-bottom: 2px solid #232323;padding-bottom: 20px;float: left;padding-left: 15px;padding-right: 15px;transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;}
    .row.abas-nav .col-md-12 .tab.active {color: #01CBFF;border-bottom: 2px solid #01CBFF;}
    .row.abas-nav .col-md-12 .tab:hover {color: #01CBFF;border-bottom: 2px solid #01CBFF;}

    /* CTA "Adicionar Empresa": usa botão padrão do site (.bt .bt-pequeno .bt-azul),
       esta classe só posiciona à direita da barra de abas. */
    .row.abas-nav .col-md-12 .btn-nova-empresa {
      float: right;
      margin-bottom: 10px;
      border: none;
      cursor: pointer;
    }
    .row.abas-nav .col-md-12 .btn-nova-empresa .plus {
      margin-right: 4px;
      font-weight: 700;
    }

    /******** ⛔ Fim Abas ********/
    
    
    
    
    
    /******** ➡️ Menu Filtros ********/
    
    .row.filtros { /* estilos */ }
    .row.filtros .container {padding-top: 30px;padding-bottom: 30px; border-bottom: 1px solid #444444;}
    .row.filtros .col-md-4 { /* estilos */ }
    .row.filtros .col-md-4 form { /* estilos */ }
    .row.filtros .col-md-4 fieldset { /* estilos */ }
    .row.filtros .col-md-4 ul { /* estilos */ }
    .row.filtros .col-md-4 ul li { /* estilos */ }
    .row.filtros .col-md-4 ul li label {}
    .row.filtros .col-md-4 ul li select.padrao {width: 48%;float: left;margin-right: 1%;}
    .row.filtros .col-md-4 ul li input.txt { /* estilos */ }
    .row.filtros .col-md-4 p {float: right;margin-top: 30px;}
    
    /* Novo estilo para filtros alinhados (Flex) */
    .row.filtros form fieldset ul {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .row.filtros form fieldset ul li label {
        margin-bottom: 0;
    }
    .row.filtros form fieldset ul li select.padrao,
    .row.filtros form fieldset ul li input.txt {
        margin-bottom: 0;
        width: 100%;
        min-width: 200px;
    }

    /* Alinha o filtro da direita (geralmente busca) para o final */
    .row.filtros .col-md-6:nth-of-type(2) form fieldset ul {
        justify-content: flex-end;
    }

    /* Garante que os containers ocupem largura total para o flex funcionar */
    .row.filtros form,
    .row.filtros fieldset {
        width: 100%;
    }

    body.gerenciar-carteira .row.filtros .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    body.gerenciar-carteira .vendedor-selecao-form input.vendedor-input,
    body.gerenciar-carteira .row.filtros select.padrao,
    body.gerenciar-carteira .row.filtros input.txt {
        transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out;
    }

    body.gerenciar-carteira .vendedor-selecao-form .vendedor-selecao-botao {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    body.gerenciar-carteira .vendedor-selecao-form .vendedor-selecao-botao input.bt {
        width: 100%;
        max-width: 140px;
        padding: 9px 16px;
    }

    body.gerenciar-carteira .row.filtros .filtros-linha {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.gerenciar-carteira .row.filtros .filtros-label label {
        margin: 0;
        color: #999999;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
    }

    body.gerenciar-carteira .row.filtros .filtros-linha-direita {
        justify-content: flex-end;
    }

    body.gerenciar-carteira .row.filtros .filtros-control {
        margin: 0;
        flex: 0 1 auto;
    }

    body.gerenciar-carteira .row.filtros select.padrao {
        width: clamp(130px, 14vw, 180px);
        min-width: 0;
        max-width: 100%;
    }

    body.gerenciar-carteira .row.filtros input.txt {
        width: clamp(170px, 22vw, 320px);
        min-width: 0;
        max-width: 100%;
    }

    body.gerenciar-carteira .row.filtros .filtros-caption {
        margin-top: 8px;
        text-align: right;
        color: #999999;
        font-size: 12px;
        line-height: 1.2;
        transition: opacity 0.25s ease-in-out;
    }

    body.gerenciar-carteira .secao-titulo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #444444;
        margin: 0;
    }

    body.gerenciar-carteira .secao-titulo h4 {
        margin: 0;
    }

    body.gerenciar-carteira .secao-count {
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
        line-height: 150%;
        white-space: nowrap;
        transition: opacity 0.25s ease-in-out;
        opacity: 1;
    }

    body.gerenciar-carteira .secao-titulo + .table-responsive {
        margin-top: 12px;
    }

    @media (max-width: 767px) {
        body.gerenciar-carteira .row.filtros .filtros-linha {
            flex-wrap: wrap;
        }

        body.gerenciar-carteira .row.filtros select.padrao,
        body.gerenciar-carteira .row.filtros input.txt {
            width: 100%;
        }

        body.gerenciar-carteira .vendedor-selecao-form .vendedor-selecao-botao input.bt {
            max-width: 100%;
        }
    }

    /******* ➡️ Autocomplete Vendedores *******/
    
    .sugestoes-vendedores {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #333333;
        border: 1px solid #444444;
        border-radius: 0 0 8px 8px;
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .sugestoes-vendedores.ativo {
        display: block;
        animation: fadeIn 0.2s ease-in-out;
    }
    
    .sugestoes-vendedores li {
        padding: 10px;
        cursor: pointer;
        color: #fff;
        border-bottom: 1px solid #444444;
    }
    
    .sugestoes-vendedores li:hover {
        background: #01CBFF;
        color: #232323;
    }
    
    .sugestoes-vendedores li.sem-resultados {
        cursor: default;
        color: #aaa;
        text-align: center;
        padding: 15px;
    }
    .sugestoes-vendedores li.sem-resultados:hover {
        background: transparent;
        color: #aaa;
    }

    .tag {
        background: #01CBFF;
        color: #232323;
        padding: 6px 14px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .remove-tag {
        margin-left: 8px;
        cursor: pointer;
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        background: transparent;
        border: none;
        padding: 0;
        color: inherit;
        outline: none;
    }
    
    .remove-tag:hover {
        opacity: 0.7;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /******* ⛔ Fim Autocomplete Vendedores *******/
    
    /******** ⛔ Fim Filtros ********/

.opcoes-filtros{background:#333333;border-radius:30px;padding:12px 16px;display:flex;gap:18px;align-items:center;justify-content:flex-start;transition:all 0.3s ease-in-out;}
.opcoes-filtros .opc{color:#999999;font-size:14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:color 0.2s ease-in-out;}
.opcoes-filtros .opc:hover{color:#ffffff;}
.opcoes-filtros input[type=checkbox]{width:16px;height:16px;cursor:pointer;}
    
    
    
    
    
    /******** ➡️ Tabela Padrão ********/
    
    table.padrao {font-size: 16px;color: #fff;width: 100%;}
    table.padrao thead { /* estilos */ }
    table.padrao thead tr { /* estilos */ }
    table.padrao thead tr th {padding-top: 15px;padding-bottom: 15px;padding-left: 15px;color:#999999;}
    table.padrao tbody { /* estilos */ }
    table.padrao tbody tr {background: #444444;border-bottom: 1px solid #232323;}
    table.padrao tbody tr:hover{background: #2A2A2A;}
    table.padrao tbody tr td {padding-top: 15px;padding-bottom: 15px;padding-left: 15px;font-weight: 300;}
    table.padrao tbody tr td:first-child {-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
    table.padrao tbody tr td:last-child {-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
    table.padrao tbody tr.sem-arquivos:hover{background:#444444;}
table.padrao tbody tr td a.estrela-fav:hover img{opacity: 0.5;}
table.padrao tbody tr td a.bt{margin-left: 5px;}
table.padrao img.avatar{border-radius: 100px;}

table.padrao tr td{}

/* Ícone de extensão de arquivo */
.file-ext-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:2px;margin-right:8px;border-radius:50%;background:#0099CC;color:#fff;font-weight:700;font-size:10px;letter-spacing:0;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,0.25);transition:transform .2s ease-in-out, background .2s ease-in-out, opacity .2s ease-in-out;white-space:nowrap;overflow:hidden}
.file-ext-badge:hover{background:#01CBFF;transform:translateY(-1px)}

    /**050425**/
    div.table-responsive{padding-bottom: 10px;border:none;}
    table.table{border-top:none !important;}
    table.table tr{border-top:none !important;}
    table.table tr th{border-bottom:none !important;}
    table.table tr td{border-top:none !important;}

    
    /******** ⛔ Fim Tabela Padrão ********/
    
    
    
    
    
    /******** ➡️ Ações ********/
    
    .row.acoes { /* estilos */ }
    .row.acoes .container { /* estilos */ }
    .row.acoes .col-md-6 { /* estilos */ }
    .row.acoes .bts {display: table;margin-top: 25px;}
    .row.acoes .bts li {float: left;margin-right: 5px !important;}
    .row.acoes .bts li label {padding-top: 8px;}
    .row.acoes .bts li .bt { /* estilos */ }
    .row.acoes .bts li .bt.bt-azul-vazado { /* estilos */ }
    .row.acoes .bts li .bt.bt-pequeno { /* estilos */ }
    .row.acoes form { /* estilos */ }
    .row.acoes fieldset { /* estilos */ }
    .row.acoes ul { /* estilos */ }
    .row.acoes ul li { /* estilos */ }
    .row.acoes ul li label { /* estilos */ }
    .row.acoes ul li .txt { /* estilos */ }
    
    /******** ⛔ Fim Ações ********/
    
    
    
    
    
    
    /******** ➡️ Notas ********/
    
    .adicionar-nota {-webkit-border-radius: 8px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius: 8px;-moz-border-radius-bottomright: 0px;-moz-border-radius-bottomleft: 0px;border-radius: 8px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
    .adicionar-nota .col-md-6 {}
    .adicionar-nota form {}
    .adicionar-nota fieldset {}
    .adicionar-nota ul {}
    .adicionar-nota li {}
    .adicionar-nota label {}
    .adicionar-nota textarea.padrao {}
    .adicionar-nota input.bt{}
    
    .lista-nota {-webkit-border-radius: 0px;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius: 0px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-radius: 0px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
    
    .nota {background: url(../img/seta-nota.svg) no-repeat left 35px;padding-left: 10px;}
    .nota-in {background: #444444;border-radius: 8px;margin-bottom: 5px;padding: 20px;}
    .nota .autor {display: table;}
    .nota .autor img {border-radius: 100px;float: left;margin-right: 5px;}
    .nota .autor h6 {float: left;margin-top: 7px;}
    .nota .autor h6 span {font-size: 13px;}
    .nota .conteudo {padding-top: 8px;padding-bottom: 10px;}
    .nota .conteudo p {}
    .nota .acoes {}
    .nota .acoes a {}
    
    /******** ⛔ Fim Notas ********/
    
    
    
    
    
    
    
    /******** ➡️ Anexos ********/
    
    .adicionar-anexo {-webkit-border-radius: 8px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius: 8px;-moz-border-radius-bottomright: 0px;-moz-border-radius-bottomleft: 0px;border-radius: 8px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
    .adicionar-anexo .col-md-12 {}
    .adicionar-anexo span {color: #fff;float: left;margin-right: 20px;margin-top: 4px;}
    .adicionar-anexo a.bt {float: left;}
    
    .lista-anexo {-webkit-border-radius: 0px;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius: 0px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-radius: 0px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
    
    .anexo {background: url(../img/seta-nota.svg) no-repeat left 35px;padding-left: 10px;}
    .anexo-in {background: #444444;border-radius: 8px;margin-bottom: 5px;padding: 20px;display: table;width: 100%;}
    .anexo img {border-radius: 100px;float: left;margin-right: 5px;}
    .anexo div.txt {float: left;}
    .anexo div.txt h6 {margin-top: 0px;margin-bottom: 0px;}
    .anexo div.txt h6 a {text-decoration: underline;}
    .anexo div.txt h6 a:hover{text-decoration: none;}
    .anexo div.txt p {font-size: 14px;}
    
    /******** ⛔ Fim Anexos ********/
    
    
    
    
    
    .relacionar-empresas {}
    .relacionar-empresas .container {}
    .relacionar-empresas .col-md-12 {}
    .relacionar-empresas .col-md-12 h4 {}
    .relacionar-empresas .col-md-12 p {}
    .relacionar-empresas .container {}
    .relacionar-empresas .container .col-md-4 {margin-bottom: 10px;}
    .relacionar-empresas .container .col-md-4 {}
    .relacionar-empresas .container .col-md-4 fieldset {}
    .relacionar-empresas .container .col-md-4 fieldset ul {}
    .relacionar-empresas .container .col-md-4 fieldset ul li {}
    .relacionar-empresas .container .col-md-4 fieldset ul li input{float: left;margin-right: 3px;}
    .relacionar-empresas .container .col-md-4 fieldset ul li h6 {float: left;margin-bottom: 0}
    .relacionar-empresas .container .col-md-4 fieldset ul li h6 .filiais {font-size: 12px;text-transform: uppercase;background: #0099CC;padding: 2px 5px;border-radius: 4px;margin-left: 3px}
    .relacionar-empresas .bt.bt-azul.bt-grande.mtoptrinta {}
    
    
    
    
    
    /******** ➡️ Accordion ********/
    
    div.accordion details {display: block; width: auto;margin: 1px 0 0 0;}
    div.accordion details p { padding-left: 30px;margin-top: 20px;margin-bottom: 20px;}
    
    div.accordion summary {display: flex; background:#444444;color: #fff;border-radius: 8px;padding: 15px;cursor: pointer;justify-content: flex-start;align-items: center;}
    div.accordion summary::-webkit-details-marker {display: none;}
    div.accordion summary:before {content: "+";font-size: 20px;font-weight: bold;margin: 0 5px;padding: 0;width: 20px;text-align: center;}
    
    div.accordion details[open] summary:before {content: "-";}
    
    /******** ⛔ Fim Accordion ********/
    
    
    
    
    
    
    
    /******** ➡️ Box Padrão ********/
    
    div.box-padrao{border: 1px solid #444444;border-radius: 8px;padding: 20px;}
    
    /******** ⛔ Fim Box Padrão ********/





    
    
    /******** ➡ Tela de Login ********/
    .login{min-height: 100%;height: 100%;background-color:#1C1C1C;}
    
    .login div.login-side-img{border-radius: 0px;min-height: 100%;height: 100%;display : flex;align-items: center;justify-content: center;overflow: hidden;}
    .login div.login-side-img img{width:80%;max-width: 700px;max-height: 80vh;object-fit: contain;margin: 0 auto;}

    .login div.login-side-form{min-height: 100%;height: 100%;display : flex;align-items: center;}
    .login div.login-side-form img.logo{width: 200px;max-width: 70%;height: auto;margin-bottom: 80px;}
    .login div.login-side-form div.inner-login-form{padding-top: 30px;padding-bottom: 30px;margin:0 auto;}
    .login-rodape{position: absolute;z-index: 100;bottom: 0px;width: 100%;}
    
    
    /******** ⛔ Fim Tela de Login ********/  






    
    /******** ➡️ Até 1199px ********/
    
    @media all and (max-width: 1199px) {
    
    span.a1200{display: none;}span.a1199{display: block;}span.a930{display: none;}span.a768{display: none;}span.a600{display: none;}span.a400{display: none;}
    
    .container{}
    img{max-width: 100%;}
    
    
    
    
    
        
    
    /******** ➡️ Menu Principal ********/
    
    .row.nav { /* estilos */ }
    .row.nav .container {border-bottom: 1px solid #444444;padding-top: 20px;padding-bottom: 20px;}
    
    .row.nav .col-md-2 { /* estilos */ }
    .row.nav .col-md-2 img { /* estilos */ }
    
    .row.nav .col-md-10 { /* estilos */ }
    
    .row.nav .menu {display: table;float: right;margin-top: 20px;}
    .row.nav .menu li {float: left;font-size: 17px;margin-left: 20px;}
    .row.nav .menu li:first-child{margin-left: 0px;}
    .row.nav .menu li a {color: #fff;}
    .row.nav .menu li a:hover {color: #01CBFF;}
    .row.nav .menu li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;padding-bottom: 10px;}
    .row.nav .menu li.ativo a {color: #01CBFF;}
    
    .row.nav .menu li.embreve {color: #444444;background: url(../img/em-breve.svg) top right no-repeat;}
    .row.nav .menu li.embreve a { /* estilos */ }
    
    /******** ⛔ Fim Menu Principal ********/
    
    
    /******** ➡️ Topo ********/
    
    .row.topo {background: #333333;padding-top: 15px;padding-bottom: 15px;}
    .row.topo .container {width: 90%;}
    
    .topo-admin {background: rgb(35, 35, 35);background: linear-gradient(90deg, rgba(35, 35, 35,1) 0%, rgba(193,234,116,1) 50%, rgba(35, 35, 35,1) 100%);padding-bottom: 1px;}
    
    .row.topo .col-md-6:first-child {}
    .row.topo .col-md-6:first-child img {}
    
    .row.topo .col-md-6:last-child {}
    
    .row.topo .menus {display: table;float: right;}
    
    .row.topo .menus .perfil {display: table;float: left;}
    .row.topo .menus .perfil .foto img {border-radius: 100px;}
    .row.topo .menus .perfil .nome { color: #fff;margin-left: 3px;}
    .row.topo .menus .perfil .tipo-perfil { color:#626D31;text-transform: uppercase;font-size: 12px;background: #000;padding: 3px 5px;border-radius: 3px;background: rgb(229,255,115);background: linear-gradient(180deg, rgba(229,255,115,1) 0%, rgba(138,153,69,1) 100%);margin-left: 5px;}
    
    .row.topo .menus .menu-topo {display: table;float: left;margin-top: 8px;}
    .row.topo .menus .menu-topo li {float: left;font-size: 14px;}
    .row.topo .menus .menu-topo li a {color: #999999;border-left:1px solid #999999;padding-left: 6px;margin-left: 6px;}
    .row.topo .menus .menu-topo li a:hover{color: #fff;}
    .row.topo .menus .menu-topo li a.active{color: #fff;}
    
    .row.topo .menus .menu-topo li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;padding-bottom: 10px;}
    .row.topo .menus .menu-topo li.ativo a{color: #01CBFF;}
    
    /******** ⛔ Fim Topo ********/
    
    
    
    }
    
    /******** ⛔ Fim Até 1199px ********/
    
    
    
    
    
    
    
    /******** ➡️ Até 930px ********/
    
    @media all and (max-width: 991px) { 
    
    span.a1200{display: none;}span.a1199{display: none;}span.a930{display: block;}span.a768{display: none;}span.a600{display: none;}span.a400{display: none;}
    
    body{padding-bottom: 60px;overflow-x:hidden;}
    
    .col-md-2, .col-md-4, .col-md-6, .col-md-8{margin-bottom: 20px;}
    .bt-grande{font-size: 16px;}
    .container{}
    
    
    /******** ➡️ Menu Principal ********/
    
    .row.nav {}
    .row.nav .container {border-bottom: 1px solid #444444;padding-top: 18px;padding-bottom: 2px;}
    .row.nav .col-md-2{text-align:center;}
    .row.nav .col-md-2 img{height:60px;}
    .row.nav .col-md-10 {position: fixed;background: #141414;bottom: 0px;width: 100%;left: 0;z-index: 100;padding: 0px;border-top:1px solid #01CBFF;}
    
    .row.nav .menu {display: flex;flex-wrap: nowrap;   overflow-x: auto;width: 100%;float: none;padding:0px 20px 0px;flex-shrink:0;}
    
    .row.nav .menu li {float: left;font-size: 17px;margin-left: 20px;flex-shrink:0;padding-bottom: 20px}
    
    .row.nav .menu li:first-child{margin-left: 0px;}
    .row.nav .menu li a {color: #fff;}
    .row.nav .menu li a:hover {color: #01CBFF;}
    .row.nav .menu li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;}
    .row.nav .menu li.ativo a {color: #01CBFF;}
    
    .row.nav .menu li.embreve {color: #444444;background: url(../img/em-breve.svg) top right no-repeat;}
    .row.nav .menu li.embreve a { /* estilos */ }
    
    /******** ⛔ Fim Menu Principal ********/
    
    
    /******** ➡️ Topo ********/
    
    .row.topo .col-md-6:first-child {}
    .topo .col-md-3 img {margin: 0 auto 10px;display: block;height:20px;}
    
    .row.topo .col-md-6:last-child {}
    
    .row.topo .menus {display: block;float: none;width: 100%;}
    
    .row.topo .menus .perfil {display: table;float: none;margin:0 auto;}
    .row.topo .menus .perfil .foto img {border-radius: 100px;}
    .row.topo .menus .perfil .nome { color: #fff;margin-left: 3px;}
    .row.topo .menus .perfil .tipo-perfil { color:#626D31;text-transform: uppercase;font-size: 12px;background: #000;padding: 3px 5px;border-radius: 3px;background: rgb(229,255,115);background: linear-gradient(180deg, rgba(229,255,115,1) 0%, rgba(138,153,69,1) 100%);margin-left: 5px;}
    
    .row.topo .menus .menu-topo {float: none;margin-top: 8px;padding: 8px;width: 100%;display: flex;flex-wrap: nowrap;overflow-x: auto;background: #1C1C1C;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;border-radius: 10px;border-right: 8px solid #1C1C1C;}
    .row.topo .menus .menu-topo li {float: left;font-size: 14px;text-align: center;flex: 0 0 auto;margin-right: 5px;}
    .row.topo .menus .menu-topo li a {color: #999999;border-left: none;border-top: none;padding-left: 15px;padding-right: 15px;margin-left: 0px;display: table;padding-top: 3px;padding-bottom: 3px;background: #444444;border-radius: 10px;}
    .row.topo .menus .menu-topo li a:hover{color: #fff;}
    .row.topo .menus .menu-topo li a.active{color: #fff;}
    
    .row.topo .menus .menu-topo li.ativo {background: url(../img/seta-ativo-nav.svg) bottom center no-repeat;padding-bottom: 10px;}
    .row.topo .menus .menu-topo li.ativo a{color: #01CBFF;}
    
    /******** ⛔ Fim Topo ********/
    
    
    
    /******* ➡️ Rodapé *******/
    
    .rodape {background: #1C1C1C;margin-top: auto}
    .rodape .container {padding-top: 30px;padding-bottom: 30px;}
    .rodape .col-md-3 {display: table;width: 100%;text-align: center;padding-bottom: 5px;}
    .rodape .col-md-3 img {width: 40px;}
    .rodape .col-md-9 {display: table;width: 100%;text-align: center;}
    .rodape .col-md-9 address {color: #444444;font-size: 14px;float: none;}
    
    /******* ⛔ Fim Rodapé *******/
    

    .login{min-height:auto;height:auto;background-color:#1C1C1C;}
    
    .login div.login-side-img{border-radius: 0px;min-height:auto;height:auto;display: flex;align-items:center;justify-content: center;overflow: hidden;}
    .login div.login-side-img img{width:80%;max-width: 500px;max-height: 50vh;object-fit: contain;margin: 0 auto;display: block;}
    
    .login div.login-side-form{min-height:auto;height:auto;display : inherit;align-items:inherit;}
    .login div.login-side-form img.logo{width: 180px;max-width: 70%;height: auto;margin-bottom: 60px;}
    .login div.login-side-form div.inner-login-form{padding-top: 30px;padding-bottom: 30px;margin:0 auto;}
    .login-rodape{position: inherit;z-index:inherit;bottom: 0px;width: 100%;}

    
    }
    
    /******** ⛔ Fim Até 930px ********/
    


    
    
    
    /* Estilização para o botão de exibir/ocultar senha */
    .password-toggle {
      font-size: 0.9em;
      color: #01CBFF;         
      cursor: pointer;
      margin-left: 10px;
      user-select: none;
      background: none;      
      border: none;          
      padding: 0;
    }
    
    /* Efeito de hover para indicar interatividade */
    .password-toggle:hover {
      text-decoration: underline;
    }
    
 input.padrao {
   background-color: #333333; /* Cor de fundo escura */
   color: white; /* Texto branco */
   padding: 8px;
   border-radius: 4px; /* se quiser cantos levemente arredondados */
}

input.padrao::placeholder {
background-color: #333333; /* Cor de fundo escura */
color: white; /* Texto branco */
}

    


/* 🔹 Ajusta o input dentro da classe vendedor-input */
    input.vendedor-input {
        width: 100%; /* Garante que ocupe toda a largura do container */
        max-width: 100%; /* Evita restrições desnecessárias */
        padding: 8px 12px;
        font-size: 16px;
        border-radius: 8px;
        background-color: #333333; /* Cor de fundo escura */
        color: white; /* Texto branco */
        outline: none;
    }
    
    /* 🔹 Adiciona efeito de foco para destacar */
    input.vendedor-input:focus {
        border-color: #01CBFF;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
    }
    
    /* 🔹 Estiliza o placeholder para maior legibilidade */
    input.vendedor-input::placeholder {
        color: rgba(255, 255, 255, 0.6); /* Deixa o placeholder visível */
    }
    
    /* 🔹 Corrige problemas do LI que pode estar interferindo */
    .row.mtoptrinta .col-md-6 li {
        list-style: none; /* Remove bolinhas de lista */
        margin: 0;
        padding: 0;
    }
    
    /* 🔹 Define uma altura fixa e rolagem para a tabela de empresas */
    .tabela-empresas-container {
        max-height: 400px; /* Ajuste conforme necessário */
        overflow-y: auto;
    }
    
    /* 🔹 Ajusta a tabela para ocupar a área corretamente */
    .tabela-empresas-container table {
        width: 100%;
        border-collapse: collapse;
    }
    
    /* 🔹 Define um espaçamento e melhora a visibilidade */
    .tabela-empresas-container th,
    .tabela-empresas-container td {
        padding: 10px;
        text-align: left;
    }
    
    /* 🔹 Estilização da paginação */
    #paginacao-favoritos.paginacao {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px; /* Ajuste para manter espaçamento proporcional */
        margin-top: 20px;
    }
    
    .paginacao a {
        padding: 8px 14px;
        border: 1px solid #01CBFF;
        color: #01CBFF;
        text-decoration: none;
        border-radius: 15px;
        font-size: 16px;
        transition: all 0.3s ease-in-out;
    }
    
    .paginacao a.ativo {
        background-color: #333333;
        color: white;
    }
    
    .paginacao a:hover {
        background-color: rgba(1, 203, 255, 0.2);
    }
    
    /* 🔹 Ajuste para o botão de 'Anterior' e 'Próximo' */
    .paginacao a.prev,
    .paginacao a.next {
        border-radius: 15px;
        padding: 8px 20px;
    }
    
    /* 🔹 Efeito ao clicar */
    .paginacao a:active {
        transform: scale(0.95);
    }
    
/* ✅ Corrige a posição dos botões de paginação */
#paginacao-notas.paginacao {
  clear: both;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}


    
    /* 🔹 Estiliza a lista de sugestões de vendedores */
    .sugestoes-vendedores {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(42, 42, 42, 0.95); /* Fundo escuro translúcido */
        color: #ffffff;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        max-height: 220px;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        border: 1px solid #0099CC;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out;
    }
    
    /* 🔹 Exibe a lista quando houver sugestões */
    .sugestoes-vendedores.ativo {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    /* 🔹 Estiliza os itens da lista */
    .sugestoes-vendedores li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both;
        padding: 8px 15px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out;
    }
    
    /* 🔹 Efeito ao passar o mouse */
    .sugestoes-vendedores li:hover {
        background: #01CBFF;
        color: #232323;
        font-weight: bold;
    }
    /* 🔹 Mensagem de "Nenhum resultado encontrado" */
    .sugestoes-vendedores .sem-resultados {
        padding: 12px;
        text-align: center;
        color: #999999;
        font-style: italic;
    }

    .filtro-vendedor-wrapper{max-height:600px;opacity:1;transform:translateY(0);overflow:hidden;transition:max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;}
    .filtro-vendedor-wrapper.oculto{max-height:0;opacity:0;transform:translateY(-6px);margin-top:0 !important;pointer-events:none;}

    /* === Filtros consolidados — módulo Arquivos (linha única) === */
    body.minha-carteira .row.filtros .filtros-arquivos-bar {
        margin: 0;
        padding: 18px 20px;
        background: #2A2A2A;
        border: 1px solid #333333;
        border-radius: 12px;
    }
    body.minha-carteira .row.filtros .filtros-arquivos-linha {
        display: flex;
        align-items: flex-end;
        gap: 24px;
        flex-wrap: wrap;
    }
    body.minha-carteira .row.filtros .filtro-grupo {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }
    body.minha-carteira .row.filtros .filtro-grupo-ordenar { flex: 0 0 auto; min-width: 110px; }
    body.minha-carteira .row.filtros .filtro-grupo-status  { flex: 0 0 auto; }
    body.minha-carteira .row.filtros .filtro-grupo-palavra { flex: 1 1 240px; min-width: 220px; }
    body.minha-carteira .row.filtros .filtro-grupo-vendedor { flex: 1 1 320px; min-width: 280px; }
    body.minha-carteira .row.filtros .filtro-grupo-label {
        margin: 0;
        color: #BFBFBF;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }
    body.minha-carteira .row.filtros .filtros-arquivos-linha select.padrao,
    body.minha-carteira .row.filtros .filtros-arquivos-linha input.txt,
    body.minha-carteira .row.filtros .filtros-arquivos-linha input.padrao {
        margin: 0;
        width: 100%;
        min-width: 0;
        height: 42px;
        background-color: #1C1C1C;
        border: 1px solid #333333;
        border-radius: 8px;
    }
    body.minha-carteira .row.filtros .filtros-arquivos-linha select.padrao:focus,
    body.minha-carteira .row.filtros .filtros-arquivos-linha input.txt:focus,
    body.minha-carteira .row.filtros .filtros-arquivos-linha input.padrao:focus {
        background-color: #1C1C1C;
        border-color: #01CBFF;
    }
    body.minha-carteira .row.filtros .filtro-checkboxes {
        display: flex;
        align-items: center;
        gap: 18px;
        height: 42px;
    }
    body.minha-carteira .row.filtros .filtro-checkboxes label {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    body.minha-carteira .row.filtros .filtro-input-icone { position: relative; width: 100%; }
    body.minha-carteira .row.filtros .filtro-input-icone > i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        font-size: 13px;
        pointer-events: none;
        z-index: 1;
    }
    body.minha-carteira .row.filtros .filtro-input-icone input { padding-left: 34px; }
    body.minha-carteira .row.filtros .filtro-vendedor-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    body.minha-carteira .row.filtros .filtro-vendedor-row > .filtro-input-icone { flex: 1; }
    body.minha-carteira .row.filtros .filtro-vendedor-row .bt { white-space: nowrap; }
    body.minha-carteira .row.filtros .filtros-arquivos-bar .filtro-vendedor-wrapper {
        overflow: visible;
        max-height: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    body.minha-carteira .row.filtros .filtros-arquivos-bar .filtro-vendedor-wrapper.oculto { display: none; }
    body.minha-carteira .row.filtros .filtros-arquivos-extras {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
    }
    body.minha-carteira .row.filtros .filtros-arquivos-extras:empty { display: none; }
    body.minha-carteira .row.filtros .filtros-arquivos-extras > div:empty { display: none; }
    @media (max-width: 991px) {
        body.minha-carteira .row.filtros .filtros-arquivos-linha { gap: 16px; }
        body.minha-carteira .row.filtros .filtro-grupo-palavra,
        body.minha-carteira .row.filtros .filtro-grupo-vendedor { flex-basis: 100%; }
    }

    /* === Filtros consolidados — módulo Reuniões === */
    body.minha-carteira .row.filtros .filtro-grupo-modalidade { flex: 0 0 auto; min-width: 150px; }
    body.minha-carteira .row.filtros .filtro-grupo-periodo    { flex: 0 0 auto; min-width: 200px; }

    body.minha-carteira .row.filtros .filtro-periodo {
        position: relative;
        width: 100%;
    }
    body.minha-carteira .row.filtros .filtro-periodo-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 42px;
        padding: 0 12px;
        background-color: #1C1C1C;
        color: #ffffff;
        border: 1px solid #333333;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    body.minha-carteira .row.filtros .filtro-periodo-trigger:hover { border-color: #01CBFF; }
    body.minha-carteira .row.filtros .filtro-periodo-trigger.ativo {
        border-color: #01CBFF;
        background-color: rgba(1, 203, 255, 0.12);
    }
    body.minha-carteira .row.filtros .filtro-periodo-trigger .filtro-periodo-icone { color: #888; }
    body.minha-carteira .row.filtros .filtro-periodo-trigger .filtro-periodo-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.minha-carteira .row.filtros .filtro-periodo-trigger .filtro-periodo-chevron {
        color: #888;
        font-size: 11px;
        transition: transform 0.15s ease;
    }
    body.minha-carteira .row.filtros .filtro-periodo.aberto .filtro-periodo-chevron { transform: rotate(180deg); }

    body.minha-carteira .row.filtros .filtro-periodo-popup {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        background: #2a2a2a;
        border: 1px solid #444444;
        border-radius: 8px;
        padding: 14px;
        z-index: 100;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        min-width: 260px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    body.minha-carteira .row.filtros .filtro-periodo-popup[hidden] { display: none; }
    body.minha-carteira .row.filtros .filtro-periodo-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    body.minha-carteira .row.filtros .filtro-periodo-row label {
        margin: 0;
        color: #cccccc;
        font-size: 12px;
        font-weight: 400;
    }
    body.minha-carteira .row.filtros .filtro-periodo-row input[type="date"] {
        width: 100%;
        height: 36px;
        background-color: #333333;
        color: #ffffff;
        border: 1px solid #444444;
        border-radius: 4px;
        padding: 0 10px;
        font-family: inherit;
        font-size: 13px;
    }
    body.minha-carteira .row.filtros .filtro-periodo-row input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }
    body.minha-carteira .row.filtros .filtro-periodo-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 2px;
    }
    body.minha-carteira .row.filtros .filtro-periodo-actions .bt { margin: 0; }

    /* 🔹 Estiliza a lista de sugestões de gestores */
.sugestoes-gestores {
    display: none;
    position: absolute;
    width: calc(100% - 20px); /* Para ocupar toda a largura do input */
    background: rgba(42, 42, 42, 0.95); /* Fundo escuro translúcido */
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    z-index: 10;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #0099CC;
}

/* 🔹 Exibe a lista quando houver sugestões */
.sugestoes-gestores.ativo {
    display: block;
}

/* 🔹 Estiliza os itens da lista */
.sugestoes-gestores li {
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
}

/* 🔹 Efeito ao passar o mouse */
.sugestoes-gestores li:hover {
    background: #01CBFF;
    color: #232323;
    font-weight: bold;
}

/* 🔹 Mensagem de "Nenhum resultado encontrado" */
.sugestoes-gestores .sem-resultados {
    padding: 12px;
    text-align: center;
    color: #999999;
    font-style: italic;
}


    /* 🔹 Ajusta a posição caso necessário */
    .row.mtoptrinta {
        position: relative;
    }
    
   #vendedores-section {
  display: none;
}

#vendedores-section.show {
  display: block !important;
}
 
table.padrao {

}
    
table.padrao th, table.padrao td {
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}
    
    
.texto-branco {
  color: white;
}    
    
    
 .anexos {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
}

.anexos li a {
  color: #fff;
  font-size: 0.85em;
  text-decoration: underline;
}   
    
.editando {
  border: 1px solid #33D6FF; /* azul claro */
  border-radius: 4px;
  padding: 2px 4px;
  outline: none;
}
 

  .popup-compartilhar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9990;
}
.popup-compartilhar.mostrar {
  display: flex;
}

.popup-compartilhar .bg-dark{
  position: fixed;
  inset: 0;
  z-index: 0;
}

.popup-compartilhar .box-bg{
  z-index: 1;
}

#modal-editar-empresa-checkboxes{
  background: #333333;
  border-radius: 8px;
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
}

#modal-editar-empresa-checkboxes label{
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #444444;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#modal-editar-empresa-checkboxes label:hover{
  background-color: #444444;
  border-color: #01CBFF;
}

#modal-editar-empresa-checkboxes input[type="checkbox"]{
  accent-color: #01CBFF;
  width: 16px;
  height: 16px;
}



.popup-compartilhar input.txt {
  width: 100%;
  background: #333333;
  color: #fff;
  border-radius: 5px;
  padding: 8px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.popup-compartilhar input.txt:focus {
  border: 1px solid #01CBFF;
  box-shadow: 0 0 10px rgba(1, 203, 255, 0.2);
  outline: none;
}

.popup-compartilhar select.padrao:focus {
  border: 1px solid #01CBFF;
  box-shadow: 0 0 10px rgba(1, 203, 255, 0.2);
  outline: none;
}


  .popup-compartilhar .box-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #444444;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.25s ease-out;
}

.popup-compartilhar label {
  display: block;
  margin-bottom: 5px; /* Espaço entre label e input */
  font-size: 14px;
  color: #999999;
}

.popup-compartilhar .grupo-campo {
  margin-bottom: 15px; /* Espaço entre os grupos */
}

.btn-fechar-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 50%;
  background: #FF8486;
  color: #232323;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}



@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* 🔹 Quando mostrar, aplicar efeito de zoom e fade in */
.popup-compartilhar.mostrar .box-bg {
  animation: modalEntry 0.3s ease-out forwards;
}

@keyframes modalEntry {
  from { 
    opacity: 0; 
    transform: translate(-50%, -60%); 
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, -50%); 
  }
}


.popup-compartilhar div.box-bg p{}
.popup-compartilhar div.box-bg input{}
.popup-compartilhar div.box-bg button{margin-right: 5px;}


.compartilhar-box {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 999;
}

.compartilhar-box.mostrar {
  display: block;
}


input[type="date"].txt::-webkit-calendar-picker-indicator {
  filter: invert(1); /* inverte para branco */
}

/* 🔹 Autocomplete de Equipe */
.sugestoes-equipe {
  position: absolute;
  background: #333333;
  border: 1px solid #444444;
  border-radius: 8px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 5px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  padding: 0;
  list-style: none;
}

.sugestoes-equipe.ativo {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.sugestoes-equipe li {
  padding: 12px 15px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
}

.sugestoes-equipe li:last-child {
  border-bottom: none;
}

.sugestoes-equipe li:hover {
  background: #444444;
  color: #01CBFF;
  padding-left: 20px;
}

.sugestoes-equipe li.sem-resultados {
  cursor: default;
  color: #999999;
  font-style: italic;
  text-align: center;
  padding: 15px;
}

.sugestoes-equipe::-webkit-scrollbar {
  width: 10px;
}

.sugestoes-equipe::-webkit-scrollbar-track {
  background-color: #1C1C1C;
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
 
.sugestoes-equipe::-webkit-scrollbar-track-piece {
  background-color: #1C1C1C;
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sugestoes-equipe::-webkit-scrollbar-thumb {
  background-color: #33D6FF;
  border-radius: 100px;
  border: 2px solid #1C1C1C;
  background-clip: padding-box;
}


/* 🔹 Estiliza a lista de sugestões de referências */
.sugestoes {
    display: none; /* Escondido por padrão */
    position: absolute;
    width: calc(100% - 20px);
    background: rgba(42, 42, 42, 0.95);
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    z-index: 10;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #0099CC;
}

/* 🔹 Exibe a lista quando houver sugestões */
.sugestoes.ativo {
    display: block;
}

/* 🔹 Estiliza os itens da lista */
.sugestoes li {
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
}

/* 🔹 Efeito ao passar o mouse */
.sugestoes li:hover {
    background: #01CBFF;
    color: #232323;
    font-weight: bol
}

 /* 🔹 Estiliza a lista de sugestões de participantes */
.sugestoes-participantes {
    display: none; /* Escondido por padrão */
    position: absolute;
    width: calc(100% - 20px); /* Mesma largura do input */
    background: rgba(42, 42, 42, 0.95); /* Fundo escuro translúcido */
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    z-index: 10;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #0099CC;
}

/* 🔹 Exibe a lista quando houver sugestões */
.sugestoes-participantes.ativo {
    display: block;
}

/* 🔹 Estiliza os itens da lista */
.sugestoes-participantes li {
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
}

/* 🔹 Efeito ao passar o mouse */
.sugestoes-participantes li:hover {
    background: #01CBFF;
    color: #232323;
    font-weight: bold;
}

/* 🔹 Mensagem de "Nenhum resultado encontrado" */
.sugestoes-participantes .sem-resultados {
    padding: 12px;
    text-align: center;
    color: #999999;
    font-style: italic;
}
       
.toggle-olho {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }

ul.sugestoes-contato {
    display: none; /* Escondido por padrão */
    position: absolute;
    width: calc(100% - 20px); /* Mesma largura do input */
    background: rgba(42, 42, 42, 0.95); /* Fundo escuro translúcido */
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    z-index: 10;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #0099CC;
}
ul.sugestoes-contato li {
  padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
}
ul.sugestoes-contato li:hover {
  background: #01CBFF;
  color: #232323;
  font-weight: bold;
}

ul.sugestoes-contato .sem-resultados {
  padding: 12px;
  text-align: center;
  color: #999999;
  font-style: italic;
}

ul.sugestoes-contato.ativo {
    display: block;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.tag {
  background-color: #01CBFF;
  color: #232323;
  padding: 5px 10px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  font-size: 13px;
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

.tag .remove-tag {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  opacity: 0.85;
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.tag .remove-tag:hover{opacity:1;transform:scale(1.08);}


.linha-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 4px;
}

.autor-nome {
  color: white;
}

.tag-nivel {
  background: linear-gradient(0deg, #8A9945 0%, #E5FF73 100%);
  color: #232323;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-block;
}

.data-hora {
  color: #FFFFFF;
}

.tag-privada {
  background: #01CBFF;
  color: #232323;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: inline-block;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 🔹 Caixa visual de campanhas estilo dropdown */
#campanha-checkboxes {
  background: #333333;
  /* border: 1px solid #01CBFF; */
  border-radius: 8px;
  padding: 10px;
  max-height: 200px; /* Altura fixa com rolagem */
  overflow-y: auto;
  display: none;
  width: 100%;
}

/* 🔹 Cada item de campanha */
#campanha-checkboxes label {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #444444;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

#campanha-checkboxes label:hover {
  background-color: #444444;
  border-color: #01CBFF;
}

/* 🔹 Checkbox */
#campanha-checkboxes input[type="checkbox"] {
  accent-color: #01CBFF;
  width: 16px;
  height: 16px;
}

.numeros-paginacao {
  display: flex;
  flex-wrap: nowrap; /* ou wrap se quiser adaptação */
  gap: 6px;
}

ul.mbottomtrinta.fechado .form-contato {
  display: none !important;
}

.popup-compartilhar {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.popup-compartilhar.mostrar {
  display: flex;
}

/* Estilo visual ao arrastar arquivos */
.campo-anexar.arrastando {
  border-color: #01CBFF;
  background-color: #2A2A2A;
  box-shadow: 0 0 10px #01CBFF;
  transition: all 0.2s ease-in-out;
}

.campo-anexar.arrastando h2,
.campo-anexar.arrastando h6 {
  color: #01CBFF;
  transition: color 0.2s ease-in-out;
}

/* 🔹 Custom File Upload para o Modal de Notas */
.custom-file-upload {
  position: relative;
  width: 100%;
}

#btn-custom-anexo {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: #333333;
  border: 1px dashed #444444;
  border-radius: 6px;
  color: #999999;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#btn-custom-anexo:hover {
  border-color: #01CBFF;
  color: #01CBFF;
  background: #444444;
}

#info-anexo-modal {
  display: none;
  margin-top: 8px;
  background: #333333;
  padding: 8px 12px;
  border-radius: 6px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #444444;
  animation: fadeIn 0.3s ease;
}

#nome-arquivo-modal {
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 85%;
}

#remover-anexo-modal {
  background: #FF8486;
  border: none;
  color: #232323;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.2s ease;
}

#remover-anexo-modal:hover {
  transform: scale(1.1);
  background: #ff5c5e;
}

/* Aplica rolagem interna se o conteúdo do modal passar da altura */
.modal-reembolso {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden; /* ✅ remove scroll horizontal */
  padding-right: 8px;
}

body.modal-aberto {
  overflow: hidden;
}

.modal-reembolso::-webkit-scrollbar {
  width: 14px;
}

.modal-reembolso::-webkit-scrollbar-track {
  background-color: #1C1C1C;
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
}
 
.modal-reembolso::-webkit-scrollbar-track-piece {
  background-color: #1C1C1C;
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
}

.modal-reembolso::-webkit-scrollbar-thumb {
  background-color: #33D6FF;
  border-radius: 100px;
  border: 4px solid #1C1C1C;
  background-clip: padding-box;
}

.modal-reembolso::-webkit-scrollbar-thumb:hover {
  background-color: #0099CC;
}

.modal-padrao .bg-azul p {
  word-break: break-word;
  white-space: normal;
}

 #tabelaFiliais a.bt-pequeno.btn-detalhes-filial {
    opacity: 1 !important;
    cursor: pointer !important;
  }

/******** ➡️ Até 768px ********/
    
    @media all and (max-width: 767px) {
    span.a1200{display: none;}span.a1199{display: none;}span.a930{display: none;}span.a768{display: block;}span.a600{display: none;}span.a400{display: none;}
    
    }
    
    /******** ⛔ Fim Até 768px ********/
    
    
    
    
    
    
    
    /******** ➡️ Até 600px ********/
    
    @media all and (max-width: 600px) {
    span.a1200{display: none;}span.a1199{display: none;}span.a930{display: none;}span.a768{display: none;}span.a600{display: block;}span.a400{display: none;}
    
    }
    
    /******** ⛔ Fim Até 600px ********/
    
    
    
    
    
    
    
    /******** ➡️ Até 400px ********/
    
    @media all and (max-width: 400px) {
    span.a1200{display: none;}span.a1199{display: none;}span.a930{display: none;}span.a768{display: none;}span.a600{display: none;}span.a400{display: block;}
    
    
    
    }
    
    /******** ⛔ Fim Até 400px ********/

  
#fechar-modal-equipe, #fechar-modal-contato, #modal-editar-empresa-fechar{width: 40px;height: 40px;padding: 0px;text-align: center;vertical-align: 40px;top: -20px !important;right: -20px !important;}

.pastas-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 40px;
}

@media (max-width: 1400px) {
  .pastas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 991px) {
  .pastas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pastas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pastas-grid {
    grid-template-columns: 1fr;
  }
}
.pasta-card{display:block;border:1px solid #555555;border-radius:8px;padding:16px;text-align:center;color:#fff;background:#2A2A2A;transition:transform .25s ease-in-out, background .25s ease-in-out, border-color .25s ease-in-out}
.pasta-card.bg-azul{background:#2A2A2A}
.pasta-card:hover{transform:translateY(-2px);background:#333333;border-color:#666666}
.pasta-icone img{width:48px;height:48px;display:block;margin:0 auto 8px}
.pasta-card h6{margin:6px 0 2px}
.pasta-card p{font-size:13px;color:#999999}
.pasta-card .badge{display:inline-block;margin-top:8px;font-size:12px;color:#01CBFF}
.skeleton-card{position:relative;overflow:hidden}
.skeleton-icone{width:48px;height:48px;border-radius:8px;background:#444444;margin:0 auto 8px}
.skeleton-line{height:14px;border-radius:6px;background:#444444}
.skeleton-badge{height:12px;border-radius:12px;background:#2A425C}
.skeleton-card::after{content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;background:linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%);animation: shimmer 1.2s ease-in-out infinite}
@keyframes shimmer{100%{left:150%}}
.row.topo,.row.nav{transition:opacity .32s ease-in-out, transform .32s ease-in-out}
.row.topo.chrome-hidden,.row.nav.chrome-hidden{opacity:0;transform:translateY(-6px)}

/* =========================================
   Modal Detalhes do Negócio
   ========================================= */

.modal-content-large {
    background: #1C1C1C;
    border: 1px solid #333333;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header-custom h2 {
    margin: 0;
    line-height: 1.2;
}

/* Tags */
.modal-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid #444444;
    color: #999999;
    background: #1C1C1C;
    text-transform: uppercase;
}

/* Timeline */
.timeline-container {
    position: relative;
    padding-left: 10px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 20px;
    bottom: -30px;
    width: 2px;
    background: #333333;
    z-index: 0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #01CBFF;
    font-size: 16px;
    z-index: 1;
    flex-shrink: 0;
    border: 2px solid #1C1C1C;
}

.timeline-content {
    flex: 1;
    padding-top: 5px;
}

.timeline-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.timeline-desc {
    font-size: 14px;
    color: #999999;
    margin-bottom: 8px;
    line-height: 1.5;
}

.timeline-meta {
    font-size: 12px;
    color: #777777;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Stepper (Etapa Atual) */
.stepper-item {
    padding: 8px 14px;
    color: #777777;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #333333;
}

.stepper-item:last-child {
    border-bottom: none;
}

.stepper-item.completed {
    color: #999999;
}

.stepper-item.active {
    background: rgba(1, 203, 255, 0.08);
    color: #01CBFF;
    font-weight: 600;
}


/* Scrollbar Customization */
.modal-main-content::-webkit-scrollbar,
.modal-sidebar::-webkit-scrollbar {
    width: 6px;
}

.modal-main-content::-webkit-scrollbar-track,
.modal-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.modal-main-content::-webkit-scrollbar-thumb,
.modal-sidebar::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

.modal-main-content::-webkit-scrollbar-thumb:hover,
.modal-sidebar::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* Responsive */
@media (max-width: 1024px) {
    .modal-content-large {
        width: 98%;
        height: 95vh;
        max-width: 100%;
    }
    
    .modal-body-custom {
        flex-direction: column;
        overflow-y: auto;
    }

    .modal-main-content {
        border-right: none;
        border-bottom: 1px solid #333333;
        overflow: visible;
        flex: none;
    }

    .modal-sidebar {
        width: 100%;
        overflow: visible;
        flex: none;
        padding-top: 20px;
    }
}

/* ========== Permissões (SUPER ADMIN) ========== */
.perm-toolbar { margin-bottom: 20px; display: flex; align-items: center; }
.perm-grupo { background: rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.perm-grupo-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
.perm-grupo-header:hover { background: rgba(255,255,255,0.08); }
.perm-grupo-toggle { color: #01CBFF; font-size: 12px; width: 16px; text-align: center; }
.perm-grupo-label { flex: 1; color: #fff; font-size: 15px; }
.perm-counter { color: #aaa; font-size: 13px; min-width: 40px; text-align: right; }
.perm-toggle-all { color: #ccc; font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.perm-toggle-all input { cursor: pointer; }
.perm-grupo-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 8px 16px 16px 44px; }
.perm-item { display: flex; align-items: center; gap: 8px; color: #ddd; font-size: 14px; padding: 4px 0; cursor: pointer; }
.perm-item input { cursor: pointer; }
.perm-chave { color: #888; font-size: 11px; font-family: monospace; margin-left: auto; }
.perm-acoes { display: flex; align-items: center; }

.perm-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 9999; transition: opacity 0.3s; pointer-events: none; }
.perm-toast-sucesso { background: #1a6b3c; color: #fff; }
.perm-toast-erro { background: #8b2020; color: #fff; }

@media all and (max-width: 767px) {
  .perm-grupo-body { grid-template-columns: 1fr; padding-left: 20px; }
  .perm-chave { display: none; }
  .perm-toolbar { flex-wrap: wrap; }
}

/* ========== Faixa de Tarefas (Funil) ==========
   VR8_PRINCIPAL #1C1C1C — fundo
   VR8_DESTAQUE  #01CBFF — label/título
   VR8_DETALHE   #FF9800 — alerta (atrasadas)
*/
.tasks-bar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 14px;
  margin: 0;
  background: #1C1C1C;
  border: 1px solid #2A2A2A;
  border-radius: 999px;
  font-size: 13px;
  color: #DDDDDD;
  line-height: 1;
}

/* Variante inline: vive ao lado dos filtros (Foco), não toma uma linha inteira */
.tasks-bar--inline {
  background: #2A2A2A;
  border-color: #333333;
  gap: 12px;
  padding: 7px 16px;
}
.tasks-bar--inline .tasks-bar-label {
  padding-right: 10px;
  height: 18px;
}

.tasks-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #01CBFF;
  padding-right: 16px;
  border-right: 1px solid #2F2F2F;
  height: 22px;
}

.tasks-bar-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease;
}

.tasks-bar-stat:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tasks-bar-stat:focus-visible {
  outline: 2px solid #01CBFF;
  outline-offset: 2px;
}

.tasks-bar-stat-label {
  font-size: 11px;
  color: #BFBFBF;
  text-transform: uppercase;
  font-weight: 600;
}

.tasks-bar-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: left;
}

.tasks-bar-stat--atrasadas .tasks-bar-stat-label,
.tasks-bar-stat--atrasadas > svg {
  color: #FF9800;
}

.tasks-bar-stat--atrasadas.is-zero .tasks-bar-stat-label,
.tasks-bar-stat--atrasadas.is-zero > svg {
  color: #6B6B6B;
}
.tasks-bar-stat--atrasadas.is-zero .tasks-bar-stat-value {
  color: #888;
}

@media all and (max-width: 767px) {
  .tasks-bar { gap: 10px; padding: 4px 10px; }
  .tasks-bar-label { padding-right: 8px; }
}

/* ===== Modal de Tarefas ===== */
.tasks-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10010;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.tasks-modal-overlay[style*="display: flex"],
.tasks-modal-overlay.is-open {
  display: flex !important;
}

.tasks-modal {
  background: #1C1C1C;
  border: 1px solid #2F2F2F;
  border-radius: 12px;
  width: 480px;
  height: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.tasks-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2A2A2A;
}

.tasks-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.tasks-modal-close {
  background: transparent;
  border: 1px solid #333;
  color: #999;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.15s ease;
}
.tasks-modal-close:hover { background: #2A2A2A; color: #fff; }

.tasks-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid #2A2A2A;
}

.tasks-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #BFBFBF;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tasks-modal-tab:hover { color: #FFF; }
.tasks-modal-tab.is-active {
  color: #01CBFF;
  border-bottom-color: #01CBFF;
}
.tasks-modal-tab[data-tab="atrasadas"] > svg { color: #FF9800; }

.tasks-modal-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  background: #2A2A2A;
  color: #FFF;
  border-radius: 999px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tasks-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 14px;
}

.tasks-modal-panel { display: none; }
.tasks-modal-panel.is-active { display: block; }

.tasks-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #232323;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}
.tasks-modal-item:hover {
  background: #2A2A2A;
  border-color: #3A3A3A;
}

.tasks-modal-item-name {
  flex: 1;
  min-width: 0;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-modal-item-stage {
  color: #888;
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-modal-item-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #BFBFBF;
  font-size: 12px;
  font-weight: 600;
  background: #1C1C1C;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tasks-modal-empty {
  padding: 32px 16px;
  text-align: center;
  color: #777;
  font-size: 13px;
}

/* ===== Composição do Score (modal de detalhes do lead) ===== */
.composicao-score-header {
  background: linear-gradient(180deg, #2A2A2A 0%, #232323 100%);
  border: 1px solid #333333;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.composicao-score-header .csh-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.composicao-score-header .csh-label {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.composicao-score-header .csh-valor {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.composicao-score-header .csh-valor small {
  font-size: 14px;
  color: #777;
  font-weight: 500;
  margin-left: 2px;
}
.composicao-score-header .csh-bar {
  width: 100%;
  height: 10px;
  background: #1A1A1A;
  border-radius: 999px;
  overflow: hidden;
}
.composicao-score-header .csh-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease-out;
}
.composicao-score-header .csh-sub {
  margin-top: 10px;
  font-size: 12px;
  color: #888;
}

.composicao-score-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.composicao-score-item {
  background: #232323;
  border: 1px solid #333333;
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.composicao-score-item.is-match { border-color: rgba(34, 197, 94, 0.35); }
.composicao-score-item.is-miss  { border-color: #333333; opacity: 0.92; }

.composicao-score-item .csi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.composicao-score-item .csi-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.composicao-score-item .csi-titulo i { font-size: 14px; }
.composicao-score-item .csi-nome {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.composicao-score-item .csi-tipo {
  font-size: 10px;
  color: #999;
  background: #1C1C1C;
  border: 1px solid #333;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.composicao-score-item .csi-pontos {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.composicao-score-item .csi-pontos .csi-peso {
  font-size: 12px;
  color: #777;
  font-weight: 500;
}

.composicao-score-item .csi-bar {
  width: 100%;
  height: 6px;
  background: #1A1A1A;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.composicao-score-item .csi-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease-out;
}

.composicao-score-item .csi-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.composicao-score-item .csi-linha {
  font-size: 12.5px;
  color: #CCC;
  line-height: 1.5;
}
.composicao-score-item .csi-linha .csi-key {
  color: #888;
  margin-right: 4px;
}
.composicao-score-item .csi-linha .csi-val {
  color: #DDD;
}
.composicao-score-item .csi-linha .csi-detail {
  color: #888;
  font-size: 11.5px;
}
.composicao-score-item .csi-linha.csi-vazio .csi-val {
  color: #666;
  font-style: italic;
}