/* ==================================================
   PORTAL DO ASSOCIADO — TEMA COMPARTILHADO

   Usado por todas as páginas do associado junto com
   global.css, header.css e footer.css (do template).
================================================== */

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* ==================================================
   HEADER
================================================== */

.topbar{
    justify-content:space-between;
}

.topbar .logo{
    margin-right:0;
}

.topbar .logo img{
    max-height:55px;
    border-radius:8px;
}

.usuario-topo{
    position:relative;
}

.btn-usuario{
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 8px 6px 16px;
    border-radius:40px;
    color:var(--branco);
}

.btn-usuario:hover,
.btn-usuario[aria-expanded="true"]{
    background:rgba(255,255,255,.12);
}

.btn-usuario > i{
    font-size:12px;
}

.usuario-topo-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1.25;
}

.usuario-topo-info strong{
    font-size:15px;
}

.usuario-topo-info small{
    color:rgba(255,255,255,.75);
    font-size:13px;
}

.avatar-topo{
    width:40px;
    height:40px;
    border:2px solid rgba(255,255,255,.7);
    border-radius:50%;
    font-size:14px;
}

.menu-usuario{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:220px;
    padding:8px;
    border-radius:var(--radius-md);
    background:var(--branco);
    box-shadow:var(--shadow-lg);
    z-index:1100;
}

.menu-usuario[hidden]{
    display:none;
}

.menu-usuario button{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:11px 14px;
    border-radius:var(--radius-sm);
    color:var(--azul-escuro);
    font-size:15px;
    font-weight:600;
    text-align:left;
}

.menu-usuario button i{
    width:18px;
    color:var(--azul);
}

.menu-usuario button:hover{
    background:#EAF1FF;
}

.navbar a.ativo{
    text-decoration:underline;
    text-underline-offset:8px;
    text-decoration-thickness:2px;
}

@media (max-width:768px){

    .topbar{
        gap:12px;
        padding:0 16px;
    }

    .topbar .logo img{
        max-height:42px;
    }

    .usuario-topo-info,
    .btn-usuario > i{
        display:none;
    }

    .btn-usuario{
        padding:4px;
    }

    /* aberto pelo botão de menu: desce abaixo da barra azul */
    .navbar.aberto{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        height:auto;
        margin:0;
        padding:10px 0;
        background:var(--azul);
        box-shadow:var(--shadow-lg);
    }

    .navbar.aberto > a{
        height:48px;
        padding:0 24px;
    }

    .perfil,
    .pagina-portal{
        padding-top:110px;
    }

}


/* ==================================================
   AVATARES COM INICIAIS
================================================== */

.avatar-iniciais{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--branco);
    background:linear-gradient(135deg,var(--azul),var(--azul-escuro));
    font-weight:700;
    letter-spacing:1px;
}

.avatar-iniciais.foto-associado{
    font-size:46px;
}

.dependente-item .avatar-iniciais{
    width:65px;
    height:65px;
    border-radius:50%;
    font-size:22px;
}


/* ==================================================
   BOTÕES E CAMPOS
================================================== */

