html, body, h1, h2, h3, h4, h5 {
    font-family: Calibri,sans-serif;
}

.ui-widget {
    font-family: Calibri,sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #0080a0 !important;
    letter-spacing: 4px;
}

@media print {

    @page {
        margin-top: 120px !important;
        margin-bottom: 80px !important;
        margin-left: 100px !important;
        margin-right: 100px !important;
        size: A4;
        width: 21cm;
        height: 29.7cm;
        zoom: 100%;
    }

    #impressao span {
        font-family: Arial !important;
        font-size: 14px !important;
        color: #000 !important;
        letter-spacing: 0px !important;
        font-weight: bold;
    }

    #impressao h5 {
        font-family: Arial !important;
        font-size: 14px !important;
        color: #000 !important;
        letter-spacing: 0px !important;
        font-weight: bold;
    }

    #impressao thead span, #impressao thead br {
        line-height: 0 !important;
    }

    .impressaoSpan {
        display: inline-block !important;
        width: 130px !important;
    }

    .impressaoMarginTop {
        margin-top: 80px !important;
    }

    .impressaoBR {
        display: block !important;
    }
}

@media (max-width:600px) {
    .imgHMD {
        width: 250px !important;
    }

    .w3-left-small {
        float: left !important;
    }
/*
    .btnVerPedido {
        margin-top: 45px !important;
    }*/
}

@media (max-width:900px) {
    .tablePrivilegios {
        width: 250px !important;
    }

}

@media (max-width:1300px) {
    /*.imgHMD {
        width: 650px !important;
    }*/

    .w3-left-small {
        float: left !important;
    }
}

@media (min-width:601px) {
    .w3-show-small {
        display: none !important;
    }

    #footer {
        border-left: 1px solid #cedae3;
        border-right: 1px solid #cedae3;
    }

    header {
      /*  border-left: 1px solid #cedae3;
        border-right: 1px solid #cedae3;*/
    }
}


/*CSS DA IMAGEM DO HMD NA TELA DOS FUNCIONÁRIOS*/
@media (max-width:1300px) {
    .imgHMDFuncionario {
        width: 250px !important;
    }

    .w3-left-small {
        float: left !important;
    }
}

@media (max-width:600px) {
    .imgHMDFuncionario {
        width: 250px !important;
    }

    .w3-left-small {
        float: left !important;
    }
}
/*FIM CSS IMAGEM TELA DOS FUNCIONÁRIOS*/

/*CSS MODAL*/
/*@media(max-width:600px) {
    .modalAdicionaDocumento {
        width: 390px !important;
    }
}

@media(min-width:400px) {
    .modalAdicionaDocumento {
        width: 390px !important;
     
    }
}

@media(min-width:430px) {
    .modalAdicionaDocumento {
        width: 430px !important;
    }
}

@media(min-width:1366px) {
    .modalAdicionaDocumento {
        width: 1366px !important;
    }
}*/
/*FIM CSS MODAL*/

@media(max-width:600px){
    .ssmd-content {
        width: 400px !important;
    }
}


label, span {
    color: #0080a0 !important;
    font-size: 17px !important;
    letter-spacing: 2px;
}

.descricaoQuemSomos, .descricaoQuemSomos2 {
    color: #0080a0 !important;
    font-size: 17px !important;
    letter-spacing: 2px;
}

.ddlAutores {
    color: #0080a0 !important;
    font-size: 17px !important;
    letter-spacing: 2px;
}
/*Label dos input files*/
.labelInput {
    font-size: 15px !important;
    letter-spacing: 1px;
}

.spanNomeArquivo {
    font-size: 20px !important;
    letter-spacing: 1px;
}

/*header {
    border-bottom: 1px solid #cedae3;
}*/

#footer {
    border-top: 1px solid #cedae3;
    width: 100%;
    max-width: 1600px;
    padding-top: 5px;
    background-color: #fff;
    text-align: center;
    position: fixed;
}

#overlayWhite {
    background-color: #fff !important;
    z-index: 9;
}

#login {
    background-color: rgba(255, 255, 255, 0.98);
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 10;
}

    #login .w3-modal-content {
        box-shadow: 0 8px 20px 0 rgba(0,0,0,0.4), 0 8px 40px 0 rgba(0,0,0,0.40) !important;
    }

#divContentLaudo {
    display: none;
}

    #divContentLaudo h4 {
        color: #fff !important
    }

    #divContentLaudo b {
        color: #0080a0 !important
    }

    #divContentLaudo h5, #divContentLaudo span {
        color: #e9e9e9 !important
    }

.arrow:after, .tooltip {
    background-color: #0080a0 !important;
    opacity: 0.8;
    border-color: #fff !important;
    color: #fff !important;
}

.fas {
    margin-left: 5px;
}

#divContent .w3-ul li:first-child {
    border-bottom: none !important;
}

.w3-light-grey {
    background-color: #e8e8e8 !important
}

.w3-button {
    background-color: #0080a0;
    color: #fff !important;
    font-size: 13px !important;
}


    .w3-button i {
        margin-left: 5px;
    }

    .w3-button:hover {
        background-color: black !important;
        color: #fff !important;
        transition: all .5s;
        -webkit-transition: 0.5s;

    }

.btnNaoFinalizaCredenciamentoViaSiteComMensagemVisaoGestorEspecialidade {
    background-color: gray;
    color: #fff !important;
    font-size: 20px !important;
}

.btnNaoFinalizaCredenciamentoViaSiteComMensagemVisaoGestorEspecialidade i {
    margin-left: 5px;
}

.btnNaoFinalizaCredenciamentoViaSiteComMensagemVisaoGestorEspecialidade:hover {
    background-color: black !important;
    color: #fff !important;
    transition: all .5s;
    -webkit-transition: 0.5s;
}


.liItem:hover, .liItemExterno:hover, .liItemRamais:hover, .liItemLinks:hover, .liItemFichas:hover, .liItemOperadora:hover, .liItemMedicoCredenciamento:hover, .liItemMedicosExpiradosSCRE:hover, .liItemMedicosJubiladosMV:hover, .liItemProtocolo:hover {
    cursor: pointer;
    background-color: #0080a0 !important;
    color: #fff !important;
    transition: all 0.8s;
    -webkit-transition: 0.8s;
}

    .liItem:hover span, .liItemExterno:hover, .liItemRamais:hover span, .liItemLinks:hover span, .liItemFichas:hover span, .liItemOperadora:hover span, .liItemMedicoCredenciamento:hover span, .liItemMedicosExpiradosSCRE:hover span, .liItemMedicosJubiladosMV:hover span, .liItemProtocolo:hover span {
        color: #fff !important;
        transition: all 0.7s;
        -webkit-transition: 0.7s;
    }

