@charset "utf-8";

body {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0%;
    font-weight: normal;    
}

header {        
    height: 130px;            
}

footer {
    position: fixed;
    bottom:0;
    width:100%;    
    margin: 0;
}

.barraCor {
    background: #49A2E7;        
}

.barraCorRodape {
    background: #49A2E7;    
    height: 5px;
    border: 0;
    padding: 0
}

.barraCorAdmin {
    background: #AD1614; /* vermelho admin */
}

.barraCorRodapeAdmin {
    background: #AD1614;
    height: 5px;
    border: 0;
    padding: 0;
}

.barraCorAntigo {
    background: #004869;    
    background: -webkit-linear-gradient(#0095da, #004869);        
    background: -moz-linear-gradient(#0095da, #004869);
    background: -ms-linear-gradient(#0095da, #004869);            

    border-bottom: 1px solid #CACACA;    
    box-shadow: 0 0 7px #888;        
}

.barraCorRodapeAntigo {
    background: #004869;    
    background: -webkit-linear-gradient(#0095da, #004869);        
    background: -moz-linear-gradient(#0095da, #004869);
    background: -ms-linear-gradient(#0095da, #004869);            

    border-bottom: 1px solid #CACACA;    
    box-shadow: 0 0 7px #888;        
    height: 13px;
    border: 0;
    padding: 0
}


.barraCorRx {
    background: black;
}

.barraCorRodapeRx {
    background: black;    
    height: 8px;
    border: 0;
    padding: 0
}


#conteudo {
    padding: 0px 8px;        
    text-align: center;
}

h1 {
    font-size: 24px;
    font-weight: 500;
    padding: 0px;
    margin: 0px
}

#login-dialog {
    width: 290px;
    margin: auto;
    margin-top: 150px;
}


.grid-login {
    background-color: #f2f2f2;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-top: 8px;
    padding: 10px;
    width: 100%;
}

.rotulo {
    width: 150px;
    text-align:right;
}

.rotuloDireita {
    width: 200px;
    text-align:right;
}

.rotulo100 {
    width: 100px;
    text-align:right;
}

/* Coluna do rotulo so do tamanho do maior texto (sem quebrar): o resto da largura fica para o campo */
.rotuloAjustado {
    width: 1%;
    white-space: nowrap;
    text-align:right;
    padding-left: 40px !important; /* 30px a mais que o padrao da celula */
}

/* Coluna de icone nas janelas de confirmacao: estreita e com o icone centralizado */
.colunaIcone {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding: 4px 24px !important;
}

.rotulo150 {
    width: 150px;
    text-align:right;
}

.rotulo200 {
    width: 200px;
    text-align:right;
}

.rotulo300 {
    width: 300px;
    text-align:right;
}

.rotulo50 {
    width: 50px !important;
    text-align:right;
}

.rotulo25 {
    width: 25px;
    text-align:right;
}


.campo {
    width: 150px;
    text-align:left;
}

.alinhaCentro {    
    text-align:center;
}

.alinhaDireita {    
    text-align:right;
}

.alinhaEsquerda {    
    text-align:left;
}

.colunaGrid {
    width: 50%;
}

.colunaGridDireita {
    text-align:right;
    width: 10%;
}

.colunaGridEsquerda {
    text-align:left;
    width: 50%;
}


.ui-icon.fa {
    text-indent: 0px !important;            
    background-image:none;    
}

.ui-panelgrid td {/* height: 30px

    */
}

.ui-datatable tbody tr {
    height: 10px !important;    
}

.ui-datatable-even {
    height: 10px;    
}

.ajax-status {
    position: absolute;
    top: 15%;
    left: 50%;
}

/* tira margem do titulo do dialog (em todos) */
.ui-dialog .ui-dialog-title {
    margin: 0px !important;
}
/* tira margem do icone de fechar do dialog (em todos) */
.ui-dialog.ui-widget-content .ui-dialog-titlebar-close {
    margin-top: 5px !important;
}

.ui-selectmanycheckbox td {
    border-width: 0px !important;
    padding: 0px !important;
}

.ui-selectmanycheckbox td label {
    padding-right: 10px;
}

.produto-tabela {
    width: 100% !important;
}

.produto-tabela input {
    width: 99%;
}


/* Coloca o botao do autocomplete com posi??o relativa (era absolute) */
.relativeButtonAutoComplete .ui-autocomplete-dropdown {
    position: relative !important;
}

/* customizo progress bar */
.ui-progressbar > .ui-progressbar-label{
    margin-top: 5px !important;
}
.ui-progressbar-label{
    margin-top: 5px !important;
}
.ui-progressbar .ui-progressbar-value.ui-widget-header{
    height: 100% !important;
}


/* Customiza TabView - in?cio */
.ui-tabs .ui-tabs-panel {    
    padding: 0.5em 0.2em !important;
}

.ui-tabs {
    padding: 0px !important;
}

.ui-tabs .ui-tabs-nav {
    margin: -1px !important;
    text-align: left !important;
}

.ui-tabs.ui-tabs-top > .ui-tabs-nav {
    padding: 0px !important;
}
/* Customiza TabView - fim */


/* Customiza campos do dialog de detalhe do prestador no guia medico */
.content-noborder .ui-widget-content {
    border: none;
}

.panelgrid-nopadding .ui-panelgrid .ui-panelgrid-cell{
    padding: 0px;
}

.datalistHorizontal {
    display: inline;
    float: right;
    margin-right: 5px;
    margin-top: 0px;
}

.layoutunit-height {
    height: 44px !important;
    padding: 0px !important;
}
/* Customiza campos do dialog de detalhe do prestador no guia medico */


/* Customiza fileupload para fotos */
.fileupload-buttonbarFoto > .ui-fileupload-buttonbar {
    border: 0px !important;
    padding: 0px !important;
    background: none !important;    
}

.fileupload-contentFoto > .ui-fileupload-content {
    display: none !important;
}

.ui-icon-plusthick {
    background: url('/sisrun/resources/images/search.png') no-repeat !important;
    
}
/* Customiza fileupload para fotos */



/* Layout padrao guia medico ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* altera a cor da borda */
.borderPadraoGuia > .ui-widget-content {
    border: 1px solid #d0f7df !important;
}

/* altera a cor do fundo (datalist,panel,datatable-header,datatable-paginator) */
.backgroundPadraoGuia .ui-datalist-header, 
.backgroundPadraoGuia .ui-panel-titlebar, 
.backgroundPadraoGuia th, 
.backgroundPadraoGuia .ui-widget-header {
    background-image: -webkit-linear-gradient(#F8FFF8, #d0f7df) !important;
    background-image: -moz-linear-gradient(#F8FFF8, #d0f7df) !important;
    background-image: -ms-linear-gradient(#F8FFF8, #d0f7df) !important;
}
/* altera a cor do linha da datatable (linhas odd) */
.linhaOdddatatablePadraoGuia .ui-datatable-odd {
    background-color: #F8FFF8;
}
/* altera a cor do mouse over na linha da datatable */
.selectiondatatablePadraoGuia .ui-state-hover {
    background-color: #d0f7df;
}

/* altera a cor do fundo do toolBar */
.toolbarPadraoGuia {
    margin-top: 15px;
    background-image: linear-gradient(#F8FFF8, #d0f7df) !important;
    border: 1px solid #d0f7df !important;
}
.toolbarPadraoGuia > .ui-toolbar-group-left {
    float: none !important;
    text-align: center;
}
/* Layout padrao guia medico ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Layout padrao profsyst */
.panelPadrao {
    margin-top: 20px;
    width: 70%;    
    margin-bottom: 25px;
}

.panelPadrao > .ui-panel-titlebar > .ui-panel-title {
    font-size: medium !important;
}

.toolbarPadrao {
    margin-top: 15px;    
}

.datatablePadrao {    
    margin-top: 20px;    
}

.panelgridPadrao {    
    margin-top: 10px;   
    width: 100%;
}

.botaoPadrao {        
    width: 100px;
}

.botaoGridPadrao {        
    height: 22px;
}

.toolbarDetalhe {
    margin-top: 15px;    
    text-align: center;
    width: 50%;    
}
.toolbarDetalhe > .ui-toolbar-group-left {
    float: none !important;
    text-align: center;
}

.toolbarExclusao {        
    width: 70%;
}

.fieldsetPopUp  {        
    background-color: #f5f5f5 !important;
}


/* Altera??o para aplicar css do bootstrap nas classes de bot?o padr?o (o primefaces sobreescreve o do bootstrap) */
.btn-primary, .ui-button.btn-primary {
    color: #fff;
    background-color: #337AB7;
    background-image: none;
    text-shadow: none;
}
.btn-primary, .ui-button.btn-primary:hover {
    background-color: #286090;
}

.btn-success, .ui-button.btn-success {
    color: #fff;
    background-color: #5CB85C;
    background-image: none;
    text-shadow: none;
}
.btn-success, .ui-button.btn-success:hover {
    background-color: #449D44;
}

.btn-info, .ui-button.btn-info {
    color: #fff;
    background-color: #5BC0DE;
    background-image: none;
    text-shadow: none;
}
.btn-info, .ui-button.btn-info:hover {
    background-color: #31B0D5;
}

.btn-warning, .ui-button.btn-warning {
    color: #fff;
    background-color: #F0AD4E;
    background-image: none;
    text-shadow: none;
}
.btn-warning, .ui-button.btn-warning:hover {
    background-color: #EC971F;
}

.btn-danger, .ui-button.btn-danger {
    color: #fff;
    background-color: #D9534F;
    background-image: none;
    text-shadow: none;
}
.btn-danger, .ui-button.btn-danger:hover {
    background-color: #C9302C;
}

.btn-tutor, .ui-button.btn-tutor {
    color: #fff;
    background-color: #D2B4DE;
    background-image: none;
    text-shadow: none;
}
.btn-warning, .ui-button.btn-tutor:hover {
    background-color: #aa71c1;
}

/* Altera??o para aplicar css do bootstrap nas classes de bot?o padr?o (o primefaces sobreescreve o do bootstrap) */

/* Disabled mais escuro */
.ui-state-disabled {
    opacity: .90 !important;
}

/* Datalist na horizantal */
.horizontal {
    display: inline;
    float : left;
    width: 65px;
    padding: 0px 0px;
}
.ui-datalist-data {
    overflow:auto;
}

/* coloca margem na direita de cada itemMenu */
.ui-menuitem-text {
    margin-right: 0.4em;
}

/* retira o * dos campos required ou @NotNull */
.ui-outputlabel-rfi {
    display: none;
}

/* dimunui tamanho do dia no schedule */
.ui-panelgrid td .fc-day-number{
    height: 10px !important;
}

/* ajusta altura dos combos com os demais */
.ui-selectonemenu { 
    display: inline-block; 
    vertical-align: top; 
}

.ui-inputswitch { 
    display: inline-block; 
    vertical-align: top !important;
}

.ui-chkbox {
    display: inline-block; 
    vertical-align: middle !important;    
}

/* cores dos treinos*/
.cor-treino-proposto{
    color: #0095da !important;    
}

.cor-treino-feito{
    color: #449D44 !important;        
}

.cor-treino-perdido{
    color: #D9534F !important;    
}

.cor-treino-avulso{
    color: #EC971F !important;    
}

.treino-proposto{
    background: #0095da !important;
    border-color: #0095da !important;
    text-align: center;
    max-height: 50px;
    min-height: 20px;
    cursor: pointer;
}

.treino-proposto-semanal{
    background: #0095da !important;
    border-color: #0095da !important;
    text-align: center;
    max-height: 400px;
    min-height: 50px;
    cursor: pointer;
}

.treino-feito{
    background: #449D44 !important;
    border-color: #449D44 !important;    
    text-align: center;
    max-height: 50px;
    min-height: 20px;
    cursor: pointer;
}

.treino-feito-semanal{
    background: #449D44 !important;
    border-color: #449D44 !important;    
    text-align: center;
    max-height: 200px;
    min-height: 50px;
    cursor: pointer;
}

.treino-perdido{
    background: #D9534F !important;
    border-color: #D9534F !important;    
    text-align: center;
    max-height: 50px;
    min-height: 20px;
    cursor: pointer;
}

.treino-perdido-semanal{
    background: #D9534F !important;
    border-color: #D9534F !important;    
    text-align: center;
    max-height: 200px;
    min-height: 50px;
    cursor: pointer;
}

.treino-avulso{
    background: #EC971F !important;
    border-color: #EC971F !important;    
    text-align: center;
    max-height: 50px;
    min-height: 20px;
    cursor: pointer;
}

.treino-avulso-semanal{
    background: #EC971F !important;
    border-color: #EC971F !important;    
    text-align: center;
    max-height: 200px;
    min-height: 50px;
    cursor: pointer;
}


/* troco cor padrão do calendário*/
.fc-today{
    color: #333333 !important;
    background: #f5f5f5 !important;
}

.fc-day-grid-event > .fc-content{
    max-height: 50px;
}

/* cores dos status financeiros*/
.corStatusPago{
    color:#008000;
}

.corStatusNaoPago{
    color:#0000FF;
}

.corStatusAtrasado{
    color:#FF0000;
}

/* linha em negrito na datatable*/
.linhaNegrito{
    font-weight: bolder;
}

/* mantém o negrito mesmo no hover */
.ui-datatable tbody tr.linhaNegrito:hover {
    font-weight: bold !important;
}

/* titulo maior no header dos avisos */
.ui-datascroller-header {
    font-size: medium;
}


.catalagoLogo {
    text-align:left;
    min-width: 200px;
    width: 200px;
}

.prof-panel-grid .ui-panelgrid-content{
    border: none;
}

.planilhaDiaSemana {
    background-color: #f5f5f5 !important;        
}

.planilhaAccordion .ui-accordion-content{
    padding: 0 !important;
}

.planilhaAccordion .ui-accordion-header{
    background-color: #fafafa !important;  
    text-align: left;
}

.toolbarPlanilha {    
    text-align: center;    
}
.toolbarPlanilha > .ui-toolbar-group-left {
    float: none !important;
    text-align: center;
}

/*reponsive nas grids com reflow */
@media ( max-width: 650px ) { /* Default 35em */
    .ui-datatable-reflow thead th,
    .ui-datatable-reflow tfoot td {
        display: none !important;
    }

    .ui-datatable-reflow .ui-datatable-data td { 
        text-align: left !important;
        display: block !important;
        border: 0px none !important;
        width: 100% !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        float: left !important;
        clear: left !important;
    }

    .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
        border: 0px none !important;
    }

    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0px none !important;;
        border-right: 0px none !important;;
    }

    .ui-datatable-reflow .ui-datatable-data td .ui-column-title { 
        padding: .4em !important;; 
        min-width: 35% !important; 
        display: inline-block !important;
        margin: -.4em 1em -.4em -.4em !important;
    }
}


/* Datalist na horizantal */
.horizontal-msg {
    display: inline;
    float : left;
    width: 140px;
    padding: 0px 0px;     
}

/* Usado no topo de mensagens */
.bolinha-acima {
    background-color: #EB4A40;
    color: #ffffff;
    border-radius: 100%;      
    position: relative;    
    top: -15px;
    right: 5px;      
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;    
}

.bolinha-acima-feedback {
    background-color: #EB4A40;
    color: #ffffff;
    border-radius: 100%;      
    position: relative;        
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;   
    z-index: 99;
}

.bolinha-acima-novidades {
    background-color: #EB4A40;
    color: #ffffff;
    border-radius: 100%;      
    position: relative;    
    top: -65px;
    right: -45px;      
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;    
}


.bolinha-acima-novidades2 {
    background-color: #F5F5F5;
    color: #333333;
    border-radius: 100%;      
    position: relative;    
    top: -90px;
    right: -45px;      
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;    
}
.bolinha-loading2 {
    background-color: #dcdcdc;
    color: transparent;
    min-width: 18px;
    min-height: 18px;
    animation: pulse 1.2s infinite ease-in-out;
}
@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}


.bolinha-acima-novidades3 {
    background-color: #F5F5F5;
    color: #333333;
    border-radius: 100%;      
    position: relative;    
    top: -65px;
    right: -40px;      
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;    
}


.bolinha-acima-novidades4 {
    background-color: #F5F5F5;
    color: #333333;
    border-radius: 100%;      
    position: relative;    
    top: -115px;
    right: -45px;      
    padding: 4px 8px;
    font-size: small;
    font-weight: bold;
    text-align: center;    
}
.bolinha-loading4 {
    background-color: #dcdcdc;
    color: transparent;
    min-width: 18px;
    min-height: 18px;
    animation: pulse 1.2s infinite ease-in-out;
}

.carinha-numero {
    display: inline-block;
    min-width: 14px;    
}

.carinha-numero-skeleton {
    background-color: #e0e0e0;
    color: transparent;
    border-radius: 4px;
    height: 14px;
    animation: pulse 1.2s infinite ease-in-out;
}


/* Bloqueios de horários na agenda */
.agenda-block{
    background: #f2dede !important;    
    border: none !important;    
    cursor: not-allowed;
}

.agenda-block .fc-content{
    display: none !important;
}

.agenda-agendado{
    background: #0095da !important;
    border-color: #0095da !important;
    text-align: left;
    cursor: pointer;
}

.agenda-ja-realizado{
    background: #449D44 !important;
    border-color: #449D44 !important;    
    text-align: left;
    cursor: pointer;
}

.agenda-cancelado{
    background: #D9534F !important;
    border-color: #D9534F !important;    
    text-align: left;   
    cursor: pointer;
}

.agenda-nao-compareceu{
    background: #EC971F !important;
    border-color: #EC971F !important;    
    text-align: left;  
    cursor: pointer;
}

/* tira o border do panel da home */
.ui-datascroller-content {
    border: none !important;
    padding: 0 !important;
}

/* faz oa tabview se ajustarem a celulares */

@media screen and (max-width: 810px) {
    .ui-tabs.ui-tabs-top > .ui-tabs-nav li{
        width: 100% !important;
    }
}

/* tira borda de panelgrid */    
.no-border > .ui-panelgrid-content{
    border: 0px solid #c7cdd1 !important;
}

/* tira scroll chato datatable */    
.ui-datatable-tablewrapper {
    overflow: hidden !important;
}

/* tira borda do datalist */    
.ui-widget-content .ui-datalist-content{
    border: none;
    background: transparent;
    background-image: none;
}

/* cores dos status financeiros*/
.corPlanilhaSemana{
    color:green;    
}

.corPlanilhaNaoSemana{
    color:black;        
}


.strava-icon {
    background-image: url("/sisrun/resources/icons/strava-brands.svg") !important;
}

/* ciclo menstrual no calendar */

.agenda-menstruacao {
    background: #DC000C !important;
    border-color: #DC000C !important;
    text-align: center;
    max-height: 50px;
    min-height: 25px;
    cursor: pointer;
    color: white !important; 
}

.agenda-ovulacao {
    background: #DBF3FA !important;
    border-color: #DBF3FA !important;
    text-align: center;
    max-height: 50px;
    min-height: 25px;
    cursor: pointer;    
}


/* cores dos status*/
.cor-ativo{
    color: #449D44 !important;        
}

.cor-cancelado{
    color: #D9534F !important;    
}

.cor-suspenso{
    color: #EC971F !important;    
}

.cor-pediu-excluir{
    color: red !important;    
    font-weight: bold;
}


/* Altera??o para aplicar css do bootstrap nas classes de bot?o padr?o (o primefaces sobreescreve o do bootstrap) */
.btn-mais-home, .ui-button.btn-mais-home {
    color: #fff;
    background-color: #0491FE;
    background-image: none;
    text-shadow: none;
    border-radius: 15px;
    border: 0;
}
.btn-mais-home, .ui-button.btn-mais-home:hover {
    background-color: #337AB7;
}


/* pre cadastro header */

.header-escuro > .ui-accordion-header{
    background-color: #ddd;
    font-weight: bold;
}

.my-dialogs {
    margin-top: 50px;
} 

/* usados nas bolinhas de trimp */

.container {
    display: flex; /* Permite alinhar os círculos em linha */
    justify-content: center; /* Espaço igual entre os círculos */
    margin-top: 0px; /* Margem acima dos círculos */
    min-height: 40px;
}
.circulo {
    width: 25px; /* Largura do círculo */
    height: 25px; /* Altura do círculo */
    background-color: transparent; /* Fundo transparente */
    border: 1px solid; /* Borda verde */
    border-radius: 50%; /* Deixa o elemento circular */
    display: flex; /* Usado para centralizar o conteúdo */
    align-items: center; /* Alinha verticalmente o conteúdo */

    text-align: center; /* Centraliza o texto */
    flex-direction: column; /* Alinha os números e texto em coluna */
    font-size: 14px; /* Tamanho da fonte do número */    
    margin: 0 7px;
}
.texto {
    font-size: 11px; /* Tamanho da fonte do texto abaixo do círculo */    
    margin-top: 5px; /* Espaço acima do texto */
}


/* Garante que o schedule não desça */
.ui-schedule {
    margin-top: 0 !important;
}

/* Layout responsivo */
@media (max-width: 1000px) {
    .ui-panelgrid.ui-panelgrid-2>.ui-grid-responsive {
        display: block !important;
    }

    .ui-panelgrid.ui-panelgrid-2>.ui-grid-responsive>.ui-grid-row {
        width: 100% !important;
    }

    /* Opcional: fazer o resumo ficar abaixo em telas pequenas */
    #resumoPanel {
        margin-top: 20px;
        max-height: none;
    }
}


/* Alinhamento vertical */
.ui-panelgrid.ui-panelgrid-2>.ui-grid-responsive>.ui-grid-row {
    vertical-align: top;
    display: flex;
}

/* Ajuste de altura para os painéis */
.ui-panel {
    display: flex;
    flex-direction: column;
}


/* Remove marcadores do dataList */
.ui-datalist .ui-datalist-data {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Estilo para as colunas do panelGrid */
.label-col {
    text-align: right;
    padding-right: 10px;
    color: #7f8c8d;
}

.value-col {
    text-align: left;
    font-weight: 500;
}

/* Melhorias de espaçamento */
.ui-panel .ui-panel-content {
    padding: 10px !important;
}


/* Garante alinhamento correto dos números */
.value-col {
    font-family: monospace;
    text-align: right;
}

/* Espaçamento entre número e unidade */
.h-unit {
    margin-left: 2px;
    color: #7f8c8d;
}


/* Estilo específico apenas para o painel com a classe compact-header */
.compact-header .ui-panel-titlebar {
    height: 20px !important;    
}

/* botão com icone de IA */
.ia-icon-button .ui-button-text {
    background-image: url("/sisrun/javax.faces.resource/images/ia-sisrun.svg.xhtml");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: top left;    
    text-indent: -9999px; /* Esconde o texto se quiser só o ícone */    
}

/*tela planilha gerador de ia */
.campoTexto {
    margin-bottom: 12px;
}

.labelCampo {
    font-weight: bold;
    color: #444;
    margin-right: 4px;
}

.painel-dispositivo {
    min-height: 230px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 0px 6px #ccc;
    padding: 15px;
}

.painel-dispositivo img {
    margin-bottom: 10px;
}

.painel-dispositivo .ui-button-danger {
    margin-top: 10px;
}

/* visual do accordion do FAQ */
.faq-acc .ui-accordion-header {
    background: #f7f7f7;
    border-radius: 6px;
    margin: 6px 0;
    padding-left: 10px;
}
.faq-acc .ui-accordion-content {
    background: #fff;
}
.faq-acc .ui-accordion-header .fa {
    margin-right: 6px;
    opacity: .85;
}

/* container */
.datatable-skeleton {
    margin-top: 10px;
}

/* linha */
.datatable-skeleton-row {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

/* avatar */
.datatable-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* texto */
.datatable-skeleton-text {
    flex: 1;
}

.skeleton-line {
    height: 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-line.large {
    width: 80%;
}

.skeleton-line.small {
    width: 60%;
}

/* botão */
.datatable-skeleton-button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

/* efeito skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* desativa status na home, pq tem skeleton 
body:has(.home) .ajax-status {
    display: none !important;
}
*/
body.page-home .ajax-status {
    display: none !important;
}


.btnUpgradeIcon {
    
    border: none !important;
    box-shadow: none !important;
    padding: 2px 6px;
    color: #555;
}

.btnUpgradeIcon:hover {
    color: #337ab7;
    background: transparent !important;
}


.badge-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #F5F5F5;
    color: #333333 !important;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;    
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.badge-upgrade-link:hover {
    background-color: #ec971f;
    text-decoration: none;
    color: #fff;
}

.badge-contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #d9534f;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.radioCentralizado.ui-selectoneradio {
    margin: 0 auto;
}

.linhaDestaque{
    background: #e8f5e9 !important;
    font-weight: bold;
    color: #2e7d32 !important;
}

.painelAlunosFixo {
    position: sticky;
    top: 10px;
    z-index: 10;
}

.cardExplicacaoCarga {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f7f9fa;
    border-left: 4px solid #0095da;
    border-radius: 4px;
    font-size: 12px;
    color: #555;
}

.cardExplicacaoCarga .tituloExplicacao {
    font-weight: 600;
    margin-bottom: 4px;
    color: #444;
}

.cardExplicacaoCarga .itemLegendaCarga {
    display: inline-block;
    margin-right: 16px;
    white-space: nowrap;
}

.cardExplicacaoCarga .corLegendaCarga {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: baseline;
}

.cardExplicacaoCarga .textoExplicacao {
    margin-top: 4px;
}
/* Planejado x Realizado (dialogComparacao do acompanhamento) */
.cmpOk {
    color: #4a9d5f;
}
.cmpLeve {
    color: #c58f00;
}
.cmpAlto {
    color: #c0392b;
    font-weight: bold;
}
.cmpNa {
    color: #999999;
}
.cmpFidelidade {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 8px 0;
}

/* Fidelidade do Treino: ANEL de progresso (identidade própria - a Prioridade de Atenção é nível/barra,
   o Risco de Abandono é gauge). --p = percentual (inline, do bean), --cor = cor da faixa (classe). */
.cmpCirculo {
    --p: 0;
    --cor: #b5b5b5;
    --t: 5px;
    position: relative;
    isolation: isolate;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    color: var(--cor);
    font-weight: bold;
    font-size: 0.95em;
    background-color: #e4e7eb; /* fallback sem conic-gradient */
    background: conic-gradient(var(--cor) calc(var(--p) * 1%), #e4e7eb 0);
}
.cmpCirculo::before {
    content: "";
    position: absolute;
    left: var(--t); top: var(--t); right: var(--t); bottom: var(--t);
    border-radius: 50%;
    background: #ffffff;
    z-index: -1; /* acima do anel (fundo do próprio elemento), abaixo do número */
}
.cmpCirculoOk { --cor: #4a9d5f; }
.cmpCirculoLeve { --cor: #c58f00; }
.cmpCirculoAlto { --cor: #c0392b; }
.cmpCirculoNa { --cor: #b5b5b5; color: #999999; background: #e4e7eb; }

/* Cabeçalho do dialog Planejado x Realizado: foto + nome à esquerda, score à direita */
.cmpHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    margin-bottom: 12px;
    text-align: left;
}
.cmpHeaderFoto {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.cmpHeaderInfo {
    flex: 1;
    min-width: 0;
}
.cmpHeaderCentro {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.cmpHeaderNome {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    color: #333333;
}
.cmpHeaderSub {
    color: #777777;
    margin-top: 2px;
}
.cmpHeaderFid {
    margin-top: 6px;
    font-weight: bold;
    color: #333333;
}
.cmpCirculoLg {
    --t: 7px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1.25em;
    flex-shrink: 0;
}

/* Dialogs do Score: nada neles precisa de rolagem horizontal (o width:100% + padding
   internos estouram 1-2px e criam a barra à toa) */
#dialogComparacao .ui-dialog-content,
#dialogAjudaScore .ui-dialog-content {
    overflow-x: hidden;
}

/* Tema antigo ignora o ui-button-warning do PF8: pinta na mão (ex.: Recalcular do dialogComparacao) */
.ui-button.ui-button-warning {
    background: #c58f00 !important;
    border-color: #b58300 !important;
    color: #ffffff !important;
}
.ui-button.ui-button-warning .ui-button-text,
.ui-button.ui-button-warning .ui-icon {
    color: #ffffff !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Central de Atenção ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Um registro visual por aluno: foto + nome + motivos + pontuação + ações (flex, sem tabela larga) */
.caFiltros > * { vertical-align: middle; }
.caTotalizador { color: #999999; font-size: 0.85em; margin-top: 6px; text-align: right; }
.caLinha { display: flex; align-items: center; gap: 10px; }
.caFoto { flex: 0 0 auto; }
.caCorpo { flex: 1 1 auto; min-width: 0; text-align: left; }
.caTopo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.caNome { color: #333333; font-size: 1.05em; }
.caNomeLg { font-size: 1.3em; display: block; }
.caPrioridade { font-size: 0.85em; font-weight: bold; }
.caMotivo { color: #444444; font-size: 0.95em; margin-top: 2px; }
.caDetalhe { color: #888888; font-size: 0.85em; }
.caExtra { color: #888888; font-size: 0.85em; margin-top: 2px; }
.caPontuacao { flex: 0 0 auto; }
.caBotao.ui-button { width: 140px; margin: 2px 0; white-space: nowrap; }
.caAcoesDetalhe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 0 8px; }
.caAcoesDetalhe .caBotao.ui-button { width: 190px; margin: 0; }

/* Prioridade de Atenção: NÍVEL (barra de 4 segmentos + rótulo) - identidade própria, não é percentual
   (a Fidelidade do Treino é anel, o Risco de Abandono é gauge). A pontuação fica só no tooltip. */
.caNivel { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; }
.caNivelBarra { display: flex; gap: 3px; }
.caNivelSeg { width: 16px; height: 9px; border-radius: 2px; background: #e4e7eb; }
.caNivelLg .caNivelSeg { width: 22px; height: 12px; }
.caNivelSm .caNivelSeg { width: 10px; height: 7px; }
.caNivelRotulo { font-size: 0.75em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: #7f8c8d; }
.caNivelLg .caNivelRotulo { font-size: 0.9em; }
.caNivelSm .caNivelRotulo { font-size: 0.65em; }
.caNivel.caCritica .caNivelOn { background: #c0392b; }
.caNivel.caAlta .caNivelOn { background: #e67e22; }
.caNivel.caMedia .caNivelOn { background: #c58f00; }
.caNivel.caBaixa .caNivelOn { background: #7f8c8d; }
.caNivel.caCritica .caNivelRotulo { color: #c0392b; }
.caNivel.caAlta .caNivelRotulo { color: #e67e22; }
.caNivel.caMedia .caNivelRotulo { color: #c58f00; }
.caNivel.caBaixa .caNivelRotulo { color: #7f8c8d; }
.caPrioridade.caCritica { color: #c0392b; }
.caPrioridade.caAlta { color: #e67e22; }
.caPrioridade.caMedia { color: #c58f00; }
.caPrioridade.caBaixa { color: #7f8c8d; }

/* Dialog de detalhe */
.caDialog .ui-dialog-content { overflow-x: hidden !important; }
.caDialog .toolbarDetalhe, .caDialog .ui-tabs { box-sizing: border-box; }
.caDetalheTopo { padding-bottom: 8px; border-bottom: 1px solid #eeeeee; }
.caSecao { margin: 12px 0 4px 0; font-weight: bold; color: #555555; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; }
.caSituacao { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #eeeeee; }
.caSituacaoTexto { flex: 1 1 auto; min-width: 0; text-align: left; }
.caPontos { flex: 0 0 auto; color: #777777; font-size: 0.85em; }
.caRodape { margin-top: 10px; color: #999999; font-size: 0.8em; text-align: right; }

/* Card da home: top 5 */
.caHomeRodape { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.caHomeTotal { color: #777777; font-size: 0.9em; }
.caHomeLinha { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #eeeeee; }
.caHomeNome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.caHomeMotivo { display: block; color: #888888; font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caHomeVazio { color: #777777; padding: 6px 0; }

/* Mobile: foto + nome + pontuação na primeira linha, motivos abaixo, ações em linha */
@media (max-width: 700px) {
    .caPainel.ui-panel { width: 100% !important; }
    .caFiltros > * { display: inline-block; margin-bottom: 4px; }
}

/* ~~~~~~~~~~~~~~~~~~~~~ Parâmetros do Sistema > aba Ferramentas ~~~~~~~~~~~~~~~~~~~~~ */
.ferrBloco { display: block; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; text-align: left; }
.ferrTitulo { font-weight: bold; color: #333333; margin-bottom: 4px; text-align: left; }
.ferrTexto { color: #666666; font-size: 0.9em; line-height: 1.5; text-align: left; }
.ferrControles { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ferrSituacao { display: block; margin-top: 8px; font-size: 0.9em; color: #31708f; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Home personalizável ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Grade de quadros da home do treinador: 3 colunas, ordem vem da preferência (CSS order) */
.homeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 5px; column-gap: 10px; align-items: start; margin-top: 10px; padding-bottom: 60px; } /* folga: rodape e fixo, ultima linha nao pode terminar colada no fim da pagina */
/* grid-auto-rows 5px + span calculado no JS (homeMasonry em home.xhtml): colunas empilham sem alinhar linhas */
.homeQuadro { min-width: 0; }
/* Quadro que é só uma tabela: ela já traz cabeçalho e rodapé próprios, o painel não precisa forrar */
.homeQuadro .quadroTabela > .ui-panel-content { padding: 0 !important; } /* !important porque a regra geral de .ui-panel-content, lá em cima, também usa */
/* A bolinha do contador é relative com top negativo: sem isto ela ainda reserva a altura dela no rodapé do quadro */
.bolinhaSemFluxo { display: block; height: 0; }
.homeAvisos { margin-top: 10px; }
@media (max-width: 960px) {
    .homeGrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* Tela Personalizar Home */
.phIntro { color: #555555; margin: 6px 0 4px 0; }
.phTitulo { font-weight: bold; color: #333333; }
.phDescricao { color: #777777; font-size: 0.9em; }
.phSeta.ui-button { width: 34px; margin: 0 2px; }
@media (max-width: 960px) {
    .phPainel.ui-panel { width: 100% !important; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Retenção de Alunos (Risco de Abandono) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Identidade própria: GAUGE/velocímetro (a Fidelidade é anel, a Prioridade de Atenção é nível/barra) */
.retIndicadores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.retIndicador { flex: 1 1 140px; background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 0; }
.retIndicadorValor { display: block; font-size: 1.8em; font-weight: bold; color: #333333; line-height: 1.2; }
.retIndicadorRotulo { color: #777777; font-size: 0.85em; }
.retIndicador.retAlto .retIndicadorValor { color: #c0392b; }
.retIndicador.retMedio .retIndicadorValor { color: #c58f00; }
.retIndicador.retBaixo .retIndicadorValor { color: #4a9d5f; }
.retGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.retCard { background: #ffffff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 10px 12px; min-width: 0; overflow: hidden; }
.retCardTitulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: bold; color: #555555; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; text-align: left; }
.retSub { color: #999999; font-weight: normal; text-transform: none; letter-spacing: 0; }
.retPeriodo.ui-selectonebutton .ui-button { font-size: 0.85em; padding: 0 4px; }
.retVazio { color: #888888; padding: 24px 0; text-align: center; font-size: 0.9em; }
/* Altura no container (não só no canvas): gráfico criado numa aba oculta nasce com 0 px e o resize
   ao mostrar a aba lê a altura do container */
.retCard .ui-chart { height: 230px; position: relative; }
.retDialog .ui-chart { height: 180px; position: relative; }
/* toolbar 100% + padding estourava 7 px e abria scroll horizontal no dialog */
.retDialog .ui-dialog-content { overflow-x: hidden !important; }
.retDialog .toolbarDetalhe, .retDialog .ui-tabs { box-sizing: border-box; }

/* Gauge: semicírculo com as 3 faixas fixas (Baixo | Médio | Alto) e agulha no score (--s, 1,8 grau por ponto) */
.retGaugeBloco { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.retGaugeBlocoLg { flex: 0 0 auto; }
.retGauge { --s: 0; --g: 120px; position: relative; display: inline-block; width: var(--g); height: calc(var(--g) / 2); overflow: hidden; }
.retGaugeSm { --g: 72px; }
.retGaugeLg { --g: 170px; }
.retGauge::before {
    content: ""; position: absolute; left: 0; top: 0; width: var(--g); height: var(--g); border-radius: 50%;
    background: #e4e7eb; /* fallback sem conic-gradient */
    background: conic-gradient(from 270deg, #4a9d5f 0deg 72deg, #c58f00 72deg 126deg, #c0392b 126deg 180deg, transparent 180deg 360deg);
}
.retGaugeFuro { position: absolute; left: calc(var(--g) * 0.18); top: calc(var(--g) * 0.18); width: calc(var(--g) * 0.64); height: calc(var(--g) * 0.64); border-radius: 50%; background: #ffffff; }
.retGaugeAgulha {
    position: absolute; left: calc(var(--g) / 2 - 1px); bottom: 0; width: 2px; height: calc(var(--g) * 0.44); background: #333333; border-radius: 2px;
    transform-origin: bottom center; transform: rotate(calc(var(--s) * 1.8deg - 90deg));
}
.retGaugeAgulha::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; background: #333333; }
.retGaugeValor { font-weight: bold; color: #333333; font-size: 1.05em; margin-top: 2px; }
.retGaugeValorLg { font-size: 1.5em; }
.retGaugeFaixa { font-size: 0.75em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.retGaugeFaixa.retAlto { color: #c0392b; }
.retGaugeFaixa.retMedio { color: #c58f00; }
.retGaugeFaixa.retBaixo { color: #4a9d5f; }

/* Tendência */
.retTend { font-size: 0.9em; font-weight: bold; white-space: nowrap; }
.retTendSubindo { color: #c0392b; }
.retTendDescendo { color: #4a9d5f; }
.retTendEstavel { color: #7f8c8d; }
.retTendSem { color: #b5b5b5; font-weight: normal; }

/* Componentes do risco (detalhe): barras simples */
.retComp { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.retCompRotulo { flex: 0 0 180px; text-align: left; color: #444444; font-size: 0.9em; }
.retCompBarra { flex: 1 1 auto; height: 10px; background: #eeeeee; border-radius: 5px; overflow: hidden; }
.retCompPreench { height: 100%; background: #c0392b; border-radius: 5px; }
.retCompValor { flex: 0 0 56px; text-align: right; color: #555555; font-size: 0.85em; font-weight: bold; }

@media (max-width: 960px) {
    .retPainel.ui-panel { width: 100% !important; }
    .retGrid { grid-template-columns: 1fr; }
    .retCompRotulo { flex-basis: 120px; }
}
/* Card da home: só os dois números (os gráficos ficam na tela) */
.retHomeIndicadores { margin-top: 4px; }
.retHomeIndicadores .retIndicador { padding: 6px 8px; }
.retHomeIndicadores .retIndicadorValor { font-size: 1.5em; }

/* Indisponibilidade do Aluno: aba do cadastro (situacao) e marcacao do dia na planilha semanal */
.indSituacao { font-weight: bold; }
.indSituacaoAndamento { color: #6d5ca3; }
.indSituacaoFutura { color: #2980b9; }
.indSituacaoEncerrada { color: #7f8c8d; }
.indSituacaoInativa { color: #aaaaaa; }
.indLinhaInativa td { color: #aaaaaa !important; }
.indObservacao { word-break: break-word; }
/* Hachuras do dia na planilha: linha fina translucida sobre o fundo, discreta.
   Ordem importa (mesma especificidade): menstruacao < lesao < indisponibilidade, a de baixo prevalece no mesmo dia */
.planilhaDiaMenstruacao .ui-g:first-child > .planilhaDiaSemana { background: repeating-linear-gradient(45deg, rgba(194,24,91,.22) 0 1px, transparent 1px 7px) #f5f5f5 !important; }
.planilhaMenstruacao { color: #c2185b; font-size: smaller; font-weight: bold; cursor: help; white-space: nowrap; }
.planilhaDiaLesao .ui-g:first-child > .planilhaDiaSemana { background: repeating-linear-gradient(45deg, rgba(230,81,0,.25) 0 1px, transparent 1px 7px) #f5f5f5 !important; }
.planilhaLesao { color: #e65100; font-size: smaller; font-weight: bold; cursor: help; white-space: nowrap; }
.planilhaDiaIndisponivel .ui-g:first-child > .planilhaDiaSemana { background: repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px) #f5f5f5 !important; }
.planilhaIndisponivel { color: #6d5ca3; font-size: smaller; font-weight: bold; cursor: help; white-space: nowrap; }
/* Calendario mensal: so a linha do numero do dia (fc-day-top) e legenda; mesma ordem de prioridade */
.fc-day-top.agenda-menstruacao-dia { background: repeating-linear-gradient(45deg, rgba(194,24,91,.22) 0 1px, transparent 1px 5px) !important; cursor: help; }
.fc-day-top.agenda-menstruacao-dia .fc-day-number { color: #c2185b !important; font-weight: bold; }
.planilhaLegendaMenstruacao { display: inline-block; width: 15px; height: 15px; vertical-align: middle; background: repeating-linear-gradient(45deg, rgba(194,24,91,.22) 0 1px, transparent 1px 5px); border: 1px solid #e8a7c4; }
.fc-day-top.agenda-lesao-dia { background: repeating-linear-gradient(45deg, rgba(230,81,0,.25) 0 1px, transparent 1px 5px) !important; cursor: help; }
.fc-day-top.agenda-lesao-dia .fc-day-number { color: #e65100 !important; font-weight: bold; }
/* simbolo da lesao no mensal, aparece mesmo quando a indisponibilidade prevalece na cor */
.fc-day-top.agenda-lesao-dia::before { content: "\f0fa"; font-family: FontAwesome; float: left; font-size: 10px; color: #e65100; padding: 2px 4px; }
/* gráfico da estrutura do treino no pé do evento da planilha mensal (flag Novidades da Planilha) */
.fc-event.planilhaComPerfil { position: relative; max-height: 66px; padding-bottom: 16px; overflow: hidden; }
.planilhaPerfilTreino { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 12px; display: flex; align-items: flex-end; gap: 1px; pointer-events: none; }
.planilhaPerfilTreino span { flex-basis: 0; min-width: 2px; background: rgba(255,255,255,.75); border-radius: 1px 1px 0 0; }
/* Planejado x Realizado: gráfico planejado x feito por passo (card 3817) */
.comparacaoPerfil { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: 4px; margin-top: 12px; margin-bottom: 4px; border-bottom: 1px solid #ccc; background: #fafafa; }
.comparacaoPerfilPasso { position: relative; flex-basis: 0; min-width: 4px; height: 100%; }
.comparacaoPerfilPlan, .comparacaoPerfilReal { position: absolute; left: 0; bottom: 0; box-sizing: border-box; border-radius: 2px 2px 0 0; }
.comparacaoPerfilPlan { background: #e3e3e3; border: 1px solid #b5b5b5; }
.comparacaoPerfilReal { opacity: .8; }
.comparacaoPerfil_ok { background-color: #4a9d5f; }
.comparacaoPerfil_leve { background-color: #e0a800; }
.comparacaoPerfil_alto { background-color: #c0392b; }
.comparacaoPerfil_na { background-color: #999; }
.comparacaoPerfilLegenda { font-size: 0.75rem; color: #666; margin-bottom: 8px; }
.comparacaoPerfilCor { display: inline-block; width: 10px; height: 10px; margin: 0 2px 0 8px; vertical-align: middle; border-radius: 2px; }
.comparacaoPerfilCorPlan { background: #e3e3e3; border: 1px solid #b5b5b5; margin-left: 0; }
.planilhaLegendaLesao { display: inline-block; width: 15px; height: 15px; vertical-align: middle; background: repeating-linear-gradient(45deg, rgba(230,81,0,.25) 0 1px, transparent 1px 5px); border: 1px solid #f0b48a; }
.fc-day-top.agenda-indisponivel-dia { background: repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px) !important; cursor: help; }
.fc-day-top.agenda-indisponivel-dia .fc-day-number { color: #6d5ca3 !important; font-weight: bold; }
.planilhaLegendaIndisponivel { display: inline-block; width: 15px; height: 15px; vertical-align: middle; background: repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px); border: 1px solid #cccccc; }

/* Faixa do Instagram na tela de Novidades (pages/novidades/formNovidades.xhtml) */
.novidades-insta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
    background: #fafbfc;
}

.novidades-insta-icone {
    font-size: 28px !important;
    color: #49A2E7;
}

.novidades-insta-texto {
    flex: 1 1 220px;
    color: #333;
    font-size: 13px;
    text-align: left;
}

.novidades-insta-link {
    padding: 6px 14px;
    border: 1px solid #49A2E7;
    border-radius: 4px;
    color: #49A2E7 !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.novidades-insta-link:hover {
    background: #49A2E7;
    color: #fff !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Fluxo de Caixa (fc*) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fcFiltros > * { vertical-align: middle; }
.fcScroll { overflow-x: auto; margin-top: 12px; border: 1px solid #e3e6ea; border-radius: 6px; }
.fcTabela { border-collapse: separate; border-spacing: 0; white-space: nowrap; min-width: 100%; font-size: 0.92em; }
.fcTabela th, .fcTabela td { padding: 5px 10px; border-bottom: 1px solid #eeeeee; text-align: right; }
.fcTabela th { background: #f3f5f7; color: #555555; font-weight: bold; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.3px; }
.fcTabela th.fcFixa, .fcTabela td.fcFixa { position: sticky; left: 0; z-index: 1; text-align: left; background: #ffffff; min-width: 190px; box-shadow: 2px 0 0 #e3e6ea; }
.fcTabela th.fcFixa { background: #f3f5f7; }
.fcTabela .fcMesAtual { background: #fffbe6; }
.fcTabela th.fcMesAtual { background: #f7efc8; }
.fcTabela .fcTotal { border-left: 1px solid #e3e6ea; }
.fcTabela tr.fcSECAO td { background: #e9edf2; font-weight: bold; text-transform: uppercase; font-size: 0.85em; color: #444444; }
.fcTabela tr.fcSUBSECAO td { font-weight: bold; color: #555555; }
.fcTabela tr.fcCATEGORIA td.fcFixa { padding-left: 28px; color: #333333; }
.fcTabela tr.fcSUBTOTAL td, .fcTabela tr.fcRESULTADO_MES td { font-weight: bold; border-top: 1px solid #cccccc; }
.fcTabela tr.fcSALDO_INICIAL td, .fcTabela tr.fcSALDO_FINAL td { font-weight: bold; background: #eef4fb; }
.fcTabela tr.fcSALDO_INICIAL td.fcFixa, .fcTabela tr.fcSALDO_FINAL td.fcFixa { background: #eef4fb; }
.fcTabela tr.fcSECAO td.fcFixa { background: #e9edf2; }
.fcTabela tr.fcSALDO_FINAL td { border-top: 2px solid #999999; }
.fcTabela a.fcLink { color: #2a6db0; text-decoration: none; border-bottom: 1px dotted #2a6db0; }
.fcTabela a.fcLink:hover { color: #0d4a8a; }
.fcNota { margin-top: 8px; font-style: italic; color: #777777; font-size: 0.85em; line-height: 1.4; }
.fcDialog .ui-datatable td { font-size: 0.92em; }
@media (max-width: 700px) {
    .fcTabela th.fcFixa, .fcTabela td.fcFixa { min-width: 130px; }
    .fcTabela tr.fcCATEGORIA td.fcFixa { padding-left: 18px; white-space: normal; }
}
.fcLegenda { font-weight: normal; text-transform: none; letter-spacing: 0; font-size: 0.95em; color: #777777; }
.fcLegenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: middle; }
.fcCards .retIndicador { flex: 1 1 170px; }
.fcCards .retIndicadorValor { font-size: 1.35em; white-space: nowrap; }
@media (max-width: 1400px) { .fcCards .retIndicadorValor { font-size: 1.15em; } }

/* Itens extras do cabecalho da planilha (pages/planilha/cabecalhoExtra.xhtml) */
.cabecalhoExtra { border-top: 1px solid #eee; margin-top: 4px; padding-top: 4px; }
.cabecalhoExtra .ui-grid-col { text-align: center; width: 100%; }
.cabecalhoExtraIcone { color: #555; font-size: 1.2em; margin-right: 2px; }
/* Até 4 itens na faixa (PlanilhaMB.isCabecalhoUmaLinha): fixos e extras lado a lado numa linha só */
@media (min-width: 641px) {
    .cabecalhoUmaLinha { display: flex; align-items: center; }
    .cabecalhoUmaLinha > .ui-grid-row { display: contents !important; }
    .cabecalhoUmaLinha .ui-grid-col { flex: 1 1 0; float: none; text-align: center !important; }
}

/* Planilha mensal: coluna Resumo depois do domingo (flag Novidades da Planilha) */
.planilhaComColunaResumo .fc-dayGridMonth-view .fc-row { margin-right: 150px !important; position: relative; overflow: visible; }
.planilhaComColunaResumo .fc-dayGridMonth-view .fc-body .fc-row { min-height: 95px; }
.planilhaComColunaResumo .fc-resumo-semana { position: absolute; top: 0; bottom: 0; left: 100%; width: 150px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #ddd; border-left-width: 2px; background: #fafafa; font-size: 0.75rem; line-height: 1.35; color: #333; overflow: hidden; }
.planilhaComColunaResumo .fc-resumo-titulo { text-align: center; font-weight: bold; background: transparent; border-left-width: 1px; padding-top: 1px; }
.planilhaComColunaResumo .fc-resumo-linha { display: flex; justify-content: space-between; font-weight: bold; margin-top: 2px; }
.planilhaComColunaResumo .fc-resumo-linha:not(:first-child) { margin-top: 12px; } /* linha em branco entre Distância e Tempo */
.planilhaComColunaResumo .fc-resumo-rotulo { color: #555; }
.planilhaComColunaResumo .fc-resumo-vazio { text-align: center; color: #aaa; margin-top: 8px; }
.planilhaComColunaResumo .fc-resumo-evolucao { color: #6c757d; font-size: 0.7rem; }
.planilhaComColunaResumo .fc-resumo-proposto { color: #0095da; }
.planilhaComColunaResumo .fc-resumo-feito { color: #449D44; }

/* Planilha mensal: coluna de Treinos Favoritos arrastáveis (estrela da barra, flag Novidades da Planilha) */
.planilhaFavoritos { flex: 0 0 190px; width: 190px; border: 1px solid #ddd; background: #fafafa; padding: 6px; box-sizing: border-box; font-size: 0.8rem; text-align: left; }
.planilhaFavoritosTitulo { font-weight: bold; text-align: center; margin-bottom: 6px; color: #333; }
.planilhaFavoritosLista { max-height: 70vh; overflow-y: auto; margin-top: 6px; }
.planilhaFavItem { background: #fff; color: #333; border: 1px solid #ccc; border-radius: 3px; padding: 4px 6px; margin-bottom: 4px; cursor: grab; line-height: 1.25; }
.planilhaFavItem:active { cursor: grabbing; }
.planilhaFavItem b { display: block; word-break: break-word; }
.planilhaFavModalidade { font-size: 0.7rem; color: #777; }
.planilhaFavLinha1 { display: flex; align-items: flex-start; gap: 4px; }
.planilhaFavLinha1 b { flex: 1; min-width: 0; }
/* ícone da modalidade (preto transparente) à direita do nome */
.planilhaFavIcone { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0.75; }
.planilhaFavItem:hover { border-color: #0095da; }
.planilhaFavVazio { display: block; color: #777; text-align: center; padding: 8px 2px; }
.planilhaFavDica { color: #999; font-size: 0.7rem; text-align: center; margin-top: 6px; }
/* clone que o FullCalendar arrasta: mesma cara do item, acima do calendário */
.planilhaFavItem.fc-dragging { z-index: 9999; opacity: 0.8; width: 170px; }

/* Dialog do treino, layout novo (dialogTreinoProposta.xhtml: abas Treino / Resultado / Conversa; o treinador escolhe o layout) */
.treinoTitulo { font-size: 1.15rem; font-weight: bold; }
.treinoSub { color: #888; font-weight: normal; margin-left: 8px; font-size: 0.9rem; }
.treinoPill { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 0.72rem; font-weight: bold; color: #fff; background: #5cb85c; margin-left: 8px; vertical-align: middle; }
.treinoPill.proposto { background: #0095da; } .treinoPill.perdido { background: #d9534f; } .treinoPill.avulso { background: #f0ad4e; }
.treinoKpis { display: flex; gap: 8px; } .treinoKpis > .treinoKpi { flex: 1 1 0; min-width: 0; } /* 4 quadros, ou 5 com a Fidelidade */
.treinoKpi { border: 1px solid #e3e3e3; border-radius: 4px; padding: 8px 6px; text-align: center; }
.treinoKpi .t { font-size: 0.68rem; color: #888; text-transform: uppercase; letter-spacing: .3px; }
.treinoKpi .v { font-size: 1.15rem; font-weight: bold; margin-top: 2px; min-height: 1.3em; }
.treinoKpi .p { font-size: 0.72rem; color: #888; }
.treinoDuas { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.treinoDuas > div { flex: 1; min-width: 0; }
.treinoDuas > div:first-child { flex: 2; } .treinoDuas > div:last-child { flex: 3; } /* mapa 2/5, parciais 3/5 (mesma divisão dos quadros de cima) */
/* gráficos da atividade na aba Resultado (card 3819): mesmos do mapa interativo, abaixo das parciais */
.treinoGraficosBox { margin-top: 14px; border-top: 1px solid #e5e5e5; padding-top: 8px; }
.treinoGraficosTit { font-weight: bold; color: #555; margin-bottom: 4px; }
/* o dialog do treino é fixo na tela: o conteúdo das abas rola dentro dele (título, abas e Salvar sempre à vista) */
#dialogTreinoProposta .ui-tabs-panels { max-height: calc(100vh - 230px); overflow-y: auto; overflow-x: hidden; }
/* mapa e gráficos menores que na janela do Mapa: a aba Resultado cabe melhor no notebook (o resto rola) */
#tpGraficosBox .av2-mapa { height: 280px; }
#tpGraficosBox .av2-area { height: 130px; }
/* campo Favorito colado na estrela (linha das abas do layout novo) */
.treinoFavoritoGrupo .ui-autocomplete-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.treinoFavoritoGrupo .ui-button { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.treinoMets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.treinoMet { flex: 1 1 0; min-width: 80px; max-width: 170px; border: 1px solid #e3e3e3; border-radius: 4px; padding: 3px 8px; font-size: 0.85rem; font-weight: bold; color: #333; background: #fafafa; }
.treinoMet span { display: block; font-size: 0.68rem; font-weight: normal; color: #888; text-transform: uppercase; }
.treinoMapaImg { width: 100%; max-height: 190px; object-fit: cover; border-radius: 4px; display: block; }
.treinoMuted { color: #888; }
.treinoFala { background: #f4f8fb; border-left: 3px solid #0095da; padding: 8px 10px; border-radius: 3px; margin-bottom: 10px; }
.treinoFalaTit { font-size: 0.72rem; text-transform: uppercase; color: #0095da; font-weight: bold; letter-spacing: 0.3px; }
.treinoSeg { margin-bottom: 8px; }
.treinoSeg a { display: inline-block; padding: 3px 10px; border: 1px solid #ccc; color: #555; text-decoration: none; margin-right: -1px; font-size: 0.85rem; cursor: pointer; }
.treinoSeg a:first-child { border-radius: 3px 0 0 3px; } .treinoSeg a:last-child { border-radius: 0 3px 3px 0; }
.treinoSeg a.on { background: #0095da; border-color: #0095da; color: #fff; }
.treinoMenuMais { width: 250px !important; white-space: nowrap; }
.treinoBadge { background: #0095da; color: #fff; border-radius: 8px; padding: 0 6px; font-size: 0.72rem; margin-left: 4px; }
.treinoBadge.treinoNovo { background: #f0ad4e; }
/* setas do cabeçalho: botões pequenos no padrão do recolher lista de alunos */
.ui-button.treinoNav { width: 26px; height: 24px; margin: 0; vertical-align: middle; } .ui-button.treinoNav .ui-icon { font-size: 14px; } .ui-button.treinoNav:hover { background: #e6e6e6; }
.treinoPill.relogioOk { background: #fff; color: #3c763d; border: 1px solid #3c763d; }
.treinoPill.relogioNao { background: #fff; color: #b94a48; border: 1px solid #b94a48; }
a.treinoPillLink, a.treinoPillLink:hover, a.treinoPillLink:focus { text-decoration: none; cursor: pointer; }
.treinoPill.relogioAlt { background: #fff; color: #a86500; border: 1px solid #d58512; }
a.treinoPillLink.relogioAlt:hover { background: #d58512; color: #fff; } a.treinoPillLink.relogioNao:hover { background: #b94a48; color: #fff; } a.treinoPillLink.relogioOk:hover { background: #3c763d; color: #fff; }
@media (max-width: 700px) {
    .treinoKpis { grid-template-columns: repeat(2, 1fr); }
    .treinoDuas { flex-direction: column; }
}

/* Planilha: recolher o painel da esquerda (botão « da barra de ícones) */
.planilhaAlunosRecolhidos .planilhaBtnRecolheAlunos .fa { transform: rotate(180deg); }
.planilhaAlunosRecolhidos > .ui-panelgrid-content > .ui-grid-row > .ui-grid-col-4 { display: none; }
.planilhaAlunosRecolhidos > .ui-panelgrid-content > .ui-grid-row > .ui-grid-col-8 { width: 100%; }

/* Planilha: barra de ícones compacta (flag Novidades da Planilha) — « colado à esquerda, X à direita, resto centralizado */
.toolbarPlanilhaCompacta { position: relative; padding-left: 46px !important; padding-right: 46px !important; }
.toolbarPlanilhaCompacta > .ui-toolbar-group-left { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.toolbarPlanilhaCompacta .ui-button { width: 32px !important; margin: 0; }
.toolbarPlanilhaCompacta .ui-separator { margin: 0 1px; }
.toolbarPlanilhaCompacta .planilhaBtnRecolheAlunos, .toolbarPlanilhaCompacta .planilhaBtnFechar { position: absolute; top: 50%; margin-top: -14px; }
.toolbarPlanilhaCompacta .planilhaBtnRecolheAlunos { left: 6px; }
/* estrela dos Treinos Favoritos colada à direita do « (só na barra mensal); abre espaço só quando ela existe */
.toolbarPlanilhaCompacta .planilhaBtnFavoritos { position: absolute; top: 50%; margin-top: -14px; left: 42px; }
.toolbarPlanilhaCompacta:has(.planilhaBtnFavoritos) { padding-left: 82px !important; }
.toolbarPlanilhaCompacta .planilhaBtnFechar { right: 6px; }
/* botão da coluna Resumo colado à esquerda do X (só na barra mensal); abre espaço só quando ele existe */
.toolbarPlanilhaCompacta .planilhaBtnResumo { position: absolute; top: 50%; margin-top: -14px; right: 42px; }
.toolbarPlanilhaCompacta:has(.planilhaBtnResumo) { padding-right: 82px !important; }
.toolbarPlanilhaCompacta .planilhaBtnFechar .ui-button-text { padding-left: 0 !important; padding-right: 0 !important; text-align: center; }
.toolbarPlanilhaCompacta .planilhaSepRecolhe { display: none !important; }
/* regra separada: navegador sem :has() descarta a regra inteira */
.toolbarPlanilhaCompacta .ui-separator:has(+ .planilhaBtnFechar) { display: none !important; }
.toolbarPlanilhaCompacta .ui-separator:has(+ .planilhaBtnResumo) { display: none !important; }
/* cabeçalho do aluno (indicadores, teste, RP, financeiro...) com botões menores, junto com a barra compacta */
.cabecalhoCompacto .ui-button { width: 28px !important; height: 24px; }
.cabecalhoCompacto .ui-button .ui-icon { margin-top: -8px; }
/* coluna Resumo: total do mês numa linha só embaixo de toda a planilha, semana de hoje destacada e setas de mês ao lado do título */
.planilhaComColunaResumo .fc-resumo-total { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; padding: 6px 10px; border-top: 2px solid #0095da; background: #eef7fc; font-size: 0.85rem; color: #333; }
.planilhaComColunaResumo .fc-resumo-total > div { display: inline-block; } /* título, rótulos e valores lado a lado */
.planilhaComColunaResumo .fc-resumo-total .fc-resumo-linha { margin: 0 0 0 14px; }
.planilhaComColunaResumo .fc-resumo-total .fc-resumo-rotulo::after { content: ":"; }
.planilhaComColunaResumo .fc-resumo-total-titulo { font-weight: bold; color: #0095da; }
.planilhaComColunaResumo .fc-row.fc-semana-atual { outline: 2px solid #0095da; outline-offset: -2px; z-index: 3; }
.planilhaComColunaResumo .fc-semana-atual > .fc-resumo-semana { background: #eef7fc; border-color: #0095da; }
.planilhaComColunaResumo .fc-toolbar .fc-right { display: flex; align-items: center; gap: 12px; }
.planilhaComColunaResumo .fc-toolbar .fc-right > * { margin: 0 !important; } /* o FullCalendar põe margem nos itens depois do 1o */
.planilhaComColunaResumo .planilhaSetaMes { border: 1px solid #ccc; background: #fff; border-radius: 3px; padding: 2px 10px; cursor: pointer; color: #555; }
.planilhaComColunaResumo .planilhaSetaMes:hover { background: #f0f0f0; }
/* coluna Resumo escondida pelas Configurações da Planilha (o total do mês embaixo continua) */
.planilhaComColunaResumo.planilhaResumoOculto .fc-dayGridMonth-view .fc-row { margin-right: 0 !important; }
.planilhaComColunaResumo.planilhaResumoOculto .fc-resumo-semana { display: none; }
/* coluna Resumo: copiar / colar a semana (canto de baixo da célula) */
.planilhaComColunaResumo .fc-resumo-acoes { text-align: right; margin-top: 4px; }
.planilhaComColunaResumo .fc-resumo-acoes button { border: 1px solid #ccc; background: #fff; border-radius: 3px; padding: 1px 6px; margin-left: 3px; cursor: pointer; color: #555; font-size: 0.75rem; }
.planilhaComColunaResumo .fc-resumo-acoes button:hover { background: #0095da; border-color: #0095da; color: #fff; }

/* quadro Plano SisRUN na home: coluna do rótulo sem quebrar "Data de Vencimento" / "Limite de Alunos" */
.rotuloPlanoSisRun { width: 34% !important; white-space: nowrap; }
/* card de renovação do plano SisRUN na home (autoatendimento): cabeçalho azul; vermelho com <= 3 dias ou vencido */
.cardRenovacao > .ui-panel-titlebar { background: #e8f4fd !important; color: #1f5f8b !important; border-color: #c5def2 !important; }
.cardRenovacao { border-color: #c5def2 !important; }
.cardRenovacaoUrgente > .ui-panel-titlebar { background: #f2dede !important; color: #b94a48 !important; border-color: #ebccd1 !important; }
.cardRenovacaoUrgente { border-color: #ebccd1 !important; }

/* Texto explicativo em cima dos gráficos gerenciais (Saldo das Contas, Integração com Site) */
.graficoExplica {margin: 4px 0 10px 0; color: #555; font-size: 13px; line-height: 1.45}
.graficoExplica b {color: #333}

/* Páginas de ajuda das novidades (pages/ajuda): texto de leitura com prints */
.ajuda { font-size: 14px; line-height: 1.6; color: #333; text-align: left; padding: 4px 10px 10px 10px; }
.ajuda h3 { font-size: 17px; color: #1a4f8b; margin: 26px 0 6px 0; padding-bottom: 4px; border-bottom: 1px solid #dde6ef; }
.ajuda p { margin: 6px 0; }
.ajuda ul, .ajuda ol { margin: 6px 0 8px 0; padding-left: 22px; }
.ajuda li { margin: 3px 0; }
.ajudaQuadro { background: #f8f8f8; border-radius: 8px; padding: 10px 14px; margin: 10px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ajudaQuadro > i { color: #1a4f8b; margin-right: 6px; }
.ajudaDica { background: #fff8e1; border-left: 4px solid #f0ad4e; border-radius: 4px; padding: 8px 12px; margin: 10px 0; }
.ajudaIndice { columns: 2; }
.ajudaIndice a { color: #1a4f8b; }
.ajudaPrint { display: block; max-width: min(100%, 720px); margin: 10px auto; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ajudaLegenda { text-align: center; color: #777; font-size: 12px; margin-top: -4px; }
.ajudaCelulares { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.ajudaCelulares > div { width: 190px; text-align: center; font-size: 12px; color: #555; }
.ajudaCelulares img { width: 190px; border: 1px solid #ccc; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ajudaTabela { border-collapse: collapse; width: 100%; margin: 8px 0; }
.ajudaTabela th, .ajudaTabela td { border: 1px solid #dde6ef; padding: 6px 9px; vertical-align: top; text-align: left; }
.ajudaTabela th { background: #eef4fa; color: #1a4f8b; }