.btn-apve{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 22px;
    border:1px solid var(--azul);
    border-radius:40px;
    background:var(--azul);
    color:var(--branco);
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.btn-apve:hover{
    background:var(--azul-escuro);
    border-color:var(--azul-escuro);
}

.btn-apve.secundario{
    background:var(--branco);
    color:var(--azul);
}

.btn-apve.secundario:hover{
    background:#EAF1FF;
}

.btn-apve:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.campo-apve{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
}

.campo-apve > span{
    color:var(--azul-escuro);
    font-size:14px;
    font-weight:600;
}

.form-control{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #D1D5DB;
    border-radius:var(--radius-sm);
    background:var(--branco);
    color:var(--texto);
    font:inherit;
    font-size:15px;
}

.form-control:focus{
    outline:none;
    border-color:var(--azul);
    box-shadow:0 0 0 3px rgba(0,74,173,.15);
}

.campos-lado-a-lado{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.busca-cpf{
    display:flex;
    align-items:flex-end;
    gap:10px;
}

.busca-cpf .campo-apve{
    flex:1;
}

.busca-cpf .btn-apve{
    height:46px;
    margin-bottom:16px;
}

.regras-senha{
    margin:0;
    padding:14px 14px 14px 32px;
    border-radius:var(--radius-sm);
    background:#F8FAFC;
    color:var(--texto-claro);
    font-size:14px;
}

@media (max-width:560px){

    .campos-lado-a-lado{
        grid-template-columns:1fr;
        gap:0;
    }

}


/* ==================================================
   MODAIS DO NOVO VISUAL
================================================== */

.modal-apve{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:15px;
    z-index:10000;
}

.modal-apve.ativo{
    display:flex;
}

.modal-apve .modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(3px);
}

body.modal-aberto{
    overflow:hidden;
}

.modal-apve-conteudo{
    position:relative;
    padding:0;
    width:min(560px, 100%);
    max-height:calc(100vh - 30px);
    overflow-y:auto;
    border-radius:var(--radius-lg);
    background:var(--branco);
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    z-index:1;
}

.modal-apve-cabecalho{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 26px;
    border-bottom:1px solid #E5E7EB;
}

.modal-apve-cabecalho h2{
    color:var(--azul-escuro);
    font-size:21px;
}

.btn-fechar-modal-apve{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:40px;
    height:40px;
    border:1px solid #E5E7EB;
    border-radius:50%;
    color:var(--texto-claro);
}

.btn-fechar-modal-apve:hover{
    color:var(--vermelho);
    border-color:var(--vermelho);
}

.modal-apve-corpo{
    padding:24px 26px;
    color:var(--texto);
    font-size:15px;
}

.modal-apve-rodape{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    padding:18px 26px;
    border-top:1px solid #E5E7EB;
}

#modalcentralizadoerro .modal-apve-corpo{
    color:#991B1B;
    font-weight:600;
}


/* DIVULGAÇÃO DE PLANOS */

.modal-divulgacao .modal-apve-conteudo{
    width:min(900px, 100%);
    overflow:hidden;
}

.modal-divulgacao .btn-fechar-modal-apve{
    position:absolute;
    top:12px;
    right:12px;
    background:var(--branco);
    z-index:2;
}

.seta-divulgacao{
    position:absolute;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:var(--azul);
    box-shadow:var(--shadow-sm);
    transform:translateY(-50%);
}

.seta-divulgacao.anterior{
    left:12px;
}

.seta-divulgacao.proxima{
    right:12px;
}


/* ==================================================
   ÁREA DO ASSOCIADO (perfil.html)
================================================== */

.status.inativo{
    color:#B91C1C;
    background:#FEE2E2;
}

.dependente-item.desativado{
    opacity:.6;
}

.carregando-perfil,
.vazio-perfil{
    padding:25px 0;
    color:var(--texto-claro);
    font-size:15px;
    text-align:center;
}

.carregando-perfil i{
    margin-right:8px;
}

#faturas{
    scroll-margin-top:100px;
}

.topo-faturas{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
}

.topo-faturas .titulo-servicos{
    margin:0;
}

.filtro-faturas{
    display:inline-flex;
    padding:4px;
    border-radius:40px;
    background:#EEF2F7;
}

.filtro-faturas button{
    padding:8px 16px;
    border-radius:40px;
    color:var(--texto-claro);
    font-size:14px;
    font-weight:600;
}

.filtro-faturas button.ativo{
    background:var(--branco);
    color:var(--azul);
    box-shadow:var(--shadow-sm);
}