.liItemMedicoMV div {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .liItemMedicoMV div:hover {
        background-color: #004b5e !important;
        padding-left: 20px;
        color: #fff !important;
        border: 1px solid #fff !important;
        transition: all 0.5s;
        -webkit-transition: 0.5s;
    }



.despesquisa {
    text-decoration: underline;
}

    .despesquisa:hover {
        color: #0080a0 !important
    }

.btnVerPedido {
    font-size: 16px !important;
    margin-top: 25px;
    margin-left: 2px;
}

.datepick {
    width: 200px;
    text-align: center;
}

.w3-input {
    outline: none;
    transition: all .5s;
    -webkit-transition: 0.5s;
    letter-spacing: 1px;
}

    .w3-input:hover {
        border: 1px solid #0080a0 !important;
        transition: all .5s;
        -webkit-transition: 0.5s;
    }

    .w3-input:focus {
        border: 1px solid #004b5e !important;
        transition: all .5s;
        -webkit-transition: 0.5s;
    }

.w3-underline {
    text-decoration: underline;
    cursor: pointer;
}

    .w3-underline:hover {
        color: #004b5e !important;
    }

span.w3-btn:hover {
    color: #fff !important;
    background-color: #0080a0 !important;
    transition: all .5s;
    -webkit-transition: 0.5s;
}

.w3-btnClose {
    background-color: #fff !important;
    color: #0080a0 !important;
    font-size: 32px !important;
}

.w3-clear-both {
    clear: both;
}

.w3-font-color {
    color: #0080a0 !important;
}

    .w3-font-color:hover {
        color: #004b5e !important;
        cursor: pointer !important;
        transition: all .5s;
        -webkit-transition: 0.5s;
    }

.w3-text-color {
    color: #004b5e !important;
}

.w3-background {
    background-color: #004b5e !important;
}

.ui-datepicker {
    width: 22em !important;
}

.ui-datepicker-month, .ui-datepicker-year {
    color: #0080a0 !important;
}

.ui-datepicker-header {
    background-color: #0080a0 !important;
    color: #fff !important;
}

    .ui-datepicker-header span {
        color: #fff !important;
    }

.ui-datepicker-today .ui-state-highlight {
    border: 1px solid #0080a0 !important;
    background: #bbe3ed !important;
    color: #0080a0 !important;
}

.ui-icon-circle-triangle-w, .ui-icon-circle-triangle-e {
    background-image: url(../js/jquery-ui/images/ui-icons_ffffff_256x240.png) !important;
}

.ui-state-active {
    border: 1px solid #bbe3ed !important;
    background: #0080a0 !important;
    font-weight: normal;
    color: #ffffff;
}

.ui-slider-handle {
    background: #bbe3ed !important;
    border: 1px solid #bbe3ed !important;
    width: 2em !important;
}

.ui-state-hover {
    background-color: #bbe3ed !important;
}

.ui-visual-focus {
    box-shadow: none !important;
}

.ui-checkboxradio-label i {
    font-size: 20px;
}

.ui-checkboxradio-label b {
    margin-left: 5px;
}

.ui-checkboxradio-radio-label, .ui-checkboxradio-label {
    margin: 3px;
}

.ui-button.ui-checkboxradio-label, .w3-checkbox {
    border: 1px solid #ccc !important;
    border-radius: 0px !important;
    background: #fff !important;
    font-weight: normal !important;
    color: #0080a0 !important;
    outline: none !important;
}

    .ui-button.ui-checkboxradio-label.ui-state-active {
        border: 1px solid #004b5e !important;
        background: #0080a0 !important;
        font-weight: normal !important;
        color: #ffffff !important;
        outline: none !important;
        -webkit-transition: 0.5s;
    }

        .ui-button.ui-checkboxradio-label.ui-state-active:hover, .ui-button.ui-checkboxradio-label:hover {
            border: 1px solid #004b5e !important;
            background: #004b5e !important;
            font-weight: normal !important;
            color: #ffffff !important;
            outline: none !important;
            -webkit-transition: 0.5s;
        }

section.alertify {
    border: 4px solid #0080a0;
}

.alertify-button-ok {
    background-color: #0080a0 !important;
    border: 1px solid #004b5e !important;
}

#rc-imageselect {
    transform: scale(0.77) !important;
    -webkit-transform: scale(0.77) !important;
    transform-origin: 0 0 !important;
    -webkit-transform-origin: 0 0 !important;
}


.column {
    float: left;
    width: 35%;
    padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {
    margin: 0 -5px;
}

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

/* Style the counter cards */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    padding: 16px;
    text-align: center;
    background-color: #f1f1f1;
    cursor:pointer;
}
.cardFuncionalidades {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    padding: 1px;
    text-align: center;
    background-color: #f1f1f1;
    cursor: pointer;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}


/*CSS TABLES DO AESC.SISTEMAS*/
.ssmd-content {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #d9e2e5 !important;
    min-height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 10px 10px 0 rgba(0,0,0,0.2) !important;
}

.foo {
    overflow-x: auto;
    overflow-y: auto;
}

.ssmd-content label {
    padding-left: 20px;
    color: #4d7498;
    font-weight: bold;
}

.ssmd-content .ssmd-input {
    margin-right: 5px;
}

.ssmd-div-filter {
    float: left;
}

.ssmd-grid {
    border: 1px solid #28a4c9;
    margin: 10px 20px 0px 20px;
    background-color: #fff;
    border-radius: 5px;
}

    .ssmd-grid table tbody tr:hover {
        background-color: #133f67 !important;
        color: #fff !important;
        -webkit-transition: 0.3s;
    }



/*css da table dentro do modal modalDocumentacaoNovoPortalMedico que faz o efeito cor azul quando passa o mouse na coluna da tabela */
.ssmd-gridModal table tbody td:hover {
    background-color: #133f67 !important; /*#133f67*/
    color: #fff !important;
    -webkit-transition: 0.3s;
}
.ssmd-gridModal {
    border: 1px solid #28a4c9;
    margin: 10px 20px 0px 20px;
    background-color: #fff;
    border-radius: 5px;
}
.ssmd-pagina {
    margin-bottom: 5px;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #7ccee6;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    color: #133f67;
}

thead {
    background-color: #28a4c9;
    color: #FFF;
    font-size: 12px;
}

#tableItens thead, .tableItens thead {
    font-weight: bold;
}

td, th {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    text-align: left;
    padding: 6px;
}

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

#tableItens tbody tr:nth-child(odd), .tableItens tbody tr:nth-child(odd) {
    background-color: #eff2f6;
}

.ssmd-div-content {
    margin: 0px 20px 20px 20px;
}

.ssmd-title-link {
    cursor: pointer;
}

    .ssmd-title-link:hover {
        color: #4d7498 !important;
        font-style: italic;
    }


.w3-quarter {
    cursor: pointer;
}

    .w3-quarter:hover {
        color: #4d7498 !important;
        font-style: italic;
    }



.ssmd-border:focus, .ui-datepicker-month:focus, .ui-datepicker-year:focus {
    border: 1px solid #4d7498 !important;
    -webkit-transition: 0.5s;
}

.ssmd-border:hover, .ui-datepicker-month:hover, .ui-datepicker-year:hover {
    border: 1px solid #28a4c9 !important;
    -webkit-transition: 0.5s;
}

.ssmd-border, .ui-datepicker-month, .ui-datepicker-year {
    border: 1px solid #9aafc2 !important;
    outline: none;
}

.ssmd-spinner {
    outline: none;
}

#contentDocumento {
    text-align: center;
}

#botoesDoumentos {
    text-align: center;
}

.headerModal {
    background-color: #0080a0 !important;
}

.footerModal {
    background-color: #0080a0 !important;
}

.hoverModalAvisoRecadastro {
    
    margin: 10px 20px 0px 20px;
    background-color: #fff;
    border-radius: 5px;
}

    .hoverModalAvisoRecadastro table tbody tr:hover {
        background-color: #133f67 !important;
        color: #fff !important;
        -webkit-transition: 0.3s;
    }

/*TESTE*/

.column {
    float: left;
    width: 50%;
    border-style: groove;
    border-color: #0080a0 !important;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=file] {
    min-width: 100%;
}


.navbar {
    overflow: hidden;
    background-color: #333;
}

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
       
    }

.required:after {
    content: " *" !important;
    color: red !important;
}


.InputCheckError, .InputCheckError:hover, .InputCheckError:focus {
    border-left-width: 4px !important;
    border-left-color: darkorange !important;
    border-left-style: solid !important;
    background-color: hsl(36.52deg 100% 50% / 50%) !important;
}

* {
    box-sizing: border-box
}

/* Slideshow container */
* {
    box-sizing: border-box
}

.mySlides {
    display: none
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    width: 97% !important;
    position: relative;
    margin: auto;
}


.banner-img {
    display: block; /* remove espaços/linhas extras */
    width: 100%; /* ocupa toda a largura do container */
    height: auto; /* mantém proporção, sem corte */
    max-height: 65vh; /* limita altura em telas pequenas para não empurrar demais o conteúdo */
}

/* Em smartphones (<= 480px), limite ainda mais a altura */
@media (max-width: 480px) {
    .banner-img {
        max-height: 50 max-height: 50vh;
    }
}


/*CARDS COM DADOS DO BI RESPONSIVO*/

/* Container geral */
.painel-ocupacao {
    margin-bottom: 56px; /* menos exagerado que 100px, ajusta em mobile */
    padding-inline: 8px; /* respiro lateral em telas pequenas */
}

/* Cartão pai */
.painel-wrapper {
    border-radius: 12px;
    padding: 16px;
    margin: 0 auto;
    max-width: 1200px; /* limita no desktop */
    
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Cabeçalho */
.painel-header {
    letter-spacing: 0.06em; /* moderado para mobile */
    color: #175d6e; /* tom coerente ao azul HMD */
    font-weight: 600;
    font-size: clamp(14px, 2.4vw, 18px);
    padding: 8px 4px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

/* Grid responsivo de cards */
.painel-grid {
    display: grid;
    grid-template-columns: 1fr; /* mobile: 1 coluna */
    gap: 12px; /* espaçamento entre cards */
    padding:13px;
}

/* Breakpoints: 2 colunas no tablet, 3 no desktop */
@media (min-width: 576px) {
    .painel-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 80px;
    }
}

@media (min-width: 992px) {
    .painel-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 80px;
    }
}

/* Card base */
.card {
    border-radius: 10px;
    padding: 24px 12px;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    min-height: 110px; /* garante altura mínima uniforme */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Cores */
.card-azul {
    background: #2b7bb2 !important;
}
/* equivalente ao w3-blue, com melhor contraste */
.card-laranja {
    background: #c98a2b !important;
}
/* equivalente ao w3-orange, ajustado para leitura */

/* Título do card */
.card-title {
    font-size: clamp(12px, 2.4vw, 16px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    /* previne quebra feia no mobile */
    word-break: break-word;
    hyphens: auto;
    opacity: .95;
}

/* Valor grande */
.card-value {
    font-size: clamp(20px, 6vw, 28px); /* responsivo conforme tela */
    font-weight: 700;
    line-height: 1.1;
    margin-top: 8px;
    white-space: nowrap; /* evita quebrar o número/percentual */
}

/* Acessibilidade: foco visível se clicável no futuro */
.card:focus-within, .card:focus {
    outline: 3px solid rgba(255,255,255,.6);
    outline-offset: 2px;
}

/* Se você usa faixas com sombra dentro dos cards (opcional) */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: none;
}
.qtdOcupacaoUnidadeInternacao, .qtdOcupacaoOperacional, .qtdOcupacaoCTIADULTO, .qtdOcupacaoInstaladaParteBaixo, .qtdOcupacaoUnidadeInternacaoParteBaixo, .qtdOcupacaoCTIADULTOParteBaixo {
    color: white !important;
}
/**/
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

        .active, .dot:hover {
            background-color: #717171;
        }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .prev, .next, .text {
            font-size: 11px
        }
    }

    ::-webkit-scrollbar {
        width: 16px;
        cursor: pointer;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #9e9e9e;
        border-radius: 7px;
        cursor: pointer;
    }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #0080a0;
        }



    /* Modal */
    .modalMedVerAvaliacao {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Conteúdo do modal */
    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 500px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Botão de fechar */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

        .close:hover {
            color: black;
        }

    /* Estilo da barra */
    .grade-bar-container {
        margin-bottom: 15px;
    }

    .grade-barAvaliacaoPerformance {
        margin-bottom: 5px;
    }

    .grade-label {
        margin-bottom: 5px;
        font-weight: bold;
    }

    .grade-labelBI {
        margin-bottom: 10px;
        font-weight: bold;
        text-align: center;
    }

    .bar {
        width: 100%;
        background-color: #eee;
        border-radius: 20px;
        overflow: hidden;
    }

    .bar-fill {
        height: 20px;
        text-align: right;
        padding-right: 8px;
        color: white;
        line-height: 20px;
        font-size: 12px;
        border-radius: 20px 0 0 20px;
    }

    .green {
        background-color: #4CAF50;
    }

    .orange {
        background-color: #FF9800;
    }

    .red {
        background-color: #F44336;
    }

    .blue {
        background-color: #2196F3;
    }

    .percentual-label {
        position: absolute;
        right: 10px;
        top: 0;
        height: 100%;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        display: none;
    }

    .percentual-labelAvaliacoes {
        position: absolute;
        right: 10px;
        top: 0;
        height: 100%;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        display: none;
    }

    .percentual-labelAvaliacoesVisaoGestor {
        position: absolute;
        right: 10px;
        top: 0;
        height: 100%;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        display: none;
    }


    .barraAvaliacoes, .barraFichas, .barraCredenciamento, .barraComportamento, .barraResultadoClinico, .barraFichasCredenciamento {
        width: 100%;
        height: 30px;
        background-color: #e0e0e0;
        position: relative;
        border-radius: 6px;
        /*    overflow: hidden;*/
        overflow: visible; /* Impede corte do gráfico */
        margin-bottom: 1rem;
    }

    .grafico {
        width: 250px;
        height: 100px;
    }

    .graficoFicha {
        position: relative;
        width: 100%;
        height: 300px; /* ou o que preferir */
    }


    .graficoCredenciamento {
        position: relative;
        width: 100%;
        height: 300px; /* ou o que preferir */
    }

    #graficoFichasGeral {
        position: absolute;
        height: 100% !important;
    }

    #graficoCredGeral {
        position: absolute;
        height: 100% !important;
    }

    /*canvas#graficoAvaliacoesGeral {
    display: block;
    margin-top: 20px;
}
*/
    #graficoAvaliacoesGeral {
        display: block;
        margin: 20px auto;
        max-width: 100% !important; /* Largura máxima */
        max-height: 100% !important; /* Altura máxima */
        width: 100% !important; /* Responsivo */
    }

    #graficoAvaliacoesGeralFunc {
        display: block;
        margin: 20px auto;
        max-width: 100% !important; /* Largura máxima */
        max-height: 100% !important; /* Altura máxima */
        width: 100% !important; /* Responsivo */
    }

    @media (min-width: 1068px) {
        #graficoAvaliacoesGeral, #graficoFichasGeral, #graficoCredGeral {
            width: 400px;
            height: 400px;
        }

        #graficoAvaliacoesGeralFunc, #graficoFichasGeral, #graficoCredGeral {
            width: 200px;
            height: 200px;
        }
    }


    .corNotasTotal, .corFichasTotal, .corNotaComportamento, .corNotaResultadoClinico {
        height: 100%;
        background-color: #41c746;
        width: 0%;
        color: white;
        text-align: center;
        line-height: 30px;
        font-weight: bold;
        white-space: nowrap;
        padding: 0 5px;
        box-sizing: border-box;
        transition: width 1s ease;
        border-radius: 6px;
    }

        .corNotasTotal:hover, .corFichasTotal:hover, .corNotaComportamento:hover, .corNotaResultadoClinico:hover {
            filter: brightness(1.1);
        }

    .percentual-label {
        position: absolute;
        right: 8px;
        top: 0;
        height: 100%;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        display: none;
        pointer-events: none;
    }

    .percentual-labelAvaliacoes {
        position: absolute;
        right: 8px;
        top: 0;
        height: 100%;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        display: none;
        pointer-events: none;
    }

    .barra-faltante {
        height: 100%;
        background-color: #f44336; /* vermelho */
        float: left;
    }

    /* Responsivo para telas menores */
    @media (max-width: 600px) {
        .barraAvaliacoes, .barraFichas {
            height: 24px;
        }

        .corNotasTotal, .corFichasTotal, .corNotaComportamento {
            font-size: 12px;
            line-height: 24px;
        }

        .percentual-label {
            font-size: 12px;
            line-height: 24px;
        }

        .percentual-labelAvaliacoes {
            font-size: 12px;
            line-height: 24px;
        }
    }


    .modalHistoricoAvaliacoesVisaoGestores {
        width: 100%;
        overflow: auto; /* Permite rolagem da tela se necessário */
        background-color: rgba(0,0,0,0.4);
    }

    /* Conteúdo do modal */
    .modalGestorAvaliacoesContent {
        background-color: #fefefe;
        max-height: 70vh; /* Altura máxima */
        overflow-y: auto; /* Adiciona barra de rolagem vertical se necessário */
    }

    body.modo-escuro .h4Card {
        color: white !important;
    }

    body.modo-escuro {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

        body.modo-escuro .w3-bar {
            background-color: #1e1e1e !important;
            color: #ffffff !important;
        }

        body.modo-escuro .w3-button {
            background-color: #252121 !important;
            color: #ffffff !important;
        }

        body.modo-escuro a {
            color: #aad4ff;
        }

        body.modo-escuro label,
        body.modo-escuro span {
            color: white !important;
        }

        body.modo-escuro w3-background, .headerModal {
            background-color: #252121 !important;
        }

        body.modo-escuro .w3-button:hover, .liItemMedicoCredenciamento:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItemOperadora:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItem:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItemLinks:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItemRamais:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItemTermosPai:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

        body.modo-escuro .liItemProtocolo:hover {
            background-color: #707070 !important;
            color: #fff !important;
            transition: all .5s;
            -webkit-transition: 0.5s;
        }

    /* Hover apenas quando corpo não estiver no modo escuro */
    body:not(.modo-escuro) .liItemMedicoCredenciamento:hover, .liItemOperadora:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .liItem:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .liItemLinks:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .liItemRamais:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .liItemTermosPai:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .liItemProtocolo:hover {
        background-color: #0080a0 !important;
    }

    body:not(.modo-escuro) .headerModal {
        background-color: #0080a0 !important;
    }

    /* Hover no modo escuro*/
    body.modo-escuro .liItemMedicoCredenciamento:hover {
        background-color: #707070 !important;
    }

    .container {
        display: flex;
        max-width: 1200px;
        margin: auto;
        padding: 20px;
    }
    /*BACKUP*/
    /*.feed {
        flex: 1;
        padding: 20px;
    }

    .post {
        background: white;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 0 10px #ddd;
        overflow: hidden;
        text-align: center !important;
    }*/

    /*  .post img {
        width: 100%;
        height: auto;
    }*/
    /*.img {
        width: 60%;
        height: auto;
    }

    .post {
        width: 100%;
        height: auto;
    }

    .post-content h3 {
        margin: 0 0 10px;
    }

    .post-content p {
        margin: 0;
        color: #555;
    }*/
    /*FIM DO BAKCUP*/


    /* Feed container */
    .feed {
        padding: 16px;
    }

    /* Card do post */
    .post {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        margin: 12px 0 20px;
        box-shadow: 0 2px 12px rgba(0,0,0,.08);
        overflow: hidden;
        text-align: center;
    }

    /* Título de notícia */
    .tituloEventoNoticias {
        font-size: clamp(16px, 4vw, 20px);
        margin: 8px 0 12px;
        color: #175d6e;
    }

    /* Opção A: imagem fluida (sem recortes) */
    .post-img {
        display: block; /* remove espaçamento abaixo de img */
        width: 100%; /* ocupa toda a largura do card */
        height: auto; /* mantém proporção original */
        max-height: 70vh; /* não passa muito da viewport em telas pequenas */
    }

    .post-cover {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; /* preenche sem distorcer, recorta excedente */
        object-position: center; /* foca centro (mude para 'top' / 'right' se necessário) */
    }

    /* Conteúdo abaixo da imagem (se houver) */
    .post-content {
        padding: 12px 14px 16px;
        font-size: clamp(13px, 3.5vw, 16px);
        color: #444;
        text-align: left;
    }

    /* Ajustes gerais responsivos */
    @media (min-width: 576px) {
        .feed {
            padding: 20px;
        }

        .post-content {
            padding: 16px;
        }
    }

    @media (min-width: 992px) {
        .feed {
            padding: 24px;
        }

        .post {
            border-radius: 12px;
        }
    }

    /* Evitar que algum CSS legado force largura/altura fixas */
    .post img {
        max-width: 100%;
        height: auto;
    }


    @media (max-width: 768px) {
        .container {
            flex-direction: column;
        }
    }


    /*.carousel-container {
    position: relative;
    max-width: 100%;
    max-height: auto;
    margin: auto;
}
*/

    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0,0,0,0.5);
        color: white;
        border: none;
        font-size: 30px;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

        .carousel-btn.left {
            left: 10px;
        }

        .carousel-btn.right {
            right: 10px;
        }

    .carousel-slides img {
        width: 80%; /* Aumenta a largura da imagem dentro do modal */
        height: auto; /* Mantém a proporção */
        max-height: 80vh; /* Limita para não ultrapassar a altura da tela */
        object-fit: contain; /* Garante que não corte a imagem */
        display: block;
        margin: auto;
    }


    .headerModalGestao {
        background-color: #007b8f; /* Cor do cabeçalho */
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        position: sticky; /* Mantém no topo dentro do modal */
        top: 0;
        z-index: 1000;
    }

        .headerModalGestao h6 {
            margin: 0;
            font-size: 25px;
        }

    .modalGestao {
        display: flex;
        flex-direction: column;
        height: 100%; /* Ajuste para não estourar */
    }

    .carousel-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(70% - 60px); /* Considera espaço do header */
    }

    @media (max-width: 420px) {
        .modalGestao {
            height: 100vh; /* Ocupa toda a altura da tela */
            max-height: 100vh;
            overflow: hidden; /* Evita scroll desnecessário */
            padding: 0; /* Remove espaçamentos extras */
        }

        .headerModalGestao h6 {
            font-size: 18px; /* Reduz título para caber melhor */
        }

        .carousel-container {
            height: calc(45vh - 60px); /* Ajusta considerando o header */
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0; /* Remove espaçamento interno */
        }

        .carousel-slides img {
            width: 100%; /* Usa toda a largura disponível */
            max-height: 70vh; /* Limita altura para não estourar */
            object-fit: contain; /* Mantém proporção sem cortar */
        }

        .carousel-btn {
            font-size: 24px; /* Botões menores para mobile */
            padding: 8px;
        }

            .carousel-btn.left {
                left: 5px;
            }

            .carousel-btn.right {
                right: 5px;
            }
    }



    /*SEPARAMENTO DOS BOTÕES MELHORANDO A SUA VISUALIZAÇÃO - VISÃO DO MÉDICO*/
    .itemPage, .logoff, .fechar {
        border: 1px solid rgba(0,0,0,0.1);
        /*    border-radius: 3px;
*/ padding: 8px 16px;
        background-color: #0080a0;
        transition: background-color 0.3s, box-shadow 0.3s;
        margin-top: 1px;
    }

        .itemPage:hover, .logoff:hover, .fechar:hover {
            background-color: #e0e0e0;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }



    /*=============================TABLE DAS FICHAS COM A PIZZA=================================*/
    .grafico-tabela-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
        align-items: flex-start;
    }

    .grafico-tabela-containerFuncionario {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
        align-items: flex-start;
    }

    /*  .graficoFicha {
        flex: 1 1 300px;
        min-width: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }*/

    .graficoCredenciamento {
        flex: 1 1 300px;
        min-width: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*.graficoAvaliacao {
        width: 250px;*/ /* ou use % para responsivo */
    /*height: 250px;*/ /* altura obrigatória para Chart.js */
    /*display: flex;
        justify-content: center;
        align-items: center;
    }

        .graficoAvaliacao canvas {
            width: 100% !important;
            height: auto !important;
    
        }*/



    .graficoAvaliacao,
    .graficoFicha {
        flex: 1 1 300px;
        min-width: 250px;
        max-width: 400px; /* Limite para não ficar gigante */
        height: 350px; /* Altura obrigatória para Chart.js */
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .graficoAvaliacao canvas,
        .graficoFicha canvas {
            width: 100% !important;
            height: 100% !important;
        }

    .tabelaFicha {
        flex: 1 1 500px;
        min-width: 300px;
    }

    .tabelaCredenciamento {
        flex: 1 1 500px;
        min-width: 300px;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*REESCREVI O SSMD-GRID ORIGINAL PARA AJUSTAS A MARGEM EM DISPOSITIVOS MENORES*/
    .ssmd-gridTabelaFichaPizza {
        border: 1px solid #28a4c9;
        margin: 10px 0px 0px -8px;
        background-color: #fff;
        border-radius: 5px;
    }

    .ssmd-gridTabelaFichaPizzaFuncionario {
        border: 1px solid #28a4c9;
        margin: 10px 0px 0px -8px;
        background-color: #fff;
        border-radius: 5px;
    }

    .ssmd-gridTabelaFichaPizza table tbody tr:hover {
        background-color: #133f67 !important;
        color: #fff !important;
        -webkit-transition: 0.3s;
    }

    /* Remove largura fixa e controla pelo CSS */
    .contatos {
        width: 55%;
        box-sizing: border-box;
    }

    /* Quando a tela for menor que 768px, o card ocupa 100% */
    @media screen and (max-width: 768px) {
        .contatos {
            width: 100% !important;
            margin-bottom: 10px;
        }
    }

    .gestaoMedica {
        width: 75%;
        box-sizing: border-box;
    }

    /* Quando a tela for menor que 768px, o card ocupa 100% */
    @media screen and (max-width: 768px) {
        .gestaoMedica {
            margin-bottom: 10px;
        }
    }


    /* Em telas grandes, remova a rolagem e force o ajuste */
    @media (min-width: 769px) {
        .table-responsive {
            overflow-x: hidden; /* Remove a barra */
        }

        .tableItenHistoricoFichas, .tableItenHistoricoFichasCredenciamento, .tableItenHistoricoCredenciamento, .tableItensAvaliacoesMedicos {
            width: 100% !important;
            min-width: unset !important;
            table-layout: auto;
        }
    }

    @media (max-width: 768px) {
        .tabelaFicha, .tabelaCredenciamento, .tableItenHistoricoCredenciamento, .tableItensAvaliacoesMedicos {
            width: 100%;
            overflow-x: auto;
        }

        .tableItenHistoricoFichas, .tableItenHistoricoFichasCredenciamento, .tableItenHistoricoCredenciamento, .tableItensAvaliacoesMedicos {
            min-width: 600px !important;
        }
    }
    /* Responsivo para telas menores */
    @media (max-width: 768px) {
        .grafico-tabela-container {
            flex-direction: column;
        }

        .grafico-tabela-containerFuncionario {
            flex-direction: column;
        }
    }

    @media (max-width: 450px) {
        .grafico-tabela-container {
            flex-direction: column;
        }

        .grafico-tabela-containerFuncionario {
            flex-direction: column;
        }
    }

    .modo-escuro-flutuante {
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        z-index: 9999;
        background-color: white;
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    /* Responsivo para mobile */
    @media screen and (max-width: 600px) {
        .modo-escuro-flutuante {
            top: 60%;
            right: 10px;
            padding: 6px 10px;
            font-size: 14px;
            gap: 6px;
        }
    }


    /*CSS PARA O NOVO MENU**/
    .icone-acessibilidade {
        position: fixed;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        z-index: 10000;
        background-color: #0080a0;
        color: white;
        padding: 12px;
        border-radius: 20%;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        cursor: pointer;
        font-size: 18px;
    }

    .menu-slide-acessibilidade {
        position: fixed;
        top: 0;
        right: -350px; /* escondido inicialmente */
        width: 350px;
        height: 100%;
        background-color: #ffffff;
        box-shadow: -2px 0 8px rgba(0,0,0,0.3);
        transition: right 0.3s ease;
        z-index: 9999;
        padding: 20px;
        font-family: Arial, sans-serif;
    }

        .menu-slide-acessibilidade.open {
            right: 0;
        }

        .menu-slide-acessibilidade .titulo-menu {
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            font-size: 16px;
        }

        .menu-slide-acessibilidade ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px; /* espaçamento entre os botões */
        }

            .menu-slide-acessibilidade ul li {
                display: flex;
                justify-content: center;
            }

        .menu-slide-acessibilidade .w3-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 15px;
            background-color: #0080a0;
            color: white;
            cursor: pointer;
            font-size: 14px;
            width: 100%;
            text-align: center;
            transition: background-color 0.2s ease;
        }

            .menu-slide-acessibilidade .w3-button:hover {
                background-color: #005fa3;
            }

            .menu-slide-acessibilidade .w3-button i {
                font-size: 1.2em;
            }


    .btn-fechar-menu {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #333;
    }

    /*CARD DO MAPA DO SITE*/
    .cards-mapa-site {
        margin-top: 40px;
        padding: 1px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

        .cards-mapa-site .card {
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 15px;
            width: 220px;
            text-align: center;
            transition: transform 0.3s ease;
        }

            .cards-mapa-site .card:hover {
                transform: translateY(-5px);
            }

            .cards-mapa-site .card i {
                font-size: 32px;
                margin-bottom: 10px;
                color: #0078d7;
            }

            .cards-mapa-site .card h3 {
                font-size: 18px;
                margin-bottom: 8px;
            }

            .cards-mapa-site .card p {
                font-size: 14px;
                color: #555;
            }


    /*CSS DOS BOTÕES PARA RESPONSIVIDADE*/

    .menu-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .menu-btn {
        padding: 10px 15px;
        background-color: #0078d7;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .menu-btn:hover {
            background-color: #005fa3;
        }

    /* Responsividade para telas menores */
    @media (max-width: 768px) {
        .menu-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .menu-btn {
            width: 100%;
            font-size: 16px;
        }
    }


    @media (min-width: 769px) {
        #sidebar {
            display: none !important;
        }
    }
    /*AJUSTE NO SIDE BAR PARA NÃO BUGAR A PAGINA DO FUNCIONARIO NO SERVIDOR IISINT */
    /*#sidebar {
    display: none;*/ /* padrão: escondido */
    /*}

@media (max-width: 768px) {
    #sidebar {
        display: block;*/ /* aparece em smartphones */
    /*position: fixed;
        left: 0;
        top: 0;
        width: 250px;
        height: 100%;
        background-color: #f4f4f4;
        overflow-y: auto;
        z-index: 999;
    }
}*/

    /*NOVO RODAPE*/
    .rodape-aesc {
        background-color: white; /*#f2f2f2*/
        padding: 30px 20px;
        font-family: Arial, sans-serif;
        color: #333;
        margin-top: 40px;
    }

    .rodape-conteudo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }

    .redes-sociais, .unidades {
        flex: 1 1 300px;
    }

        .redes-sociais h4, .unidades h4 {
            margin-bottom: 10px;
            font-size: 18px;
            color: #0078d7;
        }

    .icones-redes a {
        margin-right: 10px;
        font-size: 24px;
        color: #0078d7;
        text-decoration: none;
    }

        .icones-redes a:hover {
            color: #005fa3;
        }

    .unidades ul {
        list-style: none;
        padding: 0;
    }

    .unidades li {
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .logo-aesc {
        text-align: center;
        margin-top: 20px;
    }

        .logo-aesc img {
            max-width: 200px;
        }


    .itemPageMedico, .itemPageMedicosMV, .itemPageMedicosExternos {
        margin-right: 10px; /* espaçamento entre os botões */
    }

    /*LAYOUT DOS NOVOS CARDS - TESTE*/

    .card-container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;
        padding: 5px;
    }

    .card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        width: 300px;
        padding: 20px;
        text-align: center;
        position: relative;
        transition: transform 0.3s ease;
    }

        .card:hover {
            transform: translateY(-5px);
        }

        .card img {
            width: 30%;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .card h3 {
            margin: 10px 0;
            color: #0080a0;
        }

        .card p {
            color: #555;
        }

    .arrow {
        position: absolute;
        bottom: 15px;
        right: 15px;
        font-size: 24px;
        color: #0080a0;
    }



    /*CSS MODIFICADO PARA OS BOTÕES PRINCIPAIS*/

    html, body {
        /* overflow: hidden; */ /* ou auto, se necessário */

        overflow-y: auto; /* permite rolagem vertical */
        overflow-x: hidden; /* evita rolagem horizontal */
    }


    /*CSS PARA A TABLE DAS AVALIAÇÕES DO BI*/

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    }



    /*CSS PARA O DROPDOWN*/

    .checkbox-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1000;
        padding: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        box-sizing: border-box;
    }

    #filtroEspecialidade {
        width: 100%;
        padding: 8px;
        margin-bottom: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .checkbox-list label {
        display: block;
        padding: 6px 8px;
        margin-bottom: 4px;
        font-size: 15px;
        cursor: pointer;
    }

    #divMaster.sem-espacamento {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background-color: #fff;
    }


    /*TESTE*/

    /*.w3-modal-content {
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;*/ /* Header em cima, imagem embaixo */
    /*background: #fff;
}

.headerModal {
    background: #007b8f;
    color: #fff;
    padding: 4px;
    flex-shrink: 0;*/ /* Não encolhe */
    /*}

.modal-body {
    flex: 1;*/ /* Ocupa o restante */
    /*display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.carousel-container img {
    max-width: 95vw;
    max-height: 85vh;*/ /* Ajusta para não sobrepor header */
    /*object-fit: contain;
}*/


    .ranking-table th:nth-child(3),
    .ranking-table td:nth-child(3) {
        /*width: 220px;*/ /* aumenta espaço para barra + texto */
        min-width: 220px;
    }

    .barra-container {
        position: relative;
        background: #f1f1f1;
        border-radius: 8px;
        height: 22px;
        width: 100%;
        overflow: hidden;
    }

    .barra {
        height: 100%;
        border-radius: 8px;
        transition: width 1s ease-in-out;
    }

    .percent-text {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #fff; /* texto branco dentro da barra */
        font-weight: bold;
    }


    .tableItensRanking {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }

        .tableItensRanking thead {
            background-color: #0078D7;
            color: #fff;
            font-weight: bold;
        }

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

        .tableItensRanking td {
            padding: 10px;
            text-align: left;
        }

    .medal {
        font-size: 18px;
    }

    .progress-bar {
        height: 18px;
        border-radius: 8px;
        background-color: #e0e0e0;
        overflow: hidden;
        width: 120px;
        display: inline-block;
    }

    .progress-fill {
        height: 100%;
        text-align: center;
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        width: 0; /* Inicialmente zero para animar */
        transition: width 1.2s ease-in-out; /* Animação suave */
    }

    .progress-green {
        background-color: #28a745;
    }

    .progress-yellow {
        background-color: #ffc107;
    }

    .progress-purple {
        background-color: #6f42c1;
    }

    .progress-gray {
        background-color: #6c757d;
    }



    /*CARDS OCUPAÇÃO HOSPITALAR*/
    .cardOcupacao {
        width: 32%;
        margin: 0.5%;
        text-align: center;
        padding: 20px;
        font-size: 24px;
        font-weight: bold;
        color: white !important;
    }

    .card-title {
        font-size: 16px;
        font-weight: normal;
        margin-bottom: 10px;
    }

    .row {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }



/*INICIO DO LAYOUT RESPONSIVO DO BOTÃO DADOS*/

.medicoContainerDados {
    background: #f5f5f5;
    padding: 16px;
}

/* Grid para botões */
.medico-buttons {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 12px;
}

/* Botão base */
.btn-action {
    background-color: #0080a0;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: clamp(14px, 2.5vw, 16px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .btn-action:hover {
        background-color: #006b85;
    }

    /* Ícones */
    .btn-action i {
        font-size: 1.2em;
    }

/* Responsividade */
@media (min-width: 576px) {
    .medico-buttons {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 colunas */
    }
}

@media (min-width: 992px) {
    .medico-buttons {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 colunas */
    }
}

/* Área de dados do médico */
.medico-info {
    background: #666;
    color: #f0f0f0;
    padding: 16px;
    margin-top: 16px;
    border-radius: 8px;
    font-size: clamp(14px, 2vw, 16px);
    text-align: center;
}



.submenu {
    position: absolute;
    background: #0a8fa4;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    gap: 8px;
    z-index: 1000; /* garantir que fique sobre a barra */
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.hidden {
    display: none !important;
}

.submenu-item {
    color: #fff !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
/*FIM DO CSS DO SUB MENU - AINDA NÃO IMPLEMENTADO
*/


/* Regra genérica que neutraliza estilos inline agressivos */
.divDadosEmail span {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    line-height: 1.5;
    letter-spacing: 0.5px !important; /* sobrescreve o inline */
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Texto introdutório: tipografia fluida e espaçamento ajustável */
.email-intro {
    /* Tipografia fluida: mínimo 14px, ideal 16px, máximo 18px */
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    line-height: 1.5; /* melhora a legibilidade */
    letter-spacing: 0.5px; /* valor suave por padrão */
    color: #114a4f; /* opcional: combina com sua paleta */
    margin: 0 0 0.75rem 0;
    /* Evita quebras estranhas */
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere; /* permite quebra em palavras longas */
    hyphens: auto; /* quebra melhor em PT-BR (se dicionário do navegador) */
}

/* Mobile: reduz ainda mais o espaçamento */
@media (max-width: 480px) {
    .divDadosEmail span {
        letter-spacing: 0.2px !important;
        line-height: 1.6;
    }
}

/* Lista de e-mails: legível e clicável */
.email-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(0.875rem, 2.2vw, 1rem);
    letter-spacing: 0.3px; /* sutil; não usar 4px no mobile */
}

    .email-list li {
        margin-bottom: 0.25rem;
    }

    /* Links de e-mail */
    .email-list a {
        color: #0a7c86; /* contraste mais alto, acessível */
        text-decoration: none;
        word-break: break-all; /* e-mails longos quebram corretamente */
    }

        .email-list a:hover,
        .email-list a:focus {
            text-decoration: underline;
        }

/* Caso queira manter a estética de “letras espaçadas” só em telas grandes */
@media (min-width: 992px) {
    .email-intro {
        letter-spacing: 1px; /* aumenta apenas em desktop */
    }

    .email-list {
        letter-spacing: 0.6px;
    }
}


/* === AJUSTES GERAIS DENTRO DO CONTÊINER === */
#rankingExames {
    /* rolagem horizontal se precisar, sem quebrar a tabela */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    /* Garantir um layout estável da tabela */
    #rankingExames .ranking-table {
        width: 100%;
        table-layout: fixed; /* evita "pulos" de coluna */
        border-collapse: collapse;
    }

        /* Cabeçalho com tipografia fluida */
        #rankingExames .ranking-table th {
            font-size: clamp(0.8rem, 2.2vw, 0.95rem);
            white-space: nowrap;
            letter-spacing: 0 !important; /* neutraliza qualquer spacing herdado */
        }

    /* Distribuição das colunas (ajuste se quiser) */
    #rankingExames .col-procedimento {
        width: 60%;
    }

    #rankingExames .col-total {
        width: 12%;
    }

    #rankingExames .col-percentual {
        width: 28%;
    }

    #rankingExames .ranking-table td {
        vertical-align: middle;
        padding: 8px 10px;
        font-size: clamp(0.85rem, 2vw, 1rem); /* tipografia fluida */
        line-height: 1.35;
        letter-spacing: 0 !important; /* remove spacing agressivo */
    }

    /* === ALVO PRINCIPAL: TEXTO DO PROCEDIMENTO === */
    #rankingExames .cell-procedimento {
        /* permite quebras saudáveis sem “colunar” */
        white-space: normal;
        word-break: break-word; /* quebra em palavras longas */
        overflow-wrap: anywhere; /* em caso de termos muito grandes */
    }

        #rankingExames .cell-procedimento .rank-icon {
            display: inline-block;
            margin-right: 6px;
            font-size: 1em;
        }

        #rankingExames .cell-procedimento .rank-text {
            display: inline; /* mantém na mesma linha do ícone */
            font-size: clamp(0.75rem, 1.8vw, 0.95rem); /* reduz em mobile */
            letter-spacing: 0 !important; /* zera spacing */
            text-transform: none; /* evite CAPS forçado (opcional) */
            hyphens: auto; /* melhora quebra quando suportado */
        }

    /* === COLUNA DE PERCENTUAL: BARRA E TEXTO === */
    #rankingExames .cell-total {
        text-align: center;
        white-space: nowrap;
        letter-spacing: 0 !important;
    }

    #rankingExames .cell-percentual .barra-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #rankingExames .cell-percentual .barra {
        height: 16px;
        border-radius: 999px;
        flex: 1 1 auto;
        min-width: 80px; /* não deixa a barra “sumir” em telas pequenas */
        box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    }

    #rankingExames .cell-percentual .percent-text {
        flex: 0 0 auto;
        font-weight: 600;
        font-size: clamp(0.8rem, 2vw, 0.95rem);
        color: #0a7c86;
        white-space: nowrap;
        letter-spacing: 0 !important;
    }