.status-faturas{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.status-boleto.renegociado{
    color:#6D28D9;
    background:#EDE9FE;
}

.link-todas-faturas{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    color:var(--azul);
    font-size:15px;
    font-weight:600;
}

.link-todas-faturas:hover{
    text-decoration:underline;
}

.link-todas-faturas[hidden]{
    display:none;
}

.area-renegociacao:not(:empty){
    margin-top:20px;
}

.titulo-renegociacao{
    margin-bottom:12px;
    color:var(--azul-escuro);
    font-size:17px;
}

.pagamento-detalhe{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:25px 20px;
    border:1px solid #E5E7EB;
    border-radius:var(--radius-md);
    background:#F8FAFC;
    text-align:center;
}

.pagamento-detalhe > i{
    color:var(--azul);
    font-size:30px;
}

.pagamento-detalhe h4{
    color:var(--azul-escuro);
    font-size:18px;
}

.pagamento-detalhe p{
    color:var(--texto-claro);
    font-size:14px;
}

.codigo-boleto{
    display:block;
    width:100%;
    padding:12px 14px;
    border:1px dashed #CBD5E1;
    border-radius:var(--radius-sm);
    background:var(--branco);
    color:var(--azul-escuro);
    font-family:Consolas,'Courier New',monospace;
    font-size:14px;
    word-break:break-all;
}

.pagamento-detalhe .acoes-pagamento{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:5px;
}

.btn-acao-pagamento{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 20px;
    border:1px solid var(--azul);
    border-radius:40px;
    background:var(--azul);
    color:var(--branco);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

.btn-acao-pagamento:hover{
    background:var(--azul-escuro);
}

.btn-acao-pagamento.secundario{
    background:var(--branco);
    color:var(--azul);
}

.btn-acao-pagamento.secundario:hover{
    background:#EAF1FF;
}


/* ==================================================
   PÁGINAS INTERNAS (contratos, convênio, IR, exames)
================================================== */

.pagina-portal{
    min-height:100vh;
    padding:120px 0 80px;
    background:var(--cinza);
}

.cabecalho-pagina{
    margin-bottom:28px;
}

.cabecalho-pagina h1{
    color:var(--azul-escuro);
    font-size:32px;
    line-height:1.2;
}

.cabecalho-pagina p{
    margin-top:6px;
    color:var(--texto-claro);
    font-size:16px;
}

.card-portal{
    margin-bottom:28px;
    padding:28px 30px;
    border-radius:var(--radius-lg);
    background:var(--branco);
    box-shadow:var(--shadow-sm);
}

.card-portal > h2{
    margin-bottom:18px;
    color:var(--azul-escuro);
    font-size:21px;
}

.card-portal > p.ajuda-card{
    margin:-10px 0 18px;
    color:var(--texto-claro);
    font-size:14px;
}

.card-portal .tabela-portal{
    overflow-x:auto;
}

@media (max-width:768px){

    .cabecalho-pagina h1{
        font-size:26px;
    }

    .card-portal{
        padding:22px 18px;
    }

}


/* ==================================================
   DATATABLES NO NOVO VISUAL
================================================== */

table.dataTable,
.tabela-portal table{
    width:100% !important;
    border-collapse:collapse !important;
    color:var(--texto);
    font-size:14px;
}

table.dataTable thead th,
table.dataTable thead td{
    padding:12px 14px !important;
    border-bottom:none !important;
    background:#F1F5F9;
    color:var(--texto-claro);
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-align:left;
    text-transform:uppercase;
}

table.dataTable thead th:first-child{
    border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}

table.dataTable thead th:last-child{
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

table.dataTable tbody td{
    padding:14px !important;
    border-top:1px solid #EEF2F7 !important;
}

table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1{
    background:var(--branco) !important;
    box-shadow:none !important;
}

table.dataTable.display tbody tr:hover > *{
    background:#F8FAFC !important;
    box-shadow:none !important;
}

table.dataTable.no-footer{
    border-bottom:none !important;
}

table.dataTable td i[onclick],
table.dataTable td[onclick],
table.dataTable td[style*="pointer"]{
    color:var(--azul);
    cursor:pointer;
}

table.dataTable td .bi,
table.dataTable td .fa-solid{
    font-size:17px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    height:38px;
    margin-left:8px;
    padding:0 12px;
    border:1px solid #D1D5DB;
    border-radius:var(--radius-sm);
    background:var(--branco);
    font:inherit;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length{
    margin-bottom:14px;
    color:var(--texto-claro);
    font-size:14px;
}

.dataTables_wrapper .dataTables_filter label{
    display:inline-flex;
    align-items:center;
    max-width:100%;
}

.dataTables_wrapper .dataTables_filter input{
    width:220px;
    max-width:100%;
}

@media (max-width:640px){

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length{
        float:none !important;
        text-align:left !important;
    }

    .dataTables_wrapper .dataTables_filter label{
        display:flex;
    }

    .dataTables_wrapper .dataTables_filter input{
        flex:1;
        width:auto;
    }

}

.dataTables_wrapper .dataTables_info{
    padding-top:16px !important;
    color:var(--texto-claro) !important;
    font-size:13px;
}

.dataTables_wrapper .dataTables_paginate{
    padding-top:12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    min-width:36px;
    margin-left:4px !important;
    padding:6px 12px !important;
    border:1px solid transparent !important;
    border-radius:var(--radius-sm) !important;
    color:var(--azul) !important;
    font-weight:600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    border-color:var(--azul) !important;
    background:#EAF1FF !important;
    color:var(--azul) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
    border-color:transparent !important;
    background:none !important;
    color:#9CA3AF !important;
}


/* ==================================================
   LOGIN (index.html)
================================================== */

.pagina-login{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    min-height:100vh;
    background:var(--cinza);
}

.login-marca{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:24px;
    padding:60px 8%;
    overflow:hidden;
    background:var(--azul);
    color:var(--branco);
}

.login-marca::after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-120px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:var(--vermelho);
    opacity:.9;
}

.login-marca > *{
    position:relative;
    z-index:1;
}

.login-marca img{
    width:120px;
    border-radius:14px;
}

.login-marca h1{
    max-width:460px;
    font-size:40px;
    line-height:1.15;
}

.login-marca p{
    max-width:440px;
    color:rgba(255,255,255,.85);
    font-size:17px;
}

.login-area{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
}

.login-card{
    width:min(440px, 100%);
    padding:40px 36px;
    border-radius:var(--radius-lg);
    background:var(--branco);
    box-shadow:var(--shadow-md);
}

.login-card h2{
    margin-bottom:6px;
    color:var(--azul-escuro);
    font-size:27px;
}

.login-card > p{
    margin-bottom:26px;
    color:var(--texto-claro);
}

.campo-icone{
    position:relative;
}

.campo-icone .form-control{
    padding-right:46px;
}

.campo-icone > i,
.campo-icone > button{
    position:absolute;
    top:50%;
    right:14px;
    color:var(--texto-claro);
    transform:translateY(-50%);
}

.login-card .btn-apve{
    width:100%;
    height:50px;
    margin-top:8px;
    font-size:16px;
}

.link-esqueci{
    display:block;
    margin:-4px 0 10px auto;
    color:var(--azul);
    font-size:14px;
    font-weight:600;
}

.link-esqueci:hover{
    text-decoration:underline;
}

.rodape-login{
    margin-top:26px;
    color:var(--texto-claro);
    font-size:13px;
    text-align:center;
}

@media (max-width:900px){

    .pagina-login{
        grid-template-columns:1fr;
    }

    .login-marca{
        padding:40px 24px;
        gap:14px;
    }

    .login-marca img{
        width:80px;
    }

    .login-marca h1{
        font-size:28px;
    }

    .login-marca::after{
        width:220px;
        height:220px;
        right:-90px;
        bottom:-90px;
    }

    .login-card{
        padding:32px 22px;
    }

}


/* ==================================================
   FOOTER
================================================== */

.footer-portal{
    margin-top:0;
    padding-top:20px;
}

.footer-portal .footer-bottom{
    margin-top:0;
    padding-top:0;
    border-top:none;
}