/* === MOBILE FINO (até 480px) === */
@media (max-width: 480px) {
    #rankingExames .col-procedimento {
        width: 64%;
    }

    #rankingExames .col-total {
        width: 12%;
    }

    #rankingExames .col-percentual {
        width: 24%;
    }

    #rankingExames .cell-procedimento .rank-text {
        font-size: clamp(0.70rem, 1.6vw, 0.9rem); /* diminui mais em telas bem pequenas */
        line-height: 1.4;
    }

    #rankingExames .cell-percentual .barra {
        height: 14px;
        min-width: 60px;
    }
}

/* (Opcional) Se houver qualquer regra global com letter-spacing alto,
   neutralize dentro do #rankingExames para evitar o "texto em coluna". */
#rankingExames * {
    letter-spacing: 0 !important;
}


@media (max-width: 480px) {
    #rankingExames .cell-procedimento .rank-text {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



/* Dropdown de COMUNICADOS */
/*#submenuComunicados {
    position: fixed;*/ /* fica flutuando na viewport */
    /*min-width: 260px;
    background: #088e9b;*/ /* ajuste para sua paleta */
    /*color: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 8px;
}*/

    /* Estado escondido */
    /*#submenuComunicados.hidden {
        display: none;
    }*/

    /* Sub-botões: mesmo “look & feel” do W3 */
    /*#submenuComunicados .submenu-item {
        display: block;*/ /* cada botão em sua linha */
        /*text-align: left;
        padding: 8px 12px;
        border-radius: 4px;
        color: #fff;
    }

        #submenuComunicados .submenu-item i {
            margin-right: 8px;
        }*/

        /* Hover/Focus */
        /*#submenuComunicados .submenu-item:hover,
        #submenuComunicados .submenu-item:focus {
            background: rgba(255,255,255,0.15);
        }*/

/* Responsivo: encurta levemente em telas pequenas */
/*@media (max-width: 480px) {
    #submenuComunicados {
        min-width: 220px;
        padding: 6px;
    }

        #submenuComunicados .submenu-item {
            padding: 6px 10px;
            font-size: 14px;
        }
}*/



/* Layout estável em telas grandes */
.tableItensExamesProcedimentos {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .tableItensExamesProcedimentos th,
    .tableItensExamesProcedimentos td {
        font-size: clamp(0.80rem, 2.2vw, 0.95rem);
        line-height: 1.35;
        letter-spacing: 0 !important;
        padding: 8px 10px;
        vertical-align: middle;
    }

        /* Permitindo quebra saudável na descrição */
        .tableItensExamesProcedimentos td.descricaoProcedimento {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Ocultar TCRM sempre, pois só existe no tbody */
        .tableItensExamesProcedimentos td.codigoTCRM {
            display: none !important;
        }

/* ===== Mobile: mostrar somente Procedimento e Valor ===== */
@media (max-width: 576px) {
    /* Esconde coluna Código (header + body) */
    .tableItensExamesProcedimentos th.th-codigo,
    .tableItensExamesProcedimentos td.codigoProcedimento {
        display: none !important;
    }

    /* Esconde coluna Tipo (header + body) */
    .tableItensExamesProcedimentos th.th-tipo,
    .tableItensExamesProcedimentos td.tipoProcedimento {
        display: none !important;
    }

    /* Rebalanceia as duas colunas visíveis */
    .tableItensExamesProcedimentos th.th-procedimento,
    .tableItensExamesProcedimentos td.descricaoProcedimento {
        width: 70%;
    }

    .tableItensExamesProcedimentos th.th-valor,
    .tableItensExamesProcedimentos td.valorProcedimento {
        width: 30%;
        white-space: nowrap;
    }

    /* Tipografia um pouco menor no mobile */
    .tableItensExamesProcedimentos th,
    .tableItensExamesProcedimentos td {
        font-size: clamp(0.75rem, 2vw, 0.9rem);
        padding: 6px 8px;
    }
}

/* Wrapper de responsividade (scroll horizontal se precisar) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/*INICIO TABLE RANKING*/

/* Wrapper para scroll horizontal (se necessário) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabela estável */
.ranking-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .ranking-table th,
    .ranking-table td {
        font-size: clamp(0.80rem, 2.2vw, 0.95rem);
        line-height: 1.35;
        letter-spacing: 0 !important; /* impede texto "em coluna" */
        padding: 8px 10px;
        vertical-align: middle;
    }

    /* Larguras no desktop/tablet */
    .ranking-table .th-posicao, .ranking-table .td-posicao {
        width: 12%;
        white-space: nowrap;
    }

    .ranking-table .th-conselho, .ranking-table .td-conselho {
        width: 18%;
        white-space: nowrap;
    }

    .ranking-table .th-nome, .ranking-table .td-nome {
        width: 50%;
    }

    .ranking-table .th-total, .ranking-table .td-total {
        width: 20%;
        white-space: nowrap;
        text-align: right;
    }

    /* Nome pode quebrar em múltiplas linhas sem bagunçar */
    .ranking-table .td-nome {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

/* ===== MOBILE: mostrar APENAS Posição e Nome ===== */
@media (max-width: 576px) {
    /* Esconde Conselho */
    .ranking-table .th-conselho,
    .ranking-table .td-conselho {
        display: none !important;
    }

    /* Esconde Total de Avaliações */
    .ranking-table .th-total,
    .ranking-table .td-total {
        display: none !important;
    }

    /* Rebalanceia as colunas visíveis */
    .ranking-table .th-posicao,
    .ranking-table .td-posicao {
        width: 25%;
    }

    .ranking-table .th-nome,
    .ranking-table .td-nome {
        width: 75%;
    }

    /* Tipografia/padding menores em mobile */
    .ranking-table th,
    .ranking-table td {
        font-size: clamp(0.75rem, 2vw, 0.9rem);
        padding: 6px 8px;
    }
}

/* Hard reset para neutralizar qualquer estilo global agressivo */
#rankingMedicosAvaliacao * {
    letter-spacing: 0 !important;
    text-transform: none !important; /* se houver uppercase global */
}


/* Tamanho padrão (desktop/tablet) */
.nomeMedico {
    font-size: 25px !important;
}

/* Mobile e tablets pequenos */
@media (max-width: 768px) {
    .nomeMedico {
        font-size: 13px !important;
    }
}


/* Mobile: até 576px de largura de viewport */
@media (max-width: 576px) {
    .nomeMedico {
        font-size: 13px;
    }
}

/*INICIO DO CSS DA DIV CREDENCIAMENTO CONTENT GESTOR ESPECIALIDADE*/

/* Container principal: controla largura e espaçamentos básicos */
.infoMedicosCredenciados {
    max-width: 100%;
}

/* Bloco interno com cor de fundo clara */
.w3ContainerCor {
    padding: 12px;
    border-radius: 8px;
}

/* UL cabeçalho (CREDENCIAMENTO) */
.ulCor .w3-xlarge {
    font-size: clamp(18px, 3vw, 24px);
    letter-spacing: 0.3px;
}

/* ===== LINHA PADRÃO (Ícone + rótulo + valor) ===== */
/* Aplique esta classe em cada "linha de informação" */
.cred-row {
    display: flex;
    align-items: center;
    gap: 10px; /* espaço entre ícone e textos */
    padding: 6px 0;
    border-radius: 6px;
}

    /* Ícones mais alinhados e estáveis */
    .cred-row i,
    .cred-row .fa,
    .cred-row .fas {
        flex: 0 0 auto;
        font-size: 22px; /* desktop padrão */
        line-height: 1;
        color: #0080a0 !important; /* sua paleta */
    }

/* Bloco de texto ao lado do ícone */
.cred-text {
    flex: 1 1 auto;
    min-width: 0; /* permite quebra correta */
}

/* Rótulo (negrito) + valor (normal) */
.cred-label {
    font-weight: 700;
    margin-right: 6px;
}

.cred-value {
    font-weight: 400;
}

/* Nome do médico com destaque, mas responsivo */
.nomeMedicoCredenciamento {
    font-weight: 700;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 20px; /* desktop/tablet */
}

/* Especialidade e demais valores */
.especialidadeMedicoCredenciado,
.conselhoMedicoCredenciado,
.dataExpiracaoFichaConcessao {
    font-size: 16px;
}

/* Estados (aprovado/pendente) já usam w3-text-green/red; manter legibilidade */
.w3-text-green, .w3-text-red {
    font-weight: 600;
}

/* PDFs: linha compacta com ícone + texto */
.pdf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

    .pdf-row i {
        font-size: 20px;
    }

    .pdf-row span {
        font-size: 16px;
    }

/* Neutralizar quebras feias herdadas */
.infoMedicosCredenciados * {
    letter-spacing: 0 !important;
    text-transform: none !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ===== MOBILE (até 576px): reduzir fontes e ícones; alinhar melhor ===== */
@media (max-width: 576px) {

    .w3ContainerCor {
        padding: 10px;
    }

    .ulCor .w3-xlarge {
        font-size: 18px;
    }

    .cred-row {
        gap: 8px;
        padding: 5px 0;
    }

        .cred-row i,
        .cred-row .fa,
        .cred-row .fas {
            font-size: 18px; /* ícone menor no mobile */
        }

    .cred-label {
        font-size: 11px !important; /* rótulo menor */
    }

    .cred-value {
        font-size: 11px !important; /* valor menor */
    }

    .nomeMedicoCredenciamento {
        font-size: 11px !important; /* conforme seu pedido de mobile */
    }

    .especialidadeMedicoCredenciado,
    .conselhoMedicoCredenciado,
    .dataExpiracaoFichaConcessao {
        font-size: 11px !important;
    }

    .pdf-row i {
        font-size: 18px;
    }

    .pdf-row span {
        font-size: 11px !important;
    }

    /* Remover espaçamentos excessivos criados por <br/> */
    .infoMedicosCredenciados br {
        display: display: none;
    }
}


/* Linha padrão para PDFs: ícone + texto */
.pdf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

    /* Ícone PDF */
    .pdf-row i,
    .pdf-row .fa,
    .pdf-row .fas {
        flex: 0 0 auto;
        font-size: 22px;
        color: #0080a0 !important;
        line-height: 1;
        cursor: pointer;
    }

    /* Bloco de texto ao lado do ícone */
    .pdf-row .cred-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Nome do arquivo escondido para uso interno (já existe como .nomeDoArquivo) */
    .pdf-row .nomeDoArquivo {
        display: none !important;
    }

    /* Texto/label do PDF */
    .pdf-row .pdf-label {
        font-size: 16px;
        font-family: Calibri, sans-serif !important;
    }

    /* Hover: leve destaque (opcional) */
    .pdf-row:hover {
        background: rgba(0, 128, 160, 0.06); /* tom suave do seu tema */
        border-radius: 6px;
    }

/* Mobile: reduzir ícone e fonte */
@media (max-width: 576px) {
    .pdf-row {
        gap: 8px;
        padding: 6px 0;
    }

        .pdf-row i,
        .pdf-row .fa,
        .pdf-row .fas {
            font-size: 18px;
        }

        .pdf-row .pdf-label {
            font-size: 13px;
        }
}



/* Caixa fixa para os ícones: mesmo espaço para todos */
.icon-wrap {
    /* defina um quadrado consistente; ajuste se quiser maior/menor */
    width: 28px; /* largura fixa do "coluna de ícone" */
    height: 28px; /* altura fixa igual */
    display: inline-flex; /* permite centralizar o glifo */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    flex: 0 0 28px; /* evita encolher/esticar em flex rows */
    color: #0080a0; /* sua cor */
}

    /* Remover variações de tamanho herdadas */
    .icon-wrap i,
    .icon-wrap .fa,
    .icon-wrap .fas {
        font-size: 20px; /* tamanho do glifo (não use fa-2x aqui) */
        line-height: 1; /* evita empurrar para cima/baixo */
    }

/* Linha padrão (cred-row/pdf-row) usa a coluna fixa de ícone */
.cred-row,
.pdf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

/* O texto ocupa o restante do espaço */
.cred-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile: se quiser ícones ligeiramente menores */
@media (max-width: 576px) {
    .icon-wrap {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

        .icon-wrap i,
        .icon-wrap .fa,
        .icon-wrap .fas {
            font-size: 18px;
        }
}


/* ====== Theme / Variables ====== */
:root {
    --bg-gradient-start: #0b2f2b;
    --bg-gradient-end: #344b1e;
    --card-bg: #ffffff;
    --card-header-bg: #1f2b6b; /* indigo */
    --card-text: #0a0a0a;
    --muted: #6b7280;
    --pill-bg: #f4f5f7;
    --pill-label: #5f6a7a;
    --accent: #3b82f6;
    --success: #22c55e;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* ====== Wrapper ====== */
.pvm-wrapper {
    color: var(--card-text);
    padding: 16px;
    background: linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));
    min-height: 100vh;
    /* center content */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ====== Grid Lines ====== */
.pvm-grid {
    display: grid;
    gap: 12px;
}

/* Top: 4 cards */
.pvm-grid-top {
    grid-template-columns: repeat(4, minmax(220px,1fr));
}

/* Middle: Nome (wide) + CRM + Especialidade */
.pvm-grid-middle {
    grid-template-columns: 2fr 1fr 1fr; /* Nome ocupa mais */
}

/* Progress: single card full width */
.pvm-grid-progress {
    grid-template-columns: 1fr;
}

/* ====== Card ====== */
.pvm-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pvm-card__header {
    padding: 10px 14px;
    color: #fff;
    background: var(--card-header-bg);
}

.pvm-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.pvm-card__subtitle {
    margin: 2px 0 0 0;
    font-size: .75rem;
    color: #dbe6ff;
}

.pvm-card__body {
    padding: 14px;
}

.pvm-card__value {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .5px;
}

/* ====== Pill (Nome / CRM / Especialidade) ====== */
.pvm-pill {
    background: var(--pill-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pvm-pill--wide {
    grid-column: span 1; /* na middle grid já está 2fr */
}

.pvm-pill__label {
    font-size: .85rem;
    color: var(--pill-label);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

.pvm-pill__value {
    font-size: 2rem; /* destaque para nome/CRM */
    font-weight: 800;
}

/* ====== Progress Card ====== */
.pvm-progress-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 14px;
    display: grid;
    row-gap: 10px;
    width: 50% !important;
}

.pvm-progress-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.pvm-progress-card__bar {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: #e6e9ef;
    overflow: hidden;
}

.pvm-progress-card__bar-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width .4s ease;
}

.pvm-progress-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.pvm-progress-card__percent {
    font-size: 1.2rem;
}

.pvm-progress-card__note {
    font-size: .9rem;
    color: var(--muted);
}

/* ====== Footer Title ====== */
.pvm-footer {
    display: flex;
    justify-content: center;
}

.pvm-footer__title {
    color: #eaf0ff;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 1.1rem;
    margin: 8px 0 16px;
}

/* ====== Responsividade ====== */
@media (max-width: 1200px) {
    .pvm-grid-top {
        grid-template-columns: repeat(3, minmax(220px,1fr));
    }
}

@media (max-width: 900px) {
    .pvm-grid-top {
        grid-template-columns: repeat(2, minmax(220px,1fr));
    }

    .pvm-grid-middle {
        grid-template-columns: 1fr 1fr; /* Nome em 1 linha, CRM/Especialidade na outra */
    }

    .pvm-pill--wide {
        grid-column: 1 / -1; /* Nome ocupa a linha toda no mobile */
    }
}

@media (max-width: 600px) {
    .pvm-grid-top {
        grid-template-columns: 1fr;
    }

    .pvm-grid-middle {
        grid-template-columns: 1fr;
    }

    .pvm-card__value {
        font-size: 1.6rem;
    }

    .pvm-pill__value {
        font-size: 1.6rem;
    }
}

/* ====== Impressão (opcional) ====== */
@media print {
    .pvm-wrapper {
        background: #fff;
        padding: 8mm; /* margem para impressoras */
    }

    .pvm-footer__title {
        color: #000;
    }
    /* Evita que o navegador tente quebrar os cards no meio */
    .pvm-card, .pvm-pill, .pvm-progress-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}




/* Container do card de progresso */
.pvm-progress-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    padding: 14px;
    display: grid;
    row-gap: 10px;
    max-width: 800px; /* ajuste conforme seu layout */
}

.pvm-progress-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Barra */
.pvm-progress-card__bar {
    position: relative;
    height: 18px;
    border-radius: 999px;
    background: #e6e9ef;
    overflow: hidden;   
}

/* Parte preenchida */
.pvm-progress-card__bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f46e5 0%, #22c55e 100%);
    transition: width .4s ease;
    /* centralização do conteúdo interno */
    display: flex;
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente o label */   
}

/* Rótulo dentro da barra */
.pvm-progress-card__label-in {
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    left: calc(50%); /* posição base (centralizar) — será ajustada via JS */
    translate: -50% 0; /* corrige alinhamento horizontal */
    color: #fff !important; /* texto branco sobre gradiente */
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1; /* evita que o texto “suba” por causa de line-height grande */
}

/* Rodapé opcional */
.pvm-progress-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.pvm-progress-card__percent {
    font-size: 1rem;
}

.pvm-progress-card__note {
    font-size: .9rem;
    color: #6b7280;
}

/* Ajuste para quando o valor for muito baixo/alto (prevenir corte) */
.pvm-progress-card__bar-fill[data-pos="start"] .pvm-progress-card__label-in {
    left: 8px;
    translate: 0 -50%;
}

.pvm-progress-card__bar-fill[data-pos="end"] .pvm-progress-card__label-in {
    left: calc(100% - 8px);
    translate: -100% -50%;
}

/* Modo impressão (opcional) */
@media print {
    .pvm-progress-card {
        box-shadow: none;
    }
}


.status-verde {
    background-color: #2ecc71 !important; /* verde forte */
    color: white !important;
}

.status-amarelo {
    background-color: #f1c40f !important; /* amarelo forte */
    color: black !important;
}

.status-vermelho {
    background-color: #ad1909 !important; /* vermelho forte */
    color: white !important;
}


/* ===== Dropdown Comunicados ===== */
.dropdown-comunicados {
    position: relative;
}

.dropdown-menu-comunicados {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: rgba(10,14,32,.95);
    border: 1px solid rgba(124,58,237,.45);
    border-radius: 8px;
    margin-top: 6px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 16px rgba(0,229,255,.25);
}

.dropdown-comunicados.open .dropdown-menu-comunicados {
    display: block;
}

.dropdown-menu-comunicados .dropdown-item {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: #e6f3ff;
    cursor: pointer;
    white-space: nowrap;
}

    .dropdown-menu-comunicados .dropdown-item:hover {
        background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(0,229,255,.18) );
    }



.medalha-wrapper {
    position: relative;
    width: 90px;
    text-align: center;
    display: inline-block;
    perspective: 600px;
    cursor:pointer;
}

/* SVG */
.medalha-svg {
    width: 80px;
    height: 80px;
    transition: transform 0.6s ease;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
    animation: brilhoPulse 2.5s infinite;
}

/* 🌀 Giro no hover */
.medalha-wrapper:hover .medalha-svg {
    transform: rotateY(180deg) scale(1.05);
}

/* ✨ brilho pulsante */
@keyframes brilhoPulse {
    0% {
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255,255,255,0.9));
    }

    100% {
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
    }
}

/* 👑 Coroa */
.coroa {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    animation: flutuar 2s ease-in-out infinite;
}

/* leve flutuação */
@keyframes flutuar {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }

    100% {
        transform: translateX(-50%) translateY(0);
    }
}

/* 🎗️ Fitas */
.ribbons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: -10px;
}

.ribbon {
    width: 10px;
    height: 25px;
    border-radius: 2px;
}


.medalha-svg {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.ranking-texto {
    margin-top: 6px;
    color: #fff;
    font-size: 17px !important;
    letter-spacing: 2px;
}

#medalhaContainer{
    padding-right:80% !important;
}